Move feature idea seed data to JSON

2026-04-25 14:14:57 +00:00 · 2026-01-18 00:15:54 +00:00
parent c901b8d8ec
commit 1d98340c7f
8 changed files with 153 additions and 129 deletions
--- a/src/components/FeatureIdeaCloud.tsx
+++ b/src/components/FeatureIdeaCloud.tsx
@@ -24,9 +24,28 @@ import { ScrollArea } from '@/components/ui/scroll-area'
 import { Plus, Trash, Sparkle, Package } from '@phosphor-icons/react'
 import { toast } from 'sonner'
 import { FeatureIdea, IdeaGroup, IdeaEdgeData } from './FeatureIdeaCloud/types'
-import { SEED_IDEAS, CATEGORIES, PRIORITIES, STATUSES, CONNECTION_STYLE, GROUP_COLORS } from './FeatureIdeaCloud/constants'
+import { CONNECTION_STYLE } from './FeatureIdeaCloud/constants'
+import seedIdeasData from './FeatureIdeaCloud/data/seed-ideas.json'
+import categoriesData from './FeatureIdeaCloud/data/categories.json'
+import prioritiesData from './FeatureIdeaCloud/data/priorities.json'
+import statusesData from './FeatureIdeaCloud/data/statuses.json'
+import groupColorsData from './FeatureIdeaCloud/data/group-colors.json'
 import { nodeTypes } from './FeatureIdeaCloud/nodes'

+type SeedIdeaJson = Omit<FeatureIdea, 'createdAt'> & { createdAtOffsetMs: number }
+
+const SEED_IDEAS: FeatureIdea[] = (seedIdeasData as SeedIdeaJson[]).map((idea) => {
+  const { createdAtOffsetMs, ...rest } = idea
+  return {
+    ...rest,
+    createdAt: Date.now() - createdAtOffsetMs,
+  }
+})
+const CATEGORIES = categoriesData as string[]
+const PRIORITIES = prioritiesData as FeatureIdea['priority'][]
+const STATUSES = statusesData as FeatureIdea['status'][]
+const GROUP_COLORS = groupColorsData as Array<{ name: string; value: string; bg: string; border: string }>
+
 export function FeatureIdeaCloud() {
  const [ideas, setIdeas] = useKV<FeatureIdea[]>('feature-ideas', SEED_IDEAS)
  const [groups, setGroups] = useKV<IdeaGroup[]>('feature-idea-groups', [])
--- a/src/components/FeatureIdeaCloud/constants.ts
+++ b/src/components/FeatureIdeaCloud/constants.ts
@@ -1,124 +1,8 @@
-import { FeatureIdea } from './types'
-
-export const SEED_IDEAS: FeatureIdea[] = [
-  {
-    id: 'idea-1',
-    title: 'AI Code Assistant',
-    description: 'Integrate an AI assistant that can suggest code improvements and answer questions',
-    category: 'AI/ML',
-    priority: 'high',
-    status: 'completed',
-    createdAt: Date.now() - 10000000,
-  },
-  {
-    id: 'idea-2',
-    title: 'Real-time Collaboration',
-    description: 'Allow multiple developers to work on the same project simultaneously',
-    category: 'Collaboration',
-    priority: 'high',
-    status: 'idea',
-    createdAt: Date.now() - 9000000,
-  },
-  {
-    id: 'idea-3',
-    title: 'Component Marketplace',
-    description: 'A marketplace where users can share and download pre-built components',
-    category: 'Community',
-    priority: 'medium',
-    status: 'idea',
-    createdAt: Date.now() - 8000000,
-  },
-  {
-    id: 'idea-4',
-    title: 'Visual Git Integration',
-    description: 'Git operations through a visual interface with branch visualization',
-    category: 'DevOps',
-    priority: 'high',
-    status: 'planned',
-    createdAt: Date.now() - 7000000,
-  },
-  {
-    id: 'idea-5',
-    title: 'API Mock Server',
-    description: 'Built-in mock server for testing API integrations',
-    category: 'Testing',
-    priority: 'medium',
-    status: 'idea',
-    createdAt: Date.now() - 6000000,
-  },
-  {
-    id: 'idea-6',
-    title: 'Performance Profiler',
-    description: 'Analyze and optimize application performance with visual metrics',
-    category: 'Performance',
-    priority: 'medium',
-    status: 'idea',
-    createdAt: Date.now() - 5000000,
-  },
-  {
-    id: 'idea-7',
-    title: 'Theme Presets',
-    description: 'Pre-designed theme templates for quick project setup',
-    category: 'Design',
-    priority: 'low',
-    status: 'completed',
-    createdAt: Date.now() - 4000000,
-  },
-  {
-    id: 'idea-8',
-    title: 'Database Schema Migrations',
-    description: 'Visual tool for creating and managing database migrations',
-    category: 'Database',
-    priority: 'high',
-    status: 'in-progress',
-    createdAt: Date.now() - 3000000,
-  },
-  {
-    id: 'idea-9',
-    title: 'Mobile App Preview',
-    description: 'Live preview on actual mobile devices or simulators',
-    category: 'Mobile',
-    priority: 'medium',
-    status: 'planned',
-    createdAt: Date.now() - 2000000,
-  },
-  {
-    id: 'idea-10',
-    title: 'Accessibility Checker',
-    description: 'Automated accessibility testing and suggestions',
-    category: 'Accessibility',
-    priority: 'high',
-    status: 'idea',
-    createdAt: Date.now() - 1000000,
-  },
-]
-
 export const CONNECTION_STYLE = { 
  stroke: '#a78bfa', 
  strokeWidth: 2.5
 }

-export const CATEGORIES = [
-  'AI/ML',
-  'Collaboration',
-  'Community',
-  'DevOps',
-  'Testing',
-  'Performance',
-  'Design',
-  'Database',
-  'Mobile',
-  'Accessibility',
-  'Productivity',
-  'Security',
-  'Analytics',
-  'Other'
-]
-
-export const PRIORITIES = ['low', 'medium', 'high'] as const
-
-export const STATUSES = ['idea', 'planned', 'in-progress', 'completed'] as const
-
 export const STATUS_COLORS = {
  idea: 'bg-muted text-muted-foreground',
  planned: 'bg-accent text-accent-foreground',
@@ -131,14 +15,3 @@ export const PRIORITY_COLORS = {
  medium: 'border-amber-400/60 bg-amber-50/80 dark:bg-amber-950/40',
  high: 'border-red-400/60 bg-red-50/80 dark:bg-red-950/40',
 }
-
-export const GROUP_COLORS = [
-  { name: 'Blue', value: '#3b82f6', bg: 'rgba(59, 130, 246, 0.08)', border: 'rgba(59, 130, 246, 0.3)' },
-  { name: 'Purple', value: '#a855f7', bg: 'rgba(168, 85, 247, 0.08)', border: 'rgba(168, 85, 247, 0.3)' },
-  { name: 'Green', value: '#10b981', bg: 'rgba(16, 185, 129, 0.08)', border: 'rgba(16, 185, 129, 0.3)' },
-  { name: 'Red', value: '#ef4444', bg: 'rgba(239, 68, 68, 0.08)', border: 'rgba(239, 68, 68, 0.3)' },
-  { name: 'Orange', value: '#f97316', bg: 'rgba(249, 115, 22, 0.08)', border: 'rgba(249, 115, 22, 0.3)' },
-  { name: 'Pink', value: '#ec4899', bg: 'rgba(236, 72, 153, 0.08)', border: 'rgba(236, 72, 153, 0.3)' },
-  { name: 'Cyan', value: '#06b6d4', bg: 'rgba(6, 182, 212, 0.08)', border: 'rgba(6, 182, 212, 0.3)' },
-  { name: 'Amber', value: '#f59e0b', bg: 'rgba(245, 158, 11, 0.08)', border: 'rgba(245, 158, 11, 0.3)' },
-]
--- a/src/components/FeatureIdeaCloud/data/categories.json
+++ b/src/components/FeatureIdeaCloud/data/categories.json
@@ -0,0 +1,16 @@
+[
+  "AI/ML",
+  "Collaboration",
+  "Community",
+  "DevOps",
+  "Testing",
+  "Performance",
+  "Design",
+  "Database",
+  "Mobile",
+  "Accessibility",
+  "Productivity",
+  "Security",
+  "Analytics",
+  "Other"
+]
--- a/src/components/FeatureIdeaCloud/data/group-colors.json
+++ b/src/components/FeatureIdeaCloud/data/group-colors.json
@@ -0,0 +1,10 @@
+[
+  { "name": "Blue", "value": "#3b82f6", "bg": "rgba(59, 130, 246, 0.08)", "border": "rgba(59, 130, 246, 0.3)" },
+  { "name": "Purple", "value": "#a855f7", "bg": "rgba(168, 85, 247, 0.08)", "border": "rgba(168, 85, 247, 0.3)" },
+  { "name": "Green", "value": "#10b981", "bg": "rgba(16, 185, 129, 0.08)", "border": "rgba(16, 185, 129, 0.3)" },
+  { "name": "Red", "value": "#ef4444", "bg": "rgba(239, 68, 68, 0.08)", "border": "rgba(239, 68, 68, 0.3)" },
+  { "name": "Orange", "value": "#f97316", "bg": "rgba(249, 115, 22, 0.08)", "border": "rgba(249, 115, 22, 0.3)" },
+  { "name": "Pink", "value": "#ec4899", "bg": "rgba(236, 72, 153, 0.08)", "border": "rgba(236, 72, 153, 0.3)" },
+  { "name": "Cyan", "value": "#06b6d4", "bg": "rgba(6, 182, 212, 0.08)", "border": "rgba(6, 182, 212, 0.3)" },
+  { "name": "Amber", "value": "#f59e0b", "bg": "rgba(245, 158, 11, 0.08)", "border": "rgba(245, 158, 11, 0.3)" }
+]
--- a/src/components/FeatureIdeaCloud/data/priorities.json
+++ b/src/components/FeatureIdeaCloud/data/priorities.json
@@ -0,0 +1,5 @@
+[
+  "low",
+  "medium",
+  "high"
+]
--- a/src/components/FeatureIdeaCloud/data/seed-ideas.json
+++ b/src/components/FeatureIdeaCloud/data/seed-ideas.json
@@ -0,0 +1,92 @@
+[
+  {
+    "id": "idea-1",
+    "title": "AI Code Assistant",
+    "description": "Integrate an AI assistant that can suggest code improvements and answer questions",
+    "category": "AI/ML",
+    "priority": "high",
+    "status": "completed",
+    "createdAtOffsetMs": 10000000
+  },
+  {
+    "id": "idea-2",
+    "title": "Real-time Collaboration",
+    "description": "Allow multiple developers to work on the same project simultaneously",
+    "category": "Collaboration",
+    "priority": "high",
+    "status": "idea",
+    "createdAtOffsetMs": 9000000
+  },
+  {
+    "id": "idea-3",
+    "title": "Component Marketplace",
+    "description": "A marketplace where users can share and download pre-built components",
+    "category": "Community",
+    "priority": "medium",
+    "status": "idea",
+    "createdAtOffsetMs": 8000000
+  },
+  {
+    "id": "idea-4",
+    "title": "Visual Git Integration",
+    "description": "Git operations through a visual interface with branch visualization",
+    "category": "DevOps",
+    "priority": "high",
+    "status": "planned",
+    "createdAtOffsetMs": 7000000
+  },
+  {
+    "id": "idea-5",
+    "title": "API Mock Server",
+    "description": "Built-in mock server for testing API integrations",
+    "category": "Testing",
+    "priority": "medium",
+    "status": "idea",
+    "createdAtOffsetMs": 6000000
+  },
+  {
+    "id": "idea-6",
+    "title": "Performance Profiler",
+    "description": "Analyze and optimize application performance with visual metrics",
+    "category": "Performance",
+    "priority": "medium",
+    "status": "idea",
+    "createdAtOffsetMs": 5000000
+  },
+  {
+    "id": "idea-7",
+    "title": "Theme Presets",
+    "description": "Pre-designed theme templates for quick project setup",
+    "category": "Design",
+    "priority": "low",
+    "status": "completed",
+    "createdAtOffsetMs": 4000000
+  },
+  {
+    "id": "idea-8",
+    "title": "Database Schema Migrations",
+    "description": "Visual tool for creating and managing database migrations",
+    "category": "Database",
+    "priority": "high",
+    "status": "in-progress",
+    "createdAtOffsetMs": 3000000
+  },
+  {
+    "id": "idea-9",
+    "title": "Mobile App Preview",
+    "description": "Live preview on actual mobile devices or simulators",
+    "category": "Mobile",
+    "priority": "medium",
+    "status": "planned",
+    "createdAtOffsetMs": 2000000
+  },
+  {
+    "id": "idea-10",
+    "title": "Accessibility Checker",
+    "description": "Automated accessibility testing and suggestions",
+    "category": "Accessibility",
+    "priority": "high",
+    "status": "idea",
+    "createdAtOffsetMs": 1000000
+  }
+]
--- a/src/components/FeatureIdeaCloud/data/statuses.json
+++ b/src/components/FeatureIdeaCloud/data/statuses.json
@@ -0,0 +1,6 @@
+[
+  "idea",
+  "planned",
+  "in-progress",
+  "completed"
+]
--- a/src/components/FeatureIdeaCloud/nodes.tsx
+++ b/src/components/FeatureIdeaCloud/nodes.tsx
@@ -5,7 +5,10 @@ import { Card } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { DotsThree } from '@phosphor-icons/react'
 import { FeatureIdea, IdeaGroup } from './types'
-import { PRIORITY_COLORS, STATUS_COLORS, GROUP_COLORS } from './constants'
+import { PRIORITY_COLORS, STATUS_COLORS } from './constants'
+import groupColorsData from './data/group-colors.json'
+
+const GROUP_COLORS = groupColorsData as Array<{ name: string; value: string; bg: string; border: string }>

 export function GroupNode({ data, selected }: NodeProps<IdeaGroup>) {
  const colorScheme = GROUP_COLORS.find(c => c.value === data.color) || GROUP_COLORS[0]