Indigo Design System

Usage

All you need to do is install the package @indigoai/indigo-design-system from npm

$ yarn add @indigoai/indigo-design-system
# or
$ npm install --save @indigoai/indigo-design-system

And import style.css in your global stylesheet file or in App.tsx:

import "@indigoai/indigo-design-system/style.css"

If you need to import some icons, you can add this package @indigoai/indigo-icons from npm

import { YourSolidIcon } from '@indigoai/indigo-icons/dist/solid';
import { YourOutlineIcon } from '@indigoai/indigo-icons/dist/outline';

Dev environment

This package uses a Docker container as a local development environment.
Yalc can be used to publish the package locally and test it in a different project.

You can start the development environment by running:

docker compose up

You can update the dependencies by running:

docker compose exec frontend yarn

You can publish the package locally by running:

docker compose exec frontend ./publish_local.sh

Using a local version of the icons

You can use yalc to publish a local version of the icons package and try it out in the design system before publishing it to npm.
To install it without modifying the package.json file, run:

docker compose exec frontend yalc link @indigoai/indigo-icons

Due to how Storybook works, you will need to delete the cache and restart the container:

docker compose exec frontend rm -rf /app/node_modules/.cache/storybook

Publishing the package to NPM

You should have an NPM account and be logged in to publish the package.

Bump the package version, manually or using one of the npm commands: npm version patch, npm version minor, npm version major. Then run:

docker compose exec frontend ./publish.sh

warning: after running this command, the package.json file will be reverted to its previous state.
Remember to commit the changes to it before running the command.