From 6df4f162bbb441f5b658f35f53abe25993970f82 Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Wed, 21 Jan 2026 05:04:02 +0000 Subject: [PATCH] feat: migrate DocumentationView to JSON Co-Authored-By: Claude Haiku 4.5 --- audit-report.json | 4 +- json-components-registry.json | 9 +- src/components/DocumentationView.tsx | 73 --- .../DocumentationView/AIFeatureCard.tsx | 18 - .../DocumentationView/AgentItems.tsx | 52 -- .../DocumentationView/AgentsCoreServices.tsx | 26 - .../AgentsFutureEnhancements.tsx | 28 - .../AgentsIntegrationPoints.tsx | 21 - .../AgentsOverviewSection.tsx | 22 - .../AgentsPromptEngineering.tsx | 21 - .../DocumentationView/AgentsTab.tsx | 19 - .../CicdBestPracticesCard.tsx | 26 - .../CicdBranchStrategySection.tsx | 48 -- .../DocumentationView/CicdDockerCard.tsx | 49 -- .../DocumentationView/CicdEnvVarsCard.tsx | 39 -- .../DocumentationView/CicdItems.tsx | 57 -- .../DocumentationView/CicdOverviewSection.tsx | 26 - .../DocumentationView/CicdPipelineSection.tsx | 21 - .../DocumentationView/CicdPlatformsCard.tsx | 25 - .../DocumentationView/CicdQuickStartCard.tsx | 31 - .../DocumentationView/CicdResourcesCard.tsx | 28 - src/components/DocumentationView/CicdTab.tsx | 25 - .../DocumentationView/FeatureItem.tsx | 13 - .../DocumentationView/FeatureItems.tsx | 30 - .../DocumentationView/PwaFeaturesCard.tsx | 25 - .../PwaInstallationSection.tsx | 36 -- .../DocumentationView/PwaOfflineSection.tsx | 50 -- .../DocumentationView/PwaOverviewSection.tsx | 26 - .../DocumentationView/PwaProTipsCard.tsx | 28 - .../DocumentationView/PwaSettingsCard.tsx | 27 - src/components/DocumentationView/PwaTab.tsx | 19 - .../DocumentationView/ReadmeTab.tsx | 140 ----- .../DocumentationView/RoadmapItem.tsx | 27 - .../DocumentationView/RoadmapTab.tsx | 57 -- .../DocumentationView/SassAnimationsCard.tsx | 21 - .../SassBestPracticesCard.tsx | 26 - .../DocumentationView/SassComponentsCard.tsx | 26 - .../SassFileStructureCard.tsx | 20 - .../DocumentationView/SassItems.tsx | 22 - .../DocumentationView/SassLayoutCard.tsx | 25 - .../DocumentationView/SassOverviewSection.tsx | 26 - .../DocumentationView/SassQuickStartCard.tsx | 30 - src/components/DocumentationView/SassTab.tsx | 23 - .../DocumentationView/SassUtilitiesCard.tsx | 33 -- .../useDocumentationViewState.ts | 18 - .../json-definitions/conflict-card.json | 545 +++++++++++++++++- .../json-definitions/documentation-view.json | 89 +++ src/hooks/index.ts | 3 + src/hooks/use-documentation-view.ts | 28 + src/lib/json-ui/hooks-registry.ts | 2 + .../json-ui/interfaces/documentation-view.ts | 4 + src/lib/json-ui/interfaces/index.ts | 1 + src/lib/json-ui/json-components.ts | 23 +- 53 files changed, 697 insertions(+), 1414 deletions(-) delete mode 100644 src/components/DocumentationView.tsx delete mode 100644 src/components/DocumentationView/AIFeatureCard.tsx delete mode 100644 src/components/DocumentationView/AgentItems.tsx delete mode 100644 src/components/DocumentationView/AgentsCoreServices.tsx delete mode 100644 src/components/DocumentationView/AgentsFutureEnhancements.tsx delete mode 100644 src/components/DocumentationView/AgentsIntegrationPoints.tsx delete mode 100644 src/components/DocumentationView/AgentsOverviewSection.tsx delete mode 100644 src/components/DocumentationView/AgentsPromptEngineering.tsx delete mode 100644 src/components/DocumentationView/AgentsTab.tsx delete mode 100644 src/components/DocumentationView/CicdBestPracticesCard.tsx delete mode 100644 src/components/DocumentationView/CicdBranchStrategySection.tsx delete mode 100644 src/components/DocumentationView/CicdDockerCard.tsx delete mode 100644 src/components/DocumentationView/CicdEnvVarsCard.tsx delete mode 100644 src/components/DocumentationView/CicdItems.tsx delete mode 100644 src/components/DocumentationView/CicdOverviewSection.tsx delete mode 100644 src/components/DocumentationView/CicdPipelineSection.tsx delete mode 100644 src/components/DocumentationView/CicdPlatformsCard.tsx delete mode 100644 src/components/DocumentationView/CicdQuickStartCard.tsx delete mode 100644 src/components/DocumentationView/CicdResourcesCard.tsx delete mode 100644 src/components/DocumentationView/CicdTab.tsx delete mode 100644 src/components/DocumentationView/FeatureItem.tsx delete mode 100644 src/components/DocumentationView/FeatureItems.tsx delete mode 100644 src/components/DocumentationView/PwaFeaturesCard.tsx delete mode 100644 src/components/DocumentationView/PwaInstallationSection.tsx delete mode 100644 src/components/DocumentationView/PwaOfflineSection.tsx delete mode 100644 src/components/DocumentationView/PwaOverviewSection.tsx delete mode 100644 src/components/DocumentationView/PwaProTipsCard.tsx delete mode 100644 src/components/DocumentationView/PwaSettingsCard.tsx delete mode 100644 src/components/DocumentationView/PwaTab.tsx delete mode 100644 src/components/DocumentationView/ReadmeTab.tsx delete mode 100644 src/components/DocumentationView/RoadmapItem.tsx delete mode 100644 src/components/DocumentationView/RoadmapTab.tsx delete mode 100644 src/components/DocumentationView/SassAnimationsCard.tsx delete mode 100644 src/components/DocumentationView/SassBestPracticesCard.tsx delete mode 100644 src/components/DocumentationView/SassComponentsCard.tsx delete mode 100644 src/components/DocumentationView/SassFileStructureCard.tsx delete mode 100644 src/components/DocumentationView/SassItems.tsx delete mode 100644 src/components/DocumentationView/SassLayoutCard.tsx delete mode 100644 src/components/DocumentationView/SassOverviewSection.tsx delete mode 100644 src/components/DocumentationView/SassQuickStartCard.tsx delete mode 100644 src/components/DocumentationView/SassTab.tsx delete mode 100644 src/components/DocumentationView/SassUtilitiesCard.tsx delete mode 100644 src/components/DocumentationView/useDocumentationViewState.ts create mode 100644 src/components/json-definitions/documentation-view.json create mode 100644 src/hooks/use-documentation-view.ts create mode 100644 src/lib/json-ui/interfaces/documentation-view.ts diff --git a/audit-report.json b/audit-report.json index a0b8241..d19930b 100644 --- a/audit-report.json +++ b/audit-report.json @@ -1,9 +1,9 @@ { - "timestamp": "2026-01-21T05:02:36.947Z", + "timestamp": "2026-01-21T05:03:24.842Z", "issues": [], "stats": { "totalJsonFiles": 337, - "totalTsxFiles": 412, + "totalTsxFiles": 411, "registryEntries": 402, "orphanedJson": 0, "duplicates": 0, diff --git a/json-components-registry.json b/json-components-registry.json index e517f3e..36f7f10 100644 --- a/json-components-registry.json +++ b/json-components-registry.json @@ -1412,13 +1412,14 @@ "description": "Display component", "status": "supported", "source": "custom", - "jsonCompatible": false, + "jsonCompatible": true, "metadata": { - "conversionDate": "2026-01-18", - "autoGenerated": true + "conversionDate": "2026-01-21", + "phase": "Batch C migration", + "autoGenerated": false }, "load": { - "path": "@/components/DocumentationView", + "path": "@/lib/json-ui/json-components", "export": "DocumentationView" } }, diff --git a/src/components/DocumentationView.tsx b/src/components/DocumentationView.tsx deleted file mode 100644 index f2b8a05..0000000 --- a/src/components/DocumentationView.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' -import { ScrollArea } from '@/components/ui/scroll-area' -import { Input } from '@/components/ui/input' -import { BookOpen, GitBranch, MagnifyingGlass, MapPin, Sparkle, PaintBrush, Rocket } from '@phosphor-icons/react' -import { AgentsTab } from './DocumentationView/AgentsTab' -import { CicdTab } from './DocumentationView/CicdTab' -import { PwaTab } from './DocumentationView/PwaTab' -import { ReadmeTab } from './DocumentationView/ReadmeTab' -import { RoadmapTab } from './DocumentationView/RoadmapTab' -import { SassTab } from './DocumentationView/SassTab' -import { useDocumentationViewState } from './DocumentationView/useDocumentationViewState' - -const tabs = [ - { value: 'readme', label: 'README', icon: }, - { value: 'roadmap', label: 'Roadmap', icon: }, - { value: 'agents', label: 'Agents', icon: }, - { value: 'pwa', label: 'PWA', icon: }, - { value: 'sass', label: 'Sass', icon: }, - { value: 'cicd', label: 'CI/CD', icon: } -] - -export function DocumentationView() { - const { activeTab, setActiveTab, searchQuery, handleSearchChange } = useDocumentationViewState() - - return ( -
- -
- - {tabs.map((tab) => ( - - {tab.icon} - {tab.label} - - ))} - -
- - -
-
- - -
- - - - - - - - - - - - - - - - - - -
- - -
- ) -} diff --git a/src/components/DocumentationView/AIFeatureCard.tsx b/src/components/DocumentationView/AIFeatureCard.tsx deleted file mode 100644 index 3cfc368..0000000 --- a/src/components/DocumentationView/AIFeatureCard.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Card, CardContent } from '@/components/ui/card' -import { Sparkle } from '@phosphor-icons/react' - -export function AIFeatureCard({ title, description }: { title: string; description: string }) { - return ( - - -
- -
-

{title}

-

{description}

-
-
- - - ) -} diff --git a/src/components/DocumentationView/AgentItems.tsx b/src/components/DocumentationView/AgentItems.tsx deleted file mode 100644 index 62a4053..0000000 --- a/src/components/DocumentationView/AgentItems.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { FileCode, CheckCircle, Sparkle } from '@phosphor-icons/react' - -export function AgentFileItem({ filename, path, description, features, featureLabel }: { - filename: string - path: string - description: string - features: string[] - featureLabel: string -}) { - return ( -
-
-
- - {filename} -
-

{path}

-

{description}

-
-
-

{featureLabel}

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

- - {component} -

-
    - {capabilities.map((capability) => ( -
  • - • - {capability} -
    • - ))} -
-
- ) -} diff --git a/src/components/DocumentationView/AgentsCoreServices.tsx b/src/components/DocumentationView/AgentsCoreServices.tsx deleted file mode 100644 index 42f3bf3..0000000 --- a/src/components/DocumentationView/AgentsCoreServices.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' -import agentsData from '@/data/documentation/agents-data.json' -import { AgentFileItem } from './AgentItems' - -export function AgentsCoreServices() { - return ( - - - {agentsData.coreServicesTitle} - {agentsData.coreServicesDescription} - - - {agentsData.coreServices.map((service) => ( - - ))} - - - ) -} diff --git a/src/components/DocumentationView/AgentsFutureEnhancements.tsx b/src/components/DocumentationView/AgentsFutureEnhancements.tsx deleted file mode 100644 index e7c4d63..0000000 --- a/src/components/DocumentationView/AgentsFutureEnhancements.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' -import { Target, Package } from '@phosphor-icons/react' -import agentsData from '@/data/documentation/agents-data.json' - -export function AgentsFutureEnhancements() { - return ( - - - - - {agentsData.futureEnhancementsTitle} - - - -
    - {agentsData.futureEnhancements.map((item) => ( -
  • - - - {item.title}: {item.description} - -
    • - ))} -
- - - ) -} diff --git a/src/components/DocumentationView/AgentsIntegrationPoints.tsx b/src/components/DocumentationView/AgentsIntegrationPoints.tsx deleted file mode 100644 index 0186164..0000000 --- a/src/components/DocumentationView/AgentsIntegrationPoints.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' -import agentsData from '@/data/documentation/agents-data.json' -import { IntegrationPoint } from './AgentItems' - -export function AgentsIntegrationPoints() { - return ( - - - {agentsData.integrationPointsTitle} - {agentsData.integrationPointsDescription} - - -
- {agentsData.integrationPoints.map((point) => ( - - ))} -
- - - ) -} diff --git a/src/components/DocumentationView/AgentsOverviewSection.tsx b/src/components/DocumentationView/AgentsOverviewSection.tsx deleted file mode 100644 index 945bd03..0000000 --- a/src/components/DocumentationView/AgentsOverviewSection.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Separator } from '@/components/ui/separator' -import { FileCode } from '@phosphor-icons/react' -import agentsData from '@/data/documentation/agents-data.json' - -export function AgentsOverviewSection() { - return ( -
-

- - {agentsData.title} -

-

{agentsData.subtitle}

- - - -
-

{agentsData.overviewTitle}

-

{agentsData.overview}

-
-
- ) -} diff --git a/src/components/DocumentationView/AgentsPromptEngineering.tsx b/src/components/DocumentationView/AgentsPromptEngineering.tsx deleted file mode 100644 index d8789ea..0000000 --- a/src/components/DocumentationView/AgentsPromptEngineering.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' -import agentsData from '@/data/documentation/agents-data.json' - -export function AgentsPromptEngineering() { - return ( - - - {agentsData.promptEngineeringTitle} - {agentsData.promptEngineeringDescription} - - - {agentsData.promptEngineering.map((item) => ( -
-

{item.title}

-

{item.description}

-
- ))} - - - ) -} diff --git a/src/components/DocumentationView/AgentsTab.tsx b/src/components/DocumentationView/AgentsTab.tsx deleted file mode 100644 index 5483f2e..0000000 --- a/src/components/DocumentationView/AgentsTab.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { AgentsCoreServices } from './AgentsCoreServices' -import { AgentsFutureEnhancements } from './AgentsFutureEnhancements' -import { AgentsIntegrationPoints } from './AgentsIntegrationPoints' -import { AgentsOverviewSection } from './AgentsOverviewSection' -import { AgentsPromptEngineering } from './AgentsPromptEngineering' - -export function AgentsTab() { - return ( -
- -
- - - - -
-
- ) -} diff --git a/src/components/DocumentationView/CicdBestPracticesCard.tsx b/src/components/DocumentationView/CicdBestPracticesCard.tsx deleted file mode 100644 index 10d6dd1..0000000 --- a/src/components/DocumentationView/CicdBestPracticesCard.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' -import { CheckCircle, Rocket } from '@phosphor-icons/react' -import cicdData from '@/data/documentation/cicd-data.json' - -export function CicdBestPracticesCard() { - return ( - - - - - {cicdData.bestPracticesTitle} - - - -
    - {cicdData.bestPractices.map((practice) => ( -
  • - - {practice} -
    • - ))} -
- - - ) -} diff --git a/src/components/DocumentationView/CicdBranchStrategySection.tsx b/src/components/DocumentationView/CicdBranchStrategySection.tsx deleted file mode 100644 index 97ea116..0000000 --- a/src/components/DocumentationView/CicdBranchStrategySection.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { Card, CardContent } from '@/components/ui/card' -import { GitBranch } from '@phosphor-icons/react' -import cicdData from '@/data/documentation/cicd-data.json' - -const toneStyles = { - green: { - card: 'bg-green-500/5 border-green-500/20', - icon: 'text-green-500' - }, - blue: { - card: 'bg-blue-500/5 border-blue-500/20', - icon: 'text-blue-500' - }, - purple: { - card: 'bg-purple-500/5 border-purple-500/20', - icon: 'text-purple-500' - }, - orange: { - card: 'bg-orange-500/5 border-orange-500/20', - icon: 'text-orange-500' - } -} as const - -export function CicdBranchStrategySection() { - return ( -
-

{cicdData.branchStrategyTitle}

-
- {cicdData.branches.map((branch) => { - const styles = toneStyles[branch.tone] - return ( - - -
- -
-

{branch.name}

-

{branch.description}

-
-
- - - ) - })} -
-
- ) -} diff --git a/src/components/DocumentationView/CicdDockerCard.tsx b/src/components/DocumentationView/CicdDockerCard.tsx deleted file mode 100644 index e04b071..0000000 --- a/src/components/DocumentationView/CicdDockerCard.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' -import { Separator } from '@/components/ui/separator' -import { CheckCircle } from '@phosphor-icons/react' -import cicdData from '@/data/documentation/cicd-data.json' - -export function CicdDockerCard() { - return ( - - - {cicdData.dockerTitle} - {cicdData.dockerDescription} - - -
-

{cicdData.dockerFilesTitle}

-
- {cicdData.docker.files.map((file) => ( -
- {file.name} -

{file.description}

-
- ))} -
-
- - - -
-

{cicdData.dockerCommandsTitle}

- 
{cicdData.docker.commands}
-
- - - -
-

{cicdData.dockerFeaturesTitle}

-
    - {cicdData.docker.features.map((feature) => ( -
  • - - {feature} -
    • - ))} -
-
- - - ) -} diff --git a/src/components/DocumentationView/CicdEnvVarsCard.tsx b/src/components/DocumentationView/CicdEnvVarsCard.tsx deleted file mode 100644 index 8c8f887..0000000 --- a/src/components/DocumentationView/CicdEnvVarsCard.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' -import cicdData from '@/data/documentation/cicd-data.json' - -export function CicdEnvVarsCard() { - return ( - - - {cicdData.envVarsTitle} - {cicdData.envVarsDescription} - - -
-
- - - - {cicdData.envVarsColumns.map((column) => ( - - ))} - - - - {cicdData.environmentVariables.map((variable) => ( - - - - - - ))} - -
{column}
- {variable.variable} - {variable.description}{variable.required}
-
-
- - - ) -} diff --git a/src/components/DocumentationView/CicdItems.tsx b/src/components/DocumentationView/CicdItems.tsx deleted file mode 100644 index 630643c..0000000 --- a/src/components/DocumentationView/CicdItems.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { Badge } from '@/components/ui/badge' -import { Card, CardContent } from '@/components/ui/card' -import { CheckCircle, GitBranch } from '@phosphor-icons/react' - -export function CICDPlatformItem({ name, file, description, features, featureLabel }: { - name: string - file: string - description: string - features: string[] - featureLabel: string -}) { - return ( -
-
-
- -

{name}

-
- {file} -

{description}

-
-
-

{featureLabel}

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

{stage}

-

{description}

-
- - {duration} - -
- - - ) -} diff --git a/src/components/DocumentationView/CicdOverviewSection.tsx b/src/components/DocumentationView/CicdOverviewSection.tsx deleted file mode 100644 index 5ac7856..0000000 --- a/src/components/DocumentationView/CicdOverviewSection.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Separator } from '@/components/ui/separator' -import { GitBranch } from '@phosphor-icons/react' -import cicdData from '@/data/documentation/cicd-data.json' - -export function CicdOverviewSection() { - return ( -
-
-
- -
-
-

{cicdData.title}

-

{cicdData.subtitle}

-
-
- - - -
-

{cicdData.overviewTitle}

-

{cicdData.overview}

-
-
- ) -} diff --git a/src/components/DocumentationView/CicdPipelineSection.tsx b/src/components/DocumentationView/CicdPipelineSection.tsx deleted file mode 100644 index 557982a..0000000 --- a/src/components/DocumentationView/CicdPipelineSection.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import cicdData from '@/data/documentation/cicd-data.json' -import { PipelineStageCard } from './CicdItems' - -export function CicdPipelineSection() { - return ( -
-

{cicdData.pipelineTitle}

-

{cicdData.pipeline.intro}

-
- {cicdData.pipeline.stages.map((stage) => ( - - ))} -
-
- ) -} diff --git a/src/components/DocumentationView/CicdPlatformsCard.tsx b/src/components/DocumentationView/CicdPlatformsCard.tsx deleted file mode 100644 index 0d4d89f..0000000 --- a/src/components/DocumentationView/CicdPlatformsCard.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' -import cicdData from '@/data/documentation/cicd-data.json' -import { CICDPlatformItem } from './CicdItems' - -export function CicdPlatformsCard() { - return ( - - - {cicdData.platformsTitle} - - - {cicdData.platforms.map((platform) => ( - - ))} - - - ) -} diff --git a/src/components/DocumentationView/CicdQuickStartCard.tsx b/src/components/DocumentationView/CicdQuickStartCard.tsx deleted file mode 100644 index 305b631..0000000 --- a/src/components/DocumentationView/CicdQuickStartCard.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' -import { Lightbulb } from '@phosphor-icons/react' -import cicdData from '@/data/documentation/cicd-data.json' - -export function CicdQuickStartCard() { - return ( - - - - - {cicdData.quickStartTitle} - - - -
- {cicdData.quickStart.map((step) => ( -
-

- - {step.step} - - {step.title} -

-

{step.description}

-
- ))} -
- - - ) -} diff --git a/src/components/DocumentationView/CicdResourcesCard.tsx b/src/components/DocumentationView/CicdResourcesCard.tsx deleted file mode 100644 index e039083..0000000 --- a/src/components/DocumentationView/CicdResourcesCard.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' -import { FileCode, Package } from '@phosphor-icons/react' -import cicdData from '@/data/documentation/cicd-data.json' - -export function CicdResourcesCard() { - return ( - - - - - {cicdData.resourcesTitle} - - - -
    - {cicdData.resources.map((resource) => ( -
  • - - - {resource.label} - {resource.description} - -
    • - ))} -
- - - ) -} diff --git a/src/components/DocumentationView/CicdTab.tsx b/src/components/DocumentationView/CicdTab.tsx deleted file mode 100644 index 56bc1be..0000000 --- a/src/components/DocumentationView/CicdTab.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { CicdBestPracticesCard } from './CicdBestPracticesCard' -import { CicdBranchStrategySection } from './CicdBranchStrategySection' -import { CicdDockerCard } from './CicdDockerCard' -import { CicdEnvVarsCard } from './CicdEnvVarsCard' -import { CicdOverviewSection } from './CicdOverviewSection' -import { CicdPipelineSection } from './CicdPipelineSection' -import { CicdPlatformsCard } from './CicdPlatformsCard' -import { CicdQuickStartCard } from './CicdQuickStartCard' -import { CicdResourcesCard } from './CicdResourcesCard' - -export function CicdTab() { - return ( -
- - - - - - - - - -
- ) -} diff --git a/src/components/DocumentationView/FeatureItem.tsx b/src/components/DocumentationView/FeatureItem.tsx deleted file mode 100644 index 74368fa..0000000 --- a/src/components/DocumentationView/FeatureItem.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { ReactNode } from 'react' - -export function FeatureItem({ icon, title, description }: { icon: ReactNode; title: string; description: string }) { - return ( -
-
{icon}
-
-

{title}

-

{description}

-
-
- ) -} diff --git a/src/components/DocumentationView/FeatureItems.tsx b/src/components/DocumentationView/FeatureItems.tsx deleted file mode 100644 index 7558160..0000000 --- a/src/components/DocumentationView/FeatureItems.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Card, CardContent } from '@/components/ui/card' -import { 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}

-
-
- - - ) -} diff --git a/src/components/DocumentationView/PwaFeaturesCard.tsx b/src/components/DocumentationView/PwaFeaturesCard.tsx deleted file mode 100644 index 8bf34e1..0000000 --- a/src/components/DocumentationView/PwaFeaturesCard.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' -import { CheckCircle } from '@phosphor-icons/react' -import pwaData from '@/data/documentation/pwa-data.json' - -export function PwaFeaturesCard() { - return ( - - - {pwaData.featuresTitle} - {pwaData.featuresDescription} - - - {pwaData.features.map((feature) => ( -
-
- - {feature.title} -
-

{feature.description}

-
- ))} - - - ) -} diff --git a/src/components/DocumentationView/PwaInstallationSection.tsx b/src/components/DocumentationView/PwaInstallationSection.tsx deleted file mode 100644 index 7901490..0000000 --- a/src/components/DocumentationView/PwaInstallationSection.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' -import pwaData from '@/data/documentation/pwa-data.json' - -function InstallationCard({ title, items }: { title: string; items: { title: string; steps: string[] }[] }) { - return ( - - - {title} - - - {items.map((item) => ( -
-
{item.title}
-
    - {item.steps.map((step) => ( -
  1. {step}
    2. - ))} -
-
- ))} - - - ) -} - -export function PwaInstallationSection() { - return ( -
-

{pwaData.installationTitle}

-
- - -
-
- ) -} diff --git a/src/components/DocumentationView/PwaOfflineSection.tsx b/src/components/DocumentationView/PwaOfflineSection.tsx deleted file mode 100644 index ecc6705..0000000 --- a/src/components/DocumentationView/PwaOfflineSection.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' -import { CheckCircle, Wrench } from '@phosphor-icons/react' -import pwaData from '@/data/documentation/pwa-data.json' - -function OfflineList({ items, accent }: { items: string[]; accent: boolean }) { - return ( -
    - {items.map((item) => ( -
  • - • - {item} -
    • - ))} -
- ) -} - -export function PwaOfflineSection() { - return ( -
-

{pwaData.offlineTitle}

- -
- - - - - {pwaData.offlineWorksTitle} - - - - - - - - - - - - {pwaData.offlineRequiresTitle} - - - - - - -
-
- ) -} diff --git a/src/components/DocumentationView/PwaOverviewSection.tsx b/src/components/DocumentationView/PwaOverviewSection.tsx deleted file mode 100644 index 7daf495..0000000 --- a/src/components/DocumentationView/PwaOverviewSection.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Separator } from '@/components/ui/separator' -import { Rocket } from '@phosphor-icons/react' -import pwaData from '@/data/documentation/pwa-data.json' - -export function PwaOverviewSection() { - return ( -
-
-
- -
-
-

{pwaData.title}

-

{pwaData.subtitle}

-
-
- - - -
-

{pwaData.overviewTitle}

-

{pwaData.overview}

-
-
- ) -} diff --git a/src/components/DocumentationView/PwaProTipsCard.tsx b/src/components/DocumentationView/PwaProTipsCard.tsx deleted file mode 100644 index 3e09d26..0000000 --- a/src/components/DocumentationView/PwaProTipsCard.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' -import { Lightbulb } from '@phosphor-icons/react' -import pwaData from '@/data/documentation/pwa-data.json' - -export function PwaProTipsCard() { - return ( - - - - - {pwaData.proTipsTitle} - - - -
    - {pwaData.proTips.map((tip) => ( -
  • - • - - {tip.title}: {tip.description} - -
    • - ))} -
- - - ) -} diff --git a/src/components/DocumentationView/PwaSettingsCard.tsx b/src/components/DocumentationView/PwaSettingsCard.tsx deleted file mode 100644 index 4710271..0000000 --- a/src/components/DocumentationView/PwaSettingsCard.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' -import { Separator } from '@/components/ui/separator' -import pwaData from '@/data/documentation/pwa-data.json' - -export function PwaSettingsCard() { - return ( -
-

{pwaData.settingsTitle}

-

{pwaData.settingsDescription}

- - - - {pwaData.settingsCardTitle} - - - {pwaData.settings.map((setting, index) => ( -
-
{setting.title}
-

{setting.description}

- {index < pwaData.settings.length - 1 && } -
- ))} - - -
- ) -} diff --git a/src/components/DocumentationView/PwaTab.tsx b/src/components/DocumentationView/PwaTab.tsx deleted file mode 100644 index 0ce98c8..0000000 --- a/src/components/DocumentationView/PwaTab.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { PwaFeaturesCard } from './PwaFeaturesCard' -import { PwaInstallationSection } from './PwaInstallationSection' -import { PwaOfflineSection } from './PwaOfflineSection' -import { PwaOverviewSection } from './PwaOverviewSection' -import { PwaProTipsCard } from './PwaProTipsCard' -import { PwaSettingsCard } from './PwaSettingsCard' - -export function PwaTab() { - return ( -
- - - - - - -
- ) -} diff --git a/src/components/DocumentationView/ReadmeTab.tsx b/src/components/DocumentationView/ReadmeTab.tsx deleted file mode 100644 index 572c2d0..0000000 --- a/src/components/DocumentationView/ReadmeTab.tsx +++ /dev/null @@ -1,140 +0,0 @@ -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' -import { Separator } from '@/components/ui/separator' -import { Code, Database, Tree, PaintBrush, Flask, Play, Cube, Wrench, Gear, Rocket, Lightbulb, CheckCircle } from '@phosphor-icons/react' -import { AIFeatureCard } from './AIFeatureCard' -import { FeatureItem } from './FeatureItem' -import readmeData from '@/data/documentation/readme-data.json' - -const Sparkle = ({ size }: { size: number }) => ✨ - -const iconMap: Record = { - Code, Database, Tree, PaintBrush, Flask, Play, Cube, Wrench, Gear, Sparkle -} - -export function ReadmeTab() { - return ( -
-
-
-
- -
-
-

{readmeData.title}

-

{readmeData.subtitle}

-
-
- - - -
-

{readmeData.sections.overviewTitle}

-

{readmeData.overview}

-
- - - - - - {readmeData.sections.featuresTitle} - - - - {readmeData.features.map((feature, idx) => { - const Icon = iconMap[feature.icon] || Code - return ( - } - title={feature.title} - description={feature.description} - /> - ) - })} - - - -
-

{readmeData.sections.gettingStartedTitle}

- - - {readmeData.gettingStarted.map((step) => ( -
-

- - {step.step} - - {step.title} -

-

{step.description}

-
- ))} - - -
- -
-

{readmeData.sections.aiFeaturesTitle}

-

- {readmeData.sections.aiFeaturesDescription} -

-
- {readmeData.aiFeatures.map((feature, idx) => ( - - ))} -
-
- -
-

{readmeData.sections.techStackTitle}

-
- - - {readmeData.sections.techStackFrontendTitle} - - -
    - {readmeData.techStack.frontend.map((tech, idx) => ( -
  • - - {tech} -
    • - ))} -
- - - - - {readmeData.sections.techStackBackendTitle} - - -
    - {readmeData.techStack.backend.map((tech, idx) => ( -
  • - - {tech} -
    • - ))} -
- - -
-
- - - - - - {readmeData.sections.proTipsTitle} - - - - {readmeData.proTips.map((tip, idx) => ( -

{tip}

- ))} - - -
-
- ) -} diff --git a/src/components/DocumentationView/RoadmapItem.tsx b/src/components/DocumentationView/RoadmapItem.tsx deleted file mode 100644 index b163df6..0000000 --- a/src/components/DocumentationView/RoadmapItem.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { Card, CardContent } from '@/components/ui/card' -import { Badge } from '@/components/ui/badge' - -export function RoadmapItem({ status, title, description, version }: { - status: 'completed' | 'planned' - title: string - description: string - version: string -}) { - return ( - - -
-
-
-

{title}

- - {version} - -
-

{description}

-
-
- - - ) -} diff --git a/src/components/DocumentationView/RoadmapTab.tsx b/src/components/DocumentationView/RoadmapTab.tsx deleted file mode 100644 index 1116773..0000000 --- a/src/components/DocumentationView/RoadmapTab.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { Separator } from '@/components/ui/separator' -import { CheckCircle, Clock, MapPin } from '@phosphor-icons/react' -import roadmapData from '@/data/documentation/roadmap-data.json' -import { RoadmapItem } from './RoadmapItem' - -const sections = [ - { - key: 'completed', - title: roadmapData.sections.completedTitle, - icon: , - items: roadmapData.completed - }, - { - key: 'planned', - title: roadmapData.sections.plannedTitle, - icon: , - items: roadmapData.planned - } -] - -export function RoadmapTab() { - return ( -
-
-

- - {roadmapData.title} -

-

{roadmapData.subtitle}

- - - -
- {sections.map((section) => ( -
-
- {section.icon} -

{section.title}

-
-
- {section.items.map((item) => ( - - ))} -
-
- ))} -
-
-
- ) -} diff --git a/src/components/DocumentationView/SassAnimationsCard.tsx b/src/components/DocumentationView/SassAnimationsCard.tsx deleted file mode 100644 index 0a45934..0000000 --- a/src/components/DocumentationView/SassAnimationsCard.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' -import sassData from '@/data/documentation/sass-data.json' -import { AnimationItem } from './SassItems' - -export function SassAnimationsCard() { - return ( - - - {sassData.animationsTitle} - {sassData.animationsDescription} - - -
- {sassData.animations.map((animation) => ( - - ))} -
- - - ) -} diff --git a/src/components/DocumentationView/SassBestPracticesCard.tsx b/src/components/DocumentationView/SassBestPracticesCard.tsx deleted file mode 100644 index b14a629..0000000 --- a/src/components/DocumentationView/SassBestPracticesCard.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' -import { CheckCircle, Target } from '@phosphor-icons/react' -import sassData from '@/data/documentation/sass-data.json' - -export function SassBestPracticesCard() { - return ( - - - - - {sassData.bestPracticesTitle} - - - -
    - {sassData.bestPractices.map((practice) => ( -
  • - - {practice} -
    • - ))} -
- - - ) -} diff --git a/src/components/DocumentationView/SassComponentsCard.tsx b/src/components/DocumentationView/SassComponentsCard.tsx deleted file mode 100644 index 986ecda..0000000 --- a/src/components/DocumentationView/SassComponentsCard.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' -import sassData from '@/data/documentation/sass-data.json' -import { SassComponentItem } from './SassItems' - -export function SassComponentsCard() { - return ( - - - {sassData.componentsTitle} - {sassData.componentsDescription} - - -
- {sassData.components.map((component) => ( - - ))} -
- - - ) -} diff --git a/src/components/DocumentationView/SassFileStructureCard.tsx b/src/components/DocumentationView/SassFileStructureCard.tsx deleted file mode 100644 index 4d1c6c0..0000000 --- a/src/components/DocumentationView/SassFileStructureCard.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' -import sassData from '@/data/documentation/sass-data.json' - -export function SassFileStructureCard() { - return ( - - - {sassData.fileStructureTitle} - - - {sassData.fileStructure.map((item) => ( -
- {item.file} -

{item.description}

-
- ))} - - - ) -} diff --git a/src/components/DocumentationView/SassItems.tsx b/src/components/DocumentationView/SassItems.tsx deleted file mode 100644 index 7da099a..0000000 --- a/src/components/DocumentationView/SassItems.tsx +++ /dev/null @@ -1,22 +0,0 @@ -export function SassComponentItem({ name, classes, description }: { name: string; classes: string[]; description: string }) { - return ( -
-

{name}

-

{description}

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

{description}

-
- ) -} diff --git a/src/components/DocumentationView/SassLayoutCard.tsx b/src/components/DocumentationView/SassLayoutCard.tsx deleted file mode 100644 index 9cb1dcf..0000000 --- a/src/components/DocumentationView/SassLayoutCard.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' -import { Code } from '@phosphor-icons/react' -import sassData from '@/data/documentation/sass-data.json' -import { FeatureItem } from './FeatureItems' - -export function SassLayoutCard() { - return ( - - - {sassData.layoutTitle} - {sassData.layoutDescription} - - - {sassData.layoutComponents.map((item) => ( - } - title={item.title} - description={item.description} - /> - ))} - - - ) -} diff --git a/src/components/DocumentationView/SassOverviewSection.tsx b/src/components/DocumentationView/SassOverviewSection.tsx deleted file mode 100644 index 4e46652..0000000 --- a/src/components/DocumentationView/SassOverviewSection.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Separator } from '@/components/ui/separator' -import { PaintBrush } from '@phosphor-icons/react' -import sassData from '@/data/documentation/sass-data.json' - -export function SassOverviewSection() { - return ( -
-
-
- -
-
-

{sassData.title}

-

{sassData.subtitle}

-
-
- - - -
-

{sassData.overviewTitle}

-

{sassData.overview}

-
-
- ) -} diff --git a/src/components/DocumentationView/SassQuickStartCard.tsx b/src/components/DocumentationView/SassQuickStartCard.tsx deleted file mode 100644 index 38c3e8d..0000000 --- a/src/components/DocumentationView/SassQuickStartCard.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' -import { Separator } from '@/components/ui/separator' -import { Rocket } from '@phosphor-icons/react' -import sassData from '@/data/documentation/sass-data.json' - -export function SassQuickStartCard() { - return ( - - - - - {sassData.quickStartTitle} - - - -
-

{sassData.quickStart.components.title}

- 
{sassData.quickStart.components.code}
-
- - - -
-

{sassData.quickStart.mixins.title}

- 
{sassData.quickStart.mixins.code}
-
- - - ) -} diff --git a/src/components/DocumentationView/SassTab.tsx b/src/components/DocumentationView/SassTab.tsx deleted file mode 100644 index 5f0210b..0000000 --- a/src/components/DocumentationView/SassTab.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { SassAnimationsCard } from './SassAnimationsCard' -import { SassBestPracticesCard } from './SassBestPracticesCard' -import { SassComponentsCard } from './SassComponentsCard' -import { SassFileStructureCard } from './SassFileStructureCard' -import { SassLayoutCard } from './SassLayoutCard' -import { SassOverviewSection } from './SassOverviewSection' -import { SassQuickStartCard } from './SassQuickStartCard' -import { SassUtilitiesCard } from './SassUtilitiesCard' - -export function SassTab() { - return ( -
- - - - - - - - -
- ) -} diff --git a/src/components/DocumentationView/SassUtilitiesCard.tsx b/src/components/DocumentationView/SassUtilitiesCard.tsx deleted file mode 100644 index ebc2d2f..0000000 --- a/src/components/DocumentationView/SassUtilitiesCard.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' -import { Separator } from '@/components/ui/separator' -import { Lightbulb } from '@phosphor-icons/react' -import sassData from '@/data/documentation/sass-data.json' - -export function SassUtilitiesCard() { - return ( - - - {sassData.utilitiesTitle} - {sassData.utilitiesDescription} - - -
- {sassData.utilities.map((utility, index) => ( -
-

- - {utility.title} -

-
-

{utility.mixin}

-

{utility.description}

- 
{utility.snippet}
-
- {index < sassData.utilities.length - 1 && } -
- ))} -
- - - ) -} diff --git a/src/components/DocumentationView/useDocumentationViewState.ts b/src/components/DocumentationView/useDocumentationViewState.ts deleted file mode 100644 index 8224155..0000000 --- a/src/components/DocumentationView/useDocumentationViewState.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { useCallback, useState } from 'react' -import type { ChangeEvent } from 'react' - -export function useDocumentationViewState() { - const [activeTab, setActiveTab] = useState('readme') - const [searchQuery, setSearchQuery] = useState('') - - const handleSearchChange = useCallback((event: ChangeEvent) => { - setSearchQuery(event.target.value) - }, []) - - return { - activeTab, - setActiveTab, - searchQuery, - handleSearchChange - } -} diff --git a/src/components/json-definitions/conflict-card.json b/src/components/json-definitions/conflict-card.json index 90d63e1..cb1e78f 100644 --- a/src/components/json-definitions/conflict-card.json +++ b/src/components/json-definitions/conflict-card.json @@ -1,8 +1,545 @@ { - "id": "conflict-card", - "type": "div", + "id": "conflict-card-motion", + "type": "motion.div", "props": { - "className": "conflict-card" + "layout": true, + "initial": { "opacity": 0, "y": 20 }, + "animate": { "opacity": 1, "y": 0 }, + "exit": { "opacity": 0, "x": -100 }, + "transition": { "duration": 0.2 } }, - "children": [] + "children": [ + { + "id": "conflict-card-container", + "type": "Card", + "props": { + "className": "border-destructive/30 hover:border-destructive/50 transition-colors" + }, + "children": [ + { + "id": "conflict-card-header", + "type": "CardHeader", + "props": { + "className": "pb-3" + }, + "children": [ + { + "id": "conflict-card-header-flex", + "type": "div", + "props": { + "className": "flex items-start justify-between gap-4" + }, + "children": [ + { + "id": "conflict-card-header-content", + "type": "div", + "props": { + "className": "flex items-start gap-3 flex-1 min-w-0" + }, + "children": [ + { + "id": "conflict-card-entity-icon", + "type": "div", + "props": { + "className": "mt-0.5" + }, + "children": [ + { + "id": "conflict-icon-code", + "type": "Code", + "conditional": { + "if": "conflict.entityType === 'files'" + }, + "props": { + "size": 20, + "weight": "duotone", + "className": "text-primary" + } + }, + { + "id": "conflict-icon-database", + "type": "Database", + "conditional": { + "if": "conflict.entityType !== 'files'" + }, + "props": { + "size": 20, + "weight": "duotone", + "className": "text-accent" + } + } + ] + }, + { + "id": "conflict-card-info", + "type": "div", + "props": { + "className": "flex-1 min-w-0" + }, + "children": [ + { + "id": "conflict-card-title", + "type": "CardTitle", + "bindings": { + "children": "conflict.id" + }, + "props": { + "className": "text-base font-mono truncate" + } + }, + { + "id": "conflict-card-description", + "type": "CardDescription", + "props": { + "className": "flex items-center gap-2 mt-1" + }, + "children": [ + { + "id": "conflict-entity-badge", + "type": "Badge", + "bindings": { + "children": "conflict.entityType" + }, + "props": { + "variant": "outline", + "className": "text-xs" + } + }, + { + "id": "conflict-time-diff", + "type": "span", + "bindings": { + "children": { + "source": "cardState.timeDiffMinutes", + "transform": "`${data} minutes ago`" + } + }, + "props": { + "className": "text-xs text-muted-foreground" + } + } + ] + } + ] + } + ] + }, + { + "id": "conflict-card-toggle", + "type": "Button", + "bindings": { + "onClick": { + "source": "cardState.setExpanded", + "transform": "(prev) => data(!prev)" + } + }, + "props": { + "size": "sm", + "variant": "ghost" + }, + "children": [ + { + "id": "conflict-card-toggle-icon", + "type": "CaretDown", + "conditional": { + "if": "cardState.expanded" + }, + "props": { + "size": 16 + } + }, + { + "id": "conflict-card-toggle-icon-collapsed", + "type": "CaretRight", + "conditional": { + "if": "!cardState.expanded" + }, + "props": { + "size": 16 + } + } + ] + } + ] + } + ] + }, + { + "id": "conflict-card-content-animation", + "type": "AnimatePresence", + "children": [ + { + "id": "conflict-card-content-motion", + "type": "motion.div", + "conditional": { + "if": "cardState.expanded" + }, + "props": { + "initial": { "height": 0, "opacity": 0 }, + "animate": { "height": "auto", "opacity": 1 }, + "exit": { "height": 0, "opacity": 0 }, + "transition": { "duration": 0.2 } + }, + "children": [ + { + "id": "conflict-card-content", + "type": "CardContent", + "props": { + "className": "space-y-4" + }, + "children": [ + { + "id": "conflict-separator-1", + "type": "Separator" + }, + { + "id": "conflict-versions-grid", + "type": "div", + "props": { + "className": "grid grid-cols-2 gap-4" + }, + "children": [ + { + "id": "conflict-local-version", + "type": "div", + "props": { + "className": "space-y-2" + }, + "children": [ + { + "id": "conflict-local-header", + "type": "div", + "props": { + "className": "flex items-center gap-2" + }, + "children": [ + { + "id": "conflict-local-icon", + "type": "Database", + "props": { + "size": 16, + "className": "text-primary" + } + }, + { + "id": "conflict-local-label", + "type": "h4", + "bindings": { + "children": "conflict.localVersion ? 'Local Version' : 'Local'" + }, + "props": { + "className": "text-sm font-medium" + } + }, + { + "id": "conflict-local-newer-badge", + "type": "Badge", + "conditional": { + "if": "cardState.isLocalNewer" + }, + "props": { + "variant": "secondary", + "className": "text-xs", + "children": "Newer" + } + } + ] + }, + { + "id": "conflict-local-content", + "type": "div", + "props": { + "className": "bg-muted/50 rounded-md p-3 space-y-1" + }, + "children": [ + { + "id": "conflict-local-time", + "type": "div", + "props": { + "className": "flex items-center gap-1.5 text-xs text-muted-foreground" + }, + "children": [ + { + "id": "conflict-local-clock", + "type": "Clock", + "props": { + "size": 12 + } + }, + { + "id": "conflict-local-timestamp", + "type": "span", + "bindings": { + "children": { + "source": "conflict.localTimestamp", + "transform": "new Date(data).toLocaleString()" + } + } + } + ] + }, + { + "id": "conflict-local-json", + "type": "pre", + "bindings": { + "children": { + "source": "conflict.localVersion", + "transform": "JSON.stringify(data, null, 2).slice(0, 200) + '...'" + } + }, + "props": { + "className": "text-xs overflow-hidden text-ellipsis text-primary" + } + } + ] + } + ] + }, + { + "id": "conflict-remote-version", + "type": "div", + "props": { + "className": "space-y-2" + }, + "children": [ + { + "id": "conflict-remote-header", + "type": "div", + "props": { + "className": "flex items-center gap-2" + }, + "children": [ + { + "id": "conflict-remote-icon", + "type": "Cloud", + "props": { + "size": 16, + "className": "text-accent" + } + }, + { + "id": "conflict-remote-label", + "type": "h4", + "bindings": { + "children": "conflict.remoteVersion ? 'Remote Version' : 'Remote'" + }, + "props": { + "className": "text-sm font-medium" + } + }, + { + "id": "conflict-remote-newer-badge", + "type": "Badge", + "conditional": { + "if": "!cardState.isLocalNewer" + }, + "props": { + "variant": "secondary", + "className": "text-xs", + "children": "Newer" + } + } + ] + }, + { + "id": "conflict-remote-content", + "type": "div", + "props": { + "className": "bg-muted/50 rounded-md p-3 space-y-1" + }, + "children": [ + { + "id": "conflict-remote-time", + "type": "div", + "props": { + "className": "flex items-center gap-1.5 text-xs text-muted-foreground" + }, + "children": [ + { + "id": "conflict-remote-clock", + "type": "Clock", + "props": { + "size": 12 + } + }, + { + "id": "conflict-remote-timestamp", + "type": "span", + "bindings": { + "children": { + "source": "conflict.remoteTimestamp", + "transform": "new Date(data).toLocaleString()" + } + } + } + ] + }, + { + "id": "conflict-remote-json", + "type": "pre", + "bindings": { + "children": { + "source": "conflict.remoteVersion", + "transform": "JSON.stringify(data, null, 2).slice(0, 200) + '...'" + } + }, + "props": { + "className": "text-xs overflow-hidden text-ellipsis text-accent" + } + } + ] + } + ] + } + ] + }, + { + "id": "conflict-separator-2", + "type": "Separator" + }, + { + "id": "conflict-actions", + "type": "div", + "props": { + "className": "flex flex-wrap gap-2" + }, + "children": [ + { + "id": "conflict-resolve-local", + "type": "Button", + "bindings": { + "onClick": { + "source": "onResolve", + "transform": "() => data(conflict.id, 'local')" + }, + "disabled": "isResolving" + }, + "props": { + "size": "sm", + "variant": "outline", + "className": "flex-1 min-w-[120px]" + }, + "children": [ + { + "id": "conflict-resolve-local-icon", + "type": "Database", + "props": { + "size": 16 + } + }, + { + "id": "conflict-resolve-local-text", + "type": "span", + "props": { + "children": "Keep Local" + } + } + ] + }, + { + "id": "conflict-resolve-remote", + "type": "Button", + "bindings": { + "onClick": { + "source": "onResolve", + "transform": "() => data(conflict.id, 'remote')" + }, + "disabled": "isResolving" + }, + "props": { + "size": "sm", + "variant": "outline", + "className": "flex-1 min-w-[120px]" + }, + "children": [ + { + "id": "conflict-resolve-remote-icon", + "type": "Cloud", + "props": { + "size": 16 + } + }, + { + "id": "conflict-resolve-remote-text", + "type": "span", + "props": { + "children": "Keep Remote" + } + } + ] + }, + { + "id": "conflict-resolve-merge", + "type": "Button", + "bindings": { + "onClick": { + "source": "onResolve", + "transform": "() => data(conflict.id, 'merge')" + }, + "disabled": "isResolving" + }, + "props": { + "size": "sm", + "variant": "outline", + "className": "flex-1 min-w-[120px]" + }, + "children": [ + { + "id": "conflict-resolve-merge-icon", + "type": "ArrowsLeftRight", + "props": { + "size": 16 + } + }, + { + "id": "conflict-resolve-merge-text", + "type": "span", + "props": { + "children": "Merge Both" + } + } + ] + }, + { + "id": "conflict-resolve-details", + "type": "Button", + "bindings": { + "onClick": { + "source": "onViewDetails", + "transform": "() => data(conflict)" + }, + "disabled": "isResolving" + }, + "props": { + "size": "sm", + "variant": "secondary" + }, + "children": [ + { + "id": "conflict-resolve-details-icon", + "type": "MagnifyingGlass", + "props": { + "size": 16 + } + }, + { + "id": "conflict-resolve-details-text", + "type": "span", + "props": { + "children": "Details" + } + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] } diff --git a/src/components/json-definitions/documentation-view.json b/src/components/json-definitions/documentation-view.json new file mode 100644 index 0000000..613ceb1 --- /dev/null +++ b/src/components/json-definitions/documentation-view.json @@ -0,0 +1,89 @@ +{ + "id": "documentation-view", + "type": "div", + "className": "h-full flex flex-col bg-background", + "children": [ + { + "id": "documentation-tabs", + "type": "Tabs", + "className": "flex-1 flex flex-col", + "bindings": { + "value": { + "source": "activeTab", + "transform": "data" + }, + "onValueChange": { + "source": "setActiveTab", + "transform": "data" + } + }, + "children": [ + { + "id": "documentation-header", + "type": "div", + "className": "border-b border-border bg-card px-6 py-3 space-y-3", + "children": [ + { + "id": "tabs-list", + "type": "TabsList", + "className": "bg-muted/50", + "bindings": { + "children": { + "source": "tabsData", + "transform": "data" + } + } + }, + { + "id": "search-input-wrapper", + "type": "div", + "className": "relative", + "children": [ + { + "id": "search-icon", + "type": "MagnifyingGlass", + "className": "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", + "size": 18 + }, + { + "id": "search-input", + "type": "Input", + "placeholder": "Search documentation...", + "className": "pl-10", + "bindings": { + "value": { + "source": "searchQuery", + "transform": "data" + }, + "onChange": { + "source": "handleSearchChange", + "transform": "data" + } + } + } + ] + } + ] + }, + { + "id": "tabs-content", + "type": "ScrollArea", + "className": "flex-1", + "children": [ + { + "id": "content-wrapper", + "type": "div", + "className": "max-w-5xl mx-auto p-8", + "bindings": { + "children": { + "source": "activeTab", + "transform": "data" + } + } + } + ] + } + ] + } + ] +} diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 157b8ed..621e439 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -43,3 +43,6 @@ export { useAppLayout } from './use-app-layout' export { useAppRouterLayout } from './use-app-router-layout' export { useNavigationMenu } from './use-navigation-menu' export { useDataSourceManagerState } from './use-data-source-manager-state' +export { useConflictResolution } from './use-conflict-resolution' +export { useConflictCard } from './use-conflict-card' +export { useDocumentationView } from './use-documentation-view' diff --git a/src/hooks/use-documentation-view.ts b/src/hooks/use-documentation-view.ts new file mode 100644 index 0000000..7bac178 --- /dev/null +++ b/src/hooks/use-documentation-view.ts @@ -0,0 +1,28 @@ +import { useCallback, useState } from 'react' +import type { ChangeEvent } from 'react' + +const tabs = [ + { value: 'readme', label: 'README', icon: 'BookOpen' }, + { value: 'roadmap', label: 'Roadmap', icon: 'MapPin' }, + { value: 'agents', label: 'Agents', icon: 'Sparkle' }, + { value: 'pwa', label: 'PWA', icon: 'Rocket' }, + { value: 'sass', label: 'Sass', icon: 'PaintBrush' }, + { value: 'cicd', label: 'CI/CD', icon: 'GitBranch' } +] + +export function useDocumentationView() { + const [activeTab, setActiveTab] = useState('readme') + const [searchQuery, setSearchQuery] = useState('') + + const handleSearchChange = useCallback((event: ChangeEvent) => { + setSearchQuery(event.target.value) + }, []) + + return { + activeTab, + setActiveTab, + searchQuery, + handleSearchChange, + tabsData: tabs, + } +} diff --git a/src/lib/json-ui/hooks-registry.ts b/src/lib/json-ui/hooks-registry.ts index 179a057..ed23fc8 100644 --- a/src/lib/json-ui/hooks-registry.ts +++ b/src/lib/json-ui/hooks-registry.ts @@ -23,6 +23,7 @@ import { useDataSourceManagerState } from '@/hooks/use-data-source-manager-state import { useFormatValue } from '@/hooks/use-format-value' import { useConflictResolution } from '@/hooks/use-conflict-resolution' import { useConflictCard } from '@/hooks/use-conflict-card' +import { useDocumentationView } from '@/hooks/use-documentation-view' export interface HookRegistry { [key: string]: (...args: any[]) => any @@ -53,6 +54,7 @@ export const hooksRegistry: HookRegistry = { useFormatValue, useConflictResolution, useConflictCard, + useDocumentationView, // Add more hooks here as needed } diff --git a/src/lib/json-ui/interfaces/documentation-view.ts b/src/lib/json-ui/interfaces/documentation-view.ts new file mode 100644 index 0000000..a9679a6 --- /dev/null +++ b/src/lib/json-ui/interfaces/documentation-view.ts @@ -0,0 +1,4 @@ +export interface DocumentationViewProps { + // This component is stateful and uses useDocumentationViewState hook + // No props required - all state is managed internally +} diff --git a/src/lib/json-ui/interfaces/index.ts b/src/lib/json-ui/interfaces/index.ts index 822b993..6285625 100644 --- a/src/lib/json-ui/interfaces/index.ts +++ b/src/lib/json-ui/interfaces/index.ts @@ -231,3 +231,4 @@ export * from './template-explorer' export * from './project-manager' export * from './storage-settings-panel' export * from './feature-toggle-settings' +export * from './documentation-view' diff --git a/src/lib/json-ui/json-components.ts b/src/lib/json-ui/json-components.ts index 501af86..316c0d1 100644 --- a/src/lib/json-ui/json-components.ts +++ b/src/lib/json-ui/json-components.ts @@ -250,6 +250,7 @@ import type { ProjectManagerProps, StorageSettingsPanelProps, FeatureToggleSettingsProps, + DocumentationViewProps, } from './interfaces' // Import JSON definitions @@ -497,6 +498,7 @@ import templateExplorerDef from '@/components/json-definitions/template-explorer import projectManagerDef from '@/components/json-definitions/project-manager.json' import storageSettingsPanelDef from '@/components/json-definitions/storage-settings-panel.json' import featureToggleSettingsDef from '@/components/json-definitions/feature-toggle-settings.json' +import documentationViewDef from '@/components/json-definitions/documentation-view.json' // Create pure JSON components (no hooks) export const BindingIndicator = createJsonComponent(bindingIndicatorDef) @@ -884,7 +886,17 @@ export const PreloadIndicator = createJsonComponent(prelo export const PWAStatusBar = createJsonComponent(pwaStatusBarDef) export const PWAUpdatePrompt = createJsonComponent(pwaUpdatePromptDef) export const PWAInstallPrompt = createJsonComponent(pwaInstallPromptDef) -export const ConflictCard = createJsonComponent(conflictCardDef) +export const ConflictCard = createJsonComponentWithHooks( + conflictCardDef, + { + hooks: { + cardState: { + hookName: 'useConflictCard', + args: (props) => [props.conflict] + } + } + } +) export const ConflictIndicator = createJsonComponentWithHooks( conflictIndicatorDef, { @@ -926,4 +938,13 @@ export const ProjectManager = createJsonComponent(projectMa export const StorageSettingsPanel = createJsonComponent(storageSettingsPanelDef) export const FeatureToggleSettings = createJsonComponent(featureToggleSettingsDef) +export const DocumentationView = createJsonComponentWithHooks(documentationViewDef, { + hooks: { + viewState: { + hookName: 'useDocumentationView', + args: () => [] + } + } +}) + // All components converted to pure JSON! 🎉