mcashier-components

用于 POS 项目的 Web 移动端基础 React UI 组件。

使用

安装依赖

npm i mcashier-components -S

在项目中导入

import { Button } from 'mcashier-components';
 
<Button/>

按需引入

采用以上导入方式会把所以组件打包进你的代码中，需要给你的 Webpack 配置加一个 Loader，相关配置如下：

const path = require('path');
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['ui-component-loader?lib=mcashier-components&style=index.css', 'ts-loader'],
        include: path.resolve(__dirname,'node_modules/mcashier-components')
      },
    ]
  },
};

这样配置你的 Webpack 后，当你只引入了 Button 组件时就只会打包进 Button 组件相关的代码。 Loader 的详细使用和原理见项目文档 ui-component-loader。

开发

技术堆栈

• 开发语言：TypeScript
• 样式语言：SCSS
• 测试框架：Jest
• 文档生成：react-styleguidist
• 构建：Webpack
• 代码校验：Stylelint + tslint

开发流程

1. 通过 npm run dev 命令启动开发模式
2. 修改或新增 React 组件代码，开发完后提交代码

如果你是新增组件，你可以直接通过 npm run new ComponentName 去新建一个叫做 ComponentName 的组件。

构建和代码校验 CI 会自动执行，你需要关注的只有2个命令就是 npm run dev 和 npm run new。

所有的 Npm Script 列表含义如下：

• dev：启动开发模式
• new：快速新增组件
• build：构建出需要发布出去的资源，包括项目文档和 Npm 包
• test：运行单元测试
• lint:scss：检查 SCSS 代码风格
• lint:ts：检查 TypeScript 代码风格
• lint：检查所有代码风格

目录结构

|-- components @ 所有组件都放到这里面
|   |-- Button @ 一个组件的代码都放到一个目录里，目录名称采用驼峰
|   |   |-- __tests__ @ 单元测试
|   |   |   |-- __snapshots__ @ 生成的快照文件
|   |   |   |   `-- props.test.tsx.snap
|   |   |   `-- props.test.tsx @ 一个单元测试文件，单测文件必须以 test.tsx 结尾
|   |   |-- index.scss @ 组件的样式
|   |   |-- index.tsx @ 组件的入口
|   |   |-- props.tsx @ 组件的属性接口定义
|   |   `-- readme.md @ 组件的文档
|   |-- common @ 所有组件都用的上的代码
|   |   |-- reset.scss @ 全局样式重置于class
|   |   |-- util.tsx @ 工具函数
|   |   `-- var.scss @ 全局样式变量
|   `-- index.ts @ 导出所有组件
|-- es @ 构建出的ES6版的Npm包目录
|-- lib @ 构建出的ES5版的Npm包目录
|-- styleguide @ 构建出的组件文档网站资源目录

组件规范

组件目录规范

components/Button
|-- __tests__
|   `-- props.test.tsx @ 一个单元测试文件，单测文件必须以 test.tsx 结尾
|-- index.scss @ 组件的样式
|-- index.tsx @ 组件的入口
|-- props.tsx @ 组件的属性接口定义
`-- readme.md @ 组件的文档

组件的属性接口定义代码规范

组件的属性接口定义代码在props.tsx 文件中，要符合以下规范：

import {ButtonHTMLAttributes} from 'react';
 
// @ 要导出组件的 Props 接口，这会用于生成组件的文档，属性的注释会出现在文档中
export interface IButtonProps extends ButtonHTMLAttributes<any> {
  /**
   * 按钮大小
   */
  size?: 'small' | 'large';
}

组件实现代码规范

组件的实现入口在 index.tsx 中，要符合以下规范：

import {Component} from 'react';
import {IButtonProps} from './props';
// @ 要记得导入全局重置样式
import '../common/reset.scss';
import './index.scss';
 
/**
 * @ 这里写组件的名称和介绍，这会用于生成组件的文档
 * **按钮**-点击后会触发一个操作。 
 */
export class Button extends Component<IButtonProps, any> {
 
}
 
// @ 最后要记得导出组件
export default Button;

在 TypeScript 代码的注释中，都支持 Markdown 语法，用于控制生成对应文档的样式。

组件文档规范

组件的实现入口在 readme.md 中，要符合以下规范：

### 不同类型
#### 默认
```js
<Button>我是按钮点击我</Button>
```    

#### primary
```js
<Button type='primary'>我是按钮点击我</Button>
```

#### ghost
```js
<Button type='ghost'>我是按钮点击我</Button>
```

文档中要罗列出组件的所有使用场景，要归类，且加上文字说明。 文档中的组件代码，例如 <Button>我是按钮点击我</Button> 会在文档中生成对应可操作的组件实例。

SCSS 代码规范

组件的样式入口在 index.scss 中，要符合以下规范：

// @ 记得变量，并且尽量使用全局变量 
@import "../common/var";
 
// @ 所有组件都采用一样的前缀 mc- 
.mc-button {
  color: $tintColor;
 
  // @ 子属性用 _ 连接，子元素用 - 连接 
  &_small {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
 
  &_large {
    padding: 0.8rem;
    font-size: 1.3rem;
  }
}