@invisionag/components

UI-Components

Storybook (components.ivx.design)

Usage

npm install --save @invisionag/components

// new since v7.0.0 - import the main css file
import '@invisionag/components/main.css';
// import the component you want to use
import { Button } from '@invisionag/components';

Experimental Timeline component

The Timeline component exported from @invisionag/components/experimental-timeline is experimental and does NOT adhere to SemVer. Any version of this component can contain breaking changes and should be used with caution.

import { Timeline } from '@invisionag/components/experimental-timeline';

How to maintain icons

Available icons are located in the SVG folder in the root directory. After changing icons run

npm run sync-svgs

This will regenerate all icon components from the SVGs in the SVG folder.

When deleting/renaming icons the file src/components/Icon/index.tsx needs to be adapted as well.

How to use TailwindCSS

In the past, we have used styled-components for styling components within this package. Moving forward, we intend to use TailwindCSS instead. This will allow us to use the same styling framework across all our projects. To avoid naming conflicts or version lock-ins between components and projects, we use a c- prefix for the TailwindCSS class names. So, instead of font-bold you'll need to use c-font-bold. Please refer to the documentation of TailwindCSS for more information. Similarly, container query classes are also prefixed with c- to avoid conflicts with other libraries, so instead of @container/table you'll need to use c-@container/table and @sm/table:c-flex or similar classes.

How to publish a new version

1. Decide on a new version based on SemVer (if you are unsure which version to pick PLEASE ASK)
2. Checkout and pull the main branch
3. Create a branch named after the version you decided on (e.g. 0.3.0)
4. Add the upcoming version number to CHANGELOG.md
5. Commit and push your changes to GitHub
6. Open a pull request for your branch
7. Make sure you are logged in to NPM
8. Run npx np@latest --any-branch and when asked about the version, select the one previously decided on.
   This will set the version in package.json, push the changes and release a version on NPM.
   Additionally, a browser window with the GitHub release page will open, all you need to do there is press the "Publish release" button.
   NOTE: If the hint "The following new files will not be part of your published package: - src/*.tsx" appears you can safely continue. We do not publish typescript source files but transform everything in src before publishing.
9. A major update release of ui-components should be followed up with a change in next-lib where that new version has to be allowed. For next-lib that's a minor change unless the consequences of the change to ui-components are more massive.