Add Storybook

.eslintrc.json

@@ -1,7 +1,6 @@
 {
   "extends": "next/core-web-vitals",
   "rules": {
-    // Other rules
     "@next/next/no-img-element": "off"
   }
 }

.storybook/main.ts

@@ -0,0 +1,43 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+const path = require('path')
+
+const config: StorybookConfig = {
+  stories: [
+    '../components/**/*.mdx',
+    '../components/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        sass: {
+          // Require your Sass preprocessor here
+          implementation: require('sass'),
+          additionalData: `
+              @import "./styles/variables.scss";
+            `,
+        },
+      },
+    },
+  ],
+  staticDirs: ['../public'],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  webpackFinal: async (config: any, { configType }) => {
+    config.resolve.roots = [
+      path.resolve(__dirname, '../public'),
+      'node_modules',
+    ]
+    config.resolve.fallback.fs = false
+    return config
+  },
+}
+export default config

.storybook/preview.ts

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

package.json

@@ -8,7 +8,9 @@
     "dev": "next dev -p 1234",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.0.2",
@@ -50,14 +52,24 @@
     "react-lite-youtube-embed": "^2.3.52",
     "react-scroll": "^1.8.5",
     "react-string-replace": "^1.1.0",
+    "resolve-url-loader": "^5.0.0",
     "sanitize-html": "^2.8.1",
-    "sass": "^1.49.0",
+    "sass": "^1.61.0",
     "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.0",
     "valtio": "^1.3.0",
     "youtube-api-v3-wrapper": "^2.3.0"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^7.0.2",
+    "@storybook/addon-interactions": "^7.0.2",
+    "@storybook/addon-links": "^7.0.2",
+    "@storybook/addon-mdx-gfm": "^7.0.2",
+    "@storybook/addon-styling": "^0.3.2",
+    "@storybook/blocks": "^7.0.2",
+    "@storybook/nextjs": "^7.0.2",
+    "@storybook/react": "^7.0.2",
+    "@storybook/testing-library": "^0.0.14-next.2",
     "@types/lodash.clonedeep": "^4.5.6",
     "@types/lodash.debounce": "^4.0.6",
     "@types/node": "17.0.11",
@@ -71,7 +83,10 @@
     "@types/uuid": "^9.0.0",
     "eslint": "8.7.0",
     "eslint-config-next": "12.0.8",
+    "eslint-plugin-storybook": "^0.6.11",
     "eslint-plugin-valtio": "^0.4.1",
+    "sass-loader": "^13.2.2",
+    "storybook": "^7.0.2",
     "typescript": "^4.5.5"
   }
 }