refactor(storybook): reorganize design system

Add more stories for each components and change some components
categories for better organization.

1 files changed, 13 insertions, 1 deletions

diff --git a/.storybook/main.js b/.storybook/main.js
index 05aa578..bedbd0e 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,5 +1,9 @@
 const path = require('path');
 
+/**
+ * @typedef {import('webpack').Configuration} WebpackConfig
+ */
+
 const storybookConfig = {
   stories: ['../src/**/*.stories.@(md|mdx|js|jsx|ts|tsx)'],
   addons: [
@@ -12,6 +16,11 @@ const storybookConfig = {
   core: {
     builder: 'webpack5',
   },
+  staticDirs: ['../public'],
+  /**
+   * @param {WebpackConfig} config
+   * @return {Promise<WebpackConfig>}
+   */
   webpackFinal: async (config) => {
     // Use SVGR for SVG files. See: https://medium.com/@derek_19900/config-storybook-4-to-use-svgr-webpack-plugin-22cb1152f004
     const rules = config.module.rules;
@@ -22,6 +31,9 @@ const storybookConfig = {
       use: [{ loader: '@svgr/webpack', options: { dimensions: false } }],
     });
 
+    /** @type {import('next').NextConfig} */
+    const nextConfig = require('../next.config');
+
     // Set modules aliases.
     config.resolve.alias = {
       ...config.resolve.alias,
@@ -35,7 +47,7 @@ const storybookConfig = {
       '@utils': path.resolve(__dirname, '../src/utils'),
     };
 
-    return config;
+    return { ...config, ...nextConfig.webpack };
   },
 };