feat(storybook): re-implements storybook

.eslintrc.json

@@ -4,7 +4,8 @@
 		"next/core-web-vitals",
 		"plugin:@typescript-eslint/recommended",
 		"plugin:prettier/recommended",
-		"plugin:jest/recommended"
+		"plugin:jest/recommended",
+		"plugin:storybook/recommended"
 	],
 	"plugins": ["@typescript-eslint", "jsx-a11y"],
 	"rules": {

.storybook/main.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+		'@storybook/addon-a11y',
+		{
+			name: '@storybook/addon-styling',
+			options: {
+				postCss: true,
+			},
+		},
+		'@bbbtech/storybook-formik/register',
+	],
+	framework: {
+		name: '@storybook/nextjs',
+		options: {},
+	},
+	docs: {
+		autodocs: 'tag',
+	},
+	webpackFinal: async (config) => {
+		config.resolve!.plugins = [
+			...(config.resolve!.plugins || []),
+			new TsconfigPathsPlugin({
+				extensions: config.resolve!.extensions,
+			}),
+		];
+		return config;
+	},
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,31 @@
+import '../src/styles/globals.css';
+
+import { withThemeByDataAttribute } from '@storybook/addon-styling';
+import type { Preview } from '@storybook/react';
+import type { ReactNode } from 'react';
+import React from 'react';
+
+export const decorators = [
+	withThemeByDataAttribute({
+		themes: {
+			light: 'light',
+			dark: 'dark',
+		},
+		defaultTheme: 'light',
+		attributeName: 'class',
+	}),
+];
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/,
+			},
+		},
+	},
+};
+
+export default preview;

package.json

@@ -20,8 +20,8 @@
 		"start": "next start",
 		"lint": "next lint",
 		"type-check": "tsc",
-		"storybook": "start-storybook -p 6006",
-		"build-storybook": "build-storybook",
+		"storybook": "storybook dev -p 6006",
+		"storybook:build": "storybook build",
 		"svgr": "svgr --icon --title-prop --replace-attr-values '#000=currentColor' --svg-props 'focusable=false' --svg-props 'aria-hidden=true' --typescript --index-template ./svgr/index-template.js --template ./svgr/template.js -d src/components/atoms/Icons src/components/atoms/Icons/assets",
 		"test:ci": "jest --ci",
 		"test:coverage": "jest --coverage",
@@ -66,7 +66,17 @@
 		"yup": "^1.1.1"
 	},
 	"devDependencies": {
+		"@bbbtech/storybook-formik": "^2.6.0",
 		"@sanity/eslint-config-studio": "^2.0.1",
+		"@storybook/addon-a11y": "^7.0.6",
+		"@storybook/addon-essentials": "^7.0.6",
+		"@storybook/addon-interactions": "^7.0.6",
+		"@storybook/addon-links": "^7.0.6",
+		"@storybook/addon-styling": "^1.0.1",
+		"@storybook/blocks": "^7.0.6",
+		"@storybook/nextjs": "^7.0.6",
+		"@storybook/react": "^7.0.6",
+		"@storybook/testing-library": "^0.0.14-next.2",
 		"@svgr/cli": "^7.0.0",
 		"@tailwindcss/typography": "^0.5.9",
 		"@testing-library/dom": "^9.2.0",
@@ -89,14 +99,17 @@
 		"eslint-plugin-jest": "^27.2.1",
 		"eslint-plugin-jsx-a11y": "^6.7.1",
 		"eslint-plugin-prettier": "^4.2.1",
+		"eslint-plugin-storybook": "^0.6.11",
 		"hygen": "^6.2.11",
 		"jest": "^29.5.0",
 		"jest-environment-jsdom": "^29.5.0",
 		"jest-runner-eslint": "^2.0.0",
 		"postcss": "^8.4.23",
 		"prettier": "^2.8.7",
 		"prettier-plugin-tailwindcss": "^0.2.7",
-		"tailwindcss": "^3.3.1"
+		"storybook": "^7.0.6",
+		"tailwindcss": "^3.3.1",
+		"tsconfig-paths-webpack-plugin": "^4.0.1"
 	},
 	"jest-runner-eslint": {
 		"cliOptions": {