feat: migration of Container

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+.DS_Store

src/components/atoms/Container/Container.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import { Container, ContainerProps } from './Container'
+
+export default {
+  title: 'atoms/Container',
+  component: Container
+} as ComponentMeta<React.ComponentType<ContainerProps>>
+
+const Template: ComponentStory<React.ComponentType<ContainerProps>> = args => <Container {...args} />
+
+export const Primary = Template.bind({})
+Primary.args = {
+  children: "Hello world"
+}

src/components/atoms/Container/Container.styles.module.scss

@@ -0,0 +1,11 @@
+.container {
+    display: flex;
+}
+
+.centered {
+    align-items: center;
+}
+
+.vertical {
+    flex-direction: column;
+}

src/components/atoms/Container/Container.tsx

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react'
+
+import cx from 'classnames'
+
+import css from './Container.styles.module.scss'
+
+export type ContainerProps = {
+  isCentered?: boolean
+  isVertical?: boolean
+  id?: string
+  className?: string | string[]
+  children?: ReactNode | string
+}
+
+export const Container = ({ id, className, children, isCentered, isVertical }: ContainerProps) => (
+  <div
+    id={id}
+    className={cx(className, css.container, {
+      [css.centered]: isCentered,
+      [css.vertical]: isVertical
+    })}
+  >
+    {children}
+  </div>
+)

src/components/atoms/Container/index.ts

@@ -0,0 +1 @@
+export * from './Container'