Add storybook (#4)

.storybook/main.js

@@ -0,0 +1,52 @@
+// .storybook/main.js
+
+const path = require('path');
+
+module.exports = {
+  stories: [
+    '../components/*.stories.mdx',
+    '../components/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  /** Expose public folder to storybook as static */
+  staticDirs: ['../public'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    {
+      /**
+       * Fix Storybook issue with PostCSS@8
+       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
+       */
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
+  ],
+  core: {
+    builder: 'webpack5',
+  },
+  webpackFinal: (config) => {
+    /**
+     * Add support for alias-imports
+     * @see https://github.com/storybookjs/storybook/issues/11989#issuecomment-715524391
+     */
+    config.resolve.alias = {
+      ...config.resolve?.alias,
+      '@': [path.resolve(__dirname, '../components/'), path.resolve(__dirname, '../')],
+    };
+
+    /**
+     * Fixes font import with /
+     * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160
+     */
+    config.resolve.roots = [
+      path.resolve(__dirname, '../public'),
+      'node_modules',
+    ];
+
+    return config;
+  },
+};

.storybook/preview.js

@@ -0,0 +1,22 @@
+import '../styles/globals.css';
+import * as NextImage from 'next/image';
+
+const OriginalNextImage = NextImage.default;
+
+Object.defineProperty(NextImage, 'default', {
+  configurable: true,
+  value: (props) => <OriginalNextImage {...props} unoptimized />,
+});
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  previewTabs: {
+    'storybook/docs/panel': { index: -1 },
+  },
+};

components/Button.stories.tsx

@@ -0,0 +1,32 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import * as React from 'react';
+import { HiSearch } from 'react-icons/hi';
+
+import { Button } from './Button';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+    },
+  },
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Button',
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  children: (
+    <div className='flex gap-2 items-center'>
+      <HiSearch />
+      <span>Search</span>
+    </div>
+  ),
+};

package.json

@@ -5,7 +5,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "axios": "^0.25.0",
@@ -20,13 +22,25 @@
     "wagmi": "^0.1.6"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.0",
+    "@storybook/addon-actions": "^6.4.18",
+    "@storybook/addon-essentials": "^6.4.18",
+    "@storybook/addon-links": "^6.4.18",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/builder-webpack5": "^6.4.18",
+    "@storybook/manager-webpack5": "^6.4.18",
+    "@storybook/react": "^6.4.18",
     "@types/node": "17.0.9",
     "@types/react": "17.0.38",
     "autoprefixer": "^10.4.2",
+    "babel-loader": "^8.2.3",
     "eslint": "8.7.0",
     "eslint-config-next": "12.0.8",
     "postcss": "^8.4.5",
     "tailwindcss": "^3.0.15",
     "typescript": "4.5.4"
+  },
+  "resolutions": {
+    "webpack": "^5"
   }
 }