watchers

packages/ui-components/package.json

@@ -2,16 +2,22 @@
   "name": "@buster/ui-components",
   "version": "1.0.0",
   "type": "module",
-  "main": "dist/index.js",
+  "module": "./dist/index.js",
-  "types": "dist/index.d.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
-    "styles": "./src/styles/styles.css"
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./src/styles/styles.css",
+    "./dist/style.css": "./dist/style.css"
   },
+  "files": ["dist", "src/styles/styles.css"],
   "scripts": {
     "prebuild": "tsx scripts/validate-env.ts",
-    "build": "tsc",
+    "build": "vite build && tsc --emitDeclarationOnly --declaration",
     "typecheck": "tsc --noEmit",
-    "dev": "tsc --watch",
+    "dev": "vite build --watch",
     "lint": "biome check",
     "test": "vitest run",
     "test:watch": "vitest watch",

packages/ui-components/src/components/charts/stories/messageAutoChartHandler/messageAutoChartHandler.ts

@@ -31,6 +31,8 @@ const keySpecificHandlers: Partial<
     if (colors && !isEmpty(colors)) return colors;
     if (colors && colors.length <= 3)
       return Array.from({ length: 3 }, (_, index) => colors[index % colors.length]);
+
+    return;
   },
   scatterDotSize: (value: unknown) => {
     const scatterDotSize = value as ChartConfigProps['scatterDotSize'];

packages/ui-components/src/index.ts

@@ -0,0 +1,15 @@
+// Main entry point for @buster/ui-components
+//
+// Instead of using barrel exports, you can:
+// 1. Import components directly: import { Button } from '@buster/ui-components/dist/components/button'
+// 2. Or add specific exports here as needed
+
+// Example: Export specific components
+// export { Button } from './components/button/Button';
+// export { Card } from './components/card/Card';
+
+// Example: Export specific hooks
+// export { useTheme } from './hooks/useTheme';
+
+// For now, let's just export a version indicator
+export const version = '1.0.0';

packages/ui-components/tsconfig.json

@@ -6,6 +6,8 @@
     "rootDir": "src",
     "jsx": "react-jsx",
     "lib": ["ESNext", "DOM"],
+    "declarationDir": "dist",
+    "emitDeclarationOnly": true,
     "paths": {
       "@/hooks/*": ["./src/hooks/*"],
       "@/lib/*": ["./src/lib/*"]

packages/ui-components/vite.config.ts

@@ -1,7 +1,25 @@
+import { resolve } from 'node:path';
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        // Preserve the directory structure for better tree-shaking
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+      },
+    },
+    sourcemap: true,
+    // Ensure TypeScript declarations are generated
+    emptyOutDir: false,
+  },
 });