Kvdbil Components

The purpose of this repo is to have a collection of reusable components to be used in our other repos. The primary goal is to have most shared components here for both the Kvd.se and Fleet-manager-client repos (not Cargo).

The component library is published in public npm repo https://www.npmjs.com/package/@kvdbil/components where we can find the lates version tag.

All changes are done using conventional commits so CHANGELOG.md is generated automatically.

Explore kvdbil components, theme (e.g. colors), typography and icons

We use Storybook to display all the components, icons, theme and more. This can be found here:

• locally - yarn dev or yarn start
• deployed last version - http://kvdbil-components.development.kvd.se

Work with kvdbil-components

All changes that affect all shared things in this repo must be done using conventional commits (https://www.conventionalcommits.org). All commit messages are validated by commitlint (https://github.com/conventional-changelog/commitlint). Examples for version bumping:

• bugfix (e.g. styling component fix) - example: git commit -m "fix(KDEV-1337): fixed padding issue for Button"After merge to master a version be bumped e.g. from 5.2.2 to 5.2.3

• new feature (e.g adding new component or extending existing one) - example: git commit -m "feat(KDEV-1338): Button component has been added"After merge to master a version be bumped e.g. from 5.2.2 to 5.3.0

• BREAKING CHANGE (e.g removing required prop from component) Example: git commit -m "feat(KDEV-1339): removed onClick prop from Button" and next add a commit message footer with git commit --amend After merge to master a version be bumped e.g. from 5.2.2 to 6.0.0 Should look something like that:

  feat(KDEV-1339): removed onClick prop from Button

  BREAKING CHANGE: The onClick prop in Button component has been removed

For a changes that do not affect any shared components we can use:

• git commit -m "docs(KDEV-1222): updated readme file"

When adding new icons:

• Add the SVG to src/icons/svgs/
• Make sure all stroke and fill attributes of all the path are set to "currentColor"
• Run yarn build
• Run yarn start and verify that your icon has been added to the icons page and looks good

Outdated dependencies

• @types/react, @types/react-dom, react, react-dom, react-is - Big task (KVDBIL-5523)
• react-day-picker - quite a big task (KVDBIL-3865)
• eslint-plugin-mdx - depends on packages that uses cjs and not esm
• storybook, @storybook/addon-themes, @storybook/react, @storybook/react-webpack5 - Big task (KVDBIL-6647)
• react-router, react-router-dom - KVDBIL-6650