NerdTech
Repositories Projects Packages
1

nerdtech-ui (1.0.1)

Published 2026-03-16 19:18:04 +00:00 by L_cke_text

Installation

registry=
npm install nerdtech-ui@1.0.1
"nerdtech-ui": "1.0.1"

About this package

L_cke_text UI Design System

L_cke_text UI ist ein Vue-3-Designsystem mit klarer Schichtung: Design Tokens -> Theme-Tokens -> Primitive Layout-Komponenten -> UI-Komponenten.

Ziel ist eine konsistente, wartbare UI-Sprache mit vorhersehbaren APIs und wiederverwendbaren Bausteinen.

Architekturdiagramm (Kurzüberblick)

Consumer App
	|
	v
L_cke_text UI Plugin (src/index.ts)
	|
	+--> base.css      (globale Defaults, Focus, Reduced Motion)
	+--> tokens.css    (Foundation: Color/Space/Type/Radius/...)
	+--> themes.css    (Semantik: background/surface/text/primary/...)
	|
	+--> Primitives    (UiBox, UiGrid, UiStack, UiInline, ...)
	|        |
	|        +--> layout + spacing + structure
	|
	+--> UI Components (Form, Navigation, Feedback, Data Display)
			 |
			 +--> konsistente API + states + accessibility

Theme switch:
useTheme() -> data-nt-theme="light|dark" -> Theme-Tokens aktualisieren alle Komponenten.

Komponenten-Lebenszyklus (Mini-Diagramm)

Consumer Props / v-model
	|
	v
Component State + Composables
(z. B. useControllableState, useTheme)
	|
	v
Render in Vue Template
	|
	v
Styles aus Tokens + Theme-Variablen
(tokens.css + themes.css + overrides.css)
	|
	v
UI Output + Interaction Events
	|
	v
emit(...) / v-model:update -> zurück an Consumer

Wie das Designsystem funktioniert

1) Design Tokens (Foundation)

Basiswerte liegen in src/styles/tokens.css und als TypeScript-Tokens in src/tokens/*.

Beispiele:

  • Farben: --nt-color-primary-*, --nt-color-neutral-*
  • Spacing: --nt-space-*
  • Radius: --nt-radius-*
  • Typografie: --nt-font-size-*, --nt-font-weight-*
  • Motion, Z-Index, Shadow

Regel: Komponenten verwenden Tokens statt harter Pixel-/Farbwerte.

2) Theme Layer (Semantik)

Semantische Theme-Variablen liegen in src/styles/themes.css:

  • --nt-theme-background, --nt-theme-surface
  • --nt-theme-text, --nt-theme-muted
  • --nt-theme-primary, --nt-theme-danger

Themes werden über data-nt-theme geschaltet:

  • data-nt-theme="light"
  • data-nt-theme="dark"

3) Base Layer (Global Behavior)

src/styles/base.css setzt globale, systemweite Defaults:

  • box-sizing: border-box
  • globale Schriftfamilie
  • Focus-Visibility (:focus-visible)
  • Reduced-Motion-Verhalten

4) Primitive Layout-Komponenten

Die Layout-Primitives sind die Grundlage für Seitenaufbau und Spacing:

  • UiBox: Container mit kontrolliertem Padding/Margin/Dimensionen
  • UiGrid: responsive Raster-Layouts
  • UiStack: vertikaler Flow mit konsistentem Abstand
  • UiInline: horizontaler Flow für Actions/Gruppen
  • UiText, UiHeading, UiLink, UiPrimitiveDivider: typografische und strukturelle Basis

Regel: Erst mit Primitives layouten, dann fachliche Komponenten einsetzen.

5) UI-Komponenten (Feature Layer)

Auf den Primitives aufbauend kommen Fachkomponenten wie:

  • Form: UiButton, UiInput, UiSelect, UiSlider, UiStepper, UiSwitch, UiCheckbox
  • Navigation: UiTabs, UiPagination, UiBreadcrumbs, UiAccordion, UiPageSlider
  • Feedback: UiToast, UiProgress, UiSkeleton, UiSpinner, UiCallout, UiEmptyState
  • Data Display: UiTable, UiMetric, UiTimeline, UiDataList, UiImageSlider, UiAvatar

Jede Komponente liegt in src/components/<Name>/ und folgt dem Muster:

  • Ui<Name>.vue
  • Ui<Name>.types.ts
  • Ui<Name>.overrides.css
  • optional: Ui<Name>.stories.ts, Ui<Name>.spec.ts, README.md

Schichten im Import-Flow

Die Library exportiert in src/index.ts:

  • ./styles/base.css
  • ./styles/themes.css
  • ./styles/tokens.css
  • alle Komponenten, Composables und TS-Tokens

Damit kommt ein konsistentes Styling-System automatisch mit.

Theme-Steuerung im Code

useTheme() aus src/composables/useTheme.ts steuert Theme-Zustände:

  • light
  • dark
  • system

const { theme, resolvedTheme, setTheme } = useTheme(); setTheme("dark");

<details>
	<summary><strong>1) Design Tokens (Foundation)</strong></summary>

Basiswerte liegen in `src/styles/tokens.css` und als TypeScript-Tokens in `src/tokens/*`.

Beispiele:

- Farben: `--nt-color-primary-*`, `--nt-color-neutral-*`
- Spacing: `--nt-space-*`
- Radius: `--nt-radius-*`
- Typografie: `--nt-font-size-*`, `--nt-font-weight-*`
- Motion, Z-Index, Shadow

Regel: Komponenten verwenden Tokens statt harter Pixel-/Farbwerte.
</details>

## Verwendung im Consumer-Projekt

Wichtig: `nerdtech-ui` ist in der aktuellen Forgejo-Instanz produktiv nur als unscoped Paket verfügbar. Vue bleibt eine `peerDependency` und sollte im Consumer-Projekt separat installiert sein.


import NerdtechUI from "nerdtech-ui";
<details>
	<summary><strong>2) Theme Layer (Semantik)</strong></summary>

Semantische Theme-Variablen liegen in `src/styles/themes.css`:

- `--nt-theme-background`, `--nt-theme-surface`
- `--nt-theme-text`, `--nt-theme-muted`
- `--nt-theme-primary`, `--nt-theme-danger`

Themes werden über `data-nt-theme` geschaltet:

- `data-nt-theme="light"`
- `data-nt-theme="dark"`
</details>
import "nerdtech-ui/style.css";

createApp(App).use(NerdtechUI).mount("#app");
  • Konsistente API-Namings (Ui*, klare Props)
3) Base Layer (Global Behavior)

src/styles/base.css setzt globale, systemweite Defaults:

  • box-sizing: border-box
  • globale Schriftfamilie
  • Focus-Visibility (:focus-visible)
  • Reduced-Motion-Verhalten
- Accessibility by default (sichtbarer Fokus, semantische Struktur) - Dokumentation + Tests pro Komponente

Qualitätssicherung

npm run test:unit -- --run


<details>
	<summary><strong>4) Primitive Layout-Komponenten</strong></summary>

Die Layout-Primitives sind die Grundlage für Seitenaufbau und Spacing:

- `UiBox`: Container mit kontrolliertem Padding/Margin/Dimensionen
- `UiGrid`: responsive Raster-Layouts
- `UiStack`: vertikaler Flow mit konsistentem Abstand
- `UiInline`: horizontaler Flow für Actions/Gruppen
- `UiText`, `UiHeading`, `UiLink`, `UiPrimitiveDivider`: typografische und strukturelle Basis

Regel: Erst mit Primitives layouten, dann fachliche Komponenten einsetzen.
</details>
## Publish (Kurzablauf)

```bash
npm run build
npm run type-check

Wichtig: Wenn `npm publish` mit `E409` fehlschlägt, existiert die Version bereits in der Registry. In dem Fall die Version erneut erhöhen und neu publishen.

- Playground: `docs/playground.md`
<details>
	<summary><strong>5) UI-Komponenten (Feature Layer)</strong></summary>

Auf den Primitives aufbauend kommen Fachkomponenten wie:

- Form: `UiButton`, `UiInput`, `UiSelect`, `UiSlider`, `UiStepper`, `UiSwitch`, `UiCheckbox`
- Navigation: `UiTabs`, `UiPagination`, `UiBreadcrumbs`, `UiAccordion`, `UiPageSlider`
- Feedback: `UiToast`, `UiProgress`, `UiSkeleton`, `UiSpinner`, `UiCallout`, `UiEmptyState`
- Data Display: `UiTable`, `UiMetric`, `UiTimeline`, `UiDataList`, `UiImageSlider`, `UiAvatar`

Jede Komponente liegt in `src/components/<Name>/` und folgt dem Muster:

- `Ui<Name>.vue`
- `Ui<Name>.types.ts`
- `Ui<Name>.overrides.css`
- optional: `Ui<Name>.stories.ts`, `Ui<Name>.spec.ts`, `README.md`
</details>
- Publishing: `docs/publishing.md`
- Team-Installation: `docs/team-install.md`
- Release-Checklist: `docs/release-checklist.md`
import NerdtechUI from "nerdtech-ui";
- Package-Migration: `docs/package-migration.md`
- Komponenten-Readmes: `src/components/*/README.md`
createApp(App).use(NerdtechUI).mount("#app");

Dependencies

Development dependencies

ID Version
@types/node ^22.13.1
@vitejs/plugin-vue ^5.2.1
@vue/test-utils ^2.4.6
jsdom ^25.0.1
marked ^17.0.4
prettier ^3.5.3
typescript ^5.9.2
vite ^5.4.11
vitest ^2.1.8
vue ^3.5.13
vue-tsc ^2.1.10

Peer dependencies

ID Version
vue >=3.3.0 <4
Details
npm
2026-03-16 19:18:04 +00:00
1
Project website
53 KiB
Assets (1)
nerdtech-ui-1.0.1.tgz 53 KiB
Versions (5) View all
1.1.1 2026-03-16
1.1.0 2026-03-16
1.0.2 2026-03-16
1.0.1 2026-03-16
1.0.0 2026-03-15