From 0f23a8f7a018d66f61d128a98b4016371c427d1e Mon Sep 17 00:00:00 2001 From: folinhilo Date: Sat, 16 May 2026 00:51:11 +0800 Subject: [PATCH] mm --- packages/css/src/index.css | 0 packages/css/src/index.ts | 1 - packages/css/vite.config.ts | 39 ----- .../componnets/button/useButtonSlots.ts | 29 ---- packages/ui-web-headless/package.json | 44 ------ packages/ui-web-headless/scripts/gen-index.ts | 147 ------------------ packages/ui-web-headless/tsconfig.build.json | 41 ----- packages/ui-web-headless/tsconfig.json | 26 ---- packages/ui-web-headless/utils/useProps.ts | 5 - packages/ui-web-headless/vite.config.ts | 39 ----- packages/{css => ui-web}/package.json | 4 +- packages/ui-web/playground/App.tsx | 7 + packages/ui-web/playground/index.html | 13 ++ packages/ui-web/playground/main.tsx | 9 ++ packages/{css => ui-web}/scripts/gen-index.ts | 0 .../src}/componnets/button/ButtonIcon.tsx | 0 .../src}/componnets/button/ButtonLoading.tsx | 0 .../src}/componnets/button/ButtonRoot.tsx | 24 +-- .../src}/componnets/button/index.ts | 0 .../src/componnets/button/useButtonSlots.ts | 52 +++++++ .../src => ui-web/src/styles}/base/root.css | 0 .../src/styles}/recipe/itemSizeRecipe.ts | 0 .../size-insensitive/align-content.css | 0 .../utility/size-insensitive/align-items.css | 0 .../utility/size-insensitive/align-self.css | 0 .../utility/size-insensitive/animation.css | 0 .../size-insensitive/box-decoration.css | 0 .../utility/size-insensitive/box-inside.css | 0 .../utility/size-insensitive/box-sizing.css | 0 .../utility/size-insensitive/brand.css | 0 .../utility/size-insensitive/break-after.css | 0 .../utility/size-insensitive/break-before.css | 0 .../utility/size-insensitive/cursor.css | 0 .../utility/size-insensitive/display.css | 0 .../utility/size-insensitive/drop-shadow.css | 0 .../size-insensitive/flex-direction.css | 0 .../utility/size-insensitive/flex-wrap.css | 0 .../utility/size-insensitive/font-family.css | 0 .../size-insensitive/justify-content.css | 0 .../size-insensitive/justify-items.css | 0 .../utility/size-insensitive/justify-self.css | 0 .../utility/size-insensitive/overflow.css | 0 .../size-insensitive/overscroll-behavior.css | 0 .../utility/size-insensitive/position.css | 0 .../size-insensitive/screen-reader.css | 0 .../utility/size-insensitive/theme.css | 0 .../utility/size-insensitive/user-select.css | 0 .../utility/size-insensitive/z-index.css | 0 .../utility/size-sensitive/border-radius.css | 0 .../utility/size-sensitive/font-size.css | 0 .../utility/size-sensitive/font-weight.css | 0 .../styles}/utility/size-sensitive/gap.css | 0 .../styles}/utility/size-sensitive/height.css | 0 .../utility/size-sensitive/margin-block.css | 0 .../utility/size-sensitive/margin-inline.css | 0 .../utility/size-sensitive/padding-long.css | 0 .../utility/size-sensitive/padding-short.css | 0 .../styles}/utility/size-sensitive/width.css | 0 .../src => ui-web/src/styles}/utils/cpm.ts | 0 .../src => ui-web/src/styles}/utils/cvr.ts | 0 .../src/styles}/utils/prefix-list.ts | 0 packages/{css => ui-web}/src/types/env.d.ts | 0 .../src}/utils/mergeProps.ts | 4 +- packages/ui-web/src/utils/useStateProps.ts | 12 ++ packages/{css => ui-web}/tsconfig.build.json | 0 packages/{css => ui-web}/tsconfig.json | 0 packages/ui-web/vite.config.ts | 41 +++++ 67 files changed, 153 insertions(+), 384 deletions(-) delete mode 100644 packages/css/src/index.css delete mode 100644 packages/css/src/index.ts delete mode 100644 packages/css/vite.config.ts delete mode 100644 packages/ui-web-headless/componnets/button/useButtonSlots.ts delete mode 100644 packages/ui-web-headless/package.json delete mode 100644 packages/ui-web-headless/scripts/gen-index.ts delete mode 100644 packages/ui-web-headless/tsconfig.build.json delete mode 100644 packages/ui-web-headless/tsconfig.json delete mode 100644 packages/ui-web-headless/utils/useProps.ts delete mode 100644 packages/ui-web-headless/vite.config.ts rename packages/{css => ui-web}/package.json (92%) create mode 100644 packages/ui-web/playground/App.tsx create mode 100644 packages/ui-web/playground/index.html create mode 100644 packages/ui-web/playground/main.tsx rename packages/{css => ui-web}/scripts/gen-index.ts (100%) rename packages/{ui-web-headless => ui-web/src}/componnets/button/ButtonIcon.tsx (100%) rename packages/{ui-web-headless => ui-web/src}/componnets/button/ButtonLoading.tsx (100%) rename packages/{ui-web-headless => ui-web/src}/componnets/button/ButtonRoot.tsx (55%) rename packages/{ui-web-headless => ui-web/src}/componnets/button/index.ts (100%) create mode 100644 packages/ui-web/src/componnets/button/useButtonSlots.ts rename packages/{css/src => ui-web/src/styles}/base/root.css (100%) rename packages/{css/src => ui-web/src/styles}/recipe/itemSizeRecipe.ts (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/align-content.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/align-items.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/align-self.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/animation.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/box-decoration.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/box-inside.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/box-sizing.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/brand.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/break-after.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/break-before.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/cursor.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/display.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/drop-shadow.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/flex-direction.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/flex-wrap.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/font-family.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/justify-content.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/justify-items.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/justify-self.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/overflow.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/overscroll-behavior.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/position.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/screen-reader.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/theme.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/user-select.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-insensitive/z-index.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-sensitive/border-radius.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-sensitive/font-size.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-sensitive/font-weight.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-sensitive/gap.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-sensitive/height.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-sensitive/margin-block.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-sensitive/margin-inline.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-sensitive/padding-long.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-sensitive/padding-short.css (100%) rename packages/{css/src => ui-web/src/styles}/utility/size-sensitive/width.css (100%) rename packages/{css/src => ui-web/src/styles}/utils/cpm.ts (100%) rename packages/{css/src => ui-web/src/styles}/utils/cvr.ts (100%) rename packages/{css/src => ui-web/src/styles}/utils/prefix-list.ts (100%) rename packages/{css => ui-web}/src/types/env.d.ts (100%) rename packages/{ui-web-headless => ui-web/src}/utils/mergeProps.ts (95%) create mode 100644 packages/ui-web/src/utils/useStateProps.ts rename packages/{css => ui-web}/tsconfig.build.json (100%) rename packages/{css => ui-web}/tsconfig.json (100%) create mode 100644 packages/ui-web/vite.config.ts diff --git a/packages/css/src/index.css b/packages/css/src/index.css deleted file mode 100644 index e69de29..0000000 diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts deleted file mode 100644 index 7505b6f..0000000 --- a/packages/css/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './index.css' \ No newline at end of file diff --git a/packages/css/vite.config.ts b/packages/css/vite.config.ts deleted file mode 100644 index c632b6e..0000000 --- a/packages/css/vite.config.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react"; -import path from "path"; - -export default defineConfig({ - // d.ts 由 tsc 完成，使用专门配置 tsconfig.build.json - // 转换由 oxc 完成 - // 打包由 rolldown 完成 - plugins: [react()], - - build: { - cssMinify: false, - lib: { - entry: path.resolve(import.meta.dirname, "src/index.ts"), - // 不写 vite 默认是 index.mjs 和 index.js，不方便识别 - formats: ["es", "cjs"], - // package.json 管别人怎么使用， - // build.lib 管怎么打包，生成什么 - // 如果不一致，就会报错，指向文件不存在 - fileName: (format) => `index.${format}.js`, - }, - rolldownOptions: { - // 避免这些被打包，peerDependencies 对 rolldown 是无效的，不会自动 external - external: ["react", "react-dom", "react/jsx-runtime"], - // 专门给 UMD / IIFE​ 的映射表 - output: { - globals: { - react: "React", - "react-dom": "ReactDOM", - }, - }, - }, - - emptyOutDir: true, // 防止旧产物残留 - sourcemap: true, // 方便调试 - cssCodeSplit: false, // 合并成一个css文件 - outDir: "dist", // 专管打包输出目录，tsconfig.build.json 中的 outDir 管的是 d.ts 输出目录 - }, -}); diff --git a/packages/ui-web-headless/componnets/button/useButtonSlots.ts b/packages/ui-web-headless/componnets/button/useButtonSlots.ts deleted file mode 100644 index 45ac0a8..0000000 --- a/packages/ui-web-headless/componnets/button/useButtonSlots.ts +++ /dev/null @@ -1,29 +0,0 @@ -import React, { ReactNode, isValidElement, Children } from "react"; -import { ButtonIcon } from "./ButtonIcon"; -import { ButtonLoading } from "./ButtonLoading"; - -export function useButtonSlot(children: ReactNode) { - const iconNodes: React.ReactElement[] = []; - const loadingNodes: React.ReactElement[] = []; - - const collectNodes = (nodes: ReactNode) => { - Children.forEach(nodes, (child) => { - if (!isValidElement(child)) return; - - if (child.type === ButtonIcon) { - iconNodes.push(child); - } else if (child.type === ButtonLoading) { - loadingNodes.push(child); - } else if ((child as any).props.children) { - collectNodes((child as any).props.children); - } - }); - }; - - collectNodes(children); - - return { - iconNode: iconNodes.at(-1), - loadingNode: loadingNodes.at(-1), - }; -} diff --git a/packages/ui-web-headless/package.json b/packages/ui-web-headless/package.json deleted file mode 100644 index c749b6f..0000000 --- a/packages/ui-web-headless/package.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "name": "@defgov/ui-web-headless", - "version": "0.0.0", - "private": true, - "type": "module", - "sideEffects": [ - "*.css" - ], - "module": "./dist/index.es.js", - "main": "./dist/index.cjs.js", - "types": "./dist/index.d.ts", - "style": "./dist/index.css", - "exports": { - ".": { - "import": "./dist/index.es.js", - "require": "./dist/index.cjs.js", - "types": "./dist/index.d.ts" - }, - "./index.css": "./dist/index.css" - }, - "files": [ - "dist" - ], - "scripts": { - "gen-index": "ts-node scripts/gen-index.ts", - "gen-dts": "tsc -p tsconfig.build.json", - "dev": "pnpm gen-index && vite build --watch", - "build": "pnpm gen-index && vite build && pnpm gen-dts" - }, - "devDependencies": { - "@types/node": "^25.6.0", - "@vitejs/plugin-react": "^6.0.1", - "tinyglobby": "^0.2.16", - "ts-node": "^10.9.2", - "typescript": "^6.0.3", - "vite": "^8.0.10", - "@types/react": "^19.2.14", - "@types/react-dom": "^19.2.3" - }, - "peerDependencies": { - "react": "^19", - "react-dom": "^19" - } -} diff --git a/packages/ui-web-headless/scripts/gen-index.ts b/packages/ui-web-headless/scripts/gen-index.ts deleted file mode 100644 index 64433db..0000000 --- a/packages/ui-web-headless/scripts/gen-index.ts +++ /dev/null @@ -1,147 +0,0 @@ -import fs from "fs"; -import path from "path"; -// 1. 引入 tinyglobby -import { globSync } from "tinyglobby"; - -interface Config { - outputDir: string; - outputFilenameWithExt: string; - scanDirs: string[]; - importPrefix: string; - predefineStatements: string[]; - includeExtensions: string[]; - excludeDirs: string[]; - excludeFileExtensions: string[]; - excludePatterns: RegExp[]; -} - -const cssConfig: Config = { - outputDir: "src", - outputFilenameWithExt: "index.css", - scanDirs: ["src"], - importPrefix: "@import", - predefineStatements: [], - includeExtensions: [".css"], - excludeDirs: ["__tests__", "tests", "story", "stories", "types"], - excludeFileExtensions: [], - excludePatterns: [/^index\.(css)$/, /\.(test|spec)\./, /\.(story|stories)\./], -}; - -const tsConfig: Config = { - outputDir: "src", - outputFilenameWithExt: "index.ts", - scanDirs: ["src"], - importPrefix: "export * from", - predefineStatements: ["import './index.css'"], - includeExtensions: [".ts", "tsx", "js", "jsx"], - excludeDirs: ["__tests__", "tests", "story", "stories", "types"], - excludeFileExtensions: [".d.ts"], - excludePatterns: [ - /^index\.(ts|tsx|js|jsx)$/, - /\.(test|spec)\./, - /\.(story|stories)\./, - ], -}; - -const normalizePath = (p: string) => p.replace(/\\/g, "/"); - -const isExcludeDir = (filePath: string, excludeDirs: string[]) => { - const normalized = normalizePath(filePath); - return excludeDirs.some((dir) => normalized.includes(`/${dir}/`)); -}; - -const isExcludeFileExtensions = ( - filePath: string, - excludeFileExtensions: string[], -) => excludeFileExtensions.some((ext) => filePath.endsWith(ext)); - -const isExcludePattern = (fileName: string, excludePatterns: RegExp[]) => - excludePatterns.some((pattern) => pattern.test(fileName)); - -// ---------------------------------------- -function isValidFile(filePath: string, config: Config): boolean { - const fileName = filePath.split(/[\\/]/).pop()!; - - if (isExcludeDir(filePath, config.excludeDirs)) return false; - if (isExcludeFileExtensions(filePath, config.excludeFileExtensions)) - return false; - if (isExcludePattern(fileName, config.excludePatterns)) return false; - - const ext = path.extname(filePath); - return config.includeExtensions.includes(ext); -} -// ----------------------------------------- -function generateIndexFile(config: Config) { - const currentPath = process.cwd(); - const outputPath = path.resolve(currentPath, config.outputDir); - let exportStatements: string[] = []; - - // ------ scanDirs forEach start ------------------------ - config.scanDirs.forEach((dir) => { - // 2. 路径模式保持不变，tinyglobby 能够正确处理 - const scanPattern = path.resolve(currentPath, dir, "**", "*.*"); - - const allFilePath = globSync(scanPattern, { - absolute: true, - // 3. 移除了 windowsPathsNoEscape，tinyglobby 默认处理路径更智能 - }); - - const validFiles = allFilePath.filter((filePath) => { - return isValidFile(filePath, config); - }); - - if (validFiles.length === 0) { - console.log( - `⚠️ 未找到符合条件的文件，跳过生成 ${config.outputFilenameWithExt}`, - ); - return; - } - - validFiles.sort(); - - validFiles.forEach((file) => { - const relativePath = path.relative(outputPath, file); - const importPath = `./${relativePath.replace(/\\/g, "/")}`; - exportStatements.push(`${config.importPrefix} '${importPath}';`); - }); - }); - - // --------- scanDirs forEach end ---------------- - - const indexFileContent = ` -${config.predefineStatements.join("\n")} -${exportStatements.join("\n")} -`.trim(); - - const indexFilePath = path.resolve( - currentPath, - config.outputDir, - config.outputFilenameWithExt, - ); - - // ✅ 内容比对，避免重复写入 - if (fs.existsSync(indexFilePath)) { - const old = fs.readFileSync(indexFilePath, "utf8"); - if (old === indexFileContent) { - console.log( - `✅ ${config.outputFilenameWithExt} 内容无变化，无需重新生成`, - ); - return; - } - } - - fs.writeFileSync(indexFilePath, indexFileContent, "utf8"); - console.log(`✅ 成功生成 ${config.outputFilenameWithExt}: ${indexFilePath}`); -} - -// -------------------------------------------------- - -try { - console.log(`🚀 [gen-index] 开始扫描`); - generateIndexFile(cssConfig); - generateIndexFile(tsConfig); -} catch (err) { - const msg = err instanceof Error ? err.message : String(err); - console.error(`❌ [gen-index] 执行失败: ${msg}`); - process.exit(1); -} diff --git a/packages/ui-web-headless/tsconfig.build.json b/packages/ui-web-headless/tsconfig.build.json deleted file mode 100644 index 4581f3b..0000000 --- a/packages/ui-web-headless/tsconfig.build.json +++ /dev/null @@ -1,41 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "noEmit": false, - "emitDeclarationOnly": true, - "declaration": true, - "declarationDir": "./dist", - "rootDir": "./src", - "outDir": "./dist" - }, - "include": ["src"], - "exclude": [ - "node_modules", - "dist", - ".turbo/**/*", - ".cache/**/*", - ".vite/**/*", - "vite.config.ts", - "*.config.ts", - "*.config.js", - "tsconfig.*.json", - "__tests__/**/*", - "test/**/*", - "tests/**/*", - "**/*.test.ts", - "**/*.test.tsx", - "**/*.spec.ts", - "**/*.spec.tsx", - ".storybook/**/*", - "stories/**/*", - "example/**/*", - "examples/**/*", - "scripts/**/*", - ".env", - ".env.*", - "public/**/*", - "docs/**/*", - "README.md", - "LICENSE" - ] -} diff --git a/packages/ui-web-headless/tsconfig.json b/packages/ui-web-headless/tsconfig.json deleted file mode 100644 index eb90b48..0000000 --- a/packages/ui-web-headless/tsconfig.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "compilerOptions": { - "target": "es2025", - "lib": ["ES2025", "DOM", "DOM.Iterable"], - "module": "ESNext", - "types": ["node", "vite/client"], - "strict": true, - "esModuleInterop": true, - "skipLibCheck": true, - - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "verbatimModuleSyntax": true, - "moduleDetection": "force", - "noEmit": true, - "jsx": "react-jsx", - - /* Linting */ - "noUnusedLocals": true, - "noUnusedParameters": true, - "erasableSyntaxOnly": true, - "noFallthroughCasesInSwitch": true - }, - "include": ["src", "scripts", "vite.config.ts"] -} diff --git a/packages/ui-web-headless/utils/useProps.ts b/packages/ui-web-headless/utils/useProps.ts deleted file mode 100644 index 67a4807..0000000 --- a/packages/ui-web-headless/utils/useProps.ts +++ /dev/null @@ -1,5 +0,0 @@ -export function useProps(props: Record) { - const stateProps = {}; - const primitiveProps = {}; - return; -} diff --git a/packages/ui-web-headless/vite.config.ts b/packages/ui-web-headless/vite.config.ts deleted file mode 100644 index c632b6e..0000000 --- a/packages/ui-web-headless/vite.config.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react"; -import path from "path"; - -export default defineConfig({ - // d.ts 由 tsc 完成，使用专门配置 tsconfig.build.json - // 转换由 oxc 完成 - // 打包由 rolldown 完成 - plugins: [react()], - - build: { - cssMinify: false, - lib: { - entry: path.resolve(import.meta.dirname, "src/index.ts"), - // 不写 vite 默认是 index.mjs 和 index.js，不方便识别 - formats: ["es", "cjs"], - // package.json 管别人怎么使用， - // build.lib 管怎么打包，生成什么 - // 如果不一致，就会报错，指向文件不存在 - fileName: (format) => `index.${format}.js`, - }, - rolldownOptions: { - // 避免这些被打包，peerDependencies 对 rolldown 是无效的，不会自动 external - external: ["react", "react-dom", "react/jsx-runtime"], - // 专门给 UMD / IIFE​ 的映射表 - output: { - globals: { - react: "React", - "react-dom": "ReactDOM", - }, - }, - }, - - emptyOutDir: true, // 防止旧产物残留 - sourcemap: true, // 方便调试 - cssCodeSplit: false, // 合并成一个css文件 - outDir: "dist", // 专管打包输出目录，tsconfig.build.json 中的 outDir 管的是 d.ts 输出目录 - }, -}); diff --git a/packages/css/package.json b/packages/ui-web/package.json similarity index 92% rename from packages/css/package.json rename to packages/ui-web/package.json index cb7c9a6..1fd1e67 100644 --- a/packages/css/package.json +++ b/packages/ui-web/package.json @@ -1,5 +1,5 @@ { - "name": "@defgov/css", + "name": "@defgov/ui-web", "version": "0.0.0", "private": true, "type": "module", @@ -24,7 +24,7 @@ "scripts": { "gen-index": "ts-node scripts/gen-index.ts", "gen-dts": "tsc -p tsconfig.build.json", - "dev": "pnpm gen-index && vite build --watch", + "dev": "pnpm gen-index && vite", "build": "pnpm gen-index && vite build && pnpm gen-dts" }, "devDependencies": { diff --git a/packages/ui-web/playground/App.tsx b/packages/ui-web/playground/App.tsx new file mode 100644 index 0000000..03ffc26 --- /dev/null +++ b/packages/ui-web/playground/App.tsx @@ -0,0 +1,7 @@ +import { useState } from "react"; + +function App() { + return
; +} + +export default App; diff --git a/packages/ui-web/playground/index.html b/packages/ui-web/playground/index.html new file mode 100644 index 0000000..a3ed15d --- /dev/null +++ b/packages/ui-web/playground/index.html @@ -0,0 +1,13 @@ + + + + + + + vite-project + + +
+ + + diff --git a/packages/ui-web/playground/main.tsx b/packages/ui-web/playground/main.tsx new file mode 100644 index 0000000..4aff025 --- /dev/null +++ b/packages/ui-web/playground/main.tsx @@ -0,0 +1,9 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import App from './App.tsx' + +createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/packages/css/scripts/gen-index.ts b/packages/ui-web/scripts/gen-index.ts similarity index 100% rename from packages/css/scripts/gen-index.ts rename to packages/ui-web/scripts/gen-index.ts diff --git a/packages/ui-web-headless/componnets/button/ButtonIcon.tsx b/packages/ui-web/src/componnets/button/ButtonIcon.tsx similarity index 100% rename from packages/ui-web-headless/componnets/button/ButtonIcon.tsx rename to packages/ui-web/src/componnets/button/ButtonIcon.tsx diff --git a/packages/ui-web-headless/componnets/button/ButtonLoading.tsx b/packages/ui-web/src/componnets/button/ButtonLoading.tsx similarity index 100% rename from packages/ui-web-headless/componnets/button/ButtonLoading.tsx rename to packages/ui-web/src/componnets/button/ButtonLoading.tsx diff --git a/packages/ui-web-headless/componnets/button/ButtonRoot.tsx b/packages/ui-web/src/componnets/button/ButtonRoot.tsx similarity index 55% rename from packages/ui-web-headless/componnets/button/ButtonRoot.tsx rename to packages/ui-web/src/componnets/button/ButtonRoot.tsx index 909741e..dbd628d 100644 --- a/packages/ui-web-headless/componnets/button/ButtonRoot.tsx +++ b/packages/ui-web/src/componnets/button/ButtonRoot.tsx @@ -1,13 +1,14 @@ -import { ComponentPropsWithoutRef, forwardRef } from "react"; +import { type ComponentPropsWithoutRef, forwardRef } from "react"; import { useButtonSlot } from "./useButtonSlots"; +import { useStateProps } from "../../utils/useStateProps"; export type ButtonRootOwnProps = { iconOnly?: boolean; hideIcon?: boolean; + loading?: boolean; }; export type ButtonRootStateProps = { - loading?: boolean; disabled?: boolean; }; @@ -22,17 +23,22 @@ export type ButtonRootProps = ButtonRootOwnProps & export const ButtonRoot = forwardRef( (props, ref) => { - const { children, loading, iconOnly, hideIcon, ...rest } = props; - const { iconNode, loadingNode } = useButtonSlot(children); + const { + children, + loading, + iconOnly, + hideIcon, + disabled = false, + ...rest + } = props; + const stateProps = useStateProps({ disabled: disabled }); + const filteredChildren = useButtonSlot(children, props); return ( - ); }, ); ButtonRoot.displayName = "ButtonRoot"; -// 我需要一个通用hook方法 useProps(props)，返一个对象 { ownProps，stateProps,primitiveProps} diff --git a/packages/ui-web-headless/componnets/button/index.ts b/packages/ui-web/src/componnets/button/index.ts similarity index 100% rename from packages/ui-web-headless/componnets/button/index.ts rename to packages/ui-web/src/componnets/button/index.ts diff --git a/packages/ui-web/src/componnets/button/useButtonSlots.ts b/packages/ui-web/src/componnets/button/useButtonSlots.ts new file mode 100644 index 0000000..184205b --- /dev/null +++ b/packages/ui-web/src/componnets/button/useButtonSlots.ts @@ -0,0 +1,52 @@ +import { + type ReactNode, + Children, + isValidElement, + cloneElement, + type ReactElement, +} from "react"; + +import { ButtonIcon } from "./ButtonIcon"; +import { ButtonLoading } from "./ButtonLoading"; + +export function useButtonSlot( + children: ReactNode, + props: { hideIcon?: boolean; loading?: boolean }, +) { + const filterNodes = (nodes: ReactNode): ReactNode => { + const filtered: ReactNode[] = []; + + Children.forEach(nodes, (child) => { + if (!isValidElement(child)) { + filtered.push(child); + return; + } + + // loading：只保留 Loading + if (props.loading) { + if (child.type === ButtonLoading) { + filtered.push(child); + } + return; + } + + // 隐藏图标：移除 ButtonIcon + if (props.hideIcon && child.type === ButtonIcon) { + return; + } + + // 普通节点 + const element = child as ReactElement<{ children?: ReactNode }>; + + filtered.push( + cloneElement(element, { + children: filterNodes(element.props.children), + }), + ); + }); + + return filtered; + }; + + return filterNodes(children); +} diff --git a/packages/css/src/base/root.css b/packages/ui-web/src/styles/base/root.css similarity index 100% rename from packages/css/src/base/root.css rename to packages/ui-web/src/styles/base/root.css diff --git a/packages/css/src/recipe/itemSizeRecipe.ts b/packages/ui-web/src/styles/recipe/itemSizeRecipe.ts similarity index 100% rename from packages/css/src/recipe/itemSizeRecipe.ts rename to packages/ui-web/src/styles/recipe/itemSizeRecipe.ts diff --git a/packages/css/src/utility/size-insensitive/align-content.css b/packages/ui-web/src/styles/utility/size-insensitive/align-content.css similarity index 100% rename from packages/css/src/utility/size-insensitive/align-content.css rename to packages/ui-web/src/styles/utility/size-insensitive/align-content.css diff --git a/packages/css/src/utility/size-insensitive/align-items.css b/packages/ui-web/src/styles/utility/size-insensitive/align-items.css similarity index 100% rename from packages/css/src/utility/size-insensitive/align-items.css rename to packages/ui-web/src/styles/utility/size-insensitive/align-items.css diff --git a/packages/css/src/utility/size-insensitive/align-self.css b/packages/ui-web/src/styles/utility/size-insensitive/align-self.css similarity index 100% rename from packages/css/src/utility/size-insensitive/align-self.css rename to packages/ui-web/src/styles/utility/size-insensitive/align-self.css diff --git a/packages/css/src/utility/size-insensitive/animation.css b/packages/ui-web/src/styles/utility/size-insensitive/animation.css similarity index 100% rename from packages/css/src/utility/size-insensitive/animation.css rename to packages/ui-web/src/styles/utility/size-insensitive/animation.css diff --git a/packages/css/src/utility/size-insensitive/box-decoration.css b/packages/ui-web/src/styles/utility/size-insensitive/box-decoration.css similarity index 100% rename from packages/css/src/utility/size-insensitive/box-decoration.css rename to packages/ui-web/src/styles/utility/size-insensitive/box-decoration.css diff --git a/packages/css/src/utility/size-insensitive/box-inside.css b/packages/ui-web/src/styles/utility/size-insensitive/box-inside.css similarity index 100% rename from packages/css/src/utility/size-insensitive/box-inside.css rename to packages/ui-web/src/styles/utility/size-insensitive/box-inside.css diff --git a/packages/css/src/utility/size-insensitive/box-sizing.css b/packages/ui-web/src/styles/utility/size-insensitive/box-sizing.css similarity index 100% rename from packages/css/src/utility/size-insensitive/box-sizing.css rename to packages/ui-web/src/styles/utility/size-insensitive/box-sizing.css diff --git a/packages/css/src/utility/size-insensitive/brand.css b/packages/ui-web/src/styles/utility/size-insensitive/brand.css similarity index 100% rename from packages/css/src/utility/size-insensitive/brand.css rename to packages/ui-web/src/styles/utility/size-insensitive/brand.css diff --git a/packages/css/src/utility/size-insensitive/break-after.css b/packages/ui-web/src/styles/utility/size-insensitive/break-after.css similarity index 100% rename from packages/css/src/utility/size-insensitive/break-after.css rename to packages/ui-web/src/styles/utility/size-insensitive/break-after.css diff --git a/packages/css/src/utility/size-insensitive/break-before.css b/packages/ui-web/src/styles/utility/size-insensitive/break-before.css similarity index 100% rename from packages/css/src/utility/size-insensitive/break-before.css rename to packages/ui-web/src/styles/utility/size-insensitive/break-before.css diff --git a/packages/css/src/utility/size-insensitive/cursor.css b/packages/ui-web/src/styles/utility/size-insensitive/cursor.css similarity index 100% rename from packages/css/src/utility/size-insensitive/cursor.css rename to packages/ui-web/src/styles/utility/size-insensitive/cursor.css diff --git a/packages/css/src/utility/size-insensitive/display.css b/packages/ui-web/src/styles/utility/size-insensitive/display.css similarity index 100% rename from packages/css/src/utility/size-insensitive/display.css rename to packages/ui-web/src/styles/utility/size-insensitive/display.css diff --git a/packages/css/src/utility/size-insensitive/drop-shadow.css b/packages/ui-web/src/styles/utility/size-insensitive/drop-shadow.css similarity index 100% rename from packages/css/src/utility/size-insensitive/drop-shadow.css rename to packages/ui-web/src/styles/utility/size-insensitive/drop-shadow.css diff --git a/packages/css/src/utility/size-insensitive/flex-direction.css b/packages/ui-web/src/styles/utility/size-insensitive/flex-direction.css similarity index 100% rename from packages/css/src/utility/size-insensitive/flex-direction.css rename to packages/ui-web/src/styles/utility/size-insensitive/flex-direction.css diff --git a/packages/css/src/utility/size-insensitive/flex-wrap.css b/packages/ui-web/src/styles/utility/size-insensitive/flex-wrap.css similarity index 100% rename from packages/css/src/utility/size-insensitive/flex-wrap.css rename to packages/ui-web/src/styles/utility/size-insensitive/flex-wrap.css diff --git a/packages/css/src/utility/size-insensitive/font-family.css b/packages/ui-web/src/styles/utility/size-insensitive/font-family.css similarity index 100% rename from packages/css/src/utility/size-insensitive/font-family.css rename to packages/ui-web/src/styles/utility/size-insensitive/font-family.css diff --git a/packages/css/src/utility/size-insensitive/justify-content.css b/packages/ui-web/src/styles/utility/size-insensitive/justify-content.css similarity index 100% rename from packages/css/src/utility/size-insensitive/justify-content.css rename to packages/ui-web/src/styles/utility/size-insensitive/justify-content.css diff --git a/packages/css/src/utility/size-insensitive/justify-items.css b/packages/ui-web/src/styles/utility/size-insensitive/justify-items.css similarity index 100% rename from packages/css/src/utility/size-insensitive/justify-items.css rename to packages/ui-web/src/styles/utility/size-insensitive/justify-items.css diff --git a/packages/css/src/utility/size-insensitive/justify-self.css b/packages/ui-web/src/styles/utility/size-insensitive/justify-self.css similarity index 100% rename from packages/css/src/utility/size-insensitive/justify-self.css rename to packages/ui-web/src/styles/utility/size-insensitive/justify-self.css diff --git a/packages/css/src/utility/size-insensitive/overflow.css b/packages/ui-web/src/styles/utility/size-insensitive/overflow.css similarity index 100% rename from packages/css/src/utility/size-insensitive/overflow.css rename to packages/ui-web/src/styles/utility/size-insensitive/overflow.css diff --git a/packages/css/src/utility/size-insensitive/overscroll-behavior.css b/packages/ui-web/src/styles/utility/size-insensitive/overscroll-behavior.css similarity index 100% rename from packages/css/src/utility/size-insensitive/overscroll-behavior.css rename to packages/ui-web/src/styles/utility/size-insensitive/overscroll-behavior.css diff --git a/packages/css/src/utility/size-insensitive/position.css b/packages/ui-web/src/styles/utility/size-insensitive/position.css similarity index 100% rename from packages/css/src/utility/size-insensitive/position.css rename to packages/ui-web/src/styles/utility/size-insensitive/position.css diff --git a/packages/css/src/utility/size-insensitive/screen-reader.css b/packages/ui-web/src/styles/utility/size-insensitive/screen-reader.css similarity index 100% rename from packages/css/src/utility/size-insensitive/screen-reader.css rename to packages/ui-web/src/styles/utility/size-insensitive/screen-reader.css diff --git a/packages/css/src/utility/size-insensitive/theme.css b/packages/ui-web/src/styles/utility/size-insensitive/theme.css similarity index 100% rename from packages/css/src/utility/size-insensitive/theme.css rename to packages/ui-web/src/styles/utility/size-insensitive/theme.css diff --git a/packages/css/src/utility/size-insensitive/user-select.css b/packages/ui-web/src/styles/utility/size-insensitive/user-select.css similarity index 100% rename from packages/css/src/utility/size-insensitive/user-select.css rename to packages/ui-web/src/styles/utility/size-insensitive/user-select.css diff --git a/packages/css/src/utility/size-insensitive/z-index.css b/packages/ui-web/src/styles/utility/size-insensitive/z-index.css similarity index 100% rename from packages/css/src/utility/size-insensitive/z-index.css rename to packages/ui-web/src/styles/utility/size-insensitive/z-index.css diff --git a/packages/css/src/utility/size-sensitive/border-radius.css b/packages/ui-web/src/styles/utility/size-sensitive/border-radius.css similarity index 100% rename from packages/css/src/utility/size-sensitive/border-radius.css rename to packages/ui-web/src/styles/utility/size-sensitive/border-radius.css diff --git a/packages/css/src/utility/size-sensitive/font-size.css b/packages/ui-web/src/styles/utility/size-sensitive/font-size.css similarity index 100% rename from packages/css/src/utility/size-sensitive/font-size.css rename to packages/ui-web/src/styles/utility/size-sensitive/font-size.css diff --git a/packages/css/src/utility/size-sensitive/font-weight.css b/packages/ui-web/src/styles/utility/size-sensitive/font-weight.css similarity index 100% rename from packages/css/src/utility/size-sensitive/font-weight.css rename to packages/ui-web/src/styles/utility/size-sensitive/font-weight.css diff --git a/packages/css/src/utility/size-sensitive/gap.css b/packages/ui-web/src/styles/utility/size-sensitive/gap.css similarity index 100% rename from packages/css/src/utility/size-sensitive/gap.css rename to packages/ui-web/src/styles/utility/size-sensitive/gap.css diff --git a/packages/css/src/utility/size-sensitive/height.css b/packages/ui-web/src/styles/utility/size-sensitive/height.css similarity index 100% rename from packages/css/src/utility/size-sensitive/height.css rename to packages/ui-web/src/styles/utility/size-sensitive/height.css diff --git a/packages/css/src/utility/size-sensitive/margin-block.css b/packages/ui-web/src/styles/utility/size-sensitive/margin-block.css similarity index 100% rename from packages/css/src/utility/size-sensitive/margin-block.css rename to packages/ui-web/src/styles/utility/size-sensitive/margin-block.css diff --git a/packages/css/src/utility/size-sensitive/margin-inline.css b/packages/ui-web/src/styles/utility/size-sensitive/margin-inline.css similarity index 100% rename from packages/css/src/utility/size-sensitive/margin-inline.css rename to packages/ui-web/src/styles/utility/size-sensitive/margin-inline.css diff --git a/packages/css/src/utility/size-sensitive/padding-long.css b/packages/ui-web/src/styles/utility/size-sensitive/padding-long.css similarity index 100% rename from packages/css/src/utility/size-sensitive/padding-long.css rename to packages/ui-web/src/styles/utility/size-sensitive/padding-long.css diff --git a/packages/css/src/utility/size-sensitive/padding-short.css b/packages/ui-web/src/styles/utility/size-sensitive/padding-short.css similarity index 100% rename from packages/css/src/utility/size-sensitive/padding-short.css rename to packages/ui-web/src/styles/utility/size-sensitive/padding-short.css diff --git a/packages/css/src/utility/size-sensitive/width.css b/packages/ui-web/src/styles/utility/size-sensitive/width.css similarity index 100% rename from packages/css/src/utility/size-sensitive/width.css rename to packages/ui-web/src/styles/utility/size-sensitive/width.css diff --git a/packages/css/src/utils/cpm.ts b/packages/ui-web/src/styles/utils/cpm.ts similarity index 100% rename from packages/css/src/utils/cpm.ts rename to packages/ui-web/src/styles/utils/cpm.ts diff --git a/packages/css/src/utils/cvr.ts b/packages/ui-web/src/styles/utils/cvr.ts similarity index 100% rename from packages/css/src/utils/cvr.ts rename to packages/ui-web/src/styles/utils/cvr.ts diff --git a/packages/css/src/utils/prefix-list.ts b/packages/ui-web/src/styles/utils/prefix-list.ts similarity index 100% rename from packages/css/src/utils/prefix-list.ts rename to packages/ui-web/src/styles/utils/prefix-list.ts diff --git a/packages/css/src/types/env.d.ts b/packages/ui-web/src/types/env.d.ts similarity index 100% rename from packages/css/src/types/env.d.ts rename to packages/ui-web/src/types/env.d.ts diff --git a/packages/ui-web-headless/utils/mergeProps.ts b/packages/ui-web/src/utils/mergeProps.ts similarity index 95% rename from packages/ui-web-headless/utils/mergeProps.ts rename to packages/ui-web/src/utils/mergeProps.ts index 4387c2f..748f1fa 100644 --- a/packages/ui-web-headless/utils/mergeProps.ts +++ b/packages/ui-web/src/utils/mergeProps.ts @@ -1,4 +1,4 @@ -function innerClassMergeFn(...classes: string[]): string { +function defaultClassMergeFn(...classes: string[]): string { return classes .map((str) => str.trim()) .filter(Boolean) @@ -23,7 +23,7 @@ export function mergeProps( ...rest: Record[] ) { let options: { classMergeFn: Function } = { - classMergeFn: innerClassMergeFn, + classMergeFn: defaultClassMergeFn, }; let propsN: Record[]; diff --git a/packages/ui-web/src/utils/useStateProps.ts b/packages/ui-web/src/utils/useStateProps.ts new file mode 100644 index 0000000..c9e1485 --- /dev/null +++ b/packages/ui-web/src/utils/useStateProps.ts @@ -0,0 +1,12 @@ +export function useStateProps(props: Record) { + const state: Record = {}; + + Object.entries(props).forEach(([key, value]) => { + const stateKey = `data-${key}:`; + const stateValue = `"${value}"`; + + state[stateKey] = stateValue; + }); + + return state; +} diff --git a/packages/css/tsconfig.build.json b/packages/ui-web/tsconfig.build.json similarity index 100% rename from packages/css/tsconfig.build.json rename to packages/ui-web/tsconfig.build.json diff --git a/packages/css/tsconfig.json b/packages/ui-web/tsconfig.json similarity index 100% rename from packages/css/tsconfig.json rename to packages/ui-web/tsconfig.json diff --git a/packages/ui-web/vite.config.ts b/packages/ui-web/vite.config.ts new file mode 100644 index 0000000..4418ded --- /dev/null +++ b/packages/ui-web/vite.config.ts @@ -0,0 +1,41 @@ +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; +import path from "path"; + +export default defineConfig(({ command }) => { + if (command === "serve") { + return { + plugins: [react()], + root: "playground", + }; + } + + return { + plugins: [react()], + + build: { + cssMinify: false, + + lib: { + entry: path.resolve(import.meta.dirname, "src/index.ts"), + formats: ["es", "cjs"], + fileName: (format) => `index.${format}.js`, + }, + + rolldownOptions: { + external: ["react", "react-dom", "react/jsx-runtime"], + output: { + globals: { + react: "React", + "react-dom": "ReactDOM", + }, + }, + }, + + emptyOutDir: true, + sourcemap: true, + cssCodeSplit: false, + outDir: "dist", + }, + }; +});