@eang/web-components

A reactive web component framework built with Lit, providing a comprehensive set of UI components for modern web applications.

Installation

npm install @eang/web-components

Quick Start

// Import components
import {EaTree, EaTreeItem} from '@eang/web-components/tree'
import '@eang/web-components/themes/all.css'

// Use in your application
const tree = document.createElement('ea-tree')
document.body.appendChild(tree)

Import Patterns

Main Entry Point

// Import all components
import * as EangUI from '@eang/web-components'

// Or import specific components
import {EaTree, PersonShape, ColorSchemeToggle} from '@eang/web-components'

Subpath Imports (Recommended for Tree-Shaking)

// Tree components
import {EaTree, EaTreeItem} from '@eang/web-components/tree'

// Shape components
import {PersonShape, ShapeRegistry} from '@eang/web-components/shapes'

// Color scheme toggle
import {ColorSchemeToggle} from '@eang/web-components/color-scheme-toggle'

// Utilities
import {Form} from '@eang/web-components/Form'
import {CssMode} from '@eang/web-components/CssMode'

Importing Themes

// Import all themes
import '@eang/web-components/themes/all.css'

// Or import specific themes
import '@eang/web-components/themes/material/variables.css'
import '@eang/web-components/themes/mode/variables.css'

Documentation

For detailed documentation on importing and using components, see:

• Import Guide - Comprehensive guide on import patterns
• Installation Guide - Installation instructions
• Component Documentation - Individual component docs

Available Components

• Tree Components (@eang/web-components/tree) - Hierarchical tree view with expand/collapse
• Shapes (@eang/web-components/shapes) - Visual shape components (Person, Group, Organization, System, etc.)
• Color Scheme Toggle (@eang/web-components/color-scheme-toggle) - Dark/light mode toggle
• Form Utilities (@eang/web-components/Form) - Form handling utilities
• CSS Utilities (@eang/web-components/CssMode, @eang/web-components/CssShapes) - CSS helper utilities

Linting with ESLint, Prettier, and Types

To scan the project for linting errors, run

npm run lint

You can lint with ESLint and Prettier individually as well

npm run lint:eslint

npm run lint:prettier

To automatically fix many linting errors, run

npm run format

You can format using ESLint and Prettier individually as well

npm run format:eslint

npm run format:prettier

Testing

To run the Vitest test suite, run

npm run test

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

npm run test:watch

Release (local, semantic-release)

Prereqs:

• Use conventional commits
• Set NPM_TOKEN in your shell

To ensure publish only happens after tests pass, the release script runs tests first (e.g., npm run test && semantic-release --no-ci).

Recommended flow (tests must pass before publish):

npm ci
npm run lint
npm run test
npm run build
npm run release:check
npm run release