校对:soup
React 组件库 与 Tailwind CSS 为 Fanvue 生态系统所建.
特征
- 🎨 尾风 CSS v4 - 具有设计标志的现代CSS第一主题
- ♿ 可访问 - WCAG 2.1 AA符合Radix UI原始人
- 📦 可动摇的树 - 只导入您使用的东西
- 🌙 黑暗模式 - 内置光/暗主题支持
- 📝 类型脚本 - 包括全部类型定义
- 🧪 已测试 - 单位测试与Vitest,E2E与Playwright
设置
1. 安装
npm i @fanvue/ui
2. 同伴依赖关系
# Required
npm i react react-dom tailwindcss
# Only if using DatePicker
npm i react-day-picker
# Only if using animated icons
npm i motion
3. 配置中央支助系统
在您的 CSS 切入点中添加以下内容( 例如 ) . app.css:
@import "tailwindcss";
@source "../node_modules/@fanvue/ui";
@import "@fanvue/ui/styles/theme.css";
4. 装入Inter字体
装入 间 通过 Google 字体或 @fontsource-variable/inter数字 :
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet" />
或者说
npm i @fontsource-variable/inter
使用量
import { Button } from "@fanvue/ui";
function App() {
return (
<Button variant="primary" size="40">
Click me
</Button>
);
}
动画图标
@fanvue/ui/animated-icons 船的动画双胞胎 图标有一个。 每个
导出于 同名词 作为静态图标 没错
同一个框,所以切换是一个单行变化,在您的布局中没有任何变化
移动 :
import { HeartIcon } from "@fanvue/ui"; // static
import { HeartIcon } from "@fanvue/ui/animated-icons"; // animates on hover
<HeartIcon size={24} />;
他们靠自己的子路生存 依靠选择 motion 端点,所以
@fanvue/ui 除非从这里进口,否则消费者从不支付动议费用.
并不是每个图标都有一个双胞胎——一个图标只有在其动画作品完成后才能被映射出来
与我们相比
上游没有相应的. SpinnerIcon 故意缺席:装入
指标不能等待徘徊。 继续使用静态的
<SpinnerIcon spin />,尊重已减少的动议,或 Loader。 。 。 .
当用户请求减少运动时, 没有动画
(单位:千美元)prefers-reduced-motion: reduce),包括动画,你开始自己
结束 controlRef。 。 。 .
默认在徘徊时会有一个图标动画 。 而不是从父母那里开车..
按钮内的一个图标,说——通过 controlRef,它也转动了盘旋
启动 驱使它远离焦并徘徊: <svg> 无法聚焦,
所以键盘用户在按下按钮时, 独自徘徊一无所获.
const icon = useRef<AnimatedIconHandle>(null);
<button
onMouseEnter={() => icon.current?.startAnimation()}
onMouseLeave={() => icon.current?.stopAnimation()}
onFocus={() => icon.current?.startAnimation()}
onBlur={() => icon.current?.stopAnimation()}
>
<HeartIcon controlRef={icon} /> Favourite
</button>;
动画作品只有中风,所以这些图标没有 filled 道具 ——
传出一个是类型错误,而不是沉默的无操作。 我们的静态双胞胎在哪里
动画也以同样的中风重量来绘制
静态双胞胎是被填平的 没有中风匹配,所以动画
大纲可以读取一点打火机。 浏览可用的
在故事书下 基数 图标 与 动画 打开:图标
编号 anim 带有双胞胎,然后单击一张卡复制正确的导入。 美术
动画来自 清晰动画 (麻省理工学院),
以Lucide(ISC)和部分Feather(MIT)为基础建造的——许可证全文在
THIRD-PARTY-NOTICES.md装有包裹的船.
他们
通过压倒性的 CSS 变量自定义主题 :
:root {
--color-primary-500: #00aeef;
--color-neutral-500: #6b7280;
--color-background-0: #ffffff;
}
发展
先决条件
- 节点.js 20+
- 小时9+
安装
pnpm install
pnpm dev
pnpm storybook
脚本
| 命令 | 说明 |
|---|---|
| 发展 | |
pnpm dev | 启动 Vite Dev 服务器 |
pnpm dev:watch | 重建 dist/ 更改时( 启用后重新装入应用程序) |
pnpm build | 建立用于制作的图书馆 |
pnpm preview | 预览制作建筑 |
| 测试 | |
pnpm test | 运行单元测试 |
pnpm test:watch | 在监视模式下运行测试 |
pnpm test:coverage | 使用覆盖报告进行测试 |
pnpm test:storybook | 运行故事本交互测试 |
pnpm test:e2e | 运行 Playwright E2E 测试 |
pnpm typecheck | 运行类型脚本类型检查 |
| 显示格式( F) | |
pnpm lint | 检查 lint 出错( Biome) |
pnpm lint:fix | 自动修正插入错误 |
pnpm format | 格式代码 |
| 故事书 | |
pnpm storybook | 在端口启动 Storybook dev 服务器 6006 |
pnpm build-storybook | 构建故事书静态网站 |
| 图标 | |
pnpm icons:sync | 从Figma再导入图标并再生成组件,测试,故事 |
pnpm icons:animated | 从清晰动画登记册再导入动画图标并再生 |
| 键盘构建( B) | |
pnpm build:dictionary | 从设计符号生成样式 |
pnpm build:showcase | 构建演示网站 |
pnpm size-limit | 检查捆绑大小 |
| 出版 | |
pnpm publish:dry-run | 构建和干燥 npm 发布 |
活体重装到 pandora/ eden
以物配主,以物配主local.fanvue.com)而不发表:
- 最轻松的: 从 pandora repo 根, 运行
pnpm start:localui。它运行此库的手表自动构建,并在此检出时点出dist/。参见潘多拉的读取器("活再装入")@fanvue/ui”)). 备选案文:pnpm start:dev:localui财务报告和审定财务报表pnpm start:docker:localui拾取匹配的env文件并处理 AWS 认证 . - 手动 : 运行
pnpm dev:watch在这里,开始eden与USE_LOCAL_FANVUE_UI=1(或pnpm --filter @pandora/eden start:localui) (中文(简体) ).
需要重新检查到旁边 pandora (或 FANVUE_UI_PATH 设于潘多拉. 组件标记、尾风课和设计 符号 所有热量重载: 潘多拉的 eden/postcss.config.mjs 重定向 @fanvue/ui/styles/theme.css 导入到此检出 src/styles/theme.css,所以符号编辑显示时没有发布(前)发行.
图片 + 故事集
这个库通过Chromatic Connect与Figma集成. 在故事书中查看完整的文档 :
pnpm storybook
# Navigate to "Documentation > Figma Integration"
提交公约
这个项目使用 常规武器委员会。提交信件通过承诺验证.
# Examples
feat(button): add loading state
fix: resolve focus ring issue
docs: update installation guide
对于被引导的承诺信息,安装 提交 全球:
npm i -g commitizen
然后使用 cz 改为 git commit。 。 。 .
捐款
见 捐款额 准则.
警卫
见 警卫 报告脆弱性.
许可证
Apache 2.0 (英语) Shift控股有限公司