Datamasters Design System

Reusable component library for Datamasters' internal web applications

This library provides the UI components that form the foundation of the Datamasters Design System. It is currently used primarily in the company’s eLearning Dashboard, and is designed to support consistency, scalability, and ease of maintenance across all Datamasters web applications.

Key goals:

• Ensure consistent UI/UX across products
• Centralize and standardize component logic and styles
• Promote accessibility and responsive design

🚀 Installation

yarn add @datam/dashboard-design-system

ℹ️ Note:
The library is built and tested with Node.js v22, as specified in the .nvmrc file.
To ensure compatibility, it is recommended to use nvm and run:

nvm use

All required dependencies are declared in the package.json. No manual peer dependency installation is needed.

📚 Usage

Once installed, you can start using components in your Vue 3 + TypeScript project.

1. Import global styles

import '@datam/dashboard-design-system/styles';

This will apply the design system's base styles, tokens, and global settings.

2. Use components

All components are exposed via direct named exports. Example:

import ButtonCmp from '@datam/dashboard-design-system/ButtonCmp';

export default {
  components: {
    ButtonCmp,
  },
};

✅ No need to import styles for individual components — each component includes its own styles automatically.

⚙️ Vite integration (recommended)

If you're using Vite, we recommend the following configuration in your vite.config.js or vite.config.ts file.

SCSS auto-import

This injects the design system’s SCSS variables and mixins into all your styles, so you can use them without manual imports:

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "@datam/dashboard-design-system/autoimport";`,
    },
  },
},

Dependency optimization

Exclude the library from dependency optimization:

optimizeDeps: {
  exclude: ['@datam/dashboard-design-system'],
},

⚠️ This prevents Vite from pre-bundling the design system with esbuild, which can cause issues such as duplicated styles, broken HMR, or miscompiled SCSS during development.

🛠 Development

To contribute or develop the design system locally, clone the private GitHub repository:

git clone [email protected]:Datamasters-it/Datamasters-Dashboard-UI-Components.git
cd Datamasters-Dashboard-UI-Components

⚠️ Private repository
Access requires membership in the Datamasters GitHub organization or explicit repository permissions.

Run Storybook locally with Docker

make dup

This starts Storybook in development mode at http://localhost:6006.

📦 Build & Deployment

Build the component library

Connect inside the docker environment and run

yarn build

This runs:

• TypeScript check (vue-tsc)
• Vite build (vite build)
• Post-build export script (generate-exports.cjs)

The package is then ready to publish via:

npm publish

Build Storybook for production

yarn build-storybook

This generates a static version of Storybook for deployment.

✅ Pushing changes to the master branch automatically triggers the Storybook build and deployment to:

👉 https://storybook.datamasters.dev/

🔒 Access protected via HTTP Basic Auth. Credentials are stored in the Datamasters internal vault and shared with authorized users only.

📦 Available Exports

The library provides named exports for each component, as well as internal helpers and style utilities. Example:

import BadgeCmp from '@datam/dashboard-design-system/BadgeCmp';
import { breakpoints } from '@datam/dashboard-design-system/helpers/breakpoints';

Also available:

• Global styles: @datam/dashboard-design-system/styles
• SCSS auto-import: @datam/dashboard-design-system/autoimport

🧩 Component List

This is a non-exhaustive list of available components:

• AccordionCmp
• AchievementItem
• AppScaffold
• AttributeCmp
• AttributesList
• AvatarCmp
• BadgeCmp
• ButtonCmp
• ButtonToggle
• CardCmp
• CardsSlider
• CertificationItem
• CertificationsList
• CheckboxCmp
• CourseCard
• DropdownMenu
• FormCmp + all form inputs
• HeatmapChart, LineChart, RadarChart
• LeaderboardTable
• LogoCmp
• ModalCmp
• NotificationCmp
• ProgressBar, ProgressRings
• TabsCmp, StepsCmp
• TopBar, UserMenuItem
• SkeletonBox, SkeletonText
• ...and many more

📦 For the full list, check the exports field in the package.json.

📄 License

This project is licensed under the MIT License.

You are free to use, modify, and distribute this software for personal or commercial purposes, as long as the original license and copyright notice are included.

See the LICENSE file for more details.

👥 Maintainers

Developed with ❤️ by the Frankhood team for Datamasters.