issue #231 refactor: design system refactoring

Author: sikkzz

.gitignore

@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+.eslintcache
 
 node_modules
 dist

.pnp.cjs

@@ -2,15 +2,10 @@ node_modules/
 src/
 public/
 tsconfig.json
+tsconfig.node.json
+vite.config.ts
 .storybook/
-.eslintrc.json
-.prettierrc
-.github
-.husky
-.vscode
 .yarn
-.babelrc.json
-webpack.config.js
 .yarnrc.yml
 .pnp.cjs
 .pnp.lodaer.mjs

.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.23.5-8ef9fe9a4a-a29bd03725.zip

@@ -1,59 +1,24 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
-import path from 'path';
+import type { StorybookConfig } from "@storybook/react-vite";
 
+import { join, dirname } from "path";
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-a11y',
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-interactions"),
   ],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: getAbsolutePath("@storybook/react-vite"),
     options: {},
   },
   docs: {
-    autodocs: true,
-  },
-  webpackFinal: async (config) => {
-    if (config.resolve) {
-      config.resolve.alias = {
-        ...config.resolve.alias,
-        '@': path.resolve(__dirname, '../src'),
-        '@/components': path.resolve(__dirname, '../src/components'),
-        '@/type': path.resolve(__dirname, '../src/types'),
-        '@/hooks': path.resolve(__dirname, '../src/hooks'),
-        '@/styles': path.resolve(__dirname, '../src/styles'),
-        '@/constants': path.resolve(__dirname, '../src/constants'),
-        '@/assets': path.resolve(__dirname, '../src/assets'),
-        '@/stories': path.resolve(__dirname, '../src/stories'),
-        '@/utils': path.resolve(__dirname, '../src/utils'),
-      };
-    }
-
-    const imageRule = config.module?.rules?.find((rule) => {
-      const test = (rule as { test: RegExp }).test;
-
-      if (!test) return false;
-
-      return test.test('.svg');
-    }) as { [key: string]: any };
-
-    imageRule.exclude = /\.svg$/;
-
-    config.module?.rules?.push({
-      test: /\.svg$/,
-      issuer: /\.(jsx|tsx)$/,
-      use: ['@svgr/webpack'],
-    });
-    config.module?.rules?.push({
-      test: /\.svg$/,
-      issuer: /\.(js|ts)$/,
-      use: ['url-loader'],
-    });
-
-    return config;
+    autodocs: "tag",
   },
 };
 export default config;

.yarn/cache/@babel-helper-replace-supers-npm-7.22.20-7e1aa74118-6b0858811a.zip

@@ -1,19 +1,25 @@
 {
   "name": "waggle-design-system",
-  "version": "1.2.9",
+  "version": "1.4.7",
   "description": "Waggle 디자인 시스템",
-  "homepage": "https://github.com/teamWaggle/Waggle-Design-System",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "homepage": "https://github.com/teamWaggle/Waggle-front",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "browser": "./browser/specific/main.js",
+  "exports": {
+    ".": {
+      "module": "./dist/index.es.js",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.cjs.js"
+    }
+  },
   "scripts": {
-    "start": "webpack --mode development",
-    "dev": "webpack serve --mode development --open --hot",
-    "build": "webpack --mode production",
+    "dev": "vite",
+    "build": "tsc && vite build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "publish:npm": "rm -rf dist && mkdir dist && tsc && rm -rf ./dist/stories && cp -r ./src/assets ./dist && tsc-alias",
     "chromatic": "npx chromatic --project-token=chpt_9e90f3a3f28a532",
     "lint": "eslint src",
     "format": "prettier --write src/**/*.ts{,x}"
@@ -34,47 +40,53 @@
       "name": "sikkzz",
       "email": "[email protected]",
       "url": "https://github.com/sikkzz"
+    },
+    {
+      "name": "Hellol77",
+      "email": "[email protected]",
+      "url": "https://github.com/Hellol77"
     }
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/teamWaggle/Waggle-Design-System.git"
+    "url": "git+https://github.com/teamWaggle/Waggle-front.git"
   },
   "license": "MIT",
   "dependencies": {
     "@emotion/babel-plugin": "^11.11.0",
     "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@emotion/utils": "^1.2.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "vite": "^5.2.9",
+    "vite-plugin-commonjs": "^0.10.1",
+    "vite-plugin-dts": "^3.8.3",
+    "vite-plugin-libcss": "^1.1.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/plugin-transform-react-jsx": "^7.23.4",
-    "@babel/preset-env": "^7.22.6",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.23.3",
     "@emotion/babel-plugin": "^11.11.0",
     "@emotion/babel-preset-css-prop": "^11.11.0",
-    "@storybook/addon-a11y": "^7.1.1",
-    "@storybook/addon-essentials": "^7.0.25",
-    "@storybook/addon-interactions": "^7.0.25",
-    "@storybook/addon-links": "^7.0.25",
-    "@storybook/blocks": "^7.0.25",
-    "@storybook/react": "^7.0.25",
-    "@storybook/react-webpack5": "^7.6.8",
-    "@storybook/testing-library": "^0.0.14-next.2",
-    "@svgr/webpack": "^8.0.1",
+    "@storybook/addon-a11y": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/addon-viewport": "^7.6.4",
+    "@storybook/blocks": "^7.6.4",
+    "@storybook/react": "^7.6.4",
+    "@storybook/react-vite": "^7.6.4",
+    "@storybook/test": "^7.6.4",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-    "@types/babel__core": "^7",
-    "@types/babel__preset-env": "^7",
     "@types/eslint": "^8",
     "@types/node": "^20.8.7",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
-    "babel-loader": "^9.1.3",
-    "babel-plugin-react-require": "^4.0.2",
+    "@vitejs/plugin-react": "^4.2.1",
     "eslint": "8.2.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-react-app": "^7.0.1",
@@ -85,33 +97,16 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.6.15",
-    "html-webpack-plugin": "^5.5.4",
-    "husky": "^8.0.3",
-    "lint-staged": "^15.0.2",
     "prettier": "^3.0.3",
     "storybook": "^7.6.4",
     "ts-loader": "^9.5.1",
     "tsc-alias": "^1.8.7",
     "typescript": "5.0.4",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
-    "webpack-merge": "^5.10.0"
-  },
-  "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx}": [
-      "yarn lint"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    "url-loader": "^4.1.1"
   },
   "packageManager": "[email protected]",
   "bugs": {
-    "url": "https://github.com/teamWaggle/Waggle-Design-System/issues"
+    "url": "https://github.com/teamWaggle/Waggle-front/issues"
   },
   "readme": "ERROR: No README data found!",
   "_id": "[email protected]"

.yarn/cache/@babel-plugin-syntax-typescript-npm-7.23.3-d4e4d71527-4d6e9cdb9d.zip

@@ -1,17 +1,11 @@
 import type { ComponentPropsWithoutRef, ElementType } from "react";
 
-import type { BoxStylingProps } from "@/components/Box/Box.styles";
-
 import { getBoxStyling } from "@/components/Box/Box.styles";
 
+import type { BoxStylingProps } from "@/components/Box/Box.styles";
+
 export interface BoxProps extends ComponentPropsWithoutRef<"div"> {
-  /**
-   * Box 컴포넌트가 사용할 HTML 태그
-   *
-   * @default 'div'
-   */
   tag?: ElementType;
-  /** Box 컴포넌트 스타일 옵션 */
   styles?: BoxStylingProps;
 }
 

.yarn/cache/@babel-plugin-transform-modules-commonjs-npm-7.23.3-024eed1eda-5c8840c5c9.zip

@@ -4,13 +4,7 @@ import type { FlexStylingProps } from "@/components/Flex/Flex.style";
 import { flexStyle } from "@/components/Flex/Flex.style";
 
 export interface FlexProps extends ComponentPropsWithoutRef<"div"> {
-  /**
-   * Flex 컴포넌트가 사용할 HTML 태그
-   *
-   * @default 'div'
-   */
   tag?: ElementType;
-  /** Flex 컴포넌트 스타일 옵션 */
   styles?: FlexStylingProps;
 }
 

.yarn/cache/@babel-plugin-transform-react-constant-elements-npm-7.24.1-46c4490f1f-3d1af98760.zip

@@ -1,4 +1,4 @@
-import PrimaryLogo from "@/assets/svg/ic-logo.svg";
+import PrimaryLogo from "@/assets/svg/ic-logo.svg?react";
 
 interface LogoType {
   width: number;

.yarn/cache/@babel-plugin-transform-typescript-npm-7.23.5-90551c425f-75d6689bfd.zip

@@ -5,11 +5,6 @@ import { skeletonStyle } from "@/components/Skeleton/Skeleton.style";
 export interface SkeletonProps extends ComponentPropsWithoutRef<"div"> {
   width?: string;
   height?: string;
-  /**
-   * Skeleton 모양
-   *
-   * @default 'square'
-   */
   variant?: "square" | "circle";
 }