Festicket 反应- UI 组件
react-ui-components 是不属于任何特定 Festicket UI 的可重复使用的组件的集合.
见 master 分支 关于Netlify的故事书Demo. (此程序会自动使用 GitHub webhook ).
如果您正在创建一个除Festicket以外的任何网站都无用组件,它可能属于 反应-应用程序组件 换句话说.
使用量
为了在消耗项目中减少捆绑的大小,通过在 dist 文件夹.
例如:
import PrimaryButton from '@festicket/react-ui-components/dist/components/buttons/PrimaryButton';
不要以下列方式导入组件,因为这会增加捆绑大小,因为这类进口会导致全部 react-ui-components 此时将导入.
import { PrimaryButton } from '@festicket/react-ui-components'; // Don't do this
SVGs 组合
反应 SVG 组件可见于 dist/components/svgs/generated/。 。 。 .
为了实现一致的样式,只使用这些SVG组件和所提供的选项. 永远不要对他们适用习惯风格. 每个SVG组件的可能选项可见于 故事书 对于这个项目.
捐款
预先承诺检查
我们用 胡斯基 财务报告和审定财务报表 阶段 以对准备执行的文件进行预先承诺检查. 这包括: 斯林特语name 财务报告和审定财务报表 流动 审定.
做出承诺
重要的是,所有承诺都采用同样的格式,因为这些承诺随后被理解为: 语义释放 ,用于决定任何新发行的版本编号并发布注释.
我们使用的格式是定制版的(公约)[https://www.conventionalcommitts.org/ 互联网档案馆的存檔,存档日期2013-12-02并使用下列格式:
<type>: <description>
类型可以是下列任何一种:
| 类型 | 说明 |
|---|---|
| 功绩 | 一个新的功能 |
| 修补 | 错误修正 |
| 文档 | 仅文档更改 |
| 重设 | 既不修正错误也不添加特性的修改 |
| 每平方英尺 | 改进业绩的变动 |
| 测试 | 添加缺失的测试 |
| 杂费 | 构建过程或辅助工具的更改 |
| 还原 | 重归承诺 |
| 妇女 | 进行中的工作 |
运行时 git commit 承诺将取代您的默认文本编辑器运行, 并会向您询问一些问题, 以生成有效的承诺消息 .
注:您可以运行 git commit --no-edit 而不是跳过最后一步, 您在承诺中创建的 承诺消息会在文本编辑器中打开 .
最重要的类型是"活"和"固定",它们是唯一会触发发行的,它们被用来决定一个版本号码并生成发行笔记. 你也会有机会用功绩或决心说出你的行为是否是一种突破性的改变。 中断更改是指任何如果升级会使依赖软件包崩溃的更改.
A(语义版)的基本格式[https://semver.org/ (中文(简体) )号码是少校。 当发布完成时,在决定版本号时,具有最高重要性的承诺优先. 因此,如果发行单由修正组成,则只有补丁版本会被撞出. 如果包含一个特性,则小版本被撞倒,如果任何功绩或固定承诺包括突破性改变,则主版本被撞倒.
部署预览
GitHub的每个拉出请求 都把其故事书构建到 部署预览 netlify上的资料 这将在GitHub拉出请求中和Jira票上自动链接.
视觉回归检查
我们用 珀西 佩尔 用于组件的视觉测试.
在分支合并之前 master,执行者必须检查 GitHub 上的 PR 对话标签底部的 Percy 链接,并批准当前分支和 master。 。 。 .
如果添加了一个新的组件,则总是有可视的diffs,但变化的组件也会给依赖被改变的组件的其他组件造成出乎意料的改变.
触发新版本
我们用 语义释放 自动发布此工程. 语义释放将触发新的释放 承诺消息格式 它承认.
当分支合并为 master,但至少满足下列条件之一:
- 带有类型的承诺消息
fix将触发补丁释放( 1. 0.0 - > 1. 0.1).- 语法
fix: stop component breaking
- 语法
- 带有类型的承诺消息
feat将触发特性释放(1.0.0 - > 1.1.0).- 语法
feat: add Header component
- 语法
- 承诺信息与
BREAKING CHANGE在信件正文中会触发断开放出( 1. 0.0 - > 2. 0) .- 语法
docs: this part is irrelevant for triggering a breaking release
The import part is having BREAKING CHANGE in the body.
新的发布会 没有 仅发生类型 refactor 包含在牵引请求中.
如果一个分支包含会触发多个释放类型的承诺消息,则将应用最"突破"的释放类型.
一个分支合并后 master, (中文(简体) ), master 将重建于 司马发。 。 。 .
如果建造 master 在Semaphore上成功,并包含一个释放承诺,在Semaphore上将部署一个服务器,以发布最新版本 国家预防机制 与正确的版本.
添加新的 SVG
SVG组件在repo中动态生成. 请在尝试在项目中添加新的 SVG 之前阅读以下所有信息 .
重要
- 在生成图像后, 更新变压器. js 文件,以便使用 @festicket/ react-ui-componens 路径的别名导入图像
- 在从设计团队获得新的 SVG 时, 请用 CSS 设置从 Adobe Illustrator 中导出
CSS attributes财务报告和审定财务报表 没有CSS element。有一个错误与svgr编号 :svgo这意味着SVG中的某些颜色在转换后的SVG使用一个时可能会丢失CSS element。 。 。 . - 源 SVG 文件应当指定
height财务报告和审定财务报表width属性在源代码中的 SVG 元素. 如果源SVG没有,您需要手动将其添加到源SVG中. 如果他们没有这个,他们最后会width: 100%iE11. // 数据 http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/ (中文(中国大陆) )
通过在文件夹内放置 SVG 源文件来添加新的 SVG /svgs/。每一种文件夹都会生成变化不一的 SVG —— 以配置的模板为基础 scripts/svgr.sh
运行 npm run svgr 将从源 svg 文件夹中取出全部 SVG /svgs 和使用情况 svgr 从它们中生成反应组件。 这些将放在 src/components/svgs/generated/。 。 。 .
如果您修改了已有的 SVG, 您必须修改源 SVG , 作为文件的更改 src/components/svgs/generated/ 下次将会被覆盖 npm run svgr 运行.
动画
我们用 framer-motion (单位:千美元)文档)用于ui组件中的动画. 在你读完之前 好好看看医生.
动画时间
如果可能的话,信任图书馆的内置时间. 他们尝试和测试,允许闪电快速设置动画. 如果设计决定我们真的需要一些定制,请看看 转换文件。 。 。 .