polaris-enhance

在开发return项目的时候，意识到有很多组件都是可复用或者说在其他项目有存在过的。于是就想借此契机开发一个供产三内部使用的前端公共组件库，一方面可以减少重复代码过多，另一方面也可以减少开发人员的心智负担，从而提高项目开发效率。

在满足polaris组件所有功能的基础上对组件进行一个加强处理，主要内容包含

• components 北极星增强组件
  • ProTextField 支持rule配置校验规则，使用类似antd校验
  • ProDropZone 简单易用，支持多图上传
  • ProSpinner loading组件
  • ProSticky 固钉组件，类似antd Affix
  • ProTextSelect 文字选择框
• hooks 额外钩子
  • useMediaQuery 媒体查询钩子
  • useVisibleChange 类似小程序onShow
  • useDraft 草稿箱，检查是否发生变化
  • useWatch 类似vue的watch
  • useCallbackWithLoading 异步的useCallback
  • useCommonSkeleton 公共骨架屏
  • useValidate 字段校验（校验时机为字段变更）
  • useMultiValidate 多字段校验（校验时机为字段变更）
  • useContextualSaveBarEnhance 追踪表单的变更，同时封装了saveBarEnhance
• utils 额外方法
  • uploadFilesToOss 多图上传方法
  • Command 简易版命令系统
  • math
    • formatNumberWithCommas 千分位处理同时保留两位小数
    • plus 浮点数相加

node v16.14.0

安装最新版本

npm i polaris-enhance@latest -S

安装指定版本

npm i polaris-enhance@0.0.6 -S

npm版本号用哪个参考这篇文章 常用功能与组件

1. ProTextField
2. ProDropZone
3. formatNumberWithCommas
4. formatThousand
5. useCallbackWithLoading
6. useMediaQuery
7. useVisibleChange
8. useContextualSaveBarEnhance
9. uploadFilesToOss
10. getStorageItem
11. setStorageItem

import { useMediaQuery } from "polaris-enhance";
// 导入样式
import 'polaris-enhance/dist/style.css'
const MyComponent: React.FC = () => {
  const isSmallScreen = useMediaQuery("sm");

  return (
    <div>
      {isSmallScreen ? <p>Small Screen</p> : <p>Not Small Screen</p>}
    </div>
  );
};

访问组件库地址查看组件如何使用 访问hooks使用文档查看hooks如何使用

开发前准备 为了统一编码风格，项目引入了eslint和prettier，如需贡献请先安装编辑器prettier和eslint插件

设计原则

1. 组件开发需保证polaris组件的正常使用
2. 组件使用尽可能保持简单，尽量与优秀的开源组件库如antd等保持一致

css

1. 统一使用BEM命名规范，不允许使用tailwind、module、cssInJS
2. 所有組件的样式统一写在global.sass里边（样式不会太多）
3. 类的命名需组件名（使用短横线命名法）开头。如：pro-sticky--sticky

typescript

1. TS开发可以参考文章《如何正确使用TS》（英文）

git

1. git提交参考Angular提交信息规范

文件目录

• dist npm包的内容
• components 基于Polaris的公共组件
• hooks 公用hooks文件，不与Polaris强关联，后期打包后也可以用于woocommerce
• utils 公共工具，同hooks
• docs hooks文档
• stories 使用storybook编写组件文档

如何发布 代码提交后命令行执行npm run release:auto即可自动打tag，发布

• [x] storybook编写组件文档
• [x] 添加eslint、prettier统一编码风格
• [x] 打包同步更新文档
• [x] 通过gitlab装包
• [x] 发布自动打tag
• [x] 添加changeLog
• [ ] 将hooks文档也同步到storybooks文档中【低优先级】
• [ ] npm 组织建设
• [ ] git流水线提交后自动发包代替手动执行npm run release:auto
• [ ] husky 提交前置校验【低优先级】
• [ ] 单元测试【低优先级】