@superkoders/wl2021-ui
v3.2.2-3
Published
- Node.js (^14.0.0) - NPM (^6.14.0)
Downloads
4
Keywords
Readme
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.
- Download all repositories (UI, this repo) and also projects where you will test it (MyAccount and WhiteLabel)
- Go to UI folder and write
npm link
to terminal - Go to project folder and link UI with
npm link @superkoders/wl2021-ui
- Now we need solve missing react in UI. Go to project (MyAccount or WhiteLabel) terminal write
cd node_modules/react
and then againnpm link
- Go back to UI terminal and write
npm link react
- Go to project (MyAccount or WhiteLabel) terminal write
cd node_modules/react-dom
and then againnpm link
- 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).