mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-24 13:44:54 +00:00
Merge pull request #26 from johndoe6345789/codex/refactor-projectsettingsdesigner-into-subcomponents
Refactor ProjectSettingsDesigner into tab subcomponents and extract UI copy
This commit is contained in:
GitHub
@@ -1,17 +1,15 @@
|
||||
import { useState } from 'react'
|
||||
import { NextJsConfig, NpmSettings, NpmPackage } from '@/types/project'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { NextJsConfig, NpmSettings } from '@/types/project'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Plus, Trash, Package, Cube, Code } from '@phosphor-icons/react'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { SeedDataManager } from '@/components/molecules'
|
||||
import { Cube } from '@phosphor-icons/react'
|
||||
import projectSettingsCopy from '@/data/project-settings.json'
|
||||
import { NextJsConfigTab } from '@/components/project-settings/NextJsConfigTab'
|
||||
import { PackagesTab } from '@/components/project-settings/PackagesTab'
|
||||
import { ScriptsTab } from '@/components/project-settings/ScriptsTab'
|
||||
import { DataTab } from '@/components/project-settings/DataTab'
|
||||
import { PackageDialog } from '@/components/project-settings/PackageDialog'
|
||||
import { ScriptDialog } from '@/components/project-settings/ScriptDialog'
|
||||
import { useProjectSettingsActions } from '@/components/project-settings/useProjectSettingsActions'
|
||||
|
||||
interface ProjectSettingsDesignerProps {
|
||||
nextjsConfig: NextJsConfig
|
||||
@@ -26,92 +24,27 @@ export function ProjectSettingsDesigner({
|
||||
onNextjsConfigChange,
|
||||
onNpmSettingsChange,
|
||||
}: ProjectSettingsDesignerProps) {
|
||||
const [packageDialogOpen, setPackageDialogOpen] = useState(false)
|
||||
const [editingPackage, setEditingPackage] = useState<NpmPackage | null>(null)
|
||||
const [scriptDialogOpen, setScriptDialogOpen] = useState(false)
|
||||
const [scriptKey, setScriptKey] = useState('')
|
||||
const [scriptValue, setScriptValue] = useState('')
|
||||
const [editingScriptKey, setEditingScriptKey] = useState<string | null>(null)
|
||||
|
||||
const handleAddPackage = () => {
|
||||
setEditingPackage({
|
||||
id: `package-${Date.now()}`,
|
||||
name: '',
|
||||
version: 'latest',
|
||||
isDev: false,
|
||||
})
|
||||
setPackageDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleEditPackage = (pkg: NpmPackage) => {
|
||||
setEditingPackage({ ...pkg })
|
||||
setPackageDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleSavePackage = () => {
|
||||
if (!editingPackage || !editingPackage.name) return
|
||||
|
||||
onNpmSettingsChange((current) => {
|
||||
const existingIndex = current.packages.findIndex((p) => p.id === editingPackage.id)
|
||||
if (existingIndex >= 0) {
|
||||
const updated = [...current.packages]
|
||||
updated[existingIndex] = editingPackage
|
||||
return { ...current, packages: updated }
|
||||
} else {
|
||||
return { ...current, packages: [...current.packages, editingPackage] }
|
||||
}
|
||||
})
|
||||
|
||||
setPackageDialogOpen(false)
|
||||
setEditingPackage(null)
|
||||
}
|
||||
|
||||
const handleDeletePackage = (packageId: string) => {
|
||||
onNpmSettingsChange((current) => ({
|
||||
...current,
|
||||
packages: current.packages.filter((p) => p.id !== packageId),
|
||||
}))
|
||||
}
|
||||
|
||||
const handleAddScript = () => {
|
||||
setScriptKey('')
|
||||
setScriptValue('')
|
||||
setEditingScriptKey(null)
|
||||
setScriptDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleEditScript = (key: string, value: string) => {
|
||||
setScriptKey(key)
|
||||
setScriptValue(value)
|
||||
setEditingScriptKey(key)
|
||||
setScriptDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleSaveScript = () => {
|
||||
if (!scriptKey || !scriptValue) return
|
||||
|
||||
onNpmSettingsChange((current) => {
|
||||
const scripts = { ...current.scripts }
|
||||
if (editingScriptKey && editingScriptKey !== scriptKey) {
|
||||
delete scripts[editingScriptKey]
|
||||
}
|
||||
scripts[scriptKey] = scriptValue
|
||||
return { ...current, scripts }
|
||||
})
|
||||
|
||||
setScriptDialogOpen(false)
|
||||
setScriptKey('')
|
||||
setScriptValue('')
|
||||
setEditingScriptKey(null)
|
||||
}
|
||||
|
||||
const handleDeleteScript = (key: string) => {
|
||||
onNpmSettingsChange((current) => {
|
||||
const scripts = { ...current.scripts }
|
||||
delete scripts[key]
|
||||
return { ...current, scripts }
|
||||
})
|
||||
}
|
||||
const {
|
||||
packageDialogOpen,
|
||||
setPackageDialogOpen,
|
||||
editingPackage,
|
||||
setEditingPackage,
|
||||
scriptDialogOpen,
|
||||
setScriptDialogOpen,
|
||||
scriptKey,
|
||||
setScriptKey,
|
||||
scriptValue,
|
||||
setScriptValue,
|
||||
editingScriptKey,
|
||||
handleAddPackage,
|
||||
handleEditPackage,
|
||||
handleSavePackage,
|
||||
handleDeletePackage,
|
||||
handleAddScript,
|
||||
handleEditScript,
|
||||
handleSaveScript,
|
||||
handleDeleteScript,
|
||||
} = useProjectSettingsActions({ onNpmSettingsChange })
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
@@ -121,9 +54,9 @@ export function ProjectSettingsDesigner({
|
||||
<Cube size={24} weight="duotone" className="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold">Project Settings</h2>
|
||||
<h2 className="text-lg font-bold">{projectSettingsCopy.header.title}</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Configure Next.js and npm settings
|
||||
{projectSettingsCopy.header.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,488 +65,66 @@ export function ProjectSettingsDesigner({
|
||||
<Tabs defaultValue="nextjs" className="flex-1 flex flex-col">
|
||||
<div className="border-b border-border px-6">
|
||||
<TabsList>
|
||||
<TabsTrigger value="nextjs">Next.js Config</TabsTrigger>
|
||||
<TabsTrigger value="packages">NPM Packages</TabsTrigger>
|
||||
<TabsTrigger value="scripts">Scripts</TabsTrigger>
|
||||
<TabsTrigger value="data">Data</TabsTrigger>
|
||||
<TabsTrigger value="nextjs">{projectSettingsCopy.tabs.nextjs}</TabsTrigger>
|
||||
<TabsTrigger value="packages">{projectSettingsCopy.tabs.packages}</TabsTrigger>
|
||||
<TabsTrigger value="scripts">{projectSettingsCopy.tabs.scripts}</TabsTrigger>
|
||||
<TabsTrigger value="data">{projectSettingsCopy.tabs.data}</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="p-6">
|
||||
<TabsContent value="nextjs" className="mt-0">
|
||||
<div className="max-w-2xl space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Application Settings</CardTitle>
|
||||
<CardDescription>Basic Next.js application configuration</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="app-name">Application Name</Label>
|
||||
<Input
|
||||
id="app-name"
|
||||
value={nextjsConfig.appName}
|
||||
onChange={(e) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
appName: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="my-nextjs-app"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="import-alias">Import Alias</Label>
|
||||
<Input
|
||||
id="import-alias"
|
||||
value={nextjsConfig.importAlias}
|
||||
onChange={(e) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
importAlias: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="@/*"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Used for module imports (e.g., import {'{'} Button {'}'} from "@/components")
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Features</CardTitle>
|
||||
<CardDescription>Enable or disable Next.js features</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label htmlFor="typescript">TypeScript</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Use TypeScript for type safety
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="typescript"
|
||||
checked={nextjsConfig.typescript}
|
||||
onCheckedChange={(checked) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
typescript: checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label htmlFor="eslint">ESLint</Label>
|
||||
<p className="text-xs text-muted-foreground">Code linting and formatting</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="eslint"
|
||||
checked={nextjsConfig.eslint}
|
||||
onCheckedChange={(checked) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
eslint: checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label htmlFor="tailwind">Tailwind CSS</Label>
|
||||
<p className="text-xs text-muted-foreground">Utility-first CSS framework</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="tailwind"
|
||||
checked={nextjsConfig.tailwind}
|
||||
onCheckedChange={(checked) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
tailwind: checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label htmlFor="src-dir">Use src/ Directory</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Organize code inside src/ folder
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="src-dir"
|
||||
checked={nextjsConfig.srcDirectory}
|
||||
onCheckedChange={(checked) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
srcDirectory: checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label htmlFor="app-router">App Router</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Use the new App Router (vs Pages Router)
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="app-router"
|
||||
checked={nextjsConfig.appRouter}
|
||||
onCheckedChange={(checked) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
appRouter: checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label htmlFor="turbopack">Turbopack (Beta)</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Faster incremental bundler
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="turbopack"
|
||||
checked={nextjsConfig.turbopack || false}
|
||||
onCheckedChange={(checked) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
turbopack: checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<NextJsConfigTab
|
||||
nextjsConfig={nextjsConfig}
|
||||
onNextjsConfigChange={onNextjsConfigChange}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="packages" className="mt-0">
|
||||
<div className="max-w-4xl">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">NPM Packages</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Manage project dependencies
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={handleAddPackage}>
|
||||
<Plus size={16} className="mr-2" />
|
||||
Add Package
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<Label htmlFor="package-manager">Package Manager</Label>
|
||||
<Select
|
||||
value={npmSettings.packageManager}
|
||||
onValueChange={(value: any) =>
|
||||
onNpmSettingsChange((current) => ({
|
||||
...current,
|
||||
packageManager: value,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="package-manager" className="w-48">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="npm">npm</SelectItem>
|
||||
<SelectItem value="yarn">yarn</SelectItem>
|
||||
<SelectItem value="pnpm">pnpm</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-3">Dependencies</h4>
|
||||
<div className="space-y-2">
|
||||
{npmSettings.packages
|
||||
.filter((pkg) => !pkg.isDev)
|
||||
.map((pkg) => (
|
||||
<Card key={pkg.id}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Package size={18} className="text-primary" />
|
||||
<code className="font-semibold">{pkg.name}</code>
|
||||
<Badge variant="secondary">{pkg.version}</Badge>
|
||||
</div>
|
||||
{pkg.description && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{pkg.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleEditPackage(pkg)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="text-destructive"
|
||||
onClick={() => handleDeletePackage(pkg.id)}
|
||||
>
|
||||
<Trash size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
{npmSettings.packages.filter((pkg) => !pkg.isDev).length === 0 && (
|
||||
<Card className="p-8 text-center">
|
||||
<p className="text-muted-foreground">No dependencies added yet</p>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-3">Dev Dependencies</h4>
|
||||
<div className="space-y-2">
|
||||
{npmSettings.packages
|
||||
.filter((pkg) => pkg.isDev)
|
||||
.map((pkg) => (
|
||||
<Card key={pkg.id}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Package size={18} className="text-muted-foreground" />
|
||||
<code className="font-semibold">{pkg.name}</code>
|
||||
<Badge variant="secondary">{pkg.version}</Badge>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
dev
|
||||
</Badge>
|
||||
</div>
|
||||
{pkg.description && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{pkg.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleEditPackage(pkg)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="text-destructive"
|
||||
onClick={() => handleDeletePackage(pkg.id)}
|
||||
>
|
||||
<Trash size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
{npmSettings.packages.filter((pkg) => pkg.isDev).length === 0 && (
|
||||
<Card className="p-8 text-center">
|
||||
<p className="text-muted-foreground">No dev dependencies added yet</p>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PackagesTab
|
||||
npmSettings={npmSettings}
|
||||
onNpmSettingsChange={onNpmSettingsChange}
|
||||
onAddPackage={handleAddPackage}
|
||||
onEditPackage={handleEditPackage}
|
||||
onDeletePackage={handleDeletePackage}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="scripts" className="mt-0">
|
||||
<div className="max-w-3xl">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">NPM Scripts</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Define custom commands for your project
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={handleAddScript}>
|
||||
<Plus size={16} className="mr-2" />
|
||||
Add Script
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{Object.entries(npmSettings.scripts).map(([key, value]) => (
|
||||
<Card key={key}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Code size={18} className="text-primary flex-shrink-0" />
|
||||
<code className="font-semibold text-sm">{key}</code>
|
||||
</div>
|
||||
<code className="text-xs text-muted-foreground block truncate">
|
||||
{value}
|
||||
</code>
|
||||
</div>
|
||||
<div className="flex gap-2 ml-4">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleEditScript(key, value)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="text-destructive"
|
||||
onClick={() => handleDeleteScript(key)}
|
||||
>
|
||||
<Trash size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
{Object.keys(npmSettings.scripts).length === 0 && (
|
||||
<Card className="p-8 text-center">
|
||||
<p className="text-muted-foreground">No scripts defined yet</p>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ScriptsTab
|
||||
npmSettings={npmSettings}
|
||||
onAddScript={handleAddScript}
|
||||
onEditScript={handleEditScript}
|
||||
onDeleteScript={handleDeleteScript}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="data" className="mt-0">
|
||||
<div className="max-w-2xl">
|
||||
<SeedDataManager />
|
||||
</div>
|
||||
<DataTab />
|
||||
</TabsContent>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</Tabs>
|
||||
|
||||
<Dialog open={packageDialogOpen} onOpenChange={setPackageDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{editingPackage?.name ? 'Edit Package' : 'Add Package'}
|
||||
</DialogTitle>
|
||||
<DialogDescription>Configure npm package details</DialogDescription>
|
||||
</DialogHeader>
|
||||
{editingPackage && (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="package-name">Package Name</Label>
|
||||
<Input
|
||||
id="package-name"
|
||||
value={editingPackage.name}
|
||||
onChange={(e) =>
|
||||
setEditingPackage({ ...editingPackage, name: e.target.value })
|
||||
}
|
||||
placeholder="e.g., react-query, axios"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="package-version">Version</Label>
|
||||
<Input
|
||||
id="package-version"
|
||||
value={editingPackage.version}
|
||||
onChange={(e) =>
|
||||
setEditingPackage({ ...editingPackage, version: e.target.value })
|
||||
}
|
||||
placeholder="latest, ^1.0.0, ~2.3.4"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="package-description">Description (Optional)</Label>
|
||||
<Input
|
||||
id="package-description"
|
||||
value={editingPackage.description || ''}
|
||||
onChange={(e) =>
|
||||
setEditingPackage({ ...editingPackage, description: e.target.value })
|
||||
}
|
||||
placeholder="What is this package for?"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="package-dev">Development Dependency</Label>
|
||||
<Switch
|
||||
id="package-dev"
|
||||
checked={editingPackage.isDev}
|
||||
onCheckedChange={(checked) =>
|
||||
setEditingPackage({ ...editingPackage, isDev: checked })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setPackageDialogOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSavePackage}>Save Package</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<PackageDialog
|
||||
open={packageDialogOpen}
|
||||
onOpenChange={setPackageDialogOpen}
|
||||
editingPackage={editingPackage}
|
||||
setEditingPackage={setEditingPackage}
|
||||
onSave={handleSavePackage}
|
||||
/>
|
||||
|
||||
<Dialog open={scriptDialogOpen} onOpenChange={setScriptDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingScriptKey ? 'Edit Script' : 'Add Script'}</DialogTitle>
|
||||
<DialogDescription>Define a custom npm script command</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="script-name">Script Name</Label>
|
||||
<Input
|
||||
id="script-name"
|
||||
value={scriptKey}
|
||||
onChange={(e) => setScriptKey(e.target.value)}
|
||||
placeholder="e.g., dev, build, test"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="script-command">Command</Label>
|
||||
<Input
|
||||
id="script-command"
|
||||
value={scriptValue}
|
||||
onChange={(e) => setScriptValue(e.target.value)}
|
||||
placeholder="e.g., next dev, tsc --noEmit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setScriptDialogOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSaveScript}>Save Script</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<ScriptDialog
|
||||
open={scriptDialogOpen}
|
||||
onOpenChange={setScriptDialogOpen}
|
||||
scriptKey={scriptKey}
|
||||
scriptValue={scriptValue}
|
||||
setScriptKey={setScriptKey}
|
||||
setScriptValue={setScriptValue}
|
||||
editingScriptKey={editingScriptKey}
|
||||
onSave={handleSaveScript}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
9
src/components/project-settings/DataTab.tsx
Normal file
9
src/components/project-settings/DataTab.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { SeedDataManager } from '@/components/molecules'
|
||||
|
||||
export function DataTab() {
|
||||
return (
|
||||
<div className="max-w-2xl">
|
||||
<SeedDataManager />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
60
src/components/project-settings/NextJsApplicationCard.tsx
Normal file
60
src/components/project-settings/NextJsApplicationCard.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { NextJsConfig } from '@/types/project'
|
||||
import projectSettingsCopy from '@/data/project-settings.json'
|
||||
|
||||
interface NextJsApplicationCardProps {
|
||||
nextjsConfig: NextJsConfig
|
||||
onNextjsConfigChange: (config: NextJsConfig | ((current: NextJsConfig) => NextJsConfig)) => void
|
||||
}
|
||||
|
||||
export function NextJsApplicationCard({
|
||||
nextjsConfig,
|
||||
onNextjsConfigChange,
|
||||
}: NextJsApplicationCardProps) {
|
||||
const { application } = projectSettingsCopy.nextjs
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{application.title}</CardTitle>
|
||||
<CardDescription>{application.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="app-name">{application.fields.appName.label}</Label>
|
||||
<Input
|
||||
id="app-name"
|
||||
value={nextjsConfig.appName}
|
||||
onChange={(e) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
appName: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder={application.fields.appName.placeholder}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="import-alias">{application.fields.importAlias.label}</Label>
|
||||
<Input
|
||||
id="import-alias"
|
||||
value={nextjsConfig.importAlias}
|
||||
onChange={(e) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
importAlias: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder={application.fields.importAlias.placeholder}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{application.fields.importAlias.helper}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
26
src/components/project-settings/NextJsConfigTab.tsx
Normal file
26
src/components/project-settings/NextJsConfigTab.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { NextJsConfig } from '@/types/project'
|
||||
import { NextJsApplicationCard } from '@/components/project-settings/NextJsApplicationCard'
|
||||
import { NextJsFeaturesCard } from '@/components/project-settings/NextJsFeaturesCard'
|
||||
|
||||
interface NextJsConfigTabProps {
|
||||
nextjsConfig: NextJsConfig
|
||||
onNextjsConfigChange: (config: NextJsConfig | ((current: NextJsConfig) => NextJsConfig)) => void
|
||||
}
|
||||
|
||||
export function NextJsConfigTab({
|
||||
nextjsConfig,
|
||||
onNextjsConfigChange,
|
||||
}: NextJsConfigTabProps) {
|
||||
return (
|
||||
<div className="max-w-2xl space-y-6">
|
||||
<NextJsApplicationCard
|
||||
nextjsConfig={nextjsConfig}
|
||||
onNextjsConfigChange={onNextjsConfigChange}
|
||||
/>
|
||||
<NextJsFeaturesCard
|
||||
nextjsConfig={nextjsConfig}
|
||||
onNextjsConfigChange={onNextjsConfigChange}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
139
src/components/project-settings/NextJsFeaturesCard.tsx
Normal file
139
src/components/project-settings/NextJsFeaturesCard.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { NextJsConfig } from '@/types/project'
|
||||
import projectSettingsCopy from '@/data/project-settings.json'
|
||||
|
||||
interface NextJsFeaturesCardProps {
|
||||
nextjsConfig: NextJsConfig
|
||||
onNextjsConfigChange: (config: NextJsConfig | ((current: NextJsConfig) => NextJsConfig)) => void
|
||||
}
|
||||
|
||||
export function NextJsFeaturesCard({
|
||||
nextjsConfig,
|
||||
onNextjsConfigChange,
|
||||
}: NextJsFeaturesCardProps) {
|
||||
const { features } = projectSettingsCopy.nextjs
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{features.title}</CardTitle>
|
||||
<CardDescription>{features.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label htmlFor="typescript">{features.items.typescript.label}</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{features.items.typescript.description}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="typescript"
|
||||
checked={nextjsConfig.typescript}
|
||||
onCheckedChange={(checked) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
typescript: checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label htmlFor="eslint">{features.items.eslint.label}</Label>
|
||||
<p className="text-xs text-muted-foreground">{features.items.eslint.description}</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="eslint"
|
||||
checked={nextjsConfig.eslint}
|
||||
onCheckedChange={(checked) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
eslint: checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label htmlFor="tailwind">{features.items.tailwind.label}</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{features.items.tailwind.description}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="tailwind"
|
||||
checked={nextjsConfig.tailwind}
|
||||
onCheckedChange={(checked) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
tailwind: checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label htmlFor="src-dir">{features.items.srcDirectory.label}</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{features.items.srcDirectory.description}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="src-dir"
|
||||
checked={nextjsConfig.srcDirectory}
|
||||
onCheckedChange={(checked) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
srcDirectory: checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label htmlFor="app-router">{features.items.appRouter.label}</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{features.items.appRouter.description}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="app-router"
|
||||
checked={nextjsConfig.appRouter}
|
||||
onCheckedChange={(checked) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
appRouter: checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label htmlFor="turbopack">{features.items.turbopack.label}</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{features.items.turbopack.description}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="turbopack"
|
||||
checked={nextjsConfig.turbopack || false}
|
||||
onCheckedChange={(checked) =>
|
||||
onNextjsConfigChange((current) => ({
|
||||
...current,
|
||||
turbopack: checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
90
src/components/project-settings/PackageDialog.tsx
Normal file
90
src/components/project-settings/PackageDialog.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { NpmPackage } from '@/types/project'
|
||||
import projectSettingsCopy from '@/data/project-settings.json'
|
||||
|
||||
interface PackageDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
editingPackage: NpmPackage | null
|
||||
setEditingPackage: (pkg: NpmPackage | null) => void
|
||||
onSave: () => void
|
||||
}
|
||||
|
||||
export function PackageDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
editingPackage,
|
||||
setEditingPackage,
|
||||
onSave,
|
||||
}: PackageDialogProps) {
|
||||
const copy = projectSettingsCopy.packages.dialog
|
||||
const isEditing = Boolean(editingPackage?.name)
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEditing ? copy.title.edit : copy.title.add}</DialogTitle>
|
||||
<DialogDescription>{copy.description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
{editingPackage && (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="package-name">{copy.fields.name.label}</Label>
|
||||
<Input
|
||||
id="package-name"
|
||||
value={editingPackage.name}
|
||||
onChange={(e) =>
|
||||
setEditingPackage({ ...editingPackage, name: e.target.value })
|
||||
}
|
||||
placeholder={copy.fields.name.placeholder}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="package-version">{copy.fields.version.label}</Label>
|
||||
<Input
|
||||
id="package-version"
|
||||
value={editingPackage.version}
|
||||
onChange={(e) =>
|
||||
setEditingPackage({ ...editingPackage, version: e.target.value })
|
||||
}
|
||||
placeholder={copy.fields.version.placeholder}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="package-description">{copy.fields.description.label}</Label>
|
||||
<Input
|
||||
id="package-description"
|
||||
value={editingPackage.description || ''}
|
||||
onChange={(e) =>
|
||||
setEditingPackage({ ...editingPackage, description: e.target.value })
|
||||
}
|
||||
placeholder={copy.fields.description.placeholder}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="package-dev">{copy.fields.devDependency.label}</Label>
|
||||
<Switch
|
||||
id="package-dev"
|
||||
checked={editingPackage.isDev}
|
||||
onCheckedChange={(checked) =>
|
||||
setEditingPackage({ ...editingPackage, isDev: checked })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={onSave}>Save Package</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
74
src/components/project-settings/PackageListSection.tsx
Normal file
74
src/components/project-settings/PackageListSection.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { NpmPackage } from '@/types/project'
|
||||
import { Package, Trash } from '@phosphor-icons/react'
|
||||
|
||||
interface PackageListSectionProps {
|
||||
title: string
|
||||
emptyCopy: string
|
||||
iconClassName: string
|
||||
showDevBadge?: boolean
|
||||
packages: NpmPackage[]
|
||||
onEditPackage: (pkg: NpmPackage) => void
|
||||
onDeletePackage: (packageId: string) => void
|
||||
}
|
||||
|
||||
export function PackageListSection({
|
||||
title,
|
||||
emptyCopy,
|
||||
iconClassName,
|
||||
showDevBadge = false,
|
||||
packages,
|
||||
onEditPackage,
|
||||
onDeletePackage,
|
||||
}: PackageListSectionProps) {
|
||||
return (
|
||||
<div>
|
||||
<h4 className="font-semibold mb-3">{title}</h4>
|
||||
<div className="space-y-2">
|
||||
{packages.map((pkg) => (
|
||||
<Card key={pkg.id}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Package size={18} className={iconClassName} />
|
||||
<code className="font-semibold">{pkg.name}</code>
|
||||
<Badge variant="secondary">{pkg.version}</Badge>
|
||||
{showDevBadge && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
dev
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{pkg.description && (
|
||||
<p className="text-xs text-muted-foreground mt-1">{pkg.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline" onClick={() => onEditPackage(pkg)}>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="text-destructive"
|
||||
onClick={() => onDeletePackage(pkg.id)}
|
||||
>
|
||||
<Trash size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
{packages.length === 0 && (
|
||||
<Card className="p-8 text-center">
|
||||
<p className="text-muted-foreground">{emptyCopy}</p>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
84
src/components/project-settings/PackagesTab.tsx
Normal file
84
src/components/project-settings/PackagesTab.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import { NpmPackage, NpmSettings } from '@/types/project'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import projectSettingsCopy from '@/data/project-settings.json'
|
||||
import { Plus } from '@phosphor-icons/react'
|
||||
import { PackageListSection } from '@/components/project-settings/PackageListSection'
|
||||
|
||||
interface PackagesTabProps {
|
||||
npmSettings: NpmSettings
|
||||
onNpmSettingsChange: (settings: NpmSettings | ((current: NpmSettings) => NpmSettings)) => void
|
||||
onAddPackage: () => void
|
||||
onEditPackage: (pkg: NpmPackage) => void
|
||||
onDeletePackage: (packageId: string) => void
|
||||
}
|
||||
|
||||
export function PackagesTab({
|
||||
npmSettings,
|
||||
onNpmSettingsChange,
|
||||
onAddPackage,
|
||||
onEditPackage,
|
||||
onDeletePackage,
|
||||
}: PackagesTabProps) {
|
||||
const copy = projectSettingsCopy.packages
|
||||
const dependencies = npmSettings.packages.filter((pkg) => !pkg.isDev)
|
||||
const devDependencies = npmSettings.packages.filter((pkg) => pkg.isDev)
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">{copy.title}</h3>
|
||||
<p className="text-sm text-muted-foreground">{copy.description}</p>
|
||||
</div>
|
||||
<Button onClick={onAddPackage}>
|
||||
<Plus size={16} className="mr-2" />
|
||||
{copy.dialog.title.add}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<Label htmlFor="package-manager">{copy.packageManager.label}</Label>
|
||||
<Select
|
||||
value={npmSettings.packageManager}
|
||||
onValueChange={(value: any) =>
|
||||
onNpmSettingsChange((current) => ({
|
||||
...current,
|
||||
packageManager: value,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="package-manager" className="w-48">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="npm">npm</SelectItem>
|
||||
<SelectItem value="yarn">yarn</SelectItem>
|
||||
<SelectItem value="pnpm">pnpm</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<PackageListSection
|
||||
title={copy.dependencies.title}
|
||||
emptyCopy={copy.dependencies.empty}
|
||||
iconClassName="text-primary"
|
||||
packages={dependencies}
|
||||
onEditPackage={onEditPackage}
|
||||
onDeletePackage={onDeletePackage}
|
||||
/>
|
||||
<PackageListSection
|
||||
title={copy.devDependencies.title}
|
||||
emptyCopy={copy.devDependencies.empty}
|
||||
iconClassName="text-muted-foreground"
|
||||
showDevBadge
|
||||
packages={devDependencies}
|
||||
onEditPackage={onEditPackage}
|
||||
onDeletePackage={onDeletePackage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
66
src/components/project-settings/ScriptDialog.tsx
Normal file
66
src/components/project-settings/ScriptDialog.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import projectSettingsCopy from '@/data/project-settings.json'
|
||||
|
||||
interface ScriptDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
scriptKey: string
|
||||
scriptValue: string
|
||||
setScriptKey: (value: string) => void
|
||||
setScriptValue: (value: string) => void
|
||||
editingScriptKey: string | null
|
||||
onSave: () => void
|
||||
}
|
||||
|
||||
export function ScriptDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
scriptKey,
|
||||
scriptValue,
|
||||
setScriptKey,
|
||||
setScriptValue,
|
||||
editingScriptKey,
|
||||
onSave,
|
||||
}: ScriptDialogProps) {
|
||||
const copy = projectSettingsCopy.scripts.dialog
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingScriptKey ? copy.title.edit : copy.title.add}</DialogTitle>
|
||||
<DialogDescription>{copy.description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="script-name">{copy.fields.name.label}</Label>
|
||||
<Input
|
||||
id="script-name"
|
||||
value={scriptKey}
|
||||
onChange={(e) => setScriptKey(e.target.value)}
|
||||
placeholder={copy.fields.name.placeholder}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="script-command">{copy.fields.command.label}</Label>
|
||||
<Input
|
||||
id="script-command"
|
||||
value={scriptValue}
|
||||
onChange={(e) => setScriptValue(e.target.value)}
|
||||
placeholder={copy.fields.command.placeholder}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={onSave}>Save Script</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
73
src/components/project-settings/ScriptsTab.tsx
Normal file
73
src/components/project-settings/ScriptsTab.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { NpmSettings } from '@/types/project'
|
||||
import projectSettingsCopy from '@/data/project-settings.json'
|
||||
import { Code, Plus, Trash } from '@phosphor-icons/react'
|
||||
|
||||
interface ScriptsTabProps {
|
||||
npmSettings: NpmSettings
|
||||
onAddScript: () => void
|
||||
onEditScript: (key: string, value: string) => void
|
||||
onDeleteScript: (key: string) => void
|
||||
}
|
||||
|
||||
export function ScriptsTab({
|
||||
npmSettings,
|
||||
onAddScript,
|
||||
onEditScript,
|
||||
onDeleteScript,
|
||||
}: ScriptsTabProps) {
|
||||
const copy = projectSettingsCopy.scripts
|
||||
const scripts = Object.entries(npmSettings.scripts)
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">{copy.title}</h3>
|
||||
<p className="text-sm text-muted-foreground">{copy.description}</p>
|
||||
</div>
|
||||
<Button onClick={onAddScript}>
|
||||
<Plus size={16} className="mr-2" />
|
||||
{copy.dialog.title.add}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{scripts.map(([key, value]) => (
|
||||
<Card key={key}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Code size={18} className="text-primary flex-shrink-0" />
|
||||
<code className="font-semibold text-sm">{key}</code>
|
||||
</div>
|
||||
<code className="text-xs text-muted-foreground block truncate">{value}</code>
|
||||
</div>
|
||||
<div className="flex gap-2 ml-4">
|
||||
<Button size="sm" variant="outline" onClick={() => onEditScript(key, value)}>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="text-destructive"
|
||||
onClick={() => onDeleteScript(key)}
|
||||
>
|
||||
<Trash size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
{scripts.length === 0 && (
|
||||
<Card className="p-8 text-center">
|
||||
<p className="text-muted-foreground">{copy.empty}</p>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
119
src/components/project-settings/useProjectSettingsActions.ts
Normal file
119
src/components/project-settings/useProjectSettingsActions.ts
Normal file
@@ -0,0 +1,119 @@
|
||||
import { useState } from 'react'
|
||||
import { NpmPackage, NpmSettings } from '@/types/project'
|
||||
|
||||
interface UseProjectSettingsActionsProps {
|
||||
onNpmSettingsChange: (settings: NpmSettings | ((current: NpmSettings) => NpmSettings)) => void
|
||||
}
|
||||
|
||||
export function useProjectSettingsActions({
|
||||
onNpmSettingsChange,
|
||||
}: UseProjectSettingsActionsProps) {
|
||||
const [packageDialogOpen, setPackageDialogOpen] = useState(false)
|
||||
const [editingPackage, setEditingPackage] = useState<NpmPackage | null>(null)
|
||||
const [scriptDialogOpen, setScriptDialogOpen] = useState(false)
|
||||
const [scriptKey, setScriptKey] = useState('')
|
||||
const [scriptValue, setScriptValue] = useState('')
|
||||
const [editingScriptKey, setEditingScriptKey] = useState<string | null>(null)
|
||||
|
||||
const handleAddPackage = () => {
|
||||
setEditingPackage({
|
||||
id: `package-${Date.now()}`,
|
||||
name: '',
|
||||
version: 'latest',
|
||||
isDev: false,
|
||||
})
|
||||
setPackageDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleEditPackage = (pkg: NpmPackage) => {
|
||||
setEditingPackage({ ...pkg })
|
||||
setPackageDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleSavePackage = () => {
|
||||
if (!editingPackage || !editingPackage.name) return
|
||||
|
||||
onNpmSettingsChange((current) => {
|
||||
const existingIndex = current.packages.findIndex((p) => p.id === editingPackage.id)
|
||||
if (existingIndex >= 0) {
|
||||
const updated = [...current.packages]
|
||||
updated[existingIndex] = editingPackage
|
||||
return { ...current, packages: updated }
|
||||
}
|
||||
return { ...current, packages: [...current.packages, editingPackage] }
|
||||
})
|
||||
|
||||
setPackageDialogOpen(false)
|
||||
setEditingPackage(null)
|
||||
}
|
||||
|
||||
const handleDeletePackage = (packageId: string) => {
|
||||
onNpmSettingsChange((current) => ({
|
||||
...current,
|
||||
packages: current.packages.filter((p) => p.id !== packageId),
|
||||
}))
|
||||
}
|
||||
|
||||
const handleAddScript = () => {
|
||||
setScriptKey('')
|
||||
setScriptValue('')
|
||||
setEditingScriptKey(null)
|
||||
setScriptDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleEditScript = (key: string, value: string) => {
|
||||
setScriptKey(key)
|
||||
setScriptValue(value)
|
||||
setEditingScriptKey(key)
|
||||
setScriptDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleSaveScript = () => {
|
||||
if (!scriptKey || !scriptValue) return
|
||||
|
||||
onNpmSettingsChange((current) => {
|
||||
const scripts = { ...current.scripts }
|
||||
if (editingScriptKey && editingScriptKey !== scriptKey) {
|
||||
delete scripts[editingScriptKey]
|
||||
}
|
||||
scripts[scriptKey] = scriptValue
|
||||
return { ...current, scripts }
|
||||
})
|
||||
|
||||
setScriptDialogOpen(false)
|
||||
setScriptKey('')
|
||||
setScriptValue('')
|
||||
setEditingScriptKey(null)
|
||||
}
|
||||
|
||||
const handleDeleteScript = (key: string) => {
|
||||
onNpmSettingsChange((current) => {
|
||||
const scripts = { ...current.scripts }
|
||||
delete scripts[key]
|
||||
return { ...current, scripts }
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
packageDialogOpen,
|
||||
setPackageDialogOpen,
|
||||
editingPackage,
|
||||
setEditingPackage,
|
||||
scriptDialogOpen,
|
||||
setScriptDialogOpen,
|
||||
scriptKey,
|
||||
setScriptKey,
|
||||
scriptValue,
|
||||
setScriptValue,
|
||||
editingScriptKey,
|
||||
setEditingScriptKey,
|
||||
handleAddPackage,
|
||||
handleEditPackage,
|
||||
handleSavePackage,
|
||||
handleDeletePackage,
|
||||
handleAddScript,
|
||||
handleEditScript,
|
||||
handleSaveScript,
|
||||
handleDeleteScript,
|
||||
}
|
||||
}
|
||||
120
src/data/project-settings.json
Normal file
120
src/data/project-settings.json
Normal file
@@ -0,0 +1,120 @@
|
||||
{
|
||||
"header": {
|
||||
"title": "Project Settings",
|
||||
"description": "Configure Next.js and npm settings"
|
||||
},
|
||||
"tabs": {
|
||||
"nextjs": "Next.js Config",
|
||||
"packages": "NPM Packages",
|
||||
"scripts": "Scripts",
|
||||
"data": "Data"
|
||||
},
|
||||
"nextjs": {
|
||||
"application": {
|
||||
"title": "Application Settings",
|
||||
"description": "Basic Next.js application configuration",
|
||||
"fields": {
|
||||
"appName": {
|
||||
"label": "Application Name",
|
||||
"placeholder": "my-nextjs-app"
|
||||
},
|
||||
"importAlias": {
|
||||
"label": "Import Alias",
|
||||
"placeholder": "@/*",
|
||||
"helper": "Used for module imports (e.g., import { Button } from \"@/components\")"
|
||||
}
|
||||
}
|
||||
},
|
||||
"features": {
|
||||
"title": "Features",
|
||||
"description": "Enable or disable Next.js features",
|
||||
"items": {
|
||||
"typescript": {
|
||||
"label": "TypeScript",
|
||||
"description": "Use TypeScript for type safety"
|
||||
},
|
||||
"eslint": {
|
||||
"label": "ESLint",
|
||||
"description": "Code linting and formatting"
|
||||
},
|
||||
"tailwind": {
|
||||
"label": "Tailwind CSS",
|
||||
"description": "Utility-first CSS framework"
|
||||
},
|
||||
"srcDirectory": {
|
||||
"label": "Use src/ Directory",
|
||||
"description": "Organize code inside src/ folder"
|
||||
},
|
||||
"appRouter": {
|
||||
"label": "App Router",
|
||||
"description": "Use the new App Router (vs Pages Router)"
|
||||
},
|
||||
"turbopack": {
|
||||
"label": "Turbopack (Beta)",
|
||||
"description": "Faster incremental bundler"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"packages": {
|
||||
"title": "NPM Packages",
|
||||
"description": "Manage project dependencies",
|
||||
"packageManager": {
|
||||
"label": "Package Manager"
|
||||
},
|
||||
"dependencies": {
|
||||
"title": "Dependencies",
|
||||
"empty": "No dependencies added yet"
|
||||
},
|
||||
"devDependencies": {
|
||||
"title": "Dev Dependencies",
|
||||
"empty": "No dev dependencies added yet"
|
||||
},
|
||||
"dialog": {
|
||||
"title": {
|
||||
"add": "Add Package",
|
||||
"edit": "Edit Package"
|
||||
},
|
||||
"description": "Configure npm package details",
|
||||
"fields": {
|
||||
"name": {
|
||||
"label": "Package Name",
|
||||
"placeholder": "e.g., react-query, axios"
|
||||
},
|
||||
"version": {
|
||||
"label": "Version",
|
||||
"placeholder": "latest, ^1.0.0, ~2.3.4"
|
||||
},
|
||||
"description": {
|
||||
"label": "Description (Optional)",
|
||||
"placeholder": "What is this package for?"
|
||||
},
|
||||
"devDependency": {
|
||||
"label": "Development Dependency"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"title": "NPM Scripts",
|
||||
"description": "Define custom commands for your project",
|
||||
"empty": "No scripts defined yet",
|
||||
"dialog": {
|
||||
"title": {
|
||||
"add": "Add Script",
|
||||
"edit": "Edit Script"
|
||||
},
|
||||
"description": "Define a custom npm script command",
|
||||
"fields": {
|
||||
"name": {
|
||||
"label": "Script Name",
|
||||
"placeholder": "e.g., dev, build, test"
|
||||
},
|
||||
"command": {
|
||||
"label": "Command",
|
||||
"placeholder": "e.g., next dev, tsc --noEmit"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user