chore: integrate storybook and add example story

.eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
     'plugin:import/typescript',
     'prettier',
     'next/core-web-vitals',
+    'plugin:storybook/recommended',
   ],
   rules: {
     // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

.storybook/preview.ts

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

README.md

@@ -157,7 +157,13 @@ npm install
     NEXT_PUBLIC_VALIDATOR=http://127.0.0.1:5000
     ```
 
-9.  Generate `Prisma` client and run web server:
+9.  Setup pre-commit hooks:
+
+    ```bash
+    npm run prepare
+    ```
+
+10. Generate `Prisma` client and run web server:
 
     ```bash
     npm run prisma:generate