mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-10-26 13:09:04 +08:00
feat: implement TanStack React Form for icon submission
- Create new AdvancedIconSubmissionFormTanStack component - Replace useState form management with useForm hook - Add comprehensive field-level validation - Implement type-safe form data structure - Add real-time validation with immediate feedback - Maintain all existing functionality (file uploads, previews, variants) - Improve performance with optimized re-renders
This commit is contained in:
Thomas Camlong
570
web/src/components/advanced-icon-submission-form-tanstack.tsx
Normal file
570
web/src/components/advanced-icon-submission-form-tanstack.tsx
Normal file
@@ -0,0 +1,570 @@
|
||||
"use client"
|
||||
|
||||
import { AlertCircle, Check, Plus, X } from "lucide-react"
|
||||
import { useForm } from "@tanstack/react-form"
|
||||
import { toast } from "sonner"
|
||||
import { IconNameCombobox } from "@/components/icon-name-combobox"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Dropzone, DropzoneContent, DropzoneEmptyState } from "@/components/ui/shadcn-io/dropzone"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { pb } from "@/lib/pb"
|
||||
import { useState } from "react"
|
||||
|
||||
interface VariantConfig {
|
||||
id: string
|
||||
label: string
|
||||
description: string
|
||||
field: "base" | "dark" | "light" | "wordmark" | "wordmark_dark"
|
||||
}
|
||||
|
||||
const VARIANTS: VariantConfig[] = [
|
||||
{
|
||||
id: "base",
|
||||
label: "Base Icon",
|
||||
description: "Main icon file (required)",
|
||||
field: "base",
|
||||
},
|
||||
{
|
||||
id: "dark",
|
||||
label: "Dark Variant",
|
||||
description: "Icon optimized for dark backgrounds",
|
||||
field: "dark",
|
||||
},
|
||||
{
|
||||
id: "light",
|
||||
label: "Light Variant",
|
||||
description: "Icon optimized for light backgrounds",
|
||||
field: "light",
|
||||
},
|
||||
{
|
||||
id: "wordmark",
|
||||
label: "Wordmark",
|
||||
description: "Logo with text/wordmark",
|
||||
field: "wordmark",
|
||||
},
|
||||
{
|
||||
id: "wordmark_dark",
|
||||
label: "Wordmark Dark",
|
||||
description: "Wordmark optimized for dark backgrounds",
|
||||
field: "wordmark_dark",
|
||||
},
|
||||
]
|
||||
|
||||
const AVAILABLE_CATEGORIES = [
|
||||
"automation",
|
||||
"cloud",
|
||||
"database",
|
||||
"development",
|
||||
"entertainment",
|
||||
"finance",
|
||||
"gaming",
|
||||
"home-automation",
|
||||
"media",
|
||||
"monitoring",
|
||||
"network",
|
||||
"security",
|
||||
"social",
|
||||
"storage",
|
||||
"tools",
|
||||
"utility",
|
||||
"other",
|
||||
]
|
||||
|
||||
interface FormData {
|
||||
iconName: string
|
||||
isExistingIcon: boolean
|
||||
activeVariants: string[]
|
||||
files: Record<string, File[]>
|
||||
filePreviews: Record<string, string>
|
||||
aliases: string[]
|
||||
aliasInput: string
|
||||
categories: string[]
|
||||
description: string
|
||||
}
|
||||
|
||||
export function AdvancedIconSubmissionFormTanStack() {
|
||||
const [filePreviews, setFilePreviews] = useState<Record<string, string>>({})
|
||||
|
||||
const form = useForm<FormData>({
|
||||
defaultValues: {
|
||||
iconName: "",
|
||||
isExistingIcon: false,
|
||||
activeVariants: ["base"],
|
||||
files: {},
|
||||
filePreviews: {},
|
||||
aliases: [],
|
||||
aliasInput: "",
|
||||
categories: [],
|
||||
description: "",
|
||||
},
|
||||
validators: {
|
||||
onChange: ({ value }) => {
|
||||
const errors: Partial<Record<keyof FormData, string>> = {}
|
||||
|
||||
if (!value.iconName.trim()) {
|
||||
errors.iconName = "Icon name is required"
|
||||
} else if (!/^[a-z0-9-]+$/.test(value.iconName)) {
|
||||
errors.iconName = "Icon name must contain only lowercase letters, numbers, and hyphens"
|
||||
}
|
||||
|
||||
if (!value.files.base || value.files.base.length === 0) {
|
||||
errors.files = "At least the base icon is required"
|
||||
}
|
||||
|
||||
if (value.categories.length === 0) {
|
||||
errors.categories = "At least one category is required"
|
||||
}
|
||||
|
||||
return Object.keys(errors).length > 0 ? errors : undefined
|
||||
},
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
if (!pb.authStore.isValid) {
|
||||
toast.error("You must be logged in to submit an icon")
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const assetFiles: File[] = []
|
||||
|
||||
// Add base file
|
||||
if (value.files.base?.[0]) {
|
||||
assetFiles.push(value.files.base[0])
|
||||
}
|
||||
|
||||
// Build extras object
|
||||
const extras: any = {
|
||||
aliases: value.aliases,
|
||||
categories: value.categories,
|
||||
base: value.files.base[0]?.name.split(".").pop() || "svg",
|
||||
}
|
||||
|
||||
// Add color variants if present
|
||||
if (value.files.dark?.[0] || value.files.light?.[0]) {
|
||||
extras.colors = {}
|
||||
if (value.files.dark?.[0]) {
|
||||
extras.colors.dark = value.files.dark[0].name
|
||||
assetFiles.push(value.files.dark[0])
|
||||
}
|
||||
if (value.files.light?.[0]) {
|
||||
extras.colors.light = value.files.light[0].name
|
||||
assetFiles.push(value.files.light[0])
|
||||
}
|
||||
}
|
||||
|
||||
// Add wordmark variants if present
|
||||
if (value.files.wordmark?.[0] || value.files.wordmark_dark?.[0]) {
|
||||
extras.wordmark = {}
|
||||
if (value.files.wordmark?.[0]) {
|
||||
extras.wordmark.light = value.files.wordmark[0].name
|
||||
assetFiles.push(value.files.wordmark[0])
|
||||
}
|
||||
if (value.files.wordmark_dark?.[0]) {
|
||||
extras.wordmark.dark = value.files.wordmark_dark[0].name
|
||||
assetFiles.push(value.files.wordmark_dark[0])
|
||||
}
|
||||
}
|
||||
|
||||
// Create submission
|
||||
const submissionData = {
|
||||
name: value.iconName,
|
||||
assets: assetFiles,
|
||||
created_by: pb.authStore.model?.id,
|
||||
status: "pending",
|
||||
extras: extras,
|
||||
}
|
||||
|
||||
await pb.collection("submissions").create(submissionData)
|
||||
|
||||
toast.success(value.isExistingIcon ? "Icon update submitted!" : "Icon submitted!", {
|
||||
description: value.isExistingIcon
|
||||
? `Your update for "${value.iconName}" has been submitted for review`
|
||||
: `Your icon "${value.iconName}" has been submitted for review`,
|
||||
})
|
||||
|
||||
// Reset form
|
||||
form.reset()
|
||||
setFilePreviews({})
|
||||
} catch (error: any) {
|
||||
console.error("Submission error:", error)
|
||||
toast.error("Failed to submit icon", {
|
||||
description: error?.message || "Please try again later",
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const handleAddVariant = (variantId: string) => {
|
||||
const currentVariants = form.getFieldValue("activeVariants")
|
||||
if (!currentVariants.includes(variantId)) {
|
||||
form.setFieldValue("activeVariants", [...currentVariants, variantId])
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveVariant = (variantId: string) => {
|
||||
if (variantId !== "base") {
|
||||
const currentVariants = form.getFieldValue("activeVariants")
|
||||
form.setFieldValue("activeVariants", currentVariants.filter((id) => id !== variantId))
|
||||
|
||||
const currentFiles = form.getFieldValue("files")
|
||||
const newFiles = { ...currentFiles }
|
||||
delete newFiles[variantId]
|
||||
form.setFieldValue("files", newFiles)
|
||||
|
||||
const newPreviews = { ...filePreviews }
|
||||
delete newPreviews[variantId]
|
||||
setFilePreviews(newPreviews)
|
||||
}
|
||||
}
|
||||
|
||||
const handleFileDrop = (variantId: string, droppedFiles: File[]) => {
|
||||
const currentFiles = form.getFieldValue("files")
|
||||
form.setFieldValue("files", {
|
||||
...currentFiles,
|
||||
[variantId]: droppedFiles,
|
||||
})
|
||||
|
||||
// Generate preview for the first file
|
||||
if (droppedFiles.length > 0) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
if (typeof e.target?.result === 'string') {
|
||||
setFilePreviews({
|
||||
...filePreviews,
|
||||
[variantId]: e.target.result,
|
||||
})
|
||||
}
|
||||
}
|
||||
reader.readAsDataURL(droppedFiles[0])
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddAlias = () => {
|
||||
const aliasInput = form.getFieldValue("aliasInput")
|
||||
const trimmedAlias = aliasInput.trim()
|
||||
if (trimmedAlias) {
|
||||
const currentAliases = form.getFieldValue("aliases")
|
||||
if (!currentAliases.includes(trimmedAlias)) {
|
||||
form.setFieldValue("aliases", [...currentAliases, trimmedAlias])
|
||||
}
|
||||
form.setFieldValue("aliasInput", "")
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveAlias = (alias: string) => {
|
||||
const currentAliases = form.getFieldValue("aliases")
|
||||
form.setFieldValue("aliases", currentAliases.filter((a) => a !== alias))
|
||||
}
|
||||
|
||||
const toggleCategory = (category: string) => {
|
||||
const currentCategories = form.getFieldValue("categories")
|
||||
if (currentCategories.includes(category)) {
|
||||
form.setFieldValue("categories", currentCategories.filter((c) => c !== category))
|
||||
} else {
|
||||
form.setFieldValue("categories", [...currentCategories, category])
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
form.handleSubmit()
|
||||
}}
|
||||
>
|
||||
{/* Icon Name Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Icon Identification</CardTitle>
|
||||
<CardDescription>Choose a unique identifier for your icon</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<form.Field
|
||||
name="iconName"
|
||||
validators={{
|
||||
onChange: ({ value }) => {
|
||||
if (!value) return "Icon name is required"
|
||||
if (!/^[a-z0-9-]+$/.test(value)) {
|
||||
return "Icon name must contain only lowercase letters, numbers, and hyphens"
|
||||
}
|
||||
return undefined
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(field) => (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="icon-name">Icon Name / ID</Label>
|
||||
<IconNameCombobox
|
||||
value={field.state.value}
|
||||
onValueChange={field.handleChange}
|
||||
onIsExisting={(isExisting) => form.setFieldValue("isExistingIcon", isExisting)}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">Use lowercase letters, numbers, and hyphens only</p>
|
||||
{!field.state.meta.isValid && field.state.meta.isTouched && (
|
||||
<p className="text-sm text-destructive">{field.state.meta.errors.join(", ")}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</form.Field>
|
||||
|
||||
<form.Field name="isExistingIcon">
|
||||
{(field) => (
|
||||
<>
|
||||
{field.state.value && (
|
||||
<Alert>
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
This icon ID already exists. Your submission will be treated as an <strong>update</strong> to the
|
||||
existing icon.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{form.getFieldValue("iconName") && !field.state.value && (
|
||||
<Alert className="border-green-500/50 bg-green-500/10">
|
||||
<AlertDescription className="text-green-600 dark:text-green-400">
|
||||
This is a new icon submission.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</form.Field>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Icon Variants Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<CardTitle>Icon Variants</CardTitle>
|
||||
<CardDescription>Upload different versions of your icon</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<form.Field name="activeVariants">
|
||||
{(field) => (
|
||||
<>
|
||||
{field.state.value.map((variantId) => {
|
||||
const variant = VARIANTS.find((v) => v.id === variantId)
|
||||
if (!variant) return null
|
||||
|
||||
return (
|
||||
<div key={variantId} className="space-y-3 p-4 border rounded-lg bg-background/50">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="text-base font-semibold">{variant.label}</Label>
|
||||
{variant.id === "base" && <Badge variant="secondary">Required</Badge>}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">{variant.description}</p>
|
||||
</div>
|
||||
{variant.id !== "base" && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRemoveVariant(variantId)}
|
||||
className="text-destructive"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Dropzone
|
||||
accept={{
|
||||
"image/svg+xml": [".svg"],
|
||||
"image/png": [".png"],
|
||||
"image/webp": [".webp"],
|
||||
}}
|
||||
maxSize={1024 * 1024 * 5}
|
||||
maxFiles={1}
|
||||
onDrop={(droppedFiles) => handleFileDrop(variantId, droppedFiles)}
|
||||
onError={(error) => toast.error(error.message)}
|
||||
src={form.getFieldValue("files")[variantId]}
|
||||
>
|
||||
<DropzoneEmptyState />
|
||||
<DropzoneContent>
|
||||
{filePreviews[variantId] && (
|
||||
<div className="h-[102px] w-full">
|
||||
<img
|
||||
alt="Preview"
|
||||
className="absolute top-0 left-0 h-full w-full object-cover"
|
||||
src={filePreviews[variantId]}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</DropzoneContent>
|
||||
</Dropzone>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</form.Field>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<p className="text-sm text-muted-foreground w-full mb-2">Add variant:</p>
|
||||
{VARIANTS.filter((v) => !form.getFieldValue("activeVariants").includes(v.id)).map((variant) => (
|
||||
<Button
|
||||
key={variant.id}
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleAddVariant(variant.id)}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
{variant.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Metadata Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Icon Metadata</CardTitle>
|
||||
<CardDescription>Provide additional information about your icon</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Categories */}
|
||||
<form.Field name="categories">
|
||||
{(field) => (
|
||||
<div className="space-y-3">
|
||||
<Label>Categories</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{AVAILABLE_CATEGORIES.map((category) => (
|
||||
<Badge
|
||||
key={category}
|
||||
variant={field.state.value.includes(category) ? "default" : "outline"}
|
||||
className="cursor-pointer hover:bg-primary/80"
|
||||
onClick={() => toggleCategory(category)}
|
||||
>
|
||||
{category.replace(/-/g, " ")}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Select all categories that apply to your icon</p>
|
||||
{!field.state.meta.isValid && field.state.meta.isTouched && (
|
||||
<p className="text-sm text-destructive">{field.state.meta.errors.join(", ")}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</form.Field>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Aliases */}
|
||||
<div className="space-y-3">
|
||||
<Label htmlFor="alias-input">Aliases</Label>
|
||||
<form.Field name="aliasInput">
|
||||
{(field) => (
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="alias-input"
|
||||
placeholder="Add alternative name..."
|
||||
value={field.state.value}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault()
|
||||
handleAddAlias()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button type="button" onClick={handleAddAlias}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</form.Field>
|
||||
|
||||
<form.Field name="aliases">
|
||||
{(field) => (
|
||||
<>
|
||||
{field.state.value.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{field.state.value.map((alias) => (
|
||||
<Badge key={alias} variant="secondary" className="flex items-center gap-1 pl-2 pr-1">
|
||||
{alias}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-4 w-4 p-0 hover:bg-transparent"
|
||||
onClick={() => handleRemoveAlias(alias)}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</form.Field>
|
||||
<p className="text-sm text-muted-foreground">Alternative names that users might search for</p>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Description */}
|
||||
<form.Field name="description">
|
||||
{(field) => (
|
||||
<div className="space-y-3">
|
||||
<Label htmlFor="description">Description (Optional)</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="Brief description of the icon or service it represents..."
|
||||
value={field.state.value}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
rows={3}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">This helps reviewers understand your submission</p>
|
||||
</div>
|
||||
)}
|
||||
</form.Field>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div className="flex justify-end gap-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
form.reset()
|
||||
setFilePreviews({})
|
||||
}}
|
||||
>
|
||||
Clear Form
|
||||
</Button>
|
||||
<form.Subscribe
|
||||
selector={(state) => [state.canSubmit, state.isSubmitting]}
|
||||
>
|
||||
{([canSubmit, isSubmitting]: [boolean, boolean]) => (
|
||||
<Button type="submit" disabled={!canSubmit || isSubmitting} size="lg">
|
||||
{isSubmitting ? "Submitting..." : form.getFieldValue("isExistingIcon") ? "Submit Update" : "Submit New Icon"}
|
||||
</Button>
|
||||
)}
|
||||
</form.Subscribe>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user