open-index/open-npm huggingface dataset:
npm package: @superkoders/wl2021-ui
Description: -   Node.js (^14.0.0) -   NPM (^6.14.0)
Latest version: 3.2.2-3

## Requirements

-   Node.js (^14.0.0)
-   NPM (^6.14.0)

## Getting Started

This repository is folder for UI componets for two projects - MyAccount and WhiteLabel. To both projects it is installed like node module.

## Instalation

It is quite funny to setup it for local development. We need to test UI standalone with storybook and also with projects. UI requires React package but we can't have that in node_modules here. Otherwise it cause problem with two version of react when we testing UI locally agaist to the project with `npm link`. Npm link is only way to do it straightforward so we need also solve missing react.

### Here we go.

1. Download all repositories (UI, this repo) and also projects where you will test it (MyAccount and WhiteLabel)
2. Go to UI folder and write `npm link` to terminal
3. Go to project folder and link UI with `npm link @superkoders/wl2021-ui`
4. Now we need solve missing react in UI. Go to project (MyAccount or WhiteLabel) terminal write `cd node_modules/react` and then again `npm link`
5. Go back to UI terminal and write `npm link react`
6. Go to project (MyAccount or WhiteLabel) terminal write `cd node_modules/react-dom` and then again `npm link`
7. Go back to UI terminal and write `npm link react-dom`

Step 2. and 3 repeat for all projects where you will test UI.

**Step 4. and 5., 6. and .7 you will need to do every time before you start testing on some project with UI. After this it will use same version of react.**

After this steps you can test UI standalone and also with one of projects. Happy coding!

## Storybook

Stories are located in the `src/stories` directory.

dev mode

```bash
npm run storybook
```

export stories presentation

```bash
npm run build-storybook
```

## Styles

All styles are located in `src/styles` directory. There must be a `style.scss` file there that exports all the styles and serves as an entry point for global styles. Some Sass variables (breakpoints) are injected into the `style.scss` file from Javascript (in both Next and Storybook) by overriding `next-variables` import in build step (in webpack config). These variables are defined in `src/config/style-variables.js` file and can be then used in both SCSS and Javascript (Typescript).