@ferpection/uikit
v3.1.3
Published
Technical implementation of the Ferpection design system
Downloads
85
Readme
Ferpection UIkit
This repo is a technical implementation of the Ferpection Design System for ReactJS.
Prerequisites
This package use React, React Router and EmotionJS. To avoid conflicts, those packages aren't automatically installed and doesn't come with this package.
You must have those packages installed in your project in order to use the React components of @ferpection/uikit
.
yarn add react react-dom react-router-dom @emotion/react
or
pnpm add react react-dom react-router-dom @emotion/react
or
npm install react react-dom react-router-dom @emotion/react --save
Install
Use npm or yarn to install the UI kit.
yarn add @ferpection/uikit
or
pnpm add @ferpection/uikit
or
npm install @ferpection/uikit --save
Usage
The package expose some UI components (react) you can use in your own project using a classic import
statement.
import { Button } from '@ferpection/uikit'
It is also possible to access stylesheets as SCSS files using a classic SASS import
statement.
@import '~@ferpection/uikit/sass/index.scss'
For a detail of what this package provides and what is the usage of a specific component, please see the storybook section of this README.
Start the project (development mode)
In development mode, you may need to watch and compile the project. As we recommend using the storybook commands below, you can also have a light build using rollupjs.
pnpm start
# or
pnpm run build:dev
Storybook
A storybook is available to help navigate onto the list of components. You can access to the last generated storybook on GitHub Pages to see the last published version of @ferpection/uikit
.
You can also start the storybook locally for development purpose:
pnpm run start:storybook
Or build a static version (HTML/CSS/JS) of the storybook:
pnpm run build:storybook
Build the project (production mode)
To build the project, a build command exist. This will build the project in production mode in the dist
folder.
There is no watch mode on this command.
pnpm run build
Run static code analysis
This project use eslint to check formatting rules and ensure code quality.
To run the analysis on your locale version:
pnpm run test:lint
Formatting tools
We use prettier to automatically format the code following the same rules of the linter.
Please be sure to run prettier before pushing code. Use can use an editor plugin to format regularly and automate the process (on save for example).
pnpm run format
Prettier only format the code. It doesn't (can't) rewrite the code to pass code-quality rules checks. You still need to run the linter sometimes to be able to refactor before asking for a review.
Changelog
Changes are logged into a CHANGELOG.md file and reported to the release panel of the repository when a new built package is published on NPM servers.
So, to see released version changelogs, go to the release panel of the repository. To see unreleased changelog, go to the CHANGELOG.md file.
License
This repository is under the MIT license. Please refer to the LICENSE file for more information.
Copyright (c) 2019 Ferpection