Merge pull request #35 from ArianHamdi/feat/story-book

feat: implement storybook

Author: ArianHamdi

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["next/core-web-vitals"]
+  "extends": ["next/core-web-vitals", "plugin:storybook/recommended"]
 }

.storybook/main.ts

@@ -0,0 +1,32 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+const path = require('path');
+
+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',
+    '@storybook/addon-actions',
+    '@storybook/addon-docs',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  webpackFinal: async config => {
+    // Ensure config.resolve is defined
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@': path.resolve(__dirname, '../src'),
+    };
+
+    return config;
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,23 @@
+import type { Preview } from '@storybook/react';
+import '../src/styles/globals.scss';
+import React from 'react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  decorators: [
+    Story => {
+      document.documentElement.setAttribute('data-theme', 'light');
+      return <Story />;
+    },
+  ],
+};
+
+export default preview;

.storybook/themes.ts

@@ -0,0 +1,18 @@
+export interface Theme {
+  name: string;
+  color: string;
+  background: string;
+}
+
+export const themes: { [key: string]: Theme } = {
+  light: {
+    name: 'light',
+    color: '#000000',
+    background: '#ffffff',
+  },
+  dark: {
+    name: 'dark',
+    color: '#ffffff',
+    background: '#333333',
+  },
+};

package.json

@@ -13,7 +13,9 @@
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\" --list-different",
     "prepare": "husky install",
     "type-check": "tsc --noEmit",
-    "prisma-schema": "npx prisma db push --schema src/prisma/schema.prisma"
+    "prisma-schema": "npx prisma db push --schema src/prisma/schema.prisma",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@hookform/devtools": "^4.3.1",
@@ -50,12 +52,27 @@
   },
   "devDependencies": {
     "@next/env": "^13.5.3",
+    "@storybook/addon-actions": "^7.4.6",
+    "@storybook/addon-docs": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addons": "^7.4.6",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/manager-api": "^7.4.6",
+    "@storybook/nextjs": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.4.6",
     "@types/jsonwebtoken": "^9.0.3",
     "@types/lodash": "^4.14.199",
     "csstype": "^3.1.2",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^8.0.0",
     "lint-staged": "^14.0.1",
     "prettier": "^3.0.3",
-    "prisma": "^5.3.1"
+    "prisma": "^5.3.1",
+    "storybook": "^7.4.6"
   }
 }