CRT Style Guide

✨ Features

| Feature | Description | |---------|-------------| | 🖥️ CRT Aesthetic | Retro look with neon glow effects and monospace fonts | | ⚡ Lit Web Components | Modern, performant and lightweight components | | 🎨 Design Tokens | Consistent theming via CSS Custom Properties | | 📦 NPM-Ready | Publishable as reusable package | | 🔒 TypeScript | Full typing for better DX | | 📚 Living Style Guide | Interactive documentation of all components | | ⚙️ Vite | Lightning-fast development and optimized builds | | 🎨 Multiple CRT Colors | Green, Amber, and Blue phosphor variants | | ✨ Authentic Effects | Scanlines, flicker, chromatic aberration |

📁 Project Structure

crtstyleguide/
├── src/
│   ├── components/
│   │   ├── atoms/           # Basic building blocks (Button, Input, Badge, etc.)
│   │   ├── molecules/       # Composite components (Card, Modal, Table)
│   │   └── organisms/       # Complex UI areas (MusicStation)
│   ├── styles/
│   │   ├── design-tokens.css  # CSS Custom Properties
│   │   └── index.css          # Global Styles
│   ├── utils/               # Helper functions
│   └── index.ts             # Library Entry Point
├── styleguide/              # Living Style Guide App
│   ├── index.html
│   ├── main.ts
│   ├── template.ts
│   └── style.css
├── public/
│   └── fonts/               # IBM Plex Mono font files
├── vite.config.ts           # Dev & Style Guide Build
├── vite.lib.config.ts       # Library Build
└── tsconfig.json

🚀 Quick Start

Installation

npm install

Development Server

npm run dev

Opens the Style Guide at: http://localhost:5173/styleguide/

📜 Available Scripts

| Script | Description | |--------|-------------| | npm run dev | Start development server | | npm run build | Build Style Guide + Library | | npm run build:lib | Build only library for npm | | npm run preview | Preview production build | | npm run type-check | TypeScript check without build | | npm run lint | ESLint code check |

🧩 Component Overview

Atoms (Basic Building Blocks)

| Component | Tag | Description | |------------|-----|-------------| | Button | <crt-button> | Interactive button with glow effect | | Badge | <crt-badge> | Status labels and tags | | Input | <crt-input> | Text fields and textarea | | Select | <crt-select> | Dropdown selection | | Checkbox | <crt-checkbox> | Checkbox input | | Radio | <crt-radio> | Radio-Button | | Toggle | <crt-toggle> | On/Off-Schalter | | Slider | <crt-slider> | Wertebereich-Regler | | Icon | <crt-icon> | Icon-Darstellung | | Link | <crt-link> | Verlinkungen | | Tabs | <crt-tabs> | Tab-Navigation | | Tooltip | <crt-tooltip> | Hover-Hinweise | | Progress | <crt-progress> | Fortschrittsanzeige | | Spinner | <crt-spinner> | Ladeanimation | | Avatar | <crt-avatar> | Benutzerbilder | | Alert | <crt-alert> | Hinweismeldungen | | Skeleton | <crt-skeleton> | Platzhalter beim Laden | | Pagination | <crt-pagination> | Seitennavigation | | Breadcrumb | <crt-breadcrumb> | Brotkrumen-Navigation | | Calendar | <crt-calendar> | Datumsauswahl | | FileUpload | <crt-file-upload> | Datei-Upload |

Molecules (Zusammengesetzt)

| Komponente | Tag | Beschreibung | |------------|-----|-------------| | Card | <crt-card> | Inhalts-Container | | Modal | <crt-modal> | Dialog-Fenster | | Table | <crt-table> | Datentabellen | | Grid | <crt-grid> | Layout-Raster | | Accordion | <crt-accordion> | Aufklappbare Bereiche | | Toast | <crt-toast> | Benachrichtigungen | | CodeExample | <crt-code-example> | Code-Darstellung | | MusicPlayer | <crt-music-player> | Audio-Player | | Playlist | <crt-playlist> | Playlist-Ansicht | | Visualizer | <crt-visualizer> | Audio-Visualisierung |

Organisms (Komplex)

| Komponente | Tag | Beschreibung | |------------|-----|-------------| | MusicStation | <crt-music-station> | Vollständige Musik-App |

🎨 Design Tokens

Die Library verwendet CSS Custom Properties für konsistentes Theming:

:root {
  /* Primärfarben */
  --crt-primary: #33ff33;
  --crt-primary-light: #44ff44;
  --crt-primary-dark: #22cc22;
  
  /* Hintergründe */
  --crt-bg-dark: #0a0a0a;
  --crt-bg-darker: #000000;
  --crt-bg-light: #1a1a1a;
  
  /* Status-Farben */
  --crt-success: #00ff00;
  --crt-warning: #ffff00;
  --crt-error: #ff0000;
  --crt-info: #00ffff;
  
  /* Glow-Effekte */
  --crt-glow-sm: 0 0 5px rgba(51, 255, 51, 0.3);
  --crt-glow: 0 0 10px rgba(51, 255, 51, 0.5);
  --crt-glow-lg: 0 0 20px rgba(51, 255, 51, 0.7);
  
  /* Typografie */
  --crt-font-family: 'VT323', 'Courier New', monospace;
}

🔧 Eigene Komponenten erstellen

1. Komponente anlegen

// src/components/atoms/my-component.ts
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('crt-my-component')
export class MyComponent extends LitElement {
  static styles = css`
    :host {
      display: block;
      color: var(--crt-text-primary);
      font-family: var(--crt-font-family);
    }
    
    .container {
      padding: var(--crt-spacing-md);
      border: var(--crt-border);
      box-shadow: var(--crt-glow);
    }
  `;

  @property({ type: String }) label = 'Hello CRT';

  render() {
    return html`
      <div class="container">
        ${this.label}
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'crt-my-component': MyComponent;
  }
}

2. Exportieren

// src/components/atoms/index.ts
export { MyComponent } from './my-component';

3. Im Style Guide dokumentieren

Füge die Komponente in styleguide/components-register.ts hinzu.

📦 Als NPM-Paket veröffentlichen

Build erstellen

npm run build:lib

Paket veröffentlichen

npm publish

In anderen Projekten nutzen

Installation:

npm install @patimweb/crtstyleguide

JavaScript/TypeScript einbinden:

// Alle Komponenten importieren (registriert automatisch die Custom Elements)
import '@patimweb/crtstyleguide';

// Oder einzelne Komponenten
import { Button, Card, Modal } from '@patimweb/crtstyleguide';

CSS einbinden:

// In deiner Haupt-JS/TS-Datei
import '@patimweb/crtstyleguide/styles';
// oder
import '@patimweb/crtstyleguide/styles.css';

Oder direkt im HTML:

<link rel="stylesheet" href="node_modules/@patimweb/crtstyleguide/dist/lib/components.css">

Komponenten verwenden:

<crt-button variant="primary">Click me</crt-button>
<crt-button variant="secondary" size="small">Small Button</crt-button>

<crt-card>
  <h2 slot="header">Titel</h2>
  <p>Inhalt der Karte</p>
</crt-card>

<crt-input label="Username" placeholder="Enter username"></crt-input>

<crt-alert variant="success">Erfolgreich gespeichert!</crt-alert>

Mit Framework (z.B. React):

import '@patimweb/crtstyleguide';
import '@patimweb/crtstyleguide/styles';

function App() {
  return (
    <div>
      <crt-button onClick={() => alert('Clicked!')}>
        CRT Button
      </crt-button>
    </div>
  );
}

🛠️ Technologie-Stack

• Lit - Web Components Library
• TypeScript - Type-safe JavaScript
• Vite - Build Tool & Dev Server
• ESLint - Code Linting

📄 Lizenz

Apache License 2.0 - siehe LICENSE für Details.