Bibliothek für Gesundheits-Dashboards mit Storybook & Tailwind

Ein praktisches Schritt-für-Schritt-Tutorial zum Erstellen einer wiederverwendbaren React-Komponentenbibliothek für Gesundheits-Dashboards mit Storybook und Tailwind CSS.

WellAlly-Redaktionsteam

Autorenprofil ansehen

18. Dezember 202510 Min. Lesezeit

Auf dieser Seite

In der dynamischen Welt der Gesundheitstechnologie ist die Entwicklung intuitiver und konsistenter Benutzeroberflächen entscheidend. Ob Sie Patientenvitaldaten anzeigen, Fitnessziele verfolgen oder Termine verwalten – eine klare und zuverlässige UI kann den entscheidenden Unterschied machen. Diese Schnittstellen jedoch für jedes neue Projekt von Grund auf neu zu erstellen, ist ineffizient und anfällig für Inkonsistenzen.

Hier kommt eine dedizierte Komponentenbibliothek zum Tragen. Durch die Erstellung wiederverwendbarer, gut dokumentierter und leicht anpassbarer Komponenten können Sie die Entwicklung erheblich beschleunigen, die Zusammenarbeit zwischen Designern und Entwicklern verbessern und ein konsistentes Benutzererlebnis über Ihr gesamtes Produkt-Ökosystem hinweg gewährleisten.

In diesem Tutorial führen wir Sie durch den Aufbau einer Komponentenbibliothek für ein Gesundheits-Dashboard unter Verwendung einer leistungsstarken Kombination moderner Frontend-Tools: React, Storybook und Tailwind CSS. Wir werden einige Kernkomponenten erstellen, wie eine MetricCard zur Anzeige von Vitalzeichen und eine Pill für Statusanzeigen, und sie für das Teilen und Wiederverwenden vorbereiten.

Voraussetzungen:

Solides Verständnis von React und JavaScript.
Node.js und npm/yarn auf Ihrem Rechner installiert.
Grundlegende Vertrautheit mit der Kommandozeile.

Das Problem verstehen

Die Entwicklung von UIs für Gesundheits-Dashboards bringt einzigartige Herausforderungen mit sich:

Herausforderung	Auswirkung	Lösung
Datendichte	Informationsüberflutung	Konsistente Komponentenmuster
Konsistenz	Benutzerverwirrung	Geteilte Designsprache
Skalierbarkeit	CSS-Überlastung	Wiederverwendbare theme-fähige Komponenten

Eine Komponentenbibliothek löst diese Probleme, indem sie eine einzige Quelle der Wahrheit für Ihre UI bereitstellt.

Architektur der Komponentenbibliothek

Das folgende Diagramm zeigt unseren Entwicklungs-Workflow für die Komponentenbibliothek:

Voraussetzungen & Projekteinrichtung

Lassen Sie uns die Entwicklungsumgebung einrichten. Wir verwenden Vite für eine schnelle und moderne React-Einrichtung.

Erstellen Sie zunächst ein neues React-Projekt mit Vite:

bash

npm create vite@latest health-dashboard-library --template react-ts
cd health-dashboard-library
npm install

Als nächstes installieren wir Storybook. Navigieren Sie in Ihr neues Projektverzeichnis und führen Sie den Storybook-Init-Befehl aus:

bash

npx storybook@latest init

Dieser Befehl erkennt, dass Sie React verwenden, und richtet alle notwendigen Abhängigkeiten und Konfigurationsdateien für Storybook ein.

Abschließend fügen wir Tailwind CSS für unsere Styling-Bedürfnisse hinzu.

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Dies erstellt die Dateien tailwind.config.js und postcss.config.js. Konfigurieren Sie nun Ihre tailwind.config.js, um anzugeben, welche Dateien Tailwind-Klassennamen enthalten werden:

javascript

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Erstellen Sie abschließend eine ./src/index.css-Datei und fügen Sie die Tailwind-Direktiven hinzu. Dies ist der Einstiegspunkt für alle Stile von Tailwind.

css

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Um sicherzustellen, dass Storybook diese Stile erkennt, importieren Sie diese CSS-Datei in .storybook/preview.ts:

javascript

// .storybook/preview.ts
import type { Preview } from "@storybook/react";
import '../src/index.css'; // Add this line

const preview: Preview = {
  parameters: {
    // ... existing parameters
  },
};

export default preview;

Nun können Sie sowohl Ihren Storybook- als auch Ihren Vite-Entwicklungsserver starten:

bash

# To run Storybook
npm run storybook

# To run the Vite app (optional)
npm run dev

Schritt 1: Eine „MetricCard"-Komponente erstellen

Ein Gesundheits-Dashboard ist ohne eine Möglichkeit zur Anzeige wichtiger Metriken wie Herzfrequenz, Blutdruck oder Schritte nicht vollständig. Lassen Sie uns eine MetricCard-Komponente erstellen.

Was wir tun

Wir erstellen eine einfache, wiederverwendbare Karte, die label, value und unit als Props verwendet. Sie hat ein sauberes, modernes Aussehen, gestylt mit Tailwind CSS.

Implementierung

Erstellen Sie zunächst eine neue Datei für unsere Komponente unter src/components/MetricCard.tsx:

typescript

// src/components/MetricCard.tsx
import React from 'react';

export interface MetricCardProps {
  label: string;
  value: string | number;
  unit: string;
}

export const MetricCard: React.FC<MetricCardProps> = ({ label, value, unit }) => {
  return (
    <div className="bg-white rounded-lg shadow-md p-6 w-full max-w-xs text-center transform hover:scale-105 transition-transform duration-300">
      <div className="text-gray-500 text-sm font-medium uppercase tracking-wider">{label}</div>
      <div className="text-4xl font-bold text-gray-800 my-2">
        {value}
        <span className="text-2xl text-gray-600 ml-1">{unit}</span>
      </div>
    </div>
  );
};

Wie es funktioniert

Dies ist eine unkomplizierte funktionale React-Komponente, die MetricCardProps akzeptiert. Wir verwenden Tailwinds Utility-Klassen direkt im JSX für das Styling. Dieser Ansatz hält unsere Stile zusammen mit unserer Komponentenlogik, was es einfach macht zu sehen, was passiert.

Die Story erstellen

Lassen Sie uns nun eine Storybook-Story erstellen, um diese Komponente zu visualisieren und zu dokumentieren. Erstellen Sie src/components/MetricCard.stories.tsx:

typescript

// src/components/MetricCard.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { MetricCard } from './MetricCard';

const meta: Meta<typeof MetricCard> = {
  title: 'Dashboard/MetricCard',
  component: MetricCard,
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text', description: 'The label for the metric' },
    value: { control: 'text', description: 'The value of the metric' },
    unit: { control: 'text', description: 'The unit for the metric value' },
  },
};

export default meta;
type Story = StoryObj<typeof MetricCard>;

export const HeartRate: Story = {
  args: {
    label: 'Heart Rate',
    value: '72',
    unit: 'bpm',
  },
};

export const StepsTaken: Story = {
  args: {
    label: 'Steps Taken',
    value: '8,452',
    unit: 'steps',
  },
};

Wenn Sie npm run storybook ausführen, sehen Sie nun Ihre MetricCard-Komponente in der Storybook-UI, mit interaktiven Steuerelementen zum Ändern ihrer Props!

Schritt 2: Eine „Pill"-Komponente für Status erstellen

Statusanzeigen sind in Gesundheits-Dashboards häufig und zeigen Dinge wie „Normal", „Hoch" oder „Aktiv" an. Eine Pill-Komponente ist perfekt dafür geeignet.

Was wir tun

Wir erstellen eine kleine, pillenförmige Komponente, die ihre Farbe basierend auf einer variant-Prop ändert.

Implementierung

Erstellen Sie die Komponentendatei unter src/components/Pill.tsx:

typescript

// src/components/Pill.tsx
import React from 'react';

export interface PillProps {
  text: string;
  variant?: 'success' | 'warning' | 'danger' | 'info';
}

export const Pill: React.FC<PillProps> = ({ text, variant = 'info' }) => {
  const baseClasses = 'inline-block px-3 py-1 text-xs font-semibold rounded-full';
  
  const variantClasses = {
    success: 'bg-green-100 text-green-800',
    warning: 'bg-yellow-100 text-yellow-800',
    danger: 'bg-red-100 text-red-800',
    info: 'bg-blue-100 text-blue-800',
  };

  return (
    <span className={`${baseClasses} ${variantClasses[variant]}`}>
      {text}
    </span>
  );
};

Wie es funktioniert

Diese Komponente verwendet ein variantClasses-Objekt, um die variant-Prop spezifischen Tailwind CSS-Klassen zuzuordnen. Dies ist ein sauberer Weg, um bedingtes Styling innerhalb einer Komponente zu handhaben.

Die Story erstellen

Nun zur Story unter src/components/Pill.stories.tsx:

typescript

// src/components/Pill.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Pill } from './Pill';

const meta: Meta<typeof Pill> = {
  title: 'Dashboard/Pill',
  component: Pill,
  tags: ['autodocs'],
  argTypes: {
    text: { control: 'text' },
    variant: {
      control: { type: 'select' },
      options: ['success', 'warning', 'danger', 'info'],
    },
  },
};

export default meta;
type Story = StoryObj<typeof Pill>;

export const Success: Story = {
  args: {
    text: 'Normal',
    variant: 'success',
  },
};

export const Warning: Story = {
  args: {
    text: 'Elevated',
    variant: 'warning',
  },
};

export const Danger: Story = {
  args: {
    text: 'High',
    variant: 'danger',
  },
};

Überprüfen Sie Ihre laufende Storybook-Instanz, und Sie finden Ihre neue Pill-Komponente, komplett mit einem Dropdown zum Testen ihrer verschiedenen Varianten.

Alles zusammenfügen: Eine Dashboard-Ansicht

Lassen Sie uns eine einfache Story erstellen, die unsere Komponenten kombiniert, um einen kleinen Abschnitt eines Gesundheits-Dashboards zu simulieren.

Erstellen Sie eine neue Story-Datei src/stories/HealthDashboard.stories.tsx:

typescript

// src/stories/HealthDashboard.stories.tsx
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { MetricCard } from '../components/MetricCard';
import { Pill } from '../components/Pill';

const DashboardView = () => (
  <div className="p-8 bg-gray-50 min-h-screen">
    <h1 className="text-3xl font-bold text-gray-800 mb-2">Patient Vitals</h1>
    <div className="flex items-center space-x-2 mb-8">
      <Pill text="Live" variant="success" />
      <Pill text="Monitoring Active" variant="info" />
    </div>
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      <MetricCard label="Heart Rate" value="72" unit="bpm" />
      <MetricCard label="Blood Pressure" value="120/80" unit="mmHg" />
      <MetricCard label="Oxygen Saturation" value="98" unit="%" />
      <MetricCard label="Temperature" value="36.6" unit="°C" />
    </div>
  </div>
);

const meta: Meta = {
  title: 'Pages/HealthDashboard',
  component: DashboardView,
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {};

Diese Story zeigt, wie einfach Sie komplexere UIs aus Ihren einfachen, isolierten Komponenten zusammenstellen können. Dies ist die Kernstärke des Aufbaus einer Komponentenbibliothek.

Produktionsbereitstellung: Bundling Ihrer Bibliothek

Wenn Sie bereit sind, Ihre Bibliothek zu teilen, müssen Sie sie in ein verteilerfähiges Format bündeln. Wir können Vite dafür konfigurieren.

Ändern Sie Ihre vite.config.ts, um den „Library-Modus" zu aktivieren:

typescript

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
import dts from 'vite-plugin-dts'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), dts()], // dts plugin for generating type definitions
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'), // Your library's entry point
      name: 'HealthDashboardLibrary',
      fileName: 'health-dashboard-library',
    },
    rollupOptions: {
      external: ['react', 'react-dom'], // Don't bundle React
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
})

Sie benötigen auch eine Einstiegspunktdatei, src/index.ts, die alle Ihre Komponenten exportiert:

typescript

// src/index.ts
export * from './components/MetricCard';
export * from './components/Pill';

Wenn Sie nun npm run build ausführen, erstellt Vite einen dist-Ordner mit Ihren gebündelten JavaScript- und CSS-Dateien, bereit zum Veröffentlichen auf npm oder in einem privaten Registry.

Fazit

Wir haben erfolgreich ein modernes Frontend-Projekt für die Erstellung einer Komponentenbibliothek mit React, Storybook und Tailwind CSS eingerichtet. Wir haben zwei wichtige Dashboard-Komponenten erstellt, sie in Storybook dokumentiert und unser Projekt für das Bundling der Bibliothek zur Produktionsverwendung konfiguriert.

Diese Grundlage ist unglaublich leistungsstark. Sie können nun:

Die Bibliothek erweitern mit komplexeren Komponenten wie Diagrammen, Tabellen und Navigationselementen.
Ein Theme-System implementieren unter Verwendung der Tailwind-Konfiguration, um Farben, Schriftarten und Abstände einfach zu ändern.
Ihre Bibliothek auf npm veröffentlichen, um sie als wiederverwendbares Paket für Ihre gesamte Organisation zu nutzen.

Der Aufbau einer Komponentenbibliothek ist eine Investition, die enorme Dividenden in Entwicklungsgeschwindigkeit, Konsistenz und Wartbarkeit zahlt.

Ressourcen

Offizielle Dokumentation:

Häufig gestellte Fragen

F: Wie weiß ich, ob dies auf mich zutrifft? A: Besprechen Sie Ihre persönliche und familiäre Krankengeschichte mit Ihrem Arzt, um Ihre individuellen Risikofaktoren zu bewerten und geeignete nächste Schritte zu bestimmen.

F: Was sollte ich meinen Arzt fragen? A: Gute Fragen sind unter anderem: „Was bedeuten meine Ergebnisse?", „Was sind meine Optionen?", „Welche Veränderungen des Lebensstils würden helfen?" und „Wann sollte ich nachuntersuchen lassen?"

F: Gibt es Veränderungen des Lebensstils, die helfen können? A: Die meisten Erkrankungen profitieren von grundlegenden Maßnahmen: ausgewogene Ernährung, regelmäßige körperliche Aktivität (150+ Minuten/Woche), качественный Schlaf (7-9 Stunden), Stressbewältigung und Vermeidung von Tabak.

Medizinischer Haftungsausschluss

Dieser Artikel dient ausschließlich zu Bildungszwecken und stellt keine medizinische Beratung dar. Konsultieren Sie immer einen qualifizierten Gesundheitsdienstleister, bevor Sie Entscheidungen über Ihre Gesundheit, Behandlung oder Pflege treffen. Individuelle Umstände variieren, und was für eine Person angemessen ist, kann für eine andere unangemessen sein.

Wenn Sie einen medizinischen Notfall haben, rufen Sie sofort 911 (oder Ihre lokale Notrufnummer) an.

Zurück zu allen Artikeln