拱廊设计系统

发表于 @arcadeai/design-system ——100+可访问 React 组件以Tailwind CSS为基础UI所建.

使用量

npm install @arcadeai/design-system

导入应用程序根的样式 :

@import "@arcadeai/design-system/index.css";

然后使用组件 :

import { Button, Card, Input } from "@arcadeai/design-system";

表格组:字段集

偏爱 Fieldset 超过本地 <fieldset> 用于包含设计-系统控件的组,特别是允许指定或管理的设置。 从这里导入 @arcadeai/design-system/components/ui/atoms/fieldset。 。 。 .

Fieldset 使语义 <fieldset> base UI的残疾环境。 将每个基准UI字段插入 FormItem (单位:千美元)Field.Root因此,收音机、复选箱、交换机和选择继承 disabled本地 <fieldset disabled> 不提供上下文. FormItem 也在反钩外工作.

import { Checkbox } from "@arcadeai/design-system/components/ui/atoms/checkbox";
import { Fieldset } from "@arcadeai/design-system/components/ui/atoms/fieldset";
import { FormItem } from "@arcadeai/design-system/rhf";
import { useId } from "react";

export function NotificationSettings({ canEdit }: { canEdit: boolean }) {
  const id = useId();

  return (
    <Fieldset disabled={!canEdit}>
      <legend>Notifications</legend>
      <FormItem className="flex items-center gap-2">
        <Checkbox defaultChecked id={id} name="emailNotifications" />
        <label htmlFor={id}>Email notifications</label>
      </FormItem>
    </Fieldset>
  );
}

对于无法编辑的设置, 使用 disabled· ; Fieldset 没有组级别 readOnly 道具 (英语). 在提交处理器和服务器上保持权限检查.

土著 <fieldset> 仍然适合仅包含本地控件的组合,因为基础UI上下文是不必要的。 不消耗 Base UI 字段环境的自定义控制仍然需要自己的被禁用处理.

见 外地集执行 财务报告和审定财务报表 禁用控制测试。 。 。 .

登记簿

设计系统也作为 阴影登记册中添加注册 components.json数字 :

{
  "registries": {
    "@arcadeai": "https://ds.arcade.dev/r/{name}.json"
  }
}

然后安装组件 :

npx shadcn@latest add @arcadeai/arcadeai-theme
npx shadcn@latest add @arcadeai/button

对于窗体组模式,请同时安装 @arcadeai/fieldset 财务报告和审定财务报表 @arcadeai/form (加上您使用的控件),然后从生成的本地文件导入:

npx shadcn@latest add @arcadeai/fieldset @arcadeai/form @arcadeai/checkbox

发展

make help      # see all available commands
make install   # install dependencies
make dev       # start Storybook dev server (headless)
make run       # start Storybook (opens browser)
make build     # build the library
make check     # lint + type-check

捐款

添加图标

1. 将 SVG 置入 lib/assets/icons/
2. 运行 bun run generate-icons
3. 从 @arcadeai/design-system/components/ui/atoms/icons

添加工具包

添加条目到 lib/metadata/toolkits.ts ——参见模式的现有条目.

添加 OAuth 供应商

添加条目到 lib/metadata/oauth-providers.ts ——参见模式的现有条目.