build(react): update build config, modified exports field in package.json

Author: eteplus

packages/react/package.json

@@ -8,6 +8,7 @@
   "scripts": {
     "clean": "rm -rf node_modules",
     "build": "tsc && vite build",
+    "build:watch": "tsc && vite build -w -l warn",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "lint:config-viewer": "npx @eslint/config-inspector",
     "typecheck": "tsc --noEmit",
@@ -23,9 +24,17 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
     },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.mjs"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.mjs"
+    },
     "./*": {
-      "types": "./dist/*/*.d.ts",
-      "import": "./dist/*/*.mjs"
+      "types": "./dist/components/*/*.d.ts",
+      "import": "./dist/components/*/*.mjs"
     }
   },
   "typesVersions": {

packages/react/vite.config.ts

@@ -12,18 +12,15 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const entries = glob
   .sync('src/**/*.{ts,tsx}', {
-    ignore: ['src/components/index.ts', 'src/**/*.stories.{ts,tsx}'],
+    ignore: ['src/**/*.stories.{ts,tsx}'],
   })
-  .map((file) => {
-    const isInComponentsDir = file.includes('src/components/');
-    return [
-      path.relative(
-        isInComponentsDir ? 'src/components' : 'src',
-        file.slice(0, file.length - path.extname(file).length),
-      ),
-      path.resolve(__dirname, file),
-    ];
-  });
+  .map(file => ([
+    path.relative(
+      'src',
+      file.slice(0, file.length - path.extname(file).length),
+    ),
+    path.resolve(__dirname, file),
+  ]));
 
 /**
  * @see https://vitejs.dev/config/
@@ -35,10 +32,6 @@ export default defineConfig({
     dts({
       include: ['src/**/*.{ts,tsx}'],
       exclude: ['src/**/*.stories.{ts,tsx}'],
-      beforeWriteFile: (filePath, content) => ({
-        filePath: filePath.replace('components/', ''),
-        content: content,
-      }),
     }),
   ],
   resolve: {
@@ -59,6 +52,7 @@ export default defineConfig({
         'react',
         'react/jsx-runtime',
         'react-dom',
+        './components',
         ...Object.keys(dependencies),
       ],
       output: {

packages/theme/package.json

@@ -18,7 +18,7 @@
     "figma-theme",
     "unocss",
     "unocss-preset",
-    "unocss-preset-figma"
+    "unocss-preset-figma-theme"
   ],
   "publishConfig": {
     "access": "public"

playground/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "clean": "rm -rf node_modules && rm -rf dist",
-    "dev": "pnpm -F @thinkbuff/figma-theme stub && pnpm -F @thinkbuff/figma-react build --watch & vite",
+    "dev": "pnpm -F @thinkbuff/figma-theme stub && pnpm -F @thinkbuff/figma-react build:watch & vite",
     "build": "tsc && vite build",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"

playground/src/app.tsx

@@ -9,6 +9,7 @@ import {
   SliderRange,
   SliderThumb,
 } from '@thinkbuff/figma-react/slider';
+import { cn } from '@thinkbuff/figma-react/utils';
 
 import reactLogo from './assets/react.svg';
 
@@ -48,7 +49,7 @@ function Slider() {
 export function App() {
   return (
     <TooltipProvider>
-      <div className="outline-figma-icon">
+      <div className={cn('outline-figma-icon', 'outline-figma-border-brand')}>
         <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
           <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>