Saltí

Liber Design System. This project was created using:

• Rollup
• TypeScript
• Styled-components
• Material-UI

It also features:

• Storybook to help you create and show off your components
• Jest and React Testing Library enabling testing of the components

Usage

Package

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

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.

Development

Linting

yarn lint

Automatic fix errors:

yarn lint --fix

Testing

yarn test

Obs: we are currently using Storyshots 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:

yarn test -u

Building

yarn build

Storybook

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

yarn storybook

To export your Storybook as static files:

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:

yarn generate YourComponentName

This will generate:

/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:

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:

  ...
  "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 and publishing it on NPM Registry.