@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-loading-orbit/WakaLoadingOrbit.stories.tsx

@@ -0,0 +1,413 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  WakaLoadingOrbit,
+  WakaLoadingOrbitSimple,
+  WakaLoadingOrbitSolar,
+  WakaLoadingOrbitAtom,
+  WakaLoadingOrbitMinimal,
+  WakaLoadingOrbitGalaxy,
+  orbitPresets,
+  useLoadingOrbit,
+} from './index'
+import type { OrbitConfig } from './index'
+import * as React from 'react'
+import { Zap, Loader2, Cloud, Database, Server } from 'lucide-react'
+
+const meta: Meta<typeof WakaLoadingOrbit> = {
+  title: 'Components/Effects/WakaLoadingOrbit',
+  component: WakaLoadingOrbit,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'An orbital loading animation with customizable planets, orbit paths, and multiple presets.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl'],
+      description: 'Size of the loading orbit',
+    },
+    orbitCount: {
+      control: { type: 'range', min: 1, max: 6, step: 1 },
+      description: 'Number of orbits',
+    },
+    showPaths: {
+      control: 'boolean',
+      description: 'Show orbit paths',
+    },
+    paused: {
+      control: 'boolean',
+      description: 'Pause the animation',
+    },
+    centerScale: {
+      control: { type: 'range', min: 0.5, max: 2, step: 0.1 },
+      description: 'Center dot scale',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaLoadingOrbit>
+
+export const Default: Story = {
+  args: {
+    size: 'md',
+  },
+  render: (args) => <WakaLoadingOrbit {...args} />,
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-8">
+      <div className="text-center">
+        <WakaLoadingOrbit size="sm" />
+        <p className="text-xs text-muted-foreground mt-2">Small</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit size="md" />
+        <p className="text-xs text-muted-foreground mt-2">Medium</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit size="lg" />
+        <p className="text-xs text-muted-foreground mt-2">Large</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit size="xl" />
+        <p className="text-xs text-muted-foreground mt-2">Extra Large</p>
+      </div>
+    </div>
+  ),
+}
+
+export const Presets: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-12 justify-center">
+      <div className="text-center">
+        <WakaLoadingOrbitSimple size="lg" />
+        <p className="text-sm text-muted-foreground mt-4">Simple</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbitSolar size="lg" />
+        <p className="text-sm text-muted-foreground mt-4">Solar</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbitAtom size="lg" />
+        <p className="text-sm text-muted-foreground mt-4">Atom</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbitMinimal size="lg" />
+        <p className="text-sm text-muted-foreground mt-4">Minimal</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbitGalaxy size="lg" />
+        <p className="text-sm text-muted-foreground mt-4">Galaxy</p>
+      </div>
+    </div>
+  ),
+}
+
+export const OrbitCounts: Story = {
+  render: () => (
+    <div className="flex items-center gap-8">
+      <div className="text-center">
+        <WakaLoadingOrbit size="lg" orbitCount={1} />
+        <p className="text-xs text-muted-foreground mt-2">1 orbit</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit size="lg" orbitCount={2} />
+        <p className="text-xs text-muted-foreground mt-2">2 orbits</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit size="lg" orbitCount={3} />
+        <p className="text-xs text-muted-foreground mt-2">3 orbits</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit size="lg" orbitCount={5} />
+        <p className="text-xs text-muted-foreground mt-2">5 orbits</p>
+      </div>
+    </div>
+  ),
+}
+
+export const WithoutPaths: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="text-center">
+        <WakaLoadingOrbit size="lg" showPaths />
+        <p className="text-xs text-muted-foreground mt-2">With paths</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit size="lg" showPaths={false} />
+        <p className="text-xs text-muted-foreground mt-2">Without paths</p>
+      </div>
+    </div>
+  ),
+}
+
+export const CustomColors: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="text-center">
+        <WakaLoadingOrbit
+          size="lg"
+          primaryColor="#ef4444"
+          secondaryColor="#f97316"
+          accentColor="#eab308"
+          centerColor="#ef4444"
+        />
+        <p className="text-xs text-muted-foreground mt-2">Warm</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit
+          size="lg"
+          primaryColor="#3b82f6"
+          secondaryColor="#8b5cf6"
+          accentColor="#ec4899"
+          centerColor="#3b82f6"
+        />
+        <p className="text-xs text-muted-foreground mt-2">Cool</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit
+          size="lg"
+          primaryColor="#22c55e"
+          secondaryColor="#14b8a6"
+          accentColor="#06b6d4"
+          centerColor="#22c55e"
+        />
+        <p className="text-xs text-muted-foreground mt-2">Nature</p>
+      </div>
+    </div>
+  ),
+}
+
+export const WithCenterIcon: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="text-center">
+        <WakaLoadingOrbit
+          size="lg"
+          centerIcon={<Zap className="h-6 w-6 text-primary" />}
+        />
+        <p className="text-xs text-muted-foreground mt-2">Zap</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit
+          size="lg"
+          centerIcon={<Cloud className="h-6 w-6 text-primary" />}
+        />
+        <p className="text-xs text-muted-foreground mt-2">Cloud</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit
+          size="lg"
+          centerIcon={<Database className="h-6 w-6 text-primary" />}
+        />
+        <p className="text-xs text-muted-foreground mt-2">Database</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit
+          size="lg"
+          centerIcon={<Server className="h-6 w-6 text-primary" />}
+        />
+        <p className="text-xs text-muted-foreground mt-2">Server</p>
+      </div>
+    </div>
+  ),
+}
+
+export const CenterScale: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="text-center">
+        <WakaLoadingOrbit size="lg" centerScale={0.5} />
+        <p className="text-xs text-muted-foreground mt-2">0.5x</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit size="lg" centerScale={1} />
+        <p className="text-xs text-muted-foreground mt-2">1x</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit size="lg" centerScale={1.5} />
+        <p className="text-xs text-muted-foreground mt-2">1.5x</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit size="lg" centerScale={2} />
+        <p className="text-xs text-muted-foreground mt-2">2x</p>
+      </div>
+    </div>
+  ),
+}
+
+export const Paused: Story = {
+  render: () => {
+    const [paused, setPaused] = React.useState(false)
+
+    return (
+      <div className="flex flex-col items-center gap-4">
+        <WakaLoadingOrbit size="xl" paused={paused} />
+        <button
+          onClick={() => setPaused(!paused)}
+          className="px-4 py-2 text-sm border rounded-md hover:bg-muted"
+        >
+          {paused ? 'Resume' : 'Pause'}
+        </button>
+      </div>
+    )
+  },
+}
+
+export const CustomOrbits: Story = {
+  render: () => {
+    const customOrbits: OrbitConfig[] = [
+      {
+        radius: 0.3,
+        duration: 1.5,
+        planetSize: 12,
+        color: '#ef4444',
+        direction: 'clockwise',
+        showPath: true,
+        pathOpacity: 0.3,
+      },
+      {
+        radius: 0.5,
+        duration: 2.5,
+        planetSize: 8,
+        color: '#3b82f6',
+        direction: 'counterclockwise',
+        startAngle: 90,
+        showPath: true,
+        pathOpacity: 0.2,
+      },
+      {
+        radius: 0.75,
+        duration: 4,
+        planetSize: 6,
+        color: '#22c55e',
+        direction: 'clockwise',
+        startAngle: 180,
+        showPath: true,
+        pathOpacity: 0.1,
+      },
+    ]
+
+    return <WakaLoadingOrbit size="xl" orbits={customOrbits} />
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { orbits } = useLoadingOrbit({
+      count: 4,
+      minRadius: 0.2,
+      maxRadius: 0.85,
+      minDuration: 1,
+      maxDuration: 5,
+      colors: ['#f97316', '#eab308', '#22c55e', '#06b6d4'],
+      showPaths: true,
+    })
+
+    return (
+      <div className="space-y-4 text-center">
+        <WakaLoadingOrbit size="xl" orbits={orbits} centerColor="#f97316" />
+        <p className="text-sm text-muted-foreground">Custom orbits via hook</p>
+      </div>
+    )
+  },
+}
+
+export const LoadingCard: Story = {
+  render: () => (
+    <div className="w-[300px] p-8 border rounded-lg bg-card text-center">
+      <WakaLoadingOrbit size="lg" />
+      <p className="mt-4 text-muted-foreground">Loading data...</p>
+    </div>
+  ),
+}
+
+export const FullPageLoader: Story = {
+  render: () => (
+    <div className="w-[500px] h-[300px] flex flex-col items-center justify-center border rounded-lg bg-gradient-to-b from-background to-muted/20">
+      <WakaLoadingOrbitSolar size="xl" />
+      <p className="mt-6 text-lg font-medium">Initializing System</p>
+      <p className="text-sm text-muted-foreground">Please wait...</p>
+    </div>
+  ),
+}
+
+export const ButtonLoading: Story = {
+  render: () => {
+    const [loading, setLoading] = React.useState(false)
+
+    const handleClick = () => {
+      setLoading(true)
+      setTimeout(() => setLoading(false), 3000)
+    }
+
+    return (
+      <button
+        onClick={handleClick}
+        disabled={loading}
+        className="relative px-6 py-3 bg-primary text-primary-foreground rounded-lg font-medium disabled:opacity-70"
+      >
+        {loading ? (
+          <span className="flex items-center gap-3">
+            <WakaLoadingOrbitMinimal size="sm" />
+            Processing...
+          </span>
+        ) : (
+          'Click to Load'
+        )}
+      </button>
+    )
+  },
+}
+
+export const DarkBackground: Story = {
+  render: () => (
+    <div className="p-12 rounded-xl bg-slate-900">
+      <div className="flex gap-8">
+        <WakaLoadingOrbit
+          size="lg"
+          primaryColor="#60a5fa"
+          secondaryColor="#a78bfa"
+          accentColor="#f472b6"
+          centerColor="#60a5fa"
+        />
+        <WakaLoadingOrbitAtom
+          size="lg"
+        />
+        <WakaLoadingOrbitGalaxy
+          size="lg"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const CompareWithSpinner: Story = {
+  render: () => (
+    <div className="flex gap-12 items-center">
+      <div className="text-center">
+        <Loader2 className="h-16 w-16 animate-spin text-primary mx-auto" />
+        <p className="text-sm text-muted-foreground mt-4">Standard Spinner</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbitMinimal size="md" />
+        <p className="text-sm text-muted-foreground mt-4">Minimal Orbit</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbit size="md" />
+        <p className="text-sm text-muted-foreground mt-4">Default Orbit</p>
+      </div>
+      <div className="text-center">
+        <WakaLoadingOrbitSolar size="md" />
+        <p className="text-sm text-muted-foreground mt-4">Solar Orbit</p>
+      </div>
+    </div>
+  ),
+}