Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nsfi/ppfish-components
Fish Design: 面向B端设计的企业级UI组件库
https://github.com/nsfi/ppfish-components
css ppfish-components react ui-design ui-kit
Last synced: about 4 hours ago
JSON representation
Fish Design: 面向B端设计的企业级UI组件库
- Host: GitHub
- URL: https://github.com/nsfi/ppfish-components
- Owner: NSFI
- License: mit
- Created: 2018-02-28T02:15:01.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-21T01:58:10.000Z (3 months ago)
- Last Synced: 2024-11-12T21:39:35.391Z (7 days ago)
- Topics: css, ppfish-components, react, ui-design, ui-kit
- Language: TypeScript
- Homepage: https://nsfi.github.io/ppfish-components/
- Size: 115 MB
- Stars: 272
- Watchers: 13
- Forks: 49
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: docs/Contributing.md
- License: LICENSE
Awesome Lists containing this project
README
Fish Design
[](https://www.travis-ci.org/NSFI/ppfish-components)  [](https://www.npmjs.com/package/ppfish) [](https://www.npmjs.com/package/ppfish) [](https://app.fossa.io/projects/git%2Bgithub.com%2FNSFI%2Fppfish-components?ref=badge_shield)
## 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+
| [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](http://godban.github.io/browsers-support-badges/)Electron |
| --- | --- | --- | --- | --- | --- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## Initial Machine Setup
- Install [Node.js](https://nodejs.org/en/)
- （Optional）Install taobao NPM image
```bash
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
```
## Install
```bash
npm install ppfish --save
```
## Usage
Browser
```js
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'ppfish';
ReactDOM.render(Primary, document.getElementById('app'));
```
## Development
Install npm(or cnpm) package
```
$ npm install
```
Start development in your default browser
```
$ npm run dev
```
Open your browser and visit http://127.0.0.1:5000
## Build
Build scripts and css etc.
```
$ npm run build
```
Build site
```
$ npm run docs:build
```
## Links
- [ant-design](http://ant.design/)
- [react](https://github.com/facebook/react)
- [WebPack](http://webpack.github.io/docs/)
- [Less](https://github.com/less/less.js)
- [Jest](https://facebook.github.io/jest/)
- [enzyme](https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md)
## The directory structure
```
.
├── /coverage/ # 运行npm run test:cover输出的测试覆盖率文件
├── /dist/ # 构建输出的文件，使用全局变量方式引用，可用于发布到CDN
├── /docs # 项目文档
├── /lib/ # 构建输出的文件
├── /node_modules/ #
├── /site/ # 组件库官网
| ├── /assets #
| ├── /componentsPage # 组件库官网页面
| ├── /docs # 组件库官网文档
| ├── /locales # 组件库官网本地化文案
| ├── /pages #
| ├── /static # 组件库官网Demo使用的icon
| ├── /styles #
| ├── /index.html #
| └── /index.js #
├── /source/ # 组件源码
│ ├── /assets/ #
│ ├── /components/ # React components
│ ├── /hooks/ #
│ ├── /typings / #
│ └── /utils/ #
├── /tools/ # 项目脚本
├── .babelrc #
├── .editorconfig #
├── .eslintignore #
├── .eslintrc.js #
├── .gitignore #
├── .npmignore #
├── .stylelintignore #
├── .stylelintrc.js #
├── .travis.yml #
├── jets.config.js #
├── package.json #
├── postcss.config.js #
├── README.md #
├── tsconfig.json #
├── webpack.config.dev.site.js # 文档网站本地开发编译配置
└── webpack.config.prod.site.js # 文档网站生产环境编译配置
```