# rods-ui

> The best design system library of the world

Latest version **1.0.0-alpha.3** (published 2021-10-01) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install rods-ui
pnpm add rods-ui
yarn add rods-ui
bun add rods-ui
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.3 |
| Published | 2021-10-01 |
| First published | 2021-10-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 13.3 MB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Author | BeeTech.Global |
| Maintainers | mxczpiscioneri |
| Keywords | rods-ui, design-system, beetech |

## Links

- npm: https://www.npmjs.com/package/rods-ui
- Repository: https://github.com/BeeTech-global/rods-ui
- Homepage: https://github.com/BeeTech-global/rods-ui#readme
- Issues: https://github.com/BeeTech-global/rods-ui/issues
- npm.io page: https://npm.io/package/rods-ui

## Dependencies (8)

- [clsx](https://npm.io/package/clsx.md) 1.1.1
- [lodash](https://npm.io/package/lodash.md) 4.17.21
- [rods-dictionary](https://npm.io/package/rods-dictionary.md) ^1.2.0
- [@material-ui/lab](https://npm.io/package/@material-ui/lab.md) 4.0.0-alpha.60
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) 4.12.2
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) 0.1.14
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) 1.2.35
- [@fortawesome/free-brands-svg-icons](https://npm.io/package/@fortawesome/free-brands-svg-icons.md) 5.15.3

## Recent versions

- 1.0.0-alpha.3 (latest) — 2021-10-01
- 1.0.0-alpha.2 — 2021-10-01

## README

# Rods UI

A library based on [material-ui](https://material-ui.com/) to be used as a standard library inside Beetech.

## Installation

```bash
npm i -S @beetech/rods-ui
# or
yarn add @beetech/rods-ui
```

_Remembering that to install internal packages from Remessa, you must be connected to the VPN. See more [here](https://github.com/BeeTech-global/runbooks/blob/master/development/how-to-use-nexus.md)_

## About

This project is a library built for React projects. There are `peerDependencies` as `react`, `react-dom`, and `styled-components`. PeerDependencies have some particularities to run [locally](#Development) or for development.

<!-- We have centralized documentation on [Miro](https://miro.com/app/board/o9J_kvCxZQA=/) -->

### _ Important _

Only customized components are listed on the internal storybook. Therefore, you have to follow the current [material-ui documentation](https://material-ui.com/) if you need details of components that are not fully customized yet.

# Development

## Installation

[Node.js](https://nodejs.org/en/download) version >= v14.17.0

```bash
nvm use  # if you have nvm installed to select the v14.17.0 of Node
npm install
```

This command installs the peer dependencies also. Using the [install-peers](https://www.npmjs.com/package/install-peers) module.

## Running

### Development

To compile the project using [rollup.js](https://rollupjs.org/guide/en/) to dist/bundle.js and to watch the changes:

```bash
npm run start:dev # it runs compiling to dist/bundle.js
```

To run the [storybook](https://storybook.js.org/) (most important to local development)

```bash
npm run start:storybook  # it runs at http://localhost:6006/
```

To run the [tests](https://jestjs.io/) and watching the changes:

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

Ideally, it would be best to work on the storybook to develop new components or fix a bug.

If needed, you can link the library with your local project. [Some weird behaviors can happen](#troubleshooting).

### Contributing

#### ForwardRef

[React.forwardRef](https://reactjs.org/docs/forwarding-refs.html) creates a React component that forwards the ref attribute it receives to another component below in the tree. Therefore, we need to provide components with Forwarding Refs to allow Ref to consume components from this library.

**Component development:**

```tsx
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
  return <StyledButton {...props} ref={ref} />
})
```

**Component usage:**

```tsx
// possible implementations
const ref = React.createRef<HTMLButtonElement>()
// or
const ref = React.useRef<HTMLButtonElement>(null)

<Button ref={ref}>Button with ref</Button>
```

To further information, you can check the material-ui documentation about forwarding ref in their components. Check this out [caveats with refs](https://material-ui.com/guides/composition/#caveat-with-refs) and [usage of component prop](https://material-ui.com/guides/typescript/#usage-of-component-prop)

#### Exportation

RODS-UI has two build systems configured: **CommonJS** (preserving modules) and **UMD** (unified bundle).

**Exporting**
To export a new component it is necessary that the exports follow this pattern (found in the [src/index.ts](src/index.ts)) file):

```ts
export { default as Accordion } from './components/Accordion'
export * from './components/Accordion'
```

The first line exports the `Accordion` component to be imported as follows:
`import { Accordion } from "@beetech/rods-ui"`.
In this way, the component is inserted into the UMD final bundle.

The second line exports all the exported content into the `./components/Accordion` file, and with that, all the typings are exported too.

## CI and CD

RODS-UI is published on Storybook(S3) and NPM (as a package).

All the branches execute the Jenkins job to verify if they can be published. It runs lint, tests, and coverage. 

The [deploy](https://ci.beetech.global/job/rods-ui-storybook/) is ran on the following branches: `development` (automatically) and tags(manually, see below how) with the [semantic version](https://semver.org/) pattern. The tests and lint aren't executed on these branches once the CI has run in the other branches created before merging to main and generating the tag.

See the following points to know how to publish in NPM and execute the deployment of the storybook by tag.

---
## NPM

After generating a new tag from the `main` branch, you need to run the npm-publish job on Jenkins.

Access [npm-publish job](https://ci.beetech.global/blue/organizations/jenkins/npm-publish/activity/) on Jenkins and click on the RUN button, fill the fields as below:

```
REPO_TO_PUBLISH=rods-ui
NODE_VERSION=14.17.0
```

You can access this [runbook](https://github.com/BeeTech-global/runbooks/blob/e676501eb17c8c7209820e6eecf4cdb5cbf5fde6/development/how-to-publish-package-npm-registry.md) for more details.

---

## Storybook

### [Development/Homologation](https://prd-dev-rods-ui.eurodolar.xyz/)

Just commit and push to the `development` branch, then the [Jenkins](https://ci.beetech.global/blue/organizations/jenkins/rods-ui-storybook/activity?branch=development) will automatically publish in this [url](https://prd-dev-rods-ui.eurodolar.xyz/)


### [Production](https://rods-ui.eurodolar.xyz/)

Generate a [tag](https://github.com/BeeTech-global/rods-ui/tags) in git and manually trigger the publication on [Jenkins](https://ci.beetech.global/blue/organizations/jenkins/rods-ui-storybook/branches) -> find your created tag -> click on play button and wait it finished to access this [url](https://rods-ui.eurodolar.xyz/)


Enjoy! :)


### _Important_

When committing, it's executed a task to lint the project. If the lint doesn't pass, you can't commit your stuff.
And when you try to push your code, it runs the lint and tests before pushing. So if there is any issue with your code, you won't be able to push the code.

---

## Troubleshooting

See this article [Setting up peer dependencies and local project](https://dev.to/yvonnickfrin/how-to-handle-peer-dependencies-when-developing-modules-18fa)

The problem with the link is that you will have 2 `react` libraries running on the same project. This causes an issue with `react hooks`. So then, you need to create an `npm link` to React from one to the project.

So, go to the library, get into `node_modules/react`, then execute `npm link`. Then, go back to your app repository and execute the `npm link react`. It should fix.

However, installing a new npm module on the rods-ui will probably have to execute `npm install` again because the peer dependencies are lost.

PS.: You may have the same problem with `styled-components`, and it will need to be linked to the app project as well.

# See more

### [ZeroHeight](https://onboarding.remessaonline.com.br/)

You can find the password on 1password. If you don't have access to 1password, you can ask for your tech lead, your team designer, or on [#workgroup-design-system](https://remessa-online.slack.com/archives/C021ZP63MPC) slack channel.

### [Storybook](./.storybook/README.md)

### [Tests](./tests/README.md)

---

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