@dryl/ui

Reusable Angular UI components and theming system for dryl projects.

Installation

Local Development (File Reference)

// In your project's package.json
{
  "dependencies": {
    "@dryl/ui": "file:../dryl/ui/dist/dryl/ui"
  }
}

Then run npm install.

NPM Package (If Published)

npm install @dryl/ui

Usage

Import components in your Angular module:

import { ButtonComponent, InputComponent, SelectComponent, TextareaComponent, ModalComponent, TooltipComponent } from "@dryl/ui";

@Component({
  standalone: true,
  imports: [ButtonComponent, InputComponent, SelectComponent, TextareaComponent, ModalComponent, TooltipComponent],
  // ...
})
export class YourComponent {}

Import global styles in your styles.scss:

@import "@dryl/ui/styles";

Available Components

• Button - Flexible button component
  • Optional leftIcon, label, rightIcon inputs
  • Variants: primary, secondary, tertiary, danger
  • Sizes: sm, md, lg
  • States: disabled, highlighted, fullWidth
• Input - Text input component
  • Types: text, number, email, password, url, tel, search
  • Supports min, max, step for numbers
  • ControlValueAccessor compatible
• Select - Dropdown/select component
  • Custom styling with arrow indicator
  • Placeholder support
  • Disabled options
  • ControlValueAccessor compatible
• Textarea - Multi-line text input
  • Configurable rows
  • Resize control (none, vertical, horizontal, both)
  • ControlValueAccessor compatible
• Modal - Modal dialog component
  • Backdrop with blur
  • Accessible close button
• Tooltip - Tooltip overlay
  • Position: top, bottom, left, right
• Icon - Material Symbols icon display

Theming

The library uses CSS variables for theming. In your root styles, define:

:root {
  --background-primary: #fafafa;
  --background-secondary: #ffffff;
  --background-tertiary: #e6e6e2;
  --border-primary: #000000;
  --accent-primary: #01a06a;
  --text-primary: #000000;
  --text-secondary: #565656;
  --border-radius: 0.25rem;
  --space-xs: 0.375rem;
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
}

[data-theme="dark"] {
  --background-primary: #100202;
  --background-secondary: #11081f;
  --background-tertiary: #160b267e;
  --border-primary: #ebe1cc;
  --accent-primary: #dca87a;
  --text-primary: #ebe1cc;
  --text-secondary: #b39275;
}

Documentation

View live examples and documentation at dryl.surge.sh

Design Principles

• Mobile-first: All components are responsive and mobile-optimized
• SCSS-first: Leverages SCSS features for maintainable styles
• Generic: Configurable through inputs, not custom solutions
• Accessible: Built with accessibility in mind

Development

This package is part of the dryl monorepo. See the main repository for development documentation.

Running end-to-end tests

For end-to-end (e2e) testing, run:

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.