@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-stepper/WakaStepper.stories.tsx

@@ -0,0 +1,468 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaStepper, StepperNavigation } from './index'
+import type { Step } from './index'
+import * as React from 'react'
+import { User, CreditCard, CheckCircle, Package, Truck, MapPin } from 'lucide-react'
+
+const meta: Meta<typeof WakaStepper> = {
+  title: 'Components/Display/WakaStepper',
+  component: WakaStepper,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A step wizard component for multi-step forms and processes with progress tracking.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Stepper orientation',
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'simple', 'numbered'],
+      description: 'Visual variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the stepper',
+    },
+    clickable: {
+      control: 'boolean',
+      description: 'Allow clicking on steps',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaStepper>
+
+const basicSteps: Step[] = [
+  {
+    id: 'step-1',
+    title: 'Account',
+    description: 'Create your account',
+  },
+  {
+    id: 'step-2',
+    title: 'Profile',
+    description: 'Set up your profile',
+  },
+  {
+    id: 'step-3',
+    title: 'Preferences',
+    description: 'Configure settings',
+  },
+  {
+    id: 'step-4',
+    title: 'Complete',
+    description: 'Review and finish',
+  },
+]
+
+export const Default: Story = {
+  args: {
+    steps: basicSteps,
+  },
+  render: (args) => {
+    const [currentStep, setCurrentStep] = React.useState(1)
+    return (
+      <div className="w-[700px]">
+        <WakaStepper
+          {...args}
+          currentStep={currentStep}
+          onStepChange={setCurrentStep}
+        />
+        <div className="mt-8 flex justify-between">
+          <button
+            onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}
+            disabled={currentStep === 0}
+            className="px-4 py-2 border rounded disabled:opacity-50"
+          >
+            Previous
+          </button>
+          <button
+            onClick={() => setCurrentStep(Math.min(basicSteps.length - 1, currentStep + 1))}
+            disabled={currentStep === basicSteps.length - 1}
+            className="px-4 py-2 bg-primary text-primary-foreground rounded disabled:opacity-50"
+          >
+            Next
+          </button>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const Vertical: Story = {
+  render: () => {
+    const [currentStep, setCurrentStep] = React.useState(1)
+    return (
+      <div className="w-[400px]">
+        <WakaStepper
+          steps={basicSteps}
+          currentStep={currentStep}
+          onStepChange={setCurrentStep}
+          orientation="vertical"
+          clickable
+          allowPrevious
+        />
+      </div>
+    )
+  },
+}
+
+export const Variants: Story = {
+  render: () => {
+    const [currentStep, setCurrentStep] = React.useState(1)
+    return (
+      <div className="space-y-12 w-[700px]">
+        <div>
+          <p className="text-sm text-muted-foreground mb-4">Default (Numbered)</p>
+          <WakaStepper
+            steps={basicSteps}
+            currentStep={currentStep}
+            variant="default"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-4">Simple (Dots)</p>
+          <WakaStepper
+            steps={basicSteps}
+            currentStep={currentStep}
+            variant="simple"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-4">Numbered</p>
+          <WakaStepper
+            steps={basicSteps}
+            currentStep={currentStep}
+            variant="numbered"
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: () => {
+    const [currentStep, setCurrentStep] = React.useState(1)
+    return (
+      <div className="space-y-12 w-[700px]">
+        <div>
+          <p className="text-sm text-muted-foreground mb-4">Small</p>
+          <WakaStepper
+            steps={basicSteps}
+            currentStep={currentStep}
+            size="sm"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-4">Medium</p>
+          <WakaStepper
+            steps={basicSteps}
+            currentStep={currentStep}
+            size="md"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-4">Large</p>
+          <WakaStepper
+            steps={basicSteps}
+            currentStep={currentStep}
+            size="lg"
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithIcons: Story = {
+  render: () => {
+    const stepsWithIcons: Step[] = [
+      {
+        id: 'account',
+        title: 'Account',
+        description: 'Create account',
+        icon: <User className="h-4 w-4" />,
+      },
+      {
+        id: 'payment',
+        title: 'Payment',
+        description: 'Add payment method',
+        icon: <CreditCard className="h-4 w-4" />,
+      },
+      {
+        id: 'confirm',
+        title: 'Confirm',
+        description: 'Review order',
+        icon: <CheckCircle className="h-4 w-4" />,
+      },
+    ]
+
+    const [currentStep, setCurrentStep] = React.useState(1)
+    return (
+      <div className="w-[600px]">
+        <WakaStepper
+          steps={stepsWithIcons}
+          currentStep={currentStep}
+          onStepChange={setCurrentStep}
+        />
+      </div>
+    )
+  },
+}
+
+export const Clickable: Story = {
+  render: () => {
+    const [currentStep, setCurrentStep] = React.useState(2)
+    return (
+      <div className="w-[700px]">
+        <p className="text-sm text-muted-foreground mb-4">Click on any completed step to navigate</p>
+        <WakaStepper
+          steps={basicSteps}
+          currentStep={currentStep}
+          onStepChange={setCurrentStep}
+          clickable
+          allowPrevious
+        />
+      </div>
+    )
+  },
+}
+
+export const WithContent: Story = {
+  render: () => {
+    const stepsWithContent: Step[] = [
+      {
+        id: 'step-1',
+        title: 'Personal Info',
+        description: 'Enter your details',
+        content: (
+          <div className="space-y-4">
+            <div>
+              <label className="text-sm font-medium">Name</label>
+              <input className="w-full mt-1 px-3 py-2 border rounded-md" placeholder="John Doe" />
+            </div>
+            <div>
+              <label className="text-sm font-medium">Email</label>
+              <input className="w-full mt-1 px-3 py-2 border rounded-md" placeholder="john@example.com" />
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: 'step-2',
+        title: 'Address',
+        description: 'Shipping address',
+        content: (
+          <div className="space-y-4">
+            <div>
+              <label className="text-sm font-medium">Street</label>
+              <input className="w-full mt-1 px-3 py-2 border rounded-md" placeholder="123 Main St" />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="text-sm font-medium">City</label>
+                <input className="w-full mt-1 px-3 py-2 border rounded-md" placeholder="City" />
+              </div>
+              <div>
+                <label className="text-sm font-medium">ZIP</label>
+                <input className="w-full mt-1 px-3 py-2 border rounded-md" placeholder="12345" />
+              </div>
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: 'step-3',
+        title: 'Review',
+        description: 'Confirm details',
+        content: (
+          <div className="text-center py-8">
+            <CheckCircle className="h-12 w-12 text-green-500 mx-auto mb-4" />
+            <h3 className="font-semibold">All set!</h3>
+            <p className="text-muted-foreground">Review your information and submit.</p>
+          </div>
+        ),
+      },
+    ]
+
+    const [currentStep, setCurrentStep] = React.useState(0)
+    return (
+      <div className="w-[600px]">
+        <WakaStepper
+          steps={stepsWithContent}
+          currentStep={currentStep}
+          onStepChange={setCurrentStep}
+          showContent
+        />
+        <StepperNavigation
+          onFinish={currentStep === stepsWithContent.length - 1 ? () => alert('Submitted!') : undefined}
+          finishLabel="Submit"
+        />
+      </div>
+    )
+  },
+}
+
+export const OrderTracking: Story = {
+  render: () => {
+    const orderSteps: Step[] = [
+      {
+        id: 'ordered',
+        title: 'Order Placed',
+        description: 'Jan 15, 2024',
+        icon: <Package className="h-4 w-4" />,
+      },
+      {
+        id: 'shipped',
+        title: 'Shipped',
+        description: 'Jan 16, 2024',
+        icon: <Truck className="h-4 w-4" />,
+      },
+      {
+        id: 'delivery',
+        title: 'Out for Delivery',
+        description: 'Jan 18, 2024',
+        icon: <MapPin className="h-4 w-4" />,
+      },
+      {
+        id: 'delivered',
+        title: 'Delivered',
+        description: 'Expected Jan 18',
+        icon: <CheckCircle className="h-4 w-4" />,
+      },
+    ]
+
+    return (
+      <div className="border rounded-lg p-6 w-[700px]">
+        <h3 className="font-semibold text-lg mb-6">Order #ORD-2024-001</h3>
+        <WakaStepper
+          steps={orderSteps}
+          currentStep={2}
+        />
+      </div>
+    )
+  },
+}
+
+export const VerticalWithContent: Story = {
+  render: () => {
+    const setupSteps: Step[] = [
+      {
+        id: 'connect',
+        title: 'Connect Repository',
+        description: 'Link your GitHub repo',
+        content: (
+          <button className="w-full py-2 border rounded-md hover:bg-muted">
+            Connect GitHub
+          </button>
+        ),
+      },
+      {
+        id: 'configure',
+        title: 'Configure Build',
+        description: 'Set build settings',
+        content: (
+          <div className="space-y-2">
+            <input className="w-full px-3 py-2 border rounded-md" placeholder="Build command" />
+            <input className="w-full px-3 py-2 border rounded-md" placeholder="Output directory" />
+          </div>
+        ),
+      },
+      {
+        id: 'deploy',
+        title: 'Deploy',
+        description: 'Launch your project',
+        content: (
+          <button className="w-full py-2 bg-primary text-primary-foreground rounded-md">
+            Deploy Now
+          </button>
+        ),
+      },
+    ]
+
+    const [currentStep, setCurrentStep] = React.useState(1)
+    return (
+      <div className="w-[400px]">
+        <WakaStepper
+          steps={setupSteps}
+          currentStep={currentStep}
+          onStepChange={setCurrentStep}
+          orientation="vertical"
+          showContent
+          clickable
+        />
+      </div>
+    )
+  },
+}
+
+export const OptionalSteps: Story = {
+  render: () => {
+    const stepsWithOptional: Step[] = [
+      {
+        id: 'required-1',
+        title: 'Basic Info',
+        description: 'Required',
+      },
+      {
+        id: 'optional-1',
+        title: 'Additional Details',
+        description: 'Optional step',
+        optional: true,
+      },
+      {
+        id: 'required-2',
+        title: 'Confirmation',
+        description: 'Required',
+      },
+    ]
+
+    const [currentStep, setCurrentStep] = React.useState(0)
+    return (
+      <div className="w-[600px]">
+        <WakaStepper
+          steps={stepsWithOptional}
+          currentStep={currentStep}
+          onStepChange={setCurrentStep}
+        />
+        <div className="mt-8 flex justify-between">
+          <button
+            onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}
+            disabled={currentStep === 0}
+            className="px-4 py-2 border rounded disabled:opacity-50"
+          >
+            Back
+          </button>
+          <div className="flex gap-2">
+            {stepsWithOptional[currentStep]?.optional && (
+              <button
+                onClick={() => setCurrentStep(currentStep + 1)}
+                className="px-4 py-2 border rounded"
+              >
+                Skip
+              </button>
+            )}
+            <button
+              onClick={() => setCurrentStep(currentStep + 1)}
+              disabled={currentStep === stepsWithOptional.length - 1}
+              className="px-4 py-2 bg-primary text-primary-foreground rounded disabled:opacity-50"
+            >
+              Continue
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}

package/src/components/waka-streak-counter/WakaStreakCounter.stories.tsx

@@ -0,0 +1,235 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaStreakCounter } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaStreakCounter> = {
+  title: 'Components/Gamification/WakaStreakCounter',
+  component: WakaStreakCounter,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A streak counter with flame animation, confetti celebration, and milestone tracking for gamification.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    streak: {
+      control: { type: 'number', min: 0, max: 365 },
+      description: 'Current streak count',
+    },
+    maxStreak: {
+      control: { type: 'number', min: 0, max: 365 },
+      description: 'Best streak achieved',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant',
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'compact', 'detailed'],
+      description: 'Display variant',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+    showFlame: {
+      control: 'boolean',
+      description: 'Show flame animation',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaStreakCounter>
+
+export const Default: Story = {
+  args: {
+    streak: 7,
+    maxStreak: 14,
+    size: 'md',
+    variant: 'default',
+    animated: true,
+    showFlame: true,
+  },
+  render: (args) => <WakaStreakCounter {...args} />,
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-6 items-start">
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Default</p>
+        <WakaStreakCounter streak={14} variant="default" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Compact</p>
+        <WakaStreakCounter streak={14} variant="compact" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Detailed</p>
+        <WakaStreakCounter streak={14} maxStreak={30} variant="detailed" />
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-end gap-6">
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <WakaStreakCounter streak={5} size="sm" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Medium</p>
+        <WakaStreakCounter streak={10} size="md" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <WakaStreakCounter streak={15} size="lg" />
+      </div>
+    </div>
+  ),
+}
+
+export const StreakLevels: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-6">
+      <div className="p-4 rounded-lg border text-center">
+        <p className="text-sm text-muted-foreground mb-2">No Streak</p>
+        <WakaStreakCounter streak={0} />
+      </div>
+      <div className="p-4 rounded-lg border text-center">
+        <p className="text-sm text-muted-foreground mb-2">Starting (3 days)</p>
+        <WakaStreakCounter streak={3} />
+      </div>
+      <div className="p-4 rounded-lg border text-center">
+        <p className="text-sm text-muted-foreground mb-2">Week (7 days)</p>
+        <WakaStreakCounter streak={7} />
+      </div>
+      <div className="p-4 rounded-lg border text-center">
+        <p className="text-sm text-muted-foreground mb-2">Month (30 days)</p>
+        <WakaStreakCounter streak={30} />
+      </div>
+      <div className="p-4 rounded-lg border text-center">
+        <p className="text-sm text-muted-foreground mb-2">Quarter (90 days)</p>
+        <WakaStreakCounter streak={90} />
+      </div>
+      <div className="p-4 rounded-lg border text-center">
+        <p className="text-sm text-muted-foreground mb-2">Year (365 days)</p>
+        <WakaStreakCounter streak={365} />
+      </div>
+    </div>
+  ),
+}
+
+export const WithMaxStreak: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="p-4 rounded-lg border">
+        <p className="text-sm text-muted-foreground mb-2">Current vs Best</p>
+        <WakaStreakCounter streak={12} maxStreak={45} variant="detailed" />
+      </div>
+      <div className="p-4 rounded-lg border">
+        <p className="text-sm text-muted-foreground mb-2">New Personal Best!</p>
+        <WakaStreakCounter streak={50} maxStreak={45} variant="detailed" />
+      </div>
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [streak, setStreak] = React.useState(5)
+    const [maxStreak, setMaxStreak] = React.useState(10)
+
+    const incrementStreak = () => {
+      const newStreak = streak + 1
+      setStreak(newStreak)
+      if (newStreak > maxStreak) {
+        setMaxStreak(newStreak)
+      }
+    }
+
+    const breakStreak = () => {
+      setStreak(0)
+    }
+
+    return (
+      <div className="space-y-6">
+        <WakaStreakCounter streak={streak} maxStreak={maxStreak} variant="detailed" size="lg" />
+
+        <div className="flex gap-2 justify-center">
+          <button
+            onClick={incrementStreak}
+            className="px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600"
+          >
+            +1 Day
+          </button>
+          <button
+            onClick={breakStreak}
+            className="px-4 py-2 rounded-lg bg-red-500 text-white font-medium hover:bg-red-600"
+          >
+            Break Streak
+          </button>
+          <button
+            onClick={() => { setStreak(5); setMaxStreak(10) }}
+            className="px-4 py-2 rounded-lg border font-medium hover:bg-muted"
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const DashboardWidget: Story = {
+  render: () => (
+    <div className="w-[350px] p-4 rounded-xl border bg-gradient-to-br from-orange-500/10 to-red-500/10">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="font-semibold">Daily Streak</h3>
+        <span className="text-xs text-muted-foreground">Keep it going!</span>
+      </div>
+      <WakaStreakCounter streak={21} maxStreak={35} variant="detailed" />
+      <div className="mt-4 pt-4 border-t">
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">Next milestone</span>
+          <span className="font-medium">30 days (9 to go)</span>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const MultipleUsers: Story = {
+  render: () => (
+    <div className="space-y-4 w-[400px]">
+      <h3 className="font-semibold">Leaderboard - Streaks</h3>
+      {[
+        { name: 'Alice', streak: 45, avatar: 'A' },
+        { name: 'Bob', streak: 32, avatar: 'B' },
+        { name: 'Carol', streak: 28, avatar: 'C' },
+        { name: 'David', streak: 14, avatar: 'D' },
+      ].map((user, index) => (
+        <div key={user.name} className="flex items-center gap-3 p-3 rounded-lg border">
+          <span className="text-lg font-bold text-muted-foreground w-6">#{index + 1}</span>
+          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center text-white font-bold text-sm">
+            {user.avatar}
+          </div>
+          <span className="font-medium flex-1">{user.name}</span>
+          <WakaStreakCounter streak={user.streak} variant="compact" size="sm" />
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => <WakaStreakCounter streak={15} animated={false} showFlame={false} />,
+}