# @festicket/react-ui-components 中文文档 规范地址：https://npmcn.com/package/%40festicket/react-ui-components/ 版本：3\.19\.1 npm 元数据更新时间：2023-10-10T10:14:36.668Z 中文译文更新时间：2026-11-14T16:09:09.931Z 软件包许可：未声明 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40festicket/react-ui-components 原文对照：https://npmcn.com/package/%40festicket/react-ui-components/?lang=original 项目主页：https://github.com/festicket/react-ui-components#readme 源码仓库：https://github.com/festicket/react-ui-components ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1 MB，312 个文件 - 模块格式：CommonJS - TypeScript 类型：未声明 - 运行依赖：10 个 - peer 依赖：polished ^1\.9\.2，prop-types \>=15\.5\.8，react \>=15\.5\.4，react-dom \>=15\.4\.2，react-modal ^3\.1\.13 - 首次发布：2018-02-05T14:04:59.925Z - 最新版本发布：2019-10-31T14:06:05.745Z - 近 30 天下载量：1988（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：321（近 12 个月 0 个） ## 中文简介 [![Build Status](https://semaphoreci.com/api/v1/projects/ed4738ad-82c8-4c98-9548-9ee54469ff71/1744679/shields_badge.svg)](https://semaphoreci.com/festicketci/react-ui-components) \[ \[语义-放出\] ([https://img.shields.io/badge/%20%F0%9F%93%A6%F0%9F%9](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9) ## 安装 ```sh npm install @festicket/react-ui-components ``` 也可以使用：`pnpm add @festicket/react-ui-components`、`yarn add @festicket/react-ui-components`、`bun add @festicket/react-ui-components` ## README # Festicket 反应- UI 组件 [![Build Status](https://semaphoreci.com/api/v1/projects/ed4738ad-82c8-4c98-9548-9ee54469ff71/1744679/shields_badge.svg)](https://semaphoreci.com/festicketci/react-ui-components) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) `react-ui-components` 是不属于任何特定 Festicket UI 的可重复使用的组件的集合. 见 `master` 分支 [关于Netlify的故事书Demo](https://react-ui-components.netlify.com/). (此程序会自动使用 GitHub webhook ). 如果您正在创建一个除Festicket以外的任何网站都无用组件,它可能属于 [反应-应用程序组件](https://github.com/festicket/react-app-components) 换句话说. ## 使用量 为了在消耗项目中减少捆绑的大小,通过在 `dist` 文件夹. 例如: ```javascript import PrimaryButton from '@festicket/react-ui-components/dist/components/buttons/PrimaryButton'; ``` 不要以下列方式导入组件,因为这会增加捆绑大小,因为这类进口会导致全部 `react-ui-components` 此时将导入. ```javascript import { PrimaryButton } from '@festicket/react-ui-components'; // Don't do this ``` ### SVGs 组合 反应 SVG 组件可见于 `dist/components/svgs/generated/`。 。 。 . 为了实现一致的样式,只使用这些SVG组件和所提供的选项. 永远不要对他们适用习惯风格. 每个SVG组件的可能选项可见于 [故事书](https://react-ui-components.netlify.com/) 对于这个项目. ## 捐款 ### 预先承诺检查 我们用 [胡斯基](https://github.com/typicode/husky) 财务报告和审定财务报表 [阶段](https://github.com/okonet/lint-staged) 以对准备执行的文件进行预先承诺检查. 这包括: [斯林特语name](https://eslint.org/) 财务报告和审定财务报表 [流动](https://flow.org/) 审定. ### 做出承诺 提交信件使用 [提交](https://github.com/commitizen/cz-cli) 然后用 [委员会](http://marionebl.github.io/commitlint/#/)。 。 。 . 重要的是,所有承诺都采用同样的格式,因为这些承诺随后被理解为: [语义释放](https://github.com/semantic-release/semantic-release) ,用于决定任何新发行的版本编号并发布注释. 我们使用的格式是定制版的(公约)\[[https://www.conventionalcommitts.org/ 互联网档案馆的存檔,存档日期2013-12-02](https://www.conventionalcommits.org/)并使用下列格式: `: ` 类型可以是下列任何一种: | 类型 | 说明 | | --- | --- | | 功绩 | 一个新的功能 | | 修补 | 错误修正 | | 文档 | 仅文档更改 | | 重设 | 既不修正错误也不添加特性的修改 | | 每平方英尺 | 改进业绩的变动 | | 测试 | 添加缺失的测试 | | 杂费 | 构建过程或辅助工具的更改 | | 还原 | 重归承诺 | | 妇女 | 进行中的工作 | 运行时 `git commit` 承诺将取代您的默认文本编辑器运行, 并会向您询问一些问题, 以生成有效的承诺消息 . 注:您可以运行 `git commit --no-edit` 而不是跳过最后一步, 您在承诺中创建的 承诺消息会在文本编辑器中打开 . 最重要的类型是"活"和"固定",它们是唯一会触发发行的,它们被用来决定一个版本号码并生成发行笔记. 你也会有机会用功绩或决心说出你的行为是否是一种突破性的改变。 中断更改是指任何如果升级会使依赖软件包崩溃的更改. A(语义版)的基本格式\[[https://semver.org/ (中文(简体) )](https://semver.org/)号码是少校。 当发布完成时,在决定版本号时,具有最高重要性的承诺优先. 因此,如果发行单由修正组成,则只有补丁版本会被撞出. 如果包含一个特性,则小版本被撞倒,如果任何功绩或固定承诺包括突破性改变,则主版本被撞倒. ### 部署预览 GitHub的每个拉出请求 都把其故事书构建到 [部署预览](https://www.netlify.com/blog/2016/07/20/introducing-deploy-previews-in-netlify/) netlify上的资料 这将在GitHub拉出请求中和Jira票上自动链接. ### 视觉回归检查 我们用 [珀西 佩尔](https://percy.io/) 用于组件的视觉测试. 在分支合并之前 `master`,执行者必须检查 GitHub 上的 PR 对话标签底部的 Percy 链接,并批准当前分支和 `master`。 。 。 . 如果添加了一个新的组件,则总是有可视的diffs,但变化的组件也会给依赖被改变的组件的其他组件造成出乎意料的改变. ### 触发新版本 我们用 [语义释放](https://github.com/semantic-release/semantic-release) 自动发布此工程. 语义释放将触发新的释放 [承诺消息格式](https://github.com/semantic-release/semantic-release#commit-message-format) 它承认. 当分支合并为 `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` 将重建于 [司马发](https://semaphoreci.com/festicketci/react-ui-components)。 。 。 . 如果建造 `master` 在Semaphore上成功,并包含一个释放承诺,在Semaphore上将部署一个服务器,以发布最新版本 [国家预防机制](https://www.npmjs.com/package/@festicket/react-ui-components) 与正确的版本. ### 添加新的 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/ (中文(中国大陆) )](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` (单位:千美元)[文档](https://www.framer.com/api/motion/))用于ui组件中的动画. 在你读完之前 好好看看医生. #### 动画时间 如果可能的话,信任图书馆的内置时间. 他们尝试和测试,允许闪电快速设置动画. 如果设计决定我们真的需要一些定制,请看看 [转换文件](https://www.framer.com/api/motion/types/)。 。 。 . ## 常见问题 ### @festicket/react-ui-components 是什么？ \[ \[语义-放出\] \(https://img\.shields\.io/badge/%20%F0%9F%93%A6%F0%9F%9 ### 如何安装 @festicket/react-ui-components？ 在项目目录运行 npm install @festicket/react-ui-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：polished（^1\.9\.2）、prop-types（\>=15\.5\.8）、react（\>=15\.5\.4）、react-dom（\>=15\.4\.2）、react-modal（^3\.1\.13）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @festicket/react-ui-components 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/festicket\_\_react-ui-components 是否存在。 ### @festicket/react-ui-components 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @festicket/react-ui-components 可以商用吗？ @festicket/react-ui-components 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。 ### @festicket/react-ui-components 的下载量有多少？ 根据 npm 官方下载统计，@festicket/react-ui-components 在 2026/10/15 – 2026/11/13 这 30 天内被下载 1,988 次，日均约 66 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @festicket/react-ui-components 还在维护吗？ 最新版本 3\.19\.1 发布于 2019/10/31（7 年前）；至今共发布 321 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/02/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。