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 lib:build 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.

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.