New build icon and update gallery, link, color

.storybook/main.ts

@@ -1,40 +1,53 @@
-import * as path from "path";
-import type { StorybookConfig } from "@storybook/nextjs";
+import * as path from 'path';
+import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  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-themes",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@storybook/addon-themes',
   ],
-  // ref: https://zenn.dev/nitaking/articles/0d5eb19d6d9529
   webpackFinal(config) {
     if (config.resolve) {
       config.resolve.alias = {
         ...config.resolve.alias,
-        "@/styles": path.resolve(__dirname, "../src/styles"),
-        "@/components": path.resolve(__dirname, "../src/components"),
-        "@/styled": path.resolve(__dirname, "../styled-system"),
-        "@/stories": path.resolve(__dirname, "../src/stories"),
-        "@/lib": path.resolve(__dirname, "../src/lib"),
+        '@/styles': path.resolve(__dirname, '../src/styles'),
+        '@/components': path.resolve(__dirname, '../src/components'),
+        '@/styled': path.resolve(__dirname, '../styled-system'),
+        '@/stories': path.resolve(__dirname, '../src/stories'),
+        '@/lib': path.resolve(__dirname, '../src/lib'),
       };
     }
+    if (config.module) {
+      config.module.rules = config.module.rules || []; // Ensure rules is initialized
+      config.module.rules.unshift({
+        test: /\.svg$/,
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              svgo: false, // Disable SVGO if needed
+            },
+          },
+        ],
+      });
+    }
     return config;
   },
   framework: {
-    name: "@storybook/nextjs",
+    name: '@storybook/nextjs',
     options: {},
   },
   docs: {
-    //👇 See the table below for the list of supported options
     autodocs: 'tag',
     defaultName: 'Documentation',
   },
   features: {
     experimentalRSC: true,
   },
 };
+
 export default config;

generateIcons.js

@@ -0,0 +1,118 @@
+const fs = require('fs');
+const path = require('path');
+const { optimize } = require('svgo');
+
+// svg src folder
+const iconsDir = path.join(__dirname, 'src/components/ui/icons');
+
+// src to create index.tsx
+const outputFile = path.join(__dirname, 'src/components/ui/icons/index.tsx');
+
+// Rest Size Icon
+fs.readdir(iconsDir, (err, files) => {
+  if (err) throw err;
+
+  files.forEach((file) => {
+    if (path.extname(file) === '.svg') {
+      const filePath = path.join(iconsDir, file);
+      fs.readFile(filePath, 'utf8', (err, data) => {
+        if (err) throw err;
+
+        const result = optimize(data, {
+          plugins: [
+            {
+              name: 'preset-default',
+              params: {
+                overrides: {
+                  removeDimensions: false, // Keep removeDimensions in preset-default
+                },
+              },
+            },
+            'removeDimensions', // After add removeDimensions once again.
+            // {
+            //   name: 'addAttributesToSVGElement',
+            //   params: {
+            //     attributes: [{ width: 'currentWidth', height: 'currentHeight' }],
+            //   },
+            // },
+          ],
+        });
+
+        fs.writeFile(filePath, result.data, 'utf8', (err) => {
+          if (err) throw err;
+          console.log(`${file} has been updated`);
+        });
+      });
+    }
+  });
+});
+
+// Rename Icon
+fs.readdir(iconsDir, (err, files) => {
+  if (err) {
+    console.error('Unable to scan directory:', err);
+    return;
+  }
+
+  files.forEach((file) => {
+    const oldPath = path.join(iconsDir, file);
+
+    // Check is SVG ?
+    if (path.extname(file) === '.svg') {
+      // Change name file: space to '-'
+      const newFileName = file.replace(/\s+/g, '-');
+      const newPath = path.join(iconsDir, newFileName);
+
+      // Change file name
+      fs.rename(oldPath, newPath, (err) => {
+        if (err) {
+          console.error('Error renaming file:', err);
+        } else {
+          console.log(`Renamed: ${file} -> ${newFileName}`);
+        }
+      });
+    }
+  });
+});
+
+// file name to camelCase
+const toCamelCase = (str) => {
+  return str.replace(/-./g, (match) => match.charAt(1).toUpperCase()).replace(/^\w/, (c) => c.toUpperCase());
+};
+
+// Read svg in folder
+fs.readdir(iconsDir, (err, files) => {
+  if (err) {
+    return console.error('Can not read folder: ', err);
+  }
+
+  // Filter file have .svg
+  const svgFiles = files.filter((file) => file.endsWith('.svg'));
+
+  // create content for index.tsx
+  let imports = svgFiles
+    .map((file) => {
+      const baseName = path.basename(file, '.svg');
+      const componentName = `Icon${toCamelCase(baseName)}`;
+      return `import { ReactComponent as ${componentName} } from '@/components/ui/icons/${file}';`;
+    })
+    .join('\n');
+
+  let exports = svgFiles
+    .map((file) => {
+      const baseName = path.basename(file, '.svg');
+      const componentName = `Icon${toCamelCase(baseName)}`;
+      return `  ${componentName},`;
+    })
+    .join('\n');
+
+  const content = `${imports}\n\nexport {\n${exports}\n}; \n\n export const listIcons:any = {\n${exports}\n};`;
+
+  // Write into index.tsx file.
+  fs.writeFile(outputFile, content, (err) => {
+    if (err) {
+      return console.error('Can not write: ', err);
+    }
+    console.log('File index.ts create success.');
+  });
+});

next.config.mjs

@@ -1,6 +1,7 @@
 import remarkGfm from 'remark-gfm';
 import remarkFrontmatter from 'remark-frontmatter';
 import createMDX from '@next/mdx';
+import { merge } from 'webpack-merge';
 
 const withMdx = createMDX({
   experimental: {
@@ -15,6 +16,26 @@ const withMdx = createMDX({
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
+  webpack(config, options) {
+    // Add custom webpack configurations
+    return merge(config, {
+      module: {
+        rules: [
+          {
+            test: /\.svg$/,
+            use: [
+              {
+                loader: '@svgr/webpack',
+                options: {
+                  // SVGR options here
+                },
+              },
+            ],
+          },
+        ],
+      },
+    });
+  },
 };
 
 export default withMdx(nextConfig);