[PUBLIC] Storybook 작업

.eslintignore

@@ -1 +1,3 @@
-*.d.ts
+**/*.storybook.ts
+**/*.storybook.tsx
+*.d.ts

.refresh_icon_story.sh

@@ -0,0 +1,63 @@
+#!/bin/bash
+
+# This script is used to refresh the icon storybook
+
+# Get storybook code
+
+
+# Go to the src directory
+cd src
+
+# Remove the old storybook
+rm -rf ./stories/icons && mkdir ./stories/icons
+
+# Get icons list
+icons=$(awk 'BEGIN{ORS="\n"} {print $5}' ./icons/index.ts)
+
+for icon in $icons
+do
+  echo "Creating story for $icon"
+  # Create a new story for the icon
+  echo "import type { Meta, StoryObj } from '@storybook/react'
+  import { $icon } from '@/icons'
+
+  const meta: Meta<typeof $icon> = {
+    component: $icon,
+  }
+  export default meta
+
+  type Story = StoryObj<typeof $icon>
+
+  export const Default: Story = {}" > "./stories/icons/$icon.stories.tsx"
+done
+
+# Get sub directories
+sub_dirs=$(cd ./icons &&ls -dF */ | tr -d '/')
+
+echo "Sub directories: $sub_dirs"
+
+for sub_dir in $sub_dirs
+do
+  # Make a new directory for the sub directory
+  mkdir ./stories/icons/$sub_dir
+
+  # Get icons list
+  icons=$(awk 'BEGIN{ORS="\n"} {print $5}' ./icons/$sub_dir/index.ts)
+
+  for icon in $icons
+  do
+    echo "Creating story for $icon"
+    # Create a new story for the icon
+    echo "import type { Meta, StoryObj } from '@storybook/react'
+    import { $icon } from '@/icons/$sub_dir'
+
+    const meta: Meta<typeof $icon> = {
+      component: $icon,
+    }
+    export default meta
+
+    type Story = StoryObj<typeof $icon>
+
+    export const Default: Story = {}" > "./stories/icons/$sub_dir/$icon.stories.tsx"
+  done
+done

.storybook/main.ts

@@ -1,3 +1,4 @@
+import path from 'path'
 import type { StorybookConfig } from '@storybook/nextjs'
 
 const config: StorybookConfig = {
@@ -7,7 +8,8 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
-    '@storybook/addon-mdx-gfm'
+    '@storybook/addon-themes',
+    '@storybook/themes',
   ],
   framework: {
     name: '@storybook/nextjs',
@@ -16,5 +18,33 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      // Speeds up Storybook build time
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+      // Makes union prop types like variant and size appear as select controls
+      shouldExtractLiteralValuesFromEnum: true,
+      // Makes string and boolean types that can be undefined appear as inputs and switches
+      shouldRemoveUndefinedFromOptional: true,
+      // Filter out third-party props from node_modules except @mui packages
+      propFilter: (prop) =>
+        prop.parent
+          ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName)
+          : true,
+    },
+  },
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(__dirname, '../src'),
+      }
+    }
+    return config
+  },
 }
 export default config

.storybook/preview.ts

@@ -1,5 +1,22 @@
 import type { Preview } from '@storybook/react'
 
+import { ThemeProvider, CssBaseline } from '@mui/material'
+import { withThemeFromJSXProvider } from '@storybook/addon-themes'
+
+/* TODO: update import for your custom Material UI themes */
+import { lightTheme, darkTheme } from '../src/constant/ColorTheme'
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    expanded: true, // Adds the description and default columns
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -10,6 +27,19 @@ const preview: Preview = {
       },
     },
   },
+
+  decorators: [
+    withThemeFromJSXProvider({
+      GlobalStyles: CssBaseline,
+      Provider: ThemeProvider,
+      themes: {
+        // Provide your custom themes here
+        light: lightTheme,
+        dark: darkTheme,
+      },
+      defaultTheme: 'light',
+    }),
+  ],
 }
 
 export default preview