gtaf-toolkits

Shared React component library for GTAF platforms. Built with Vite in library mode, outputs tree-shakeable ESM with TypeScript declarations.

Install

pnpm add gtaf-toolkits

Peer dependencies:

pnpm add react react-dom
# Optional (for form components):
pnpm add react-hook-form @hookform/resolvers zod
# Optional (for Sidebar):
pnpm add react-router-dom
# Optional (for alerts/modals):
pnpm add zustand

Setup

Import base styles once at your app's entry point:

// All base styles at once (fonts, variables, reset, typography):
import 'gtaf-toolkits/styles/init.css';

// Or import individually:
import 'gtaf-toolkits/styles/variables.css';
import 'gtaf-toolkits/styles/typography.css';
import 'gtaf-toolkits/styles/reset.css';
import 'gtaf-toolkits/styles/fonts.css';

Usage

import { Button, TextField, Dropdown, Table, DatePicker } from 'gtaf-toolkits';

// Or deep import for maximum tree-shaking:
import { Button } from 'gtaf-toolkits/components/button';

Components

Form Controls

| Component | Description | |---|---| | Button | Primary, secondary-outline, ghost, link variants with icon support | | TextField | Text input with label, prefix, icon, error/helper text | | TextArea | Multi-line text input | | Dropdown | Single/multi select with search, tags, clear | | DropdownTree | Cascading multi-level select with group tag collapsing | | Checkbox | Tri-state checkbox (checked, unchecked, indeterminate) | | RadioButton | Radio button with label | | Toggle | Switch toggle with label | | DatePicker | Single date picker with calendar popup, month/year drill-down | | RangeDatePicker | Date range picker with two-panel calendar |

Display

| Component | Description | |---|---| | Icon | Google Material Symbols Rounded icons | | Spinner | Loading spinner | | Tag | Removable tag/chip | | Chips | Status chip with color variants | | Tooltip | Hover tooltip with arrow | | Alert | Inline alert banner (danger, success, informative) |

Layout

| Component | Description | |---|---| | Stack | Flex container (row/column) with gap, alignment, wrapping | | Grid | CSS grid with responsive column counts | | Divider | Horizontal/vertical separator | | PageHeader | Page title with breadcrumbs, back button, actions slot | | Tabs / TabPanel | Tab bar with panel content, keyboard navigation | | Table | Data table with sorting, expansion, selection, pagination | | Pagination | Standalone pagination bar | | ColumnToggle | Column visibility toggle for tables | | Sidebar | Collapsible navigation sidebar with flyout sub-menus |

Providers

| Provider | Description | |---|---| | AlertProvider | Toast alert system (alert.success('...')) | | ModalProvider | Modal dialog system (modal({ title, content })) |

Form System

import { Form, FormField } from 'gtaf-toolkits/form';

Integrates with react-hook-form + zod for validated forms.

CSS Architecture

Three layers:

1. variables.css — --gtaf-* design tokens on :root. Override any token.
2. CSS Modules — each component's .module.css references var(--gtaf-*) tokens.
3. Global gtaf-* classes — unstyled hooks on every DOM element for consumer CSS targeting.

/* Consumer can target any element */
.gtaf-button-primary {
  /* your overrides */
}

Translations (i18n)

Components with visible text accept a translations prop:

<DatePicker
  translations={{
    today: 'Heute',
    clear: 'Loschen',
    months: ['Januar', 'Februar', ...],
  }}
/>

Development

pnpm install      # Install dependencies
pnpm dev          # Dev server at localhost:5173
pnpm build        # TypeScript check + Vite build
pnpm lint         # ESLint
pnpm test:e2e     # Playwright e2e tests

License

Private