@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/i18n-editor/I18nEditor.stories.tsx

@@ -0,0 +1,451 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaI18nEditor } from './index'
+import type { I18nEditorConfig, TranslationEntry, LanguageConfig } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaI18nEditor> = {
+  title: 'Blocks/I18nEditor',
+  component: WakaI18nEditor,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A comprehensive internationalization (i18n) translation editor with multi-language support, key management, status tracking (missing/identical/valid), import/export, and inline editing.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof WakaI18nEditor>
+
+const defaultConfig: I18nEditorConfig = {
+  languages: [
+    { code: 'en', label: 'English', flag: '🇺🇸', isSource: true },
+    { code: 'fr', label: 'French', flag: '🇫🇷' },
+    { code: 'de', label: 'German', flag: '🇩🇪' },
+    { code: 'es', label: 'Spanish', flag: '🇪🇸' },
+  ],
+  sourceLanguage: 'en',
+  keyPathSeparator: '.',
+  autoSave: true,
+}
+
+const defaultTranslations: TranslationEntry[] = [
+  {
+    key: 'common.buttons.submit',
+    translations: {
+      en: { value: 'Submit', updatedAt: new Date() },
+      fr: { value: 'Soumettre', updatedAt: new Date() },
+      de: { value: 'Einreichen', updatedAt: new Date() },
+      es: { value: 'Enviar', updatedAt: new Date() },
+    },
+  },
+  {
+    key: 'common.buttons.cancel',
+    translations: {
+      en: { value: 'Cancel', updatedAt: new Date() },
+      fr: { value: 'Annuler', updatedAt: new Date() },
+      de: { value: 'Abbrechen', updatedAt: new Date() },
+      es: { value: 'Cancelar', updatedAt: new Date() },
+    },
+  },
+  {
+    key: 'common.buttons.save',
+    translations: {
+      en: { value: 'Save', updatedAt: new Date() },
+      fr: { value: 'Sauvegarder', updatedAt: new Date() },
+      de: { value: '', updatedAt: new Date() }, // Missing
+      es: { value: 'Guardar', updatedAt: new Date() },
+    },
+  },
+  {
+    key: 'common.buttons.delete',
+    translations: {
+      en: { value: 'Delete', updatedAt: new Date() },
+      fr: { value: 'Supprimer', updatedAt: new Date() },
+      de: { value: 'Delete', updatedAt: new Date() }, // Identical (not translated)
+      es: { value: 'Eliminar', updatedAt: new Date() },
+    },
+  },
+  {
+    key: 'auth.login.title',
+    translations: {
+      en: { value: 'Welcome back', updatedAt: new Date() },
+      fr: { value: 'Content de vous revoir', updatedAt: new Date() },
+      de: { value: 'Willkommen zurück', updatedAt: new Date() },
+      es: { value: 'Bienvenido de nuevo', updatedAt: new Date() },
+    },
+  },
+  {
+    key: 'auth.login.email',
+    translations: {
+      en: { value: 'Email address', updatedAt: new Date() },
+      fr: { value: 'Adresse email', updatedAt: new Date() },
+      de: { value: '', updatedAt: new Date() }, // Missing
+      es: { value: '', updatedAt: new Date() }, // Missing
+    },
+  },
+  {
+    key: 'auth.login.password',
+    translations: {
+      en: { value: 'Password', updatedAt: new Date() },
+      fr: { value: 'Mot de passe', updatedAt: new Date() },
+      de: { value: 'Passwort', updatedAt: new Date() },
+      es: { value: 'Contraseña', updatedAt: new Date() },
+    },
+  },
+  {
+    key: 'errors.required',
+    translations: {
+      en: { value: 'This field is required', updatedAt: new Date() },
+      fr: { value: 'Ce champ est obligatoire', updatedAt: new Date() },
+      de: { value: 'Dieses Feld ist erforderlich', updatedAt: new Date() },
+      es: { value: 'Este campo es requerido', updatedAt: new Date() },
+    },
+  },
+  {
+    key: 'errors.invalid_email',
+    translations: {
+      en: { value: 'Please enter a valid email', updatedAt: new Date() },
+      fr: { value: '', updatedAt: new Date() }, // Missing
+      de: { value: '', updatedAt: new Date() }, // Missing
+      es: { value: '', updatedAt: new Date() }, // Missing
+    },
+  },
+]
+
+export const Default: Story = {
+  render: () => (
+    <div className="h-screen">
+      <WakaI18nEditor
+        config={defaultConfig}
+        translations={defaultTranslations}
+        onChange={(key, lang, value) => console.log('Changed:', key, lang, value)}
+        onSave={async (translations) => {
+          console.log('Save:', translations)
+          await new Promise((resolve) => setTimeout(resolve, 500))
+        }}
+        onAddKey={async (key) => console.log('Add key:', key)}
+        onDeleteKey={async (key) => console.log('Delete key:', key)}
+        title="Translation Editor"
+        description="Manage your application translations"
+      />
+    </div>
+  ),
+}
+
+export const AllTranslated: Story = {
+  render: () => {
+    const translatedEntries: TranslationEntry[] = [
+      {
+        key: 'greeting.hello',
+        translations: {
+          en: { value: 'Hello', updatedAt: new Date() },
+          fr: { value: 'Bonjour', updatedAt: new Date() },
+          de: { value: 'Hallo', updatedAt: new Date() },
+        },
+      },
+      {
+        key: 'greeting.goodbye',
+        translations: {
+          en: { value: 'Goodbye', updatedAt: new Date() },
+          fr: { value: 'Au revoir', updatedAt: new Date() },
+          de: { value: 'Auf Wiedersehen', updatedAt: new Date() },
+        },
+      },
+      {
+        key: 'greeting.thanks',
+        translations: {
+          en: { value: 'Thank you', updatedAt: new Date() },
+          fr: { value: 'Merci', updatedAt: new Date() },
+          de: { value: 'Danke', updatedAt: new Date() },
+        },
+      },
+    ]
+
+    const simpleConfig: I18nEditorConfig = {
+      languages: [
+        { code: 'en', label: 'English', flag: '🇺🇸', isSource: true },
+        { code: 'fr', label: 'French', flag: '🇫🇷' },
+        { code: 'de', label: 'German', flag: '🇩🇪' },
+      ],
+      sourceLanguage: 'en',
+    }
+
+    return (
+      <div className="h-screen">
+        <WakaI18nEditor
+          config={simpleConfig}
+          translations={translatedEntries}
+          onChange={(key, lang, value) => console.log('Changed:', key, lang, value)}
+        />
+      </div>
+    )
+  },
+}
+
+export const ManyMissing: Story = {
+  render: () => {
+    const incompleteEntries: TranslationEntry[] = [
+      {
+        key: 'page.home.title',
+        translations: {
+          en: { value: 'Welcome to our platform', updatedAt: new Date() },
+          fr: { value: '', updatedAt: new Date() },
+          de: { value: '', updatedAt: new Date() },
+          ja: { value: '', updatedAt: new Date() },
+        },
+      },
+      {
+        key: 'page.home.subtitle',
+        translations: {
+          en: { value: 'The best solution for your needs', updatedAt: new Date() },
+          fr: { value: '', updatedAt: new Date() },
+          de: { value: '', updatedAt: new Date() },
+          ja: { value: '', updatedAt: new Date() },
+        },
+      },
+      {
+        key: 'page.about.title',
+        translations: {
+          en: { value: 'About Us', updatedAt: new Date() },
+          fr: { value: '', updatedAt: new Date() },
+          de: { value: '', updatedAt: new Date() },
+          ja: { value: '', updatedAt: new Date() },
+        },
+      },
+      {
+        key: 'page.contact.title',
+        translations: {
+          en: { value: 'Contact Us', updatedAt: new Date() },
+          fr: { value: '', updatedAt: new Date() },
+          de: { value: '', updatedAt: new Date() },
+          ja: { value: '', updatedAt: new Date() },
+        },
+      },
+    ]
+
+    const multiLangConfig: I18nEditorConfig = {
+      languages: [
+        { code: 'en', label: 'English', flag: '🇺🇸', isSource: true },
+        { code: 'fr', label: 'French', flag: '🇫🇷' },
+        { code: 'de', label: 'German', flag: '🇩🇪' },
+        { code: 'ja', label: 'Japanese', flag: '🇯🇵' },
+      ],
+      sourceLanguage: 'en',
+    }
+
+    return (
+      <div className="h-screen">
+        <WakaI18nEditor
+          config={multiLangConfig}
+          translations={incompleteEntries}
+          onChange={(key, lang, value) => console.log('Changed:', key, lang, value)}
+          title="Incomplete Translations"
+          description="Many translations are missing"
+        />
+      </div>
+    )
+  },
+}
+
+export const TwoLanguages: Story = {
+  render: () => {
+    const bilingualConfig: I18nEditorConfig = {
+      languages: [
+        { code: 'en', label: 'English', flag: '🇺🇸', isSource: true },
+        { code: 'es', label: 'Spanish', flag: '🇪🇸' },
+      ],
+      sourceLanguage: 'en',
+    }
+
+    const bilingualEntries: TranslationEntry[] = [
+      { key: 'nav.home', translations: { en: { value: 'Home' }, es: { value: 'Inicio' } } },
+      { key: 'nav.products', translations: { en: { value: 'Products' }, es: { value: 'Productos' } } },
+      { key: 'nav.services', translations: { en: { value: 'Services' }, es: { value: 'Servicios' } } },
+      { key: 'nav.about', translations: { en: { value: 'About' }, es: { value: 'Acerca de' } } },
+      { key: 'nav.contact', translations: { en: { value: 'Contact' }, es: { value: 'Contacto' } } },
+    ]
+
+    return (
+      <div className="h-screen">
+        <WakaI18nEditor
+          config={bilingualConfig}
+          translations={bilingualEntries}
+          onChange={(key, lang, value) => console.log('Changed:', key, lang, value)}
+          title="English / Spanish"
+        />
+      </div>
+    )
+  },
+}
+
+export const ManyLanguages: Story = {
+  render: () => {
+    const manyLangConfig: I18nEditorConfig = {
+      languages: [
+        { code: 'en', label: 'English', flag: '🇺🇸', isSource: true },
+        { code: 'fr', label: 'French', flag: '🇫🇷' },
+        { code: 'de', label: 'German', flag: '🇩🇪' },
+        { code: 'es', label: 'Spanish', flag: '🇪🇸' },
+        { code: 'it', label: 'Italian', flag: '🇮🇹' },
+        { code: 'pt', label: 'Portuguese', flag: '🇵🇹' },
+        { code: 'nl', label: 'Dutch', flag: '🇳🇱' },
+        { code: 'pl', label: 'Polish', flag: '🇵🇱' },
+      ],
+      sourceLanguage: 'en',
+    }
+
+    const manyLangEntries: TranslationEntry[] = defaultTranslations.slice(0, 4).map((entry) => ({
+      ...entry,
+      translations: {
+        ...entry.translations,
+        it: { value: '', updatedAt: new Date() },
+        pt: { value: '', updatedAt: new Date() },
+        nl: { value: '', updatedAt: new Date() },
+        pl: { value: '', updatedAt: new Date() },
+      },
+    }))
+
+    return (
+      <div className="h-screen">
+        <WakaI18nEditor
+          config={manyLangConfig}
+          translations={manyLangEntries}
+          onChange={(key, lang, value) => console.log('Changed:', key, lang, value)}
+          title="Multi-Language Project"
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="h-screen">
+      <WakaI18nEditor
+        config={defaultConfig}
+        translations={[]}
+        onAddKey={async (key) => console.log('Add key:', key)}
+        title="New Translation Project"
+        description="Start by adding translation keys"
+      />
+    </div>
+  ),
+}
+
+export const Loading: Story = {
+  render: () => (
+    <div className="h-screen">
+      <WakaI18nEditor
+        config={defaultConfig}
+        translations={[]}
+        isLoading={true}
+        title="Loading Translations..."
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [translations, setTranslations] = React.useState<TranslationEntry[]>(defaultTranslations)
+    const [isSaving, setIsSaving] = React.useState(false)
+
+    const handleChange = (key: string, lang: string, value: string) => {
+      setTranslations((prev) =>
+        prev.map((entry) =>
+          entry.key === key
+            ? {
+                ...entry,
+                translations: {
+                  ...entry.translations,
+                  [lang]: { value, updatedAt: new Date() },
+                },
+              }
+            : entry
+        )
+      )
+    }
+
+    const handleSave = async () => {
+      setIsSaving(true)
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      setIsSaving(false)
+      alert('Translations saved!')
+    }
+
+    const handleAddKey = async (key: string) => {
+      setTranslations((prev) => [
+        ...prev,
+        {
+          key,
+          translations: {
+            en: { value: '', updatedAt: new Date() },
+            fr: { value: '', updatedAt: new Date() },
+            de: { value: '', updatedAt: new Date() },
+            es: { value: '', updatedAt: new Date() },
+          },
+        },
+      ])
+    }
+
+    const handleDeleteKey = async (key: string) => {
+      setTranslations((prev) => prev.filter((e) => e.key !== key))
+    }
+
+    return (
+      <div className="h-screen">
+        <WakaI18nEditor
+          config={defaultConfig}
+          translations={translations}
+          onChange={handleChange}
+          onSave={handleSave}
+          onAddKey={handleAddKey}
+          onDeleteKey={handleDeleteKey}
+          isSaving={isSaving}
+          title="Interactive Editor"
+          description="Try adding, editing, and deleting translations"
+        />
+      </div>
+    )
+  },
+}
+
+export const TranslationDashboard: Story = {
+  render: () => (
+    <div className="min-h-screen bg-muted/30">
+      <header className="bg-background border-b px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="font-bold text-xl">Localization Dashboard</h1>
+            <p className="text-sm text-muted-foreground">Manage translations for your application</p>
+          </div>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-foreground font-medium">Translations</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Languages</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Export</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Settings</a>
+          </nav>
+        </div>
+      </header>
+      <main className="h-[calc(100vh-73px)]">
+        <WakaI18nEditor
+          config={defaultConfig}
+          translations={defaultTranslations}
+          onChange={(key, lang, value) => console.log('Changed:', key, lang, value)}
+          onSave={async (translations) => {
+            console.log('Save:', translations)
+            await new Promise((resolve) => setTimeout(resolve, 500))
+          }}
+          onAddKey={async (key) => console.log('Add key:', key)}
+          onDeleteKey={async (key) => console.log('Delete key:', key)}
+          onExport={async (lang) => console.log('Export:', lang)}
+        />
+      </main>
+    </div>
+  ),
+}