EOS UI Kit - UI Component Library

Enterprise-grade Vue 3 component library for the Estate Operations System. Built with TypeScript, Vite, SCSS, and a comprehensive design system featuring design tokens, reusable components, and visual consistency across applications.

Version: 0.17.1
Type: ESM (supports tree-shaking)
Peer Dependency: Vue 3.3.0+

Overview

EOS UI Kit is a modular, independently-developed npm package providing a collection of reusable UI components designed for Vue 3 applications. The library implements a complete design system with:

• 8+ Base Components: Button, Input, Select, Modal, Card, Tabs, Tag, Table
• Design Token System: Colors, typography, spacing, border radius, shadows
• Icon Library: 7 SVG Material Design icons optimized for web
• Comprehensive Styling: SCSS with scoped styles, CSS Variables, BEM methodology
• Full TypeScript Support: Strict type checking for all components and props
• Interactive Documentation: Storybook with 50+ stories and auto-generated API docs
• Visual Testing: Playwright-based screenshot regression testing
• Unit Testing: 93+ component tests with Playwright Component Testing

Installation

npm install eos-ui-kit

import { EosButton, EosInput } from 'eos-ui-kit'
import 'eos-ui-kit/dist/style.css'

Nuxt 3: Add build: { transpile: ['eos-ui-kit'] } to nuxt.config.ts

Development

Setup

npm install

Available Commands

# Start development server with hot reload
npm run dev

# Launch interactive Storybook documentation (port 6006)
npm run storybook

# Build Storybook for deployment
npm run build-storybook

# Build library for production
npm run build

# Preview production build locally
npm run preview

Testing

Running Tests

# Run all tests once
npm test

# Debug tests in browser
npm run test:debug

# Open interactive UI mode
npm run test:ui

Test Coverage

Comprehensive unit tests across 8 components:

| Component | Tests | Coverage | |-----------|-------|----------| | Button | 15 | All sizes, variants, states, events | | Card | 7 | Rendering, slots, click events | | Input | 12 | All input types, validation, reactivity | | Modal | 9 | Visibility, slots, overlays | | Select | 12 | Options, selection, dropdown | | Tabs | 11 | Tab navigation, active states, keyboard support | | Table | 15 | Sorting, pagination, row events | | Tag | 12 | Variants, sizes, color styling | | Total | 93+ | All major functionality |

Browser Coverage

Tests run in real browsers for comprehensive compatibility:

• Chromium — Chrome, Edge, Brave

Configuration

Tests are configured in playwright.config.ts:

• Real browser testing with Chromium
• Traces on first retry for debugging
• Screenshots on failure
• Timeouts configured for reliable component testing

Visual Regression Tests

Screenshot-based testing using Playwright detects unintended UI changes by capturing and comparing visual output. Tests run against a live Storybook instance.

Prerequisites

Storybook must be running before executing visual tests:

# Terminal 1: Start Storybook
npm run storybook

Running Tests

# Terminal 2: Run visual tests
npm run test:visual

# Update baseline screenshots after intentional UI changes
npm run test:visual:update

Test Details

• Test File: visual-tests/visual-regression.spec.ts
• Screenshot Location: visual-tests/__screenshots__/
• Browser: Chromium
• Timeout: 30 seconds per test
• Current Tests: 1 visual test that captures the first available story

Configuration

Tests are configured in playwright.visual.config.ts:

• Connects to Storybook at http://localhost:6006
• Captures screenshots on test failure
• Stores baseline images for comparison
• Uses headed browser mode for visual debugging

Project Structure

ui-kit/
├── src/
│   ├── components/              # Vue components
│   │   ├── button/
│   │   │   ├── Button.vue       # Component implementation
│   │   │   ├── types.ts         # TypeScript types and enums
│   │   │   └── index.ts         # Component export
│   │   ├── input/
│   │   ├── card/
│   │   ├── modal/
│   │   ├── select/
│   │   ├── table/
│   │   ├── tabs/
│   │   ├── tag/
│   │   └── icons/               # Auto-generated icon components
│   ├── styles/
│   │   ├── tokens.css           # Design tokens (colors, spacing, etc.)
│   │   ├── reset.css            # Browser normalization
│   │   └── typography.css       # Typography utilities and classes
│   ├── utils/                   # Utility functions
│   ├── types/                   # Global TypeScript types
│   ├── icons/                   # Source SVG files (input for generation)
│   ├── scripts/
│   │   └── generate-icons.ts    # Icon generation script
│   ├── stories/                 # Storybook documentation
│   ├── index.ts                 # Main library export (barrel export)
│   └── main.ts                  # Storybook entry point
├── tests/                       # Unit test files (.spec.ts)
├── visual-tests/                # Screenshot/visual tests
├── dist/                        # Compiled output (production)
├── playwright.config.ts         # Unit test configuration
├── playwright.visual.config.ts  # Visual test configuration
├── vite.config.ts               # Build configuration
├── tsconfig.json                # TypeScript configuration
├── package.json
└── README.md

Design System

Design Tokens

CSS variables in src/styles/tokens.css: colors, typography, spacing, border-radius. Override any token to customize appearance:

:root {
  --eos-color-primary-500: #your-color;
  --eos-font-size-base: 18px;
}

Icon System

Place SVG (24×24px) in src/icons/, run npm run generate-icons to auto-generate components in src/components/icons/.

Example: chevron-down.svg → EosChevronDownIcon.vue (PascalCase + "Icon")

Styling Architecture

Global Styles

Located in src/styles/:

• tokens.css — Design tokens (colors, typography, spacing)
• reset.css — Browser normalization
• typography.css — Text utilities and semantic classes

All imported in index.ts and bundled into dist/style.css.

Documentation

Storybook

Interactive component documentation with live code editor and props table.

npm run storybook
# Opens http://localhost:6006

Coverage:

• 50+ stories demonstrating all component states
• JSDoc descriptions for props and events
• Interactive playground for prop experimentation

Performance

Minimal dependencies, tree-shaking support, optimized SVG icons. Import only what you need: import { EosButton } from 'eos-ui-kit'

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 15+
• Edge 90+