@ Coorpacademy/ 组件

这个库为网络应用程序提供可修饰的组件,或者:

• 作为通用JS组件
• 作为简化的库

目标

• 编辑一个组件一次, 分享到所有平台
• 提供参考每个组成部分的文件及其
  • 可用状态( 残疾, 选定)
  • 可剥取属性
• 提供最小的 lib

发展

在故事书上看到组件

yarn
npm run start
# OR
npm run start:ie # for Internet Explorer

然后打开 http://localhost:3004。 。 。 .

分析您的组件

这个 props 您的应用程序必须填写合同才能使用组件. 如果 props 没有适当的设定, 改变它们不是你的角色 以某种方式实现. 这个 propTypes 代表本合同.

铭记这一工作流程:

props -> propTypes -> fixtures -> component

那你的应用程序就只能读了 propTypes 想知道哪个 props 以发表意见.

添加组件

• 根据组件选择您的原子文件夹 : template, (中文(简体) ), organism, (中文(简体) ), molecule, (中文(简体) ), atom
• 添加包含您组件名的文件夹:例如,用于 button 你应该有这棵树:

atom
  └── button
        ├── index.js
        ├── style.css
        └── test
            └── fixtures
               └── default.js
               └── disabled.js
               └── hovered.js

• index.js 包含反应代码 + jsx,并导出您的组件
• style.css 包含您组件的 css 模块样式
• test/fixtures/*.js 是代表您组件所有可能状态的文件,因此导出道具

注意,每当您添加新组件或新固定件时,您必须生成故事本索引 :

npm run generate

当运行时也会自动启动 npm start

添加一个地块

• 您需要在 en/ global.json 文件中添加您的语言
• 一定要这样 translate: Provider.childContextTypes.translate 对象

示例:

  ....

  const YourComponent = (props, context) => {
    const {translate} = context;

    return <p>{translate('your new locale')}</p>
  }

  YourComponent.contextTypes = {
    translate: Provider.childContextTypes.translate
};

  ...

使用 Lottie 动画

要使用LottieWrapper Atom动画,需要使用LottieWrapper Atom.

在洛蒂·阿通的道具中有两个 重要事项 道具:动画Src & ie11 ImageBackup, 需要额外的步骤, ie11 ImageBackup是需要的,因为它的名字意味着 ie11 不 支持Lottie(更具体地说是Web组件由于Shadow DOM).

首先,您必须向 AWS S3 上传任何新的动画,在静态桶(取决于想要的嵌入)之一,例如: https://static-staging.coorpacademy.com/animations/review/。 。 。 .

此动画必须配对后置图像(svg),用于ie11情景.

然后,使用urls作为动画Src & ie11ImageBackup的道具,例如:

const props = {
    'aria-label': 'aria lottie',
    'data-name': 'default-lottie',
    className: undefined,
    animationSrc: 'https://static-staging.coorpacademy.com/animations/review/rank.json',
    loop: true,
    height: 200,
    width: 200,
    ie11ImageBackup:
      'https://static-staging.coorpacademy.com/animations/review/rank_icon_congrats.svg',
    // autoplay: true // autoplay is true by default
}

如果您需要控制动画( 播放/ 暂停/ 停止) , 那么您必须设置自动播放到虚假( S) 增加您想要的状态, 在现有的状态中: play, pause, stop, loading

const props = {
    'aria-label': 'aria lottie',
    'data-name': 'default-lottie',
    className: undefined,
    animationSrc: 'https://static-staging.coorpacademy.com/animations/review/rank.json',
    loop: true,
    height: 200,
    width: 200,
    ie11ImageBackup:
      'https://static-staging.coorpacademy.com/animations/review/rank_icon_congrats.svg',
    autoplay: false,
    animationControl: 'loading' // play can be passed directly without using loading first
}

补充资料

道具包括类名QQ大小控制来处理额外的造型.

外部项目的地方用途

链接您的依赖性 :

[@coorpacademy-components] > npm link
[your-app] > npm link @coorpacademy/components

构建修改 :

[@coorpacademy-components] > npm run build:es

用于移动应用程序

运行 npm run build:watch 更多信息请参看 移动文档

您可能需要根据您使用的本地组件安装这些可选的 lib :

• colorjs.io
• react-native-modal
• react-native-render-html
• react-native-linear-gradient
• @coorpacademy/react-native-slider
• @react-native-community/blur

用色谱进行视觉测试

我们用 色谱 用于视觉回归测试。 这有助于捕捉UI变化,确保各组成部分的一致性.

设置

1. 复制实例环境文件 :

   cp .env.example .env
   

2. 将您的 Chromatic 项目符号添加到 .env 文件 :

   CHROMATIC_PROJECT_TOKEN=your_token_here
   

3. 运行色谱 :

   npm run chromatic
   

这将构建你的故事本,并上传到Chromatic进行视觉测试.

解决问题

尝试启动故事本时出错 :

尝试删除您的 node_modules,转到项目的根并启动: yarn

生成 Bundle 分析器报告

为了检查捆绑的内容 并优化它,如果需要,我们设置 webpack-bundle-analyzer,生成一个捆绑的分析报告。 以可交互放大的树图可视化 Webpack 输出文件的大小 . 要产生它,只是运行 npm run build:stats。 。 。 .