@wakastellar/ui 2.3.5 → 2.4.0

package/src/blocks/language-selector/LanguageSelector.stories.tsx

@@ -0,0 +1,345 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { LanguageSelector } from './index'
+import type { LanguageConfig } from '../../context/language-context'
+import * as React from 'react'
+
+// Mock the useLanguage hook since we can't use the real provider in Storybook
+// We need to create a wrapper that provides the context
+
+const mockLanguages: LanguageConfig[] = [
+  { code: 'fr', label: 'Français', flagEmoji: '🇫🇷' },
+  { code: 'en', label: 'English', flagEmoji: '🇬🇧' },
+  { code: 'es', label: 'Español', flagEmoji: '🇪🇸' },
+  { code: 'de', label: 'Deutsch', flagEmoji: '🇩🇪' },
+  { code: 'it', label: 'Italiano', flagEmoji: '🇮🇹' },
+  { code: 'pt', label: 'Português', flagEmoji: '🇵🇹' },
+  { code: 'ja', label: '日本語', flagEmoji: '🇯🇵' },
+  { code: 'zh', label: '中文', flagEmoji: '🇨🇳' },
+]
+
+// Create a mock context for storybook demos
+const MockLanguageContext = React.createContext<{
+  currentLanguage: string
+  languages: LanguageConfig[]
+  changeLanguage: (code: string) => void
+  isLoading: boolean
+} | null>(null)
+
+function MockLanguageProvider({
+  children,
+  initialLanguage = 'fr',
+  languages = mockLanguages.slice(0, 4),
+}: {
+  children: React.ReactNode
+  initialLanguage?: string
+  languages?: LanguageConfig[]
+}) {
+  const [currentLanguage, setCurrentLanguage] = React.useState(initialLanguage)
+  const [isLoading, setIsLoading] = React.useState(false)
+
+  const changeLanguage = React.useCallback((code: string) => {
+    setIsLoading(true)
+    // Simulate async language change
+    setTimeout(() => {
+      setCurrentLanguage(code)
+      setIsLoading(false)
+      console.log('Language changed to:', code)
+    }, 500)
+  }, [])
+
+  return (
+    <MockLanguageContext.Provider value={{ currentLanguage, languages, changeLanguage, isLoading }}>
+      {children}
+    </MockLanguageContext.Provider>
+  )
+}
+
+// Mock LanguageSelector that uses our mock context
+function MockLanguageSelector({
+  variant = 'dropdown',
+  showFlags = true,
+  className,
+}: {
+  variant?: 'dropdown' | 'select'
+  showFlags?: boolean
+  className?: string
+}) {
+  const context = React.useContext(MockLanguageContext)
+
+  if (!context) {
+    return <div className="text-red-500">Error: Missing MockLanguageProvider</div>
+  }
+
+  const { currentLanguage, languages, changeLanguage, isLoading } = context
+  const currentLang = languages.find(lang => lang.code === currentLanguage)
+
+  if (variant === 'select') {
+    return (
+      <div className={className}>
+        <select
+          value={currentLanguage}
+          onChange={(e) => changeLanguage(e.target.value)}
+          disabled={isLoading}
+          className="h-10 px-3 py-2 border rounded-md bg-background text-sm min-w-[180px]"
+        >
+          {languages.map((lang) => (
+            <option key={lang.code} value={lang.code}>
+              {showFlags && lang.flagEmoji ? `${lang.flagEmoji} ` : ''}{lang.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`relative ${className}`}>
+      <details className="group">
+        <summary className="flex items-center gap-2 px-3 py-2 border rounded-md cursor-pointer text-sm hover:bg-accent list-none">
+          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+          </svg>
+          {showFlags && currentLang?.flagEmoji && <span>{currentLang.flagEmoji}</span>}
+          <span>{currentLang?.label || 'Select language'}</span>
+          {isLoading && <span className="animate-spin">⏳</span>}
+        </summary>
+        <div className="absolute top-full left-0 mt-1 w-48 bg-popover border rounded-md shadow-lg z-50">
+          {languages.map((lang) => (
+            <button
+              key={lang.code}
+              onClick={() => {
+                changeLanguage(lang.code)
+                // Close the details
+                const details = document.querySelector('details[open]')
+                if (details) details.removeAttribute('open')
+              }}
+              className="w-full px-3 py-2 text-left text-sm hover:bg-accent flex items-center gap-2"
+            >
+              {showFlags && lang.flagEmoji && <span>{lang.flagEmoji}</span>}
+              {lang.label}
+            </button>
+          ))}
+        </div>
+      </details>
+    </div>
+  )
+}
+
+const meta: Meta<typeof MockLanguageSelector> = {
+  title: 'Blocks/LanguageSelector',
+  component: MockLanguageSelector,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A language selector component with dropdown or select variants, flag emojis, and loading states. Requires LanguageProvider context.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['dropdown', 'select'],
+    },
+    showFlags: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof MockLanguageSelector>
+
+export const Default: Story = {
+  render: () => (
+    <MockLanguageProvider>
+      <MockLanguageSelector />
+    </MockLanguageProvider>
+  ),
+}
+
+export const SelectVariant: Story = {
+  render: () => (
+    <MockLanguageProvider>
+      <MockLanguageSelector variant="select" />
+    </MockLanguageProvider>
+  ),
+}
+
+export const WithoutFlags: Story = {
+  render: () => (
+    <MockLanguageProvider>
+      <div className="space-y-4">
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Dropdown without flags</p>
+          <MockLanguageSelector showFlags={false} />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Select without flags</p>
+          <MockLanguageSelector variant="select" showFlags={false} />
+        </div>
+      </div>
+    </MockLanguageProvider>
+  ),
+}
+
+export const ManyLanguages: Story = {
+  render: () => (
+    <MockLanguageProvider languages={mockLanguages}>
+      <div className="space-y-4">
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Dropdown with many languages</p>
+          <MockLanguageSelector />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Select with many languages</p>
+          <MockLanguageSelector variant="select" />
+        </div>
+      </div>
+    </MockLanguageProvider>
+  ),
+}
+
+export const TwoLanguages: Story = {
+  render: () => (
+    <MockLanguageProvider languages={mockLanguages.slice(0, 2)}>
+      <div className="space-y-4">
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Dropdown with 2 languages</p>
+          <MockLanguageSelector />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Select with 2 languages</p>
+          <MockLanguageSelector variant="select" />
+        </div>
+      </div>
+    </MockLanguageProvider>
+  ),
+}
+
+export const InHeaderContext: Story = {
+  render: () => (
+    <MockLanguageProvider>
+      <div className="w-[800px] border rounded-lg">
+        <header className="flex items-center justify-between px-4 py-3 border-b">
+          <div className="flex items-center gap-4">
+            <span className="font-bold text-lg">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">Products</a>
+              <a href="#" className="text-muted-foreground hover:text-foreground">About</a>
+            </nav>
+          </div>
+          <div className="flex items-center gap-3">
+            <MockLanguageSelector />
+            <button className="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-md">
+              Sign In
+            </button>
+          </div>
+        </header>
+        <main className="p-6">
+          <h1 className="text-2xl font-bold mb-2">Welcome</h1>
+          <p className="text-muted-foreground">
+            Select a language from the header to change the interface language.
+          </p>
+        </main>
+      </div>
+    </MockLanguageProvider>
+  ),
+}
+
+export const InFooterContext: Story = {
+  render: () => (
+    <MockLanguageProvider>
+      <div className="w-[800px] border rounded-lg">
+        <main className="p-6 min-h-[200px]">
+          <h1 className="text-2xl font-bold mb-2">Page Content</h1>
+          <p className="text-muted-foreground">
+            The language selector can also be placed in the footer.
+          </p>
+        </main>
+        <footer className="flex items-center justify-between px-4 py-3 border-t bg-muted/30">
+          <span className="text-sm text-muted-foreground">
+            © 2024 MyApp Inc.
+          </span>
+          <div className="flex items-center gap-4">
+            <a href="#" className="text-sm text-muted-foreground hover:text-foreground">Privacy</a>
+            <a href="#" className="text-sm text-muted-foreground hover:text-foreground">Terms</a>
+            <MockLanguageSelector variant="select" />
+          </div>
+        </footer>
+      </div>
+    </MockLanguageProvider>
+  ),
+}
+
+export const BothVariantsSideBySide: Story = {
+  render: () => (
+    <MockLanguageProvider>
+      <div className="flex gap-8 items-start">
+        <div>
+          <p className="text-sm font-medium mb-2">Dropdown Variant</p>
+          <MockLanguageSelector variant="dropdown" />
+        </div>
+        <div>
+          <p className="text-sm font-medium mb-2">Select Variant</p>
+          <MockLanguageSelector variant="select" />
+        </div>
+      </div>
+    </MockLanguageProvider>
+  ),
+}
+
+export const StartWithDifferentLanguage: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <MockLanguageProvider initialLanguage="en">
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Starting with English</p>
+          <MockLanguageSelector />
+        </div>
+      </MockLanguageProvider>
+      <MockLanguageProvider initialLanguage="es" languages={mockLanguages.slice(0, 4)}>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Starting with Spanish</p>
+          <MockLanguageSelector />
+        </div>
+      </MockLanguageProvider>
+      <MockLanguageProvider initialLanguage="de" languages={mockLanguages.slice(0, 4)}>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Starting with German</p>
+          <MockLanguageSelector />
+        </div>
+      </MockLanguageProvider>
+    </div>
+  ),
+}
+
+export const AsianLanguages: Story = {
+  render: () => {
+    const asianLanguages: LanguageConfig[] = [
+      { code: 'ja', label: '日本語', flagEmoji: '🇯🇵' },
+      { code: 'zh', label: '中文', flagEmoji: '🇨🇳' },
+      { code: 'ko', label: '한국어', flagEmoji: '🇰🇷' },
+      { code: 'th', label: 'ไทย', flagEmoji: '🇹🇭' },
+      { code: 'vi', label: 'Tiếng Việt', flagEmoji: '🇻🇳' },
+    ]
+
+    return (
+      <MockLanguageProvider initialLanguage="ja" languages={asianLanguages}>
+        <div className="space-y-4">
+          <div>
+            <p className="text-sm text-muted-foreground mb-2">Dropdown with Asian languages</p>
+            <MockLanguageSelector />
+          </div>
+          <div>
+            <p className="text-sm text-muted-foreground mb-2">Select with Asian languages</p>
+            <MockLanguageSelector variant="select" />
+          </div>
+        </div>
+      </MockLanguageProvider>
+    )
+  },
+}