@activity-maker/hi-components

React 组件库，非 UI 框架/库，囊括的组件通常包含 UI、交互等复杂逻辑。

部分组件不兼容服务端渲染场景，因此，@activity-maker/hi-components 不可以在通用营销平台组件开发中使用。

Documentation

http://cft.pages.xmly.work/sunshine/#/components/

Installation

yarn add @activity-maker/hi-components
# OR
npm i @activity-maker/hi-components

使用时需要有以下环境依赖，如果缺少请安装（install 阶段也会有 warning 提示）

"peerDependencies": {
  "antd": "^4.16.1",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "styled-components": "^5.2.1"
}

• 需要有 react、react-dom
• 部分组件需要 antd，参照下方 AntDesign 依赖
• 部分组件需要 styled-components，styled-components 要求全局单例，因此不会自动安装它。

Usage

// 导入组件，示例
import { LayoutPercent } from '@activity-maker/hi-components';

// 导入样式（所有 components 的样式）
// 配置按需加载以后，组件的样式会自动按需导入，不必添加此行
import '@activity-maker/hi-components/lib/index.css';

按需加载

@activity-maker/hi-components 的 JS 代码默认支持基于 ES modules 的 tree shaking。

借助 babel-plugin-import 插件，即可进一步实现 js 代码 和 css 样式代码全都能按需加载，使用方法如下：

1. 安装

   yarn add babel-plugin-import -D

2. 在 babel 配置的 plugins 中添加配置（建议复制过去使用，手敲容易错漏）

   plugins: [
     [
       'babel-plugin-import',
       {
         libraryName: '@activity-maker/hi-components',
         libraryDirectory: 'es',
         camel2DashComponentName: false,
         style: true,
       },
       '@activity-maker/hi-components'
     ],
   ]

   配置注意：

   1. camel2DashComponentName 参数必须为 false。

   2. style 参数必须为 true，不能设置为 css 或其它，

      这里设置为 true 即导入对应组件的 css 样式文件，@activity-maker/hi-components 的组件不支持 less 文件或其它样式文件按需导入。

   3. 不要漏掉尾部的 '@activity-maker/hi-components'，它是 plugin name，用来确保项目中配置的多个 babel-plugin-import 同时生效（如果有的话）。

AntDesign 依赖

@activity-maker/hi-components 部分组件（如：ImageUpload、ProBraftEditor）依赖了 antd 的若干组件（Upload、message、Modal 等）。

如果使用到了相关组件（未使用到则无需关心），需要确保安装 antd 并引入 antd 样式，推荐：

1. 安装依赖

   # install antd
   yarn add antd
   
   # install babel-plugin-import
   yarn add babel-plugin-import -D

2. 添加 babel 配置

   使用 babel-plugin-impoprt 自动按需加载 antd 样式。

   babel plugin 配置中添加如下代码：

   plugins: [
     [
       "babel-plugin-import",
       {
         "libraryName": "antd",
         "libraryDirectory": "es",
         "style": "css"
       },
       "antd"
     ]
   ]

完成以上两步，无需额外操作，即可正常使用 ImageUpload、ProBraftEditor 等组件，会自动按需引入需要的 antd 组件和样式。

Q&A

1. 为什么 @activity-maker/hi-components 依赖的 styled-components 不会被自动安装？

   组件库中部分组件的样式使用 styled-components 编写，因此，如果你的项目中未使用过 styled-components，请执行 yarn add styled-components 安装（仅安装，无需做其它配置）。

   如果项目中已使用 styled-components，无需关心此项。

   为什么组件库不自动安装 styled-components ？因为，styled-components 只能是单实例。请阅读下方相关官方文档，了解更多。

   • I am a library author. Should I bundle styled-components with my library?

   • Why am I getting a warning about several instances of module on the page?