@sellmate/design-system

Sellmate Design System

A comprehensive web components library built with Stencil for Sellmate.

Installation

npm install @sellmate/design-system

or

yarn add @sellmate/design-system

Quick Start

Lazy Loading (Recommended for most projects)

Include this script in your HTML:

<script type="module" src="https://unpkg.com/@sellmate/design-system"></script>

Then use any component:

<sd-button name="primary_sm" label="Click me"></sd-button>

ES Module Import

import '@sellmate/design-system/dist/design-system/design-system.esm.js';

function App() {
  return (
    <sd-button
      name="primary_sm"
      label="Click me"
      onClick={() => console.log('clicked')}
    ></sd-button>
  );
}

export default App;

CommonJS (Node.js)

const { defineCustomElements } = require('@sellmate/design-system/loader');

defineCustomElements();

Available Components

• sd-button - Button component (preset-based)
• sd-input - Input field component
• sd-checkbox - Checkbox component
• sd-select - Select dropdown component
• sd-table - Data table component
• sd-tag - Tag/badge component
• sd-icon - Icon component
• sd-tooltip - Tooltip component
• sd-popover - Popover component
• sd-date-picker - Date picker component
• sd-date-range-picker - Date range picker component
• sd-pagination - Pagination component

Framework Integration

React

Use the React wrapper package for better TypeScript support:

npm install @sellmate/design-system-react

import { SdButton } from '@sellmate/design-system-react';

export function App() {
  return <SdButton name="primary_sm" label="Click me" />;
}

Vue 3

Use the Vue wrapper package:

npm install @sellmate/design-system-vue

<template>
  <SdButton name="primary_sm" label="Click me" @click="handleClick" />
</template>

<script setup>
import { SdButton } from '@sellmate/design-system-vue';

const handleClick = () => {
  console.log('clicked');
};
</script>

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Test Scenario Report

Generate a readable markdown summary of all spec and e2e scenarios:

From packages/stencil:

npm run test:scenarios

From monorepo root:

npm run test:scenarios:stencil

Output file:

• TEST_SCENARIOS.md

Custom output path:

npm run test:scenarios -- --out ./docs/test-scenarios.md

License

MIT