@dam/ui-kit-make

@dam/ui-kit-make 是面向 Figma Make 的可发布设计系统包骨架。它的目标不是替代仓库内部的 @dam/ui-kit，而是提供一套更稳定、更容易发布、对宿主环境依赖更少的最小组件集合，作为 Figma Make kit 的代码事实源。

这个包的作用

• 作为 Figma Make 可安装的 React design system package
• 向 Figma Make 暴露 DAM 的基础 tokens、主题和稳定组件
• 为 Make kit 提供统一的 dark / light theme 上下文
• 为后续 Code Connect 和前端重构建立更清晰的设计系统边界

与 @dam/ui-kit 的关系

• @dam/ui-kit
  • 当前仓库内部使用的 UI 组件库
  • 同时服务业务实现和现有页面
• @dam/ui-kit-make
  • 面向 Figma Make 的发布友好子集
  • 优先选择最稳定、最容易在独立环境运行的组件
  • 尽量减少对宿主项目样式环境的隐式依赖

v1 组件范围

• ThemeProvider
• damTokens
• Stack
• Button
• Card
• Input
• NumberInput
• Select
• TextArea
• Chip
• Avatar
• Snackbar
• Icon 及常用图标导出

使用方式

1. 引入样式

import '@dam/ui-kit-make/theme.css';

2. 包裹主题

import { ThemeProvider } from '@dam/ui-kit-make';

export function App() {
  return (
    <ThemeProvider>
      <YourScreen />
    </ThemeProvider>
  );
}

3. 使用组件

import {
  Avatar,
  Button,
  Card,
  Chip,
  Input,
  Select,
  Snackbar,
  Stack,
} from '@dam/ui-kit-make';

export function Example() {
  return (
    <Stack gap={16}>
      <Card
        title="Asset Browser"
        actions={<Button variant="ghost">Refresh</Button>}
      >
        <Stack gap={12}>
          <Input placeholder="Search assets" />
          <Select defaultValue="updated">
            <option value="updated">Recently updated</option>
            <option value="name">Name</option>
          </Select>
          <Stack direction="row" gap={8}>
            <Chip active>Published</Chip>
            <Chip>Review</Chip>
          </Stack>
          <Stack direction="row" gap={12}>
            <Avatar name="Design Ops" />
            <Button>Upload</Button>
            <Button variant="secondary">Share</Button>
          </Stack>
        </Stack>
      </Card>
      <Snackbar open message="Metadata saved" tone="success" />
    </Stack>
  );
}

发布前最小 smoke test

这个包内置了一个最小 smoke test，用来验证以下内容：

• build 能通过
• 关键导出存在
• theme.css 路径存在
• 基础组件能通过 SSR 静态渲染

运行命令：

pnpm --filter @dam/ui-kit-make smoke:test

Vite 浏览器 smoke host

这个包还附带了一个浏览器 smoke host，用来在真正发布给 Figma Make 之前肉眼检查：

• dark / light 两套主题
• Button / Card / Input / Select / TextArea / Chip / Avatar / Snackbar 的浏览器表现
• DAM 工作台风格是否成立
• Make kit 预期的视觉密度和层级是否稳定

启动开发服务器：

pnpm --filter @dam/ui-kit-make smoke:dev

默认地址：

http://localhost:4176

做静态构建验证：

pnpm --filter @dam/ui-kit-make smoke:build

这个 host 位于：

packages/ui-kit-make/smoke-host

它的定位是“发布前试衣间”，不是正式文档站，也不是 Storybook 替代品。

当前状态

目前这个包还是仓库内骨架，所以 package.json 仍是 "private": true。准备真正发布到 npm registry 或 Figma 私有 registry 时，再改为可发布状态并补充版本发布流程。