# Noveo React Components v2

Components to use in internal Noveo applications.

Documentation is available in [Storybook](https://storybook.js.org/): [Noveo React Components V2](http://noveo-internal-tools.gitlab.noveogroup.com/ui-kit-components/react-components-v2/?path=/docs/nvaccordion--docs)

## 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](http://noveo-internal-tools.gitlab.noveogroup.com/ui-kit-components/react-components-v2/?path=/docs/nvaccordion--docs)
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

<!-- ## Contributing -->

<!-- See [CONTRIBUTING.md](CONTRIBUTING.md) -->