fix: storybook

.github/common-actions/install/action.yml

@@ -16,6 +16,12 @@ runs:
         registry-url: "https://registry.npmjs.org"
         cache: "pnpm"
 
+    - name: Setup Git User
+      shell: bash
+      run: |
+        git config --global user.email "[email protected]"
+        git config --global user.name "gobob-xyz"
+
     - name: Install dependencies
       shell: bash
       run: pnpm install

.storybook/main.ts

@@ -1,6 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-vite';
-
-import { join, dirname } from 'path';
+import { mergeConfig } from "vite"
+import { join, dirname, resolve } from 'path';
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -10,7 +10,7 @@ function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, 'package.json')));
 }
 const config: StorybookConfig = {
-  stories: ['../packages/components/src/**/*.stories.@(js|jsx|mjs|ts|tsx)', '../packages/icons/src/stories/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../packages/components/src/**/*.stories.@(js|jsx|mjs|ts|tsx)', '../packages/icons/**/src/stories/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),
@@ -26,6 +26,22 @@ const config: StorybookConfig = {
   },
   core: {
     disableTelemetry: true
-  }
+  },
+  async viteFinal(config) {
+    // Merge custom configuration into the default config
+    return mergeConfig(config, {
+      resolve: {
+        alias: [
+          {
+            find: /\@just_testing13\/icon$/,
+            replacement: resolve(
+              __dirname,
+              "../packages/icons/core/src",
+            ),
+          },
+        ],
+      },
+    })
+  },
 };
 export default config;

package.json

@@ -32,6 +32,8 @@
     "@storybook/react": "^7.4.0",
     "@storybook/react-vite": "^7.4.0",
     "@storybook/testing-library": "^0.2.0",
+    "@swc/core": "^1.3.84",
+    "@swc/jest": "^0.2.29",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/styled-components": "^5.1.26",
@@ -50,13 +52,15 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-unused-imports": "^3.0.0",
+    "jest": "^29.7.0",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.4.0",
     "tsup": "^7.2.0",
     "turbo": "latest",
-    "typescript": ">=3.0.0"
+    "typescript": ">=3.0.0",
+    "vite": "^4.4.9"
   },
   "pnpm": {
     "overrides": {

packages/icons/coin/src/stories/index.stories.tsx

@@ -1,54 +1,56 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Icon, IconProps } from '@just_testing13/icon';
 
-import * as SVGS from '../';
+import { Icon, IconProps } from '..';
+import * as SVGS from '..';
 
-export const Default: StoryObj<IconProps> = {
+export default {
+  title: 'Icons/Coins',
+  component: Icon,
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 12 }}>
+        <Story />
+      </div>
+    )
+  ]
+} as Meta<typeof Icon>;
+
+export const Coins: StoryObj<IconProps> = {
   args: {
     size: 'md'
   },
   render: (args) => (
     <>
-      {Object.entries(SVGS).map(([key, Comp]) => (
-        <div
-          key={key}
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            fontSize: 12,
-            gap: 8,
-            minWidth: 100,
-            maxWidth: 100
-          }}
-        >
-          <Comp {...args} />
-          <span
+      {Object.entries(SVGS)
+        .filter(([key]) => key !== 'Icon')
+        .map(([key, Comp]) => (
+          <div
+            key={key}
             style={{
-              fontWeight: '600',
-              textOverflow: 'ellipsis',
-              overflow: 'hidden',
-              width: '100%',
-              maxWidth: '100%',
-              textAlign: 'center'
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              fontSize: 12,
+              gap: 8,
+              minWidth: 100,
+              maxWidth: 100
             }}
           >
-            {key}
-          </span>
-        </div>
-      ))}
+            <Comp {...args} />
+            <span
+              style={{
+                fontWeight: '600',
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                width: '100%',
+                maxWidth: '100%',
+                textAlign: 'center'
+              }}
+            >
+              {key}
+            </span>
+          </div>
+        ))}
     </>
   )
 };
-
-export default {
-  title: 'Icons/Coin',
-  component: Icon,
-  decorators: [
-    (Story) => (
-      <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 12 }}>
-        <Story />
-      </div>
-    )
-  ]
-} as Meta;

packages/icons/common/src/stories/index.stories.tsx

@@ -1,54 +1,56 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Icon, IconProps } from '@just_testing13/icon';
 
-import * as SVGS from '../';
+import { Icon, IconProps } from '..';
+import * as SVGS from '..';
 
-export const Default: StoryObj<IconProps> = {
+export default {
+  title: 'Icons/Common',
+  component: Icon,
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 12 }}>
+        <Story />
+      </div>
+    )
+  ]
+} as Meta<typeof Icon>;
+
+export const Common: StoryObj<IconProps> = {
   args: {
     size: 'md'
   },
   render: (args) => (
     <>
-      {Object.entries(SVGS).map(([key, Comp]) => (
-        <div
-          key={key}
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            fontSize: 12,
-            gap: 8,
-            minWidth: 100,
-            maxWidth: 100
-          }}
-        >
-          <Comp {...args} />
-          <span
+      {Object.entries(SVGS)
+        .filter(([key]) => key !== 'Icon')
+        .map(([key, Comp]) => (
+          <div
+            key={key}
             style={{
-              fontWeight: '600',
-              textOverflow: 'ellipsis',
-              overflow: 'hidden',
-              width: '100%',
-              maxWidth: '100%',
-              textAlign: 'center'
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              fontSize: 12,
+              gap: 8,
+              minWidth: 100,
+              maxWidth: 100
             }}
           >
-            {key}
-          </span>
-        </div>
-      ))}
+            <Comp {...args} />
+            <span
+              style={{
+                fontWeight: '600',
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                width: '100%',
+                maxWidth: '100%',
+                textAlign: 'center'
+              }}
+            >
+              {key}
+            </span>
+          </div>
+        ))}
     </>
   )
 };
-
-export default {
-  title: 'Icons/Common',
-  component: Icon,
-  decorators: [
-    (Story) => (
-      <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 12 }}>
-        <Story />
-      </div>
-    )
-  ]
-} as Meta;