StorybookとTailwind CSSで始めるヘルスダッシュボード向けコンポーネントライブラリ構築

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

npx storybook@latest init

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

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

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

// .storybook/preview.ts
import type { Preview } from "@storybook/react";
import '../src/index.css'; // この行を追加

const preview: Preview = {
  parameters: {
    // ... 既存のパラメータ
  },
};

export default preview;

# Storybookを実行する場合
npm run storybook

# Viteアプリを実行する場合（オプション）
npm run dev

// 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>
  );
};

// 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',
  },
};

// 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>
  );
};

// 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',
  },
};

// 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 = {};

// 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プラグイン
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'), // ライブラリのエントリポイント
      name: 'HealthDashboardLibrary',
      fileName: 'health-dashboard-library',
    },
    rollupOptions: {
      external: ['react', 'react-dom'], // Reactをバンドルしない
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
})

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