1个货币组件
此寄存器包含源 @1money/component-ui,用于1Money前端项目的React组件库.
它将可再使用的UI组件与1Money SCSS设计系统,用于本地开发的Sorybook,以及用于发行的双相通用JS/ES模块相融合.
现场故事本
浏览已公布的组件文档和交互式示例:
https://1money-co.github.io/1money-组件-ui/** 联合国
网站建于 main 分支(pnpm build:demo),并在每次推力时被部署到GitHub Pages. 对于其他分支的未发行作品,在当地使用 pnpm dev。 。 。 .
释放
包括一个新的稳定 package.json 以 PR 为版本 main。 。 。 . PR 发布
版本 合并前检查版本; 自动标记 创建匹配
合并后附加说明的标签和 GitHub 释放 。 标记开始现有的 国家预防机制
中心 工作流程。 仅凭仓库工具和文件就不需要
发布;已发布 MCP 服务器更改 .
见 自动释放标签 用于所需的 GitHub App
设置,人工预放,干燥运行,并恢复. pnpm release 编制
npm的出版通过 GitHub Actions 运行.
特征
- React and TypeScript 组件库
- 为 1Money 产品重新使用的 UI 构件
- SCSS 设计系统
src/styles/ - 端口上的故事书开发服务器
6205 - 双相构建输出到
lib/财务报告和审定财务报表es/
安装
需要反应 19 (react 财务报告和审定财务报表 react-dom >=19.0.0) (中文(简体) ). 组件 ref
作为常规道具和使用 useId,因此反应 18 及更早不支持.
安装软件包和所需的 React 依赖 :
pnpm add @1money/component-ui react react-dom primereact primeicons
然后在您的应用条目中导入库样式表 :
import '@1money/component-ui/index.css';
快速启动
从根包条目中可以获取命名的进口:
import {
Button,
Checkbox,
CheckboxGroup,
Grid,
Icons,
notification,
Tag,
Tooltip,
} from '@1money/component-ui';
import '@1money/component-ui/index.css';
export function Example() {
return (
<>
<Grid gutter={[16, 16]}>
<Grid.Col span={12} md={6}>
<Button color="primary">Continue</Button>
</Grid.Col>
<Grid.Col span={12} md={6}>
<Checkbox label="Accept terms" />
</Grid.Col>
<Grid.Col span={12} md={6}>
<CheckboxGroup
options={['Email', 'SMS']}
defaultValue={['Email']}
/>
</Grid.Col>
</Grid>
<Tag label="Active" color="success" />
<button id="help-trigger" type="button">
<Icons name="info" />
</button>
<Tooltip anchorSelect="#help-trigger" body="More details" />
{/*
notification is a static API. Call it from event handlers,
effects, or other client-side actions.
*/}
<Button
onClick={() =>
notification.success({
title: 'Saved',
body: 'Settings were updated.',
})
}
>
Show notification
</Button>
</>
);
}
树能震动的亚路径进口也得到支持:
import { Button } from '@1money/component-ui/Button';
import { Spinner } from '@1money/component-ui/Spinner';
此仓库中的组件
当前源树包括这些组件模块:
AccordionAlertButtonCalendarCarouselCellCheckbox(+ 数)CheckboxGroup(中文(简体) )CoachMarkCopy(+ 数)Clipboard(中文(简体) )DialogDividerDrawerDropdownEmptyFlexGrid(+ 数)Row, (中文(简体) ),Col(中文(简体) )Icons(+ 数)IconWrapper, (中文(简体) ),IconHover(中文(简体) )InputLinkNavigation(+ 数)Nav, (中文(简体) ),NavigationStepper(中文(简体) )notification(静态通知 API)PaginationPopconfirmPortalProFormProgressRadio(+ 数)RadioGroup(中文(简体) )ResizeObserverSegmentSelectSkeletonSliderSpaceSpinnerStepSwitchTable(+ 数)VirtualTable(中文(简体) )TabsTagTooltipTourTriggerTypographyUpload(+ 数)UploadFileBar(中文(简体) )VirtualList
包表定义了顶级组件模块的子路径导出. 分类出口,例如 Row, (中文(简体) ), Col, (中文(简体) ), Nav,以及 VirtualTable 从母模块子路径导入.
样式
消费者应进口 @1money/component-ui/index.css。 。 。 .
当在此寄存器内构建或更新组件时, SCSS 文件应当导入内部样式 API:
@use '@/styles/api' as theme;
样式系统采用分层分界线模式:
theme/= 设计领域 APIsystem/=:sx引擎recipes/= 图书馆食谱助手public/= 出口的消费者表面src/styles/_api.scss
组件 SCSS 不应导入 system/* 或者说 tokens/* 直接说. theme/functions 仅供珍贵的图书馆阅读器访问,例如 om-line-height(...) 或者说 om-line-height-px(...)。设计符号和公用系统记录如下: src/styles/README.md。 。 。 .
发展
安装依赖性 :
pnpm install
本地开始故事本 :
pnpm dev
故事书运行于 http://localhost:6205。 。 。 .
有用命令 :
pnpm test
pnpm lint
pnpm build
pnpm new
pnpm new Button -f
构建输出生成于 :
lib/常规JSes/用于ES模块
特性变化所需的 i18n
每个新特性或增强必须在同一公关中交付其i18n. 覆盖所有库拥有的拷贝,包括校验,空入/装入状态,工具提示,以及无障碍标签. 地物旗帜和灰色放出并不能免除这一要求.
- 维护本地地址合同
src/locale/interface.ts和所有辅助包的翻译:src/locale/en_US/, (中文(简体) ),src/locale/zh_CN/, (中文(简体) ),src/locale/pt_BR/,以及src/locale/es_ES/。保持所需的密钥和占位符对齐. - 使用现有的
ConfigProvider用于默认和格式化的 locale API; 保存调用器 prop 覆盖, 英语回落和运行时语言更改 . - 为i18n审查每个已更改文件,验证"故事本"中所有三种语言,并在PR中包含检查结果. 在没有用户生成副本或对本地环境敏感的行为时,解释一个N/A索赔。 缺少翻译块特性完成并合并 .
见 捐助方规则 财务报告和审定财务报表 配置用法 详细情况.
项目结构
src/
├── components/ # Component source
├── styles/ # SCSS public/theme/system/recipes/internal layers
└── index.ts # Root library exports
发布注释
- 软件包名称 :
@1money/component-ui - 仓库 :
https://github.com/1Money-Co/1money-components-ui - 许可证 :
MIT