Enhance forms with validation and terminology

Implements enhanced inline validation with contextual messages and examples, adds a comprehensive theme park terminology tool (tooltip and glossary), and integrates these features into ParkForm and RideForm (including header actions and descriptive hints). Also introduces new helper modules and components to support validated inputs and glossary tooltips.
2025-12-24 12:11:12 -05:00 · 2025-11-11 23:25:15 +00:00
parent 67ce8b5a88
commit 985454f0d9
8 changed files with 875 additions and 37 deletions
--- a/src/components/help/TerminologyDialog.tsx
+++ b/src/components/help/TerminologyDialog.tsx
@@ -0,0 +1,135 @@
+import { useState } from "react";
+import { BookOpen, Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { getAllCategories, getTermsByCategory, searchGlossary, type GlossaryTerm } from "@/lib/glossary";
+
+export function TerminologyDialog() {
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  
+  const categories = getAllCategories();
+  const searchResults = searchQuery ? searchGlossary(searchQuery) : [];
+  
+  const renderTermCard = (term: GlossaryTerm) => (
+    <div key={term.term} className="p-4 border rounded-lg space-y-2 hover:bg-muted/50 transition-colors">
+      <div className="flex items-start justify-between gap-2">
+        <h4 className="font-semibold">{term.term}</h4>
+        <Badge variant="secondary" className="text-xs shrink-0">
+          {term.category.replace('-', ' ')}
+        </Badge>
+      </div>
+      <p className="text-sm text-muted-foreground">{term.definition}</p>
+      {term.example && (
+        <p className="text-xs text-muted-foreground italic">
+          <span className="font-medium">Example:</span> {term.example}
+        </p>
+      )}
+      {term.relatedTerms && term.relatedTerms.length > 0 && (
+        <div className="flex flex-wrap gap-1 pt-1">
+          <span className="text-xs text-muted-foreground">Related:</span>
+          {term.relatedTerms.map(rt => (
+            <Badge key={rt} variant="outline" className="text-xs">
+              {rt.replace(/-/g, ' ')}
+            </Badge>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+  
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          <BookOpen className="w-4 h-4 mr-2" />
+          Terminology
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-4xl max-h-[80vh]">
+        <DialogHeader>
+          <DialogTitle>Theme Park Terminology Reference</DialogTitle>
+          <DialogDescription>
+            Quick reference for technical terms, manufacturers, and ride types
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="space-y-4">
+          {/* Search */}
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              placeholder="Search terminology..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+          
+          {/* Results */}
+          {searchQuery ? (
+            <ScrollArea className="h-[400px]">
+              <div className="space-y-3">
+                {searchResults.length > 0 ? (
+                  searchResults.map(renderTermCard)
+                ) : (
+                  <div className="text-center py-12 text-muted-foreground">
+                    No terms found matching "{searchQuery}"
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          ) : (
+            <Tabs defaultValue="manufacturer" className="w-full">
+              <TabsList className="grid w-full grid-cols-4 lg:grid-cols-7">
+                {categories.map(cat => (
+                  <TabsTrigger key={cat} value={cat} className="text-xs">
+                    {cat === 'manufacturer' ? 'Mfg.' : 
+                     cat === 'technology' ? 'Tech' :
+                     cat === 'measurement' ? 'Units' :
+                     cat.charAt(0).toUpperCase() + cat.slice(1).substring(0, 4)}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+              
+              {categories.map(cat => {
+                const terms = getTermsByCategory(cat);
+                return (
+                  <TabsContent key={cat} value={cat}>
+                    <ScrollArea className="h-[400px]">
+                      <div className="space-y-3 pr-4">
+                        <div className="flex items-center gap-2 pb-2 border-b">
+                          <h3 className="font-semibold capitalize">
+                            {cat.replace('-', ' ')}
+                          </h3>
+                          <Badge variant="secondary">{terms.length} terms</Badge>
+                        </div>
+                        {terms.map(renderTermCard)}
+                      </div>
+                    </ScrollArea>
+                  </TabsContent>
+                );
+              })}
+            </Tabs>
+          )}
+        </div>
+        
+        <div className="flex items-center gap-2 pt-4 border-t text-xs text-muted-foreground">
+          <Badge variant="outline" className="text-xs">Tip</Badge>
+          <span>Hover over underlined terms in forms to see quick definitions</span>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}