@workshack/ui

Workshack UI component library for Angular applications with layout and navigation components.

Installation

npm install @workshack/ui

Components

LayoutModule

Import the complete layout module to get access to all layout components:

import { LayoutModule } from '@workshack/ui';

@Component({
  imports: [LayoutModule],
  template: `
    <ui-layout>
      <ui-menu>
        <ui-menu-item label="Home" icon="home"></ui-menu-item>
        <ui-menu-item label="Settings" icon="settings"></ui-menu-item>
      </ui-menu>
      <ui-content>
        <ui-header label="Page Title">
          <button>Action Button</button>
        </ui-header>
        <!-- Your content here -->
      </ui-content>
    </ui-layout>
  `
})
export class AppComponent {}

Layout Components

LayoutComponent (<ui-layout>)

Selector: ui-layout
Description: Root container component that provides the main layout structure.

Usage:

<ui-layout>
  <!-- Menu and content components go here -->
</ui-layout>

Properties: None
Content Projection: Accepts any content, typically ui-menu and ui-content

---

MenuComponent (<ui-menu>)

Selector: ui-menu
Description: Vertical sidebar menu container for navigation items.

Usage:

<ui-menu>
  <ui-menu-item label="Dashboard" icon="dashboard"></ui-menu-item>
  <ui-menu-item label="Users" icon="people"></ui-menu-item>
</ui-menu>

Properties: None
Content Projection: Accepts ui-menu-item components
Styling:

• Width: 4rem
• Background: var(--ui-color-menu-bg, #343a40)
• Color: var(--ui-color-menu-text, #ffffff)

---

MenuItemComponent (<ui-menu-item>)

Selector: ui-menu-item
Description: Individual menu item with icon and label.

Usage:

<ui-menu-item 
  label="Dashboard" 
  icon="dashboard">
</ui-menu-item>

Properties:

• label: string (required) - Text label displayed below the icon
• icon: string (required) - Icon name (uses RemixIcon classes)

Styling:

• Size: 4rem × 4rem
• Hover effect: rgba(255, 255, 255, 0.1) background
• Active state: #2c2c2c background
• Icon size: 1.7rem
• Label size: 0.6rem

---

ContentComponent (<ui-content>)

Selector: ui-content
Description: Main content area container.

Usage:

<ui-content>
  <ui-header label="Page Title"></ui-header>
  <!-- Your page content -->
</ui-content>

Properties: None
Content Projection: Accepts any content, typically starts with ui-header

---

HeaderComponent (<ui-header>)

Selector: ui-header
Description: Page header with title and action buttons.

Usage:

<ui-header label="Dashboard">
  <button class="btn btn-primary">Add New</button>
  <button class="btn btn-secondary">Export</button>
</ui-header>

Properties:

• label: string - Page title displayed in the header

Content Projection: Right-aligned action buttons or other controls
Styling:

• Padding: 0.6rem
• Background: var(--ui-color-menu-bg, #343a40)
• Color: var(--ui-color-menu-text, #ffffff)
• Title font size: 1.4rem
• Title transform: capitalize

---

IconComponent (Directive)

Selector: [uiIcon]
Description: Directive for displaying RemixIcon icons.

Usage:

<i uiIcon="home"></i>
<span uiIcon="settings"></span>

Properties:

• uiIcon: string - Icon name (RemixIcon class name without 'ri-' prefix)

Features:

• Automatically adds appropriate CSS classes
• Injects SVG content for icons
• Works with any HTML element

CSS Variables

The library uses CSS variables for theming. You can customize colors by defining these variables:

:root {
  --ui-color-menu-bg: #343a40;           /* Menu background */
  --ui-color-menu-text: #ffffff;         /* Menu text color */
  --ui-color-menu-hover: rgba(255, 255, 255, 0.1); /* Hover effect */
  --ui-color-menu-active: #2c2c2c;       /* Active item background */
  --ui-color-icon-primary: #2c3e50;      /* Icon color */
}

Complete Example

import { Component } from '@angular/core';
import { LayoutModule } from '@workshack/ui';

@Component({
  selector: 'app-root',
  imports: [LayoutModule],
  template: `
    <ui-layout>
      <ui-menu>
        <ui-menu-item 
          label="Dashboard" 
          icon="dashboard"
          (click)="navigate('dashboard')">
        </ui-menu-item>
        <ui-menu-item 
          label="Users" 
          icon="user"
          (click)="navigate('users')">
        </ui-menu-item>
        <ui-menu-item 
          label="Settings" 
          icon="settings"
          (click)="navigate('settings')">
        </ui-menu-item>
      </ui-menu>
      
      <ui-content>
        <ui-header label="Dashboard">
          <button class="btn btn-primary" (click)="addNew()">
            <i uiIcon="add"></i> Add New
          </button>
          <button class="btn btn-secondary" (click)="export()">
            <i uiIcon="download"></i> Export
          </button>
        </ui-header>
        
        <div class="content-body">
          <!-- Your page content here -->
          <h2>Welcome to Dashboard</h2>
          <p>This is the main content area.</p>
        </div>
      </ui-content>
    </ui-layout>
  `,
  styles: [`
    .content-body {
      padding: 1rem;
    }
    .btn {
      margin-left: 0.5rem;
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .btn-primary {
      background: #007bff;
      color: white;
    }
    .btn-secondary {
      background: #6c757d;
      color: white;
    }
  `]
})
export class AppComponent {
  navigate(route: string) {
    console.log('Navigate to:', route);
  }
  
  addNew() {
    console.log('Add new item');
  }
  
  export() {
    console.log('Export data');
  }
}

Card Components

Selectors: ui-card, ui-card-title, ui-card-menu, ui-card-footer
Description: Zestaw komponentów do tworzenia kart z opcjonalnym nagłówkiem, menu i stopką.

CardComponent (ui-card) Properties:

• title?: string - Tytuł karty wyświetlany w nagłówku
• margin: 0.5rem - Domyślny margin karty
• Kolory jak ui-menu (--ui-color-menu-bg, --ui-color-menu-text)

Standalone Components:

• ui-card-title - Tytuł karty z własnymi stylami
• ui-card-menu - Menu/przyciski w nagłówku
• ui-card-footer - Stopka karty z własnymi stylami

Usage:

<!-- Podstawowe użycie -->
<ui-card title="Tytuł karty">
  <p>Zawartość karty</p>
</ui-card>

<!-- Pełne użycie z wszystkimi slotami -->
<ui-card title="Statystyki">
  <ui-card-menu>
    <button class="btn btn-sm">Edytuj</button>
    <button class="btn btn-sm">Usuń</button>
  </ui-card-menu>
  
  <div class="stats">
    <div class="stat-item">
      <span class="value">123</span>
      <span class="label">Użytkownicy</span>
    </div>
  </div>
  
  <ui-card-footer>
    <small class="text-muted">Ostatnia aktualizacja: dziś</small>
  </ui-card-footer>
</ui-card>

<!-- Niestandardowy tytuł -->
<ui-card>
  <ui-card-title>
    <div class="d-flex align-items-center">
      <i class="icon-chart"></i>
      <span>Raporty sprzedaży</span>
    </div>
  </ui-card-title>
  
  <ui-card-menu>
    <span class="text-success">+12%</span>
  </ui-card-menu>
  
  <div class="chart-container">
    <!-- wykres -->
  </div>
</ui-card>

CSS Variables:

• --ui-color-card-bg - tło karty
• --ui-color-card-border - kolor obramowania
• --ui-color-card-title - kolor tytułu
• --ui-color-card-text - kolor tekstu
• --ui-color-card-footer-bg - tło stopki
• --ui-shadow-card - standardowy cień karty
• --ui-shadow-card-hover - cień przy hover

Development

Building

npm run build:ui

Watching for changes

npm run watch:ui

Testing

npm run test:ui

Publishing

npm run publish:ui

License

This library is licensed under a custom license that allows:

• Free use for non-commercial applications (no revenue, no ads, no paid features)
• Commercial use with attribution requirement - you must credit the library in your app (e.g., on an "About" or "For Developers" page)

For full license terms, see the LICENSE file.

Attribution Example for Commercial Use

This application uses Workshack UI Library 
(https://www.npmjs.com/package/@workshack/ui) 
© 2025 Workshack Team