From 72665fe069d707807e4bdd05c3d52395833849ff Mon Sep 17 00:00:00 2001
From: Uzhastin-Nikita <fosfor20@mail.ru>
Date: Thu, 31 Mar 2022 17:09:48 +0300
Subject: [PATCH] feat: migration of Container

---
 .gitignore                                    |  1 +
 .../atoms/Container/Container.stories.tsx     | 17 +++++++++++++
 .../Container/Container.styles.module.scss    | 11 ++++++++
 src/components/atoms/Container/Container.tsx  | 25 +++++++++++++++++++
 src/components/atoms/Container/index.ts       |  1 +
 5 files changed, 55 insertions(+)
 create mode 100644 src/components/atoms/Container/Container.stories.tsx
 create mode 100644 src/components/atoms/Container/Container.styles.module.scss
 create mode 100644 src/components/atoms/Container/Container.tsx
 create mode 100644 src/components/atoms/Container/index.ts

diff --git a/.gitignore b/.gitignore
index f06235c..0ca39c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 dist
+.DS_Store
diff --git a/src/components/atoms/Container/Container.stories.tsx b/src/components/atoms/Container/Container.stories.tsx
new file mode 100644
index 0000000..7eed233
--- /dev/null
+++ b/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"
+}
diff --git a/src/components/atoms/Container/Container.styles.module.scss b/src/components/atoms/Container/Container.styles.module.scss
new file mode 100644
index 0000000..df1774d
--- /dev/null
+++ b/src/components/atoms/Container/Container.styles.module.scss
@@ -0,0 +1,11 @@
+.container {
+    display: flex;
+}
+
+.centered {
+    align-items: center;
+}
+
+.vertical {
+    flex-direction: column;
+}
diff --git a/src/components/atoms/Container/Container.tsx b/src/components/atoms/Container/Container.tsx
new file mode 100644
index 0000000..6c922dd
--- /dev/null
+++ b/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>
+)
diff --git a/src/components/atoms/Container/index.ts b/src/components/atoms/Container/index.ts
new file mode 100644
index 0000000..fe8a50b
--- /dev/null
+++ b/src/components/atoms/Container/index.ts
@@ -0,0 +1 @@
+export * from './Container'