iclips-reverb-icons-react

📦 reverb-package-icons-react

iclips-reverb-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;

yarn add iclips-reverb-icons-react

or, with npm:

npm install iclips-reverb-icons-react

Right after installation, you can use the icons in any file:

# MyComponent.tsx
import React from 'react'
import { ArrowDown } from 'iclips-reverb-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?

git clone ssh://[e-mail]:2222/reverb/package/reverb-package-icons-react.git

or with HTTPS:

git clone https://gitlab.rockcontent.com/reverb/package/reverb-package-icons-react.git

then

cd reverb-package-icons-react && npm install

➖ Not Familiar with Git?

Click here to download the .zip file. Extract the contents of the zip file, then open your terminal, change to the project directory, and:

npm install

👷 Developing

This project uses automated scripts to generate it's icons. Just run:

npm run build:create-icons

This will generate the icons and genante a build.

🚨 Linting

Linting is set up through ESLint and configured with eslint-config-tsdx;

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

npm run lint

or (for for automatic fixing if possible)

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, your .npmrc file is correctly setup and the repository url in package.json file is set to your repository url, then:

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:

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:

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

Learn more about our git flow, follow this link

🎨 Storybook

For custom layouts, styling, controls, addons and more information about the Storybook please refer to React Storybook 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

Code Formatter

• Prettier

React Storybook

• React Storybook

Testing Components

• @testing-library
• Jest

Code Linting

• ESLint
• eslint-config-tsdx
• stylelint-prettier
• stylelint-scss

Code Compiler

• Babel 7
• Typescript