liber-salti/README.md

Saltí - Liber Design System

# Saltí

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

Liber Design System. This project was created using:

- [Rollup](https://github.com/rollup/rollup)
- [TypeScript](https://www.typescriptlang.org/)
- [Styled-components](https://styled-components.com/)
- [Material-UI](https://mui.com/)

It also features:

- [Storybook](https://storybook.js.org/) to help you create and show off your components
- [Jest](https://jestjs.io/) and [React Testing Library](https://github.com/testing-library/react-testing-library) enabling testing of the components

## Usage

### Package

You can use this package adding it to your project with the command:

```sh
yarn add liber-salti
```

⚠️ Be aware of the peer dependencies of this library.

### Examples

You can check each component's example in out [Storybook page](https://libercapital.github.io/salti).

## Development

### Linting

```sh
yarn lint
```

Automatic fix errors:

```sh
yarn lint --fix
```

### Testing

```sh
yarn test
```

Obs: we are currently using [Storyshots](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core) for snapshot testing the Storybook stories.

If they fail with your change, analyze if this change should be affecting another stories or not. If so, you can update them by running:

```sh
yarn test -u
```

### Building

```sh
yarn build
```

### Storybook

To run a live-reload Storybook server on your local machine:

```sh
yarn storybook
```

To export your Storybook as static files:

```sh
yarn storybook:export
```

You can then serve the files under `storybook-static`.

### Generating New Components

There is a NodeJS util file under `util` called `create-component.js`. Instead of copy pasting components to create a new component, you can instead run this command to generate all the files you need to start building out a new component. To use it:

```sh
yarn generate YourComponentName
```

This will generate:

```sh
/src
  /YourComponentName
    YourComponentName.tsx
    YourComponentName.stories.tsx
    YourComponentName.test.tsx
    YourComponentName.types.ts
    YourComponentName.styles.ts
    index.ts
```

The default templates for each file can be modified under `util/templates`.

### Installing Component Library Locally

Let's say you have another project (`test-app`) on your machine that you want to try installing the component library into without having to first publish the component library. In the `test-app` directory, you can run:

```sh
yarn add ../salti
```

Which will install the local component library as a dependency in `test-app`. It'll then appear as a dependency in `package.json` like:

```JSON
  ...
  "dependencies": {
    ...
    "salti": "../salti",
    ...
  },
  ...
```

Your components can then be imported and used in that project.

⚠️ You might have to delete this project's `node_modules` folder before installing it locally in another app, so the lib uses the other project's packages, avoiding errors like "duplicate React found" or so.

## Publishing

### NPM and semantic-release

This project is configured with GH Actions workflows for setting a new release using [semantic-release](https://github.com/semantic-release/semantic-release#-semantic-release) and publishing it on NPM Registry.