Hamro Design System

The Hamro Design System bridges design and engineering by centralising reusable UI components, visual guidelines, and tooling powered by Storybook.

Installation

npm install hamro-design-system

If your app needs the packaged global styles, import them once at your application entrypoint:

import 'hamro-design-system/styles.css';

Storybook

npm run storybook:run

Publish Readiness

Build and inspect the npm package locally before publishing:

npm run pack:check

Publish to npm:

npm publish

Requirements:

1. You must be logged into npm with an account that can publish the package scope.
2. For a public scoped package, npm will use --access public through publishConfig.
3. prepublishOnly will run the production build and test suite before publish.

Working Locally

Use npm link to test local changes in another project. See the internal documentation for more details.

1. Remove any installed npm version of the package.

   npm uninstall hamro-design-system

2. From the Hamro Design System folder link the package.

   npm link

3. Inside the consumer project link to the local package.

   npm link hamro-design-system

4. After testing, unlink the package in the consumer project.

   npm unlink hamro-design-system

5. Back in the Hamro Design System folder unlink the local package.

   npm unlink

6. Reinstall dependencies as needed.

   npm install

Package Entry Points

• JS import: hamro-design-system
• CSS entrypoint: hamro-design-system/styles.css