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