ADCIO-4535) Introducing a new structure with tree shaking (#104)

* chore: Update package.json and vite.config.ts for module exports and build options

* fix: Change 'prepare' script to 'postinstall' in package.json

* fix: remove esm dir

* fix: Update package.json to include module and types entries

* chore: Add new folders for component, composite, core, icon, legacy, and token

* chore: Update @emotion/react and @emotion/styled dependencies to the latest versions

package.json

@@ -4,22 +4,31 @@
   "description": "Design System for Corca, Inc.",
   "private": false,
   "version": "0.0.29",
-  "type": "module",
   "packageManager": "[email protected]",
-  "main": "dist/index.js",
-  "styles": "dist/global.css",
-  "repository": "https://github.com/corca-ai/cds",
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "sideEffects": false,
+  "repository": "https://github.com/corca-ai/cds",
   "scripts": {
     "build": "tsc --noEmit && vite build",
     "typecheck": "tsc --noEmit",
     "lint": "eslint ./src",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prepare": "husky"
+    "postinstall": "husky"
   },
   "dependencies": {
     "date-fns": "3.3.1",
@@ -30,16 +39,14 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.11.0",
-    "@types/react": "^18.2.60",
-    "@types/react-dom": "^18.2.19"
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0"
   },
   "devDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@emotion/react": "11.11.4",
-    "@emotion/styled": "11.11.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
     "@types/react": "^18.2.60",
     "@types/react-dom": "^18.2.19",
     "@eslint/js": "9.7.0",
@@ -79,8 +86,7 @@
   "lint-staged": {
     "*.{ts,tsx}": [
       "prettier --parser=typescript --write",
-      "eslint --fix",
-      "tsc --noEmit"
+      "eslint --fix"
     ]
   }
 }

src/component/readme.md

@@ -0,0 +1,3 @@
+# component
+component를 관리하는 폴더입니다.
+component란 디자인 명세와 일치하는 컴포넌트들입니다.

src/composite/readme.md

@@ -0,0 +1,3 @@
+# composite
+composite을 관리하는 폴더입니다.
+composite이란 반복적으로 사용하는 컴포넌트를 쉽게 사용하기 위해 1개 이상의 컴포넌트를 조합 및 수정하는 컴포넌트입니다.

src/core/readme.md

@@ -0,0 +1,3 @@
+# core
+core 로직을 관리하는 폴더입니다.
+core란 component, composite 등에서 사용하는 여러 공통되는 로직을 관리하기 위한 로직들입니다.

src/icon/readme.md

@@ -0,0 +1,2 @@
+# icon
+icon을 관리하는 폴더입니다.

src/legacy/readme.md

@@ -0,0 +1,4 @@
+# legacy
+legacy를 관리하는 폴더입니다.
+새로운 폴더들로 이동하기 전의 코드들입니다.
+점진적으로 새로운 구조로 이동할 예정입니다.

src/token/readme.md

@@ -0,0 +1,3 @@
+# token
+token을 관리하는 폴더입니다.
+token이란 공통적으로 사용하는 기본 스타일 값들을 의미합니다.

tsconfig.build.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "moduleResolution": "Bundler"
+  },
   "exclude": ["**/*.stories.*"]
 }

vite.config.ts

@@ -9,22 +9,39 @@ export default defineConfig({
   build: {
     lib: {
       entry: resolve(__dirname, './src/index.ts'),
-      formats: ['es', 'cjs'],
       name: 'cds',
       fileName: 'index',
     },
+    sourcemap: true,
+    emptyOutDir: true,
     rollupOptions: {
-      external: ['react', 'react-dom', '@emotion/react', '@emotion/styled'],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
+      external: [
+        'react',
+        'react-dom',
+        '@emotion/react',
+        '@emotion/styled',
+        '@emotion/react/jsx-runtime',
+      ],
+      output: [
+        {
+          format: 'cjs',
+          preserveModulesRoot: 'src',
+          entryFileNames: '[name].js',
+        },
+        {
+          format: 'es',
+          preserveModules: true,
+          preserveModulesRoot: 'src',
+          entryFileNames: '[name].mjs',
         },
-      },
+      ],
     },
   },
   plugins: [
-    react(),
+    react({
+      jsxImportSource: '@emotion/react',
+      jsxRuntime: 'automatic',
+    }),
     dts({ tsconfigPath: './tsconfig.build.json' }),
     viteStaticCopy({
       targets: [