mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-05-06 11:29:35 +00:00
Refactor project settings tabs
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
import { SeedDataManager } from '@/components/molecules'
|
||||
|
||||
export function DataTab() {
|
||||
return (
|
||||
<div className="max-w-2xl">
|
||||
<SeedDataManager />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user