ChooseMyCompany UI

ChooseMyCompany UI is a UI component library that implements , our design system. ChooseMyCompany UI is written in Vue.js and its objectives are to:

• Create reusable UI components to accelerate frontend development.
• Create UI consistency for all components within ChooseMyCompany.

Usage

1. To use ChooseMyCompany UI in your project, add it as a dependency:

   pnpm add @choosemycompany/ui
   

2. Include the required stylesheets in your app.

   @import "@choosemycompany/ui/dist/assets/index.css";
   

3. Import the components as desired:

   import { CmcButton } from "@choosemycompany/ui";
   

   Note: ChooseMyCompany UI is compatible with tree-shaking, you may enable this in your project to reduce bundle sizes.

Quick start - development

Make sure you have Node 23.x (LTS) and pnpm 10.12 or newer.

# Clone the project
git clone [email protected]:choosemycompany/cmc-ui.git

# Navigate to the root of the project
cd cmc-ui

# Install the project
make install

Go to http://localhost:6006/

Link the design system to test changes in you app

Create docker-compose.override.yml in cmc-frontend/

Example for the commercial service:

services:
  commercial:
    volumes:
      - ./commercial/docker-entrypoint.sh:/usr/local/bin/docker-entrypoint
      - ./commercial:/srv/app/commercial:cached
      - ./commercial/node_modules:/srv/app/commercial/node_modules:delegated
      - /tmp/.X11-unix:/tmp/.X11-unix
      - ../cmc-ui:/srv/app/cmc-ui

Create pnpmfile.local.cjs in /srv/app/commercial

module.exports = {
  hooks: {
    readPackage(pkg) {
      if (pkg.dependencies?.['@choosemycompany/ui']) {
        pkg.dependencies['@choosemycompany/ui'] = 'link:../cmc-ui';
      }
      return pkg;
    },
  },
};

Enable it locally via .npmrc (do not commit)

pnpmfile=pnpmfile.local.cjs

Now each time you want to see the design system changes in your application, just run pnpm build:lib in cmc-ui, it should reload your application with the updated components.

Design tokens

ChooseMyCompany UI uses design tokens to maintain a single source of truth that, through automation, can be formatted for different uses. Read more about design tokens on the Design Tokens Community Group.

Releasing

The tag must match the version in package.json, and that version must be exactly one patch, minor or major step above the latest version published on npm.

1. On develop, bump version in package.json in a pull request.

2. Open a release pull request from develop to main and merge it with a merge commit, not a squash, so main and develop keep the same history.

3. Check the Storybook in preprod.

4. Tag main and push the tag:

   git fetch origin
   git tag v1.2.3 origin/main
   git push origin v1.2.3
   

Rules of dev

• Constants that will be used by library users should be defined in <ComponentName>.constants.ts and constants used in the components must be placed in <ComponentName>.vue.ts.