@noveo/react-components-v2

Noveo React Components v2

Components to use in internal Noveo applications.

Documentation is available in Storybook: Noveo React Components V2

Installation

Add the library with your project's package manager

e.g.

npm i @noveo/react-components-v2

or

yarn add @noveo/react-components-v2

Storybook deployment

You can check out this library's Storybook at the following link, which is publicly available: react-componets-v2 storybook This library is deployed using Gitlab pages.

Caveats: CI/CD is configured so that changes to master are published on successful jobs automatically.

But you have the option to do publication to any other branch manually (when: manual) on a trigger with the same conditions (successful completion of past jobs).

This can be useful in case of testing individual features, but don't forget to update the master deploy, after manual use (for this purpose it is enough to restart the stage "deploy" for the last commit on the master).

Also, Pipelines trigger only on new commits for the reasons above instead of optimizing (triggering only merge requests' events) the use of runners.

Styles

The library comes with shipped CSS files. No need to import them directly, but in order for the styles to work correctly, the bundler in your project should handle CSS imports (the ones like import index.css).

Icons

By default, all icons are stored in src/assets/icons and there is a specific folder for the dark theme - src/assets/icons/dark. You can also set your own paths for the light and dark icons by simply passing the lightThemeIconsPath and darkThemeIconsPath props to NvPublicPathProvider. Please note that the publicPath property in the NvPublicPathProvider is depricated, we kept it as fallback and it will be removed in future with breaking change updates.

Dark theme

To use the dark mode you need to wrap your components with the NvLightDarkThemeProvider and then use the NvSwitchLightDarkTheme to be able to switch between light and dark theme. Here an example how it can be used:

<NvLightDarkThemeProvider>
  <NvPublicPathProvider lightThemeIconsPath="assets/baseIcons" darkThemeIconsPath="assets/darkModeIcons">
    <NvSwitchLightDarkTheme showValue={false} />
    // your components here
  </NvPublicPathProvider>
</NvLightDarkThemeProvider>

Semantic-release usage

RU Documentation: https://docs.google.com/document/d/1F-0xiE6TdRPtGFUPmaT_WTtx9sIV0q5yH-OVddafxr8/edit?usp=sharing