Fish Design

Introduction

Fish Design is an enterprise-class UI component library which based on React, helps designers and developers quickly build systems.

Features

Babel with ES6
Hot reloading
Testing
Linting
Working example app
Server side rendering

Browsers Support

Modern browsers and Internet Explorer 11+

IE / Edge	Firefox	Chrome	Safari	Opera	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Initial Machine Setup

Install Node.js

（Optional）Install taobao NPM image

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

Install

npm install ppfish --save

Usage

Browser

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'ppfish';

ReactDOM.render(
  <Button type="primary">Primary</Button>, document.getElementById('app')
);

Node.js SSR

const { renderToString } = require('react-dom/server');
const Button = require('ppfish/node/components/Button');
const http = require('http');

http.createServer((req, res) => {
    if (req.url === '/') {
        res.writeHead(200, {
            'Content-Type': 'text/html'
        });
        const html = renderToString(<Button type="primary">Primary</Button>);
        res.end(html);
    }
}).listen(8080);

Development

Install npm(or cnpm) package

$ npm install

Start development in your default browser

$ npm start

Open your browser and visit http://127.0.0.1:5000

Build

Build scripts and css etc.

$ npm run build

Build site

$ npm run build:site

The directory structure

.
├── /coverage/                        # 运行npm run test:cover输出的测试覆盖率文件
├── /dist/                            # 构建输出的文件，使用全局变量方式引用，可用于发布到CDN
├── /docs                             # 文档
├── /es/                              # 构建输出的文件，使用ES Module规范引用，可用于tree shaking优化
├── /lib/                             # 构建输出的文件，使用commonjs规范引用
├── /node/                            # 构建输出的文件，适合node环境运行
├── /node_modules/                    # 第三方类库和工具
├── /site/                            # 页面入口文件
| ├── /assets                         # css、images等资源
| ├── /componentsPage                 # 组件库官网页面
| ├── /docs                           # 组件库官网文档
| ├── /locales                        # 组件库官网本地化文案
| ├── /pages                          # 组件库官网页面入口
| ├── /static                         # 组件库官网Demo使用的icon
| ├── /styles                         # 组件库官网页面样式
| ├── /index.html                     # 组件库官网html模板
| └── /index.js                       # 组件库官网入口文件
├── /source/                          # 应用源码
│ ├── /assets/                        # 可编译静态资源文件
│ ├── /components/                    # React components
│ ├── /typings /                      # 常量配置文件
│ └── /utils/                         # 工具函数
├── /tools/                           # 项目运行脚本
├── .babelrc                          # 
├── .editorconfig                     # 
├── .eslintignore                     # 
├── .eslintrc                         # 
├── .gitignore                        # 
├── .npmignore                        # 
├── .stylelintignore                  # 
├── .stylelintrc                      # 
├── .travis.yml                       # 
├── jets.config.js                    # 
├── package.json                      # 
├── postcss.config.js                 # 
├── README.md                         # 
├── tsconfig.json                     # 
├── webpack.config.dev.site.js        # 文档网站本地开发编译配置
├── webpack.config.prod.components.js # 组件源码生产环境编译配置
└── webpack.config.prod.site.js       # 文档网站生产环境编译配置

bushuai/ppfish-components