jars-components

View on npm

jars-components is a component library designed to standardize and enhance the user interface components used in Umbrello projects. This library evolves from the previously used umbrello-ui library.

Getting Started

Follow these steps to initialize and build the project locally:

Prerequisites

• Node.js with version management via nvm is recommended.
• Yarn package manager installed.

⚠️ Important: Global Font Import Required

The jars-components library uses the DM Sans font for all typography. To ensure that the font weights (such as 400, 500, and 600) load correctly across all environments, you must import the library's global stylesheet in your application entrypoint.

This is especially important for Vite projects, as Vite does not automatically apply global CSS from dependencies, unlike environments such as Next.js.

✔️ Add this to your project's HTML index file:

<link
  href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,[email protected],100..1000&display=swap"
  rel="stylesheet"
/>

Initialize the Project

1. Use the specified Node version:

   nvm use

2. Install the project dependencies:

   yarn install

3. Build the project:

   yarn build

Storybook

To view the components in a development environment, run the following command:

yarn storybook

Build the storybook:

yarn build-storybook

Storybook Deployment

The jars-components Storybook is automatically deployed to https://storybook.umbrello.com/ on every push to the main branch.

Manual Deployment

If needed, Storybook can also be published manually by triggering the Publish Storybook GitHub Action from the repository's GitHub Actions page.

Local development

Testing changes to the library locally

with yarn link

1. go to the jars-components root folder
2. run yarn link
3. go to the project folder that you want to test on, for example /admin
4. run yarn link @jars-labs/jars-components
5. run yarn in /admin
6. start and test

or with yarn pack

1. yarn pack in jars-components root
2. copy the location of the generated tarball
3. got to the target project dependency
4. yarn workspace admin add file:/Users/<your_user>/e14/jars-components/jars-labs-jars-components-<version>.tgz
5. run yarn
6. start and test

Publishing a New Version to npm

Follow these steps to publish a new version of the @jars-labs/jars-components package:

1. Ensure You Are Logged into npm

Log in to npm with your credentials:

npm login

Make sure you have the necessary permissions for the jars-labs organization.

2. Update the Version

Use Semantic Versioning:

• Patch: For bug fixes or small changes (e.g., 1.0.0 → 1.0.1).
• Minor: For new features without breaking changes (e.g., 1.0.0 → 1.1.0).
• Major: For breaking changes (e.g., 1.0.0 → 2.0.0).

npm version <patch|minor|major>

3. Build the Package

yarn build

4. Verify the Package Content (optional)

Test what will be included in the npm package:

npm pack

Extract the contents of the tarball to verify the package content.

tar -tzf jars-components-<version>.tgz

5. Publish the Package

npm publish --access public

6. Push the tag

git push --follow-tags