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