Merge pull request #337 from codex-team/feat/implement-tree-shaking

feat: implement tree-shaking

Author: quangtuanitmo18

@codexteam/ui/.gitignore

@@ -0,0 +1,23 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+
+# Logs
+*.log
+
+# Test app (internal testing only)
+test-app/
+
+# Editor
+.idea/
+.vscode/
+*.sw?
+
+# OS
+.DS_Store
+
+# Environment
+.env
+.env.local

@codexteam/ui/.npmignore

@@ -1,4 +1,5 @@
 dev/
+test-app/
 node_modules/
 src/
 *.log

@codexteam/ui/README.md

@@ -4,50 +4,150 @@ The Design System forged in the fires of open-source development
 
 Demo: https://cdx-ui.vercel.app/
 
-- [ ] Make tree-shaking work
+- [x] Make tree-shaking work
 - [ ] Test Web/React/Native implementations
 - [ ] Think about i18n
 
-## Access Vue components
+## Installation
 
-```ts
-import { Button, Input, Heading } from '@codexteam/ui/vue';
+```bash
+npm install @codexteam/ui
+# or
+yarn add @codexteam/ui
 ```
 
+## Quick Start
+
+### 1. Import Base Styles (Required)
+
+```typescript
+// main.ts
+import '@codexteam/ui/styles';
+```
+
+### 2. Import Fonts (Optional)
+
+Fonts are **optional** and are **not** loaded by default. If you want to use the bundled **Inter** and **JetBrains Mono** fonts, import them explicitly:
+
+```typescript
+// main.ts
+import '@codexteam/ui/styles/fonts';
+```
+
+If you don't import fonts, typography will fall back to system fonts.
+
+### 3. Import Themes (Tree-shakeable)
+
+Import only the themes you need - others will NOT be included in the bundle:
+
+```typescript
+import '@codexteam/ui/styles/themes/pure';
+import '@codexteam/ui/styles/themes/grass';
+```
+
+**Available themes:** `graphite`, `crimson`, `red`, `violet`, `grass`, `amber`, `pure`, `sky`
+
+### 4. Import Components (Tree-shakeable)
+
+```typescript
+import { Button, Avatar, Heading } from '@codexteam/ui/vue';
+```
+
+### 5. Apply Theme in Template
+
 ```vue
-<Heading :level="2">
-  CodeX UI showcase
-</Heading>
-<Button text="Button text" />
-<Input text="Input text" />
+<template>
+  <div color-scheme="light" theme-accent="pure" theme-base="grass">
+    <Button>Click me</Button>
+  </div>
+</template>
+```
+
+## Complete Example
+
+**main.ts:**
+```typescript
+import { createApp } from 'vue';
+import App from './App.vue';
+
+// Base styles (required)
+import '@codexteam/ui/styles';
+
+// Fonts (optional)
+import '@codexteam/ui/styles/fonts';
+
+// Themes (import only what you need)
+import '@codexteam/ui/styles/themes/pure';
+import '@codexteam/ui/styles/themes/grass';
+
+createApp(App).mount('#app');
+```
+
+**App.vue:**
+```vue
+<script setup lang="ts">
+import { Button, Heading, Input } from '@codexteam/ui/vue';
+</script>
+
+<template>
+  <div color-scheme="light" theme-accent="pure" theme-base="grass">
+    <Heading :level="2">CodeX UI showcase</Heading>
+    <Button>Button text</Button>
+    <Input placeholder="Input text" />
+  </div>
+</template>
 ```
 
 ## Types for Vue Components
 
 Add the following "path" to the "tsconfig.json"
 
-```
+```json
 {
   "compilerOptions": {
     "paths": {
-      "@codexteam/ui/vue": ["../@codexteam/ui/dist/types/vue/index.d.ts"],
+      "@codexteam/ui/vue": ["../@codexteam/ui/dist/types/vue/index.d.ts"]
     }
-  },
+  }
 }
-
 ```
 
 ## Build Design System
 Build the design system to be able to use the @codexteam/ui/styles import
 
-```
+```bash
 yarn build
 ```
 
-## Access CSS variables
+## Custom Theming
+
+If you don't want to use built-in themes, define your own CSS variables:
+
+```css
+:root {
+  /* Base colors */
+  --base--bg-primary: #ffffff;
+  --base--bg-secondary: #f5f5f5;
+  --base--bg-secondary-hover: #eeeeee;
+  --base--border: #e0e0e0;
+  --base--text: #333333;
+  --base--text-secondary: #666666;
+  --base--solid: #000000;
+  --base--text-solid-foreground: #ffffff;
+
+  /* Accent colors */
+  --accent--solid: #2196f3;
+  --accent--solid-hover: #1976d2;
+  --accent--bg-secondary: #e3f2fd;
+  --accent--text-solid-foreground: #ffffff;
+}
+```
+
+## Access CSS Variables
 
-1. Import `@codexteam/ui/styles` somewhere in App
-2. Use variable in CSS, e.g `var(--ui-color)`
+1. Import `@codexteam/ui/styles` in your app
+2. Import themes you need (e.g., `@codexteam/ui/styles/themes/pure`)
+3. Use variables in CSS: `var(--base--text)`, `var(--accent--solid)`
 
 ## Using Typography
 

@codexteam/ui/dev/index.html

@@ -10,7 +10,9 @@
   <script type="module">
     import { createApp } from 'vue';
     import { createRouter, createWebHashHistory } from 'vue-router';
+    import "../src/styles/fonts.pcss";
     import "../src/styles/index.pcss";
+    import "../src/styles/themes/index.pcss";
 
     import Playground from './Playground.vue';
     import routes from './routes';

@codexteam/ui/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@codexteam/ui",
-  "version": "0.1.1",
+  "version": "0.2.0-rc.3",
   "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.pcss"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "yarn build-src && yarn build-types",
@@ -17,12 +21,38 @@
   ],
   "exports": {
     "./vue": {
-      "import": {
-        "default": "./dist/vue.js"
-      }
+      "types": "./dist/types/vue/index.d.ts",
+      "import": "./dist/vue.js"
     },
     "./styles": {
-      "import": "./dist/styles.css"
+      "import": "./dist/style.css"
+    },
+    "./styles/fonts": {
+      "import": "./dist/styles/fonts.css"
+    },
+    "./styles/themes/graphite": {
+      "import": "./dist/styles/themes/graphite.css"
+    },
+    "./styles/themes/crimson": {
+      "import": "./dist/styles/themes/crimson.css"
+    },
+    "./styles/themes/red": {
+      "import": "./dist/styles/themes/red.css"
+    },
+    "./styles/themes/violet": {
+      "import": "./dist/styles/themes/violet.css"
+    },
+    "./styles/themes/grass": {
+      "import": "./dist/styles/themes/grass.css"
+    },
+    "./styles/themes/amber": {
+      "import": "./dist/styles/themes/amber.css"
+    },
+    "./styles/themes/pure": {
+      "import": "./dist/styles/themes/pure.css"
+    },
+    "./styles/themes/sky": {
+      "import": "./dist/styles/themes/sky.css"
     }
   },
   "devDependencies": {
@@ -48,7 +78,11 @@
     "vue-tsc": "latest"
   },
   "dependencies": {
+    "@codexteam/icons": "^0.3.3",
     "@editorjs/editorjs": "2.30.2",
+    "@vueuse/core": "^10.3.0"
+  },
+  "peerDependencies": {
     "vue": "^3.4.16"
   }
 }

@codexteam/ui/src/styles/fonts.pcss

@@ -0,0 +1,2 @@
+@import url('../fonts/Inter/inter.css');
+@import url('../fonts/JetBrainsMono/JetBrainsMono.css');

@codexteam/ui/src/styles/index.pcss

@@ -1,4 +1,3 @@
-@import './themes/index.pcss';
 @import './dimensions.pcss';
 @import './typography.pcss';
 @import './mixins.pcss';

@codexteam/ui/src/styles/typography.pcss

@@ -1,5 +1,3 @@
-@import url('../fonts/Inter/inter.css');
-@import url('../fonts/JetBrainsMono/JetBrainsMono.css');
 
 /**
  * Fonts setup