@mmb-digital/design-system-web

design-system-web (react components library)

Prerequisities:

- node v16.20.2
- yarn v1.22.19

Startup:

- checkout repo

- run in command prompt:
"set HTTP_PROXY=http://{USER_SSO}:{SSO_PASSWORD}@wsa.lb.mbid.cz:8008"
"set HTTPS_PROXY=http://{USER_SSO}:{SSO_PASSWORD}@wsa.lb.mbid.cz:8008"
"set NO_PROXY=sourcerepos,artifactory,rhproxy,bitbucket,.ux.mbid.cz,.lb.mbid.cz,.mbid.cz"
"set NODE_OPTIONS=--max-old-space-size=8192"
"set Path={NODE_PATH};%Path%"

- "yarn"

Scripts:

- fix lint errors
"yarn lint:fix"

- fix prettier errors
"yarn prettier:fix"

- storybook dev
"yarn storybook"

- storybook build
"yarn storybook:build"

- run jest tests
"yarn test"

- rollup bundle
"yarn build"


Publishing package to npmjs.com:
- https://www.npmjs.com/package/@mmb-digital/design-system-web
- you must be added to the @mmb-digital organization at npmjs.com (you will need to enable two-factor authentication on your npmjs.com account)
- upgrade version of package in package.json
- npm login
- rm -rf dist/
- yarn build
- npm publish --access public

Styling rules

For each component, a corresponding *.styles.ts file is created to manage its styles.

- styling is done primarily using styled-components.
- all colors and other common values are in theme variables to ensure consistency throughout the project.
- all components have to be responsive
- the best approach is mobile first, set sizes for mobile and rules for higher resolutions