npm package: @septeo/vue-design
Description: Septeo Design System Vue components
Author: Septeo
Latest version: 1.0.0

# Septeo Vue Design System

A Vue.js implementation of the Septeo Design System, following atomic design methodology and maintaining consistency with the existing React and Angular implementations.

## Overview

The Septeo Vue Design System is a library of reusable UI components built with Vue 3 and TypeScript. It provides a consistent and accessible user interface for Septeo applications, following the same design principles and tokens as the React and Angular implementations.

This implementation is part of the Septeo Design System family, which includes:
- React implementation (@react-design)
- Angular implementation (angular/projects/design-system)
- Vue implementation (@vue-design)

All implementations share the same design tokens, principles, and component APIs to ensure consistency across different frameworks.

## Features

- Built with Vue 3 and TypeScript
- Follows atomic design methodology
- Consistent with the existing React and Angular implementations
- Includes Storybook documentation
- Fully tested components
- Accessible and responsive

## Installation

```bash
npm install @septeo/vue-design
```

## Usage

### Import the styles

```js
// In your main.js or main.ts file
import '@septeo/vue-design/dist/style.css';
```

### Use components

```vue
<template>
  <div>
    <dss-button variant="primary">Click me</dss-button>
    <dss-radio label="Option 1" name="options" value="option1" v-model="selectedOption" />
    <dss-radio label="Option 2" name="options" value="option2" v-model="selectedOption" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Button as DssButton, Radio as DssRadio } from '@septeo/vue-design';

const selectedOption = ref('option1');
</script>
```

### Register globally

```js
// In your main.js or main.ts file
import { createApp } from 'vue';
import App from './App.vue';
import DssComponents from '@septeo/vue-design';

const app = createApp(App);

// Register all components
Object.entries(DssComponents).forEach(([name, component]) => {
  app.component(`Dss${name}`, component);
});

app.mount('#app');
```

## Component Structure

The design system follows atomic design methodology, organizing components into:

- **Atoms**: Basic building blocks (Button, Input, Radio, etc.)
- **Molecules**: Groups of atoms (Card, FormField, etc.)
- **Organisms**: Groups of molecules (Form, etc.)
- **Templates**: Page layouts
- **Pages**: Specific instances of templates

### Available Components

#### Atoms
- **Button**: Action trigger with multiple variants and sizes
- **Checkbox**: Selection control for multiple options
- **Radio**: Selection control for single option from a group
- **Input**: Text input field with various types

#### Molecules
- **Card**: Container for related content and actions
- **FormField**: Wrapper for form inputs with label and helper text

#### Organisms
- **Form**: Container for form elements with submission handling

## Design Tokens

The design system uses a set of design tokens for consistent styling:

- **Colors**: Primary, secondary, accent, and semantic colors
- **Typography**: Font families, sizes, weights, and line heights
- **Spacing**: Consistent spacing scale
- **Borders**: Border widths, radii, and styles
- **Shadows**: Box shadows and focus states
- **Breakpoints**: Responsive breakpoints

### Color Palette

The design system uses a comprehensive color palette with semantic meaning:

- **Blues**: Primary brand colors (--blue-05 to --blue-80)
- **Oranges**: Accent colors (--orange-05 to --orange-80)
- **Teals**: Secondary colors (--teal-05 to --teal-90)
- **Reds**: Alert/Error colors (--red-05 to --red-90)
- **Yellows**: Warning colors (--yellow-05 to --yellow-100)
- **Purples**: Accent colors (--purple-05 to --purple-100)
- **Grays**: Neutral colors (--gray-05 to --gray-90)

### Typography

- **Font Families**:
  - Base Font: Inter (sans-serif)
  - Heading Font: Poppins (sans-serif)

- **Font Sizes**:
  - XS: 10px
  - SM: 12px
  - Base: 14px
  - MD: 16px
  - LG: 18px
  - XL: 20px
  - 2XL: 22px
  - 3XL: 24px
  - 4XL: 28px
  - 5XL: 32px
  - 6XL: 56px

- **Font Weights**:
  - Regular: 400
  - Medium: 500
  - Semibold: 600
  - Bold: 700

## Accessibility

All components are built with accessibility in mind:

- Proper ARIA attributes
- Keyboard navigation
- Focus management
- Color contrast
- Screen reader support

## Browser Support

The design system supports all modern browsers:

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Development

### Setup

```bash
# Clone the repository
git clone https://github.com/septeo/design-system.git

# Navigate to the Vue design system directory
cd design-system/vue-design

# Install dependencies
npm install

# Start Storybook
npm run storybook
```

### Build

```bash
# Build the library
npm run build

# Build Storybook
npm run build-storybook
```

### Testing

```bash
# Run tests
npm run test

# Run tests with coverage
npm run test:coverage
```

## Contributing

Please see the [CONTRIBUTING.md](./CONTRIBUTING.md) file for details on how to contribute to the design system.

## License

This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.