Forma 36 反应组件
这是Forma 36的第3个版本,它不是当前版本的软件包. 从2022年7月12日起,它将不再得到支持. 请安装当前, 支持 版本 4 图书馆
用于 福马 36 设计系统 内容 和动力 故事书。 。 。 . 您可以随图书馆的最新变化访问故事书网站 这里
目录
安装软件包
yarn add @contentful/forma-36-react-components
或者说
npm install @contentful/forma-36-react-components
使用量
导入想要的组件到您的工程中
import { Input } from '@contentful/forma-36-react-components';
对于α阶段的组件,请检查其中的指令 阿尔法组件
导入样式
import '@contentful/forma-36-react-components/dist/styles.css';
发展
为地方发展,在回波运行的根 yarn 以安装所有依赖关系,然后 yarn build 来构建所有软件包.
这个软件包依赖于其他几个Forma 36软件包,所以您需要构建所有软件包.
故事书
我们用 故事书 为我们的组成部分图书馆创造一个发展环境。 要启动本地运行:
yarn storybook
要开始研究你的故事书中的组件,你需要为他们创作故事.
看那边 src/components 任意目录 .stories.js 文档。 故事书将自动包含带有 .stories.js 文件扩展名.
故事书配置于 scripts/.storybook/main.js。 。 。 .
示例组件目录结构
组件目录应类似于以下内容:
YourComponent
├── index.js // A file for exporting your component
├── YourComponent.js // Your React component
├── YourComponent.css // Component styles
├── YourComponent.stories.js // Storybook for the component
└── YourComponent.test.js. // Component tests
如果您使用
yarn generate在 repo 根中,此结构将自动为您创建
样式
我们正在使用 postcs- preset-env (中文(简体) ) 用来设计我们的部件 使用 postcs- preset-env 允许我们使用最新的 CSS 语法而无需等待浏览器支持. tools/postcss.config.js 用于添加插件和配置.
构成部分原则
我们在创建组成部分时遵循若干原则:
- 一个部件只负责内部间隔
我们遵循的原则是,一个组成部分应只负责自己的内部间隔,绝不是外部间隔。 这意味着,我们灵活地使用我们的组件,而不必超过边距.
- 使用描述性propTypes
我们建议为PropTypes制定下列命名公约,以便尽可能明确:
- 数字 - 使用前缀或后缀来暗示道克接受一个数字. 举个例子.
numItems, (中文(简体) ),itemCount, (中文(简体) ),itemIndex - Boolean - 使用前缀"is"/"can"/"has" 。 举个例子.
isVisible, (中文(简体) ),canExpand, (中文(简体) ),hasImage - 阵列 - 使用复数名词. 举个例子.
items - 对象 - 使用名词. 举个例子.
item - 节点 - 使用后缀"节点". 举个例子.
containerNode - 元素 - 使用后缀"元素". 举个例子.
triggerElement - 事件处理器函数 - 使用前缀"on". 举个例子.
onOpen, (中文(简体) ),onClick
添加组件文件
我们希望确保每个组成部分都包含一个包含建议和指导方针的README文件。 使用 yarn add-readme 它将为您指定组件生成一个模板README文件。 遵循CLI的步骤来创建新的README.
保证您的组件文档包含以下部分:
- 构成部分摘要.
- 变相/类型 - 尝试提供组件变体的概况.
- 使用示例 - 尝试添加几个示例,包括导入
- 内容建议 -- -- 关于信息或标题等组成部分所用内容的最佳做法的说明
- 最佳做法 -- -- 尝试在几个要点中描述何时使用该部分
- 无障碍----如果可能,我们强烈建议提供无障碍准则.
测试
我们正在使用 欢乐 财务报告和审定财务报表 测试库 测试我们的组件.
测试保存在组件旁边,并使用 .test.js 文件扩展名.
运行测试
yarn test
建议在开发中进行测试,可选 --watch 旗帜.
yarn test --watch
大楼
我们正在使用一个组合 网络软件包 财务报告和审定财务报表 宝贝 创建我们的组件库。 我们使用 Webpack 与 tools/webpack.production.config.js 配置以构建一个样式表,其中包含所有用于我们组件的 CSS , 使用 extractTextPlugin 。 Babel用于将我们的React组件转换为CommonJS模块. Babel 和 Webpack 都输出到 dist 目录.
创建库的构建
yarn build
提交
该项目使用 Angular JS 提交信息公约通过语义释放。 见语义释出 默认提交信件格式 详细情况.
您可以通过运行执行更改
yarn commit
阿尔法组件
我们提供了一些不支持的α元件,并且会不经警告而发生断裂变化. 简而言之 - 冒着风险使用α组件.
Alpha组件在主组件库捆绑外提供,可用如下:
import { MyAlphaComponent } from '@contentful/forma-36-react-components/dist/alpha';