@superkoders/wl2021-ui

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

npm run storybook

export stories presentation

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).