@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/faq/FAQ.stories.tsx

@@ -0,0 +1,416 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaFAQ, defaultFAQItems, defaultFAQCategories } from './index'
+import type { FAQItem, FAQCategory } from './index'
+import * as React from 'react'
+import { CreditCard, HelpCircle, Settings, Shield, Code, Rocket } from 'lucide-react'
+
+const meta: Meta<typeof WakaFAQ> = {
+  title: 'Blocks/FAQ',
+  component: WakaFAQ,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A FAQ component with search, category filtering, accordion layout, and optional feedback (helpful/not helpful). Supports default, cards, and grouped layouts.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    layout: {
+      control: 'select',
+      options: ['default', 'cards', 'grouped'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    showSearch: {
+      control: 'boolean',
+    },
+    showCategoryFilter: {
+      control: 'boolean',
+    },
+    showFeedback: {
+      control: 'boolean',
+    },
+    allowMultiple: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaFAQ>
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <WakaFAQ
+        items={defaultFAQItems}
+        categories={defaultFAQCategories}
+      />
+    </div>
+  ),
+}
+
+export const WithCategories: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <WakaFAQ
+        items={defaultFAQItems}
+        categories={defaultFAQCategories}
+        showCategoryFilter
+      />
+    </div>
+  ),
+}
+
+export const CardsLayout: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <WakaFAQ
+        items={defaultFAQItems}
+        layout="cards"
+      />
+    </div>
+  ),
+}
+
+export const GroupedLayout: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <WakaFAQ
+        items={defaultFAQItems}
+        categories={defaultFAQCategories}
+        layout="grouped"
+        showCategoryFilter={false}
+      />
+    </div>
+  ),
+}
+
+export const WithFeedback: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <WakaFAQ
+        items={defaultFAQItems.map((item) => ({
+          ...item,
+          helpful: Math.floor(Math.random() * 50),
+          notHelpful: Math.floor(Math.random() * 10),
+        }))}
+        showFeedback
+        onFeedback={(itemId, helpful) => {
+          console.log(`Feedback for ${itemId}: ${helpful ? 'helpful' : 'not helpful'}`)
+        }}
+      />
+    </div>
+  ),
+}
+
+export const AllowMultiple: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <WakaFAQ
+        items={defaultFAQItems}
+        allowMultiple
+        defaultOpen={['1', '2']}
+      />
+    </div>
+  ),
+}
+
+export const NoSearch: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <WakaFAQ
+        items={defaultFAQItems}
+        showSearch={false}
+      />
+    </div>
+  ),
+}
+
+export const SmallSize: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaFAQ
+        items={defaultFAQItems.slice(0, 3)}
+        size="sm"
+        showSearch={false}
+      />
+    </div>
+  ),
+}
+
+export const LargeSize: Story = {
+  render: () => (
+    <div className="w-[900px]">
+      <WakaFAQ
+        items={defaultFAQItems}
+        size="lg"
+      />
+    </div>
+  ),
+}
+
+export const CustomCategories: Story = {
+  render: () => {
+    const customCategories: FAQCategory[] = [
+      { id: 'getting-started', name: 'Getting Started', icon: <Rocket className="h-4 w-4" /> },
+      { id: 'billing', name: 'Billing & Plans', icon: <CreditCard className="h-4 w-4" /> },
+      { id: 'security', name: 'Security', icon: <Shield className="h-4 w-4" /> },
+      { id: 'api', name: 'API & Developers', icon: <Code className="h-4 w-4" /> },
+    ]
+
+    const customItems: FAQItem[] = [
+      {
+        id: '1',
+        question: 'How do I get started?',
+        answer: 'Sign up for a free account, then follow our quick start guide to set up your first project in under 5 minutes.',
+        category: 'getting-started',
+        tags: ['setup', 'beginner'],
+      },
+      {
+        id: '2',
+        question: 'What features are included in the free plan?',
+        answer: 'The free plan includes 3 projects, 1GB storage, basic analytics, and community support.',
+        category: 'billing',
+        tags: ['pricing', 'free'],
+      },
+      {
+        id: '3',
+        question: 'How do I upgrade to Pro?',
+        answer: 'Go to Settings > Billing and select the Pro plan. You can pay monthly or yearly with a 20% discount.',
+        category: 'billing',
+        tags: ['upgrade', 'pro'],
+      },
+      {
+        id: '4',
+        question: 'Is my data secure?',
+        answer: 'Yes! We use bank-level encryption (AES-256) and are SOC 2 Type II certified. All data is encrypted at rest and in transit.',
+        category: 'security',
+        tags: ['encryption', 'compliance'],
+      },
+      {
+        id: '5',
+        question: 'How do I enable two-factor authentication?',
+        answer: 'Go to Settings > Security > Two-Factor Authentication and follow the setup wizard to enable 2FA using an authenticator app.',
+        category: 'security',
+        tags: ['2fa', 'authentication'],
+      },
+      {
+        id: '6',
+        question: 'Is the API available on all plans?',
+        answer: 'API access is available on Pro and Enterprise plans. Free plans have read-only access with rate limits.',
+        category: 'api',
+        tags: ['api', 'access'],
+      },
+      {
+        id: '7',
+        question: 'Where can I find the API documentation?',
+        answer: 'Our comprehensive API documentation is available at docs.example.com/api. It includes examples, SDKs, and interactive playground.',
+        category: 'api',
+        tags: ['documentation', 'sdk'],
+      },
+    ]
+
+    return (
+      <div className="w-[800px]">
+        <WakaFAQ
+          items={customItems}
+          categories={customCategories}
+          title="Help Center"
+          description="Find answers to commonly asked questions"
+        />
+      </div>
+    )
+  },
+}
+
+export const WithRichAnswer: Story = {
+  render: () => {
+    const itemsWithRichContent: FAQItem[] = [
+      {
+        id: '1',
+        question: 'What payment methods do you accept?',
+        answer: (
+          <div className="space-y-4">
+            <p>We accept the following payment methods:</p>
+            <ul className="list-disc pl-5 space-y-1">
+              <li><strong>Credit Cards:</strong> Visa, Mastercard, American Express</li>
+              <li><strong>Digital Wallets:</strong> PayPal, Apple Pay, Google Pay</li>
+              <li><strong>Bank Transfers:</strong> SEPA (EU), ACH (US), Wire transfers</li>
+            </ul>
+            <p className="text-sm bg-muted p-3 rounded">
+              <strong>Note:</strong> Enterprise customers can also pay via invoice with NET 30 terms.
+            </p>
+          </div>
+        ),
+        category: 'billing',
+      },
+      {
+        id: '2',
+        question: 'How do I reset my password?',
+        answer: (
+          <div className="space-y-4">
+            <p>Follow these steps to reset your password:</p>
+            <ol className="list-decimal pl-5 space-y-2">
+              <li>Click "Forgot Password" on the login page</li>
+              <li>Enter your email address</li>
+              <li>Check your inbox for the reset link</li>
+              <li>Click the link and create a new password</li>
+            </ol>
+            <p className="text-sm text-muted-foreground">
+              The reset link expires after 24 hours for security reasons.
+            </p>
+          </div>
+        ),
+        category: 'general',
+      },
+    ]
+
+    return (
+      <div className="w-[800px]">
+        <WakaFAQ
+          items={itemsWithRichContent}
+          showCategoryFilter={false}
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [activeCategory, setActiveCategory] = React.useState<string | null>(null)
+
+    return (
+      <div className="w-[800px]">
+        <div className="mb-4 text-sm text-muted-foreground">
+          Active category: {activeCategory || 'All'}
+        </div>
+        <WakaFAQ
+          items={defaultFAQItems}
+          categories={defaultFAQCategories}
+          activeCategory={activeCategory ?? undefined}
+          onCategoryChange={setActiveCategory}
+          showFeedback
+          onFeedback={(itemId, helpful) => {
+            console.log(`Feedback: ${itemId} - ${helpful ? '👍' : '👎'}`)
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <WakaFAQ
+        items={[]}
+        title="FAQ"
+        description="No questions yet"
+      />
+    </div>
+  ),
+}
+
+export const ManyItems: Story = {
+  render: () => {
+    const manyItems: FAQItem[] = Array.from({ length: 20 }, (_, i) => ({
+      id: String(i + 1),
+      question: `Question ${i + 1}: Lorem ipsum dolor sit amet?`,
+      answer: `Answer ${i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
+      category: ['general', 'billing', 'technical'][i % 3],
+      tags: [`tag${i}`, `topic${i % 5}`],
+    }))
+
+    return (
+      <div className="w-[800px] max-h-[600px] overflow-auto">
+        <WakaFAQ
+          items={manyItems}
+          categories={defaultFAQCategories}
+        />
+      </div>
+    )
+  },
+}
+
+export const InPageContext: Story = {
+  render: () => (
+    <div className="min-h-screen bg-muted/30">
+      <header className="bg-background border-b px-6 py-4">
+        <div className="max-w-4xl mx-auto flex items-center justify-between">
+          <span className="font-bold text-xl">MyApp</span>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-muted-foreground hover:text-foreground">Home</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Pricing</a>
+            <a href="#" className="text-foreground font-medium">FAQ</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Contact</a>
+          </nav>
+        </div>
+      </header>
+      <main className="py-12 px-6">
+        <WakaFAQ
+          items={defaultFAQItems}
+          categories={defaultFAQCategories}
+          title="Frequently Asked Questions"
+          description="Can't find what you're looking for? Contact our support team."
+          showFeedback
+          onFeedback={(itemId, helpful) => console.log(itemId, helpful)}
+        />
+      </main>
+      <footer className="border-t py-8 text-center text-sm text-muted-foreground">
+        <p>Still have questions? <a href="#" className="text-primary hover:underline">Contact Support</a></p>
+      </footer>
+    </div>
+  ),
+}
+
+export const SupportPage: Story = {
+  render: () => {
+    const supportCategories: FAQCategory[] = [
+      { id: 'account', name: 'Account', icon: <Settings className="h-4 w-4" /> },
+      { id: 'billing', name: 'Billing', icon: <CreditCard className="h-4 w-4" /> },
+      { id: 'technical', name: 'Technical', icon: <Code className="h-4 w-4" /> },
+      { id: 'other', name: 'Other', icon: <HelpCircle className="h-4 w-4" /> },
+    ]
+
+    const supportItems: FAQItem[] = [
+      { id: '1', question: 'How do I change my email?', answer: 'Go to Settings > Account > Email and enter your new email address.', category: 'account' },
+      { id: '2', question: 'How do I delete my account?', answer: 'Go to Settings > Account > Danger Zone and click "Delete Account".', category: 'account' },
+      { id: '3', question: 'How do I update my payment method?', answer: 'Go to Settings > Billing > Payment Methods and add a new card.', category: 'billing' },
+      { id: '4', question: 'Can I get a refund?', answer: 'Yes, we offer a 30-day money-back guarantee on all plans.', category: 'billing' },
+      { id: '5', question: 'Why is my build failing?', answer: 'Check the build logs for specific errors. Common issues include missing dependencies or syntax errors.', category: 'technical' },
+      { id: '6', question: 'How do I contact support?', answer: 'You can reach us at support@example.com or via the chat widget.', category: 'other' },
+    ]
+
+    return (
+      <div className="w-[800px] p-6 border rounded-lg bg-card">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold mb-2">Support Center</h1>
+          <p className="text-muted-foreground">
+            Search our knowledge base or browse by category
+          </p>
+        </div>
+        <WakaFAQ
+          items={supportItems}
+          categories={supportCategories}
+          showFeedback
+          onFeedback={(itemId, helpful) => console.log(itemId, helpful)}
+        />
+        <div className="mt-8 pt-6 border-t text-center">
+          <p className="text-muted-foreground mb-4">
+            Couldn't find what you were looking for?
+          </p>
+          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md">
+            Contact Support
+          </button>
+        </div>
+      </div>
+    )
+  },
+}