@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/landing/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils"
+import type { LinkComponentProps } from "../../types/link"
 import { Button } from "../../components/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/card"
 import { Badge } from "../../components/badge"
@@ -117,6 +118,22 @@ export interface WakaLandingProps {
   footer?: React.ReactNode
   /** Classes CSS additionnelles */
   className?: string
+  /** Composant de lien personnalisé (ex: next/link) pour navigation SPA */
+  LinkComponent?: React.ComponentType<LinkComponentProps>
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+interface LandingContextValue {
+  LinkComponent?: React.ComponentType<LinkComponentProps>
+}
+
+const LandingContext = React.createContext<LandingContextValue>({})
+
+function useLandingContext() {
+  return React.useContext(LandingContext)
 }
 
 // ============================================
@@ -143,29 +160,35 @@ function LandingNavbar({
   loginHref,
 }: LandingNavbarProps) {
   const [isOpen, setIsOpen] = React.useState(false)
+  const { LinkComponent } = useLandingContext()
+
+  const renderLink = (href: string, className: string, children: React.ReactNode, onClick?: () => void) => {
+    if (LinkComponent) {
+      return <LinkComponent href={href} className={className} onClick={onClick}>{children}</LinkComponent>
+    }
+    return <a href={href} className={className} onClick={onClick}>{children}</a>
+  }
 
   return (
     <nav className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="container flex h-16 items-center justify-between">
         {/* Logo */}
-        <a href="/" className="flex items-center gap-2 font-bold text-xl">
+        {renderLink("/", "flex items-center gap-2 font-bold text-xl", <>
           {logo}
           <span>{brandName}</span>
-        </a>
+        </>)}
 
         {/* Desktop Nav */}
         <div className="hidden md:flex items-center gap-6">
           {navItems.map((item) => (
-            <a
-              key={item.href}
-              href={item.href}
-              className={cn(
+            renderLink(
+              item.href,
+              cn(
                 "text-sm font-medium transition-colors hover:text-primary",
                 item.isActive ? "text-primary" : "text-muted-foreground"
-              )}
-            >
-              {item.label}
-            </a>
+              ),
+              item.label
+            )
           ))}
         </div>
 
@@ -178,7 +201,11 @@ function LandingNavbar({
               asChild={!!loginHref}
             >
               {loginHref ? (
-                <a href={loginHref}>{loginButtonText}</a>
+                LinkComponent ? (
+                  <LinkComponent href={loginHref}>{loginButtonText}</LinkComponent>
+                ) : (
+                  <a href={loginHref}>{loginButtonText}</a>
+                )
               ) : (
                 loginButtonText
               )}
@@ -202,19 +229,21 @@ function LandingNavbar({
         <div className="md:hidden border-t bg-background p-4">
           <div className="flex flex-col gap-4">
             {navItems.map((item) => (
-              <a
-                key={item.href}
-                href={item.href}
-                className="text-sm font-medium"
-                onClick={() => setIsOpen(false)}
-              >
-                {item.label}
-              </a>
+              renderLink(
+                item.href,
+                "text-sm font-medium",
+                item.label,
+                () => setIsOpen(false)
+              )
             ))}
             {showLoginButton && (
               <Button onClick={onLogin} asChild={!!loginHref}>
                 {loginHref ? (
-                  <a href={loginHref}>{loginButtonText}</a>
+                  LinkComponent ? (
+                    <LinkComponent href={loginHref}>{loginButtonText}</LinkComponent>
+                  ) : (
+                    <a href={loginHref}>{loginButtonText}</a>
+                  )
                 ) : (
                   loginButtonText
                 )}
@@ -243,6 +272,8 @@ function LandingHeroSection({
   image,
   stats,
 }: LandingHeroSectionProps) {
+  const { LinkComponent } = useLandingContext()
+
   return (
     <section className="container py-24 md:py-32">
       <div className="flex flex-col lg:flex-row items-center gap-12">
@@ -272,10 +303,17 @@ function LandingHeroSection({
               asChild={!!primaryButtonHref}
             >
               {primaryButtonHref ? (
-                <a href={primaryButtonHref}>
-                  {primaryButtonText}
-                  <ArrowRight className="ml-2 h-4 w-4" />
-                </a>
+                LinkComponent ? (
+                  <LinkComponent href={primaryButtonHref}>
+                    {primaryButtonText}
+                    <ArrowRight className="ml-2 h-4 w-4" />
+                  </LinkComponent>
+                ) : (
+                  <a href={primaryButtonHref}>
+                    {primaryButtonText}
+                    <ArrowRight className="ml-2 h-4 w-4" />
+                  </a>
+                )
               ) : (
                 <>
                   {primaryButtonText}
@@ -292,10 +330,17 @@ function LandingHeroSection({
                 asChild={!!secondaryButtonHref}
               >
                 {secondaryButtonHref ? (
-                  <a href={secondaryButtonHref}>
-                    <Play className="mr-2 h-4 w-4" />
-                    {secondaryButtonText}
-                  </a>
+                  LinkComponent ? (
+                    <LinkComponent href={secondaryButtonHref}>
+                      <Play className="mr-2 h-4 w-4" />
+                      {secondaryButtonText}
+                    </LinkComponent>
+                  ) : (
+                    <a href={secondaryButtonHref}>
+                      <Play className="mr-2 h-4 w-4" />
+                      {secondaryButtonText}
+                    </a>
+                  )
                 ) : (
                   <>
                     <Play className="mr-2 h-4 w-4" />
@@ -459,6 +504,8 @@ function LandingCTASection({
   secondaryButtonAction,
   variant = "default",
 }: LandingCTASectionProps) {
+  const { LinkComponent } = useLandingContext()
+
   const variantClasses = {
     default: "bg-muted/50",
     gradient: "bg-gradient-to-r from-primary/10 via-primary/5 to-background",
@@ -495,10 +542,17 @@ function LandingCTASection({
               asChild={!!buttonHref}
             >
               {buttonHref ? (
-                <a href={buttonHref}>
-                  {buttonText}
-                  <ChevronRight className="ml-2 h-4 w-4" />
-                </a>
+                LinkComponent ? (
+                  <LinkComponent href={buttonHref}>
+                    {buttonText}
+                    <ChevronRight className="ml-2 h-4 w-4" />
+                  </LinkComponent>
+                ) : (
+                  <a href={buttonHref}>
+                    {buttonText}
+                    <ChevronRight className="ml-2 h-4 w-4" />
+                  </a>
+                )
               ) : (
                 <>
                   {buttonText}
@@ -544,46 +598,51 @@ export function WakaLanding({
   cta,
   footer,
   className,
+  LinkComponent,
 }: WakaLandingProps) {
+  const contextValue = React.useMemo(() => ({ LinkComponent }), [LinkComponent])
+
   return (
-    <div className={cn("min-h-screen", className)}>
-      {/* Navbar */}
-      <LandingNavbar
-        logo={logo}
-        brandName={brandName}
-        navItems={navItems}
-        showLoginButton={showLoginButton}
-        loginButtonText={loginButtonText}
-        onLogin={onLogin}
-        loginHref={loginHref}
-      />
-
-      {/* Hero */}
-      {hero && <LandingHeroSection {...hero} />}
-
-      {/* Features */}
-      {features && features.length > 0 && (
-        <LandingFeaturesSection
-          title={featuresTitle}
-          description={featuresDescription}
-          features={features}
+    <LandingContext.Provider value={contextValue}>
+      <div className={cn("min-h-screen", className)}>
+        {/* Navbar */}
+        <LandingNavbar
+          logo={logo}
+          brandName={brandName}
+          navItems={navItems}
+          showLoginButton={showLoginButton}
+          loginButtonText={loginButtonText}
+          onLogin={onLogin}
+          loginHref={loginHref}
         />
-      )}
 
-      {/* Testimonials */}
-      {testimonials && testimonials.length > 0 && (
-        <LandingTestimonialsSection
-          title={testimonialsTitle}
-          testimonials={testimonials}
-        />
-      )}
+        {/* Hero */}
+        {hero && <LandingHeroSection {...hero} />}
 
-      {/* CTA */}
-      {cta && <LandingCTASection {...cta} />}
+        {/* Features */}
+        {features && features.length > 0 && (
+          <LandingFeaturesSection
+            title={featuresTitle}
+            description={featuresDescription}
+            features={features}
+          />
+        )}
 
-      {/* Footer */}
-      {footer}
-    </div>
+        {/* Testimonials */}
+        {testimonials && testimonials.length > 0 && (
+          <LandingTestimonialsSection
+            title={testimonialsTitle}
+            testimonials={testimonials}
+          />
+        )}
+
+        {/* CTA */}
+        {cta && <LandingCTASection {...cta} />}
+
+        {/* Footer */}
+        {footer}
+      </div>
+    </LandingContext.Provider>
   )
 }
 

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>
+    )
+  },
+}