Code Monkey home page Code Monkey logo

art-ui's Introduction

Art Design

Art 严格遵循 Ant Design 开发原则。

为了保证代码及组件质量,减少沟通成本,在任何形式的参与前,请先阅读以下内容:

脚手架功能

  • 支持umd cjs es 模块引入
  • 支持ts,导出类型声明
  • 支持storybook文档
  • 支持commit规范检测
  • 支持预提交检查代码规范eslint stylelint
  • 支持autoprefixer
  • 支持单元测试
  • 支持自动化构建、自动生成ChangeLog
  • 支持主题色自定义
  • 支持按需加载

技术栈

技术栈严格要求以下形式,注意切不可用React Class来书写组件

  • 🌈React-Hooks
  • 🛡Typescript
  • 🎨Less
  • 📦Jest

设计稿

art组件设计稿

工作流

多人协作采用git -flow工作流

提交规范

yarn run gc
  • feat:新功能(feature)`
  • fix:修补bug
  • docs:文档(documentation)
  • style: 格式(不影响代码运行的变动)
  • refactor:重构(即不是新增功能,也不是修改bug的代码变动)
  • test:增加测试
  • chore:构建过程或辅助工具的变动

dev

在本地开发时,查看文档

$ yarn run docs

显示自己的组件demo,执行以下命令,再手动引入即可

yarn run dev

Test

每个功能至少要包含一个测试用例

编写完测试用例后,使用以下命令进行测试,确保测试质量:

$ yarn run test

查看测试覆盖率

$ yarn run coverage

Doc

文档系统采用 storybook 进行开发,大体分为两部分,docdemo,文档编写完成后,可通过以下命令快速预览:

$ yarn run docs

API文档

组件声明Props注释每个类型,react-docgen-typescript-loader插件会自动读取

interface BaseButtonProps {
  className?: string
  /** 设置 Button 的禁用 */
  disabled?: boolean
  /** 设置 Button 的尺寸 */
  size?: ButtonSize
  /** 设置 Button 的类型 */
  btnType?: ButtonType
  children: React.ReactNode
  href?: string
}

初始默认值

通过类的defaultProps属性初始化默认值

Button.defaultProps = {
  disabled: false,
  btnType: 'default',
}

关于自动化部署

自动化部署使用 travis

自动化部署监听 master 分支, 当 master 分支 commit 后执行构建脚本

标准发布流程

  • 版本更新
  • 生成 CHANGELOG
  • 推送至 git 仓库
  • 组件库打包
  • 发布至 yarn
  • 打 tag 并推送至 git

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.