folinhilo/defgov
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mm

Browse Source
This commit is contained in:
folinhilo
2026-06-08 04:19:23 +08:00
parent 8351498071
commit f2d8ad0de2
152 changed files with 2362 additions and 2227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
Dockerfile
View File

@@ -1,15 +0,0 @@
FROM node:24-alpine
WORKDIR /app
# 1. 启用 pnpm
RUN corepack enable && corepack prepare pnpm@latest --activate
# 2. 复制 workspace 配置
COPY pnpm-workspace.yaml pnpm-lock.yaml package.json ./
# 3. 安装所有依赖
RUN pnpm install --frozen-lockfile
# 4. 复制源码
COPY . .

122
apps/vite-project/src/App.tsx
View File

@@ -1,122 +0,0 @@
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import heroImg from './assets/hero.png'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
<>
<section id="center">
<div className="hero">
<img src={heroImg} className="base" width="170" height="179" alt="" />
<img src={reactLogo} className="framework" alt="React logo" />
<img src={viteLogo} className="vite" alt="Vite logo" />
</div>
<div>
<h1>Get started</h1>
<p>
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
</p>
</div>
<button
type="button"
className="counter"
onClick={() => setCount((count) => count + 1)}
>
Count is {count}
</button>
</section>
<div className="ticks"></div>
<section id="next-steps">
<div id="docs">
<svg className="icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#documentation-icon"></use>
</svg>
<h2>Documentation</h2>
<p>Your questions, answered</p>
<ul>
<li>
<a href="https://vite.dev/" target="_blank">
<img className="logo" src={viteLogo} alt="" />
Explore Vite
</a>
</li>
<li>
<a href="https://react.dev/" target="_blank">
<img className="button-icon" src={reactLogo} alt="" />
Learn more
</a>
</li>
</ul>
</div>
<div id="social">
<svg className="icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#social-icon"></use>
</svg>
<h2>Connect with us</h2>
<p>Join the Vite community</p>
<ul>
<li>
<a href="https://github.com/vitejs/vite" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#github-icon"></use>
</svg>
GitHub
</a>
</li>
<li>
<a href="https://chat.vite.dev/" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#discord-icon"></use>
</svg>
Discord
</a>
</li>
<li>
<a href="https://x.com/vite_js" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#x-icon"></use>
</svg>
X.com
</a>
</li>
<li>
<a href="https://bsky.app/profile/vite.dev" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#bluesky-icon"></use>
</svg>
Bluesky
</a>
</li>
</ul>
</div>
</section>
<div className="ticks"></div>
<section id="spacer"></section>
</>
)
}
export default App

9
apps/vite-project/src/common/CommonProps.ts
View File

@@ -1,9 +0,0 @@
import { type CSSProperties, type ReactNode } from "react";
export type CommonProps = {
className?: string;
style?: CSSProperties;
children?: ReactNode;
disabled?: boolean;
key?: string;
};

16
apps/vite-project/src/common/InnerWrapper.tsx
View File

@@ -1,16 +0,0 @@
import { type ReactNode } from "react";
export const InnerWrapper = ({ children }: { children: ReactNode }) => {
return (
<div
style={{
gap: "10px",
display: "flex",
flexWrap: "nowrap",
alignItems: "center",
}}
>
{children}
</div>
);
};

251
apps/vite-project/src/gallery/ButtonGallery.tsx
View File

@@ -1,251 +0,0 @@
import { Button, DownloadSvg } from "@defgov/ui-web-tw";
import { InnerWrapper } from "../common/InnerWrapper";
import { OuterWrapper } from "../common/OuterWrapper";
export const ButtonGallery = () => {
return (
<OuterWrapper>
<InnerWrapper>
<Button size="xs">xsmall</Button>
<Button size="xs" iconSvg={<DownloadSvg />}>
xsmall
</Button>
<Button size="xs" iconSvg={<DownloadSvg />} iconOnly={true}>
xsmall
</Button>
<Button size="sm">small</Button>
<Button size="sm" iconSvg={<DownloadSvg />}>
small
</Button>
<Button size="sm" iconSvg={<DownloadSvg />} iconOnly={true}>
small
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="md">medium</Button>
<Button size="md" iconSvg={<DownloadSvg />}>
medium
</Button>
<Button size="md" iconSvg={<DownloadSvg />} iconOnly={true}>
medium
</Button>
<Button size="lg">large</Button>
<Button size="lg" iconSvg={<DownloadSvg />}>
large
</Button>
<Button size="lg" iconSvg={<DownloadSvg />} iconOnly={true}>
large
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="xs" variant="outline">
xsmall
</Button>
<Button size="xs" variant="outline" iconSvg={<DownloadSvg />}>
xsmall
</Button>
<Button
size="xs"
variant="outline"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
xsmall
</Button>
<Button size="sm" variant="outline">
small
</Button>
<Button size="sm" variant="outline" iconSvg={<DownloadSvg />}>
small
</Button>
<Button
size="sm"
variant="outline"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
small
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="md" variant="outline">
medium
</Button>
<Button size="md" variant="outline" iconSvg={<DownloadSvg />}>
medium
</Button>
<Button
size="md"
variant="outline"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
medium
</Button>
<Button size="lg" variant="outline">
large
</Button>
<Button size="lg" variant="outline" iconSvg={<DownloadSvg />}>
large
</Button>
<Button
size="lg"
variant="outline"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
large
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="xs" variant="subtle">
xsmall
</Button>
<Button size="xs" variant="subtle" iconSvg={<DownloadSvg />}>
xsmall
</Button>
<Button
size="xs"
variant="subtle"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
xsmall
</Button>
<Button size="sm" variant="subtle">
small
</Button>
<Button size="sm" variant="subtle" iconSvg={<DownloadSvg />}>
small
</Button>
<Button
size="sm"
variant="subtle"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
small
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="md" variant="subtle">
medium
</Button>
<Button size="md" variant="subtle" iconSvg={<DownloadSvg />}>
medium
</Button>
<Button
size="md"
variant="subtle"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
medium
</Button>
<Button size="lg" variant="subtle">
large
</Button>
<Button size="lg" variant="subtle" iconSvg={<DownloadSvg />}>
large
</Button>
<Button
size="lg"
variant="subtle"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
large
</Button>
</InnerWrapper>
{/* ------------------------------------- */}
<InnerWrapper>
<Button size="xs" variant="ghost">
xsmall
</Button>
<Button size="xs" variant="ghost" iconSvg={<DownloadSvg />}>
xsmall
</Button>
<Button
size="xs"
variant="ghost"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
xsmall
</Button>
<Button size="sm" variant="ghost">
small
</Button>
<Button size="sm" variant="ghost" iconSvg={<DownloadSvg />}>
small
</Button>
<Button
size="sm"
variant="ghost"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
small
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="md" variant="ghost">
medium
</Button>
<Button size="md" variant="ghost" iconSvg={<DownloadSvg />}>
medium
</Button>
<Button
size="md"
variant="ghost"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
medium
</Button>
<Button size="lg" variant="ghost">
large
</Button>
<Button size="lg" variant="ghost" iconSvg={<DownloadSvg />}>
large
</Button>
<Button
size="lg"
variant="ghost"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
large
</Button>
</InnerWrapper>
<InnerWrapper>
<Button variant="filled" brand="info">
button
</Button>
<Button variant="outline" brand="info">
button
</Button>
<Button variant="subtle" brand="info">
button
</Button>
<Button variant="ghost" brand="info">
button
</Button>
</InnerWrapper>
<InnerWrapper>
<Button variant="filled" disabled>
button
</Button>
<Button variant="outline" disabled>
button
</Button>
<Button variant="subtle" disabled>
button
</Button>
<Button variant="ghost" disabled>
button
</Button>
</InnerWrapper>
</OuterWrapper>
);
};

9
apps/vite-project/src/main.tsx
View File

@@ -1,9 +0,0 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)

4
apps/vite-project/src/types/css.d.ts vendored
View File

@@ -1,4 +0,0 @@
declare module '*.css' {
const content: { [className: string]: string };
export default content;
}

51
apps/vite-project/src/types/env.d.ts vendored
View File

@@ -1,51 +0,0 @@
/// <reference types="vite/client" />
declare module "*.svg" {
import * as React from "react";
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
declare module "*.png" {
const src: string;
export default src;
}
declare module "*.jpg" {
const src: string;
export default src;
}
declare module "*.jpeg" {
const src: string;
export default src;
}
declare module "*.gif" {
const src: string;
export default src;
}
declare module "*.webp" {
const src: string;
export default src;
}
interface ImportMetaEnv {
readonly MODE: "development" | "production" | "test";
readonly BASE_URL: string;
readonly PROD: boolean;
readonly DEV: boolean;
readonly SSR: boolean;
// ===== 业务环境变量 =====
readonly VITE_API_BASE: string;
readonly VITE_UPLOAD_URL?: string;
readonly VITE_ENABLE_MOCK?: "true" | "false";
readonly VITE_SENTRY_DSN?: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}

11
apps/vite-project/vite.config.ts
View File

@@ -1,11 +0,0 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
build: {
rolldownOptions: { },
},
});

10
docker-compose.yml
View File

@@ -1,10 +0,0 @@
services:
dev:
image: node:24-alpine
working_dir: /app
volumes:
- .:/app
- /app/node_modules
ports:
- "3000:3000"
command: sh

6
package.json
View File

@@ -3,8 +3,8 @@
"private": true,
"type": "module",
"scripts": {
"build": "turbo run build",
"dev": "turbo run dev"
"dev": "turbo run dev",
"build": "turbo run build"
},
"devDependencies": {
"turbo": "^2.8.0"
@@ -12,5 +12,5 @@
"engines": {
"node": ">=20"
},
"packageManager": "pnpm@11.0.9+sha512.34ce82e6780233cf9cad8685029a8f81d2e06196c5a9bad98879f7424940c6817c4e4524fb7d38b8553ceed48b9758b8ebaf1abd3600c232c4c8cf7366086f38"
"packageManager": "pnpm@11.5.2+sha512.71c631e382066efc25625d5cf029075de07b61b37f6e27350fbd84b1bda5864c8c1967adc280776b45c30a715c0359a3be08fef42d5bb09e2b99029979692916"
}

19
packages/bookmark-sync/manifest.json
View File

@@ -1,19 +0,0 @@
{
"name": "@defgov/bookmark-sync",
"version": "1.0",
"manifest_version": 3,
"permissions": ["bookmarks", "storage"],
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"host_permissions": ["<all_urls>"],
"background": {
"service_worker": "controller.js"
},
"browser_specific_settings": {
"gecko": {
"id": "bookmark-sync@example.com",
"strict_min_version": "109.0"
}
}
}

15
packages/bookmark-sync/package.json
View File

@@ -1,15 +0,0 @@
{
"name": "defgov-bookmark-sync",
"version": "0.0.0",
"private": true,
"dependencies": {
"typescript": "^6.0.3"
},
"devDependencies": {
"@types/chrome": "^0.1.40",
"@types/firefox-webext-browser": "^143.0.0",
"@types/node": "^25.6.0",
"@types/webextension-polyfill": "^0.12.5",
"webextension-polyfill": "^0.12.0"
}
}

79
packages/bookmark-sync/src/controller.ts
View File

@@ -1,79 +0,0 @@
import browser from "webextension-polyfill";
export class Controller {
/**
* 书签栏 (Bookmarks Bar) 固定ID为 "1"
*
* 其他书签 (Other Bookmarks) 固定ID为 "2"
*
* 移动设备书签 (Mobile Bookmarks) 固定ID为 "3"
*/
rootFolder: string;
constructor(rootFolder: string = "1") {
this.rootFolder = rootFolder;
}
init() {}
setRootFolder(rootFolder: string) {
this.rootFolder = rootFolder;
}
async createBookmark(parentId: string, title: string, url?: string) {
try {
await browser.bookmarks.create({
parentId: parentId,
title: title,
url: url,
type: "bookmark",
});
} catch (error) {
console.error("❌ 创建书签失败:", error);
}
}
async createFolder(parentId: string, title: string, url?: string) {
try {
await browser.bookmarks.create({
parentId: parentId,
title: title,
url: url,
type: "folder",
});
} catch (error) {
console.error(error);
}
}
async createSeparator(parentId: string) {
try {
await browser.bookmarks.create({
parentId: parentId,
type: "separator",
});
} catch (error) {
console.error(error);
}
}
async deleteNode(id: string) {
const results = await browser.bookmarks.get(id);
if (results[0].type === "bookmark" || results[0].type === "separator") {
deleteBookmarkOrSeparator(id);
} else if (results[0].type === "folder") {
deleteFolder(id);
}
}
async moveNode(id: string, destinationId: string, index: number) {
try {
await browser.bookmarks.move(id, {
parentId: destinationId,
index: index,
});
} catch (error) {
console.error(error);
}
}
}

47
packages/bookmark-sync/src/custom-bookmark-bar/newtab.html
View File

@@ -1,47 +0,0 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>我的自定义书签</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
background: #f5f5f5;
}
#bookmark-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 20px;
}
.bookmark-item {
display: block;
width: 120px;
padding: 15px;
background: white;
border-radius: 8px;
text-decoration: none;
color: #333;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
}
.bookmark-item:hover {
background: #e0e0e0;
}
</style>
</head>
<body>
<h2>我的书签管理器</h2>
<!-- 文件夹切换下拉框 -->
<select id="folder-selector">
<option value="1">书签栏 (ID: 1)</option>
<!-- 其他文件夹可以通过代码动态加载到这里 -->
</select>
<!-- 书签渲染容器 -->
<div id="bookmark-container"></div>
<script src="popup.js"></script>
</body>
</html>

76
packages/bookmark-sync/src/custom-bookmark-bar/popup.ts
View File

@@ -1,76 +0,0 @@
// 递归提取某个节点下的所有书签 URL（防止文件夹嵌套）
function extractUrls(
bookmarkNode: chrome.bookmarks.BookmarkTreeNode[],
): string[] {
let urls: string[] = [];
for (const node of bookmarkNode) {
if (node.url) {
urls.push(node.url);
} else if (node.children) {
urls = urls.concat(extractUrls(node.children));
}
}
return urls;
}
// 渲染指定 ID 文件夹下的书签
async function renderBookmarksByFolderId(folderId: string) {
try {
const results = await chrome.bookmarks.getSubTree(folderId);
const folderNode = results[0];
if (!folderNode || !folderNode.children) return;
const container = document.getElementById("bookmark-container");
if (container) container.innerHTML = "";
// 遍历直接子节点
folderNode.children.forEach((bookmark) => {
if (bookmark.url) {
const link = document.createElement("a");
link.className = "bookmark-item";
link.href = bookmark.url;
link.textContent = bookmark.title || bookmark.url;
// 自动获取网站 favicon 图标
const faviconUrl = `https://www.google.com/s2/favicons?domain=${new URL(bookmark.url).hostname}&sz=32`;
link.innerHTML = `<img src="${faviconUrl}" style="vertical-align: middle; margin-right: 5px;">${bookmark.title}`;
container?.appendChild(link);
}
});
} catch (error) {
console.error("获取书签失败:", error);
}
}
// 初始化：自动获取所有一级文件夹并填充到下拉框
async function initFolderSelector() {
const results = await chrome.bookmarks.getTree();
const bookmarkBar = results[0].children?.[0]; // ID为1的书签栏
const selector = document.getElementById(
"folder-selector",
) as HTMLSelectElement;
if (bookmarkBar && bookmarkBar.children) {
bookmarkBar.children.forEach((folder) => {
// 只把文件夹加到下拉框里
if (!folder.url && folder.id !== "1") {
const option = document.createElement("option");
option.value = folder.id || "";
option.textContent = folder.title || "未命名文件夹";
selector.appendChild(option);
}
});
}
// 绑定切换事件
selector.addEventListener("change", (e) => {
const targetId = (e.target as HTMLSelectElement).value;
renderBookmarksByFolderId(targetId);
});
// 默认渲染书签栏
renderBookmarksByFolderId("1");
}
// 页面加载完成后启动
document.addEventListener("DOMContentLoaded", initFolderSelector);

5
packages/bookmark-sync/src/types.ts
View File

@@ -1,5 +0,0 @@
import browser from "webextension-polyfill";
export type Account = { id: string; email: string; password: string };
export type BookmarkTreeNode = browser.Bookmarks.BookmarkTreeNode;

20
packages/bookmark-sync/src/utils.ts
View File

@@ -1,20 +0,0 @@
async function getLastIndex(parentId: string) {
const children = await browser.bookmarks.getChildren(parentId);
return children.length > 0 ? children[children.length - 1].index : 0;
}
async function deleteBookmarkOrSeparator(id: string) {
try {
await browser.bookmarks.remove(id);
} catch (error) {
console.error(error);
}
}
async function deleteFolder(id: string) {
try {
await browser.bookmarks.removeTree(id);
} catch (error) {
console.error(error);
}
}

118
packages/bookmark-sync/tsconfig.json
View File

@@ -1,118 +0,0 @@
{
// tsconfig.lib.json
// 直接复制本文件内容到子项目的 tsconfig.json 即可，不要用 entends 继承本文件
"extends": "../../tsconfig.base.json",
"compilerOptions": {
/**
* Browser api，需要加 "DOM"，"DOM.Iterable"
* Node api，需要加 "ES2025"，始终使用带版本号的最新版本
* NextJs api，属于同构，server 端会预处理 DOM，计算url，三个都需要 "ES2025", "DOM", "DOM.Iterable"
*/
"lib": ["ES2025", "DOM", "DOM.Iterable"],
/**
* React JSX 编译模式
* - 使用 React 17+ 新 JSX Transform
* - 不需要手动 import React
*/
"jsx": "react-jsx",
/**
* 编译输出目录
* - tsc / tsc -b 都会用到
*/
"outDir": "./dist",
/**
* 源码根目录
* - 确保 dist 结构与 src 一致
* - 对 declaration 路径至关重要
*/
"rootDir": "./src",
/**
* 生成 .d.ts 类型声明文件
* - 组件库 / npm 包发布必需
* - 对应用项目无害，仅影响类型输出
*/
"declaration": true,
/**
* 只做类型检查，不生成 JS 输出
* - 适用于 Vite / Next / Nuxt 等 bundler 场景
* - 防止 tsc 与构建工具重复 emit
*/
"noEmit": true,
/**
* 强制单文件可独立编译
* - 适配 esbuild / SWC / bundler 编译模型
* - 禁止依赖跨文件类型推断（enum / namespace 等）
*/
"isolatedModules": true,
/**
* 允许在 import 中显式使用 .ts / .tsx 后缀
* - 兼容 Node ESM / bundler 对文件扩展名的严格要求
* - 避免 `import './foo'` 在 TS + ESM 下歧义
*/
"allowImportingTsExtensions": true
},
/**
* 参与类型检查和编译的文件
* - 只扫描 src
* - 其它目录通过 exclude 排除
*/
"include": ["src", "scripts"],
/**
* 明确排除非源码内容
* - 避免污染类型系统
* - 防止误入 dist / test / config
* - 保证发布包干净
*/
"exclude": [
"scripts",
"node_modules",
"dist",
// ---------- build / cache ----------
".turbo/**/*",
".cache/**/*",
".vite/**/*",
// ---------- 配置文件 ----------
"vite.config.ts",
"*.config.ts",
"*.config.js",
"tsconfig.*.json",
// ---------- 测试相关 ----------
"__tests__/**/*",
"test/**/*",
"tests/**/*",
"**/*.test.ts",
"**/*.test.tsx",
"**/*.spec.ts",
"**/*.spec.tsx",
// ---------- Storybook ----------
".storybook/**/*",
"stories/**/*",
// ---------- 示例 / 脚本 ----------
"example/**/*",
"examples/**/*",
"scripts/**/*",
// ---------- 环境与静态资源 ----------
".env",
".env.*",
"public/**/*",
// ---------- 文档 ----------
"docs/**/*",
"README.md",
"LICENSE"
]
}

44
packages/css/package.json Normal file
View File

@@ -0,0 +1,44 @@
{
"name": "@dg/css",
"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",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.1",
"tinyglobby": "^0.2.16",
"ts-node": "^10.9.2",
"typescript": "^6.0.3",
"vite": "^8.0.10"
},
"peerDependencies": {
"react": "^19",
"react-dom": "^19"
}
}

254
packages/css/scripts/gen-index.ts Normal file
View File

@@ -0,0 +1,254 @@
import * as fs from "fs";
import * as path from "path";
/**
* 默认测试 / story / example / fixture / type 文件匹配规则
* 仅用于“识别”，不直接决定是否排除
*/
const DEFAULT_TEST_FILE_PATTERNS: RegExp[] = [
// =========================
// Test / Spec
// =========================
/\.(test|spec)\.(ts|tsx|js|jsx)$/,
/\.(test|spec)\.(ts|tsx|js|jsx)\?.*$/, // query param safe
// =========================
// E2E / Playwright / Cypress
// =========================
/\.(cy|playwright|e2e)\.(ts|tsx|js|jsx)$/,
// =========================
// Storybook
// =========================
/\.(story|stories)\.(ts|tsx|js|jsx|mdx)$/,
// =========================
// Snapshot / Mock / Fixture
// =========================
/\.snap$/,
/\.mock\.(ts|tsx|js|jsx)$/,
/\.fixture\.(ts|tsx|js|jsx)$/,
// =========================
// Type declarations
// =========================
/\.d\.ts$/,
// =========================
// Examples / Demos / Docs
// =========================
/\.(example|demo|docs)\.(ts|tsx|js|jsx)$/,
];
/**
* 测试 / 辅助目录（目录级排除）
*/
const DEFAULT_TEST_DIR_PATTERNS: RegExp[] = [
/[/\\](__tests__|tests|test|spec|__mocks__|__fixtures__|__snapshots__)[\/\\]/,
/[/\\](cypress|playwright|e2e|__e2e__|__playwright__)[\/\\]/,
/[/\\](story|stories|\.storybook)[\/\\]/,
/[/\\](types|type|typings|interfaces)[\/\\]/,
/[/\\](examples|example|demo|demos|docs)[\/\\]/,
];
type Config = {
outputDir: string;
outputFile: string;
scanDirs: string[];
preamble?: string[];
importPrefix?: string;
entryFilePatterns?: RegExp[];
barrelFirstMode?: boolean;
includeFilePatterns?: RegExp[];
excludeFilePatterns?: RegExp[];
excludeDirPatterns?: RegExp[];
};
const tsConfig: Config = {
outputDir: "src",
outputFile: "index.ts",
scanDirs: ["src"],
importPrefix: "export * from",
barrelFirstMode: true,
preamble: ["import './index.css';"],
entryFilePatterns: [/^index\.(js|ts|jsx|tsx)$/],
includeFilePatterns: [/\.(js|ts|jsx|tsx)$/],
excludeFilePatterns: DEFAULT_TEST_FILE_PATTERNS,
excludeDirPatterns: DEFAULT_TEST_DIR_PATTERNS,
};
const cssConfig: Config = {
outputDir: "src",
outputFile: "index.css",
scanDirs: ["src"],
importPrefix: "@import",
barrelFirstMode: false,
entryFilePatterns: [/^index\.(css)$/],
includeFilePatterns: [/\.(css)$/],
excludeFilePatterns: DEFAULT_TEST_FILE_PATTERNS,
excludeDirPatterns: DEFAULT_TEST_DIR_PATTERNS,
};
function isEntryFile(fileName: string, config: Config): boolean {
const regExps = config.entryFilePatterns;
if (!regExps || regExps.length === 0) return false;
return regExps.some((regExp) => regExp.test(fileName));
}
function isIncludeFile(fileName: string, config: Config): boolean {
const regExps = config.includeFilePatterns;
if (!regExps || regExps.length === 0) return false;
return regExps.some((regExp) => regExp.test(fileName));
}
function isExcludeFile(fileName: string, config: Config): boolean {
const regExps = config.excludeFilePatterns;
if (!regExps || regExps.length === 0) return false;
return regExps.some((regExp) => regExp.test(fileName));
}
function isExcludeDir(filePath: string, config: Config): boolean {
const regExps = config.excludeDirPatterns;
if (!regExps || regExps.length === 0) return false;
return regExps.some((regExp) => regExp.test(filePath));
}
function isValidDir(filePath: string, config: Config): boolean {
if (isExcludeDir(filePath, config)) {
return false;
}
return true;
}
function isValidFile(fileName: string, config: Config): boolean {
if (isIncludeFile(fileName, config) && !isExcludeFile(fileName, config)) {
return true;
}
return false;
}
const buildExportStatement = (filePath: string, config: Config) => {
// 文件夹（不是文件）与目标文件的相对路径
let exportFilePath = path.relative(config.outputDir, filePath);
// 去除扩展名，并且转化成正斜杠
const exportFilePathWithoutExt = path
.join(
path.dirname(exportFilePath),
path.basename(exportFilePath, path.extname(exportFilePath)),
)
.replace(/\\/g, "/");
// 加上 ./ 前缀
return `${config.importPrefix} './${exportFilePathWithoutExt}';`;
};
function isOutputEntry(filePath: string, config: Config) {
const outputFilePath = path.resolve(config.outputDir, config.outputFile);
const targetFilePath = path.resolve(filePath);
return outputFilePath === targetFilePath;
}
function generateExports(dirPath: string, config: Config): string[] {
const fileNames = fs.readdirSync(dirPath);
const exports: string[] = [];
// =========================
// 逻辑分支：Barrel First Mode
// =========================
if (config.barrelFirstMode) {
// 查找当前目录有没有 index.ts
const entryFileName = fileNames.find((fileName) => {
const filePath = path.join(dirPath, fileName);
return fs.statSync(filePath).isFile() && isEntryFile(fileName, config);
});
// 如果有
if (entryFileName) {
const entryFilePath = path.join(dirPath, entryFileName);
// 如果是 outputFile 自身，则跳过
if (isOutputEntry(entryFilePath, config)) {
console.log(`⏭️ 跳过自身入口文件: ${entryFilePath}`);
} else {
exports.push(buildExportStatement(entryFilePath, config));
}
}
}
// =========================
// 逻辑分支：index.ts 不存在，则继续正常遍历与递归
// =========================
fileNames.forEach((fileName) => {
const filePath = path.join(dirPath, fileName);
const stat = fs.statSync(filePath);
// 情况1：是文件，且通过了校验
if (
stat.isFile() &&
isValidFile(fileName, config) &&
!isEntryFile(fileName, config)
) {
exports.push(buildExportStatement(filePath, config));
}
// 情况2：是文件夹，且通过了校验，递归扫描子文件夹
else if (stat.isDirectory() && isValidDir(filePath, config)) {
const subExports = generateExports(filePath, config);
exports.push(...subExports);
}
});
return exports;
}
function genIndexFile(config: Config) {
// 确保输出目录存在，如果不存在就递归创建
if (!fs.existsSync(config.outputDir)) {
fs.mkdirSync(config.outputDir, { recursive: true });
}
const allExports: string[] = [];
// 遍历所有需要扫描的根目录
config.scanDirs.forEach((scanDir) => {
// 只有当目录真实存在时才进行扫描
if (fs.existsSync(scanDir)) {
const exports = generateExports(scanDir, config);
allExports.push(...exports);
} else {
console.warn(`⚠️ 警告：扫描目录不存在，已跳过 -> ${scanDir}`);
}
});
// 拼接最终的文件内容：前言 + 导出语句（使用 Set 自动去重）
const fileContent = [
...(config.preamble ?? []),
...Array.from(new Set(allExports)),
].join("\n");
// 将内容写入到最终的 index.ts 文件中
const outputFilePath = path.join(config.outputDir, config.outputFile);
fs.writeFileSync(outputFilePath, fileContent, "utf-8");
console.log(`✨ 成功生成入口文件: ${outputFilePath}`);
}
// ================= 脚本执行入口 =================
try {
console.log("🚀 开始扫描并生成入口文件...");
genIndexFile(tsConfig);
genIndexFile(cssConfig);
console.log("✅ 脚本执行完毕！");
} catch (error) {
console.error("❌ 脚本执行失败:", error);
process.exit(1); // 如果报错，让进程以非 0 状态码退出
}

36
packages/css/src/index.css Normal file
View File

@@ -0,0 +1,36 @@
@import './styles/base/root';
@import './styles/utility/size-insensitive/align-content';
@import './styles/utility/size-insensitive/align-items';
@import './styles/utility/size-insensitive/align-self';
@import './styles/utility/size-insensitive/animation';
@import './styles/utility/size-insensitive/box-decoration';
@import './styles/utility/size-insensitive/box-inside';
@import './styles/utility/size-insensitive/box-sizing';
@import './styles/utility/size-insensitive/brand';
@import './styles/utility/size-insensitive/break-after';
@import './styles/utility/size-insensitive/break-before';
@import './styles/utility/size-insensitive/cursor';
@import './styles/utility/size-insensitive/display';
@import './styles/utility/size-insensitive/drop-shadow';
@import './styles/utility/size-insensitive/flex-direction';
@import './styles/utility/size-insensitive/flex-wrap';
@import './styles/utility/size-insensitive/font-family';
@import './styles/utility/size-insensitive/justify-content';
@import './styles/utility/size-insensitive/justify-items';
@import './styles/utility/size-insensitive/justify-self';
@import './styles/utility/size-insensitive/overflow';
@import './styles/utility/size-insensitive/overscroll-behavior';
@import './styles/utility/size-insensitive/position';
@import './styles/utility/size-insensitive/screen-reader';
@import './styles/utility/size-insensitive/theme';
@import './styles/utility/size-insensitive/user-select';
@import './styles/utility/size-insensitive/variant';
@import './styles/utility/size-insensitive/z-index';
@import './styles/utility/size-sensitive/border-radius';
@import './styles/utility/size-sensitive/font-size';
@import './styles/utility/size-sensitive/font-weight';
@import './styles/utility/size-sensitive/gap';
@import './styles/utility/size-sensitive/height';
@import './styles/utility/size-sensitive/margin';
@import './styles/utility/size-sensitive/padding';
@import './styles/utility/size-sensitive/width';

7
packages/css/src/index.ts Normal file
View File

@@ -0,0 +1,7 @@
import './index.css';
export * from './recipes/brandRecipe';
export * from './recipes/inlineSizeRecipe';
export * from './recipes/itemSizeRecipe';
export * from './recipes/variantRecipe';
export * from './styles/utils/cpm';
export * from './styles/utils/cvr';

13
packages/css/src/recipes/brandRecipe.ts Normal file
View File

@@ -0,0 +1,13 @@
import { cvr } from "../styles/utils/cvr";
export const brandRecipe = cvr({
variants: {
brand: {
success: "brand--success",
danger: "brand--danger",
info: "brand--info",
warning: "brand--warning",
emphasize: "brand--emphasize",
},
},
});

15
packages/css/src/recipes/inlineSizeRecipe.ts Normal file
View File

@@ -0,0 +1,15 @@
import { cvr } from "../styles/utils/cvr";
export const inlineSizeRecipe = cvr({
base: "display--flex flex--nowrap justify--center items--center",
variants: {
size: {
xs: "text--xs h--inline-xs gap--xs",
sm: "text--sm h--inline-sm gap--sm",
md: "text--md h--inline-md gap--md",
lg: "text--lg h--inline-lg gap--lg",
xl: "text--xl h--inline-xl gap--xl",
"2xl": "text--2xl h--inline-2xl gap--2xl",
},
},
});

46
packages/css/src/recipes/itemSizeRecipe.ts Normal file
View File

@@ -0,0 +1,46 @@
import { cvr } from "../styles/utils/cvr";
export const itemSizeRecipe = cvr({
base: "select--none display--flex flex--nowrap justify--center items--center",
variants: {
size: {
xs: "text--xs h--item-xs gap--xs px--xs",
sm: "text--sm h--item-sm gap-sm px--sm",
md: "text--md h--item-md gap-md px--md",
lg: "text--lg h--item-lg gap-lg px--lg",
xl: "text--xl h--item-xl gap-xl px--xl",
"2xl": "text--2xl h--item-2xl gap--2xl px--2xl",
},
shape: {
square: "rounded--none",
rounded: "",
circle: "rounded--full",
},
iconOnly: {
true: "px--none",
false: "",
},
},
compoundVariants: [
{ iconOnly: false, size: "xs", class: "px--xs" },
{ iconOnly: false, size: "sm", class: "px--sm" },
{ iconOnly: false, size: "md", class: "px--md" },
{ iconOnly: false, size: "lg", class: "px--lg" },
{ iconOnly: false, size: "xl", class: "px--xl" },
{ iconOnly: false, size: "2xl", class: "px--2xl" },
// ==================================================
{ shape: "rounded", size: "xs", class: "rounded--sm" },
{ shape: "rounded", size: "sm", class: "rounded--md" },
{ shape: "rounded", size: "md", class: "rounded--lg" },
{ shape: "rounded", size: "lg", class: "rounded--xl" },
{ shape: "rounded", size: "xl", class: "rounded--2xl" },
{ shape: "rounded", size: "2xl", class: "rounded--3xl" },
// ==================================================
{ iconOnly: true, size: "xs", class: "w--item-xs" },
{ iconOnly: true, size: "sm", class: "w--item-sm" },
{ iconOnly: true, size: "md", class: "w--item-md" },
{ iconOnly: true, size: "lg", class: "w--item-lg" },
{ iconOnly: true, size: "xl", class: "w--item-xl" },
{ iconOnly: true, size: "2xl", class: "w--item-2xl" },
],
});

58
packages/css/src/recipes/variantRecipe.ts Normal file
View File

@@ -0,0 +1,58 @@
import { cvr } from "../styles/utils/cvr";
export const variantRecipe = cvr({
variants: {
variant: {
filled: "",
outline: "",
subtle: "",
ghost: "",
},
disabled: {
true: "",
false: "",
},
},
compoundVariants: [
{
disabled: false,
variant: "filled",
class: "variant--filled",
},
{
disabled: false,
variant: "outline",
class: "variant--outline",
},
{
disabled: false,
variant: "subtle",
class: "variant--subtle",
},
{
disabled: false,
variant: "ghost",
class: "variant--ghost",
},
{
disabled: true,
variant: "filled",
class: "variant--filled-disabled",
},
{
disabled: true,
variant: "outline",
class: "variant--outline-disabled",
},
{
disabled: true,
variant: "subtle",
class: "variant--subtle-disabled",
},
{
disabled: true,
variant: "ghost",
class: "variant--ghost-disabled",
},
],
});

14
packages/ui-web/src/styles/base/root.css → packages/css/src/styles/base/root.css
View File

@@ -1,3 +1,5 @@
@layer utility;
:root {
--color-red-50: oklch(97.1% 0.013 17.38);
--color-red-100: oklch(93.6% 0.032 17.717);
@@ -317,12 +319,12 @@
--warning-bg-low-hover: var(--color-yellow-200);
--warning-bg-low-active: var(--color-yellow-300);
--default-bg: var(--color-neutral-600);
--default-bg-hover: var(--color-neutral-500);
--default-bg-active: var(--color-neutral-400);
--default-bg-low: var(--color-neutral-100);
--default-bg-low-hover: var(--color-neutral-200);
--default-bg-low-active: var(--color-neutral-300);
--emphasize-bg: var(--color-neutral-600);
--emphasize-bg-hover: var(--color-neutral-500);
--emphasize-bg-active: var(--color-neutral-400);
--emphasize-bg-low: var(--color-neutral-100);
--emphasize-bg-low-hover: var(--color-neutral-200);
--emphasize-bg-low-active: var(--color-neutral-300);
--disabled-fg: var(--color-gray-400);
--disabled-bg: var(--color-gray-100);

0
packages/ui-web/src/styles/utility/size-insensitive/align-content.css → packages/css/src/styles/utility/size-insensitive/align-content.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/align-items.css → packages/css/src/styles/utility/size-insensitive/align-items.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/align-self.css → packages/css/src/styles/utility/size-insensitive/align-self.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/animation.css → packages/css/src/styles/utility/size-insensitive/animation.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/box-decoration.css → packages/css/src/styles/utility/size-insensitive/box-decoration.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/box-inside.css → packages/css/src/styles/utility/size-insensitive/box-inside.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/box-sizing.css → packages/css/src/styles/utility/size-insensitive/box-sizing.css
View File

18
packages/ui-web/src/styles/utility/size-insensitive/brand.css → packages/css/src/styles/utility/size-insensitive/brand.css
View File

@@ -7,6 +7,7 @@
--brand-bg-low-hover: var(--info-bg-low-hover);
--brand-bg-low-active: var(--info-bg-low-active);
}
.brand--danger {
--brand-bg: var(--danger-bg);
--brand-bg-hover: var(--danger-bg-hover);
@@ -15,6 +16,7 @@
--brand-bg-low-hover: var(--danger-bg-low-hover);
--brand-bg-low-active: var(--danger-bg-low-active);
}
.brand--success {
--brand-bg: var(--success-bg);
--brand-bg-hover: var(--success-bg-hover);
@@ -23,6 +25,7 @@
--brand-bg-low-hover: var(--success-bg-low-hover);
--brand-bg-low-active: var(--success-bg-low-active);
}
.brand--warning {
--brand-bg: var(--warning-bg);
--brand-bg-hover: var(--warning-bg-hover);
@@ -31,12 +34,13 @@
--brand-bg-low-hover: var(--warning-bg-low-hover);
--brand-bg-low-active: var(--warning-bg-low-active);
}
.brand--default {
--brand-bg: var(--default-bg);
--brand-bg-hover: var(--default-bg-hover);
--brand-bg-active: var(--default-bg-active);
--brand-bg-low: var(--default-bg-low);
--brand-bg-low-hover: var(--default-bg-low-hover);
--brand-bg-low-active: var(--default-bg-low-active);
.brand--emphasize {
--brand-bg: var(--emphasize-bg);
--brand-bg-hover: var(--emphasize-bg-hover);
--brand-bg-active: var(--emphasize-bg-active);
--brand-bg-low: var(--emphasize-bg-low);
--brand-bg-low-hover: var(--emphasize-bg-low-hover);
--brand-bg-low-active: var(--emphasize-bg-low-active);
}
}

0
packages/ui-web/src/styles/utility/size-insensitive/break-after.css → packages/css/src/styles/utility/size-insensitive/break-after.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/break-before.css → packages/css/src/styles/utility/size-insensitive/break-before.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/cursor.css → packages/css/src/styles/utility/size-insensitive/cursor.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/display.css → packages/css/src/styles/utility/size-insensitive/display.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/drop-shadow.css → packages/css/src/styles/utility/size-insensitive/drop-shadow.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/flex-direction.css → packages/css/src/styles/utility/size-insensitive/flex-direction.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/flex-wrap.css → packages/css/src/styles/utility/size-insensitive/flex-wrap.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/font-family.css → packages/css/src/styles/utility/size-insensitive/font-family.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/justify-content.css → packages/css/src/styles/utility/size-insensitive/justify-content.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/justify-items.css → packages/css/src/styles/utility/size-insensitive/justify-items.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/justify-self.css → packages/css/src/styles/utility/size-insensitive/justify-self.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/overflow.css → packages/css/src/styles/utility/size-insensitive/overflow.css
View File

14
packages/ui-web/src/styles/utility/size-insensitive/overscroll-behavior.css → packages/css/src/styles/utility/size-insensitive/overscroll-behavior.css
View File

@@ -11,27 +11,27 @@
overscroll-behavior: none;
}
.overscroll--x--auto {
.overscroll--x-auto {
overscroll-behavior-x: auto;
}
.overscroll--x--contain {
.overscroll--x-contain {
overscroll-behavior-x: contain;
}
.overscroll--x--none {
.overscroll--x-none {
overscroll-behavior-x: none;
}
.overscroll--y--auto {
.overscroll--y-auto {
overscroll-behavior-y: auto;
}
.overscroll--y--contain {
.overscroll--y-contain {
overscroll-behavior-y: contain;
}
.overscroll--y--none {
.overscroll--y-none {
overscroll-behavior-y: none;
}
}
}

19
packages/css/src/styles/utility/size-insensitive/position.css Normal file
View File

@@ -0,0 +1,19 @@
.position--static {
position: static;
}
.position--fixed {
position: fixed;
}
.position--absolute {
position: absolute;
}
.position--relative {
position: relative;
}
.position--sticky {
position: sticky;
}

0
packages/ui-web/src/styles/utility/size-insensitive/screen-reader.css → packages/css/src/styles/utility/size-insensitive/screen-reader.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/theme.css → packages/css/src/styles/utility/size-insensitive/theme.css
View File

0
packages/ui-web/src/styles/utility/size-insensitive/user-select.css → packages/css/src/styles/utility/size-insensitive/user-select.css
View File

206
packages/css/src/styles/utility/size-insensitive/variant.css Normal file
View File

@@ -0,0 +1,206 @@
@layer utility {
.variant--filled {
--filled-fg: var(--color-white);
--filled-fg-hover: var(--color-white);
--filled-fg-active: var(--color-white);
--filled-bg: var(--brand-bg);
--filled-bg-hover: var(--brand-bg-hover);
--filled-bg-active: var(--brand-bg-active);
--filled-border-color: var(--color-transparent);
color: var(--filled-fg);
background-color: var(--filled-bg);
border-color: var(--filled-border-color);
&:hover {
background-color: var(--filled-bg-hover);
color: var(--filled-fg-hover);
}
&:active {
background-color: var(--filled-bg-active);
color: var(--filled-fg-active);
}
&:focus-visible {
background-color: var(--filled-bg-hover);
color: var(--filled-fg-hover);
}
}
.variant--outline {
--outline-fg: var(--brand-bg);
--outline-fg-hover: var(--brand-bg);
--outline-fg-active: var(--brand-bg);
--outline-bg: var(--color-transparent);
--outline-bg-hover: var(--brand-bg-low);
--outline-bg-active: var(--brand-bg-low-hover);
--outline-border-color: var(--brand-bg);
color: var(--outline-fg);
background-color: var(--outline-bg);
border: solid 1px;
border-color: var(--outline-border-color);
&:hover {
background-color: var(--outline-bg-hover);
color: var(--outline-fg-hover);
}
&:active {
background-color: var(--outline-bg-active);
color: var(--outline-fg-active);
}
&:focus-visible {
background-color: var(--outline-bg-hover);
color: var(--outline-fg-hover);
}
}
.variant--subtle {
--subtle-fg: var(--brand-bg);
--subtle-fg-hover: var(--brand-bg);
--subtle-fg-active: var(--brand-bg);
--subtle-bg: var(--brand-bg-low);
--subtle-bg-hover: var(--brand-bg-low-hover);
--subtle-bg-active: var(--brand-bg-low-active);
--subtle-border-color: var(--color-transparent);
color: var(--subtle-fg);
background-color: var(--subtle-bg);
border-color: var(--subtle-border-color);
&:hover {
background-color: var(--subtle-bg-hover);
color: var(--subtle-fg-hover);
}
&:active {
background-color: var(--subtle-bg-active);
color: var(--subtle-fg-active);
}
&:focus-visible {
background-color: var(--subtle-bg-hover);
color: var(--subtle-fg-hover);
}
}
.variant--ghost {
--ghost-fg: var(--brand-bg);
--ghost-fg-hover: var(--brand-bg);
--ghost-fg-active: var(--brand-bg);
--ghost-bg: var(--color-transparent);
--ghost-bg-hover: var(--brand-bg-low);
--ghost-bg-active: var(--brand-bg-low-hover);
--ghost-border-color: var(--color-transparent);
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
&:hover {
background-color: var(--ghost-bg-hover);
color: var(--ghost-fg-hover);
}
&:active {
background-color: var(--ghost-bg-active);
color: var(--ghost-fg-active);
}
&:focus-visible {
background-color: var(--ghost-bg-hover);
color: var(--ghost-fg-hover);
}
}
.variant--filled-disabled {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border-color: var(--disabled-border-color);
filter: grayscale(100%);
&:hover {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border-color: var(--disabled-border-color);
filter: grayscale(100%);
}
&:active {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border-color: var(--disabled-border-color);
filter: grayscale(100%);
}
&:focus-visible {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border-color: var(--disabled-border-color);
filter: grayscale(100%);
}
}
.variant--outline-disabled {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border: solid 1px;
border-color: var(--disabled-border-color);
filter: grayscale(100%);
&:hover {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border: solid 1px;
border-color: var(--disabled-border-color);
filter: grayscale(100%);
}
&:active {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border: solid 1px;
border-color: var(--disabled-border-color);
filter: grayscale(100%);
}
&:focus-visible {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border: solid 1px;
border-color: var(--disabled-border-color);
filter: grayscale(100%);
}
}
.variant--ghost-disabled {
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
&:hover {
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
}
&:active {
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
}
&:focus-visible {
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
}
}
}

22
packages/ui-web/src/styles/utility/size-insensitive/z-index.css → packages/css/src/styles/utility/size-insensitive/z-index.css
View File

@@ -1,8 +1,10 @@
@layer utility {
/* 自动 & 零 */
.z--auto {
z-index: auto;
}
.z--0 {
z-index: 0;
}
@@ -11,33 +13,41 @@
.z--10 {
z-index: 10;
}
.z--20 {
z-index: 20;
}
.z--30 {
z-index: 30;
}
.z--40 {
z-index: 40;
}
.z--50 {
z-index: 50;
}
/* 负值（negative） */
.z--n--10 {
.z--n-10 {
z-index: -10;
}
.z--n--20 {
.z--n-20 {
z-index: -20;
}
.z--n--30 {
.z--n-30 {
z-index: -30;
}
.z--n--40 {
.z--n-40 {
z-index: -40;
}
.z--n--50 {
.z--n-50 {
z-index: -50;
}
}
}

0
packages/ui-web/src/styles/utility/size-sensitive/border-radius.css → packages/css/src/styles/utility/size-sensitive/border-radius.css
View File

0
packages/ui-web/src/styles/utility/size-sensitive/font-size.css → packages/css/src/styles/utility/size-sensitive/font-size.css
View File

0
packages/ui-web/src/styles/utility/size-sensitive/font-weight.css → packages/css/src/styles/utility/size-sensitive/font-weight.css
View File

0
packages/ui-web/src/styles/utility/size-sensitive/gap.css → packages/css/src/styles/utility/size-sensitive/gap.css
View File

37
packages/ui-web/src/styles/utility/size-sensitive/height.css → packages/css/src/styles/utility/size-sensitive/height.css
View File

@@ -1,47 +1,58 @@
@layer utility {
.h--item--xs {
.h--item-xs {
/* 24px minimum touch size for text line */
height: var(--height-item-xs);
}
.h--item--sm {
.h--item-sm {
/* 28px save space for most used size */
height: var(--height-item-sm);
}
.h--item--md {
.h--item-md {
/* 34px most used size */
height: var(--height-item-md);
}
.h--item--lg {
.h--item-lg {
/* 44px maximum touch size without waste */
height: var(--height-item-lg);
}
.h--item--xl {
.h--item-xl {
/* 56px section-header bar */
height: var(--height-item-xl);
}
.h--item--2xl {
.h--item-2xl {
/* 64px navigation bar */
height: var(--height-item-2xl);
}
/* -------------- */
.h--inline--xs {
.h--inline-xs {
/* 16px */
height: calc(var(--font-size-xs) * var(--line-height-xs));
}
.h--inline--sm {
.h--inline-sm {
/* 20px */
height: calc(var(--font-size-sm) * var(--line-height-sm));
}
.h--inline--md {
.h--inline-md {
height: calc(var(--font-size-md) * var(--line-height-md));
}
.h--inline--lg {
.h--inline-lg {
height: calc(var(--font-size-lg) * var(--line-height-lg));
}
.h--inline--xl {
.h--inline-xl {
height: calc(var(--font-size-xl) * var(--line-height-xl));
}
.h--inline--2xl {
.h--inline-2xl {
height: calc(var(--font-size-2xl) * var(--line-height-2xl));
}
}
}

59
packages/css/src/styles/utility/size-sensitive/margin.css Normal file
View File

@@ -0,0 +1,59 @@
@layer utility {
.my--none {
margin-block: 0;
}
.my--xs {
margin-block: var(--margin-xs);
}
.my--sm {
margin-block: var(--margin-sm);
}
.my--md {
margin-block: var(--margin-md);
}
.my--lg {
margin-block: var(--margin-lg);
}
.my--xl {
margin-block: var(--margin-xl);
}
.my--2xl {
margin-block: var(--margin-2xl);
}
/* ======================== */
.mx--none {
margin-inline: 0;
}
.mx--xs {
margin-inline: var(--margin-xs);
}
.mx--sm {
margin-inline: var(--margin-sm);
}
.mx--md {
margin-inline: var(--margin-md);
}
.mx--lg {
margin-inline: var(--margin-lg);
}
.mx--xl {
margin-inline: var(--margin-xl);
}
.mx--2xl {
margin-inline: var(--margin-2xl);
}
}

44
packages/ui-web/src/styles/utility/size-sensitive/padding-short.css → packages/css/src/styles/utility/size-sensitive/padding.css
View File

@@ -2,48 +2,90 @@
.px--none {
padding-inline: 0px;
}
.px--xs {
/* 4px, 24px - 16px = 8px */
padding-inline: var(--padding-xs);
}
.px--sm {
/* 4px, 28px - 20px = 8px */
padding-inline: var(--padding-sm);
}
.px--md {
/* 10px */
padding-inline: var(--padding-md);
}
.px--lg {
/* 16px */
padding-inline: var(--padding-lg);
}
.px--xl {
padding-inline: var(--padding-xl);
}
.px--2xl {
padding-inline: var(--padding-2xl);
}
/* ------------------------ */
.py--none {
padding-block: 0px;
}
.py--xs {
padding-block: var(--padding-xs);
}
.py--sm {
padding-block: var(--padding-sm);
}
.py--md {
padding-block: var(--padding-md);
}
.py--lg {
padding-block: var(--padding-lg);
}
.py--xl {
padding-block: var(--padding-xl);
}
.py--2xl {
padding-block: var(--padding-2xl);
}
}
/* ========================== */
.px--long-xs {
/* 6px */
padding-inline: var(--padding-long-xs);
}
.px--long-sm {
/* 8px */
padding-inline: var(--padding-long-sm);
}
.px--long-md {
/* 10px */
padding-inline: var(--padding-long-md);
}
.px--long-lg {
/* 16px */
padding-inline: var(--padding-long-lg);
}
.px--long-xl {
padding-inline: var(--padding-long-xl);
}
.px--long-2xl {
padding-inline: var(--padding-long-2xl);
}
}

33
packages/ui-web/src/styles/utility/size-sensitive/width.css → packages/css/src/styles/utility/size-sensitive/width.css
View File

@@ -1,45 +1,56 @@
@layer utility {
.w--item--xs {
.w--item-xs {
/* 24px minimum touch size for text line */
width: var(--height-item-xs);
}
.w--item--sm {
.w--item-sm {
/* 30px save space for most used size */
width: var(--height-item-sm);
}
.w--item--md {
.w--item-md {
/* 34px most used size */
width: var(--height-item-lg);
}
.w--item-lg {
/* 44px maximum touch size without waste */
width: var(--height-item-lg);
}
.w--item--xl {
.w--item-xl {
/* 56px section-header bar */
width: var(--height-item-xl);
}
.w--item--2xl {
/* 64px navigation bar */
width: var(--height-item-xl);
}
/* ---------------------------------------------------- */
.w--inline--xs {
.w--inline-xs {
width: calc(var(--font-size-xs) * var(--line-height-xs));
}
.w--inline--sm {
.w--inline-sm {
width: calc(var(--font-size-sm) * var(--line-height-sm));
}
.w--inline--md {
.w--inline-md {
width: calc(var(--font-size-md) * var(--line-height-md));
}
.w--inline--lg {
.w--inline-lg {
width: calc(var(--font-size-lg) * var(--line-height-lg));
}
.w--inline--xl {
.w--inline-xl {
width: calc(var(--font-size-xl) * var(--line-height-xl));
}
.w--inline--xl {
.w--inline-xl {
width: calc(var(--font-size-2xl) * var(--line-height-2xl));
}
}
}

27
packages/css/src/styles/utils/cpm.ts Normal file
View File

@@ -0,0 +1,27 @@
export function cpm(...classes: (string[] | string)[]) {
const map = new Map<string, string>();
function dealClass(cls: string) {
// 提取前缀和后缀
const prifix = cls.split("--")[0];
// 使用set覆盖（自动新建），而不是push
map.set(prifix, cls);
}
classes.forEach((item) => {
// 如果是 string 直接处理
if (typeof item === "string") {
dealClass(item);
} else {
// 否则肯定是 string[]
item.forEach((i) => {
dealClass(i);
});
}
});
const resultString = Array.from(map.values()).join(" ");
return resultString;
}

0
packages/ui-web/src/styles/utils/cvr.ts → packages/css/src/styles/utils/cvr.ts
View File

0
packages/ui-web/src/types/env.d.ts → packages/css/src/types/env.d.ts vendored
View File

41
packages/css/tsconfig.build.json Normal file
View File

@@ -0,0 +1,41 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"noEmit": false,
"emitDeclarationOnly": true,
"declaration": true,
"rootDir": "./src",
"outDir": "./dist",
"declarationDir": "./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"
]
}

3
packages/ui-web/tsconfig.json → packages/css/tsconfig.json
View File

@@ -14,8 +14,7 @@
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
"jsx": "react-jsx"
},
"include": ["src", "scripts", "vite.config.ts"]
}

39
packages/css/vite.config.ts Normal file
View File

@@ -0,0 +1,39 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
export default defineConfig({
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: {
// 强制将生成的 CSS 命名为 index.css
assetFileNames: (assetInfo) => {
if (assetInfo.name && assetInfo.name.endsWith(".css")) {
return "index.css";
}
return "[name].[hash][extname]";
},
globals: {
react: "React",
"react-dom": "ReactDOM",
},
},
},
emptyOutDir: true,
sourcemap: true,
cssCodeSplit: false,
outDir: "dist",
},
});

6
packages/ui-web/package.json → packages/ui-react/package.json
View File

@@ -1,5 +1,5 @@
{
"name": "@defgov/ui-web",
"name": "@dg/ui-react",
"version": "0.0.0",
"private": true,
"type": "module",
@@ -24,9 +24,11 @@
"scripts": {
"gen-index": "ts-node scripts/gen-index.ts",
"gen-dts": "tsc -p tsconfig.build.json",
"dev": "pnpm gen-index && vite",
"build": "pnpm gen-index && vite build && pnpm gen-dts"
},
"dependencies": {
"@dg/css": "workspace:*"
},
"devDependencies": {
"@types/node": "^25.6.0",
"@vitejs/plugin-react": "^6.0.1",

254
packages/ui-react/scripts/gen-index.ts Normal file
View File

@@ -0,0 +1,254 @@
import * as fs from "fs";
import * as path from "path";
/**
* 默认测试 / story / example / fixture / type 文件匹配规则
* 仅用于“识别”，不直接决定是否排除
*/
const DEFAULT_TEST_FILE_PATTERNS: RegExp[] = [
// =========================
// Test / Spec
// =========================
/\.(test|spec)\.(ts|tsx|js|jsx)$/,
/\.(test|spec)\.(ts|tsx|js|jsx)\?.*$/, // query param safe
// =========================
// E2E / Playwright / Cypress
// =========================
/\.(cy|playwright|e2e)\.(ts|tsx|js|jsx)$/,
// =========================
// Storybook
// =========================
/\.(story|stories)\.(ts|tsx|js|jsx|mdx)$/,
// =========================
// Snapshot / Mock / Fixture
// =========================
/\.snap$/,
/\.mock\.(ts|tsx|js|jsx)$/,
/\.fixture\.(ts|tsx|js|jsx)$/,
// =========================
// Type declarations
// =========================
/\.d\.ts$/,
// =========================
// Examples / Demos / Docs
// =========================
/\.(example|demo|docs)\.(ts|tsx|js|jsx)$/,
];
/**
* 测试 / 辅助目录（目录级排除）
*/
const DEFAULT_TEST_DIR_PATTERNS: RegExp[] = [
/[/\\](__tests__|tests|test|spec|__mocks__|__fixtures__|__snapshots__)[\/\\]/,
/[/\\](cypress|playwright|e2e|__e2e__|__playwright__)[\/\\]/,
/[/\\](story|stories|\.storybook)[\/\\]/,
/[/\\](types|type|typings|interfaces)[\/\\]/,
/[/\\](examples|example|demo|demos|docs)[\/\\]/,
];
type Config = {
outputDir: string;
outputFile: string;
scanDirs: string[];
preamble?: string[];
importPrefix?: string;
entryFilePatterns?: RegExp[];
barrelFirstMode?: boolean;
includeFilePatterns?: RegExp[];
excludeFilePatterns?: RegExp[];
excludeDirPatterns?: RegExp[];
};
const tsConfig: Config = {
outputDir: "src",
outputFile: "index.ts",
scanDirs: ["src"],
importPrefix: "export * from",
barrelFirstMode: true,
preamble: ["import './index.css';"],
entryFilePatterns: [/^index\.(js|ts|jsx|tsx)$/],
includeFilePatterns: [/\.(js|ts|jsx|tsx)$/],
excludeFilePatterns: DEFAULT_TEST_FILE_PATTERNS,
excludeDirPatterns: DEFAULT_TEST_DIR_PATTERNS,
};
const cssConfig: Config = {
outputDir: "src",
outputFile: "index.css",
scanDirs: ["src"],
importPrefix: "@import",
barrelFirstMode: false,
entryFilePatterns: [/^index\.(css)$/],
includeFilePatterns: [/\.(css)$/],
excludeFilePatterns: DEFAULT_TEST_FILE_PATTERNS,
excludeDirPatterns: DEFAULT_TEST_DIR_PATTERNS,
};
function isEntryFile(fileName: string, config: Config): boolean {
const regExps = config.entryFilePatterns;
if (!regExps || regExps.length === 0) return false;
return regExps.some((regExp) => regExp.test(fileName));
}
function isIncludeFile(fileName: string, config: Config): boolean {
const regExps = config.includeFilePatterns;
if (!regExps || regExps.length === 0) return false;
return regExps.some((regExp) => regExp.test(fileName));
}
function isExcludeFile(fileName: string, config: Config): boolean {
const regExps = config.excludeFilePatterns;
if (!regExps || regExps.length === 0) return false;
return regExps.some((regExp) => regExp.test(fileName));
}
function isExcludeDir(filePath: string, config: Config): boolean {
const regExps = config.excludeDirPatterns;
if (!regExps || regExps.length === 0) return false;
return regExps.some((regExp) => regExp.test(filePath));
}
function isValidDir(filePath: string, config: Config): boolean {
if (isExcludeDir(filePath, config)) {
return false;
}
return true;
}
function isValidFile(fileName: string, config: Config): boolean {
if (isIncludeFile(fileName, config) && !isExcludeFile(fileName, config)) {
return true;
}
return false;
}
const buildExportStatement = (filePath: string, config: Config) => {
// 文件夹（不是文件）与目标文件的相对路径
let exportFilePath = path.relative(config.outputDir, filePath);
// 去除扩展名，并且转化成正斜杠
const exportFilePathWithoutExt = path
.join(
path.dirname(exportFilePath),
path.basename(exportFilePath, path.extname(exportFilePath)),
)
.replace(/\\/g, "/");
// 加上 ./ 前缀
return `${config.importPrefix} './${exportFilePathWithoutExt}';`;
};
function isOutputEntry(filePath: string, config: Config) {
const outputFilePath = path.resolve(config.outputDir, config.outputFile);
const targetFilePath = path.resolve(filePath);
return outputFilePath === targetFilePath;
}
function generateExports(dirPath: string, config: Config): string[] {
const fileNames = fs.readdirSync(dirPath);
const exports: string[] = [];
// =========================
// 逻辑分支：Barrel First Mode
// =========================
if (config.barrelFirstMode) {
// 查找当前目录有没有 index.ts
const entryFileName = fileNames.find((fileName) => {
const filePath = path.join(dirPath, fileName);
return fs.statSync(filePath).isFile() && isEntryFile(fileName, config);
});
// 如果有
if (entryFileName) {
const entryFilePath = path.join(dirPath, entryFileName);
// 如果是 outputFile 自身，则跳过
if (isOutputEntry(entryFilePath, config)) {
console.log(`⏭️ 跳过自身入口文件: ${entryFilePath}`);
} else {
exports.push(buildExportStatement(entryFilePath, config));
}
}
}
// =========================
// 逻辑分支：index.ts 不存在，则继续正常遍历与递归
// =========================
fileNames.forEach((fileName) => {
const filePath = path.join(dirPath, fileName);
const stat = fs.statSync(filePath);
// 情况1：是文件，且通过了校验
if (
stat.isFile() &&
isValidFile(fileName, config) &&
!isEntryFile(fileName, config)
) {
exports.push(buildExportStatement(filePath, config));
}
// 情况2：是文件夹，且通过了校验，递归扫描子文件夹
else if (stat.isDirectory() && isValidDir(filePath, config)) {
const subExports = generateExports(filePath, config);
exports.push(...subExports);
}
});
return exports;
}
function genIndexFile(config: Config) {
// 确保输出目录存在，如果不存在就递归创建
if (!fs.existsSync(config.outputDir)) {
fs.mkdirSync(config.outputDir, { recursive: true });
}
const allExports: string[] = [];
// 遍历所有需要扫描的根目录
config.scanDirs.forEach((scanDir) => {
// 只有当目录真实存在时才进行扫描
if (fs.existsSync(scanDir)) {
const exports = generateExports(scanDir, config);
allExports.push(...exports);
} else {
console.warn(`⚠️ 警告：扫描目录不存在，已跳过 -> ${scanDir}`);
}
});
// 拼接最终的文件内容：前言 + 导出语句（使用 Set 自动去重）
const fileContent = [
...(config.preamble ?? []),
...Array.from(new Set(allExports)),
].join("\n");
// 将内容写入到最终的 index.ts 文件中
const outputFilePath = path.join(config.outputDir, config.outputFile);
fs.writeFileSync(outputFilePath, fileContent, "utf-8");
console.log(`✨ 成功生成入口文件: ${outputFilePath}`);
}
// ================= 脚本执行入口 =================
try {
console.log("🚀 开始扫描并生成入口文件...");
genIndexFile(tsConfig);
genIndexFile(cssConfig);
console.log("✅ 脚本执行完毕！");
} catch (error) {
console.error("❌ 脚本执行失败:", error);
process.exit(1); // 如果报错，让进程以非 0 状态码退出
}

12
packages/ui-react/src/assets/svg/BoldSvg.tsx Normal file
View File

@@ -0,0 +1,12 @@
export const BoldSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
/>
</svg>
);

8
packages/ui-react/src/assets/svg/CheckIndicatorSvg.tsx Normal file
View File

@@ -0,0 +1,8 @@
export const CheckIndicatorSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="currentColor"
d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z"
/>
</svg>
);

12
packages/ui-react/src/assets/svg/ChevronRightSvg.tsx Normal file
View File

@@ -0,0 +1,12 @@
export const ChevronRightSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m9 6l6 6l-6 6"
/>
</svg>
);

8
packages/ui-react/src/assets/svg/CutSvg.tsx Normal file
View File

@@ -0,0 +1,8 @@
export const CutSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="currentColor"
d="M12.14 9.342L7.37 2.329a.75.75 0 1 0-1.24.844l5.13 7.545l-2.395 3.743a4 4 0 1 0 1.178.943l2.135-3.337l2.065 3.036a4 4 0 1 0 1.261-.813l-2.447-3.597l.002-.002zM4.5 18a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m10 0a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m-.562-8.684l3.943-6.162a.75.75 0 1 0-1.263-.808L13.02 7.968z"
/>
</svg>
);

8
packages/ui-react/src/assets/svg/DownloadSvg.tsx Normal file
View File

@@ -0,0 +1,8 @@
export const DownloadSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="currentColor"
d="M20 16a1 1 0 0 1 1 1v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2a1 1 0 0 1 2 0v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2a1 1 0 0 1 1-1M12 3a1 1 0 0 1 1 1v9.585l3.293-3.292a1 1 0 0 1 1.414 1.414l-5 5a1 1 0 0 1-.09.08l.09-.08a1 1 0 0 1-.674.292L12 17h-.032l-.054-.004L12 17a1 1 0 0 1-.617-.213a1 1 0 0 1-.09-.08l-5-5a1 1 0 0 1 1.414-1.414L11 13.585V4a1 1 0 0 1 1-1"
/>
</svg>
);

14
packages/ui-react/src/assets/svg/FileSvg.tsx Normal file
View File

@@ -0,0 +1,14 @@
export const FileSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2" />
</g>
</svg>
);

8
packages/ui-react/src/assets/svg/KeySvg.tsx Normal file
View File

@@ -0,0 +1,8 @@
export const KeySvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="currentColor"
d="M7 14q-.825 0-1.412-.587T5 12t.588-1.412T7 10t1.413.588T9 12t-.587 1.413T7 14m0 4q-2.5 0-4.25-1.75T1 12t1.75-4.25T7 6q1.675 0 3.038.825T12.2 9h8.375q.2 0 .388.075t.337.225l2 2q.15.15.212.325t.063.375t-.063.375t-.212.325l-3.175 3.175q-.125.125-.3.2t-.35.1t-.35-.025t-.325-.175L17.5 15l-1.425 1.075q-.125.1-.275.15t-.3.05t-.313-.05t-.287-.15L13.375 15H12.2q-.8 1.35-2.163 2.175T7 18m0-2q1.4 0 2.463-.85T10.875 13H14l1.45 1.025v.013v-.013L17.5 12.5l1.775 1.375L21.15 12h-.012h.012l-1-1v-.012V11h-9.275q-.35-1.3-1.412-2.15T7 8Q5.35 8 4.175 9.175T3 12t1.175 2.825T7 16"
/>
</svg>
);

14
packages/ui-react/src/assets/svg/MeshSvg.tsx Normal file
View File

@@ -0,0 +1,14 @@
export const MeshSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path d="M3 9h18M3 15h18M8 4c.485.445 3.5 3.312 3.5 8c0 .663-.07 4.848-3.5 8m7-16a17 17 0 0 1 2.004 8c0 1.51-.201 4.628-2.004 8" />
<path d="M18.778 20H5.222A2.22 2.22 0 0 1 3 17.778V6.222C3 4.995 3.995 4 5.222 4h13.556C20.005 4 21 4.995 21 6.222v11.556A2.22 2.22 0 0 1 18.778 20" />
</g>
</svg>
);

12
packages/ui-react/src/assets/svg/MoonSvg.tsx Normal file
View File

@@ -0,0 +1,12 @@
export const MoonSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"
/>
</svg>
);

8
packages/ui-react/src/assets/svg/PasteSvg.tsx Normal file
View File

@@ -0,0 +1,8 @@
export const PasteSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="currentColor"
d="M12.753 2c1.158 0 2.111.875 2.234 2h1.763a2.25 2.25 0 0 1 2.245 2.096L19 6.25a.75.75 0 0 1-.647.742L18.249 7a.75.75 0 0 1-.742-.647L17.5 6.25a.75.75 0 0 0-.648-.743L16.75 5.5h-2.132a2.24 2.24 0 0 1-1.865.993H9.247a2.24 2.24 0 0 1-1.865-.992L5.25 5.5a.75.75 0 0 0-.743.648L4.5 6.25v13.505c0 .38.282.693.648.743l.102.007h3a.75.75 0 0 1 .743.647l.007.102a.75.75 0 0 1-.75.75h-3a2.25 2.25 0 0 1-2.245-2.095L3 19.755V6.25a2.25 2.25 0 0 1 2.096-2.245L5.25 4h1.763a2.247 2.247 0 0 1 2.234-2zm5.997 6a2.25 2.25 0 0 1 2.245 2.096l.005.154v9.5a2.25 2.25 0 0 1-2.096 2.245L18.75 22h-6.5a2.25 2.25 0 0 1-2.245-2.096L10 19.75v-9.5a2.25 2.25 0 0 1 2.096-2.245L12.25 8zm0 1.5h-6.5a.75.75 0 0 0-.743.648l-.007.102v9.5c0 .38.282.694.648.743l.102.007h6.5a.75.75 0 0 0 .743-.648l.007-.102v-9.5a.75.75 0 0 0-.648-.743zm-5.997-6H9.247a.747.747 0 0 0 0 1.493h3.506a.747.747 0 1 0 0-1.493"
/>
</svg>
);

12
packages/ui-react/src/assets/svg/Ruler.tsx Normal file
View File

@@ -0,0 +1,12 @@
export const RulerSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M5 4h14a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-7a1 1 0 0 0-1 1v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1M4 8h2m-2 4h3m-3 4h2M8 4v2m4-2v3m4-3v2"
/>
</svg>
);

8
packages/ui-react/src/assets/svg/SearchSvg.tsx Normal file
View File

@@ -0,0 +1,8 @@
export const SearchSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="currentColor"
d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
/>
</svg>
);

9
packages/ui-react/src/assets/svg/SettingSvg.tsx Normal file
View File

@@ -0,0 +1,9 @@
export const SettingSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="currentColor"
fill-rule="evenodd"
d="M12.563 3.2h-1.126l-.645 2.578l-.647.2a6.3 6.3 0 0 0-1.091.452l-.599.317l-2.28-1.368l-.796.797l1.368 2.28l-.317.598a6.3 6.3 0 0 0-.453 1.091l-.199.647l-2.578.645v1.126l2.578.645l.2.647q.173.568.452 1.091l.317.599l-1.368 2.28l.797.796l2.28-1.368l.598.317q.523.278 1.091.453l.647.199l.645 2.578h1.126l.645-2.578l.647-.2a6.3 6.3 0 0 0 1.091-.452l.599-.317l2.28 1.368l.796-.797l-1.368-2.28l.317-.598q.278-.523.453-1.091l.199-.647l2.578-.645v-1.126l-2.578-.645l-.2-.647a6.3 6.3 0 0 0-.452-1.091l-.317-.599l1.368-2.28l-.797-.796l-2.28 1.368l-.598-.317a6.3 6.3 0 0 0-1.091-.453l-.647-.199zm2.945 2.17l1.833-1.1a1 1 0 0 1 1.221.15l1.018 1.018a1 1 0 0 1 .15 1.221l-1.1 1.833q.33.62.54 1.3l2.073.519a1 1 0 0 1 .757.97v1.438a1 1 0 0 1-.757.97l-2.073.519q-.21.68-.54 1.3l1.1 1.833a1 1 0 0 1-.15 1.221l-1.018 1.018a1 1 0 0 1-1.221.15l-1.833-1.1q-.62.33-1.3.54l-.519 2.073a1 1 0 0 1-.97.757h-1.438a1 1 0 0 1-.97-.757l-.519-2.073a7.5 7.5 0 0 1-1.3-.54l-1.833 1.1a1 1 0 0 1-1.221-.15L4.42 18.562a1 1 0 0 1-.15-1.221l1.1-1.833a7.5 7.5 0 0 1-.54-1.3l-2.073-.519A1 1 0 0 1 2 12.72v-1.438a1 1 0 0 1 .757-.97l2.073-.519q.21-.68.54-1.3L4.27 6.66a1 1 0 0 1 .15-1.221L5.438 4.42a1 1 0 0 1 1.221-.15l1.833 1.1q.62-.33 1.3-.54l.519-2.073A1 1 0 0 1 11.28 2h1.438a1 1 0 0 1 .97.757l.519 2.073q.68.21 1.3.54zM12 14.8a2.8 2.8 0 1 0 0-5.6a2.8 2.8 0 0 0 0 5.6m0 1.2a4 4 0 1 1 0-8a4 4 0 0 1 0 8"
/>
</svg>
);

23
packages/ui-react/src/assets/svg/SpinnerSvg.tsx Normal file
View File

@@ -0,0 +1,23 @@
export const SpinnerSvg = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="currentColor"
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
opacity="0.25"
/>
<path
fill="currentColor"
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
>
<animateTransform
attributeName="transform"
dur="0.75s"
repeatCount="indefinite"
type="rotate"
values="0 12 12;360 12 12"
/>
</path>
</svg>
);
};

12
packages/ui-react/src/assets/svg/SunSvg.tsx Normal file
View File

@@ -0,0 +1,12 @@
export const SunSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7"
/>
</svg>
);

14
packages/ui-react/src/assets/svg/UserSvg.tsx Normal file
View File

@@ -0,0 +1,14 @@
export const UserSvg = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M19.618 21.25c0-3.602-4.016-6.53-7.618-6.53s-7.618 2.928-7.618 6.53M12 11.456a4.353 4.353 0 1 0 0-8.706a4.353 4.353 0 0 0 0 8.706"
/>
</svg>
);
};

12
packages/ui-react/src/assets/svg/VolumeHighSvg.tsx Normal file
View File

@@ -0,0 +1,12 @@
export const VolumeHighSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z"
/>
</svg>
);

12
packages/ui-react/src/assets/svg/VolumeLowSvg.tsx Normal file
View File

@@ -0,0 +1,12 @@
export const VolumeLowSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 8a5 5 0 0 1 0 8m-9-1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z"
/>
</svg>
);

12
packages/ui-react/src/assets/svg/VolumeMuteSvg.tsx Normal file
View File

@@ -0,0 +1,12 @@
export const VolumeMuteSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5zm10-5l4 4m0-4l-4 4"
/>
</svg>
);

19
packages/ui-react/src/componnets/button/ButtonIcon.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { useEffect } from "react";
import { Slot } from "../../utils/Slot";
import { useButtonContext } from "./common/ButtonContext";
export const ButtonIcon = (props: any) => {
const { children, ...rest } = props;
const { slotRegistry } = useButtonContext();
useEffect(() => {
slotRegistry.setSlots?.((prev) => ({
...prev,
icon: <Slot {...rest}>{children}</Slot>,
}));
}, [children, slotRegistry]);
return null;
};
ButtonIcon.displayName = "ButtonIcon";

25
packages/ui-react/src/componnets/button/ButtonLoading.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { useEffect } from "react";
import type { ReactNode } from "react";
import { useButtonContext } from "./common/ButtonContext";
import { Slot } from "../../utils/Slot";
type ButtonLoadingProps = {
children: ReactNode;
};
export const ButtonLoading = (props: ButtonLoadingProps) => {
const { children, ...rest } = props;
const { slotRegistry } = useButtonContext();
useEffect(() => {
slotRegistry.setSlots?.(prev => ({
...prev,
loading: <Slot {...rest}>{children}</Slot>,
}));
}, [children, slotRegistry]);
return null;
};
ButtonLoading.displayName = "ButtonLoading";

60
packages/ui-react/src/componnets/button/ButtonRoot.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { type ComponentPropsWithoutRef, forwardRef } from "react";
import { ButtonContext, type ButtonSlot } from "./common/ButtonContext";
import { useSlotRegistry } from "../../utils/useSlotRegistry";
import { mergeProps } from "../../utils/mergeProps";
import { useDefaultedProps } from "../../utils/useDefaultedProps";
import { brandRecipe, cpm, itemSizeRecipe, variantRecipe } from "@dg/css";
export type ButtonRootOwnProps = {
size?: "xs" | "sm" | "md" | "lg";
variant?: "filled" | "outline" | "subtle" | "ghost";
shape?: "rounded" | "square" | "circle";
brand?: "success" | "danger" | "info" | "warning" | "emphasize";
iconOnly?: boolean;
hideIcon?: boolean;
loading?: boolean;
disabled?: boolean;
};
export type ButtonRootPrimitiveProps = Omit<
ComponentPropsWithoutRef<"button">,
keyof ButtonRootOwnProps
>;
export type ButtonRootProps = ButtonRootOwnProps & ButtonRootPrimitiveProps;
export const ButtonRoot = forwardRef<HTMLButtonElement, ButtonRootProps>(
(props, ref) => {
const defaultedProps = useDefaultedProps(props, {
size: "md",
variant: "filled",
shape: "rounded",
brand: "info",
iconOnly: false,
disabled: false,
});
const { size, variant, shape, brand, iconOnly, disabled, children } =
defaultedProps;
const clx = cpm(
itemSizeRecipe({ size, shape, iconOnly }),
variantRecipe({ variant, disabled }),
brandRecipe({ brand }),
);
const mergedProps = mergeProps({ className: clx }, defaultedProps);
const slotRegistry = useSlotRegistry<ButtonSlot>();
return (
<ButtonContext.Provider value={{ slotRegistry }}>
<button ref={ref} {...mergedProps}>
{slotRegistry.slots?.icon}
{children}
{slotRegistry.slots?.loading}
</button>
</ButtonContext.Provider>
);
},
);
ButtonRoot.displayName = "Button.Root";

26
packages/ui-react/src/componnets/button/common/ButtonContext.ts Normal file
View File

@@ -0,0 +1,26 @@
// ButtonContext.ts
import { createContext, useContext, type ReactNode } from "react";
export type ButtonSlot = {
icon?: ReactNode;
loading?: ReactNode;
};
type ButtonContextValue = {
slotRegistry: {
slots?: ButtonSlot;
setSlots?: React.Dispatch<React.SetStateAction<ButtonSlot | undefined>>;
};
};
export const ButtonContext = createContext<ButtonContextValue | undefined>(
undefined,
);
export const useButtonContext = () => {
const ctx = useContext(ButtonContext);
if (!ctx) {
throw new Error("Button 子组件必须在 Button.Root 内使用");
}
return ctx;
};

10
packages/ui-web/src/componnets/button/index.ts → packages/ui-react/src/componnets/button/index.ts
View File

@@ -2,8 +2,8 @@ import { ButtonIcon } from "./ButtonIcon";
import { ButtonLoading } from "./ButtonLoading";
import { ButtonRoot } from "./ButtonRoot";
export namespace Button {
export const Root = ButtonRoot;
export const Icon = ButtonIcon;
export const Loading = ButtonLoading;
}
export const Button = {
Root: ButtonRoot,
Icon: ButtonIcon,
Loading: ButtonLoading,
}

0
packages/ui-react/src/index.css Normal file
View File

29
packages/ui-react/src/index.ts Normal file
View File

@@ -0,0 +1,29 @@
import './index.css';
export * from './assets/svg/BoldSvg';
export * from './assets/svg/CheckIndicatorSvg';
export * from './assets/svg/ChevronRightSvg';
export * from './assets/svg/CutSvg';
export * from './assets/svg/DownloadSvg';
export * from './assets/svg/FileSvg';
export * from './assets/svg/KeySvg';
export * from './assets/svg/MeshSvg';
export * from './assets/svg/MoonSvg';
export * from './assets/svg/PasteSvg';
export * from './assets/svg/Ruler';
export * from './assets/svg/SearchSvg';
export * from './assets/svg/SettingSvg';
export * from './assets/svg/SpinnerSvg';
export * from './assets/svg/SunSvg';
export * from './assets/svg/UserSvg';
export * from './assets/svg/VolumeHighSvg';
export * from './assets/svg/VolumeLowSvg';
export * from './assets/svg/VolumeMuteSvg';
export * from './componnets/button/index';
export * from './componnets/button/ButtonIcon';
export * from './componnets/button/ButtonLoading';
export * from './componnets/button/ButtonRoot';
export * from './componnets/button/common/ButtonContext';
export * from './utils/mergeProps';
export * from './utils/Slot';
export * from './utils/useDefaultedProps';
export * from './utils/useSlotRegistry';

4
packages/ui-react/src/types/env.d.ts vendored Normal file
View File

@@ -0,0 +1,4 @@
declare module "*.css" {
const content: string;
export default content;
}

0
packages/ui-web/src/utils/Slot.tsx → packages/ui-react/src/utils/Slot.tsx
View File

107
packages/ui-react/src/utils/mergeProps.ts Normal file
View File

@@ -0,0 +1,107 @@
type AnyProps = Record<string, any>;
function defaultClassMergeFn(...classes: string[]): string {
return classes
.map((s) => s.trim())
.filter(Boolean)
.join(" ")
.trim();
}
// 工具类型
type UnionToIntersection<U> =
(U extends any ? (k: U) => void : never) extends
(k: infer I) => void ? I : never;
// 泛型入口
export function mergeProps<
T extends AnyProps[]
>(
...args: [...T]
): UnionToIntersection<T[number]>;
export function mergeProps<
T extends AnyProps[]
>(
options: { classMergeFn: (...cls: string[]) => string },
...args: [...T]
): UnionToIntersection<T[number]>;
export function mergeProps(
arg1: any,
...rest: any[]
): any {
let options = {
classMergeFn: defaultClassMergeFn,
};
let propsList: AnyProps[];
if (
arg1 &&
typeof arg1 === "object" &&
!Array.isArray(arg1) &&
"classMergeFn" in arg1 &&
typeof arg1.classMergeFn === "function"
) {
options = arg1;
propsList = rest;
} else {
propsList = [arg1, ...rest];
}
const result: AnyProps = {};
const eventHandlers = new Map<string, Function[]>();
const refs: any[] = [];
for (const props of propsList) {
if (!props) continue;
if (props.className) {
result.className = options.classMergeFn(
result.className ?? "",
props.className,
);
}
if (props.style) {
result.style = { ...(result.style ?? {}), ...props.style };
}
if (props.ref) {
refs.push(props.ref);
}
for (const key of Object.keys(props)) {
if (key.startsWith("on") && typeof props[key] === "function") {
if (!eventHandlers.has(key)) {
eventHandlers.set(key, []);
}
eventHandlers.get(key)!.push(props[key]);
} else if (key !== "ref" && key !== "className" && key !== "style") {
result[key] = props[key];
}
}
}
// refs
if (refs.length === 1) {
result.ref = refs[0];
} else if (refs.length > 1) {
result.ref = (node: any) => {
refs.forEach((ref) => {
if (typeof ref === "function") ref(node);
else if (ref) ref.current = node;
});
};
}
// events
eventHandlers.forEach((handlers, key) => {
result[key] = (...args: any[]) => {
handlers.forEach((fn) => fn(...args));
};
});
return result;
}

Some files were not shown because too many files have changed in this diff Show More