keboola/indigo-ui

Indigo UI library, its CSS and React components. Also Styleguide app showing usages of this library.

Indigo UI

Indigo UI library, its CSS and React components. Also Styleguide app showing usages of this library.

Development

1. Make sure you have Node 16 installed node -v
2. Install grunt: yarn global add grunt-cli
3. Install dependencies: yarn
4. Run storybook yarn dev
5. Open browser at http://localhost:9009/

Docker

1. Build: docker-compose build (See Dockerfile to check what's inside)
2. Run container: docker-compose run --rm --service-ports node
3. Continue from step 3. (including) in section above (yarn, yarn dev, ...)

Available commands

• yarn dev: Start Storybook server
• yarn test: Run tests
• yarn build-lib: Build package prepared for publishing to npmjs registry
• yarn build-storybook: Prepare Storybook for deployment
• yarn stylelint: Check less files for errors

Creating new React Component

1. Create new component file in src/indigo/components (e.g. Loader.jsx).
2. Add tests (if needed) and snapshots for new component (e.g. Loader.test.js).
3. Add new component to main file src/indigo/components/index.js to enable its export.

Check local build of indigo-ui in kbc-ui

Make sure you have package prepared yarn build-lib.

Using yarn link (preferred)

• [indigo-ui] yarn link
• [kbc-ui] yarn link "@keboola/indigo-ui"

See yarn link docs

Similar (but reversed) process applies for yarn unlink.

Using yarn add

• [kbc-ui] yarn add file:/path/to/indigo-ui

See yarn add docs

Simultaneously with Keboola Connection (Advanced, Docker only)

Check KBC.md

Deployment

First, check the content of .travis.yml file and documentation about Travis Deployment.

Storybook

• Storybook is deployed on every push to main branch
• After successful deployment, the Storybook build will be available online at https://indigo.keboola.com

Releasing new version

• Before pushing new tag, make sure you know what are you doing.
• New tagged release is only needed if there's a change in src/indigo folder and you want to make those changes available for users.
• Please respect Semantic versioning

Steps:

1. Make sure everything is working as expected
2. Make sure you are on a main branch
3. Prepare new version with yarn version command
   • Just follow instructions
   • This command should create new commit (with version change in package.json) and tag for you.
   • There's no need to change package.json manually or create tag manually.
4. Push to main branch - e.g git push origin main
5. Check if everything is as expected (you can wait until main branch is deployed)
6. Push newly created tag - e.g. git push origin v2.0.0-beta-3 <- This triggers deploy to npmjs!
7. Check package in npmjs registry
8. Try to install it or update to newer version from some project
9. Write release notes keboola/indigo-ui/releases

FAQ

How to run tests?

Run yarn test. It'll start tests in interactive mode.

How to check what will be published to npmjs registry before pushing new tag?

Run npm pack. Check its manual here.

How to check react-bootstrap documentation at specific version

If published version does not match installed version.

git clone git@github.com:react-bootstrap/react-bootstrap.git
cd react-bootstrap
git fetch --all
git checkout v0.31.5 # use version you need
npm run docs

Open browser at localhost:4000

License

MIT licensed, see LICENSE file.