Sherpany UI Core

📚 General information

Demo

React components library based on Ant Design. Main ideas:

• isolated development of components
• organize global components structure
• show all available states for each component

Installation

Clone this repository and install dependecies with command yarn.

Run

1. yarn storybook for develpoment.
2. yarn build for build static files.

Testing

1. yarn test for run all tests
2. yarn test:watch for run tests in watch mode

Tools

There is list of used tools for develop our components:

• React JS v16.9
• Ant Design
• SASS
• CSS Modules
• Autoprefixer
• ESLint
• Storybook
• Jest
• Enzyme

Project Structure

.ui-core
├── .storybook                # all files related storybook configuration
│   ├── addons.js             # setup addons
│   ├── config.js             # global configuration
│   ├── postcss.config.js     # config for postcss-loader
│   ├── sherpanyTheme.js      # custom theme
│   └── webpack.config.js     # custom webpack config
├── build                     # public folder for host on server
├── source                    # sources (components, utils, constants)
│   ├── components
│   │   └── ui                # ui related components (buttons, dropdowns, inputs, tables, etc...)
│   └── framework             # some usefull libraries that can be used across the app│
├── static                    # all static files (images, fonts, music, videos, files for localization)
│   ├── fonts
│   └── images
├── .eslintrc.json            # ESLint config
└── index.js                  # file with exports of components for reusing in our projects

Component structure

Usually component includes four files:

1. [name].jsx component itself
2. [name].sass component styles
3. [name].story.js component story
4. [name].test.js componet tests