@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-spinner/WakaSpinner.stories.tsx

@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaSpinner } from './index'
+
+const meta: Meta<typeof WakaSpinner> = {
+  title: 'Components/Display/WakaSpinner',
+  component: WakaSpinner,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A space-themed loading spinner with an orbiting rocket and floating asteroids.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl'],
+      description: 'Size of the spinner',
+    },
+    speed: {
+      control: { type: 'range', min: 0.5, max: 5, step: 0.5 },
+      description: 'Rotation speed in seconds',
+    },
+    showAsteroids: {
+      control: 'boolean',
+      description: 'Show floating asteroids',
+    },
+    rocketColor: {
+      control: 'text',
+      description: 'Color of the rocket',
+    },
+    asteroidColor: {
+      control: 'text',
+      description: 'Color of the asteroids',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSpinner>
+
+export const Default: Story = {
+  args: {},
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-end gap-8">
+      <div className="text-center">
+        <WakaSpinner size="sm" />
+        <p className="text-xs text-muted-foreground mt-2">Small</p>
+      </div>
+      <div className="text-center">
+        <WakaSpinner size="md" />
+        <p className="text-xs text-muted-foreground mt-2">Medium</p>
+      </div>
+      <div className="text-center">
+        <WakaSpinner size="lg" />
+        <p className="text-xs text-muted-foreground mt-2">Large</p>
+      </div>
+      <div className="text-center">
+        <WakaSpinner size="xl" />
+        <p className="text-xs text-muted-foreground mt-2">Extra Large</p>
+      </div>
+    </div>
+  ),
+}
+
+export const Speeds: Story = {
+  render: () => (
+    <div className="flex items-end gap-8">
+      <div className="text-center">
+        <WakaSpinner size="md" speed={1} />
+        <p className="text-xs text-muted-foreground mt-2">Fast (1s)</p>
+      </div>
+      <div className="text-center">
+        <WakaSpinner size="md" speed={2} />
+        <p className="text-xs text-muted-foreground mt-2">Normal (2s)</p>
+      </div>
+      <div className="text-center">
+        <WakaSpinner size="md" speed={4} />
+        <p className="text-xs text-muted-foreground mt-2">Slow (4s)</p>
+      </div>
+    </div>
+  ),
+}
+
+export const WithoutAsteroids: Story = {
+  args: {
+    size: 'lg',
+    showAsteroids: false,
+  },
+}
+
+export const CustomColors: Story = {
+  render: () => (
+    <div className="flex items-center gap-8">
+      <div className="text-center">
+        <WakaSpinner size="lg" rocketColor="text-blue-500" asteroidColor="text-blue-300" />
+        <p className="text-xs text-muted-foreground mt-2">Blue</p>
+      </div>
+      <div className="text-center">
+        <WakaSpinner size="lg" rocketColor="text-green-500" asteroidColor="text-green-300" />
+        <p className="text-xs text-muted-foreground mt-2">Green</p>
+      </div>
+      <div className="text-center">
+        <WakaSpinner size="lg" rocketColor="text-purple-500" asteroidColor="text-purple-300" />
+        <p className="text-xs text-muted-foreground mt-2">Purple</p>
+      </div>
+      <div className="text-center">
+        <WakaSpinner size="lg" rocketColor="text-orange-500" asteroidColor="text-orange-300" />
+        <p className="text-xs text-muted-foreground mt-2">Orange</p>
+      </div>
+    </div>
+  ),
+}
+
+export const LoadingOverlay: Story = {
+  render: () => (
+    <div className="relative w-[400px] h-[300px] border rounded-lg overflow-hidden">
+      <div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+        <div className="text-center">
+          <WakaSpinner size="lg" />
+          <p className="mt-4 text-sm text-muted-foreground">Loading content...</p>
+        </div>
+      </div>
+      <div className="p-4 opacity-30">
+        <h3 className="font-semibold">Card Title</h3>
+        <p className="text-sm text-muted-foreground">
+          This content is loading. The spinner displays while data is being fetched.
+        </p>
+      </div>
+    </div>
+  ),
+}
+
+export const InButton: Story = {
+  render: () => (
+    <button className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-md">
+      <WakaSpinner size="sm" rocketColor="text-primary-foreground" showAsteroids={false} />
+      <span>Processing...</span>
+    </button>
+  ),
+}
+
+export const FullPageLoader: Story = {
+  render: () => (
+    <div className="w-[600px] h-[400px] flex flex-col items-center justify-center bg-gradient-to-b from-background to-muted/30 rounded-lg">
+      <WakaSpinner size="xl" />
+      <h2 className="mt-6 text-lg font-semibold">Launching your experience</h2>
+      <p className="mt-2 text-sm text-muted-foreground">Please wait while we prepare everything...</p>
+    </div>
+  ),
+}

package/src/components/waka-stat/WakaStat.stories.tsx

@@ -0,0 +1,334 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaStat, WakaStatGroup } from './index'
+import * as React from 'react'
+import { Users, DollarSign, ShoppingCart, TrendingUp, Activity, Package, Eye, Download } from 'lucide-react'
+
+const meta: Meta<typeof WakaStat> = {
+  title: 'Components/Display/WakaStat',
+  component: WakaStat,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A statistic display component with trends, icons, and multiple visual variants.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'card', 'minimal', 'gradient'],
+      description: 'Visual variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the component',
+    },
+    color: {
+      control: 'select',
+      options: ['default', 'primary', 'success', 'warning', 'destructive', 'blue', 'purple'],
+      description: 'Accent color',
+    },
+    trend: {
+      control: 'select',
+      options: ['up', 'down', 'neutral'],
+      description: 'Trend direction',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaStat>
+
+export const Default: Story = {
+  args: {
+    label: 'Total Revenue',
+    value: '$45,231.89',
+    description: 'Monthly revenue from all sources',
+    trend: 'up',
+    trendValue: '+20.1%',
+    trendText: 'from last month',
+    icon: <DollarSign className="h-5 w-5" />,
+  },
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-6 w-[600px]">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Default</p>
+        <WakaStat
+          label="Total Users"
+          value="2,350"
+          trend="up"
+          trendValue="+12%"
+          icon={<Users className="h-5 w-5" />}
+          variant="default"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Card</p>
+        <WakaStat
+          label="Total Users"
+          value="2,350"
+          trend="up"
+          trendValue="+12%"
+          icon={<Users className="h-5 w-5" />}
+          variant="card"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Minimal</p>
+        <WakaStat
+          label="Total Users"
+          value="2,350"
+          trend="up"
+          trendValue="+12%"
+          variant="minimal"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Gradient</p>
+        <WakaStat
+          label="Total Users"
+          value="2,350"
+          trend="up"
+          trendValue="+12%"
+          icon={<Users className="h-5 w-5" />}
+          variant="gradient"
+          color="primary"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const Colors: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4 w-[600px]">
+      {(['default', 'primary', 'success', 'warning', 'destructive', 'blue', 'purple'] as const).map((color) => (
+        <WakaStat
+          key={color}
+          label={color.charAt(0).toUpperCase() + color.slice(1)}
+          value="1,234"
+          icon={<Activity className="h-5 w-5" />}
+          variant="card"
+          color={color}
+        />
+      ))}
+    </div>
+  ),
+}
+
+export const GradientColors: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4 w-[600px]">
+      {(['primary', 'success', 'warning', 'destructive', 'blue', 'purple'] as const).map((color) => (
+        <WakaStat
+          key={color}
+          label={color.charAt(0).toUpperCase() + color.slice(1)}
+          value="1,234"
+          icon={<Activity className="h-5 w-5" />}
+          variant="gradient"
+          color={color}
+        />
+      ))}
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-6 w-[400px]">
+      <WakaStat
+        label="Small"
+        value="$1,234"
+        trend="up"
+        trendValue="+5%"
+        icon={<DollarSign className="h-4 w-4" />}
+        variant="card"
+        size="sm"
+      />
+      <WakaStat
+        label="Medium (Default)"
+        value="$12,345"
+        trend="up"
+        trendValue="+10%"
+        icon={<DollarSign className="h-5 w-5" />}
+        variant="card"
+        size="md"
+      />
+      <WakaStat
+        label="Large"
+        value="$123,456"
+        trend="up"
+        trendValue="+15%"
+        icon={<DollarSign className="h-6 w-6" />}
+        variant="card"
+        size="lg"
+      />
+    </div>
+  ),
+}
+
+export const Trends: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-4 w-[600px]">
+      <WakaStat
+        label="Up Trend"
+        value="$45,231"
+        trend="up"
+        trendValue="+20.1%"
+        trendText="from last month"
+        variant="card"
+      />
+      <WakaStat
+        label="Down Trend"
+        value="$32,456"
+        trend="down"
+        trendValue="-8.2%"
+        trendText="from last month"
+        variant="card"
+      />
+      <WakaStat
+        label="Neutral"
+        value="$28,000"
+        trend="neutral"
+        trendValue="0%"
+        trendText="no change"
+        variant="card"
+      />
+    </div>
+  ),
+}
+
+export const InvertedTrend: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4 w-[500px]">
+      <WakaStat
+        label="Churn Rate"
+        value="3.2%"
+        description="Down is good"
+        trend="down"
+        trendValue="-1.5%"
+        invertTrend
+        variant="card"
+      />
+      <WakaStat
+        label="Bug Count"
+        value="23"
+        description="Down is good"
+        trend="down"
+        trendValue="-15"
+        invertTrend
+        variant="card"
+      />
+    </div>
+  ),
+}
+
+export const Loading: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4 w-[500px]">
+      <WakaStat label="Loading" value="" loading variant="card" size="sm" />
+      <WakaStat label="Loading" value="" loading variant="card" size="md" />
+      <WakaStat label="Loading" value="" loading variant="card" size="lg" />
+      <WakaStat label="Loading" value="" loading variant="gradient" color="primary" />
+    </div>
+  ),
+}
+
+export const StatGroup: Story = {
+  render: () => (
+    <WakaStatGroup layout="grid" columns={4} gap="md" className="w-[800px]">
+      <WakaStat
+        label="Total Revenue"
+        value="$45,231.89"
+        trend="up"
+        trendValue="+20.1%"
+        icon={<DollarSign className="h-5 w-5" />}
+        variant="card"
+        color="success"
+      />
+      <WakaStat
+        label="Subscriptions"
+        value="+2,350"
+        trend="up"
+        trendValue="+180.1%"
+        icon={<Users className="h-5 w-5" />}
+        variant="card"
+        color="blue"
+      />
+      <WakaStat
+        label="Sales"
+        value="+12,234"
+        trend="up"
+        trendValue="+19%"
+        icon={<ShoppingCart className="h-5 w-5" />}
+        variant="card"
+        color="purple"
+      />
+      <WakaStat
+        label="Active Now"
+        value="+573"
+        trend="up"
+        trendValue="+201"
+        icon={<Activity className="h-5 w-5" />}
+        variant="card"
+        color="primary"
+      />
+    </WakaStatGroup>
+  ),
+}
+
+export const Dashboard: Story = {
+  render: () => (
+    <div className="p-6 bg-muted/30 rounded-lg w-[900px]">
+      <h2 className="text-xl font-semibold mb-6">Dashboard Overview</h2>
+      <WakaStatGroup layout="grid" columns={4} gap="md">
+        <WakaStat
+          label="Total Revenue"
+          value="$45,231.89"
+          description="+20.1% from last month"
+          trend="up"
+          trendValue="+20.1%"
+          icon={<DollarSign className="h-5 w-5" />}
+          variant="card"
+          color="success"
+        />
+        <WakaStat
+          label="Active Users"
+          value="2,350"
+          description="+180 new users this week"
+          trend="up"
+          trendValue="+12%"
+          icon={<Users className="h-5 w-5" />}
+          variant="card"
+          color="blue"
+        />
+        <WakaStat
+          label="Page Views"
+          value="1.2M"
+          description="Total views this month"
+          trend="up"
+          trendValue="+5.2%"
+          icon={<Eye className="h-5 w-5" />}
+          variant="card"
+          color="purple"
+        />
+        <WakaStat
+          label="Downloads"
+          value="12,543"
+          description="App downloads"
+          trend="down"
+          trendValue="-3.1%"
+          icon={<Download className="h-5 w-5" />}
+          variant="card"
+          color="warning"
+        />
+      </WakaStatGroup>
+    </div>
+  ),
+}