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';
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
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
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.