sparkdesign 0.0.1 → 0.1.10

package/dist/utils/tokens.js

@@ -0,0 +1,176 @@
+/**
+ * [INPUT]: cwd, registryRoot
+ * [OUTPUT]: 见各函数
+ * [POS]: cli/src/utils/tokens.ts
+ *
+ * [PROTOCOL]: 文件逻辑变更时同步更新此 Header
+ * - init：ensureDesignTokens 注入到用户入口 CSS（globals/index.css）
+ * - add：不改入口；writeQoderTokensFile 生成独立 qoder-tokens.css，由用户自行 import
+ */
+import path from 'node:path';
+import fs from 'fs-extra';
+const TOKEN_MARKER = 'Spark Design tokens';
+/** 辅助函数：读取文件，不存在则返回空字符串 */
+async function readFileIfExists(filePath) {
+    if (await fs.pathExists(filePath)) {
+        return fs.readFile(filePath, 'utf-8');
+    }
+    return '';
+}
+/** 辅助函数：读取 scale 目录下的所有文件并内联 */
+async function readScaleContents(registryRoot) {
+    const scaleDir = path.join(registryRoot, 'tokens', 'scale');
+    const scaleLegacy = path.join(registryRoot, 'tokens', 'scale.css');
+    // 新结构：读取 scale/ 目录
+    if (await fs.pathExists(scaleDir)) {
+        const configContent = await readFileIfExists(path.join(scaleDir, 'config.css'));
+        const computedContent = await readFileIfExists(path.join(scaleDir, 'computed.css'));
+        const presetsDir = path.join(scaleDir, 'presets');
+        const compactContent = await readFileIfExists(path.join(presetsDir, 'compact.css'));
+        const softContent = await readFileIfExists(path.join(presetsDir, 'soft.css'));
+        const sharpContent = await readFileIfExists(path.join(presetsDir, 'sharp.css'));
+        const denseContent = await readFileIfExists(path.join(presetsDir, 'dense.css'));
+        return [configContent, computedContent, compactContent, softContent, sharpContent, denseContent]
+            .filter(Boolean)
+            .join('\n\n');
+    }
+    // 兼容旧结构：读取单文件 scale.css
+    if (await fs.pathExists(scaleLegacy)) {
+        const content = await fs.readFile(scaleLegacy, 'utf-8');
+        // 如果是 @import 入口，跳过
+        if (content.includes('@import "./scale/')) {
+            return '';
+        }
+        return content;
+    }
+    return '';
+}
+/** 项目里是否已有 token（入口 CSS 内联了变量、或已 import qoder-tokens.css） */
+export async function projectHasTokens(cwd) {
+    const candidates = [
+        path.join(cwd, 'src', 'app', 'globals.css'),
+        path.join(cwd, 'src', 'index.css'),
+        path.join(cwd, 'src', 'main.css'),
+        path.join(cwd, 'src', 'App.css'),
+    ];
+    for (const p of candidates) {
+        if (await fs.pathExists(p)) {
+            const content = await fs.readFile(p, 'utf-8');
+            if (content.includes('--color-primary:') ||
+                content.includes(TOKEN_MARKER) ||
+                content.includes('qoder-tokens.css')) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+/** 仅 init 使用：把 tokens 注入到用户入口 CSS（globals.css / index.css） */
+export async function ensureDesignTokens(cwd, registryRoot) {
+    // 新结构：使用 index.css 统一入口
+    const indexPath = path.join(registryRoot, 'tokens', 'index.css');
+    // 兼容旧结构
+    const themePath = path.join(registryRoot, 'tokens', 'theme.css');
+    const scalePath = path.join(registryRoot, 'tokens', 'scale.css');
+    const scrollbarPath = path.join(registryRoot, 'tokens', 'scrollbar-utility.css');
+    const themesDir = path.join(registryRoot, 'tokens', 'themes');
+    // 检查是否有可用的 tokens 文件
+    const hasNewStructure = await fs.pathExists(indexPath);
+    const hasLegacyStructure = (await fs.pathExists(themePath)) && (await fs.pathExists(scalePath));
+    if (!hasNewStructure && !hasLegacyStructure) {
+        return null;
+    }
+    if (await projectHasTokens(cwd)) {
+        return null;
+    }
+    let cssEntry = path.join(cwd, 'src', 'app', 'globals.css');
+    if (!(await fs.pathExists(cssEntry))) {
+        cssEntry = path.join(cwd, 'src', 'index.css');
+    }
+    if (!(await fs.pathExists(cssEntry))) {
+        cssEntry = path.join(cwd, 'src', 'index.css');
+        await fs.ensureDir(path.dirname(cssEntry));
+    }
+    let tokensBlock;
+    if (hasNewStructure && (await fs.pathExists(themesDir))) {
+        // 新结构：读取拆分的主题文件并内联
+        const scaleContent = await readScaleContents(registryRoot);
+        const lightContent = await readFileIfExists(path.join(themesDir, 'light-qoder.css'));
+        const darkContent = await readFileIfExists(path.join(themesDir, 'dark-qoder.css'));
+        const lightParchmentContent = await readFileIfExists(path.join(themesDir, 'light-parchment.css'));
+        const darkParchmentContent = await readFileIfExists(path.join(themesDir, 'dark-parchment.css'));
+        const scrollbarContent = await readFileIfExists(scrollbarPath);
+        tokensBlock = `/* ${TOKEN_MARKER} - 由 npx sparkdesign init 写入，驱动组件样式 */\n` +
+            `${scaleContent}\n\n` +
+            `${lightContent}\n\n` +
+            `${darkContent}\n\n` +
+            `${lightParchmentContent}\n\n` +
+            `${darkParchmentContent}\n` +
+            (scrollbarContent ? `\n${scrollbarContent}\n` : '');
+    }
+    else {
+        // 兼容旧结构
+        const themeContent = await fs.readFile(themePath, 'utf-8');
+        const scaleContent = await fs.readFile(scalePath, 'utf-8');
+        const scrollbarContent = (await fs.pathExists(scrollbarPath))
+            ? await fs.readFile(scrollbarPath, 'utf-8')
+            : '';
+        tokensBlock =
+            `/* ${TOKEN_MARKER} - 由 npx sparkdesign init 写入，驱动组件样式 */\n${scaleContent}\n\n${themeContent}\n` +
+                (scrollbarContent ? `\n${scrollbarContent}\n` : '');
+    }
+    const existing = (await fs.pathExists(cssEntry)) ? await fs.readFile(cssEntry, 'utf-8') : '';
+    const newContent = tokensBlock + (existing ? '\n' + existing : '');
+    await fs.writeFile(cssEntry, newContent, 'utf-8');
+    return cssEntry;
+}
+const DEDICATED_TOKENS_FILE = 'qoder-tokens.css';
+/** 仅 add 使用：在 src 下生成独立 token 文件，不修改用户入口。若已存在则不覆盖。返回路径及是否本次创建。 */
+export async function writeQoderTokensFile(cwd, registryRoot) {
+    const indexPath = path.join(registryRoot, 'tokens', 'index.css');
+    const themePath = path.join(registryRoot, 'tokens', 'theme.css');
+    const scalePath = path.join(registryRoot, 'tokens', 'scale.css');
+    const scrollbarPath = path.join(registryRoot, 'tokens', 'scrollbar-utility.css');
+    const themesDir = path.join(registryRoot, 'tokens', 'themes');
+    const targetPath = path.join(cwd, 'src', DEDICATED_TOKENS_FILE);
+    if (await fs.pathExists(targetPath)) {
+        return { path: targetPath, created: false };
+    }
+    const hasNewStructure = await fs.pathExists(indexPath);
+    const hasLegacyStructure = (await fs.pathExists(themePath)) && (await fs.pathExists(scalePath));
+    if (!hasNewStructure && !hasLegacyStructure) {
+        return { path: targetPath, created: false };
+    }
+    let content;
+    if (hasNewStructure && (await fs.pathExists(themesDir))) {
+        // 新结构：读取拆分的主题文件并内联
+        const scaleContent = await readScaleContents(registryRoot);
+        const lightContent = await readFileIfExists(path.join(themesDir, 'light-qoder.css'));
+        const darkContent = await readFileIfExists(path.join(themesDir, 'dark-qoder.css'));
+        const lightParchmentContent = await readFileIfExists(path.join(themesDir, 'light-parchment.css'));
+        const darkParchmentContent = await readFileIfExists(path.join(themesDir, 'dark-parchment.css'));
+        const scrollbarContent = await readFileIfExists(scrollbarPath);
+        content = `/* ${TOKEN_MARKER} - 在应用入口 import 此文件以驱动组件样式 */\n` +
+            `${scaleContent}\n\n` +
+            `${lightContent}\n\n` +
+            `${darkContent}\n\n` +
+            `${lightParchmentContent}\n\n` +
+            `${darkParchmentContent}\n` +
+            (scrollbarContent ? `\n${scrollbarContent}\n` : '');
+    }
+    else {
+        // 兼容旧结构
+        const themeContent = await fs.readFile(themePath, 'utf-8');
+        const scaleContent = await fs.readFile(scalePath, 'utf-8');
+        const scrollbarContent = await readFileIfExists(scrollbarPath);
+        content =
+            `/* ${TOKEN_MARKER} - 在应用入口 import 此文件以驱动组件样式 */\n${scaleContent}\n\n${themeContent}\n` +
+                (scrollbarContent ? `\n${scrollbarContent}\n` : '');
+    }
+    await fs.ensureDir(path.dirname(targetPath));
+    await fs.writeFile(targetPath, content, 'utf-8');
+    return { path: targetPath, created: true };
+}
+export function getQoderTokensImportPath() {
+    return `./${DEDICATED_TOKENS_FILE}`;
+}

package/dist/utils/transform.js

@@ -0,0 +1,19 @@
+/**
+ * [INPUT]: 模板源码 + 用户 aliases
+ * [OUTPUT]: 替换别名后的源码字符串
+ * [POS]: cli/src/utils/transform.ts
+ *
+ * [PROTOCOL]: 文件逻辑变更时同步更新此 Header
+ */
+/** 移除文件开头的 L3 协议块注释，使按需引入到用户项目的代码不包含内部文档。 */
+export function stripL3Header(source) {
+    return source.replace(/^\s*\/\*\*[\s\S]*?\*\/\s*/, '').trimStart();
+}
+export function transformImports(source, aliases) {
+    let result = source;
+    result = result.replace(/from ['"]@\/lib\/utils['"]/g, `from '${aliases.utils}'`);
+    if (aliases.components) {
+        result = result.replace(/from ['"]@\/components\//g, `from '${aliases.components}/`);
+    }
+    return result;
+}

package/package.json

@@ -1,16 +1,39 @@
 {
   "name": "sparkdesign",
-  "version": "0.0.1",
-  "description": "SparkDesign - Reserved package name",
-  "main": "index.js",
+  "version": "0.1.10",
+  "description": "CLI for Spark Design - add components on demand (copy source to your project)",
+  "type": "module",
+  "bin": {
+    "sparkdesign": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "registry",
+    "README.md"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "cli": "node dist/index.js",
+    "prepublishOnly": "node ../scripts/sync-registry-to-cli.mjs"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "diff": "^7.0.0",
+    "execa": "^9.5.2",
+    "fs-extra": "^11.2.0",
+    "ora": "^8.1.1",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/diff": "^6.0.0",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^22.10.1",
+    "@types/prompts": "^2.4.9",
+    "typescript": "~5.9.3"
   },
-  "keywords": ["sparkdesign", "ui", "components"],
-  "author": "cunyu666",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/cunyu666/sparkdesign.git"
+  "engines": {
+    "node": ">=18"
   }
 }

package/registry/__tests__/basic/button.test.tsx

@@ -0,0 +1,333 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Button } from '../../basic/button'
+import { createRef } from 'react'
+
+describe('Button', () => {
+  // ============================================================
+  // 渲染测试
+  // ============================================================
+  describe('渲染', () => {
+    it('应正确渲染 children 文本', () => {
+      render(<Button>点击我</Button>)
+      expect(screen.getByRole('button')).toHaveTextContent('点击我')
+    })
+
+    it('应渲染为原生 button 元素', () => {
+      render(<Button>按钮</Button>)
+      expect(screen.getByRole('button').tagName).toBe('BUTTON')
+    })
+
+    it('应设置正确的 displayName', () => {
+      expect(Button.displayName).toBe('Button')
+    })
+  })
+
+  // ============================================================
+  // Variant 变体测试
+  // ============================================================
+  describe('variant 变体', () => {
+    it('默认应使用 ghost 变体', () => {
+      render(<Button>Ghost</Button>)
+      expect(screen.getByRole('button')).toHaveClass('bg-transparent')
+    })
+
+    it('variant="primary" 应应用主色样式', () => {
+      render(<Button variant="primary">Primary</Button>)
+      expect(screen.getByRole('button')).toHaveClass('bg-primary')
+    })
+
+    it('variant="secondary" 应应用次级样式', () => {
+      render(<Button variant="secondary">Secondary</Button>)
+      expect(screen.getByRole('button')).toHaveClass('bg-bg-highlight')
+    })
+
+    it('variant="tertiary" 应应用三级样式', () => {
+      render(<Button variant="tertiary">Tertiary</Button>)
+      expect(screen.getByRole('button')).toHaveClass('bg-fill-secondary')
+    })
+
+    it('variant="text" 应应用纯文字样式', () => {
+      render(<Button variant="text">Text</Button>)
+      expect(screen.getByRole('button')).toHaveClass('bg-transparent')
+      expect(screen.getByRole('button')).toHaveClass('text-text-secondary')
+    })
+  })
+
+  // ============================================================
+  // Size 尺寸测试
+  // ============================================================
+  describe('size 尺寸', () => {
+    it('默认应使用 md 尺寸', () => {
+      render(<Button>Medium</Button>)
+      expect(screen.getByRole('button')).toHaveClass('h-9')
+    })
+
+    it('size="sm" 应应用小尺寸样式', () => {
+      render(<Button size="sm">Small</Button>)
+      expect(screen.getByRole('button')).toHaveClass('h-7')
+      expect(screen.getByRole('button')).toHaveClass('text-xs')
+    })
+
+    it('size="md" 应应用中等尺寸样式', () => {
+      render(<Button size="md">Medium</Button>)
+      expect(screen.getByRole('button')).toHaveClass('h-9')
+      expect(screen.getByRole('button')).toHaveClass('text-sm')
+    })
+
+    it('size="lg" 应应用大尺寸样式', () => {
+      render(<Button size="lg">Large</Button>)
+      expect(screen.getByRole('button')).toHaveClass('h-11')
+      expect(screen.getByRole('button')).toHaveClass('text-base')
+    })
+  })
+
+  // ============================================================
+  // Rounded 圆角测试
+  // ============================================================
+  describe('rounded 圆角', () => {
+    it('默认应使用 square 圆角', () => {
+      render(<Button>Square</Button>)
+      expect(screen.getByRole('button')).toHaveClass('rounded')
+      expect(screen.getByRole('button')).not.toHaveClass('rounded-full')
+    })
+
+    it('rounded="pill" 应应用全圆角样式', () => {
+      render(<Button rounded="pill">Pill</Button>)
+      expect(screen.getByRole('button')).toHaveClass('rounded-full')
+    })
+  })
+
+  // ============================================================
+  // textButton 模式测试
+  // ============================================================
+  describe('textButton 模式', () => {
+    it('textButton=true 应移除高度和内边距', () => {
+      render(<Button textButton>Text Only</Button>)
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('h-auto')
+      expect(button).toHaveClass('px-0')
+    })
+
+    it('textButton=true 应强制使用 text 变体样式', () => {
+      render(<Button textButton variant="primary">Text</Button>)
+      const button = screen.getByRole('button')
+      // 即使传入 primary，textButton 也会覆盖为 text 变体
+      expect(button).toHaveClass('bg-transparent')
+    })
+
+    it('textButton 应保留正确的字体大小', () => {
+      const { rerender } = render(<Button textButton size="sm">SM</Button>)
+      expect(screen.getByRole('button')).toHaveClass('text-xs')
+
+      rerender(<Button textButton size="md">MD</Button>)
+      expect(screen.getByRole('button')).toHaveClass('text-sm')
+
+      rerender(<Button textButton size="lg">LG</Button>)
+      expect(screen.getByRole('button')).toHaveClass('text-base')
+    })
+  })
+
+  // ============================================================
+  // 图标测试
+  // ============================================================
+  describe('图标', () => {
+    it('应渲染 prefixIcon', () => {
+      render(
+        <Button prefixIcon={<span data-testid="prefix">←</span>}>
+          有前置图标
+        </Button>
+      )
+      expect(screen.getByTestId('prefix')).toBeInTheDocument()
+      expect(screen.getByTestId('prefix')).toHaveTextContent('←')
+    })
+
+    it('应渲染 suffixIcon', () => {
+      render(
+        <Button suffixIcon={<span data-testid="suffix">→</span>}>
+          有后置图标
+        </Button>
+      )
+      expect(screen.getByTestId('suffix')).toBeInTheDocument()
+      expect(screen.getByTestId('suffix')).toHaveTextContent('→')
+    })
+
+    it('应同时渲染前后置图标', () => {
+      render(
+        <Button
+          prefixIcon={<span data-testid="prefix">←</span>}
+          suffixIcon={<span data-testid="suffix">→</span>}
+        >
+          双图标
+        </Button>
+      )
+      expect(screen.getByTestId('prefix')).toBeInTheDocument()
+      expect(screen.getByTestId('suffix')).toBeInTheDocument()
+    })
+
+    it('无图标时不应渲染图标包裹元素', () => {
+      const { container } = render(<Button>无图标</Button>)
+      // 检查没有图标包裹的 span 元素
+      const iconWrappers = container.querySelectorAll('button > span.inline-flex')
+      expect(iconWrappers).toHaveLength(0)
+    })
+  })
+
+  // ============================================================
+  // 交互测试
+  // ============================================================
+  describe('交互', () => {
+    it('点击时应触发 onClick 回调', () => {
+      const handleClick = vi.fn()
+      render(<Button onClick={handleClick}>点击</Button>)
+
+      fireEvent.click(screen.getByRole('button'))
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('多次点击应触发相应次数的回调', () => {
+      const handleClick = vi.fn()
+      render(<Button onClick={handleClick}>点击</Button>)
+
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+      fireEvent.click(button)
+      fireEvent.click(button)
+
+      expect(handleClick).toHaveBeenCalledTimes(3)
+    })
+  })
+
+  // ============================================================
+  // Disabled 状态测试
+  // ============================================================
+  describe('disabled 状态', () => {
+    it('disabled=true 应设置 disabled 属性', () => {
+      render(<Button disabled>禁用</Button>)
+      expect(screen.getByRole('button')).toBeDisabled()
+    })
+
+    it('disabled 时应应用禁用样式', () => {
+      render(<Button disabled>禁用</Button>)
+      expect(screen.getByRole('button')).toHaveClass('disabled:opacity-50')
+      expect(screen.getByRole('button')).toHaveClass('disabled:cursor-not-allowed')
+    })
+
+    it('disabled 时点击不应触发 onClick', () => {
+      const handleClick = vi.fn()
+      render(<Button disabled onClick={handleClick}>禁用</Button>)
+
+      fireEvent.click(screen.getByRole('button'))
+      expect(handleClick).not.toHaveBeenCalled()
+    })
+
+    it('默认不应禁用', () => {
+      render(<Button>正常</Button>)
+      expect(screen.getByRole('button')).not.toBeDisabled()
+    })
+  })
+
+  // ============================================================
+  // Ref 转发测试
+  // ============================================================
+  describe('ref 转发', () => {
+    it('应正确转发 ref 到 button 元素', () => {
+      const ref = createRef<HTMLButtonElement>()
+      render(<Button ref={ref}>带 Ref</Button>)
+
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement)
+    })
+
+    it('ref.current 应指向渲染的 button', () => {
+      const ref = createRef<HTMLButtonElement>()
+      render(<Button ref={ref}>带 Ref</Button>)
+
+      expect(ref.current).toBe(screen.getByRole('button'))
+    })
+
+    it('callback ref 应被正确调用', () => {
+      const callbackRef = vi.fn()
+      render(<Button ref={callbackRef}>Callback Ref</Button>)
+
+      expect(callbackRef).toHaveBeenCalled()
+      expect(callbackRef.mock.calls[0][0]).toBeInstanceOf(HTMLButtonElement)
+    })
+  })
+
+  // ============================================================
+  // className 覆盖测试
+  // ============================================================
+  describe('className 覆盖', () => {
+    it('应合并自定义 className', () => {
+      render(<Button className="custom-class">自定义类</Button>)
+      expect(screen.getByRole('button')).toHaveClass('custom-class')
+    })
+
+    it('自定义 className 应与默认类名共存', () => {
+      render(<Button className="my-custom" variant="primary">合并类</Button>)
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('my-custom')
+      expect(button).toHaveClass('bg-primary')
+    })
+  })
+
+  // ============================================================
+  // 原生属性透传测试
+  // ============================================================
+  describe('原生属性透传', () => {
+    it('应透传 type 属性', () => {
+      render(<Button type="submit">提交</Button>)
+      expect(screen.getByRole('button')).toHaveAttribute('type', 'submit')
+    })
+
+    it('应透传 aria-label 属性', () => {
+      render(<Button aria-label="关闭按钮">×</Button>)
+      expect(screen.getByRole('button')).toHaveAttribute('aria-label', '关闭按钮')
+    })
+
+    it('应透传 data-* 属性', () => {
+      render(<Button data-testid="my-button">测试</Button>)
+      expect(screen.getByTestId('my-button')).toBeInTheDocument()
+    })
+
+    it('应透传 id 属性', () => {
+      render(<Button id="unique-button">ID 按钮</Button>)
+      expect(screen.getByRole('button')).toHaveAttribute('id', 'unique-button')
+    })
+  })
+
+  // ============================================================
+  // 组合场景测试
+  // ============================================================
+  describe('组合场景', () => {
+    it('应支持所有 props 组合', () => {
+      const handleClick = vi.fn()
+      render(
+        <Button
+          variant="primary"
+          size="lg"
+          rounded="pill"
+          prefixIcon={<span>🚀</span>}
+          suffixIcon={<span>✨</span>}
+          onClick={handleClick}
+          className="extra-class"
+          data-testid="combo-button"
+        >
+          组合按钮
+        </Button>
+      )
+
+      const button = screen.getByTestId('combo-button')
+      expect(button).toHaveClass('bg-primary')
+      expect(button).toHaveClass('h-11')
+      expect(button).toHaveClass('rounded-full')
+      expect(button).toHaveClass('extra-class')
+      expect(button).toHaveTextContent('🚀')
+      expect(button).toHaveTextContent('组合按钮')
+      expect(button).toHaveTextContent('✨')
+
+      fireEvent.click(button)
+      expect(handleClick).toHaveBeenCalled()
+    })
+  })
+})