feature: ✨ storybook pallete icons docs (#106)

* feat: add colors story

* feat: add loading story

* feat: add iconography stories and change stories settings

client/.storybook/main.ts

@@ -1,13 +1,17 @@
 import type { StorybookConfig } from '@storybook/nextjs';
-import path from 'path';
+import * as path from 'path';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: [
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
+    '../docs/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
+  ],
   staticDirs: ['../public'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
     {
       name: '@storybook/addon-styling',
       options: {
@@ -25,7 +29,7 @@ const config: StorybookConfig = {
     },
   },
   docs: {
-    autodocs: 'tag',
+    autodocs: true,
   },
   core: {
     builder: '@storybook/builder-webpack5',

client/.storybook/preview.tsx

@@ -0,0 +1,84 @@
+import type { StoryFn } from '@storybook/react';
+import '../src/app/styles/globals.scss';
+import './font.scss';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  viewMode: 'docs',
+  previewTabs: {
+    canvas: {
+      title: 'Story',
+    },
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+    },
+  },
+  backgrounds: {
+    default: 'main',
+    values: [
+      {
+        name: 'main',
+        value: '#26292b',
+      },
+      {
+        name: 'white',
+        value: '#fff',
+      },
+      {
+        name: 'additional white',
+        value: '#fafafa',
+      },
+    ],
+  },
+  viewport: {
+    viewports: {
+      '360': {
+        name: '360',
+        styles: {
+          width: '360px',
+          height: '780px',
+        },
+      },
+      '768': {
+        name: '768',
+        styles: {
+          width: '768px',
+          height: '1664px',
+        },
+      },
+      '1024': {
+        name: '1024',
+        styles: {
+          width: '1024px',
+          height: '576px',
+        },
+      },
+      '1600+': {
+        name: '1600+',
+        styles: {
+          width: '1600px',
+          height: '900px',
+        },
+      },
+    },
+  },
+};
+
+export const decorators = [
+  (Story: StoryFn) => (
+    <div
+      style={{
+        margin: 10,
+        display: 'flex',
+        justifyContent: 'start',
+        alignItems: 'start',
+        flexDirection: 'column',
+        gap: '20px',
+      }}
+    >
+      <Story />
+    </div>
+  ),
+];

client/docs/colors.stories.mdx

@@ -0,0 +1,134 @@
+import { ColorItem, ColorPalette, Meta } from '@storybook/blocks';
+
+<Meta title='global/Colors' />
+
+<ColorPalette>
+  <ColorItem
+    title='Base'
+    subtitle='asdasd'
+    colors={{
+      'Black color': 'var(--black-color)',
+      'White colors': 'var(--white-color)',
+      'Card color': 'var(--cards-color)',
+      'BG color': 'var(--bg-color)',
+    }}
+  />
+  <ColorItem
+    title='Green'
+    subtitle='asdasd'
+    colors={{
+      'Dark color': 'var(--green-dark-color)',
+      'Normal color': 'var(--green-normal-color)',
+      'Active color': 'var(--green-active-color)',
+      'Bright color': 'var(--green-bright-color)',
+    }}
+  />
+  <ColorItem
+    title='Grey'
+    subtitle='asdasd'
+    colors={{
+      'Dark color': 'var(--grey-dark-color)',
+      'Normal color': 'var(--grey-normal-color)',
+      'Medium color': 'var(--grey-medium-color)',
+      'Light color': 'var(--grey-light-color)',
+    }}
+  />
+  <ColorItem
+    title='Red'
+    subtitle='asdasdasd'
+    colors={{
+      'Dark color': 'var(--red-dark-color)',
+      'Normal color': 'var(--red-normal-color)',
+      'Light color': 'var(--red-light-color)',
+      'Error color': 'var(--red-error-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Red'
+    colors={{
+      'Dark/Red': 'var(--additional-dark-red-color)',
+      'Normal/Red': 'var(--additional-normal-red-color)',
+      'Light/Red': 'var(--additional-light-red-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Orage'
+    colors={{
+      'Dark/Orange': 'var(--additional-dark-orange-color)',
+      'Normal/Orange': 'var(--additional-normal-orange-color)',
+      'Light/Orange': 'var(--additional-light-orange-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Yellow'
+    colors={{
+      'Dark/Yellow': 'var(--additional-dark-yellow-color)',
+      'Normal/Yellow': 'var(--additional-normal-yellow-color)',
+      'Light/Yellow': 'var(--additional-light-yellow-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Lime'
+    colors={{
+      'Dark/Lime': 'var(--additional-dark-lime-color)',
+      'Normal/Lime': 'var(--additional-normal-lime-color)',
+      'Light/Lime': 'var(--additional-light-lime-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Green'
+    colors={{
+      'Dark/Green': 'var(--additional-dark-green-color)',
+      'Normal/Green': 'var(--additional-normal-green-color)',
+      'Light/Green': 'var(--additional-light-green-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Sky'
+    colors={{
+      'Dark/Sky': 'var(--additional-dark-cyan-color)',
+      'Normal/Sky': 'var(--additional-normal-cyan-color)',
+      'Light/Sky': 'var(--additional-light-cyan-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Blue'
+    colors={{
+      'Dark/Blue': 'var(--additional-dark-blue-color)',
+      'Normal/Blue': 'var(--additional-normal-blue-color)',
+      'Light/Blue': 'var(--additional-light-blue-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Violet'
+    colors={{
+      'Dark/Violet': 'var(--additional-dark-violet-color)',
+      'Normal/Violet': 'var(--additional-normal-violet-color)',
+      'Light/Violet': 'var(--additional-light-violet-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='Pink'
+    colors={{
+      'Dark/Pink': 'var(--additional-dark-pink-color)',
+      'Normal/Pink': 'var(--additional-normal-pink-color)',
+      'Light/Pink': 'var(--additional-light-pink-color)',
+    }}
+  />
+  <ColorItem
+    title='Additional'
+    subtitle='White'
+    colors={{
+      'Additional/White color': 'var(--additional-white-color)',
+    }}
+  />
+</ColorPalette>

client/docs/loading.stories.mdx

@@ -0,0 +1,14 @@
+import { ColorItem, ColorPalette, Meta } from '@storybook/blocks';
+
+<Meta title='global/Loading' />
+
+<ColorPalette>
+  <ColorItem
+    title='Loading'
+    subtitle='asdasd'
+    colors={{
+      'Base color': 'var(--loading-base-color)',
+      'Highlight color': 'var(--loading-highlight-color)',
+    }}
+  />
+</ColorPalette>

client/package.json

@@ -48,9 +48,11 @@
   "devDependencies": {
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
+    "@storybook/addon-a11y": "^7.4.5",
     "@storybook/addon-essentials": "7.2.1",
     "@storybook/addon-interactions": "7.2.1",
     "@storybook/addon-links": "7.2.1",
+    "@storybook/addon-mdx-gfm": "^7.4.5",
     "@storybook/addon-onboarding": "1.0.8",
     "@storybook/blocks": "7.2.1",
     "@storybook/nextjs": "7.2.1",

client/src/shared/assets/icons.module.scss

@@ -0,0 +1,24 @@
+.iconItemStyle {
+  border-radius: 4px;
+  background: rgba(38, 41, 43, 0.67);
+  box-shadow: rgba(0, 0, 0, 0.10) 0 1px 3px 0;
+  border: 1px solid hsla(203, 50%, 30%, 0.15);
+  overflow: hidden;
+  height: 40px;
+  width: 40px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-flex: none;
+  -ms-flex: none;
+  flex: none;
+}

client/src/shared/assets/icons.stories.mdx

@@ -0,0 +1,16 @@
+import { IconGallery, IconItem, Meta } from '@storybook/blocks';
+
+import { ICON_OPTIONS } from './storybook';
+import styles from './icons.module.scss';
+
+<Meta title='global/Iconography' />
+
+# Iconography
+
+<IconGallery>
+  {Object.entries(ICON_OPTIONS).map(([iconName, iconComponent]) => (
+    <IconItem name={iconName} key={iconName}>
+      <div className={styles.iconItemStyle}>{iconComponent}</div>
+    </IconItem>
+  ))}
+</IconGallery>

client/src/shared/assets/storybook.ts

@@ -0,0 +1,10 @@
+import * as ICONS from './index';
+
+type IconOptions = Record<keyof typeof ICONS, React.ReactNode>;
+export const ICON_OPTIONS = Object.entries(ICONS).reduce<IconOptions>(
+  (acc, [iconName, IconComponent]) => {
+    acc[iconName.replace(/icon$/i, '') as keyof typeof ICONS] = IconComponent({});
+    return acc;
+  },
+  {} as IconOptions
+);