@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/dashboard-kpi/DashboardKPI.stories.tsx

@@ -0,0 +1,422 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { DashboardKPI, defaultKPIMetrics, defaultGoals } from './index'
+import type { KPIMetric } from './index'
+import * as React from 'react'
+import { DollarSign, Users, ShoppingCart, Activity, TrendingUp, Eye, Clock, Zap } from 'lucide-react'
+
+const meta: Meta<typeof DashboardKPI> = {
+  title: 'Blocks/DashboardKPI',
+  component: DashboardKPI,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A KPI dashboard component with metric cards, sparklines, goals tracking, period selector, and optional charts.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    isLoading: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof DashboardKPI>
+
+// Mock chart component
+const MockChart = ({ height = 300 }: { height?: number }) => (
+  <div
+    className="bg-muted/30 rounded-lg flex items-center justify-center"
+    style={{ height }}
+  >
+    <span className="text-muted-foreground text-sm">Chart Area</span>
+  </div>
+)
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <DashboardKPI
+        title="Dashboard"
+        description="Key performance indicators"
+        metrics={defaultKPIMetrics}
+        selectedPeriod="30d"
+        onPeriodChange={(period) => console.log('Period:', period)}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const WithChart: Story = {
+  render: () => (
+    <div className="p-6">
+      <DashboardKPI
+        title="Performance Overview"
+        description="Track your key metrics"
+        metrics={defaultKPIMetrics}
+        chart={<MockChart />}
+        selectedPeriod="30d"
+        onPeriodChange={(period) => console.log('Period:', period)}
+      />
+    </div>
+  ),
+}
+
+export const WithGoals: Story = {
+  render: () => (
+    <div className="p-6">
+      <DashboardKPI
+        title="Goals & Targets"
+        description="Track progress towards objectives"
+        metrics={defaultKPIMetrics}
+        goals={defaultGoals}
+        selectedPeriod="30d"
+        onPeriodChange={(period) => console.log('Period:', period)}
+      />
+    </div>
+  ),
+}
+
+export const WithSecondaryMetrics: Story = {
+  render: () => {
+    const secondaryMetrics: KPIMetric[] = [
+      {
+        id: 'bounce-rate',
+        label: 'Bounce Rate',
+        value: '42.3%',
+        change: -5.2,
+        trend: 'up',
+      },
+      {
+        id: 'session-duration',
+        label: 'Avg. Session',
+        value: '3m 42s',
+        change: 12.1,
+        trend: 'up',
+      },
+      {
+        id: 'pages-per-session',
+        label: 'Pages/Session',
+        value: '4.2',
+        change: 8.5,
+        trend: 'up',
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <DashboardKPI
+          title="Website Analytics"
+          metrics={defaultKPIMetrics}
+          secondaryMetrics={secondaryMetrics}
+          selectedPeriod="30d"
+          onPeriodChange={(period) => console.log('Period:', period)}
+        />
+      </div>
+    )
+  },
+}
+
+export const Complete: Story = {
+  render: () => {
+    const secondaryMetrics: KPIMetric[] = [
+      { id: 'cac', label: 'CAC', value: '$42', change: -8, trend: 'up' },
+      { id: 'ltv', label: 'LTV', value: '$890', change: 15, trend: 'up' },
+      { id: 'churn', label: 'Churn Rate', value: '2.1%', change: -0.3, trend: 'up' },
+    ]
+
+    return (
+      <div className="p-6">
+        <DashboardKPI
+          title="Business Metrics"
+          description="Complete overview of your business performance"
+          metrics={defaultKPIMetrics}
+          secondaryMetrics={secondaryMetrics}
+          goals={defaultGoals}
+          chart={<MockChart />}
+          selectedPeriod="30d"
+          onPeriodChange={(period) => console.log('Period:', period)}
+          onRefresh={() => console.log('Refresh')}
+          onExport={() => console.log('Export')}
+          lastUpdated={new Date()}
+        />
+      </div>
+    )
+  },
+}
+
+export const Loading: Story = {
+  render: () => (
+    <div className="p-6">
+      <DashboardKPI
+        title="Loading..."
+        metrics={defaultKPIMetrics}
+        isLoading
+      />
+    </div>
+  ),
+}
+
+export const WithLastUpdated: Story = {
+  render: () => (
+    <div className="p-6">
+      <DashboardKPI
+        title="Real-time Dashboard"
+        metrics={defaultKPIMetrics}
+        lastUpdated={new Date()}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const CustomMetrics: Story = {
+  render: () => {
+    const customMetrics: KPIMetric[] = [
+      {
+        id: 'mrr',
+        label: 'Monthly Recurring Revenue',
+        value: '$124,500',
+        change: 12.5,
+        changeLabel: 'vs last month',
+        trend: 'up',
+        icon: <DollarSign className="h-4 w-4" />,
+        color: 'green',
+        sparkline: [80, 90, 85, 95, 100, 110, 125],
+      },
+      {
+        id: 'arr',
+        label: 'Annual Run Rate',
+        value: '$1.49M',
+        change: 18.2,
+        trend: 'up',
+        icon: <TrendingUp className="h-4 w-4" />,
+        color: 'blue',
+        sparkline: [1.1, 1.15, 1.2, 1.25, 1.3, 1.4, 1.49],
+      },
+      {
+        id: 'customers',
+        label: 'Total Customers',
+        value: '2,847',
+        change: 8.3,
+        trend: 'up',
+        icon: <Users className="h-4 w-4" />,
+        color: 'purple',
+        sparkline: [2400, 2500, 2550, 2600, 2700, 2780, 2847],
+      },
+      {
+        id: 'nps',
+        label: 'NPS Score',
+        value: '72',
+        change: 5,
+        trend: 'up',
+        icon: <Zap className="h-4 w-4" />,
+        color: 'yellow',
+        sparkline: [65, 66, 68, 67, 70, 71, 72],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <DashboardKPI
+          title="SaaS Metrics"
+          description="Key SaaS performance indicators"
+          metrics={customMetrics}
+          selectedPeriod="30d"
+          onPeriodChange={(period) => console.log('Period:', period)}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithTargetProgress: Story = {
+  render: () => {
+    const metricsWithTargets: KPIMetric[] = [
+      {
+        id: 'revenue',
+        label: 'Revenue Target',
+        value: '$45,000',
+        icon: <DollarSign className="h-4 w-4" />,
+        color: 'green',
+        target: 50000,
+        current: 45000,
+      },
+      {
+        id: 'users',
+        label: 'User Acquisition',
+        value: '1,850',
+        icon: <Users className="h-4 w-4" />,
+        color: 'blue',
+        target: 2000,
+        current: 1850,
+      },
+      {
+        id: 'conversion',
+        label: 'Conversion Rate',
+        value: '3.8%',
+        icon: <Activity className="h-4 w-4" />,
+        color: 'purple',
+        target: 5,
+        current: 3.8,
+      },
+      {
+        id: 'engagement',
+        label: 'Engagement Score',
+        value: '78',
+        icon: <Zap className="h-4 w-4" />,
+        color: 'yellow',
+        target: 80,
+        current: 78,
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <DashboardKPI
+          title="Quarterly Targets"
+          description="Progress towards Q4 goals"
+          metrics={metricsWithTargets}
+          selectedPeriod="90d"
+          periods={[
+            { value: '30d', label: 'This Month' },
+            { value: '90d', label: 'This Quarter' },
+            { value: '12m', label: 'This Year' },
+          ]}
+          onPeriodChange={(period) => console.log('Period:', period)}
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [period, setPeriod] = React.useState('30d')
+    const [loading, setLoading] = React.useState(false)
+
+    const handleRefresh = () => {
+      setLoading(true)
+      setTimeout(() => setLoading(false), 1500)
+    }
+
+    return (
+      <div className="p-6">
+        <DashboardKPI
+          title="Interactive Dashboard"
+          description={`Showing data for: ${period}`}
+          metrics={defaultKPIMetrics}
+          goals={defaultGoals}
+          selectedPeriod={period}
+          onPeriodChange={setPeriod}
+          onRefresh={handleRefresh}
+          onExport={() => alert('Exporting...')}
+          isLoading={loading}
+          lastUpdated={new Date()}
+        />
+      </div>
+    )
+  },
+}
+
+export const MinimalMetrics: Story = {
+  render: () => {
+    const minimalMetrics: KPIMetric[] = [
+      { id: '1', label: 'Total Users', value: '12,345' },
+      { id: '2', label: 'Active Today', value: '1,234' },
+      { id: '3', label: 'New Signups', value: '89' },
+      { id: '4', label: 'Revenue', value: '$4,567' },
+    ]
+
+    return (
+      <div className="p-6">
+        <DashboardKPI
+          title="Quick Stats"
+          metrics={minimalMetrics}
+        />
+      </div>
+    )
+  },
+}
+
+export const MarketingDashboard: Story = {
+  render: () => {
+    const marketingMetrics: KPIMetric[] = [
+      {
+        id: 'impressions',
+        label: 'Impressions',
+        value: '2.4M',
+        change: 23.5,
+        trend: 'up',
+        icon: <Eye className="h-4 w-4" />,
+        color: 'blue',
+        sparkline: [1.8, 1.9, 2.0, 2.1, 2.2, 2.3, 2.4],
+      },
+      {
+        id: 'clicks',
+        label: 'Clicks',
+        value: '48,320',
+        change: 18.2,
+        trend: 'up',
+        icon: <Activity className="h-4 w-4" />,
+        color: 'green',
+        sparkline: [35000, 38000, 40000, 42000, 45000, 47000, 48320],
+      },
+      {
+        id: 'ctr',
+        label: 'CTR',
+        value: '2.01%',
+        change: -0.15,
+        trend: 'down',
+        icon: <TrendingUp className="h-4 w-4" />,
+        color: 'yellow',
+        sparkline: [2.2, 2.18, 2.15, 2.1, 2.05, 2.02, 2.01],
+      },
+      {
+        id: 'cost',
+        label: 'Ad Spend',
+        value: '$12,450',
+        change: 5.3,
+        trend: 'up',
+        icon: <DollarSign className="h-4 w-4" />,
+        color: 'purple',
+        sparkline: [10000, 10500, 11000, 11500, 12000, 12200, 12450],
+      },
+    ]
+
+    const marketingGoals = [
+      { id: 'leads', label: 'Monthly Leads', current: 850, target: 1000, unit: '' },
+      { id: 'cpl', label: 'Cost per Lead', current: 14.6, target: 15, unit: '$' },
+      { id: 'roas', label: 'ROAS', current: 4.2, target: 4, unit: 'x' },
+    ]
+
+    return (
+      <div className="min-h-screen bg-muted/30">
+        <header className="bg-background border-b px-6 py-4">
+          <div className="flex items-center justify-between">
+            <span className="font-bold text-xl">Marketing Dashboard</span>
+          </div>
+        </header>
+        <main className="p-6">
+          <DashboardKPI
+            title="Campaign Performance"
+            description="Overview of all active marketing campaigns"
+            metrics={marketingMetrics}
+            goals={marketingGoals}
+            chart={<MockChart height={350} />}
+            selectedPeriod="30d"
+            onPeriodChange={(period) => console.log('Period:', period)}
+            onRefresh={() => console.log('Refresh')}
+            onExport={() => console.log('Export')}
+            lastUpdated={new Date()}
+          />
+        </main>
+      </div>
+    )
+  },
+}