Storybook 🧪

.eslintrc.json

@@ -1,6 +1,10 @@
 {
     "plugins": ["css-modules", "no-relative-import-paths"],
-    "extends": ["next/core-web-vitals", "plugin:css-modules/recommended"],
+    "extends": [
+        "next/core-web-vitals",
+        "plugin:css-modules/recommended",
+        "plugin:storybook/recommended"
+    ],
     "ignorePatterns": ["next.config.js"],
     "rules": {
         "@next/next/no-img-element": 0,

.gitignore

@@ -8,6 +8,8 @@
 
 # testing
 /coverage
+*storybook.log
+/storybook-static
 
 # next.js
 /.next/

.storybook/main.ts

@@ -0,0 +1,50 @@
+import { dirname, join } from 'path';
+import type { StorybookConfig } from '@storybook/nextjs';
+import path from 'path';
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+    addons: [
+        getAbsolutePath('@storybook/addon-onboarding'),
+        getAbsolutePath('@storybook/addon-links'),
+        getAbsolutePath('@storybook/addon-essentials'),
+        getAbsolutePath('@chromatic-com/storybook'),
+        getAbsolutePath('@storybook/addon-interactions'),
+        getAbsolutePath('@storybook/addon-mdx-gfm'),
+        getAbsolutePath('@storybook/addon-storysource'),
+    ],
+
+    framework: {
+        name: getAbsolutePath('@storybook/nextjs'),
+        options: {},
+    },
+
+    webpackFinal: async (config, { configType }) => {
+        const updatedConfig = {
+            ...config,
+            resolve: {
+                ...config.resolve,
+                alias: {
+                    ...config.resolve?.alias,
+                    common: path.resolve(__dirname, '../src/common.scss'),
+                },
+            },
+        };
+
+        return updatedConfig;
+    },
+
+    staticDirs: ['../public'],
+
+    docs: {},
+
+    typescript: {
+        reactDocgen: 'react-docgen-typescript',
+    },
+};
+export default config;
+
+function getAbsolutePath(value: string): any {
+    return dirname(require.resolve(join(value, 'package.json')));
+}

.storybook/preview.tsx

@@ -0,0 +1,11 @@
+import type { Preview } from '@storybook/react';
+import '../src/global.scss';
+
+const preview: Preview = {
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+
+export default preview;