@ flytedan/ flytebot-design- system
Flytedesk设计系统的媒体计划员UI工具包, 移植到一个独立的, 框架-不可知 - 消费者 npm 包:反应 18 + TypeScript 组件, 以及flytedesk应用程序的商务记录包.
安装
pnpm add @flytedan/flytebot-design-system
react 财务报告和审定财务报表 react-dom (^18.3.1)是同伴的依赖关系.
使用量
一次在您的应用程序入口附近导入销售商的 CSS, 然后使用组件 直接 :
import "@flytedan/flytebot-design-system/styles/tokens.css";
import "@flytedan/flytebot-design-system/styles/foundations.css";
import "@flytedan/flytebot-design-system/styles/components.css";
// foundations.css also imports icons.css (the Phosphor icon font every
// component's `<i className="ph ph-*">` needs) — no separate link required.
import { Button, Card, DataTable } from "@flytedan/flytebot-design-system";
function Example() {
return (
<Card>
<Button variant="primary">Save</Button>
</Card>
);
}
设计原则
DESIGN-PRINCIPLES.md 持有用户界面设计和交互规则
Flytedesk的应用软件如下. 包裹里装着,所以一个应用程序读到它
node_modules/@flytedan/flytebot-design-system/DESIGN-PRINCIPLES.md,则
文件网站在《指南》下显示。 在设计或建造屏幕前读取.
包裹里有什么
32个核心组成部分 跨七组动作(按钮、图标按钮、, 分块控制, Popover, 菜单, 菜单按钮), 窗体( 输入, 数字输入, ), 文本区域, 选择, 日期选择器, 时间选择器, 复选框, 收音机, 切换, 滑动器, RangeSlider, FileGrid, Dropzone, Markdown编辑器, 代码编辑器),表面(Card, CardRow, 可折叠, Modal, Drawer),数据(数据表, 事实列表, Pagination, SortMenu, StatTile,, Meter CsiBadge CsiMeter CsiHero Markdown 代码Block 迪夫Block 步行榜, 分块Meter, QuaintRow, Clamp, 相对时间),反馈(Badge, Tag, Avatar,, AvatarStack, Flag, Toast, Tooltip, 空状态, KeyHint),加载(斯克勒通, SkeletonText, ReservedSkeleton, 装入Region, Spinner, 进步列车)和导航(Tabs, (原始内容存档于2018-10-21). SidebarNav, Topbar.
平台组件 用于身份/会议UI-账户Menu, ApiSpec Browser,出道门/FeatureGate/PermissionDenied/PermissionHint, (英语), ProfilePage, ComingSoon, 路线图时间线, 模式Switch/ TestModeBar.
规划组件 用于媒体规划 分发, MixGap 频道贡献 周旋声 预算再分配器 ChannelMeta.
聊天组件 - 查特小组特工,查特Composer,查特会议 巴尔, (原始内容存档于2017-10-21). ChatTranscript, ChatTurn, ChatEngine.
商务记录包 (框架灯光,无UI)——会话Kit(作用,
权限、 特性标记), QueryKit( 页面/ 排序/ 过滤列表状态通过
useServerTable),runtimeKit(地貌-完成/活-vs-测试衍生),
FileKit, MockJobKit (英语:{ jobId } → poll aync 任务模拟, 版本 Kit
(仅附录版本历史商店).
每个导出都有自己的有文件的页面——道具从真实中转出 TypeScript 接口,一个活式交互示例,以及一个用法片段—— in 包含在本repo中的文件站点(尚未作为主机站点发布):
git clone [email protected]:Flytedesk/flytebot-design-system.git
cd flytebot-design-system
pnpm install
pnpm run docs
代码编辑器默认编辑 SQL ; language="json" 添加 JSON 突出显示,括号
匹配和 Enter 上的缩进,在其行并显示解析器的语法错误
栏,并按 validate={(text) => diagnostics} 来电者自己的支票
(例如,诸如: spec.model) (中文(简体) ).
发展
pnpm run build # tsup — emits dist/{index.js,index.cjs,index.d.ts}
pnpm run typecheck # tsc --noEmit
pnpm run lint # eslint .
pnpm run test # vitest run — needs no build
pnpm run test:dist # tsup, then the checks of the built dist/ (scripts/vitest.dist.config.ts)
释放
没有出版CI。 发行是手工的,只从专用版本中运行 部署克隆人——从不通过工作离职单手头公布,这样可以运送 不管建筑师碰巧是 中版.
一次性设置,每台机器一次:
git clone [email protected]:Flytedesk/flytebot-design-system.git C:/Users/newms/deploy/flytebot-design-system
cd C:/Users/newms/deploy/flytebot-design-system
touch .deploy-clone-marker # git-ignored; scripts/release.sh refuses to run without it
然后,每一次释放:
cd C:/Users/newms/deploy/flytebot-design-system
bash scripts/release.sh <new-version> "<summary>"
scripts/release.sh数字 :
- 拒绝在任何地方运行,但载有目录的除外
.deploy-clone-marker· ; - 拒绝一棵肮脏的树
.release.lock所以两跑不能重叠; - 获取
origin检查origin/main准确的提示——永不消失 工作; - 重新执行
scripts/release.sh它刚刚检查出来,移交 锁定,所以以后的每一个步骤(出关,出关,出关)都是释放的承诺 自有脚本,在退票前从没有磁盘上的脚本(bash读出一个) 脚本来自它打开的文件). 第二道通行证上写着RELEASE_REEXEC_SHA它声称HEAD是执行和跳过取出; - 安装为
pnpm install --frozen-lockfile· ; - 运行大门 :
tsup,然后直接离开 检查该建筑 (单位:千美元)vitest run --config scripts/vitest.dist.config.ts,则vitest run, (中文(简体) ),tsc --noEmit, (中文(简体) ),tsc --noEmit -p tsconfig.docs.json,文档vite build, (中文(简体) ), 财务报告和审定财务报表lint如果雷波有那个脚本; - 拒绝
<new-version>除非它比两者都大 退职package.json版本和 npm 目前已发布latest· ; - 凸起
package.json,承诺chore(release): <new-version> — <summary>, (中文(简体) ), 并推进; npm publishes(账户)flytedan,通过现有的~/.npmrc,则 推动标签v<new-version>· ;- 指纹
RESULT: sha=<sha> version=<new-version> status=published打开 成功吗.
scripts/release.test.ts 盖其卫所,
锁定、 缺少/ 变形版本参数) 和重执行( 假
原产地 release.sh 换了新的车身 第二次通过 HEAD
——没有网络,没有真正的出版.
许可证
UNLICENSED——只使用内部飞行台.