Epulze UI Library

UI Library built using Tailwind. Based on the Epulze design system

Development

1. Install packages through yarn install
2. Run yarn storybook:start to start storybook.
3. When creating new components, make sure to add a story for it so it can be previewed through storybook

Deployment / Publishing

To create a new release of @epulze/ui make sure that you first update the version in package.json. The version needs to follow semantic versioning.

When we want to release a new version of @epulze/ui we have two different approaches:

Automatic (recommended)

We have an automatic release pipeline setup in gitlab. So whenever a new tag is pushed to gitlab we create a new package version.

1. To create the tag run git tag -a <tagname> -m <message>. Where tagname should preferably match the updated package.json version and message should be a short description for the new release. For example it could look like git tag -a 1.0.0-beta1 -m "New beta release where tailwind is correctly built."
2. Push the tag to gitlab with git push origin <tagname>.

Manual (only use if necessary)

Make sure that you build before publishing

To manually publish a new release you need have a personal access token with the scope set to api.

Create a new file called .npmrc in the project root and add the following contents:

git.interactivesolutions.se/api/v4/projects/469/packages/npm/:_authToken=YOUR_TOKEN_HERE
git.interactivesolutions.se/api/v4/packages/npm/:_authToken=YOUR_TOKEN_HERE
@epulze:registry=https://git.interactivesolutions.se/api/v4/packages/npm/

and replace YOUR_TOKEN_HERE with your actual access token.

Build the project into csj and esm modules with yarn build.

Publish the package with npm publish.

Testing

The project uses Jest tests. Be sure to name your tests accordingly to make the correct test suite run the test.

The project uses jest for unit tests which is executed with yarn jest:run. The jest tests will only run on files named with **/*test.{js,jsx,ts,tsx}.

Icons

We use Fontawesome to draw icons. The icons are imported and defined in src/utils/iconList.ts.

The <Icon>-component provides a nice abstraction for usage.

Themes

Epulze-UI supports switching the color-theme of the components. For details, see the Theme MR