@fastnd/components 1.0.26 → 1.0.27

package/dist/examples/dashboard/DashboardPage/DashboardPage.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { StatusOverview } from '../StatusOverview/StatusOverview'
+import { ProjectList } from '../ProjectList/ProjectList'
+import { useDashboardState } from '../hooks/use-dashboard-state'
+
+interface DashboardPageProps extends React.ComponentProps<'main'> {}
+
+const DashboardPage = React.forwardRef<HTMLElement, DashboardPageProps>(
+  ({ className, ...props }, ref) => {
+    const {
+      statusCounts,
+      total,
+      activeFilter,
+      setActiveFilter,
+      filteredProjects,
+      filterLabel,
+      searchQuery,
+      setSearchQuery,
+      toggleFavorite,
+    } = useDashboardState()
+
+    return (
+      <main
+        ref={ref}
+        data-slot="dashboard-page"
+        className={cn(
+          'grid grid-cols-1 lg:grid-cols-[350px_1fr] gap-6 max-w-[1400px] mx-auto p-8',
+          className,
+        )}
+        {...props}
+      >
+        <StatusOverview
+          data={statusCounts}
+          total={total}
+          activeFilter={activeFilter}
+          onFilterChange={setActiveFilter}
+        />
+        <ProjectList
+          projects={filteredProjects}
+          filterLabel={filterLabel}
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          onToggleFavorite={toggleFavorite}
+        />
+      </main>
+    )
+  },
+)
+
+DashboardPage.displayName = 'DashboardPage'
+
+export { DashboardPage }
+export type { DashboardPageProps }

package/dist/examples/dashboard/ProjectList/ProjectList.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react'
+import { Star } from 'lucide-react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Table, TableHeader, TableHead, TableBody, TableRow, TableCell } from '@/components/ui/table'
+import { Badge } from '@/components/ui/badge'
+import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
+import { cn } from '@/lib/utils'
+import type { Project, ProjectStatus } from '../types'
+import { STATUS_CONFIG } from '../constants'
+
+const STATUS_BADGE_CLASSES: Record<ProjectStatus, string> = {
+  'neu':           'bg-primary/10 text-primary border-transparent',
+  'offen':         'bg-muted-foreground/10 text-muted-foreground border-transparent',
+  'in-prufung':    'bg-[#ebbe0d]/15 text-[#8a7100] border-transparent',
+  'validierung':   'bg-[#e8a026]/15 text-[#8a5a00] border-transparent',
+  'abgeschlossen': 'bg-[#1ec489]/15 text-[#0a6e44] border-transparent',
+}
+
+interface ProjectListProps extends React.ComponentProps<'section'> {
+  projects: Project[]
+  filterLabel: string
+  searchQuery: string
+  onSearchChange: (query: string) => void
+  onToggleFavorite: (projectId: string) => void
+}
+
+const ProjectList = React.forwardRef<HTMLElement, ProjectListProps>(
+  (
+    {
+      projects,
+      filterLabel,
+      searchQuery,
+      onSearchChange,
+      onToggleFavorite,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <section
+        ref={ref}
+        data-slot="project-list"
+        aria-label="Projektliste"
+        className={cn('', className)}
+        {...props}
+      >
+        <Card>
+          <div className="flex justify-between items-center flex-wrap gap-4 px-6 pt-6">
+            <h2
+              className="text-2xl font-medium"
+              style={{ fontFamily: 'var(--font-clash)' }}
+            >
+              {filterLabel}
+            </h2>
+            <Input
+              type="search"
+              aria-label="Projekte durchsuchen"
+              placeholder="Suchen..."
+              className="w-[250px]"
+              value={searchQuery}
+              onChange={e => onSearchChange(e.target.value)}
+            />
+          </div>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead scope="col">Projektname</TableHead>
+                  <TableHead scope="col">Kunde</TableHead>
+                  <TableHead scope="col">Applikation</TableHead>
+                  <TableHead scope="col">Status</TableHead>
+                  <TableHead scope="col" aria-label="Favorit">
+                    <Star className="size-3.5" />
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {projects.map(project => (
+                  <TableRow key={project.id}>
+                    <TableCell>
+                      <span className="font-medium">{project.name}</span>
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-muted-foreground text-[0.8125rem]">
+                        {project.client}
+                      </span>
+                    </TableCell>
+                    <TableCell>{project.application}</TableCell>
+                    <TableCell>
+                      <Badge
+                        variant="secondary"
+                        className={cn(STATUS_BADGE_CLASSES[project.status])}
+                      >
+                        {STATUS_CONFIG[project.status].label}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <FavoriteButton
+                        pressed={project.isFavorite}
+                        projectName={project.name}
+                        onPressedChange={() => onToggleFavorite(project.id)}
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </section>
+    )
+  },
+)
+
+ProjectList.displayName = 'ProjectList'
+
+export { ProjectList }
+export type { ProjectListProps }

package/dist/examples/dashboard/StatusDonutChart/StatusDonutChart.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react'
+import { Pie, PieChart, Label, Sector } from 'recharts'
+import type { PieSectorShapeProps } from 'recharts/types/polar/Pie'
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/components/ui/chart'
+import { cn } from '@/lib/utils'
+import type { StatusCount, StatusFilter } from '../types'
+
+interface StatusDonutChartProps extends React.ComponentProps<'div'> {
+  data: StatusCount[]
+  total: number
+  activeFilter?: StatusFilter
+  onFilterChange?: (filter: StatusFilter) => void
+}
+
+const StatusDonutChart = React.forwardRef<HTMLDivElement, StatusDonutChartProps>(
+  ({ data, total, activeFilter = 'all', onFilterChange, className, ...props }, ref) => {
+    const chartConfig = React.useMemo<ChartConfig>(() => {
+      return data.reduce<ChartConfig>((acc, item) => {
+        acc[item.status] = { label: item.label, color: item.color }
+        return acc
+      }, {})
+    }, [data])
+
+    const chartData = React.useMemo(() => {
+      return data.map((item) => ({
+        status: item.status,
+        count: item.count,
+        fill: `var(--color-${item.status})`,
+      }))
+    }, [data])
+
+    const activeIndex = activeFilter === 'all'
+      ? -1
+      : chartData.findIndex((d) => d.status === activeFilter)
+
+    const handlePieClick = React.useCallback(
+      (_: unknown, index: number) => {
+        if (!onFilterChange) return
+        const clickedStatus = chartData[index]?.status
+        if (!clickedStatus) return
+        onFilterChange(clickedStatus === activeFilter ? 'all' : clickedStatus)
+      },
+      [onFilterChange, chartData, activeFilter],
+    )
+
+    return (
+      <div
+        ref={ref}
+        data-slot="status-donut-chart"
+        role="img"
+        aria-label="Kreisdiagramm der Projektstatus-Verteilung"
+        className={cn(className)}
+        {...props}
+      >
+        <ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[200px]">
+          <PieChart>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+            <Pie
+              data={chartData}
+              dataKey="count"
+              nameKey="status"
+              innerRadius={60}
+              outerRadius={85}
+              strokeWidth={5}
+              className="cursor-pointer"
+              onClick={handlePieClick}
+              shape={({
+                index,
+                outerRadius: or = 0,
+                ...sectorProps
+              }: PieSectorShapeProps) => (
+                <Sector
+                  {...sectorProps}
+                  outerRadius={index === activeIndex ? or + 10 : or}
+                />
+              )}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold"
+                          style={{ fontFamily: 'var(--font-clash)' }}
+                        >
+                          {total.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground text-xs uppercase tracking-wider"
+                        >
+                          Gesamt
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </div>
+    )
+  }
+)
+
+StatusDonutChart.displayName = 'StatusDonutChart'
+
+export { StatusDonutChart }

package/dist/examples/dashboard/StatusFilterLegend/StatusFilterLegend.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import type { StatusCount, StatusFilter } from '../types'
+
+interface StatusFilterLegendProps extends React.ComponentProps<'div'> {
+  items: StatusCount[]
+  total: number
+  activeFilter: StatusFilter
+  onFilterChange: (filter: StatusFilter) => void
+}
+
+const StatusFilterLegend = React.forwardRef<HTMLDivElement, StatusFilterLegendProps>(
+  ({ items, total, activeFilter, onFilterChange, className, ...props }, ref) => {
+    const allItem = { filter: 'all' as StatusFilter, label: 'Alle', count: total, color: null }
+
+    const entries = [
+      allItem,
+      ...items.map((item) => ({
+        filter: item.status as StatusFilter,
+        label: item.label,
+        count: item.count,
+        color: item.color,
+      })),
+    ]
+
+    return (
+      <div
+        ref={ref}
+        role="listbox"
+        aria-label="Nach Status filtern"
+        data-slot="status-filter-legend"
+        className={cn('flex flex-col gap-1', className)}
+        {...props}
+      >
+        {entries.map(({ filter, label, count, color }) => {
+          const isActive = activeFilter === filter
+
+          return (
+            <button
+              key={filter}
+              role="option"
+              aria-selected={isActive}
+              data-filter={filter}
+              onClick={() => onFilterChange(filter)}
+              className={cn(
+                'flex items-center justify-between w-full px-3 py-2 rounded-md border border-transparent transition-colors cursor-pointer text-sm outline-none focus-visible:bg-muted',
+                isActive ? 'bg-muted border-border' : 'hover:bg-muted',
+              )}
+            >
+              <span className="flex items-center gap-2">
+                <span
+                  className={cn('shrink-0 rounded-full', color === null && 'bg-border')}
+                  style={color !== null ? { backgroundColor: color, width: 12, height: 12 } : { width: 12, height: 12 }}
+                />
+                <span>{label}</span>
+              </span>
+              <span className="font-[var(--font-grotesk)] text-sm text-muted-foreground font-semibold bg-secondary px-2 py-0.5 rounded-full">
+                {count}
+              </span>
+            </button>
+          )
+        })}
+      </div>
+    )
+  },
+)
+
+StatusFilterLegend.displayName = 'StatusFilterLegend'
+
+export { StatusFilterLegend }

package/dist/examples/dashboard/StatusOverview/StatusOverview.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+import { StatusDonutChart } from '../StatusDonutChart/StatusDonutChart'
+import { StatusFilterLegend } from '../StatusFilterLegend/StatusFilterLegend'
+import type { StatusCount, StatusFilter } from '../types'
+
+interface StatusOverviewProps extends React.ComponentProps<'section'> {
+  data: StatusCount[]
+  total: number
+  activeFilter: StatusFilter
+  onFilterChange: (filter: StatusFilter) => void
+}
+
+const StatusOverview = React.forwardRef<HTMLElement, StatusOverviewProps>(
+  ({ data, total, activeFilter, onFilterChange, className, ...props }, ref) => {
+    return (
+      <section
+        ref={ref}
+        data-slot="status-overview"
+        aria-label="Projektstatus Übersicht"
+        className={cn(className)}
+        {...props}
+      >
+        <Card>
+          <CardHeader>
+            <CardTitle
+              className="text-2xl font-medium"
+              style={{ fontFamily: 'var(--font-clash)' }}
+            >
+              Projekte
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4">
+            <StatusDonutChart data={data} total={total} activeFilter={activeFilter} onFilterChange={onFilterChange} />
+            <StatusFilterLegend
+              items={data}
+              total={total}
+              activeFilter={activeFilter}
+              onFilterChange={onFilterChange}
+            />
+          </CardContent>
+        </Card>
+      </section>
+    )
+  },
+)
+
+StatusOverview.displayName = 'StatusOverview'
+
+export { StatusOverview }

package/dist/examples/dashboard/constants.ts

@@ -0,0 +1,18 @@
+import type { ProjectStatus, Project } from './types'
+
+export const STATUS_CONFIG: Record<ProjectStatus, { label: string; color: string }> = {
+  'neu':           { label: 'Neu',           color: '#0073e6' },
+  'offen':         { label: 'Offen',         color: '#576472' },
+  'in-prufung':    { label: 'In Prüfung',    color: '#ebbe0d' },
+  'validierung':   { label: 'Validierung',   color: '#e8a026' },
+  'abgeschlossen': { label: 'Abgeschlossen', color: '#1ec489' },
+}
+
+export const MOCK_PROJECTS: Project[] = [
+  { id: '1', name: 'E-Commerce Relaunch',     client: 'Müller GmbH',       application: 'Shopify CMS',       status: 'neu',           isFavorite: false },
+  { id: '2', name: 'CRM Integration MVP',     client: 'TechCorp Inc.',     application: 'Salesforce API',    status: 'offen',         isFavorite: true },
+  { id: '3', name: 'Data Analytics Dashboard', client: 'DataViz AG',        application: 'React / Supabase',  status: 'in-prufung',    isFavorite: false },
+  { id: '4', name: 'Mobile App Onboarding',   client: 'FitHealth',         application: 'Flutter',           status: 'neu',           isFavorite: false },
+  { id: '5', name: 'Payment Gateway Update',  client: 'FinTech Solutions', application: 'Stripe API',        status: 'validierung',   isFavorite: false },
+  { id: '6', name: 'Legacy System Migration', client: 'OldBank Corp.',     application: 'Node.js / PostgreSQL', status: 'abgeschlossen', isFavorite: true },
+]

package/dist/examples/dashboard/hooks/use-dashboard-state.ts

@@ -0,0 +1,98 @@
+import { useState, useMemo, useCallback } from 'react'
+import type { Project, StatusFilter, StatusCount } from '../types'
+import { STATUS_CONFIG, MOCK_PROJECTS } from '../constants'
+
+export interface DashboardState {
+  projects: Project[]
+  activeFilter: StatusFilter
+  searchQuery: string
+  statusCounts: StatusCount[]
+  total: number
+  filteredProjects: Project[]
+  filterLabel: string
+  setActiveFilter: (filter: StatusFilter) => void
+  setSearchQuery: (query: string) => void
+  toggleFavorite: (projectId: string) => void
+}
+
+const STATUS_ORDER: Array<keyof typeof STATUS_CONFIG> = [
+  'neu',
+  'offen',
+  'in-prufung',
+  'validierung',
+  'abgeschlossen',
+]
+
+export function useDashboardState(initialProjects: Project[] = MOCK_PROJECTS): DashboardState {
+  const [projects, setProjects] = useState<Project[]>(initialProjects)
+  const [activeFilter, setActiveFilter] = useState<StatusFilter>('all')
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const statusCounts = useMemo<StatusCount[]>(
+    () =>
+      STATUS_ORDER.map((status) => ({
+        status,
+        label: STATUS_CONFIG[status].label,
+        color: STATUS_CONFIG[status].color,
+        count: projects.filter((p) => p.status === status).length,
+      })),
+    [projects],
+  )
+
+  const total = useMemo(() => projects.length, [projects])
+
+  const filteredProjects = useMemo<Project[]>(() => {
+    const query = searchQuery.toLowerCase()
+
+    const matches = projects.filter((p) => {
+      const matchesFilter = activeFilter === 'all' || p.status === activeFilter
+      const matchesSearch =
+        query === '' ||
+        p.name.toLowerCase().includes(query) ||
+        p.client.toLowerCase().includes(query) ||
+        p.application.toLowerCase().includes(query)
+      return matchesFilter && matchesSearch
+    })
+
+    if (activeFilter === 'all') {
+      return [...matches].sort((a, b) => Number(b.isFavorite) - Number(a.isFavorite))
+    }
+
+    return matches
+  }, [projects, activeFilter, searchQuery])
+
+  const filterLabel = useMemo(
+    () =>
+      activeFilter === 'all'
+        ? 'Alle Projekte'
+        : `Projekte: ${STATUS_CONFIG[activeFilter].label}`,
+    [activeFilter],
+  )
+
+  const handleSetActiveFilter = useCallback((filter: StatusFilter) => {
+    setActiveFilter(filter)
+  }, [])
+
+  const handleSetSearchQuery = useCallback((query: string) => {
+    setSearchQuery(query)
+  }, [])
+
+  const toggleFavorite = useCallback((projectId: string) => {
+    setProjects((prev) =>
+      prev.map((p) => (p.id === projectId ? { ...p, isFavorite: !p.isFavorite } : p)),
+    )
+  }, [])
+
+  return {
+    projects,
+    activeFilter,
+    searchQuery,
+    statusCounts,
+    total,
+    filteredProjects,
+    filterLabel,
+    setActiveFilter: handleSetActiveFilter,
+    setSearchQuery: handleSetSearchQuery,
+    toggleFavorite,
+  }
+}

package/dist/examples/dashboard/index.ts

@@ -0,0 +1,6 @@
+export { DashboardPage } from './DashboardPage/DashboardPage'
+export { StatusOverview } from './StatusOverview/StatusOverview'
+export { StatusDonutChart } from './StatusDonutChart/StatusDonutChart'
+export { StatusFilterLegend } from './StatusFilterLegend/StatusFilterLegend'
+export { ProjectList } from './ProjectList/ProjectList'
+export type { ProjectStatus, StatusFilter, Project, StatusCount } from './types'

package/dist/examples/dashboard/types.ts

@@ -0,0 +1,19 @@
+export type ProjectStatus = 'neu' | 'offen' | 'in-prufung' | 'validierung' | 'abgeschlossen'
+
+export type StatusFilter = ProjectStatus | 'all'
+
+export interface Project {
+  id: string
+  name: string
+  client: string
+  application: string
+  status: ProjectStatus
+  isFavorite: boolean
+}
+
+export interface StatusCount {
+  status: ProjectStatus
+  label: string
+  count: number
+  color: string
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastnd/components",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "license": "UNLICENSED",
   "type": "module",
   "main": "./dist/fastnd-components.js",
@@ -20,6 +20,7 @@
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.build.json",
+    "postbuild": "node scripts/copy-examples.mjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "vitest",