npm package: @reverb-ui/icons-react
Description: Rock Content Design System component kit in React
Author: Team Reverb
Latest version: 1.3.1

# 📦 reverb-package-icons-react

`@reverb-ui/icons-react` is a port of `@reverb-ui/icons` for React. It uses `@reverb-ui/icons` as main dependency, and builds React Components with the SVG Icons.

This library is created and maintained by Rock Content and it's Design System Team.

## 📄 Using Reverb in a react project

Just install in your project, no additional dependencies needed;

```bash
yarn add @reverb-ui/icons-react
```

or, with npm:

```bash
npm install @reverb-ui/icons-react
```

Right after installation, you can use the icons in any file:

```typescript
# MyComponent.tsx
import React from 'react'
import { ArrowDown } from '@reverb-ui/icons-react'

const MyComponent = () => <ArrowDown size="lg" variant="solid" color="blue.400" />
```

This will render the `ArrowDown` icon, with it's defaults (`outline` variant with `md` size)


## 🏗️ Getting started in Development

To start development, first retrieve the source code:

### ➕ Familiar with Git?

```bash
git clone ssh://git@gitlab.rockcontent.com:2222/reverb/package/reverb-package-icons-react.git
```

or with HTTPS:

```bash
git clone https://gitlab.rockcontent.com/reverb/package/reverb-package-icons-react.git
```

then

```bash
cd reverb-package-icons-react && npm install
```

### ➖ Not Familiar with Git?

Click [here](https://gitlab.rockcontent.com/reverb/package/reverb-package-react/-/archive/master/reverb-package-icons-react-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

This project uses automated scripts to generate it's icons. Just run:

```bash
npm run build:create-icons
```

This will generate the icons and genante a build.


## 🚨 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).

## 🏷️ 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/)