# @reverb-ui/rock-suite

> Reverb Rock Suite Design System component kit in React

Latest version **0.0.7-beta.2** (published 2022-07-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @reverb-ui/rock-suite
pnpm add @reverb-ui/rock-suite
yarn add @reverb-ui/rock-suite
bun add @reverb-ui/rock-suite
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7-beta.2 |
| Published | 2022-07-20 |
| First published | 2021-08-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 7 |
| Unpacked size | 290.2 KB |
| Known vulnerabilities | 0 (+24 in 2 direct dependencies) |
| Install scripts | no |
| Author | Rock Content - Team Reverb |
| Maintainers | wesleycouto, rock_engineering, nataliacoelho, benitsrock, kelvin.chaves |

## Links

- npm: https://www.npmjs.com/package/@reverb-ui/rock-suite
- Repository: https://gitlab.rockcontent.com/reverb/package/reverb-package-rock-suite
- Homepage: https://gitlab.rockcontent.com/reverb/package/reverb-package-rock-suite/-/blob/c2ba34641cb88068fc5b49c232426d90a72c1f22/README.md
- Issues: https://gitlab.rockcontent.com/reverb/package/reverb-package-rock-suite/-/issues
- npm.io page: https://npm.io/package/@reverb-ui/rock-suite

## Dependencies (7)

- [axios](https://npm.io/package/axios.md) ^0.24.0
- [react-pdf](https://npm.io/package/react-pdf.md) ^5.3.2
- [react-colorful](https://npm.io/package/react-colorful.md) ^5.3.0
- [@reverb-ui/react](https://npm.io/package/@reverb-ui/react.md) ^1.7.4
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.0
- [@reverb-ui/icons-react](https://npm.io/package/@reverb-ui/icons-react.md) 0.0.0-beta7
- [react-intersection-observer](https://npm.io/package/react-intersection-observer.md) ^8.32.0

## Recent versions

- 0.0.7-beta.2 (latest) — 2022-07-20
- 0.0.7-beta.1 — 2022-07-20
- 0.0.6-beta.12 — 2022-01-12
- 0.0.6-beta.11 — 2022-01-12
- 0.0.6-beta.10 — 2022-01-11
- 0.0.6-beta.9 — 2022-01-11
- 0.0.6-beta.8 — 2022-01-11
- 0.0.6-beta.7 — 2022-01-11
- 0.0.6-beta.6 — 2022-01-11
- 0.0.6-beta.5 — 2022-01-11
- 0.0.6-beta.4 — 2022-01-11
- 0.0.6-beta.3 — 2022-01-11
- 0.0.6-beta.2 — 2022-01-10
- 0.0.6-beta.1 — 2022-01-10
- 0.0.6-beta.0 — 2022-01-10
- … 6 more at https://npm.io/package/@reverb-ui/rock-suite/versions

## README

# 📦 reverb-package-rock-suite

Reverb Rock Suite component kit in React, Simple, Modular & Accessible UI Components for your React Applications.

Reverb Rock Suite provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps.

## 📄 Using Reverb Rock Suite in a react project

Install the kit package in your react project

```bash
yarn add @reverb-ui/react
yarn add @reverb-ui/rock-suite
```

or, with npm:

```bash
npm install @reverb-ui/react
npm install @reverb-ui/rock-suite
```

In your entry file (e.g `app.tsx`) use the theme provider

```typescript
# app.tsx

import * as React from "react"
import { ThemeProvider, ReverbUITheme } from "@reverb-ui/react"

// Use at the root of your app
function App() {
  return (
    <ThemeProvider theme={ReverbUITheme} resetCSS>
      <App />
    </ThemeProvider>
  )
}
```

Use any component from the library

```typescript
# MyComponent.tsx
import React from 'react'
import { Button } from '@reverb-ui/rock-suite'

const MyComponent = () => <Button colorScheme="blue">Foobar</Button>
```

## 🏗️ Getting started in Development

There are two methods for getting started with this repo.

### ➕ Familiar with Git?

```bash
git clone ssh://git@gitlab.rockcontent.com:2222/reverb/package/reverb-package-rock-suite.git
```

or with HTTPS:

```bash
git clone https://gitlab.rockcontent.com/reverb/package/reverb-package-rock-suite.git
```

then

```bash
cd reverb-package-rock-suite && npm install
```

### ➖ Not Familiar with Git?

Click [here](https://gitlab.rockcontent.com/reverb/package/reverb-package-rock-suite/-/archive/master/reverb-package-rock-suite-master.zip) to download the .zip file.  Extract the contents of the zip file, then open your terminal, change to the project directory, and:

```bash
npm install
```

## 👷 Developing

To start the developing run :

```bash
npm run start
```

This will build a version of your library, run the watcher and also run the Storybook.

To open the Storybook manually open your Browser and navigate to [http://localhost:6006](http://localhost:6006).

Start developing your components in `src/components` folder and update the `src/index.tsx` file accordingly.

Always provide an `your-component/stories/your-component.stories.tsx` file, so your component will show up in the Storybook.

You can refer to example `Button` component, learn more about working in development on Reverb Rock Suite UI, follow [this link](https://wiki.rockcontent.com/share/87b33854-b9a1-4bed-ad2f-e310b1882da4);

## ✨ Creating a new Library

Cleanup the src folder with existing components examples, and add your own components.

### Proposals (Babel)

For smoother development some Babel plugin are included

- [class-properties](https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-class-properties)
- [object-rest-spread](https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-object-rest-spread)
- [optional-chaining](https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-optional-chaining)

## 🎨 Styling your components

`SCSS` and `CSS` are supported out of the box just import your styles into your component like you normally would do.

For the use of  `CSS Modules` refere to [rollup-plugin-postcss](https://github.com/egoist/rollup-plugin-postcss)

> But we indicate that you use [styled-components](https://styled-components.com/docs) for styling the components.

## 🧪 Testing

Testing is done with [Jest](https://facebook.github.io/jest/), [@testing-library](https://testing-library.com/docs/);

You can refer to `example.spec.tsx` as an example.

```bash
npm run test
```

or (for testing watch)

```bash
npm run test:watch
```

or (for getting coverage)

```bash
npm run test:coverage
```

## 🚨 Linting

Linting is set up through [ESLint](https://eslint.org/) and configured with  [eslint-config-tsdx](https://www.npmjs.com/package/eslint-config-tsdx);

You can modify linting rules by overriding them in the `.eslintrc` file.

```bash
npm run lint
```

or (for for automatic fixing if possible)

```bash
npm run lint:fix
```

## 🚀 Publishing your library to NPM

To release your library to NPM or your private Registry, make sure you have an active account at [NPM](https://www.npmjs.com/), your `.npmrc` file is correctly setup and the repository url in `package.json` file is set to your repository url, then:

```bash
npm run release
```

Or you only need create a new tag and push the new tag to remote repository, the pipeline will do all the hard work here from compiling a new bundle, creating a new storybook build, publishing the new library version to NPM, and publishing the new storybook build to AWS.

According to the `.terraform` configuration;

Example create new tag:

```bash
git tag -a v1.0.1 -m “Release new component”
```

Now let's check if a tag was created and send it to the remote repository:

```bash
git show v1.0.1 && git push origin v1.0.1
```

> Learn more about our git flow, follow [this link](https://wiki.rockcontent.com/doc/gitflow-workflow-pMwl52On0C#h-flow)

## 🎨 Storybook

For custom layouts, styling, controls, addons and more information about the Storybook please refer to [React Storybook](https://storybook.js.org/docs/react/get-started/introduction) documentation.

## 📝 Scripts

- `npm run start` : Only serves the Storybook.
- `npm run build` : Builds your library  (build can be found in `dist` folder).
- `npm run build:storybook` : Builds the static Storybook in case you want to deploy it.
- `npm run test` : Runs the tests.
- `npm run test:coverage`: Runs the test and shows the coverage.
- `npm run test:watch`: Runs the test and watch the files test.
- `npm run lint` : Runs the linter, TypeScript TypeCheck and StyleLint.
- `npm run lint:fix` : Runs the linter, TypeScript TypeCheck and StyleLint and fixes automatic fixable issues.
- `npm run eslint`: Runs only the JavaScript linter.
- `npm run eslint:fix`: Runs only the JavaScript linter and fixes automatic fixable issues.
- `npm run stylelint`: Runs only the style linter.
- `npm run stylelint:fix`: Runs only the style linter and fixes automatic fixable issues.
- `npm run check-types`: Runs typescript type checker.
- `npm run release` : Publishes your Library on NPM or your private Registry (depending on your config in your `.npmrc` file).

## Keeping the infrastructure updated

In order to maintain the structure of all the tribe libraries we had them created from a fork of the reverb-package-boilerplate repository.

Below are instructions for receiving updates from our boilerplate:

- add a new remote into your git, call it upstream:
  
```bash
git remote add upstream ssh://git@gitlab.rockcontent.com:2222/reverb/package/reverb-package-boilerplate.git
```

or

```bash
git remote add upstream https://gitlab.rockcontent.com/reverb/package/reverb-package-boilerplate.git
```

- Get all branches of this new remote,like upstream/master for example:
  
```bash
git fetch upstream
```

- Make sure you're on the master branch:
  
```bash
git checkout master
```

- Rewrite your master branch so that your commits that are not in the original project appear, and that your commits are at the top of the list:
  
```bash
git rebase upstream/master
```

- If you don't want to write your master branch history
(maybe because someone else has already cloned it) so you should replace the last command with a:
  
```bash
git merge upstream/master
```

However, to make future pull requests as clean as possible, it's a good idea to rebase.

If you rebase your branch from upstream/master, you may need to force a push to your own Github repository.
You can do this with:
  
```bash
git push -f origin master
```

You will only need to do this with the -end the first time you do a rebase.

For read the original tutorial, follow [this link.](https://gist.github.com/rdeavila/9618969)

## 🏷️ Resources

### Bundler

- [Rollup.js](https://rollupjs.org/guide/en)

### Code Formatter

- [Prettier](https://prettier.io/)

### React Storybook

- [React Storybook](https://storybook.js.org/docs/react/get-started/introduction)

### Testing Components

- [@testing-library](https://testing-library.com/docs/)
- [Jest](https://facebook.github.io/jest/)

### Code Linting

- [ESLint](https://eslint.org/)
- [eslint-config-tsdx](https://www.npmjs.com/package/eslint-config-tsdx)
- [stylelint-prettier](https://github.com/prettier/stylelint-prettier)
- [stylelint-scss](https://github.com/kristerkari/stylelint-scss)

### Code Compiler

- [Babel 7](https://babeljs.io/)
- [Typescript](https://www.typescriptlang.org/)

---
_Source: https://npm.io/package/@reverb-ui/rock-suite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._