From f221a36c8851e71d3f8f51622ff840be710a74ee Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 17 Jan 2026 23:13:23 +0000 Subject: [PATCH] Refactor DocumentationView and FeatureIdeaCloud into modular components Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com> --- src/components/DocumentationView.tsx | 193 +---------- .../DocumentationView/DocComponents.tsx | 182 +++++++++++ src/components/FeatureIdeaCloud.tsx | 299 +----------------- src/components/FeatureIdeaCloud/constants.ts | 100 ++++++ src/components/FeatureIdeaCloud/nodes.tsx | 145 +++++++++ src/components/FeatureIdeaCloud/types.ts | 21 ++ 6 files changed, 464 insertions(+), 476 deletions(-) create mode 100644 src/components/DocumentationView/DocComponents.tsx create mode 100644 src/components/FeatureIdeaCloud/nodes.tsx create mode 100644 src/components/FeatureIdeaCloud/types.ts diff --git a/src/components/DocumentationView.tsx b/src/components/DocumentationView.tsx index 41e92eb..4df23d4 100644 --- a/src/components/DocumentationView.tsx +++ b/src/components/DocumentationView.tsx @@ -8,10 +8,7 @@ import { Input } from '@/components/ui/input' import { BookOpen, MapPin, - FileCode, - CheckCircle, Clock, - Sparkle, Code, Database, Tree, @@ -28,6 +25,17 @@ import { MagnifyingGlass, GitBranch } from '@phosphor-icons/react' +import { + FeatureItem, + AIFeatureCard, + RoadmapItem, + AgentFileItem, + IntegrationPoint, + CICDPlatformItem, + PipelineStageCard, + SassComponentItem, + AnimationItem +} from './DocumentationView/DocComponents' export function DocumentationView() { const [activeTab, setActiveTab] = useState('readme') @@ -1894,182 +1902,3 @@ docker pull ghcr.io//:latest`} ) } - -function CICDPlatformItem({ name, file, description, features }: { - name: string - file: string - description: string - features: string[] -}) { - return ( -
-
-
- -

{name}

-
- {file} -

{description}

-
-
-

Key Features:

-
    - {features.map((feature, idx) => ( -
  • - - {feature} -
    • - ))} -
-
-
- ) -} - -function PipelineStageCard({ stage, description, duration }: { - stage: string - description: string - duration: string -}) { - return ( - - -
-
-

{stage}

-

{description}

-
- - {duration} - -
- - - ) -} - -function SassComponentItem({ name, classes, description }: { name: string; classes: string[]; description: string }) { - return ( -
-

{name}

-

{description}

-
- {classes.map((cls, idx) => ( - {cls} - ))} -
-
- ) -} - -function AnimationItem({ name, description }: { name: string; description: string }) { - return ( -
- {name} -

{description}

-
- ) -} - -function FeatureItem({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) { - return ( -
-
{icon}
-
-

{title}

-

{description}

-
-
- ) -} - -function AIFeatureCard({ title, description }: { title: string; description: string }) { - return ( - - -
- -
-

{title}

-

{description}

-
-
- - - ) -} - -function RoadmapItem({ status, title, description, version }: { - status: 'completed' | 'planned' - title: string - description: string - version: string -}) { - return ( - - -
-
-
-

{title}

- - {version} - -
-

{description}

-
-
- - - ) -} - -function AgentFileItem({ filename, path, description, features }: { - filename: string - path: string - description: string - features: string[] -}) { - return ( -
-
-
- - {filename} -
-

{path}

-

{description}

-
-
-

Key Features:

-
    - {features.map((feature, idx) => ( -
  • - - {feature} -
    • - ))} -
-
-
- ) -} - -function IntegrationPoint({ component, capabilities }: { component: string; capabilities: string[] }) { - return ( -
-

- - {component} -

-
    - {capabilities.map((capability, idx) => ( -
  • - • - {capability} -
    • - ))} -
-
- ) -} diff --git a/src/components/DocumentationView/DocComponents.tsx b/src/components/DocumentationView/DocComponents.tsx new file mode 100644 index 0000000..b3a395b --- /dev/null +++ b/src/components/DocumentationView/DocComponents.tsx @@ -0,0 +1,182 @@ +import { Card, CardContent } from '@/components/ui/card' +import { Badge } from '@/components/ui/badge' +import { FileCode, CheckCircle, Sparkle } from '@phosphor-icons/react' + +export function FeatureItem({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) { + return ( +
+
{icon}
+
+

{title}

+

{description}

+
+
+ ) +} + +export function AIFeatureCard({ title, description }: { title: string; description: string }) { + return ( + + +
+ +
+

{title}

+

{description}

+
+
+ + + ) +} + +export function RoadmapItem({ status, title, description, version }: { + status: 'completed' | 'planned' + title: string + description: string + version: string +}) { + return ( + + +
+
+
+

{title}

+ + {version} + +
+

{description}

+
+
+ + + ) +} + +export function AgentFileItem({ filename, path, description, features }: { + filename: string + path: string + description: string + features: string[] +}) { + return ( +
+
+
+ + {filename} +
+

{path}

+

{description}

+
+
+

Key Features:

+
    + {features.map((feature, idx) => ( +
  • + + {feature} +
    • + ))} +
+
+
+ ) +} + +export function IntegrationPoint({ component, capabilities }: { component: string; capabilities: string[] }) { + return ( +
+

+ + {component} +

+
    + {capabilities.map((capability, idx) => ( +
  • + • + {capability} +
    • + ))} +
+
+ ) +} + +export function CICDPlatformItem({ name, file, description, features }: { + name: string + file: string + description: string + features: string[] +}) { + return ( +
+
+
+ +

{name}

+
+ {file} +

{description}

+
+
+

Key Features:

+
    + {features.map((feature, idx) => ( +
  • + + {feature} +
    • + ))} +
+
+
+ ) +} + +export function PipelineStageCard({ stage, description, duration }: { + stage: string + description: string + duration: string +}) { + return ( + + +
+
+

{stage}

+

{description}

+
+ + {duration} + +
+ + + ) +} + +export function SassComponentItem({ name, classes, description }: { name: string; classes: string[]; description: string }) { + return ( +
+

{name}

+

{description}

+
+ {classes.map((cls, idx) => ( + {cls} + ))} +
+
+ ) +} + +export function AnimationItem({ name, description }: { name: string; description: string }) { + return ( +
+ {name} +

{description}

+
+ ) +} diff --git a/src/components/FeatureIdeaCloud.tsx b/src/components/FeatureIdeaCloud.tsx index 10408e5..dc07481 100644 --- a/src/components/FeatureIdeaCloud.tsx +++ b/src/components/FeatureIdeaCloud.tsx @@ -1,6 +1,4 @@ -/// - -import { useState, useEffect, useCallback, useRef, ReactElement } from 'react' +import { useState, useEffect, useCallback, useRef } from 'react' import { useKV } from '@/hooks/use-kv' import ReactFlow, { Node, @@ -14,307 +12,20 @@ import ReactFlow, { MarkerType, ConnectionMode, Panel, - NodeProps, - Handle, - Position, reconnectEdge, } from 'reactflow' import 'reactflow/dist/style.css' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' -import { Card } from '@/components/ui/card' -import { Badge } from '@/components/ui/badge' import { Textarea } from '@/components/ui/textarea' import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip' import { ScrollArea } from '@/components/ui/scroll-area' -import { Plus, Trash, Sparkle, DotsThree, Package } from '@phosphor-icons/react' +import { Plus, Trash, Sparkle, Package } from '@phosphor-icons/react' import { toast } from 'sonner' - -interface FeatureIdea { - id: string - title: string - description: string - category: string - priority: 'low' | 'medium' | 'high' - status: 'idea' | 'planned' | 'in-progress' | 'completed' - createdAt: number - parentGroup?: string -} - -interface IdeaGroup { - id: string - label: string - color: string - createdAt: number -} - -interface IdeaEdgeData { - label?: string -} - -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, - }, -] - -const CATEGORIES = ['AI/ML', 'Collaboration', 'Community', 'DevOps', 'Testing', 'Performance', 'Design', 'Database', 'Mobile', 'Accessibility', 'Productivity', 'Security', 'Analytics', 'Other'] -const PRIORITIES = ['low', 'medium', 'high'] as const -const STATUSES = ['idea', 'planned', 'in-progress', 'completed'] as const - -const CONNECTION_STYLE = { - stroke: '#a78bfa', - strokeWidth: 2.5 -} - -const STATUS_COLORS = { - idea: 'bg-muted text-muted-foreground', - planned: 'bg-accent text-accent-foreground', - 'in-progress': 'bg-primary text-primary-foreground', - completed: 'bg-green-600 text-white', -} - -const PRIORITY_COLORS = { - low: 'border-blue-400/60 bg-blue-50/80 dark:bg-blue-950/40', - 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', -} - -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)' }, -] - -function GroupNode({ data, selected }: NodeProps) { - const colorScheme = GROUP_COLORS.find(c => c.value === data.color) || GROUP_COLORS[0] - - return ( -
-
- {data.label} -
- -
- ) -} - -function IdeaNode({ data, selected, id }: NodeProps & { id: string }) { - const [connectionCounts, setConnectionCounts] = useState>({ - left: 0, - right: 0, - top: 0, - bottom: 0, - }) - - useEffect(() => { - const updateConnectionCounts = (event: CustomEvent) => { - const { nodeId, counts } = event.detail - if (nodeId === id) { - setConnectionCounts(counts) - } - } - - window.addEventListener('updateConnectionCounts' as any, updateConnectionCounts as EventListener) - return () => { - window.removeEventListener('updateConnectionCounts' as any, updateConnectionCounts as EventListener) - } - }, [id]) - - const generateHandles = (position: Position, type: 'source' | 'target', side: string) => { - const count = connectionCounts[side] || 0 - const totalHandles = Math.max(2, count + 1) - const handles: ReactElement[] = [] - - for (let i = 0; i < totalHandles; i++) { - const handleId = `${side}-${i}` - const isVertical = position === Position.Top || position === Position.Bottom - const positionStyle = isVertical - ? { left: `${((i + 1) / (totalHandles + 1)) * 100}%` } - : { top: `${((i + 1) / (totalHandles + 1)) * 100}%` } - - handles.push( - - ) - } - - return handles - } - - return ( -
- {generateHandles(Position.Left, 'target', 'left')} - {generateHandles(Position.Right, 'source', 'right')} - {generateHandles(Position.Top, 'target', 'top')} - {generateHandles(Position.Bottom, 'source', 'bottom')} - - -
-
-

{data.title}

- -
-

- {data.description} -

-
- - {data.category} - - - {data.status} - -
-
- -
- ) -} - -const nodeTypes = { - ideaNode: IdeaNode, - groupNode: GroupNode, -} +import { FeatureIdea, IdeaGroup, IdeaEdgeData } from './FeatureIdeaCloud/types' +import { SEED_IDEAS, CATEGORIES, PRIORITIES, STATUSES, CONNECTION_STYLE, GROUP_COLORS } from './FeatureIdeaCloud/constants' +import { nodeTypes } from './FeatureIdeaCloud/nodes' export function FeatureIdeaCloud() { const [ideas, setIdeas] = useKV('feature-ideas', SEED_IDEAS) diff --git a/src/components/FeatureIdeaCloud/constants.ts b/src/components/FeatureIdeaCloud/constants.ts index f6be8a7..ac25c07 100644 --- a/src/components/FeatureIdeaCloud/constants.ts +++ b/src/components/FeatureIdeaCloud/constants.ts @@ -1,3 +1,103 @@ +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', diff --git a/src/components/FeatureIdeaCloud/nodes.tsx b/src/components/FeatureIdeaCloud/nodes.tsx new file mode 100644 index 0000000..b1a7b88 --- /dev/null +++ b/src/components/FeatureIdeaCloud/nodes.tsx @@ -0,0 +1,145 @@ +import { useState, useEffect, ReactElement } from 'react' +import { NodeProps, Handle, Position } from 'reactflow' +import { Button } from '@/components/ui/button' +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' + +export function GroupNode({ data, selected }: NodeProps) { + const colorScheme = GROUP_COLORS.find(c => c.value === data.color) || GROUP_COLORS[0] + + return ( +
+
+ {data.label} +
+ +
+ ) +} + +export function IdeaNode({ data, selected, id }: NodeProps & { id: string }) { + const [connectionCounts, setConnectionCounts] = useState>({ + left: 0, + right: 0, + top: 0, + bottom: 0, + }) + + useEffect(() => { + const updateConnectionCounts = (event: CustomEvent) => { + const { nodeId, counts } = event.detail + if (nodeId === id) { + setConnectionCounts(counts) + } + } + + window.addEventListener('updateConnectionCounts' as any, updateConnectionCounts as EventListener) + return () => { + window.removeEventListener('updateConnectionCounts' as any, updateConnectionCounts as EventListener) + } + }, [id]) + + const generateHandles = (position: Position, type: 'source' | 'target', side: string) => { + const count = connectionCounts[side] || 0 + const totalHandles = Math.max(2, count + 1) + const handles: ReactElement[] = [] + + for (let i = 0; i < totalHandles; i++) { + const handleId = `${side}-${i}` + const isVertical = position === Position.Top || position === Position.Bottom + const positionStyle = isVertical + ? { left: `${((i + 1) / (totalHandles + 1)) * 100}%` } + : { top: `${((i + 1) / (totalHandles + 1)) * 100}%` } + + handles.push( + + ) + } + + return handles + } + + return ( +
+ {generateHandles(Position.Left, 'target', 'left')} + {generateHandles(Position.Right, 'source', 'right')} + {generateHandles(Position.Top, 'target', 'top')} + {generateHandles(Position.Bottom, 'source', 'bottom')} + + +
+
+

{data.title}

+ +
+

+ {data.description} +

+
+ + {data.category} + + + {data.status} + +
+
+ +
+ ) +} + +export const nodeTypes = { + ideaNode: IdeaNode, + groupNode: GroupNode, +} diff --git a/src/components/FeatureIdeaCloud/types.ts b/src/components/FeatureIdeaCloud/types.ts new file mode 100644 index 0000000..84efd30 --- /dev/null +++ b/src/components/FeatureIdeaCloud/types.ts @@ -0,0 +1,21 @@ +export interface FeatureIdea { + id: string + title: string + description: string + category: string + priority: 'low' | 'medium' | 'high' + status: 'idea' | 'planned' | 'in-progress' | 'completed' + createdAt: number + parentGroup?: string +} + +export interface IdeaGroup { + id: string + label: string + color: string + createdAt: number +} + +export interface IdeaEdgeData { + label?: string +}