AC TOTVS Design System 🎨

A comprehensive, accessible, and modern Angular component library for building consistent user interfaces.

📚 Overview

The AC TOTVS Design System is a production-ready Angular component library that provides:

• 🎯 Consistency - Unified design language across your applications
• ♿ Accessibility - WCAG 2.1 AA compliant components with full WAI-ARIA support
• 🎨 Design Tokens - Customizable theming system with pre-built design tokens
• 📱 Responsive - Mobile-first, responsive design by default
• ⚡ Performance - Built with Angular signals for optimal change detection
• 🧪 Well-tested - Comprehensive test coverage and Storybook documentation
• 📖 Interactive Documentation - Full documentation with Storybook integration

🚀 Installation

Via NPM

npm install @ac-totvs-ds/ds

Via Yarn

yarn add @ac-totvs-ds/ds

Via PNPM

pnpm add @ac-totvs-ds/ds

🎯 Quick Start

1. Import Styles

Add the design system styles to your global styles file (styles.scss):

@import '@ac-totvs-ds/styles';

2. Use Components

Select Field Example

Template-driven Forms:

<ds-select-field
  [(ngModel)]="selectedValue"
  [options]="options"
  label="Choose an option"
  placeholder="Select..."
></ds-select-field>

Reactive Forms:

<form [formGroup]="form">
  <ds-select-field
    formControlName="selectedOption"
    [options]="options"
    label="Choose an option"
    placeholder="Select..."
  ></ds-select-field>
</form>

Component Logic:

import { DsSelectFieldComponent } from '@ac-totvs-ds';
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  imports: [DsSelectFieldComponent],
})
export class ExampleComponent {
  selectedValue: string;
  
  form = new FormGroup({
    selectedOption: new FormControl('', Validators.required),
  });

  options = [
    { id: 1, label: 'Option 1', value: '1' },
    { id: 2, label: 'Option 2', value: '2' },
    { id: 3, label: 'Option 3', value: '3' },
  ];
}

Switch Example

Template-driven Forms:

<ds-switch
  [(ngModel)]="isEnabled"
  label="Enable notifications"
></ds-switch>

Reactive Forms:

<form [formGroup]="form">
  <ds-switch
    formControlName="notificationsEnabled"
    label="Enable notifications"
  ></ds-switch>
</form>

Component Logic:

import { DsSwitchComponent } from '@ac-totvs-ds';
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-switch-example',
  templateUrl: './switch-example.component.html',
  imports: [DsSwitchComponent],
})
export class SwitchExampleComponent {
  isEnabled = false;
  
  form = new FormGroup({
    notificationsEnabled: new FormControl(false),
  });
}

🎨 Design Tokens

Customize the design system using CSS variables:

// Override design tokens
:root {
  --ds-color-primary-500: #1965A5;
  --ds-color-secondary-500: #8896C4;
  --ds-color-danger-500: #EF4444;
  --ds-color-success-500: #22C55E;
  --ds-color-warning-500: #FBBF24;
  --ds-color-info-500: #3B82F6;
  
  --ds-font-family: 'Google Sans', 'Roboto', sans-serif;
  --ds-radius-sm: 4px;
  --ds-radius-lg: 12px;
}

🔧 Development

Prerequisites

• Node.js 18+
• Angular 21+
• npm or yarn

Setup

# Clone the repository
git clone https://github.com/ac-totvs/ds.git
cd ac-totvs-ds

# Install dependencies
npm install

# Start development server with Storybook
npm run storybook

# Run tests
npm test

# Build the library
npm run build

Project Structure

projects/ds/
├── src/
│   ├── lib/
│   │   ├── components/
│   │   │   ├── select/        # Select component
│   │   │   ├── switch/        # Switch component
│   │   ├── styles/            # Global styles
│   │   ├── tokens/            # Design tokens
│   │   └── public-api.ts       # Public exports
│   └── public-api.ts
├── ng-package.json
└── package.json

📝 Scripts

# Development
npm run dev              # Start esbuild dev server
npm run storybook      # Start Storybook documentation

# Testing
npm test               # Run unit tests with Vitest
npm run test:watch    # Run tests in watch mode

# Building
npm run build          # Build the library for production
npm run build:lib     # Build library only

# Linting
npm run lint          # Run ESLint
npm run lint:fix      # Fix ESLint issues