Cgd 29 add storybook and UI kit

.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
     sourceType: 'module'
   },
   plugins: ['@typescript-eslint/eslint-plugin'],
-  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
+  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', 'plugin:storybook/recommended'],
   root: true,
   env: {
     node: true,
@@ -19,4 +19,4 @@ module.exports = {
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-explicit-any': 'off'
   }
-}
+};

package.json

@@ -52,15 +52,15 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/node-logger": "^6.5.13",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-interactions": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/manager-webpack5": "^6.5.15",
+    "@storybook/node-logger": "^6.5.15",
     "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.13",
+    "@storybook/react": "^6.5.15",
     "@storybook/testing-library": "^0.0.13",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
@@ -74,6 +74,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.9",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.10",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^3.2.1",
     "prop-types": "^15.8.1",

src/UI/buttons/DashedButton/DashedButton.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { DefaultButtonProps } from '../DefaultButton/DefaultButton'
+import DashedButton from './DashedButton'
+
+export default {
+  title: 'UI/buttons/DashedButton',
+  component: DashedButton,
+  argTypes: {
+    borderRadius: {
+      type: 'number',
+      defaultValue: 50
+    },
+    children: {
+      type: 'ReactNode',
+      defaultValue: 'Da best button'
+    },
+    block: {
+      type: 'boolean',
+      description: 'Button stretches according to its parent width',
+      defaultValue: false
+    },
+    icon: {
+      type: 'ReactNode',
+      defaultValue: (
+        <svg
+          width='12'
+          height='16'
+          viewBox='0 0 12 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <path
+            d='M11.0623 3.35796C10.781 2.74323 10.3812 2.19078 9.87097 1.71868C8.83436 0.756401 7.45825 0.226044 5.99976 0.226044C4.54128 0.226044 3.16517 0.756401 2.12856 1.71667C1.61829 2.19078 1.21851 2.74122 0.937265 3.35796C0.643961 4.00082 0.4953 4.68185 0.4953 5.38497V5.92738C0.4953 6.05194 0.595747 6.15238 0.7203 6.15238H1.80512C1.92968 6.15238 2.03012 6.05194 2.03012 5.92738V5.38497C2.03012 3.38609 3.81003 1.76087 5.99976 1.76087C8.1895 1.76087 9.96941 3.38609 9.96941 5.38497C9.96941 6.20462 9.67811 6.97604 9.12566 7.6189C8.57923 8.25573 7.8078 8.71176 6.95401 8.90462C6.46584 9.01511 6.02588 9.29033 5.7145 9.68408C5.4042 10.0765 5.23507 10.5619 5.23436 11.0622V11.693C5.23436 11.8176 5.33481 11.918 5.45936 11.918H6.54418C6.66874 11.918 6.76918 11.8176 6.76918 11.693V11.0622C6.76918 10.7468 6.98816 10.4696 7.29151 10.4013C8.46472 10.1361 9.52945 9.50328 10.2908 8.61935C10.6745 8.17136 10.9739 7.67314 11.1808 7.13274C11.3957 6.57225 11.5042 5.98363 11.5042 5.38497C11.5042 4.68185 11.3556 3.99881 11.0623 3.35796ZM5.99976 13.5252C5.37901 13.5252 4.87476 14.0294 4.87476 14.6502C4.87476 15.2709 5.37901 15.7752 5.99976 15.7752C6.62052 15.7752 7.12476 15.2709 7.12476 14.6502C7.12476 14.0294 6.62052 13.5252 5.99976 13.5252Z'
+            fill='black'
+            fill-opacity='0.85'
+          />
+        </svg>
+      )
+    }
+  }
+}
+
+const Template = (args: DefaultButtonProps) => <DashedButton {...args} />
+
+export const Default = Template.bind({})
+
+Default.args = {
+  icon: null
+}
+
+export const Icon = Template.bind({})

src/UI/buttons/DashedButton/DashedButton.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import DefaultButton, { DefaultButtonProps } from '../DefaultButton/DefaultButton'
+
+const DashedButton: React.FC<DefaultButtonProps> = ({ children, ...rest }) => {
+  return (
+    <DefaultButton {...rest} type='dashed'>
+      {children}
+    </DefaultButton>
+  )
+}
+
+export default DashedButton

src/UI/buttons/DefaultButton/DefaultButton.stories.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import DefaultButton, { DefaultButtonProps } from './DefaultButton'
+
+export default {
+  title: 'UI/buttons/DefaultButton',
+  component: DefaultButton,
+  argTypes: {
+    borderRadius: {
+      type: 'number',
+      defaultValue: 50
+    },
+    children: {
+      type: 'ReactNode',
+      defaultValue: 'Da best button'
+    },
+    block: {
+      type: 'boolean',
+      description: 'Button stretches according to its parent width',
+      defaultValue: false
+    },
+    icon: {
+      type: 'ReactNode',
+      defaultValue: (
+        <svg
+          width='12'
+          height='16'
+          viewBox='0 0 12 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <path
+            d='M11.0623 3.35796C10.781 2.74323 10.3812 2.19078 9.87097 1.71868C8.83436 0.756401 7.45825 0.226044 5.99976 0.226044C4.54128 0.226044 3.16517 0.756401 2.12856 1.71667C1.61829 2.19078 1.21851 2.74122 0.937265 3.35796C0.643961 4.00082 0.4953 4.68185 0.4953 5.38497V5.92738C0.4953 6.05194 0.595747 6.15238 0.7203 6.15238H1.80512C1.92968 6.15238 2.03012 6.05194 2.03012 5.92738V5.38497C2.03012 3.38609 3.81003 1.76087 5.99976 1.76087C8.1895 1.76087 9.96941 3.38609 9.96941 5.38497C9.96941 6.20462 9.67811 6.97604 9.12566 7.6189C8.57923 8.25573 7.8078 8.71176 6.95401 8.90462C6.46584 9.01511 6.02588 9.29033 5.7145 9.68408C5.4042 10.0765 5.23507 10.5619 5.23436 11.0622V11.693C5.23436 11.8176 5.33481 11.918 5.45936 11.918H6.54418C6.66874 11.918 6.76918 11.8176 6.76918 11.693V11.0622C6.76918 10.7468 6.98816 10.4696 7.29151 10.4013C8.46472 10.1361 9.52945 9.50328 10.2908 8.61935C10.6745 8.17136 10.9739 7.67314 11.1808 7.13274C11.3957 6.57225 11.5042 5.98363 11.5042 5.38497C11.5042 4.68185 11.3556 3.99881 11.0623 3.35796ZM5.99976 13.5252C5.37901 13.5252 4.87476 14.0294 4.87476 14.6502C4.87476 15.2709 5.37901 15.7752 5.99976 15.7752C6.62052 15.7752 7.12476 15.2709 7.12476 14.6502C7.12476 14.0294 6.62052 13.5252 5.99976 13.5252Z'
+            fill='black'
+            fill-opacity='0.85'
+          />
+        </svg>
+      )
+    }
+  }
+}
+
+const Template = (args: DefaultButtonProps) => <DefaultButton {...args} />
+
+export const Default = Template.bind({})
+
+Default.args = {
+  icon: null
+}
+
+export const Icon = Template.bind({})

src/UI/buttons/DefaultButton/DefaultButton.tsx

@@ -0,0 +1,17 @@
+import { Button, ButtonProps } from 'antd'
+import React, { ReactNode } from 'react'
+
+export type DefaultButtonProps = {
+  children: ReactNode
+  borderRadius?: number
+} & ButtonProps
+
+const DefaultButton: React.FC<DefaultButtonProps> = ({ children, borderRadius, ...rest }) => {
+  return (
+    <Button {...rest} style={{ borderRadius: `${borderRadius || 50}px` }}>
+      {children}
+    </Button>
+  )
+}
+
+export default DefaultButton

src/UI/buttons/GhostButton/GhostButton.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { DefaultButtonProps } from '../DefaultButton/DefaultButton'
+import GhostButton from './GhostButton'
+
+export default {
+  title: 'UI/buttons/GhostButton',
+  component: GhostButton,
+  argTypes: {
+    borderRadius: {
+      type: 'number',
+      defaultValue: 50
+    },
+    children: {
+      type: 'ReactNode',
+      defaultValue: 'Da best button'
+    },
+    block: {
+      type: 'boolean',
+      description: 'Button stretches according to its parent width',
+      defaultValue: false
+    },
+    icon: {
+      type: 'ReactNode',
+      defaultValue: (
+        <svg
+          width='12'
+          height='16'
+          viewBox='0 0 12 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <path
+            d='M11.0623 3.35796C10.781 2.74323 10.3812 2.19078 9.87097 1.71868C8.83436 0.756401 7.45825 0.226044 5.99976 0.226044C4.54128 0.226044 3.16517 0.756401 2.12856 1.71667C1.61829 2.19078 1.21851 2.74122 0.937265 3.35796C0.643961 4.00082 0.4953 4.68185 0.4953 5.38497V5.92738C0.4953 6.05194 0.595747 6.15238 0.7203 6.15238H1.80512C1.92968 6.15238 2.03012 6.05194 2.03012 5.92738V5.38497C2.03012 3.38609 3.81003 1.76087 5.99976 1.76087C8.1895 1.76087 9.96941 3.38609 9.96941 5.38497C9.96941 6.20462 9.67811 6.97604 9.12566 7.6189C8.57923 8.25573 7.8078 8.71176 6.95401 8.90462C6.46584 9.01511 6.02588 9.29033 5.7145 9.68408C5.4042 10.0765 5.23507 10.5619 5.23436 11.0622V11.693C5.23436 11.8176 5.33481 11.918 5.45936 11.918H6.54418C6.66874 11.918 6.76918 11.8176 6.76918 11.693V11.0622C6.76918 10.7468 6.98816 10.4696 7.29151 10.4013C8.46472 10.1361 9.52945 9.50328 10.2908 8.61935C10.6745 8.17136 10.9739 7.67314 11.1808 7.13274C11.3957 6.57225 11.5042 5.98363 11.5042 5.38497C11.5042 4.68185 11.3556 3.99881 11.0623 3.35796ZM5.99976 13.5252C5.37901 13.5252 4.87476 14.0294 4.87476 14.6502C4.87476 15.2709 5.37901 15.7752 5.99976 15.7752C6.62052 15.7752 7.12476 15.2709 7.12476 14.6502C7.12476 14.0294 6.62052 13.5252 5.99976 13.5252Z'
+            fill='black'
+            fill-opacity='0.85'
+          />
+        </svg>
+      )
+    }
+  }
+}
+
+const Template = (args: DefaultButtonProps) => <GhostButton {...args} />
+
+export const Default = Template.bind({})
+
+Default.args = {
+  icon: null
+}
+
+export const Icon = Template.bind({})

src/UI/buttons/GhostButton/GhostButton.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import DefaultButton, { DefaultButtonProps } from '../DefaultButton/DefaultButton'
+
+const GhostButton: React.FC<DefaultButtonProps> = ({ children, ...rest }) => {
+  return (
+    <DefaultButton {...rest} type='ghost'>
+      {children}
+    </DefaultButton>
+  )
+}
+
+export default GhostButton

src/UI/buttons/LinkButton/LinkButton.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { DefaultButtonProps } from '../DefaultButton/DefaultButton'
+import LinkButton from './LinkButton'
+
+export default {
+  title: 'UI/buttons/LinkButton',
+  component: LinkButton,
+  argTypes: {
+    borderRadius: {
+      type: 'number',
+      defaultValue: 50
+    },
+    children: {
+      type: 'ReactNode',
+      defaultValue: 'Da best button'
+    },
+    block: {
+      type: 'boolean',
+      description: 'Button stretches according to its parent width',
+      defaultValue: false
+    },
+    icon: {
+      type: 'ReactNode',
+      defaultValue: (
+        <svg
+          width='12'
+          height='16'
+          viewBox='0 0 12 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <path
+            d='M11.0623 3.35796C10.781 2.74323 10.3812 2.19078 9.87097 1.71868C8.83436 0.756401 7.45825 0.226044 5.99976 0.226044C4.54128 0.226044 3.16517 0.756401 2.12856 1.71667C1.61829 2.19078 1.21851 2.74122 0.937265 3.35796C0.643961 4.00082 0.4953 4.68185 0.4953 5.38497V5.92738C0.4953 6.05194 0.595747 6.15238 0.7203 6.15238H1.80512C1.92968 6.15238 2.03012 6.05194 2.03012 5.92738V5.38497C2.03012 3.38609 3.81003 1.76087 5.99976 1.76087C8.1895 1.76087 9.96941 3.38609 9.96941 5.38497C9.96941 6.20462 9.67811 6.97604 9.12566 7.6189C8.57923 8.25573 7.8078 8.71176 6.95401 8.90462C6.46584 9.01511 6.02588 9.29033 5.7145 9.68408C5.4042 10.0765 5.23507 10.5619 5.23436 11.0622V11.693C5.23436 11.8176 5.33481 11.918 5.45936 11.918H6.54418C6.66874 11.918 6.76918 11.8176 6.76918 11.693V11.0622C6.76918 10.7468 6.98816 10.4696 7.29151 10.4013C8.46472 10.1361 9.52945 9.50328 10.2908 8.61935C10.6745 8.17136 10.9739 7.67314 11.1808 7.13274C11.3957 6.57225 11.5042 5.98363 11.5042 5.38497C11.5042 4.68185 11.3556 3.99881 11.0623 3.35796ZM5.99976 13.5252C5.37901 13.5252 4.87476 14.0294 4.87476 14.6502C4.87476 15.2709 5.37901 15.7752 5.99976 15.7752C6.62052 15.7752 7.12476 15.2709 7.12476 14.6502C7.12476 14.0294 6.62052 13.5252 5.99976 13.5252Z'
+            fill='black'
+            fill-opacity='0.85'
+          />
+        </svg>
+      )
+    }
+  }
+}
+
+const Template = (args: DefaultButtonProps) => <LinkButton {...args} />
+
+export const Default = Template.bind({})
+
+Default.args = {
+  icon: null
+}
+
+export const Icon = Template.bind({})

src/UI/buttons/LinkButton/LinkButton.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import DefaultButton, { DefaultButtonProps } from '../DefaultButton/DefaultButton'
+
+const LinkButton: React.FC<DefaultButtonProps> = ({ children, ...rest }) => {
+  return (
+    <DefaultButton {...rest} type='link' style={{ border: '1px solid #000fff' }}>
+      {children}
+    </DefaultButton>
+  )
+}
+
+export default LinkButton

src/UI/buttons/PrimaryButton/PrimaryButton.stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import { DefaultButtonProps } from '../DefaultButton/DefaultButton'
+
+import PrimaryButton from './PrimaryButton'
+
+export default {
+  title: 'UI/buttons/PrimaryButton',
+  component: PrimaryButton,
+  argTypes: {
+    borderRadius: {
+      type: 'number',
+      defaultValue: 50
+    },
+    children: {
+      type: 'ReactNode',
+      defaultValue: 'Da best button'
+    },
+    block: {
+      type: 'boolean',
+      description: 'Button stretches according to its parent width',
+      defaultValue: false
+    },
+    icon: {
+      type: 'ReactNode',
+      defaultValue: (
+        <svg
+          width='12'
+          height='16'
+          viewBox='0 0 12 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <path
+            d='M11.0623 3.35796C10.781 2.74323 10.3812 2.19078 9.87097 1.71868C8.83436 0.756401 7.45825 0.226044 5.99976 0.226044C4.54128 0.226044 3.16517 0.756401 2.12856 1.71667C1.61829 2.19078 1.21851 2.74122 0.937265 3.35796C0.643961 4.00082 0.4953 4.68185 0.4953 5.38497V5.92738C0.4953 6.05194 0.595747 6.15238 0.7203 6.15238H1.80512C1.92968 6.15238 2.03012 6.05194 2.03012 5.92738V5.38497C2.03012 3.38609 3.81003 1.76087 5.99976 1.76087C8.1895 1.76087 9.96941 3.38609 9.96941 5.38497C9.96941 6.20462 9.67811 6.97604 9.12566 7.6189C8.57923 8.25573 7.8078 8.71176 6.95401 8.90462C6.46584 9.01511 6.02588 9.29033 5.7145 9.68408C5.4042 10.0765 5.23507 10.5619 5.23436 11.0622V11.693C5.23436 11.8176 5.33481 11.918 5.45936 11.918H6.54418C6.66874 11.918 6.76918 11.8176 6.76918 11.693V11.0622C6.76918 10.7468 6.98816 10.4696 7.29151 10.4013C8.46472 10.1361 9.52945 9.50328 10.2908 8.61935C10.6745 8.17136 10.9739 7.67314 11.1808 7.13274C11.3957 6.57225 11.5042 5.98363 11.5042 5.38497C11.5042 4.68185 11.3556 3.99881 11.0623 3.35796ZM5.99976 13.5252C5.37901 13.5252 4.87476 14.0294 4.87476 14.6502C4.87476 15.2709 5.37901 15.7752 5.99976 15.7752C6.62052 15.7752 7.12476 15.2709 7.12476 14.6502C7.12476 14.0294 6.62052 13.5252 5.99976 13.5252Z'
+            fill='black'
+            fill-opacity='0.85'
+          />
+        </svg>
+      )
+    }
+  }
+}
+
+const Template = (args: DefaultButtonProps) => <PrimaryButton {...args} />
+
+export const Default = Template.bind({})
+
+Default.args = {
+  icon: null
+}
+
+export const Icon = Template.bind({})

src/UI/buttons/PrimaryButton/PrimaryButton.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import DefaultButton, { DefaultButtonProps } from '../DefaultButton/DefaultButton'
+
+const PrimaryButton: React.FC<DefaultButtonProps> = ({ children, ...rest }) => {
+  return (
+    <DefaultButton {...rest} type='primary' style={{ borderRadius: '50px' }}>
+      {children}
+    </DefaultButton>
+  )
+}
+
+export default PrimaryButton