git/low-code-react-app-b
1
0
Fork 0
mirror of https://github.com/johndoe6345789/low-code-react-app-b.git synced 2026-04-24 13:44:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor documentation tab content

Browse Source
This commit is contained in:
johndoe6345789
2026-01-18 00:37:45 +00:00
parent 9cb7297f5b
commit 985aabb48d
45 changed files with 150 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/DocumentationView.tsx
View File

@@ -2,25 +2,22 @@ import { useState } from 'react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Input } from '@/components/ui/input'
import {
BookOpen,
FileCode,
GitBranch,
MagnifyingGlass,
GitBranch,
FileCode,
Sparkle,
CheckCircle
} from '@phosphor-icons/react'
import { AIFeatureCard } from './DocumentationView/AIFeatureCard'
import { AgentFileItem } from './DocumentationView/AgentFileItem'
import { AnimationItem } from './DocumentationView/AnimationItem'
import { CICDPlatformItem } from './DocumentationView/CICDPlatformItem'
import { FeatureItem } from './DocumentationView/FeatureItem'
import { IntegrationPoint } from './DocumentationView/IntegrationPoint'
import { PipelineStageCard } from './DocumentationView/PipelineStageCard'
import { RoadmapItem } from './DocumentationView/RoadmapItem'
import { SassComponentItem } from './DocumentationView/SassComponentItem'
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'
const tabs = [
{ value: 'readme', label: 'README', icon: <BookOpen size={16} /> },
{ value: 'roadmap', label: 'Roadmap', icon: <MapPin size={16} /> },
{ value: 'agents', label: 'Agents', icon: <Sparkle size={16} /> },
{ value: 'pwa', label: 'PWA', icon: <Rocket size={16} /> },
{ value: 'sass', label: 'Sass', icon: <PaintBrush size={16} /> },
{ value: 'cicd', label: 'CI/CD', icon: <GitBranch size={16} /> }
]
export function DocumentationView() {
const [activeTab, setActiveTab] = useState('readme')

32
src/components/DocumentationView/AgentFileItem.tsx
View File

@@ -1,32 +0,0 @@
import { FileCode, CheckCircle } from '@phosphor-icons/react'
export function AgentFileItem({ filename, path, description, features }: {
filename: string
path: string
description: string
features: string[]
}) {
return (
<div className="space-y-3 border-l-2 border-accent pl-4">
<div className="space-y-1">
<div className="flex items-center gap-2">
<FileCode size={18} className="text-accent" />
<code className="text-sm font-semibold text-accent">{filename}</code>
</div>
<p className="text-xs text-muted-foreground font-mono">{path}</p>
<p className="text-sm text-foreground/90">{description}</p>
</div>
<div className="space-y-1">
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Key Features:</p>
<ul className="space-y-1">
{features.map((feature, idx) => (
<li key={idx} className="text-sm text-foreground/80 flex items-start gap-2">
<CheckCircle size={14} weight="fill" className="text-accent mt-1 flex-shrink-0" />
<span>{feature}</span>
</li>
))}
</ul>
</div>
</div>
)
}

5
src/components/DocumentationView/AgentItems.tsx
View File

@@ -1,10 +1,11 @@
import { FileCode, CheckCircle, Sparkle } from '@phosphor-icons/react'
export function AgentFileItem({ filename, path, description, features }: {
export function AgentFileItem({ filename, path, description, features, featureLabel }: {
filename: string
path: string
description: string
features: string[]
featureLabel: string
}) {
return (
<div className="space-y-3 border-l-2 border-accent pl-4">
@@ -17,7 +18,7 @@ export function AgentFileItem({ filename, path, description, features }: {
<p className="text-sm text-foreground/90">{description}</p>
</div>
<div className="space-y-1">
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Key Features:</p>
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">{featureLabel}</p>
<ul className="space-y-1">
{features.map((feature) => (
<li key={feature} className="text-sm text-foreground/80 flex items-start gap-2">

5
src/components/DocumentationView/AgentsCoreServices.tsx
View File

@@ -6,13 +6,14 @@ export function AgentsCoreServices() {
return (
<Card>
<CardHeader>
<CardTitle>Core AI Services</CardTitle>
<CardDescription>Primary modules handling AI operations</CardDescription>
<CardTitle>{agentsData.coreServicesTitle}</CardTitle>
<CardDescription>{agentsData.coreServicesDescription}</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{agentsData.coreServices.map((service) => (
<AgentFileItem
key={service.filename}
featureLabel={agentsData.coreServicesFeaturesLabel}
filename={service.filename}
path={service.path}
description={service.description}

2
src/components/DocumentationView/AgentsFutureEnhancements.tsx
View File

@@ -8,7 +8,7 @@ export function AgentsFutureEnhancements() {
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Package size={20} weight="duotone" />
Future AI Enhancements
{agentsData.futureEnhancementsTitle}
</CardTitle>
</CardHeader>
<CardContent>

4
src/components/DocumentationView/AgentsIntegrationPoints.tsx
View File

@@ -6,8 +6,8 @@ export function AgentsIntegrationPoints() {
return (
<Card>
<CardHeader>
<CardTitle>AI Integration Points</CardTitle>
<CardDescription>Features enhanced by AI capabilities</CardDescription>
<CardTitle>{agentsData.integrationPointsTitle}</CardTitle>
<CardDescription>{agentsData.integrationPointsDescription}</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-4">

2
src/components/DocumentationView/AgentsOverviewSection.tsx
View File

@@ -14,7 +14,7 @@ export function AgentsOverviewSection() {
<Separator />
<div className="space-y-4">
<h2 className="text-2xl font-semibold">AI Service Architecture</h2>
<h2 className="text-2xl font-semibold">{agentsData.overviewTitle}</h2>
<p className="text-foreground/90 leading-relaxed">{agentsData.overview}</p>
</div>
</div>

4
src/components/DocumentationView/AgentsPromptEngineering.tsx
View File

@@ -5,8 +5,8 @@ export function AgentsPromptEngineering() {
return (
<Card>
<CardHeader>
<CardTitle>Prompt Engineering</CardTitle>
<CardDescription>How we optimize AI interactions</CardDescription>
<CardTitle>{agentsData.promptEngineeringTitle}</CardTitle>
<CardDescription>{agentsData.promptEngineeringDescription}</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{agentsData.promptEngineering.map((item) => (

8
src/components/DocumentationView/AnimationItem.tsx
View File

@@ -1,8 +0,0 @@
export function AnimationItem({ name, description }: { name: string; description: string }) {
return (
<div className="space-y-1 p-3 border rounded-lg bg-card">
<code className="text-xs font-mono text-accent">{name}</code>
<p className="text-xs text-muted-foreground">{description}</p>
</div>
)
}

32
src/components/DocumentationView/CICDPlatformItem.tsx
View File

@@ -1,32 +0,0 @@
import { CheckCircle, GitBranch } from '@phosphor-icons/react'
export function CICDPlatformItem({ name, file, description, features }: {
name: string
file: string
description: string
features: string[]
}) {
return (
<div className="space-y-3 border-l-2 border-accent pl-4">
<div className="space-y-1">
<div className="flex items-center gap-2">
<GitBranch size={18} className="text-accent" />
<h3 className="text-base font-semibold">{name}</h3>
</div>
<code className="text-xs text-muted-foreground font-mono">{file}</code>
<p className="text-sm text-foreground/90">{description}</p>
</div>
<div className="space-y-1">
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Key Features:</p>
<ul className="space-y-1">
{features.map((feature, idx) => (
<li key={idx} className="text-sm text-foreground/80 flex items-start gap-2">
<CheckCircle size={14} weight="fill" className="text-accent mt-1 flex-shrink-0" />
<span>{feature}</span>
</li>
))}
</ul>
</div>
</div>
)
}

2
src/components/DocumentationView/CicdBestPracticesCard.tsx
View File

@@ -8,7 +8,7 @@ export function CicdBestPracticesCard() {
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Rocket size={20} weight="duotone" />
Best Practices
{cicdData.bestPracticesTitle}
</CardTitle>
</CardHeader>
<CardContent>

2
src/components/DocumentationView/CicdBranchStrategySection.tsx
View File

@@ -24,7 +24,7 @@ const toneStyles = {
export function CicdBranchStrategySection() {
return (
<div className="space-y-4">
<h2 className="text-2xl font-semibold">Branch Strategy</h2>
<h2 className="text-2xl font-semibold">{cicdData.branchStrategyTitle}</h2>
<div className="grid gap-4">
{cicdData.branches.map((branch) => {
const styles = toneStyles[branch.tone]

10
src/components/DocumentationView/CicdDockerCard.tsx
View File

@@ -7,12 +7,12 @@ export function CicdDockerCard() {
return (
<Card>
<CardHeader>
<CardTitle>Docker Configuration</CardTitle>
<CardDescription>Containerization for production deployment</CardDescription>
<CardTitle>{cicdData.dockerTitle}</CardTitle>
<CardDescription>{cicdData.dockerDescription}</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<h3 className="font-semibold">Files Included</h3>
<h3 className="font-semibold">{cicdData.dockerFilesTitle}</h3>
<div className="space-y-2 ml-4">
{cicdData.docker.files.map((file) => (
<div key={file.name} className="space-y-1">
@@ -26,14 +26,14 @@ export function CicdDockerCard() {
<Separator />
<div className="space-y-2">
<h3 className="font-semibold">Docker Commands</h3>
<h3 className="font-semibold">{cicdData.dockerCommandsTitle}</h3>
<pre className="custom-mui-code-block">{cicdData.docker.commands}</pre>
</div>
<Separator />
<div className="space-y-2">
<h3 className="font-semibold">Features</h3>
<h3 className="font-semibold">{cicdData.dockerFeaturesTitle}</h3>
<ul className="space-y-2 text-sm">
{cicdData.docker.features.map((feature) => (
<li key={feature} className="flex items-start gap-2">

10
src/components/DocumentationView/CicdEnvVarsCard.tsx
View File

@@ -5,8 +5,8 @@ export function CicdEnvVarsCard() {
return (
<Card>
<CardHeader>
<CardTitle>Environment Variables</CardTitle>
<CardDescription>Required configuration for CI/CD platforms</CardDescription>
<CardTitle>{cicdData.envVarsTitle}</CardTitle>
<CardDescription>{cicdData.envVarsDescription}</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
@@ -14,9 +14,9 @@ export function CicdEnvVarsCard() {
<table className="w-full text-sm">
<thead>
<tr className="border-b">
<th className="text-left py-2 pr-4 font-semibold">Variable</th>
<th className="text-left py-2 pr-4 font-semibold">Description</th>
<th className="text-left py-2 font-semibold">Required</th>
{cicdData.envVarsColumns.map((column) => (
<th key={column} className="text-left py-2 pr-4 font-semibold">{column}</th>
))}
</tr>
</thead>
<tbody className="text-muted-foreground">

5
src/components/DocumentationView/CicdItems.tsx
View File

@@ -2,11 +2,12 @@ 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 }: {
export function CICDPlatformItem({ name, file, description, features, featureLabel }: {
name: string
file: string
description: string
features: string[]
featureLabel: string
}) {
return (
<div className="space-y-3 border-l-2 border-accent pl-4">
@@ -19,7 +20,7 @@ export function CICDPlatformItem({ name, file, description, features }: {
<p className="text-sm text-foreground/90">{description}</p>
</div>
<div className="space-y-1">
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Key Features:</p>
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">{featureLabel}</p>
<ul className="space-y-1">
{features.map((feature) => (
<li key={feature} className="text-sm text-foreground/80 flex items-start gap-2">

2
src/components/DocumentationView/CicdOverviewSection.tsx
View File

@@ -18,7 +18,7 @@ export function CicdOverviewSection() {
<Separator />
<div className="space-y-4">
<h2 className="text-2xl font-semibold">Overview</h2>
<h2 className="text-2xl font-semibold">{cicdData.overviewTitle}</h2>
<p className="text-foreground/90 leading-relaxed">{cicdData.overview}</p>
</div>
</div>

2
src/components/DocumentationView/CicdPipelineSection.tsx
View File

@@ -4,7 +4,7 @@ import { PipelineStageCard } from './CicdItems'
export function CicdPipelineSection() {
return (
<div className="space-y-4">
<h2 className="text-2xl font-semibold">Pipeline Stages</h2>
<h2 className="text-2xl font-semibold">{cicdData.pipelineTitle}</h2>
<p className="text-foreground/90 leading-relaxed">{cicdData.pipeline.intro}</p>
<div className="grid gap-3">
{cicdData.pipeline.stages.map((stage) => (

3
src/components/DocumentationView/CicdPlatformsCard.tsx
View File

@@ -6,12 +6,13 @@ export function CicdPlatformsCard() {
return (
<Card>
<CardHeader>
<CardTitle>Available Configurations</CardTitle>
<CardTitle>{cicdData.platformsTitle}</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{cicdData.platforms.map((platform) => (
<CICDPlatformItem
key={platform.name}
featureLabel={cicdData.platformsFeaturesLabel}
name={platform.name}
file={platform.file}
description={platform.description}

2
src/components/DocumentationView/CicdQuickStartCard.tsx
View File

@@ -8,7 +8,7 @@ export function CicdQuickStartCard() {
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Lightbulb size={20} weight="duotone" className="text-accent" />
Quick Start
{cicdData.quickStartTitle}
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">

2
src/components/DocumentationView/CicdResourcesCard.tsx
View File

@@ -8,7 +8,7 @@ export function CicdResourcesCard() {
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Package size={20} weight="duotone" />
Additional Resources
{cicdData.resourcesTitle}
</CardTitle>
</CardHeader>
<CardContent>

20
src/components/DocumentationView/IntegrationPoint.tsx
View File

@@ -1,20 +0,0 @@
import { Sparkle } from '@phosphor-icons/react'
export function IntegrationPoint({ component, capabilities }: { component: string; capabilities: string[] }) {
return (
<div className="space-y-2 border rounded-lg p-4 bg-card">
<h4 className="font-semibold text-sm flex items-center gap-2">
<Sparkle size={16} weight="duotone" className="text-accent" />
{component}
</h4>
<ul className="space-y-1">
{capabilities.map((capability, idx) => (
<li key={idx} className="text-sm text-muted-foreground flex items-start gap-2">
<span className="text-accent">•</span>
<span>{capability}</span>
</li>
))}
</ul>
</div>
)
}

24
src/components/DocumentationView/PipelineStageCard.tsx
View File

@@ -1,24 +0,0 @@
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
export function PipelineStageCard({ stage, description, duration }: {
stage: string
description: string
duration: string
}) {
return (
<Card className="bg-primary/5 border-primary/20">
<CardContent className="pt-4 pb-4">
<div className="flex items-start justify-between gap-4">
<div className="space-y-1 flex-1">
<h4 className="font-semibold text-sm">{stage}</h4>
<p className="text-sm text-muted-foreground">{description}</p>
</div>
<Badge variant="secondary" className="text-xs whitespace-nowrap">
{duration}
</Badge>
</div>
</CardContent>
</Card>
)
}

4
src/components/DocumentationView/PwaFeaturesCard.tsx
View File

@@ -6,8 +6,8 @@ export function PwaFeaturesCard() {
return (
<Card>
<CardHeader>
<CardTitle>PWA Features</CardTitle>
<CardDescription>Native app capabilities in your browser</CardDescription>
<CardTitle>{pwaData.featuresTitle}</CardTitle>
<CardDescription>{pwaData.featuresDescription}</CardDescription>
</CardHeader>
<CardContent className="grid md:grid-cols-2 gap-4">
{pwaData.features.map((feature) => (

6
src/components/DocumentationView/PwaInstallationSection.tsx
View File

@@ -26,10 +26,10 @@ function InstallationCard({ title, items }: { title: string; items: { title: str
export function PwaInstallationSection() {
return (
<div className="space-y-4">
<h2 className="text-2xl font-semibold">Installation</h2>
<h2 className="text-2xl font-semibold">{pwaData.installationTitle}</h2>
<div className="grid md:grid-cols-2 gap-4">
<InstallationCard title="Desktop Installation" items={pwaData.installation.desktop} />
<InstallationCard title="Mobile Installation" items={pwaData.installation.mobile} />
<InstallationCard title={pwaData.installationDesktopTitle} items={pwaData.installation.desktop} />
<InstallationCard title={pwaData.installationMobileTitle} items={pwaData.installation.mobile} />
</div>
</div>
)

6
src/components/DocumentationView/PwaOfflineSection.tsx
View File

@@ -18,14 +18,14 @@ function OfflineList({ items, accent }: { items: string[]; accent: boolean }) {
export function PwaOfflineSection() {
return (
<div className="space-y-4">
<h2 className="text-2xl font-semibold">Offline Capabilities</h2>
<h2 className="text-2xl font-semibold">{pwaData.offlineTitle}</h2>
<div className="grid md:grid-cols-2 gap-4">
<Card className="border-accent/50">
<CardHeader>
<CardTitle className="text-base flex items-center gap-2">
<CheckCircle size={20} weight="fill" className="text-accent" />
Works Offline
{pwaData.offlineWorksTitle}
</CardTitle>
</CardHeader>
<CardContent>
@@ -37,7 +37,7 @@ export function PwaOfflineSection() {
<CardHeader>
<CardTitle className="text-base flex items-center gap-2">
<Wrench size={20} weight="duotone" className="text-muted-foreground" />
Requires Internet
{pwaData.offlineRequiresTitle}
</CardTitle>
</CardHeader>
<CardContent>

2
src/components/DocumentationView/PwaOverviewSection.tsx
View File

@@ -18,7 +18,7 @@ export function PwaOverviewSection() {
<Separator />
<div className="space-y-4">
<h2 className="text-2xl font-semibold">Overview</h2>
<h2 className="text-2xl font-semibold">{pwaData.overviewTitle}</h2>
<p className="text-foreground/90 leading-relaxed">{pwaData.overview}</p>
</div>
</div>

2
src/components/DocumentationView/PwaProTipsCard.tsx
View File

@@ -8,7 +8,7 @@ export function PwaProTipsCard() {
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Lightbulb size={20} weight="duotone" className="text-accent" />
Pro Tips
{pwaData.proTipsTitle}
</CardTitle>
</CardHeader>
<CardContent>

8
src/components/DocumentationView/PwaSettingsCard.tsx
View File

@@ -5,14 +5,12 @@ import pwaData from '@/data/documentation/pwa-data.json'
export function PwaSettingsCard() {
return (
<div className="space-y-4">
<h2 className="text-2xl font-semibold">PWA Settings</h2>
<p className="text-foreground/90 leading-relaxed">
Navigate to the <strong>PWA</strong> tab to manage all Progressive Web App features:
</p>
<h2 className="text-2xl font-semibold">{pwaData.settingsTitle}</h2>
<p className="text-foreground/90 leading-relaxed">{pwaData.settingsDescription}</p>
<Card>
<CardHeader>
<CardTitle>Available Controls</CardTitle>
<CardTitle>{pwaData.settingsCardTitle}</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{pwaData.settings.map((setting, index) => (

18
src/components/DocumentationView/ReadmeTab.tsx
View File

@@ -28,7 +28,7 @@ export function ReadmeTab() {
<Separator />
<div className="space-y-4">
<h2 className="text-2xl font-semibold">Overview</h2>
<h2 className="text-2xl font-semibold">{readmeData.sections.overviewTitle}</h2>
<p className="text-foreground/90 leading-relaxed">{readmeData.overview}</p>
</div>
@@ -36,7 +36,7 @@ export function ReadmeTab() {
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Rocket size={20} weight="duotone" />
Key Features
{readmeData.sections.featuresTitle}
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
@@ -55,7 +55,7 @@ export function ReadmeTab() {
</Card>
<div className="space-y-4">
<h2 className="text-2xl font-semibold">Getting Started</h2>
<h2 className="text-2xl font-semibold">{readmeData.sections.gettingStartedTitle}</h2>
<Card>
<CardContent className="pt-6 space-y-4">
{readmeData.gettingStarted.map((step) => (
@@ -74,9 +74,9 @@ export function ReadmeTab() {
</div>
<div className="space-y-4">
<h2 className="text-2xl font-semibold">AI-Powered Features</h2>
<h2 className="text-2xl font-semibold">{readmeData.sections.aiFeaturesTitle}</h2>
<p className="text-foreground/90 leading-relaxed">
CodeForge integrates OpenAI across every designer to accelerate development:
{readmeData.sections.aiFeaturesDescription}
</p>
<div className="grid gap-3">
{readmeData.aiFeatures.map((feature, idx) => (
@@ -86,11 +86,11 @@ export function ReadmeTab() {
</div>
<div className="space-y-4">
<h2 className="text-2xl font-semibold">Technology Stack</h2>
<h2 className="text-2xl font-semibold">{readmeData.sections.techStackTitle}</h2>
<div className="grid md:grid-cols-2 gap-4">
<Card>
<CardHeader>
<CardTitle className="text-base">Frontend</CardTitle>
<CardTitle className="text-base">{readmeData.sections.techStackFrontendTitle}</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-sm text-foreground/80">
@@ -105,7 +105,7 @@ export function ReadmeTab() {
</Card>
<Card>
<CardHeader>
<CardTitle className="text-base">Backend & Tools</CardTitle>
<CardTitle className="text-base">{readmeData.sections.techStackBackendTitle}</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-sm text-foreground/80">
@@ -125,7 +125,7 @@ export function ReadmeTab() {
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Lightbulb size={20} weight="duotone" className="text-accent" />
Pro Tips
{readmeData.sections.proTipsTitle}
</CardTitle>
</CardHeader>
<CardContent className="space-y-2 text-sm">

4
src/components/DocumentationView/RoadmapTab.tsx
View File

@@ -6,13 +6,13 @@ import { RoadmapItem } from './RoadmapItem'
const sections = [
{
key: 'completed',
title: 'Completed Features',
title: roadmapData.sections.completedTitle,
icon: <CheckCircle size={24} weight="fill" className="text-green-500" />,
items: roadmapData.completed
},
{
key: 'planned',
title: 'Planned Features',
title: roadmapData.sections.plannedTitle,
icon: <Clock size={24} weight="duotone" className="text-accent" />,
items: roadmapData.planned
}

4
src/components/DocumentationView/SassAnimationsCard.tsx
View File

@@ -6,8 +6,8 @@ export function SassAnimationsCard() {
return (
<Card>
<CardHeader>
<CardTitle>Animation Classes</CardTitle>
<CardDescription>Pre-built animation utilities</CardDescription>
<CardTitle>{sassData.animationsTitle}</CardTitle>
<CardDescription>{sassData.animationsDescription}</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">

2
src/components/DocumentationView/SassBestPracticesCard.tsx
View File

@@ -8,7 +8,7 @@ export function SassBestPracticesCard() {
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Target size={20} weight="duotone" />
Best Practices
{sassData.bestPracticesTitle}
</CardTitle>
</CardHeader>
<CardContent>

13
src/components/DocumentationView/SassComponentItem.tsx
View File

@@ -1,13 +0,0 @@
export function SassComponentItem({ name, classes, description }: { name: string; classes: string[]; description: string }) {
return (
<div className="space-y-2 p-4 border rounded-lg bg-card">
<h4 className="font-semibold">{name}</h4>
<p className="text-sm text-muted-foreground">{description}</p>
<div className="space-y-1">
{classes.map((cls, idx) => (
<code key={idx} className="text-xs font-mono text-accent block">{cls}</code>
))}
</div>
</div>
)
}

4
src/components/DocumentationView/SassComponentsCard.tsx
View File

@@ -6,8 +6,8 @@ export function SassComponentsCard() {
return (
<Card>
<CardHeader>
<CardTitle>Available Components</CardTitle>
<CardDescription>Custom Material UI components built with Sass</CardDescription>
<CardTitle>{sassData.componentsTitle}</CardTitle>
<CardDescription>{sassData.componentsDescription}</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid gap-4 md:grid-cols-2">

2
src/components/DocumentationView/SassFileStructureCard.tsx
View File

@@ -5,7 +5,7 @@ export function SassFileStructureCard() {
return (
<Card>
<CardHeader>
<CardTitle>File Structure</CardTitle>
<CardTitle>{sassData.fileStructureTitle}</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
{sassData.fileStructure.map((item) => (

4
src/components/DocumentationView/SassLayoutCard.tsx
View File

@@ -7,8 +7,8 @@ export function SassLayoutCard() {
return (
<Card>
<CardHeader>
<CardTitle>Layout Components</CardTitle>
<CardDescription>Sass-powered layout utilities</CardDescription>
<CardTitle>{sassData.layoutTitle}</CardTitle>
<CardDescription>{sassData.layoutDescription}</CardDescription>
</CardHeader>
<CardContent className="space-y-3">
{sassData.layoutComponents.map((item) => (

2
src/components/DocumentationView/SassOverviewSection.tsx
View File

@@ -18,7 +18,7 @@ export function SassOverviewSection() {
<Separator />
<div className="space-y-4">
<h2 className="text-2xl font-semibold">Overview</h2>
<h2 className="text-2xl font-semibold">{sassData.overviewTitle}</h2>
<p className="text-foreground/90 leading-relaxed">{sassData.overview}</p>
</div>
</div>

2
src/components/DocumentationView/SassQuickStartCard.tsx
View File

@@ -9,7 +9,7 @@ export function SassQuickStartCard() {
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Rocket size={20} weight="duotone" />
Quick Start Example
{sassData.quickStartTitle}
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">

4
src/components/DocumentationView/SassUtilitiesCard.tsx
View File

@@ -7,8 +7,8 @@ export function SassUtilitiesCard() {
return (
<Card>
<CardHeader>
<CardTitle>Sass Utilities & Mixins</CardTitle>
<CardDescription>Reusable functions for custom styling</CardDescription>
<CardTitle>{sassData.utilitiesTitle}</CardTitle>
<CardDescription>{sassData.utilitiesDescription}</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">

9
src/data/documentation/agents-data.json
View File

@@ -1,6 +1,15 @@
{
"title": "Agents Files",
"subtitle": "AI agent configuration and service architecture",
"overviewTitle": "AI Service Architecture",
"coreServicesTitle": "Core AI Services",
"coreServicesDescription": "Primary modules handling AI operations",
"coreServicesFeaturesLabel": "Key Features:",
"integrationPointsTitle": "AI Integration Points",
"integrationPointsDescription": "Features enhanced by AI capabilities",
"promptEngineeringTitle": "Prompt Engineering",
"promptEngineeringDescription": "How we optimize AI interactions",
"futureEnhancementsTitle": "Future AI Enhancements",
"overview": "CodeForge uses a modular AI service architecture that integrates OpenAI's GPT models across all features. Each designer has specialized prompts and validation logic to ensure high-quality generated code.",
"coreServices": [
{

16
src/data/documentation/cicd-data.json
View File

@@ -1,6 +1,22 @@
{
"title": "CI/CD Guide",
"subtitle": "Complete deployment automation for multiple platforms",
"overviewTitle": "Overview",
"platformsTitle": "Available Configurations",
"platformsFeaturesLabel": "Key Features:",
"pipelineTitle": "Pipeline Stages",
"dockerTitle": "Docker Configuration",
"dockerDescription": "Containerization for production deployment",
"dockerFilesTitle": "Files Included",
"dockerCommandsTitle": "Docker Commands",
"dockerFeaturesTitle": "Features",
"envVarsTitle": "Environment Variables",
"envVarsDescription": "Required configuration for CI/CD platforms",
"envVarsColumns": ["Variable", "Description", "Required"],
"branchStrategyTitle": "Branch Strategy",
"quickStartTitle": "Quick Start",
"bestPracticesTitle": "Best Practices",
"resourcesTitle": "Additional Resources",
"overview": "CodeForge includes production-ready CI/CD configurations for GitHub Actions, GitLab CI, Jenkins, and CircleCI. Each pipeline includes linting, testing, security scanning, Docker image building, and automated deployment workflows.",
"platforms": [
{

13
src/data/documentation/pwa-data.json
View File

@@ -1,6 +1,19 @@
{
"title": "Progressive Web App",
"subtitle": "Offline-first experience with native-like capabilities",
"overviewTitle": "Overview",
"featuresTitle": "PWA Features",
"featuresDescription": "Native app capabilities in your browser",
"installationTitle": "Installation",
"installationDesktopTitle": "Desktop Installation",
"installationMobileTitle": "Mobile Installation",
"settingsTitle": "PWA Settings",
"settingsDescription": "Navigate to the PWA tab to manage all Progressive Web App features:",
"settingsCardTitle": "Available Controls",
"offlineTitle": "Offline Capabilities",
"offlineWorksTitle": "Works Offline",
"offlineRequiresTitle": "Requires Internet",
"proTipsTitle": "Pro Tips",
"overview": "CodeForge is a fully-featured Progressive Web App that can be installed on any device and works offline. With intelligent caching, automatic updates, and native app-like features, you can build applications anywhere, anytime.",
"features": [
{

11
src/data/documentation/readme-data.json
View File

@@ -1,6 +1,17 @@
{
"title": "CodeForge",
"subtitle": "Low-Code Next.js App Builder with AI",
"sections": {
"overviewTitle": "Overview",
"featuresTitle": "Key Features",
"gettingStartedTitle": "Getting Started",
"aiFeaturesTitle": "AI-Powered Features",
"aiFeaturesDescription": "CodeForge integrates OpenAI across every designer to accelerate development:",
"techStackTitle": "Technology Stack",
"techStackFrontendTitle": "Frontend",
"techStackBackendTitle": "Backend & Tools",
"proTipsTitle": "Pro Tips"
},
"overview": "CodeForge is a comprehensive visual low-code platform for generating production-ready Next.js applications. It combines the power of visual designers with direct code editing, AI-powered generation, and a complete full-stack development toolkit.",
"features": [
{

4
src/data/documentation/roadmap-data.json
View File

@@ -1,6 +1,10 @@
{
"title": "Product Roadmap",
"subtitle": "Features delivered and planned for CodeForge development",
"sections": {
"completedTitle": "Completed Features",
"plannedTitle": "Planned Features"
},
"completed": [
{
"title": "Monaco Code Editor Integration",

12
src/data/documentation/sass-data.json
View File

@@ -1,6 +1,18 @@
{
"title": "Sass Styles Guide",
"subtitle": "Custom Material UI components with Sass",
"overviewTitle": "Overview",
"fileStructureTitle": "File Structure",
"componentsTitle": "Available Components",
"componentsDescription": "Custom Material UI components built with Sass",
"layoutTitle": "Layout Components",
"layoutDescription": "Sass-powered layout utilities",
"utilitiesTitle": "Sass Utilities & Mixins",
"utilitiesDescription": "Reusable functions for custom styling",
"animationsTitle": "Animation Classes",
"animationsDescription": "Pre-built animation utilities",
"quickStartTitle": "Quick Start Example",
"bestPracticesTitle": "Best Practices",
"overview": "CodeForge includes a comprehensive Sass-based styling system for non-standard Material UI components. This system provides pre-built components, utilities, mixins, and animations that extend beyond the standard Material UI component library.",
"fileStructure": [
{