@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-typewriter/WakaTypewriter.stories.tsx

@@ -0,0 +1,366 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaTypewriter, WakaTypewriterHeading, WakaTypewriterCode, WakaTypewriterLines, useTypewriter } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaTypewriter> = {
+  title: 'Components/Effects/WakaTypewriter',
+  component: WakaTypewriter,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A typewriter animation component with configurable speed, cursor, and multi-line support.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    typeSpeed: {
+      control: 'select',
+      options: ['slow', 'normal', 'fast'],
+      description: 'Typing speed',
+    },
+    deleteSpeed: {
+      control: 'select',
+      options: ['slow', 'normal', 'fast'],
+      description: 'Delete speed',
+    },
+    loop: {
+      control: 'boolean',
+      description: 'Loop through strings',
+    },
+    cursor: {
+      control: 'boolean',
+      description: 'Show blinking cursor',
+    },
+    cursorChar: {
+      control: 'text',
+      description: 'Custom cursor character',
+    },
+    startDelay: {
+      control: { type: 'range', min: 0, max: 2000, step: 100 },
+      description: 'Delay before starting in ms',
+    },
+    pauseDelay: {
+      control: { type: 'range', min: 500, max: 5000, step: 250 },
+      description: 'Pause after typing in ms',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTypewriter>
+
+export const Default: Story = {
+  args: {
+    strings: [
+      'Hello, World!',
+      'Welcome to Storybook',
+      'This is a typewriter effect',
+    ],
+  },
+  render: (args) => (
+    <div className="text-2xl font-semibold">
+      <WakaTypewriter {...args} />
+    </div>
+  ),
+}
+
+export const SingleString: Story = {
+  render: () => (
+    <div className="text-xl">
+      <WakaTypewriter
+        strings={['This text types once and stops.']}
+        loop={false}
+      />
+    </div>
+  ),
+}
+
+export const Speeds: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Slow</p>
+        <WakaTypewriter
+          strings={['Slow typing speed...']}
+          typeSpeed="slow"
+          loop={false}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Normal</p>
+        <WakaTypewriter
+          strings={['Normal typing speed...']}
+          typeSpeed="normal"
+          loop={false}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Fast</p>
+        <WakaTypewriter
+          strings={['Fast typing speed...']}
+          typeSpeed="fast"
+          loop={false}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const CursorStyles: Story = {
+  render: () => (
+    <div className="space-y-6 text-xl">
+      <div>
+        <WakaTypewriter
+          strings={['Default cursor |']}
+          cursorChar="|"
+          loop={false}
+        />
+      </div>
+      <div>
+        <WakaTypewriter
+          strings={['Underscore cursor _']}
+          cursorChar="_"
+          loop={false}
+        />
+      </div>
+      <div>
+        <WakaTypewriter
+          strings={['Block cursor █']}
+          cursorChar="█"
+          loop={false}
+        />
+      </div>
+      <div>
+        <WakaTypewriter
+          strings={['No cursor']}
+          cursor={false}
+          loop={false}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const Headings: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <WakaTypewriterHeading
+        level={1}
+        strings={['Build amazing products']}
+        loop={false}
+      />
+      <WakaTypewriterHeading
+        level={2}
+        strings={['Scale with confidence']}
+        loop={false}
+        startDelay={1500}
+      />
+      <WakaTypewriterHeading
+        level={3}
+        strings={['Ship faster than ever']}
+        loop={false}
+        startDelay={3000}
+      />
+    </div>
+  ),
+}
+
+export const CodeTyping: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-muted-foreground">Install with:</p>
+      <WakaTypewriterCode
+        strings={[
+          'npm install @wakastellar/ui',
+          'pnpm add @wakastellar/ui',
+          'yarn add @wakastellar/ui',
+        ]}
+        pauseDelay={3000}
+      />
+    </div>
+  ),
+}
+
+export const MultipleLines: Story = {
+  render: () => (
+    <WakaTypewriterLines
+      lines={[
+        'First line appears...',
+        'Then the second line...',
+        'And finally the third!',
+      ]}
+      staggerDelay={1500}
+      className="text-lg"
+    />
+  ),
+}
+
+export const HeroSection: Story = {
+  render: () => (
+    <div className="text-center max-w-2xl">
+      <WakaTypewriterHeading
+        level={1}
+        strings={[
+          'Build faster.',
+          'Ship sooner.',
+          'Scale better.',
+        ]}
+        pauseDelay={2500}
+        className="text-5xl"
+      />
+      <p className="mt-6 text-xl text-muted-foreground">
+        The modern component library for React applications
+      </p>
+    </div>
+  ),
+}
+
+export const ChatSimulation: Story = {
+  render: () => {
+    const [messages, setMessages] = React.useState<string[]>([])
+
+    const chatMessages = [
+      'Hey! How can I help you today?',
+      "I'm here to assist with your coding questions.",
+      'Feel free to ask anything!',
+    ]
+
+    React.useEffect(() => {
+      let i = 0
+      const interval = setInterval(() => {
+        if (i < chatMessages.length) {
+          setMessages((prev) => [...prev, chatMessages[i]])
+          i++
+        } else {
+          clearInterval(interval)
+        }
+      }, 3000)
+      return () => clearInterval(interval)
+    }, [])
+
+    return (
+      <div className="w-[400px] border rounded-lg p-4 space-y-4">
+        <div className="flex items-center gap-2 pb-2 border-b">
+          <div className="w-3 h-3 rounded-full bg-green-500" />
+          <span className="font-medium">AI Assistant</span>
+        </div>
+        <div className="space-y-3 min-h-[200px]">
+          {messages.map((msg, i) => (
+            <div key={i} className="bg-muted p-3 rounded-lg">
+              <WakaTypewriter
+                strings={[msg]}
+                typeSpeed="fast"
+                loop={false}
+                cursor={i === messages.length - 1}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const TerminalEffect: Story = {
+  render: () => (
+    <div className="w-[500px] bg-gray-900 text-green-400 rounded-lg p-4 font-mono text-sm">
+      <div className="flex items-center gap-2 mb-4">
+        <div className="w-3 h-3 rounded-full bg-red-500" />
+        <div className="w-3 h-3 rounded-full bg-yellow-500" />
+        <div className="w-3 h-3 rounded-full bg-green-500" />
+        <span className="ml-2 text-gray-500">terminal</span>
+      </div>
+      <WakaTypewriterLines
+        lines={[
+          '$ npm install @wakastellar/ui',
+          'Installing dependencies...',
+          '✓ Added 42 packages in 3.2s',
+          '$ npm run dev',
+          'Starting development server...',
+          '✓ Ready on http://localhost:3000',
+        ]}
+        staggerDelay={800}
+        typeSpeed="fast"
+        cursorChar="_"
+        className="space-y-1"
+      />
+    </div>
+  ),
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { text, isTyping, restart, pause, resume, isActive } = useTypewriter({
+      strings: ['Using the useTypewriter hook', 'Full programmatic control', 'Pause, resume, and restart'],
+      typeSpeed: 50,
+      deleteSpeed: 25,
+      startDelay: 500,
+      pauseDelay: 2000,
+      nextDelay: 500,
+      loop: true,
+      pauseOnChars: '.,!?',
+      charPauseDuration: 300,
+      active: true,
+    })
+
+    return (
+      <div className="space-y-4">
+        <div className="text-2xl font-semibold min-h-[40px]">
+          {text}
+          <span className="animate-pulse">|</span>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={restart}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Restart
+          </button>
+          <button
+            onClick={isActive ? pause : resume}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            {isActive ? 'Pause' : 'Resume'}
+          </button>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Status: {isTyping ? 'Typing...' : 'Deleting...'}
+        </p>
+      </div>
+    )
+  },
+}
+
+export const PauseOnPunctuation: Story = {
+  render: () => (
+    <div className="text-xl">
+      <WakaTypewriter
+        strings={['Hello, world! How are you? I hope you are doing well.']}
+        pauseOnChars=".,!?"
+        charPauseDuration={500}
+        loop={false}
+      />
+    </div>
+  ),
+}
+
+export const Callbacks: Story = {
+  render: () => {
+    const [status, setStatus] = React.useState('Waiting...')
+
+    return (
+      <div className="space-y-4">
+        <WakaTypewriter
+          strings={['First string', 'Second string', 'Third string']}
+          onTypeComplete={(index) => setStatus(`Finished typing string ${index + 1}`)}
+          onDeleteComplete={(index) => setStatus(`Finished deleting string ${index + 1}`)}
+          onComplete={() => setStatus('All strings completed!')}
+          loop={false}
+        />
+        <p className="text-sm text-muted-foreground">{status}</p>
+      </div>
+    )
+  },
+}