📦 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

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

or, with npm:

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

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

# 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

# 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?

git clone ssh://[email protected]:2222/reverb/package/reverb-package-rock-suite.git

or with HTTPS:

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

then

cd reverb-package-rock-suite && 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

To start the developing run :

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.

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;

✨ 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
• object-rest-spread
• 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

But we indicate that you use styled-components for styling the components.

🧪 Testing

Testing is done with Jest, @testing-library;

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

npm run test

or (for testing watch)

npm run test:watch

or (for getting coverage)

npm run test:coverage

🚨 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).

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:

git remote add upstream ssh://[email protected]:2222/reverb/package/reverb-package-boilerplate.git

or

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:

git fetch upstream

• Make sure you're on the master branch:

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:

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:

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:

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.

🏷️ 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