Forma 36 反应组件
目录
安装软件包
yarn add @contentful/f36-components
或者说
npm install @contentful/f36-components
使用量
导入想要的组件到您的工程中
import { Button } from '@contentful/f36-components';
发展
为地方发展,在回波运行的根 pnpm install 以安装所有依赖关系,然后 pnpm build 来构建所有软件包.
这个软件包依赖于其他几个Forma 36软件包,所以您需要构建所有软件包.
故事书
我们用 故事书 为我们的组成部分图书馆创造一个发展环境。 要启动本地运行:
pnpm storybook
在创建新组件时,请在您开始前看一下我们 福尔玛36的捐款模式。 。 。 .
示例组件目录结构
组件目录应类似于以下内容:
/my-component
/examples
/src
index.ts // A file for exporting your component
MyComponent.tsx // Your React component
MyComponent.test.tsx // Component tests
MyComponent.styles.ts // Component styles
/stories
# stories for storybook of each component inside the package
README.mdx
package.json
欲了解更多细节,请查看文档中描述 细节文件夹结构。 。 。 .
如果您使用
pnpm generate在 repo 根中,此结构将自动为您创建
代码样式指南
构成部分原则
我们在创建组成部分时遵循若干原则:
- 一个部件只负责内部间隔
构件只应负责自身的内部间隔,绝不负责外部间隔。 这意味着,我们灵活地使用我们的组件,而不必超过边距. 这个规则唯一的例外是 打印组件 - 他们可以管理自己的利润。 为了处理边距和布局,你可以使用我们的核心组件,例如:
添加组件文件
我们希望确保每个组成部分都包含一个包含建议和指导方针的README文件. 保证您的组件文档包含以下部分:
- 构成部分摘要.
- 导入 - 提供导入组件的实例 .
- 实例 -- -- 尝试增加几个例子,包括基本和较先进的例子,其中组件与其他组件一起使用.
- Props (API 参考) - 属性概览
- 内容指南 - 尝试在最佳做法中描述您组成部分的内容
- 无障碍----如果可能,我们强烈建议提供无障碍准则.
测试
我们正在使用 维特 财务报告和审定财务报表 测试库 测试我们的组件.
测试保存在组件旁边,并使用 .test.js 文件扩展名.
运行测试
pnpm test
建议在开发中进行测试,可选 --watch 旗帜.
pnpm test:watch
大楼
我们正在使用 s 财务报告和审定财务报表 兴建 合并 微捆绑 建造我们的组件库.
每个部分都是靠自己的力量 dist 以 :
index.d.ts— TypeScript 类型声明文件index.js- CJS(共同JS)index.modern.mjs– 说吧 – 现代 输出( 在所有现代浏览器中的工作)index.module.js- 遗留的无害环境管理(ES模块)产出(用于捆绑者)index.umd.js- 遗留UMD(通用模块定义)输出(用于节点和CDN)
创建库的构建
pnpm build
提交
该项目使用 Angular JS 提交信息公约通过语义释放。 见语义释出 默认提交信件格式 详细情况.
您可以通过运行执行更改
pnpm commit