feat: finalised use of id on verb. Style elements on edit mode

AlexVOiceover · AlexVOiceover · commit 79cffeb81000 · 2025-03-08T16:13:00.000Z
diff --git a/data/verbs.json b/data/verbs.json
diff --git a/src/components/statementWizard/SentimentVerbPicker.tsx b/src/components/statementWizard/SentimentVerbPicker.tsx
@@ -9,12 +9,12 @@ import VerbGrid from './VerbGrid';
 import { getAllDescendants } from '../../../utils/categoryUtils';
 
 interface SentimentVerbPickerProps {
-  selectedVerb: string;
+  selectedVerbId: string;
   onVerbSelect: (verb: Verb) => void;
 }
 
 const SentimentVerbPicker: React.FC<SentimentVerbPickerProps> = ({
-  selectedVerb,
+  selectedVerbId,
   onVerbSelect,
 }) => {
   // Use a navigation stack (path) to track filter levels.
@@ -63,7 +63,7 @@ const SentimentVerbPicker: React.FC<SentimentVerbPickerProps> = ({
       <VerbGrid
         verbs={filteredVerbs}
         rootCategory={rootCategory}
-        selectedVerb={selectedVerb}
+        selectedVerbId={selectedVerbId}
         onVerbSelect={onVerbSelect}
       />
     </div>
diff --git a/src/components/statementWizard/StatementPreview.tsx b/src/components/statementWizard/StatementPreview.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import type { Entry } from '../../../types/entries';
+import { getVerbName } from '../../../utils/verbUtils';
+
 interface StatementPreviewProps {
   selection: Entry;
 }
@@ -18,7 +20,7 @@ const StatementPreview: React.FC<StatementPreviewProps> = ({ selection }) => {
         )}
         {verb && (
           <span className={`px-2 py-1 rounded bg-verbSelector text-black`}>
-            {verb}
+            {getVerbName(verb)}
           </span>
         )}
         {object && (
diff --git a/src/components/statementWizard/SubjectTiles.tsx b/src/components/statementWizard/SubjectTiles.tsx
@@ -56,10 +56,17 @@ export const SubjectTiles: React.FC<SubjectTilesProps> = ({
         <Button
           key={tile.value}
           variant={selectedValue === tile.value ? 'default' : 'outline'}
-          className={`h-auto py-4 px-6 text-left flex flex-col items-start space-y-1 transition-all ${
-            selectedValue === tile.value ? 'bg-blue-200' : ''
-          }`}
+          selected={selectedValue === tile.value}
+          className={`h-auto py-4 px-6 text-left flex flex-col items-start space-y-1  
+      
+          `}
           onClick={() => onSelect(tile.value)}
+          style={
+            {
+              // Set the CSS variable to the subject selector color. This is used on buttonVariants.ts
+              '--tile-color': 'var(--subject-selector)',
+            } as React.CSSProperties
+          }
         >
           <span className='font-medium'>{tile.label}</span>
         </Button>
diff --git a/src/components/statementWizard/VerbGrid.tsx b/src/components/statementWizard/VerbGrid.tsx
@@ -9,33 +9,37 @@ import { getVerbColor } from '../../../utils/categoryUtils';
 interface VerbGridProps {
   verbs: Verb[];
   rootCategory: Category;
-  selectedVerb: string;
+  selectedVerbId: string;
   onVerbSelect: (verb: Verb) => void;
 }
 
 const VerbGrid: React.FC<VerbGridProps> = ({
   verbs,
   rootCategory,
-  selectedVerb,
+  selectedVerbId,
   onVerbSelect,
 }) => {
   const sortedVerbs = [...verbs].sort((a, b) => a.name.localeCompare(b.name));
   return (
     <div className='grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-4 p-4 overflow-auto'>
       {sortedVerbs.map((verb) => {
         const tileColor = getVerbColor(verb, rootCategory);
-        const isSelected = verb.name === selectedVerb;
+        console.log('Verb name:', verb.name, ' SelectedVerb:', selectedVerbId);
+        const isSelected = verb.id === selectedVerbId;
         return (
           <Button
             key={verb.name}
             onClick={() => onVerbSelect(verb)}
-            variant={isSelected ? 'default' : 'outline'}
+            variant={'outline'}
+            selected={isSelected}
             className='flex items-center justify-center p-4 rounded-lg shadow-md'
-            style={{
-              backgroundColor: isSelected ? tileColor : 'transparent',
-              color: isSelected ? getContrastColor(tileColor) : 'inherit',
-              borderColor: tileColor,
-            }}
+            style={
+              {
+                '--tile-color': tileColor,
+                color: isSelected ? getContrastColor(tileColor) : 'inherit',
+                borderColor: tileColor,
+              } as React.CSSProperties
+            }
           >
             <span className='font-medium'>{verb.name}</span>
           </Button>
diff --git a/src/components/statementWizard/selectors/PrivacySelector.tsx b/src/components/statementWizard/selectors/PrivacySelector.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '../ui/button';
+import { Button } from '../../ui/button';
 import { Mail } from 'lucide-react';
 
 interface PrivacySelectorProps {
diff --git a/src/components/statementWizard/selectors/SubjectSelector.tsx b/src/components/statementWizard/selectors/SubjectSelector.tsx
@@ -1,11 +1,10 @@
-// src/components/ui/subject-selector.tsx
 import React, { useState, useMemo } from 'react';
 import { Check, ChevronsUpDown, Plus } from 'lucide-react';
-import { cn } from '../../../lib/utils';
-import { Button } from './button';
-import { Popover, PopoverContent, PopoverTrigger } from './popover';
-import { Input } from './input';
-import descriptorsData from '../../../data/descriptors.json';
+import { cn } from '../../../../lib/utils';
+import { Button } from '../../ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
+import { Input } from '../../ui/input';
+import descriptorsData from '../../../../data/descriptors.json';
 
 interface SubjectOption {
   label: string;
@@ -90,7 +89,7 @@ const SubjectSelector: React.FC<SubjectSelectorProps> = ({
                   }}
                   className={cn(
                     'flex w-full items-center px-2 py-2 hover:bg-gray-100 rounded',
-                    { 'bg-blue-200': option.value === value } // Selected background
+                    { 'bg-red-200': option.value === value } // Selected background
                   )}
                 >
                   <Check
diff --git a/src/components/statementWizard/selectors/VerbSelector.tsx b/src/components/statementWizard/selectors/VerbSelector.tsx
@@ -4,9 +4,9 @@ import type React from 'react';
 import { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import categoryStructure from '../../../data/categoryStructure.json';
-import verbData from '../../../data/verbs.json';
-import type { Category, Verb } from '../../../types/entries';
+import categoryStructure from '../../../../data/categoryStructure.json';
+import verbData from '../../../../data/verbs.json';
+import type { Category, Verb } from '../../../../types/entries';
 
 interface VerbSelectorProps {
   onVerbSelect?: (verb: Verb) => void;
@@ -123,21 +123,25 @@ const VerbSelector: React.FC<VerbSelectorProps> = ({ onVerbSelect }) => {
     );
 
     return renderGrid(
-      verbs.map((verb) => (
-        <motion.button
-          key={verb.name}
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
-          className='p-4 rounded-lg shadow-md flex items-center justify-center text-center'
-          style={{
-            background: verb.color,
-            color: getContrastColor(verb.color),
-          }}
-          onClick={() => handleVerbSelect(verb)}
-        >
-          <span className='break-words'>{verb.name}</span>
-        </motion.button>
-      ))
+      verbs.map((verb) => {
+        // Use this to highlight the selected verb
+        //const isSelected = selectedVerb ? verb.id === selectedVerb.id : false;
+        return (
+          <motion.button
+            key={verb.id} // use verb.id as key
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            className='p-4 rounded-lg shadow-md flex items-center justify-center text-center'
+            style={{
+              background: verb.color,
+              color: getContrastColor(verb.color),
+            }}
+            onClick={() => handleVerbSelect(verb)}
+          >
+            <span className='break-words'>{verb.name}</span>
+          </motion.button>
+        );
+      })
     );
   };
 
diff --git a/src/components/statementWizard/steps/PrivacyStep.tsx b/src/components/statementWizard/steps/PrivacyStep.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import StepContainer from '../StepContainer';
-import { PrivacySelector } from '../PrivacySelector';
+import { PrivacySelector } from '../selectors/PrivacySelector';
 
 interface PrivacyStepProps {
   isPublic: boolean;
diff --git a/src/components/statementWizard/steps/VerbStep.tsx b/src/components/statementWizard/steps/VerbStep.tsx
@@ -1,8 +1,7 @@
-// src/components/statementWizard/steps/VerbStep.tsx
 import React from 'react';
 import StepContainer from '../StepContainer';
 import SentimentVerbPicker from '../SentimentVerbPicker';
-import nlp from 'compromise';
+import type { Verb } from '../../../../types/entries';
 
 interface VerbStepProps {
   subject: string;
@@ -21,15 +20,9 @@ export const VerbStep: React.FC<VerbStepProps> = ({
     <StepContainer subQuestion={subQuestion}>
       <div className='flex flex-col h-[60vh] p-4 rounded-md'>
         <SentimentVerbPicker
-          selectedVerb={selection}
-          onVerbSelect={(verb) => {
-            // Process verb to present tense and lowercase it
-            const processedVerb = nlp(verb.name)
-              .verbs()
-              .toPresentTense()
-              .out('text')
-              .toLowerCase();
-            onUpdate(processedVerb);
+          selectedVerbId={selection}
+          onVerbSelect={(verb: Verb) => {
+            onUpdate(verb.id);
           }}
         />
       </div>
diff --git a/src/components/statements/StatementItem.tsx b/src/components/statements/StatementItem.tsx
@@ -1,8 +1,9 @@
 import React, { useRef, useEffect } from 'react';
 import { Input } from '../ui/input';
 import { Button } from '../ui/button';
-import SubjectSelector from '../ui/subject-selector';
-import VerbSelector from '../ui/VerbSelector';
+import SubjectSelector from '../statementWizard/selectors/SubjectSelector';
+import VerbSelector from '../statementWizard/selectors/VerbSelector';
+import { getVerbName } from '../../../utils/verbUtils';
 import {
   Trash2,
   Edit2,
@@ -103,7 +104,7 @@ const StatementItem: React.FC<StatementItemProps> = ({
           {/* Subject */}
           <div
             onClick={() => onPartClick('subject', statement.id)}
-            className='cursor-pointer px-2 py-1 rounded bg-blue-100 hover:bg-blue-200'
+            className='cursor-pointer px-2 py-1 rounded bg-subjectSelector hover:bg-subjectSelectorHover'
           >
             {editingPart === 'subject' ? (
               <SubjectSelector
@@ -123,24 +124,24 @@ const StatementItem: React.FC<StatementItemProps> = ({
           </div>
           {/* Verb */}
           <div
-            className='cursor-pointer px-2 py-1 rounded bg-green-100 hover:bg-green-200'
+            className='cursor-pointer px-2 py-1 rounded bg-verbSelector hover:bg-verbSelectorHover'
             onClick={() => onPartClick('verb', statement.id)}
           >
             {editingPart === 'verb' ? (
               <VerbSelector
                 onVerbSelect={(verb) =>
-                  onPartUpdate(statement.id, 'verb', verb.name)
+                  onPartUpdate(statement.id, 'verb', verb.id)
                 }
                 onClose={() => onPartClick('verb', '')}
               />
             ) : (
-              <span>{statement.atoms.verb}</span>
+              <span>{getVerbName(statement.atoms.verb)}</span>
             )}
           </div>
           {/* Object */}
           <div
             onClick={() => onPartClick('object', statement.id)}
-            className='cursor-pointer px-2 py-1 rounded bg-yellow-100 hover:bg-yellow-200'
+            className='cursor-pointer px-2 py-1 rounded bg-objectInput hover:bg-objectInputHover'
           >
             {editingPart === 'object' ? (
               <Input
@@ -211,7 +212,9 @@ const StatementItem: React.FC<StatementItemProps> = ({
             </TooltipContent>
           </Tooltip>
           {/* Construct full sentence from atoms */}
-          <span>{`${statement.atoms.subject} ${statement.atoms.verb} ${statement.atoms.object}`}</span>
+          <span>{`${statement.atoms.subject} ${getVerbName(
+            statement.atoms.verb
+          )} ${statement.atoms.object}`}</span>
         </div>
 
         {/* Right side: resolved icon, actions counter + dropdown */}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -3,7 +3,7 @@ import { Slot } from '@radix-ui/react-slot';
 import type { VariantProps } from 'class-variance-authority';
 
 import { cn } from '../../../lib/utils';
-import { buttonVariants } from './buttonVariants'; // Updated import path
+import { buttonVariants } from './buttonVariants';
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -12,11 +12,11 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, selected, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button';
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(buttonVariants({ variant, size, selected, className }))}
         ref={ref}
         {...props}
       />
diff --git a/src/components/ui/buttonVariants.ts b/src/components/ui/buttonVariants.ts
@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center  rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
@@ -22,10 +22,15 @@ export const buttonVariants = cva(
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',
       },
+      selected: {
+        true: 'bg-[var(--tile-color)]',
+        false: '',
+      },
     },
     defaultVariants: {
       variant: 'default',
       size: 'default',
+      selected: false,
     },
   }
 );
diff --git a/src/index.css b/src/index.css
@@ -49,11 +49,15 @@
 
     --radius: 0.5rem;
 
-    /* Wizard/Step specific tokens */
+    /* Wizard/Step specific colors */
     --subject-selector: #fef08a;
+    --subject-selector-hover: #fce883;
     --verb-selector: #bbf7d0;
+    --verb-selector-hover: #a0d8f1;
     --object-input: #bfdbfe;
+    --object-input-hover: #aecbf0;
     --privacy-selector: #22c55e;
+    --privacy-selector-hover: #1ea07b;
   }
 
   /* Dark Mode Overrides */
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,6 +16,14 @@ export default {
     },
     extend: {
       colors: {
+        subjectSelector: 'var(--subject-selector)',
+        subjectSelectorHover: 'var(--subject-selector-hover)',
+        verbSelector: 'var(--verb-selector)',
+        verbSelectorHover: 'var(--verb-selector-hover)',
+        objectInput: 'var(--object-input)',
+        objectInputHover: 'var(--object-input-hover)',
+        privacySelector: 'var(--privacy-selector)',
+        privacySelectorHover: 'var(--privacy-selector-hover)',
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',
diff --git a/types/entries.ts b/types/entries.ts
@@ -34,6 +34,7 @@ export interface Category {
 }
 
 export interface Verb {
+  id: string;
   name: string;
   popularity: number;
   categories: string[];
diff --git a/utils/verbUtils.ts b/utils/verbUtils.ts
