{"_id":"@activity-maker/hi-components","name":"@activity-maker/hi-components","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@activity-maker/hi-components","version":"1.0.0","description":"喜马拉雅公用 React Components","homepage":"http://cft.pages.xmly.work/sunshine/#/components/","repository":{"type":"git","url":"http://gitlab.ximalaya.com/cft/sunshine.git","directory":"packages/hi-components"},"bugs":{"url":"http://gitlab.ximalaya.com/cft/sunshine/issues"},"publishConfig":{"access":"public"},"keywords":[],"author":{"name":"Eleven","email":"master@eleven.net.cn"},"license":"ISC","main":"lib/index.js","module":"es/index.js","typings":"lib/index.d.ts","scripts":{"watch":"cd ../.. && PACKAGE=hi-components father-build --watch","build":"cd ../.. && PACKAGE=hi-components father-build","test":"umi-test -u","test:watch":"umi-test --watchAll","test:coverage":"umi-test --coverage","prepublishOnly":"yarn build","prepare":"cd .. && yarn patch-package"},"dependencies":{"@babel/runtime-corejs3":"^7.13.7","@types/draft-js":"^0.11.4","@activity-maker/hi-utils":"latest","antd-img-crop":"^3.14.2","braft-editor":"^2.3.9","browser-image-compression":"^1.0.14","dayjs":"^1.10.5"},"peerDependencies":{"antd":"^4.16.1","react":"^17.0.1","react-dom":"^17.0.1","styled-components":"^5.2.1"},"devDependencies":{"@types/styled-components":"^5.1.7","postinstall-prepare":"^2.0.0","styled-components":"^5.2.1"},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"gitHead":"af77af097202e2559243f9e9a31abe990a162dd2","_id":"@activity-maker/hi-components@1.0.0","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","_npmUser":{"name":"zhangfan999999","email":"356672247@qq.com"},"dist":{"integrity":"sha512-HBren0EGx2658JUhrQh1NQ1PLEsJzulpwmPVLi2UQNsBxQY/TO42VEeGWaFBKln67QKAkZVVQneQlL/DWel3kA==","shasum":"ccc0260827b476dab41824bf9fb1502ddb0916c7","tarball":"https://registry.npmjs.org/@activity-maker/hi-components/-/hi-components-1.0.0.tgz","fileCount":119,"unpackedSize":313887,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFTp+nyuh8mwIhUd9x1D4k+FLKzNL0nBeYfwnFvFJXnyAiAgxDG+uywPdLtegcaI3HfxUisfi9BCjUmIzlTPDfCo4Q=="}]},"directories":{},"maintainers":[{"name":"zhangfan999999","email":"356672247@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hi-components_1.0.0_1684206871042_0.4572702182956063"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-16T03:14:30.952Z","1.0.0":"2023-05-16T03:14:31.248Z","modified":"2023-05-16T03:14:31.442Z"},"maintainers":[{"name":"zhangfan999999","email":"356672247@qq.com"}],"description":"喜马拉雅公用 React Components","homepage":"http://cft.pages.xmly.work/sunshine/#/components/","keywords":[],"repository":{"type":"git","url":"http://gitlab.ximalaya.com/cft/sunshine.git","directory":"packages/hi-components"},"author":{"name":"Eleven","email":"master@eleven.net.cn"},"bugs":{"url":"http://gitlab.ximalaya.com/cft/sunshine/issues"},"license":"ISC","readme":"# @activity-maker/hi-components\n\n`React` 组件库，非 UI 框架/库，囊括的组件通常包含 UI、交互等复杂逻辑。\n\n> 部分组件不兼容服务端渲染场景，因此，`@activity-maker/hi-components` 不可以在通用营销平台组件开发中使用。\n\n## Documentation\n\nhttp://cft.pages.xmly.work/sunshine/#/components/\n\n## Installation\n\n```bash\nyarn add @activity-maker/hi-components\n# OR\nnpm i @activity-maker/hi-components\n```\n\n使用时需要有以下环境依赖，如果缺少请安装（`install` 阶段也会有 warning 提示）\n\n```json\n\"peerDependencies\": {\n  \"antd\": \"^4.16.1\",\n  \"react\": \"^17.0.1\",\n  \"react-dom\": \"^17.0.1\",\n  \"styled-components\": \"^5.2.1\"\n}\n```\n\n- 需要有 `react`、`react-dom`\n- 部分组件需要 `antd`，参照下方 [AntDesign 依赖](#antdesign-依赖)\n- 部分组件需要 `styled-components`，`styled-components` 要求全局单例，因此不会自动安装它。\n\n## Usage\n\n```ts\n// 导入组件，示例\nimport { LayoutPercent } from '@activity-maker/hi-components';\n\n// 导入样式（所有 components 的样式）\n// 配置按需加载以后，组件的样式会自动按需导入，不必添加此行\nimport '@activity-maker/hi-components/lib/index.css';\n```\n\n## 按需加载\n\n`@activity-maker/hi-components` 的 JS 代码默认支持基于 ES modules 的 tree shaking。\n\n借助 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 插件，即可进一步实现 js 代码 和 css 样式代码全都能按需加载，使用方法如下：\n\n1. 安装\n\n   ```bash\n   yarn add babel-plugin-import -D\n   ```\n\n2. 在 babel 配置的 plugins 中添加配置（建议复制过去使用，手敲容易错漏）\n\n   ```json\n   plugins: [\n     [\n       'babel-plugin-import',\n       {\n         libraryName: '@activity-maker/hi-components',\n         libraryDirectory: 'es',\n         camel2DashComponentName: false,\n         style: true,\n       },\n       '@activity-maker/hi-components'\n     ],\n   ]\n   ```\n\n   **配置注意：**\n\n   1. `camel2DashComponentName` 参数必须为 false。\n   2. `style` 参数必须为 true，不能设置为 css 或其它，\n\n      这里设置为 true 即导入对应组件的 css 样式文件，`@activity-maker/hi-components` 的组件不支持 less 文件或其它样式文件按需导入。\n\n   3. 不要漏掉尾部的 `'@activity-maker/hi-components'`，它是 plugin name，用来确保项目中配置的多个 `babel-plugin-import` 同时生效（如果有的话）。\n\n## AntDesign 依赖\n\n`@activity-maker/hi-components` 部分组件（如：`ImageUpload`、`ProBraftEditor`）依赖了 `antd` 的若干组件（`Upload`、`message`、`Modal` 等）。\n\n如果使用到了相关组件（未使用到则无需关心），需要确保安装 `antd` 并引入 `antd` 样式，推荐：\n\n1. 安装依赖\n\n   ```bash\n   # install antd\n   yarn add antd\n\n   # install babel-plugin-import\n   yarn add babel-plugin-import -D\n   ```\n\n2. 添加 babel 配置\n\n   使用 [babel-plugin-impoprt](https://github.com/ant-design/babel-plugin-import) 自动按需加载 `antd` 样式。\n\n   babel plugin 配置中添加如下代码：\n\n   ```json\n   plugins: [\n     [\n       \"babel-plugin-import\",\n       {\n         \"libraryName\": \"antd\",\n         \"libraryDirectory\": \"es\",\n         \"style\": \"css\"\n       },\n       \"antd\"\n     ]\n   ]\n   ```\n\n完成以上两步，无需额外操作，即可正常使用 `ImageUpload`、`ProBraftEditor` 等组件，会自动按需引入需要的 `antd` 组件和样式。\n\n## Q&A\n\n1. 为什么 `@activity-maker/hi-components` 依赖的 styled-components 不会被自动安装？\n\n   组件库中部分组件的样式使用 `styled-components` 编写，因此，如果你的项目中未使用过 styled-components，请执行 `yarn add styled-components` 安装（仅安装，无需做其它配置）。\n\n   如果项目中已使用 styled-components，无需关心此项。\n\n   为什么组件库不自动安装 styled-components ？因为，styled-components 只能是单实例。请阅读下方相关官方文档，了解更多。\n\n   - [I am a library author. Should I bundle styled-components with my library?](https://styled-components.com/docs/faqs#i-am-a-library-author-should-i-bundle-styledcomponents-with-my-library)\n\n   - [Why am I getting a warning about several instances of module on the page?](https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page)\n","readmeFilename":"README.md"}