From 7311c354d554a57ed7adea140e5a1007192d8645 Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Sun, 18 Jan 2026 00:35:48 +0000
Subject: [PATCH] Refactor Storybook designer copy

---
 src/components/StorybookDesigner.tsx | 539 ++++++++++++++-------------
 src/data/storybook-designer.json     |  43 +++
 2 files changed, 325 insertions(+), 257 deletions(-)
 create mode 100644 src/data/storybook-designer.json

diff --git a/src/components/StorybookDesigner.tsx b/src/components/StorybookDesigner.tsx
index a878c02..0973777 100644
--- a/src/components/StorybookDesigner.tsx
+++ b/src/components/StorybookDesigner.tsx
@@ -11,314 +11,339 @@ import { Textarea } from '@/components/ui/textarea'
 import { Plus, Trash, BookOpen, Sparkle } from '@phosphor-icons/react'
 import { toast } from 'sonner'
 import { Badge } from '@/components/ui/badge'
+import copy from '@/data/storybook-designer.json'
 
 interface StorybookDesignerProps {
   stories: StorybookStory[]
   onStoriesChange: (stories: StorybookStory[]) => void
 }
 
-export function StorybookDesigner({ stories, onStoriesChange }: StorybookDesignerProps) {
-  const [selectedStoryId, setSelectedStoryId] = useState<string | null>(stories[0]?.id || null)
+interface StoryListPanelProps {
+  stories: StorybookStory[]
+  categories: string[]
+  selectedStoryId: string | null
+  onSelectStory: (storyId: string) => void
+  onAddStory: () => void
+  onGenerateWithAI: () => void
+  onDeleteStory: (storyId: string) => void
+}
+
+interface StoryDetailsEditorProps {
+  selectedStory: StorybookStory
+  onUpdateStory: (storyId: string, updates: Partial<StorybookStory>) => void
+}
+
+interface StoryArgsEditorProps {
+  selectedStory: StorybookStory
+  onUpdateStory: (storyId: string, updates: Partial<StorybookStory>) => void
+}
+
+const parseArgValue = (value: string) => {
+  try {
+    return JSON.parse(value)
+  } catch {
+    return value
+  }
+}
+
+const StoryListPanel = ({
+  stories,
+  categories,
+  selectedStoryId,
+  onSelectStory,
+  onAddStory,
+  onGenerateWithAI,
+  onDeleteStory
+}: StoryListPanelProps) => (
+  <div className="w-80 border-r border-border bg-card">
+    <div className="p-4 border-b border-border flex items-center justify-between">
+      <h2 className="font-semibold text-sm">{copy.list.title}</h2>
+      <div className="flex gap-1">
+        <Button size="sm" variant="outline" onClick={onGenerateWithAI}>
+          <Sparkle size={14} weight="duotone" />
+        </Button>
+        <Button size="sm" onClick={onAddStory}>
+          <Plus size={14} />
+        </Button>
+      </div>
+    </div>
+    <ScrollArea className="h-[calc(100vh-200px)]">
+      {categories.map(category => (
+        <div key={category} className="mb-4">
+          <div className="px-4 py-2 text-xs font-semibold text-muted-foreground uppercase">
+            {category}
+          </div>
+          <div className="px-2 space-y-1">
+            {stories.filter(story => story.category === category).map(story => (
+              <div
+                key={story.id}
+                className={`p-3 rounded-md cursor-pointer flex items-start justify-between group ${
+                  selectedStoryId === story.id ? 'bg-accent text-accent-foreground' : 'hover:bg-muted'
+                }`}
+                onClick={() => onSelectStory(story.id)}
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="font-medium text-sm truncate">{story.componentName}</div>
+                  <div className="text-xs text-muted-foreground truncate">{story.storyName}</div>
+                </div>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="opacity-0 group-hover:opacity-100"
+                  onClick={event => {
+                    event.stopPropagation()
+                    onDeleteStory(story.id)
+                  }}
+                >
+                  <Trash size={14} />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+      {stories.length === 0 && (
+        <div className="p-8 text-center text-sm text-muted-foreground">
+          {copy.list.empty}
+        </div>
+      )}
+    </ScrollArea>
+  </div>
+)
+
+const StoryDetailsEditor = ({ selectedStory, onUpdateStory }: StoryDetailsEditorProps) => (
+  <Card>
+    <CardHeader>
+      <CardTitle>{copy.editor.detailsTitle}</CardTitle>
+    </CardHeader>
+    <CardContent className="space-y-4">
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="component-name">{copy.editor.componentNameLabel}</Label>
+          <Input
+            id="component-name"
+            value={selectedStory.componentName}
+            onChange={event => onUpdateStory(selectedStory.id, { componentName: event.target.value })}
+            placeholder={copy.editor.componentNamePlaceholder}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="story-name">{copy.editor.storyNameLabel}</Label>
+          <Input
+            id="story-name"
+            value={selectedStory.storyName}
+            onChange={event => onUpdateStory(selectedStory.id, { storyName: event.target.value })}
+            placeholder={copy.editor.storyNamePlaceholder}
+          />
+        </div>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="category">{copy.editor.categoryLabel}</Label>
+        <Input
+          id="category"
+          value={selectedStory.category}
+          onChange={event => onUpdateStory(selectedStory.id, { category: event.target.value })}
+          placeholder={copy.editor.categoryPlaceholder}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="description">{copy.editor.descriptionLabel}</Label>
+        <Textarea
+          id="description"
+          value={selectedStory.description}
+          onChange={event => onUpdateStory(selectedStory.id, { description: event.target.value })}
+          placeholder={copy.editor.descriptionPlaceholder}
+        />
+      </div>
+    </CardContent>
+  </Card>
+)
+
+const StoryArgsEditor = ({ selectedStory, onUpdateStory }: StoryArgsEditorProps) => {
   const [newArgKey, setNewArgKey] = useState('')
   const [newArgValue, setNewArgValue] = useState('')
-  
-  const selectedStory = stories.find(s => s.id === selectedStoryId)
-  const categories = Array.from(new Set(stories.map(s => s.category)))
-
-  const handleAddStory = () => {
-    const newStory: StorybookStory = {
-      id: `story-${Date.now()}`,
-      componentName: 'Button',
-      storyName: 'Default',
-      args: {},
-      description: '',
-      category: 'Components'
-    }
-    onStoriesChange([...stories, newStory])
-    setSelectedStoryId(newStory.id)
-  }
-
-  const handleDeleteStory = (storyId: string) => {
-    onStoriesChange(stories.filter(s => s.id !== storyId))
-    if (selectedStoryId === storyId) {
-      const remaining = stories.filter(s => s.id !== storyId)
-      setSelectedStoryId(remaining[0]?.id || null)
-    }
-  }
-
-  const handleUpdateStory = (storyId: string, updates: Partial<StorybookStory>) => {
-    onStoriesChange(
-      stories.map(s => s.id === storyId ? { ...s, ...updates } : s)
-    )
-  }
 
   const handleAddArg = () => {
-    if (!selectedStory || !newArgKey) return
-    
-    let parsedValue: any = newArgValue
-    try {
-      parsedValue = JSON.parse(newArgValue)
-    } catch {
-      parsedValue = newArgValue
-    }
+    if (!newArgKey) return
 
-    handleUpdateStory(selectedStory.id, {
-      args: { ...selectedStory.args, [newArgKey]: parsedValue }
+    onUpdateStory(selectedStory.id, {
+      args: { ...selectedStory.args, [newArgKey]: parseArgValue(newArgValue) }
     })
     setNewArgKey('')
     setNewArgValue('')
   }
 
   const handleDeleteArg = (key: string) => {
-    if (!selectedStory) return
     const { [key]: _, ...rest } = selectedStory.args
-    handleUpdateStory(selectedStory.id, { args: rest })
+    onUpdateStory(selectedStory.id, { args: rest })
   }
 
   const handleUpdateArg = (key: string, value: string) => {
-    if (!selectedStory) return
-    let parsedValue: any = value
-    try {
-      parsedValue = JSON.parse(value)
-    } catch {
-      parsedValue = value
-    }
-    handleUpdateStory(selectedStory.id, {
-      args: { ...selectedStory.args, [key]: parsedValue }
+    onUpdateStory(selectedStory.id, {
+      args: { ...selectedStory.args, [key]: parseArgValue(value) }
     })
   }
 
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>{copy.args.title}</CardTitle>
+            <CardDescription>{copy.args.description}</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex gap-2">
+          <Input
+            placeholder={copy.args.argNamePlaceholder}
+            value={newArgKey}
+            onChange={event => setNewArgKey(event.target.value)}
+          />
+          <Input
+            placeholder={copy.args.argValuePlaceholder}
+            value={newArgValue}
+            onChange={event => setNewArgValue(event.target.value)}
+          />
+          <Button onClick={handleAddArg} disabled={!newArgKey}>
+            <Plus size={14} />
+          </Button>
+        </div>
+
+        <ScrollArea className="h-[300px]">
+          <div className="space-y-2">
+            {Object.entries(selectedStory.args).map(([key, value]) => (
+              <Card key={key}>
+                <CardContent className="pt-4">
+                  <div className="flex items-start gap-3">
+                    <div className="flex-1 space-y-2">
+                      <div className="flex items-center gap-2">
+                        <Label className="font-mono text-xs">{key}</Label>
+                        <Badge variant="outline">{typeof value}</Badge>
+                      </div>
+                      <Input
+                        value={JSON.stringify(value)}
+                        onChange={event => handleUpdateArg(key, event.target.value)}
+                        className="font-mono text-xs"
+                      />
+                    </div>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => handleDeleteArg(key)}
+                    >
+                      <Trash size={14} />
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+            {Object.keys(selectedStory.args).length === 0 && (
+              <div className="py-12 text-center text-sm text-muted-foreground">
+                {copy.args.empty}
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  )
+}
+
+const EmptyStoryState = ({ onAddStory }: { onAddStory: () => void }) => (
+  <div className="h-full flex items-center justify-center">
+    <div className="text-center">
+      <BookOpen size={48} className="mx-auto mb-4 text-muted-foreground" />
+      <p className="text-lg font-medium mb-2">{copy.emptyState.title}</p>
+      <p className="text-sm text-muted-foreground mb-4">{copy.emptyState.subtitle}</p>
+      <Button onClick={onAddStory}>
+        <Plus size={16} className="mr-2" />
+        {copy.emptyState.button}
+      </Button>
+    </div>
+  </div>
+)
+
+export function StorybookDesigner({ stories, onStoriesChange }: StorybookDesignerProps) {
+  const [selectedStoryId, setSelectedStoryId] = useState<string | null>(stories[0]?.id || null)
+
+  const selectedStory = stories.find(story => story.id === selectedStoryId)
+  const categories = Array.from(new Set(stories.map(story => story.category)))
+
+  const handleAddStory = () => {
+    const newStory: StorybookStory = {
+      id: `story-${Date.now()}`,
+      componentName: copy.defaults.componentName,
+      storyName: copy.defaults.storyName,
+      args: {},
+      description: '',
+      category: copy.defaults.category
+    }
+    onStoriesChange([...stories, newStory])
+    setSelectedStoryId(newStory.id)
+  }
+
+  const handleDeleteStory = (storyId: string) => {
+    onStoriesChange(stories.filter(story => story.id !== storyId))
+    if (selectedStoryId === storyId) {
+      const remaining = stories.filter(story => story.id !== storyId)
+      setSelectedStoryId(remaining[0]?.id || null)
+    }
+  }
+
+  const handleUpdateStory = (storyId: string, updates: Partial<StorybookStory>) => {
+    onStoriesChange(
+      stories.map(story => story.id === storyId ? { ...story, ...updates } : story)
+    )
+  }
+
   const handleGenerateWithAI = async () => {
-    const description = prompt('Describe the component and story you want to generate:')
+    const description = prompt(copy.ai.descriptionPrompt)
     if (!description) return
 
     try {
-      toast.info('Generating story with AI...')
-      const promptText = `You are a Storybook story generator. Create a story based on: "${description}"
-
-Return a valid JSON object with a single property "story":
-{
-  "story": {
-    "id": "unique-id",
-    "componentName": "ComponentName (e.g., Button, Card, Input)",
-    "storyName": "StoryName (e.g., Primary, Large, Disabled)",
-    "args": {
-      "variant": "primary",
-      "size": "large",
-      "disabled": false
-    },
-    "description": "Description of what this story demonstrates",
-    "category": "Components" (e.g., Components, Forms, Layout, Data Display)
-  }
-}
-
-Create appropriate props/args that showcase the component variation.`
-
+      toast.info(copy.ai.toastGenerating)
+      const promptText = copy.ai.promptTemplate.replace('{description}', description)
       const response = await window.spark.llm(promptText, 'gpt-4o', true)
       const parsed = JSON.parse(response)
       onStoriesChange([...stories, parsed.story])
       setSelectedStoryId(parsed.story.id)
-      toast.success('Story generated successfully!')
+      toast.success(copy.ai.toastSuccess)
     } catch (error) {
       console.error(error)
-      toast.error('Failed to generate story')
+      toast.error(copy.ai.toastError)
     }
   }
 
   return (
     <div className="h-full flex">
-      <div className="w-80 border-r border-border bg-card">
-        <div className="p-4 border-b border-border flex items-center justify-between">
-          <h2 className="font-semibold text-sm">Stories</h2>
-          <div className="flex gap-1">
-            <Button size="sm" variant="outline" onClick={handleGenerateWithAI}>
-              <Sparkle size={14} weight="duotone" />
-            </Button>
-            <Button size="sm" onClick={handleAddStory}>
-              <Plus size={14} />
-            </Button>
-          </div>
-        </div>
-        <ScrollArea className="h-[calc(100vh-200px)]">
-          {categories.map(category => (
-            <div key={category} className="mb-4">
-              <div className="px-4 py-2 text-xs font-semibold text-muted-foreground uppercase">
-                {category}
-              </div>
-              <div className="px-2 space-y-1">
-                {stories.filter(s => s.category === category).map(story => (
-                  <div
-                    key={story.id}
-                    className={`p-3 rounded-md cursor-pointer flex items-start justify-between group ${
-                      selectedStoryId === story.id ? 'bg-accent text-accent-foreground' : 'hover:bg-muted'
-                    }`}
-                    onClick={() => setSelectedStoryId(story.id)}
-                  >
-                    <div className="flex-1 min-w-0">
-                      <div className="font-medium text-sm truncate">{story.componentName}</div>
-                      <div className="text-xs text-muted-foreground truncate">{story.storyName}</div>
-                    </div>
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      className="opacity-0 group-hover:opacity-100"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        handleDeleteStory(story.id)
-                      }}
-                    >
-                      <Trash size={14} />
-                    </Button>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ))}
-          {stories.length === 0 && (
-            <div className="p-8 text-center text-sm text-muted-foreground">
-              No stories yet. Click + to create one.
-            </div>
-          )}
-        </ScrollArea>
-      </div>
+      <StoryListPanel
+        stories={stories}
+        categories={categories}
+        selectedStoryId={selectedStoryId}
+        onSelectStory={setSelectedStoryId}
+        onAddStory={handleAddStory}
+        onGenerateWithAI={handleGenerateWithAI}
+        onDeleteStory={handleDeleteStory}
+      />
 
       <div className="flex-1 p-6">
         {selectedStory ? (
           <div className="space-y-6">
             <div className="flex items-center justify-between">
-              <h2 className="text-2xl font-bold">Story Configuration</h2>
+              <h2 className="text-2xl font-bold">{copy.editor.title}</h2>
               <Button variant="outline">
                 <BookOpen size={16} className="mr-2" weight="fill" />
-                Preview Story
+                {copy.editor.previewButton}
               </Button>
             </div>
 
-            <Card>
-              <CardHeader>
-                <CardTitle>Story Details</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="component-name">Component Name</Label>
-                    <Input
-                      id="component-name"
-                      value={selectedStory.componentName}
-                      onChange={e => handleUpdateStory(selectedStory.id, { componentName: e.target.value })}
-                      placeholder="Button"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="story-name">Story Name</Label>
-                    <Input
-                      id="story-name"
-                      value={selectedStory.storyName}
-                      onChange={e => handleUpdateStory(selectedStory.id, { storyName: e.target.value })}
-                      placeholder="Primary"
-                    />
-                  </div>
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="category">Category</Label>
-                  <Input
-                    id="category"
-                    value={selectedStory.category}
-                    onChange={e => handleUpdateStory(selectedStory.id, { category: e.target.value })}
-                    placeholder="Components"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="description">Description</Label>
-                  <Textarea
-                    id="description"
-                    value={selectedStory.description}
-                    onChange={e => handleUpdateStory(selectedStory.id, { description: e.target.value })}
-                    placeholder="Describe what this story demonstrates..."
-                  />
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <div className="flex items-center justify-between">
-                  <div>
-                    <CardTitle>Args / Props</CardTitle>
-                    <CardDescription>Configure component props for this story</CardDescription>
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="flex gap-2">
-                  <Input
-                    placeholder="Arg name"
-                    value={newArgKey}
-                    onChange={e => setNewArgKey(e.target.value)}
-                  />
-                  <Input
-                    placeholder="Value (JSON or string)"
-                    value={newArgValue}
-                    onChange={e => setNewArgValue(e.target.value)}
-                  />
-                  <Button onClick={handleAddArg} disabled={!newArgKey}>
-                    <Plus size={14} />
-                  </Button>
-                </div>
-
-                <ScrollArea className="h-[300px]">
-                  <div className="space-y-2">
-                    {Object.entries(selectedStory.args).map(([key, value]) => (
-                      <Card key={key}>
-                        <CardContent className="pt-4">
-                          <div className="flex items-start gap-3">
-                            <div className="flex-1 space-y-2">
-                              <div className="flex items-center gap-2">
-                                <Label className="font-mono text-xs">{key}</Label>
-                                <Badge variant="outline">
-                                  {typeof value}
-                                </Badge>
-                              </div>
-                              <Input
-                                value={JSON.stringify(value)}
-                                onChange={e => handleUpdateArg(key, e.target.value)}
-                                className="font-mono text-xs"
-                              />
-                            </div>
-                            <Button
-                              size="sm"
-                              variant="ghost"
-                              onClick={() => handleDeleteArg(key)}
-                            >
-                              <Trash size={14} />
-                            </Button>
-                          </div>
-                        </CardContent>
-                      </Card>
-                    ))}
-                    {Object.keys(selectedStory.args).length === 0 && (
-                      <div className="py-12 text-center text-sm text-muted-foreground">
-                        No args configured yet. Add props above to showcase component variations.
-                      </div>
-                    )}
-                  </div>
-                </ScrollArea>
-              </CardContent>
-            </Card>
+            <StoryDetailsEditor selectedStory={selectedStory} onUpdateStory={handleUpdateStory} />
+            <StoryArgsEditor selectedStory={selectedStory} onUpdateStory={handleUpdateStory} />
           </div>
         ) : (
-          <div className="h-full flex items-center justify-center">
-            <div className="text-center">
-              <BookOpen size={48} className="mx-auto mb-4 text-muted-foreground" />
-              <p className="text-lg font-medium mb-2">No story selected</p>
-              <p className="text-sm text-muted-foreground mb-4">
-                Create or select a story to configure
-              </p>
-              <Button onClick={handleAddStory}>
-                <Plus size={16} className="mr-2" />
-                Create Story
-              </Button>
-            </div>
-          </div>
+          <EmptyStoryState onAddStory={handleAddStory} />
         )}
       </div>
     </div>
diff --git a/src/data/storybook-designer.json b/src/data/storybook-designer.json
new file mode 100644
index 0000000..5647272
--- /dev/null
+++ b/src/data/storybook-designer.json
@@ -0,0 +1,43 @@
+{
+  "defaults": {
+    "componentName": "Button",
+    "storyName": "Default",
+    "category": "Components"
+  },
+  "list": {
+    "title": "Stories",
+    "empty": "No stories yet. Click + to create one."
+  },
+  "editor": {
+    "title": "Story Configuration",
+    "previewButton": "Preview Story",
+    "detailsTitle": "Story Details",
+    "componentNameLabel": "Component Name",
+    "componentNamePlaceholder": "Button",
+    "storyNameLabel": "Story Name",
+    "storyNamePlaceholder": "Primary",
+    "categoryLabel": "Category",
+    "categoryPlaceholder": "Components",
+    "descriptionLabel": "Description",
+    "descriptionPlaceholder": "Describe what this story demonstrates..."
+  },
+  "args": {
+    "title": "Args / Props",
+    "description": "Configure component props for this story",
+    "argNamePlaceholder": "Arg name",
+    "argValuePlaceholder": "Value (JSON or string)",
+    "empty": "No args configured yet. Add props above to showcase component variations."
+  },
+  "emptyState": {
+    "title": "No story selected",
+    "subtitle": "Create or select a story to configure",
+    "button": "Create Story"
+  },
+  "ai": {
+    "descriptionPrompt": "Describe the component and story you want to generate:",
+    "toastGenerating": "Generating story with AI...",
+    "toastSuccess": "Story generated successfully!",
+    "toastError": "Failed to generate story",
+    "promptTemplate": "You are a Storybook story generator. Create a story based on: \"{description}\"\n\nReturn a valid JSON object with a single property \"story\":\n{\n  \"story\": {\n    \"id\": \"unique-id\",\n    \"componentName\": \"ComponentName (e.g., Button, Card, Input)\",\n    \"storyName\": \"StoryName (e.g., Primary, Large, Disabled)\",\n    \"args\": {\n      \"variant\": \"primary\",\n      \"size\": \"large\",\n      \"disabled\": false\n    },\n    \"description\": \"Description of what this story demonstrates\",\n    \"category\": \"Components\" (e.g., Components, Forms, Layout, Data Display)\n  }\n}\n\nCreate appropriate props/args that showcase the component variation."
+  }
+}