Design System - Web Components


🌐 View the Live Design System Site on GitHub Pages

A comprehensive design system built with native Web Components, featuring layout components and form elements with consistent styling and behavior.

Features

- Native Web Components: Built using vanilla JavaScript and Web Components standards
- Shadow DOM: Encapsulated styling with mode: 'open' for experimentation
- CSS Custom Properties: Design tokens for consistent theming
- Flexbox Layout: Responsive layout system with ds-row and ds-col
- Form Components: Complete set of form elements with accessibility support
- Customizable Design Tokens: Initialize with your own brand colors, spacing, and typography
- Theme Switching: Dynamic theme switching with runtime token updates
- TypeScript Support: Full TypeScript declarations for type safety
- Storybook Integration: Interactive documentation and testing
- JSDoc Documentation: Comprehensive API documentation
- No Dependencies: Pure vanilla JavaScript implementation

Components

$3

- ds-page - Page container with consistent max-width and padding
- ds-row - Flexbox row container with configurable alignment and spacing
- ds-col - Flexbox column container with configurable growth and alignment

$3

- ds-form - Form container with validation and accessibility support
- ds-text-input - Text input with support for various input types
- ds-button - Button component with variants and types
- ds-radio - Radio button for single selection within groups
- ds-checkbox - Checkbox for individual or grouped selections
- ds-textarea - Multi-line text input
- ds-select - Dropdown select with single/multiple selection
- ds-option - Select option component
- ds-label - Form label with association support
- ds-fieldset - Form grouping container
- ds-legend - Fieldset caption/title

Installation

``bash
npm install standards-ui
`

$3

If you're using TypeScript, the library includes full type definitions. The JSX elements are automatically recognized by TypeScript when you import the library:

`typescript
import { init } from "standards-ui";
import "standards-ui/styles.css";
`

All the custom web component elements like , , etc. are automatically recognized by TypeScript.

Quick Start

$3

`javascript
import { init, DEFAULT_TOKENS } from "standards-ui";

// Initialize with default tokens
init(DEFAULT_TOKENS);

// Or customize with your own tokens
init({
...DEFAULT_TOKENS,
color: {
...DEFAULT_TOKENS.color,
primary: "#your-brand-color",
secondary: "#your-secondary-color",
},
spacing: {
...DEFAULT_TOKENS.spacing,
md: "20px",
},
});
`

$3

Include the design system styles and components in your HTML:

`html


















My Application







`

$3

#### React

`jsx
import React, { useEffect } from "react";
import { init } from "standards-ui";
import "standards-ui/styles.css";

// The JSX elements are automatically recognized by TypeScript

function App() {
useEffect(() => {
// Initialize the design system
init();
}, []);

return (



Click me



);
}
`

#### Event Handling in React

`jsx
import React, { useRef, useEffect } from "react";

function FormExample() {
const inputRef = useRef(null);

useEffect(() => {
const input = inputRef.current;
if (input) {
const handleChange = (e) => {
console.log("Value changed:", e.detail.value);
};

input.addEventListener("ds-change", handleChange);
return () => input.removeEventListener("ds-change", handleChange);
}
}, []);

return ;
}
`

#### TypeScript Support

The library includes full TypeScript support:

1. JSX elements are automatically recognized by TypeScript
2. All component props are properly typed
3. No additional type imports needed

#### Angular

`html
(input)="onInput($event)"
(change)="onChange($event)"
(ds-change)="onDsChange($event)">
`

#### Vue

`html

`

#### Svelte

`html
on:input="{onInput}"
on:change="{onChange}"
on:ds-change="{onDsChange}" />
`

Testing

🧪 Zero-configuration Jest testing with true JSDOM compatibility!

- Jest Setup Guide: Complete copy-paste setup for Jest tests
- Testing Utilities Guide: Comprehensive testing documentation

Quick Jest Setup:

`javascript
import { setupTesting } from "standards-ui/testing";
beforeAll(async () => await setupTesting());
// Now all ds-* components work perfectly in Jest/JSDOM!
`

Documentation

- Live Site (Landing Page): Main entry point for the design system
- Storybook: Interactive component documentation and testing
- Storybook: Interactive component examples and documentation
- JSDoc Documentation: Comprehensive API documentation
- Additional Markdown Docs: Extra documentation (local repo only)

Design Tokens

The design system uses CSS custom properties for consistent theming:

Browser Support

- Chrome 67+
- Firefox 63+
- Safari 10.1+
- Edge 79+

Development

$3

`
ai_design_system/
├── src/ # Source code and components
│ ├── components/ # Web Components
│ ├── design_system/ # Design tokens and base styles
│ └── stories/ # Storybook stories
├── docs/ # Documentation
├── plans/ # Development plans and specifications
├── tests/ # Test files

├── .storybook/ # Storybook configuration
├── .github/ # GitHub workflows and templates
├── docs-output/ # JSDoc documentation output
├── storybook-static/ # Built Storybook files
├── node_modules/ # Dependencies
└── README.md
`

$3

- npm start: Start development server
- npm run storybook: Start Storybook
- npm run build-storybook: Build Storybook for production
- npm run generate-docs: Generate JSDoc documentation
- npm run serve-docs: Generate docs and serve locally
- npm test`: Run tests (if configured)

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is licensed under the MIT License.