My Design System

A tree-shakeable Vue 3 component library with bundled styles.

Features

• Tree-shakeable components, utilities, and directives
• LESS styles bundled with components
• Storybook for component development and documentation
• Accessibility-compliant components
• Server-Side Rendering (SSR) support

Installation

npm install my-design-system

Peer Dependencies

This library has the following peer dependencies that need to be installed separately:

npm install vue autonumeric autosize focus-trap perfect-scrollbar lodash-es

Usage

Using Components

<template>
  <div>
    <ds-button>Click Me</ds-button>
    <ds-card>
      <template #header>Card Title</template>
      This is a card component.
      <template #footer>Card Footer</template>
    </ds-card>
  </div>
</template>

<script>
import { Button, Card } from 'my-design-system';

export default {
  components: {
    'ds-button': Button,
    'ds-card': Card
  }
}
</script>

Using Directives

<template>
  <div v-click-outside="onClickOutside">
    Click outside this element
  </div>

  <div v-tooltip="'This is a tooltip'">
    Hover over me
  </div>
</template>

<script>
import { vClickOutside, vTooltip } from 'my-design-system';

export default {
  directives: {
    'click-outside': vClickOutside,
    'tooltip': vTooltip
  },
  methods: {
    onClickOutside() {
      console.log('Clicked outside');
    }
  }
}
</script>

Using Utilities

import { formatDate, createUuid } from 'my-design-system';

// Format a date
const formattedDate = formatDate(new Date(), 'MM/DD/YYYY');

// Generate a UUID
const uuid = createUuid();

Using Design Tokens

import { colors, spacing, typography } from 'my-design-system';

console.log(colors.primary); // #1976D2
console.log(spacing.md); // 16px
console.log(typography.fontSize.lg); // 18px

Development

Setup

# Install dependencies
npm install

# Start development server with watch mode
npm run dev

# Run Storybook
npm run storybook

# Run tests
npm run test

Building

# Build the library
npm run build

# Build Storybook documentation
npm run build-storybook

License

ISC