@micromed/herz-ui

Herz UI (/hɛrʦ/ - Hérts) is a design system containing a styleguide(colors, grid, icons, typography) and library of UI components

Showing:

Popularity

Downloads/wk

81

GitHub Stars

12

Maintenance

Last Commit

8d ago

Contributors

5

Package

Dependencies

13

License

ISC

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

herz-ui

Herz UI (/hɛrʦ/ - Hérts) is an implementation of UI Components based on Micromed's design system called Herz

Table of Contents

Installation

Using Herz-UI in your project

You can easily install in your project using your favorite package manager

// using npm
npm i @micromed/herz-ui

// using yarn
yarn add @micromed/herz-ui

you'll find our component documentation on our website

Want to contribute?

If you found a bug, have issues or feature proposals, feel free to open an Issue or send us a Pull Request, you can also read more about our contribution guidelines

Getting started


Setup

clonning the repo

git clone https://github.com/micromedio/herz-ui.git
cd herz-ui

installing dependencies with yarn

yarn 

Running in development:

yarn dev
  • Runs the app in the development mode.

  • The page will reload if you make edits.

  • You will also see any lint errors in the console

  • Project will be available at localhost:6060

Building for production

yarn build
  • Builds the app for production to the styleguide/ folder
  • Compiles the exported modules into lib/ folder
  • bundles react in production mode optimizing for best performance

Testing

yarn test
  • Launches the test runner in the interactive watch mode.

yarn build-storybook
  • Build storybook as a static project

yarn storybook



Testing in another project

While developing you may want to test your changes in another project that has herz-ui as a dependency. To do that we can use yarn link to link your local version of herz-ui to your project.

One problem that can arise from that is that there will be two react versions running in your application, resulting in this error: Invalid Hook Call Warning.

To fix this we need to not only link our local herz-ui to the other project, but also link react and react-dom from the other project to hearz-ui, so it uses those versions instead of the ones in herz-ui node_modules. The solution is this:

  1. In the external project folder run:
pushd node_modules/react && yarn link; popd
pushd node_modules/react-dom && yarn link; popd
  1. In the herz-ui folder run:
yarn link
yarn link react && yarn link react-dom
  1. In the external project folder run:
yarn link "@micromed/herz-ui"

Now the external project is using the local compiled version of herz-ui and there should be no react errors.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100