Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ctrlup-io/rainbow-react
Rainbow, Ctrl Up's Design System
https://github.com/ctrlup-io/rainbow-react
design-system react storybook
Last synced: about 1 month ago
JSON representation
Rainbow, Ctrl Up's Design System
- Host: GitHub
- URL: https://github.com/ctrlup-io/rainbow-react
- Owner: ctrlup-io
- License: mit
- Created: 2021-11-30T14:38:51.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-09T08:04:07.000Z (about 2 years ago)
- Last Synced: 2024-10-28T16:55:18.880Z (3 months ago)
- Topics: design-system, react, storybook
- Language: JavaScript
- Homepage:
- Size: 3.82 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Rainbow React
Ctrl Up Design System library for web applications
## Introduction
Ctrl Up Design System is the framework that helps our ecosystem to design and develop consistent and quality experiences. For its [Digital section](https://www.figma.com/file/CL28EqRgZSExkBjDJnmkDV/Ctrl-Up---Site-V2?node-id=515%3A3205), it is called Rainbow.
This repository hosts a React library for web applications.
## Package
This package provides you with a library of [React](https://reactjs.org/) components:
@ctrlup/rainbow-react
## Contributing
The best way to achieve this is together! That's why we are on GitHub. We would love contributions from the community (bug reports, feature requests, suggestions, Pull Requests, whatever you want!).
[Npm](https://docs.npmjs.com/) is used as package manager. [Semantic Release](https://semantic-release.gitbook.io/semantic-release/) is used to manage the whole package release workflow.
To setup your local dev environment:
1. Install [Npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
2. Clone repository
```sh
git clone [email protected]:ctrlup-io/rainbow-react.git
cd rainbow-react
```
3. Install dependencies
```sh
yarn install
```
4. See [more available scripts](README.md#scripts)
## Available Scripts
In the project directory, you can run:
### `commit`
Runs the [`git-cz`](https://github.com/streamich/git-cz) CLI to generate commit messages according to the [_Conventional Commit specifications_](https://www.conventionalcommits.org/en/v1.0.0/#specification).
### `format`
Runs [Prettier](https://prettier.io/) with [basic configuration](https://prettier.io/docs/en/configuration.html#basic-configuration).
We recommend to use Prettier in your IDE, e.g. in Visual Studio code with [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).
### `lint`
Runs [ESLint](https://eslint.org/).
### `build`
Bundles with [Parcel](https://parceljs.org/features/cli/#parcel-build-%3Centries%3E).
It generates report in [`parcel-bundler-reports`](./parcel-bundler-reports) folder. To serve it, run :
```sh
npx live-server parcel-bundle-reports/module.html
```
### `release:dry`
Runs [Semantic Release](https://semantic-release.gitbook.io/semantic-release/) in dry-run mode. It allows you to preview the pending release.
You have to set `NPM_TOKEN` and `GITHUB_TOKEN` in `.env` file.
### `storybook`
Runs [Storybook](https://storybook.js.org/) on http://localhost:6006/.
Learn how to write stories on [official documentation](https://storybook.js.org/docs/react/writing-stories/introduction).
### `storybook:build`
Bundles Storybook app with [Webpack](https://webpack.js.org/).
See more on [Publish Storybook documentation](https://storybook.js.org/docs/react/sharing/publish-storybook).
### `test`
Runs unit-test suite with [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro).
To use the full power of the Jest Watcher and LCOV coverage reporter we recommend to use the following scripts concurrently:
- `test:watch`
- `test:coverage`