feat: add documentation

.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["..\\public"],
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from "@storybook/react";
+import '../src/index.scss';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -32,7 +32,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "eslintConfig": {
     "extends": [
@@ -53,18 +55,33 @@
     ]
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-interactions": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-styling": "^1.3.6",
+    "@storybook/blocks": "^7.3.2",
+    "@storybook/preset-create-react-app": "^7.3.2",
+    "@storybook/react": "^7.3.2",
+    "@storybook/react-webpack5": "^7.3.2",
+    "@storybook/testing-library": "^0.2.0",
     "@types/react-slick": "^0.23.10",
     "@types/react-transition-group": "^4.4.5",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
+    "babel-plugin-named-exports-order": "^0.0.2",
     "eslint": "^8.34.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-import-resolver-typescript": "^3.5.3",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "sass": "^1.58.3",
-    "sass-loader": "^13.2.0"
+    "eslint-plugin-storybook": "^0.6.13",
+    "prop-types": "^15.8.1",
+    "sass": "^1.66.1",
+    "sass-loader": "^13.2.0",
+    "storybook": "^7.3.2",
+    "webpack": "^5.88.2"
   }
 }

src/stories/UI/Forms/Input.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Input } from "../../../components/UI";
+
+const meta = {
+  title: 'UI/Forms/Input',
+  component: Input,
+
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Email: Story = {
+  args: {
+    placeholder: 'example@gmail.com',
+    type: 'email',
+  }
+}
+
+export const Password: Story = {
+  args: {
+    placeholder: 'Введите пароль',
+    type: 'password',
+  }
+}

src/stories/UI/Forms/InputError.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { InputError } from "../../../components/UI";
+
+const meta = {
+  title: 'UI/Forms/InputError',
+  component: InputError,
+
+} satisfies Meta<typeof InputError>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    error: { type: 'required', message: 'Это поле обязательно для заполнения' },
+  }
+}

src/stories/UI/Forms/InputField.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { InputField, Label, TextUnderline, Input } from '../../../components/UI';
+
+const meta = {
+  title: 'UI/Forms/InputField',
+  component: InputField,
+} satisfies Meta<typeof InputField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Email: Story = {
+  args: {
+    children: (
+      <>
+        <Label>Электронная почта</Label>
+        <Input placeholder='example@gmail.com' />
+      </>
+    ),
+  },
+};
+
+export const Password: Story = {
+  args: {
+    className: 'password',
+    children: (
+      <>
+        <Label>
+          Пароль <TextUnderline>Забыли пароль?</TextUnderline>
+        </Label>
+        <Input placeholder='example@gmail.com' />
+      </>
+    ),
+  },
+};

src/stories/UI/Forms/Label.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Label, TextUnderline } from "../../../components/UI";
+
+const meta = {
+  title: 'UI/Forms/Label',
+  component: Label,
+
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+export const Email: Story = {
+  args: {
+    children: 'Электронная почта',
+  }
+}
+
+export const Password: Story = {
+  args: {
+    children: <>Пароль <TextUnderline>Забыли пароль?</TextUnderline></>,
+  }
+}
+