Bloom UI 组件
这个软件包包含了由Bloom经济适用住房系统使用的组件库.
地点/翻译
src/locales 包含 JSON 文件, 包含我们所有软件包中所用的翻译密钥和副本 .
故事书
UIC 用途 故事书 来记录我们的组件, 并审查它是最好的 开始和了解什么是可用的。 你可以看我们出版的故事书 这里。 。 。 .
从根起
yarn start
测试
要运行用 Jest 和 RTL 构建的单元测试套件, 从 root 运行 :
yarn test
或者说
yarn test:coverage
报告当地情况.
要运行我们的无障碍套件 利用故事本,从根运行:
yarn test:a11y
捐款
欢迎向伊斯兰法院联盟提供捐助。 为了帮助我们实现项目在质量和可维持性方面的目标,我们要求所有捐助者阅读、理解并同意我们的指导方针.
问题跟踪
我们的发展任务通过GitHub问题来管理,在绝大多数情况下,发展应该与一个问题挂钩. 请自由提出问题 即使你不打算自己执行 在创建问题前, 请先检查是否已经存在 。 在创建一个问题时,给它一个描述性的标题,并在相关时包括截图. 如果您要开始开发, 请对一个问题发表评论 .
提交、修改和释放
我们正在使用 语义释放 以自动版本和发布。 结合语义释放,我们也在使用 常规承诺,一个承诺消息的规格,帮助语义释放理解每个承诺的改变程度,以便实现我们进程自动化.
在承诺时,两个步骤自动运行:(1) 起伏和(2) 核查常规承诺标准。 如果你还在学习常规承诺标准 我们建议不要运行 git commit 并在全球范围内安装被承诺体npm install -g commitizen,然后承诺 git cz 这将运行一个承诺信息 CLI。 CLI 向您询问了一系列关于您的更改列表的问题, 并以常规的 承诺格式为您构建承诺信息 .
在每次与主机合并时,我们出版的"故事书"都会被更新,一个UIC的新版本会自动被发布到npm.
调取请求
拉出请求向主分会开放. 当打开拉动请求时, 请填写整个拉动请求模板, 包括标记您的 PR 相关的问题, 描述您的 PR, 说明更改的类型, 包括审查者如何测试您的 PR 的细节, 以及测试清单 .
当您的公关准备审查时,请添加 2 reviews needed 给内部团队贴上标签 如果你是第一位审查员,你批准公关,将标签改为 1 review needed,如果您要求更改,请修改为 needs changes一旦公关准备好,第二审查者应更新公关 ready to merge 标签。 如果你做了一个公关 还没有准备好的眼睛, 添加 wip 标签.
公关一经批准,你就应该压平并合并. 我们经常等待作者在有权限的情况下合并自己的PR.
作为公关的审查者,不要只留下评论,而是采取明确的下一步行动. 如果PR需要进一步讨论或修改,请以要求的修改来标注. 如果一个PR看起来对您很好(或者即使有小的更改请求不需要您追加审查),请在它上加注批准并评论最后需要的几个更改. 这有助于其他审查人员更好地了解列表视图中公关状况,并避免额外的不必要的审查周期.
尾风
- 我们正在使用 尾风 框架,在页级标记中,有时在组件中,使用其低级的公用类别。 我们配置设置在
tailwind.config.js。 。 。 .
供应商插件
样式公约
-
我们的组件以SCSS文件与React组件TS文件同时被命名.
-
我们目前正在将组件迁移到第二代型号公约中,该公约依靠CSS变量作为内部设计标志并删除
@apply尾风语. V2风格组件在我们的故事书中注明了: 三相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相. -
Bloom设计标志包含许多风格,包括颜色,打字设置,大小,边框等,并有+.
-
有关这一移徙的更多信息,请参见: V2Styles.md (英语)。 。 。 .
命名公约
- 注意根据内容、演示、位置或主题命名组件,因为这限制了使用
- 避免在ui组件中包含任何以 Bloom 为中心的业务逻辑,这样无论后端执行与否都可以被消耗
通则
- 不要用ID来做样式.
- 不要在地上筑巢.
- 不要解决问题! 使用.
- 不使用过量合格选取器; div.container 可以简单地说为.container.
- 使用弹性来代替浮.
- 使用电网公用统一电网.
无障碍因素
- A11Y测试套房 根据我们的故事 运行在所有的公关
- 查看单个组件时查看 Storybook AXE 面板可能有用
- 键盘访问
- 考虑aria角色,焦点状态
- 考虑颜色对比
- 无障碍表格
- 每个输入的标签
- 无标签输入的屏幕阅读器标签
- 组合字段集
- 所需指标
- 可读数据表
- 图像的替代标签
- 错误和提醒消息