@ access/ design- system
AppDirect 设计系统组件. 曼汀街9号周围有薄薄的包裹.
安装
npm install @appdirect/design-system
对等依赖性( 在此套件所宣布的版本中安装) :
react, (中文(简体) ),react-dom@mantine/core, (中文(简体) ),@mantine/dates, (中文(简体) ),@mantine/hooks
包裹里有什么船
| 什麽 | 路径/ 导出 | 用于 |
|---|---|---|
| JS 运行时间 | main 编号 : exports["."].default → dist/index.js | 苹果和捆绑进口 |
| 类型脚本源 | exports["."].types → dist/index.ts (+ 构成部分) .ts编号 :.tsx(中文(简体) ) | 编辑器类型; 不将捆绑器指向运行时间 |
| 隐藏 CSS | @appdirect/design-system/css/foundations.css, (中文(简体) ), .../mantine.css | 主题变量( E)--ad-*(中文(简体) ) |
| 配置/ 共享类型 | @appdirect/design-system/config, (中文(简体) ), @appdirect/design-system/types | 规模,变体联盟 |
| 故事(来源) | @appdirect/design-system/stories, (中文(简体) ), .../stories/* | 代理 / 设计 参考模式 (add-feature(中文(简体) ) |
| 合同 | @appdirect/design-system/contracts, (中文(简体) ), .../contracts/* | ds-audit 执法 |
| 设计光谱 | @appdirect/design-system/DESIGN.md | 光学 apps/design-system/DESIGN.md (手表+传言) |
| 国 际 | ds-audit | 对照合同审计原型或应用程序 |
| 国 际 | ad-sync-design-md | 复制 DESIGN.md 进入消费回收(postinstall 编号 : sync-design-docs(中文(简体) ) |
Bundlers( Rspack, webpack, Vite, Next) 应对软件包条目进行解析 .js。你会 没有 需求 transpilePackages / SWC 包括此软件包的 TypeScript 。 继续装入 *.module.css 从您的 CSS 模块规则的包.
保留 DESIGN.md 同步中
执行 没有 手抄设计谱. 将已公布文件拖入安装的电线消费者 :
{
"scripts": {
"postinstall": "ad-sync-design-md",
"sync-design-docs": "ad-sync-design-md"
}
}
- 默认目的地 :
docs/DESIGN.md - 回收目标 :
DESIGN_MD_PATH=DESIGN.md或者说ad-sync-design-md --out DESIGN.md - 作者真实来源于此单曲:
apps/design-system/DESIGN.md
应用程序使用
在应用程序根附近装入符号 CSS( 独立原型经常使用此软件包的 CSS再出口; 符号包是相同的文件) :
import '@appdirect/design-system/css/foundations.css';
import '@appdirect/design-system/css/mantine.css';
// or:
// import '@appdirect/ad-design-tokens/css/foundations.css';
// import '@appdirect/ad-design-tokens/css/mantine.css';
从此软件包导入产品 UI, 不是原始 @mantine/core,当DS包装器存在时:
import { Button, TextInput, Stack, Card, PageContentHeader } from '@appdirect/design-system';
export function Example() {
return (
<Stack gap="md">
<PageContentHeader title="Invoices" description="Open billing period" />
<Card padding="md">
<TextInput label="Search" />
<Button variant="primary">Save</Button>
</Card>
</Stack>
);
}
使用 AppDirect 按钮变体(primary, (中文(简体) ), secondary, (中文(简体) ), default, (中文(简体) ), outline, (中文(简体) ), danger, (中文(简体) ), link, (中文(简体) ), secret),不是曼汀语 filled 编号 : light 编号 : subtle. 偏爱 --ad-* 颜色符号; 避免调色板道具像 color="blue"。 。 。 .
共享帮助 :
import { /* sizes, etc. */ } from '@appdirect/design-system/config';
import type { DSButtonVariant } from '@appdirect/design-system/types';
故事(仅工具)
童话故事 参考来源 下级 dist/stories/。它们不是React组件的运行时间导出.
// Index of every story: title, component, description, story names, imports
import stories from '@appdirect/design-system/stories';
// or open files via the package export:
// @appdirect/design-system/stories/Buttons/Button.stories.tsx
原型剂add-feature)改为 node_modules/@appdirect/design-system/dist/stories/ (和 stories 导出)以复制组成图案。 当一个故事导入了设计系统没有采纳的曼汀组件时,构建失败了.
合同和 ds-audit
npx ds-audit
# or: ./node_modules/.bin/ds-audit
合同时间: @appdirect/design-system/contracts (指数)和 @appdirect/design-system/contracts/<id>。使用时使用 @appdirect/ds-enforce ESLint在采用该系统的应用程序中规则.
提供者说明
MantineProvider / 主题设置保留在主机应用程序中( 例如) src/providers/ 在微i-ui / 原型应用中). 此软件包不导出提供者 .