nortadax v1.0.46

Summary

Water UI (WUI) Components built by and for Waterplan.

How to use it

In your app index file, import ThemeProvider and set as so:

<ThemeProvider theme={{}}>
  <App />
</ThemeProvider>

Your theme will be merged with the Default theme used by the package. You can always override it.

Typescript

WUI component library is built with both TS and styled components for a better dev experience.

If you wish to set your own theme, we strongly advice you to extend styled components module declarations as so:

// import original module declarations
import 'styled-components';
import { IDefaultTheme } from '@watermvp/water-components';

// and extend them!
declare module 'styled-components' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface DefaultTheme extends IDefaultTheme {
    // here you can define your own custom theme styles.
  }
}

Aliases

When running storybook you may need to define new aliases in .storybook/main.js

Same for rollup. Inside rollup.config.js file you can find all defined aliases.

Storybook

yarn storybook

Publish

Before publishing the package it is necessary to increment the its version. If you introduce a change that breaks a package dependency, it is strongly recommended to increment the version major number. Follow versioning convention set by npm. To publish just run the following commands on the terminal to build the package and then publish

• yarn build
• npm publish

Troubleshooting

Storybook

• If you get an error when running yarn storybook, run it again with --no-manager-cache flag as following: yarn storybook --no-manager-cache

Resources

For more information about rollup and working with component libraries you can visit the following links:

• Creating a React component library with Storybook
• Getting ready for publishing
• Webpack and Rollup: the same but different
• Design Systems for Developers
• Publishing your private npm package to Gitlab registry