@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-tilt-card/WakaTiltCard.stories.tsx

@@ -0,0 +1,300 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaTiltCard, WakaTiltShowcaseCard } from './index'
+import * as React from 'react'
+import { Zap, Rocket, Shield, CreditCard, Cpu, Globe } from 'lucide-react'
+
+const meta: Meta<typeof WakaTiltCard> = {
+  title: 'Components/Effects/WakaTiltCard',
+  component: WakaTiltCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A 3D tilt card component with perspective effect, glare, and gyroscope support.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    maxTilt: {
+      control: { type: 'range', min: 0, max: 45, step: 1 },
+      description: 'Maximum tilt angle in degrees',
+    },
+    perspective: {
+      control: { type: 'range', min: 500, max: 2000, step: 100 },
+      description: 'Perspective distance',
+    },
+    scale: {
+      control: { type: 'range', min: 1, max: 1.2, step: 0.01 },
+      description: 'Scale on hover',
+    },
+    speed: {
+      control: { type: 'range', min: 100, max: 1000, step: 50 },
+      description: 'Transition speed in ms',
+    },
+    glare: {
+      control: 'boolean',
+      description: 'Enable glare effect',
+    },
+    maxGlare: {
+      control: { type: 'range', min: 0, max: 1, step: 0.05 },
+      description: 'Maximum glare opacity',
+    },
+    reset: {
+      control: 'boolean',
+      description: 'Reset on mouse leave',
+    },
+    reverse: {
+      control: 'boolean',
+      description: 'Reverse tilt direction',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable tilt effect',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTiltCard>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <WakaTiltCard {...args}>
+      <div className="w-[300px] p-6 bg-card border rounded-xl shadow-lg">
+        <h3 className="font-semibold text-lg mb-2">3D Tilt Card</h3>
+        <p className="text-muted-foreground">
+          Move your cursor over this card to see the 3D tilt effect.
+        </p>
+      </div>
+    </WakaTiltCard>
+  ),
+}
+
+export const WithGlare: Story = {
+  render: () => (
+    <WakaTiltCard glare maxGlare={0.3}>
+      <div className="w-[300px] p-6 bg-gradient-to-br from-primary/20 to-primary/5 border rounded-xl shadow-lg">
+        <h3 className="font-semibold text-lg mb-2">Glare Effect</h3>
+        <p className="text-muted-foreground">
+          Notice the glare effect that follows your cursor.
+        </p>
+      </div>
+    </WakaTiltCard>
+  ),
+}
+
+export const TiltIntensities: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <WakaTiltCard maxTilt={5}>
+        <div className="w-[180px] p-4 bg-card border rounded-xl shadow-lg">
+          <h4 className="font-medium">Subtle</h4>
+          <p className="text-sm text-muted-foreground">5° tilt</p>
+        </div>
+      </WakaTiltCard>
+      <WakaTiltCard maxTilt={15}>
+        <div className="w-[180px] p-4 bg-card border rounded-xl shadow-lg">
+          <h4 className="font-medium">Medium</h4>
+          <p className="text-sm text-muted-foreground">15° tilt</p>
+        </div>
+      </WakaTiltCard>
+      <WakaTiltCard maxTilt={30}>
+        <div className="w-[180px] p-4 bg-card border rounded-xl shadow-lg">
+          <h4 className="font-medium">Strong</h4>
+          <p className="text-sm text-muted-foreground">30° tilt</p>
+        </div>
+      </WakaTiltCard>
+    </div>
+  ),
+}
+
+export const ReverseTilt: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <WakaTiltCard reverse={false}>
+        <div className="w-[200px] p-4 bg-card border rounded-xl shadow-lg">
+          <h4 className="font-medium">Normal</h4>
+          <p className="text-sm text-muted-foreground">Standard direction</p>
+        </div>
+      </WakaTiltCard>
+      <WakaTiltCard reverse>
+        <div className="w-[200px] p-4 bg-card border rounded-xl shadow-lg">
+          <h4 className="font-medium">Reversed</h4>
+          <p className="text-sm text-muted-foreground">Inverted direction</p>
+        </div>
+      </WakaTiltCard>
+    </div>
+  ),
+}
+
+export const NoReset: Story = {
+  render: () => (
+    <WakaTiltCard reset={false}>
+      <div className="w-[300px] p-6 bg-card border rounded-xl shadow-lg">
+        <h3 className="font-semibold text-lg mb-2">No Reset</h3>
+        <p className="text-muted-foreground">
+          The tilt stays when you move the cursor away.
+        </p>
+      </div>
+    </WakaTiltCard>
+  ),
+}
+
+export const WithScale: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <WakaTiltCard scale={1}>
+        <div className="w-[180px] p-4 bg-card border rounded-xl shadow-lg">
+          <h4 className="font-medium">No Scale</h4>
+          <p className="text-sm text-muted-foreground">scale: 1</p>
+        </div>
+      </WakaTiltCard>
+      <WakaTiltCard scale={1.05}>
+        <div className="w-[180px] p-4 bg-card border rounded-xl shadow-lg">
+          <h4 className="font-medium">Slight Scale</h4>
+          <p className="text-sm text-muted-foreground">scale: 1.05</p>
+        </div>
+      </WakaTiltCard>
+      <WakaTiltCard scale={1.1}>
+        <div className="w-[180px] p-4 bg-card border rounded-xl shadow-lg">
+          <h4 className="font-medium">More Scale</h4>
+          <p className="text-sm text-muted-foreground">scale: 1.1</p>
+        </div>
+      </WakaTiltCard>
+    </div>
+  ),
+}
+
+export const ShowcaseCard: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <WakaTiltShowcaseCard
+        title="Fast Performance"
+        description="Optimized for speed and efficiency"
+        icon={<Zap className="h-6 w-6 text-primary" />}
+        glowColor="hsl(var(--primary))"
+      />
+      <WakaTiltShowcaseCard
+        title="Secure & Reliable"
+        description="Enterprise-grade security built-in"
+        icon={<Shield className="h-6 w-6 text-green-500" />}
+        glowColor="hsl(142.1 76.2% 36.3%)"
+      />
+    </div>
+  ),
+}
+
+export const ShowcaseWithImage: Story = {
+  render: () => (
+    <WakaTiltShowcaseCard
+      title="Launch Your Project"
+      description="Deploy in seconds with our powerful infrastructure"
+      icon={<Rocket className="h-6 w-6 text-violet-500" />}
+      image="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=400&h=200&fit=crop"
+      glowColor="rgb(139, 92, 246)"
+      footer={
+        <button className="w-full py-2 bg-primary text-primary-foreground rounded-lg font-medium">
+          Get Started
+        </button>
+      }
+    />
+  ),
+}
+
+export const CreditCardStyle: Story = {
+  render: () => (
+    <WakaTiltCard maxTilt={15} glare maxGlare={0.2}>
+      <div className="w-[380px] h-[220px] p-6 bg-gradient-to-br from-violet-600 to-indigo-900 rounded-2xl text-white shadow-2xl">
+        <div className="flex justify-between items-start">
+          <div className="w-12 h-10 bg-yellow-400/80 rounded-md" />
+          <Globe className="h-8 w-8 text-white/50" />
+        </div>
+        <div className="mt-8">
+          <p className="text-lg tracking-[0.25em] font-mono">4242 4242 4242 4242</p>
+        </div>
+        <div className="mt-6 flex justify-between items-end">
+          <div>
+            <p className="text-xs text-white/60 uppercase">Card Holder</p>
+            <p className="font-medium">John Doe</p>
+          </div>
+          <div>
+            <p className="text-xs text-white/60 uppercase">Expires</p>
+            <p className="font-medium">12/28</p>
+          </div>
+          <div className="flex gap-1">
+            <div className="w-8 h-8 rounded-full bg-red-500/80" />
+            <div className="w-8 h-8 rounded-full bg-orange-500/80 -ml-4" />
+          </div>
+        </div>
+      </div>
+    </WakaTiltCard>
+  ),
+}
+
+export const ProductShowcase: Story = {
+  render: () => (
+    <WakaTiltCard maxTilt={12} scale={1.03} glare>
+      <div className="w-[320px] overflow-hidden bg-card border rounded-2xl shadow-xl">
+        <div className="aspect-square bg-gradient-to-br from-blue-100 to-blue-50 flex items-center justify-center">
+          <div
+            className="w-48 h-48 rounded-3xl bg-white shadow-lg flex items-center justify-center"
+            style={{ transform: 'translateZ(40px)' }}
+          >
+            <Cpu className="h-24 w-24 text-blue-500" style={{ transform: 'translateZ(20px)' }} />
+          </div>
+        </div>
+        <div className="p-6">
+          <h3 className="font-bold text-lg">Next-Gen Processor</h3>
+          <p className="text-sm text-muted-foreground mt-1">
+            Ultra-fast computing for demanding workloads
+          </p>
+          <div className="mt-4 flex items-center justify-between">
+            <span className="text-2xl font-bold">$599</span>
+            <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium">
+              Buy Now
+            </button>
+          </div>
+        </div>
+      </div>
+    </WakaTiltCard>
+  ),
+}
+
+export const GridOfCards: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-6">
+      {[
+        { icon: <Zap className="h-5 w-5" />, title: 'Fast', color: 'text-yellow-500' },
+        { icon: <Shield className="h-5 w-5" />, title: 'Secure', color: 'text-green-500' },
+        { icon: <Rocket className="h-5 w-5" />, title: 'Powerful', color: 'text-violet-500' },
+        { icon: <Globe className="h-5 w-5" />, title: 'Global', color: 'text-blue-500' },
+        { icon: <CreditCard className="h-5 w-5" />, title: 'Payments', color: 'text-pink-500' },
+        { icon: <Cpu className="h-5 w-5" />, title: 'Smart', color: 'text-orange-500' },
+      ].map((item, i) => (
+        <WakaTiltCard key={i} maxTilt={10} scale={1.02}>
+          <div className="w-[140px] p-4 bg-card border rounded-xl shadow-md text-center">
+            <div className={`inline-flex p-2 rounded-lg bg-muted ${item.color}`}>
+              {item.icon}
+            </div>
+            <p className="mt-2 font-medium">{item.title}</p>
+          </div>
+        </WakaTiltCard>
+      ))}
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <WakaTiltCard disabled>
+      <div className="w-[300px] p-6 bg-card border rounded-xl shadow-lg opacity-60">
+        <h3 className="font-semibold text-lg mb-2">Disabled</h3>
+        <p className="text-muted-foreground">
+          Tilt effect is disabled on this card.
+        </p>
+      </div>
+    </WakaTiltCard>
+  ),
+}

package/src/components/waka-time-picker/WakaTimePicker.stories.tsx

@@ -0,0 +1,227 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaTimePicker } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaTimePicker> = {
+  title: 'Components/Forms/WakaTimePicker',
+  component: WakaTimePicker,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A time picker component with 12h/24h format support and quick selection.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    format: {
+      control: 'select',
+      options: ['12h', '24h'],
+      description: 'Time format',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the component',
+    },
+    showSeconds: {
+      control: 'boolean',
+      description: 'Show seconds input',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the picker',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTimePicker>
+
+export const Default: Story = {
+  render: function TimePickerDemo() {
+    const [time, setTime] = React.useState<string>('')
+
+    return (
+      <div className="w-[200px]">
+        <WakaTimePicker
+          value={time}
+          onChange={setTime}
+          placeholder="Select time"
+        />
+        {time && (
+          <p className="text-sm text-muted-foreground mt-2">Selected: {time}</p>
+        )}
+      </div>
+    )
+  },
+}
+
+export const Format24h: Story = {
+  render: function Format24hDemo() {
+    const [time, setTime] = React.useState<string>('14:30')
+
+    return (
+      <div className="w-[200px]">
+        <WakaTimePicker
+          value={time}
+          onChange={setTime}
+          format="24h"
+          placeholder="HH:mm"
+        />
+      </div>
+    )
+  },
+}
+
+export const Format12h: Story = {
+  render: function Format12hDemo() {
+    const [time, setTime] = React.useState<string>('14:30')
+
+    return (
+      <div className="w-[200px]">
+        <WakaTimePicker
+          value={time}
+          onChange={setTime}
+          format="12h"
+          placeholder="hh:mm AM/PM"
+        />
+      </div>
+    )
+  },
+}
+
+export const WithSeconds: Story = {
+  render: function WithSecondsDemo() {
+    const [time, setTime] = React.useState<string>('09:15:30')
+
+    return (
+      <div className="w-[200px]">
+        <WakaTimePicker
+          value={time}
+          onChange={setTime}
+          showSeconds
+          placeholder="HH:mm:ss"
+        />
+      </div>
+    )
+  },
+}
+
+export const WithMinuteStep: Story = {
+  render: function MinuteStepDemo() {
+    const [time, setTime] = React.useState<string>('')
+
+    return (
+      <div className="w-[200px]">
+        <WakaTimePicker
+          value={time}
+          onChange={setTime}
+          minuteStep={15}
+          placeholder="15 minute intervals"
+        />
+        <p className="text-xs text-muted-foreground mt-2">
+          Minutes: 00, 15, 30, 45
+        </p>
+      </div>
+    )
+  },
+}
+
+export const WithMinMaxTime: Story = {
+  render: function MinMaxDemo() {
+    const [time, setTime] = React.useState<string>('10:00')
+
+    return (
+      <div className="w-[200px]">
+        <WakaTimePicker
+          value={time}
+          onChange={setTime}
+          minTime="09:00"
+          maxTime="17:00"
+          placeholder="Business hours"
+        />
+        <p className="text-xs text-muted-foreground mt-2">
+          Available: 09:00 - 17:00
+        </p>
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: function SizesDemo() {
+    const [time, setTime] = React.useState<string>('12:00')
+
+    return (
+      <div className="space-y-4 w-[200px]">
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Small</p>
+          <WakaTimePicker value={time} onChange={setTime} size="sm" />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Medium</p>
+          <WakaTimePicker value={time} onChange={setTime} size="md" />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Large</p>
+          <WakaTimePicker value={time} onChange={setTime} size="lg" />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithError: Story = {
+  render: () => (
+    <div className="w-[200px]">
+      <WakaTimePicker value="" error placeholder="Required" />
+      <p className="text-sm text-destructive mt-1">Please select a time</p>
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[200px]">
+      <WakaTimePicker value="10:30" disabled />
+    </div>
+  ),
+}
+
+export const MeetingScheduler: Story = {
+  render: function MeetingSchedulerDemo() {
+    const [startTime, setStartTime] = React.useState<string>('09:00')
+    const [endTime, setEndTime] = React.useState<string>('10:00')
+
+    return (
+      <div className="space-y-4 w-[300px] p-4 border rounded-lg">
+        <h3 className="font-semibold">Schedule Meeting</h3>
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <p className="text-sm text-muted-foreground mb-1">Start</p>
+            <WakaTimePicker
+              value={startTime}
+              onChange={setStartTime}
+              minuteStep={15}
+            />
+          </div>
+          <div>
+            <p className="text-sm text-muted-foreground mb-1">End</p>
+            <WakaTimePicker
+              value={endTime}
+              onChange={setEndTime}
+              minuteStep={15}
+            />
+          </div>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Duration: {startTime && endTime
+            ? `${startTime} - ${endTime}`
+            : 'Select times'}
+        </p>
+      </div>
+    )
+  },
+}