create-appraisejs 0.3.1-alpha.0 → 0.3.1-alpha.1

package/templates/starter/src/components/diagram/node-form-fields-content.tsx

@@ -15,6 +15,7 @@ import { getSelectedTemplateIcon, type NodeFormErrors } from './node-form-helper
 import { getParameterPreviewUpdates } from './node-form-template-step-selection'
 import type { TemplateStepWithGroup } from '@/types/diagram/template-step'
 import type { NodeFormFieldsProps } from './node-form-fields-props'
+import { Save, X } from 'lucide-react'
 
 type NodeFormFieldsContentProps = NodeFormFieldsProps & {
   fieldClassName: string
@@ -111,9 +112,15 @@ export function NodeFormFieldsContent({
       </div>
       <SheetFooter className="shrink-0 border-t pt-4">
         <SheetClose asChild>
-          <Button variant="outline">Cancel</Button>
+          <Button variant="outline">
+            <X className="size-4" aria-hidden />
+            <span>Cancel</span>
+          </Button>
         </SheetClose>
-        <Button type="submit">Save</Button>
+        <Button type="submit">
+          <Save className="size-4" aria-hidden />
+          <span className="font-bold">Save</span>
+        </Button>
       </SheetFooter>
     </>
   )

package/templates/starter/src/components/diagram/node-form-helpers.test.ts

@@ -54,7 +54,9 @@ describe('node-form helpers', () => {
   })
 
   it('creates initial parameters and gherkin previews', () => {
-    const parameters = createInitialParametersForTemplateStep(getSelectedTemplateStepParams(templateStepParams, 'step-1'))
+    const parameters = createInitialParametersForTemplateStep(
+      getSelectedTemplateStepParams(templateStepParams, 'step-1'),
+    )
 
     expect(parameters).toEqual([
       {

package/templates/starter/src/components/diagram/node-form-helpers.ts

@@ -69,10 +69,7 @@ export function createInitialParametersForTemplateStep(templateStepParams: Templ
   }))
 }
 
-export function getGherkinPreview(
-  templateStep: TemplateStep | null,
-  parameters: NodeFormData['parameters'],
-) {
+export function getGherkinPreview(templateStep: TemplateStep | null, parameters: NodeFormData['parameters']) {
   if (!templateStep?.signature) {
     return ''
   }

package/templates/starter/src/components/diagram/node-form-template-step-selection.ts

@@ -29,10 +29,7 @@ export function getTemplateStepSelectionUpdates(
   }
 }
 
-export function getParameterPreviewUpdates(
-  templateStep: TemplateStep | null,
-  values: NodeFormData['parameters'],
-) {
+export function getParameterPreviewUpdates(templateStep: TemplateStep | null, values: NodeFormData['parameters']) {
   return {
     parameters: [...values],
     gherkinStep: getGherkinPreview(templateStep, values),

package/templates/starter/src/components/diagram/node-form.test.tsx

@@ -145,6 +145,31 @@ describe('NodeForm', () => {
     })
   })
 
+  it('renders footer actions with icons', () => {
+    render(
+      <NodeForm
+        onSubmitAction={vi.fn()}
+        initialValues={{
+          label: '',
+          gherkinStep: '',
+          templateStepId: '',
+          parameters: [],
+        }}
+        templateSteps={templateSteps}
+        templateStepParams={templateStepParams}
+        showAddNodeDialog
+        locators={[]}
+        locatorGroups={[]}
+        environments={[]}
+        modules={[]}
+        setShowAddNodeDialog={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByRole('button', { name: 'Cancel' }).querySelector('svg')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Save' }).querySelector('svg')).toBeInTheDocument()
+  })
+
   it('blocks submit when dynamic parameter validation fails', async () => {
     const user = userEvent.setup()
     const onSubmitAction = vi.fn()

package/templates/starter/src/components/diagram/node-form.tsx

@@ -9,11 +9,7 @@ import type { DynamicFormFieldsRef } from './dynamic-parameters'
 import { NodeFormFieldsContent } from './node-form-fields-content'
 import type { NodeFormFieldsProps } from './node-form-fields-props'
 import { handleNodeFormSubmit } from './node-form-submit'
-import {
-  getSelectedTemplateStep,
-  getSelectedTemplateStepParams,
-  type NodeFormProps,
-} from './node-form-helpers'
+import { getSelectedTemplateStep, getSelectedTemplateStepParams, type NodeFormProps } from './node-form-helpers'
 import { getTemplateStepSelectionUpdates } from './node-form-template-step-selection'
 
 function buildFormResetKey(
@@ -128,13 +124,7 @@ function NodeFormFields({
   )
 }
 
-function NodeForm({
-  showAddNodeDialog,
-  setShowAddNodeDialog,
-  initialValues,
-  mode,
-  ...fieldsProps
-}: NodeFormProps) {
+function NodeForm({ showAddNodeDialog, setShowAddNodeDialog, initialValues, mode, ...fieldsProps }: NodeFormProps) {
   const formResetKey = buildFormResetKey(initialValues, mode ?? 'add', showAddNodeDialog)
 
   return (

package/templates/starter/src/components/diagram/options-header-node.test.tsx

@@ -178,6 +178,9 @@ describe('OptionsHeaderNode', () => {
     })
 
     expect(screen.getByTestId('options-header-node')).toHaveAttribute('data-missing-params', 'true')
+    expect(screen.getByTestId('options-header-node')).toHaveClass('bg-red-600')
+    expect(screen.getByTestId('options-header-node')).toHaveClass('text-white')
+    expect(screen.getByTestId('node-step-icon')).toHaveClass('text-white')
     expect(screen.getByRole('heading', { name: 'Click submit' })).toBeInTheDocument()
     await user.hover(screen.getByTestId('options-header-node'))
     expect(screen.getByText('When click "Submit"')).toBeInTheDocument()
@@ -204,7 +207,7 @@ describe('OptionsHeaderNode', () => {
     expect(screen.getByTestId('options-header-node')).toHaveAttribute('data-missing-params', 'true')
     expect(screen.getByTestId('options-header-node')).toHaveAttribute('data-first-node', 'true')
     expect(screen.getByTestId('options-header-node')).toHaveClass('ring-emerald-500/70')
-    expect(screen.getByTestId('options-header-node')).toHaveClass('border-destructive/70')
+    expect(screen.getByTestId('options-header-node')).toHaveClass('border-red-700')
     expect(screen.getByTestId('options-header-node')).toHaveClass('rounded-l-3xl')
   })
 })

package/templates/starter/src/components/diagram/options-header-node.tsx

@@ -106,142 +106,152 @@ const OptionsHeaderNode = memo(({ selected, data, onEdit, onAddConnectedNode }:
 
   return (
     <LazyMotion features={domAnimation} strict>
-    <BaseNode
-      selected={selected}
-      data-testid="options-header-node"
-      data-missing-params={isMissingParams ? 'true' : undefined}
-      data-first-node={isFirstNode ? 'true' : undefined}
-      data-search-highlighted={isSearchHighlighted ? 'true' : undefined}
-      onMouseEnter={showToolbarNow}
-      onMouseLeave={hideToolbarWithDelay}
-      onFocus={showToolbarNow}
-      onBlur={event => {
-        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
-          hideToolbarWithDelay()
-        }
-      }}
-      className={cn(
-        'border-border/70 shadow-background/30 w-36 overflow-visible bg-card p-0 pt-4 shadow-lg transition-[border-radius,box-shadow] duration-300 ease-out',
-        isFirstNode && 'rounded-l-3xl rounded-r-md',
-        isMissingParams && 'border-destructive/70 bg-destructive/10 ring-destructive/40 ring-1',
-        isSearchHighlighted && 'shadow-[0_0_28px_rgba(16,185,129,0.34)] ring-2 ring-emerald-500/70',
-      )}
-    >
-      {!isFirstNode && (
-        <Handle type="target" position={Position.Left} className="!z-30 !h-2.5 !w-2.5 !border-0 !bg-zinc-400" />
-      )}
-      <AnimatePresence>
-        {showToolbar && (
-          <div className="absolute -top-12 left-1/2 z-10 -translate-x-1/2">
-            <motion.div
-              className="border-border/70 bg-muted/80 flex items-center gap-1 rounded-md border p-1 shadow-md backdrop-blur"
-              onMouseEnter={showToolbarNow}
-              onMouseLeave={hideToolbarWithDelay}
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 10, transition: { duration: 0.4, ease: 'easeOut' } }}
-              transition={{ duration: 0.22, ease: 'easeOut' }}
-            >
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="nodrag size-7"
-                aria-label="Edit"
-                onClick={handleEdit}
-              >
-                <Pencil aria-hidden="true" />
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="nodrag size-7"
-                aria-label="Delete"
-                onClick={handleDelete}
-                disabled={isDeleteDisabled}
-              >
-                <Trash aria-hidden="true" />
-              </Button>
-            </motion.div>
-          </div>
+      <BaseNode
+        selected={selected}
+        data-testid="options-header-node"
+        data-missing-params={isMissingParams ? 'true' : undefined}
+        data-first-node={isFirstNode ? 'true' : undefined}
+        data-search-highlighted={isSearchHighlighted ? 'true' : undefined}
+        onMouseEnter={showToolbarNow}
+        onMouseLeave={hideToolbarWithDelay}
+        onFocus={showToolbarNow}
+        onBlur={event => {
+          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+            hideToolbarWithDelay()
+          }
+        }}
+        className={cn(
+          'shadow-background/30 w-36 overflow-visible p-0 pt-4 shadow-lg transition-[border-radius,box-shadow] duration-300 ease-out',
+          isMissingParams ? 'border-red-700 bg-red-600 text-white ring-1 ring-red-800/60' : 'border-border/70 bg-card',
+          isFirstNode && 'rounded-l-3xl rounded-r-md',
+          isSearchHighlighted && 'shadow-[0_0_28px_rgba(16,185,129,0.34)] ring-2 ring-emerald-500/70',
         )}
-      </AnimatePresence>
-      <AnimatePresence>
-        {!hasOutgoingConnection && !isConnectionInProgress && (
-          <div className="absolute left-full top-1/2 z-20 -translate-y-1/2">
-            <motion.div
-              className="flex items-center"
-              initial={{ opacity: 0, x: -6, scale: 0.96 }}
-              animate={{ opacity: 1, x: 0, scale: 1 }}
-              exit={{ opacity: 0, x: -6, scale: 0.96 }}
-              transition={{ duration: 0.18, ease: 'easeOut' }}
-            >
-              <motion.span
-                aria-hidden="true"
-                className="h-px w-12 bg-emerald-500/70 shadow-[0_0_8px_rgba(16,185,129,0.4)]"
-                initial={{ scaleX: 0, transformOrigin: 'left' }}
-                animate={{ scaleX: 1 }}
-                exit={{ scaleX: 0 }}
-                transition={{ duration: 0.2, ease: 'easeOut' }}
-              />
-              <motion.button
-                type="button"
-                className="nodrag nopan border-border/70 bg-muted/95 -ml-px flex size-5 items-center justify-center rounded border text-muted-foreground shadow-md transition-colors hover:border-emerald-400/70 hover:bg-emerald-500/20 hover:text-emerald-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/60"
-                aria-label="Add connected node"
-                onClick={handleAddConnectedNode}
-                whileHover={{ scale: 1.12 }}
-                whileTap={{ scale: 0.92 }}
-                animate={{
-                  boxShadow: [
-                    '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
-                    '0 0 0 4px rgba(16,185,129,0.12), 0 0 14px rgba(16,185,129,0.26)',
-                    '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
-                  ],
-                }}
-                transition={{
-                  boxShadow: {
-                    duration: 2.4,
-                    repeat: Infinity,
-                    ease: 'easeInOut',
-                  },
-                }}
-              >
-                <Plus aria-hidden="true" className="size-3" />
-              </motion.button>
-            </motion.div>
-          </div>
+      >
+        {!isFirstNode && (
+          <Handle type="target" position={Position.Left} className="!z-30 !h-2.5 !w-2.5 !border-0 !bg-zinc-400" />
         )}
-      </AnimatePresence>
-      <div className="flex flex-col items-center gap-3 px-4 py-5 text-center">
-        <div
-          data-testid="node-step-icon"
-          className="bg-primary/15 shadow-primary/20 flex size-20 shrink-0 items-center justify-center rounded-2xl text-primary shadow-lg [&>svg]:size-10"
-        >
-          {KeyToIconTransformer(getTemplateStepIcon(icon))}
-        </div>
-      </div>
-      <div className="absolute left-1/2 top-full z-[5] mt-2 min-w-72 -translate-x-[47%]">
-        <h3 className="relative -left-2 w-full text-center text-lg font-bold leading-tight text-card-foreground">
-          {label}
-        </h3>
         <AnimatePresence>
           {showToolbar && (
-            <motion.div
-              data-testid="node-gherkin-row"
-              className="mt-2 text-sm leading-relaxed text-muted-foreground"
-              initial={{ opacity: 0, y: 6 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 6 }}
-              transition={{ duration: 0.2, ease: 'easeOut' }}
-            >
-              <OptionsHeaderGherkinStep gherkinStep={gherkinStep} parameters={parameters} />
-            </motion.div>
+            <div className="absolute -top-12 left-1/2 z-10 -translate-x-1/2">
+              <motion.div
+                className="border-border/70 bg-muted/80 flex items-center gap-1 rounded-md border p-1 shadow-md backdrop-blur"
+                onMouseEnter={showToolbarNow}
+                onMouseLeave={hideToolbarWithDelay}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 10, transition: { duration: 0.4, ease: 'easeOut' } }}
+                transition={{ duration: 0.22, ease: 'easeOut' }}
+              >
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  className="nodrag size-7"
+                  aria-label="Edit"
+                  onClick={handleEdit}
+                >
+                  <Pencil aria-hidden="true" />
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  className="nodrag size-7"
+                  aria-label="Delete"
+                  onClick={handleDelete}
+                  disabled={isDeleteDisabled}
+                >
+                  <Trash aria-hidden="true" />
+                </Button>
+              </motion.div>
+            </div>
           )}
         </AnimatePresence>
-      </div>
-      <Handle type="source" position={Position.Right} className="!z-30 !h-2.5 !w-2.5 !border-0 !bg-zinc-400" />
-    </BaseNode>
+        <AnimatePresence>
+          {!hasOutgoingConnection && !isConnectionInProgress && (
+            <div className="absolute left-full top-1/2 z-20 -translate-y-1/2">
+              <motion.div
+                className="flex items-center"
+                initial={{ opacity: 0, x: -6, scale: 0.96 }}
+                animate={{ opacity: 1, x: 0, scale: 1 }}
+                exit={{ opacity: 0, x: -6, scale: 0.96 }}
+                transition={{ duration: 0.18, ease: 'easeOut' }}
+              >
+                <motion.span
+                  aria-hidden="true"
+                  className="h-px w-12 bg-emerald-500/70 shadow-[0_0_8px_rgba(16,185,129,0.4)]"
+                  initial={{ scaleX: 0, transformOrigin: 'left' }}
+                  animate={{ scaleX: 1 }}
+                  exit={{ scaleX: 0 }}
+                  transition={{ duration: 0.2, ease: 'easeOut' }}
+                />
+                <motion.button
+                  type="button"
+                  className="nodrag nopan border-border/70 bg-muted/95 -ml-px flex size-5 items-center justify-center rounded border text-muted-foreground shadow-md transition-colors hover:border-emerald-400/70 hover:bg-emerald-500/20 hover:text-emerald-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/60"
+                  aria-label="Add connected node"
+                  onClick={handleAddConnectedNode}
+                  whileHover={{ scale: 1.12 }}
+                  whileTap={{ scale: 0.92 }}
+                  animate={{
+                    boxShadow: [
+                      '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
+                      '0 0 0 4px rgba(16,185,129,0.12), 0 0 14px rgba(16,185,129,0.26)',
+                      '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
+                    ],
+                  }}
+                  transition={{
+                    boxShadow: {
+                      duration: 2.4,
+                      repeat: Infinity,
+                      ease: 'easeInOut',
+                    },
+                  }}
+                >
+                  <Plus aria-hidden="true" className="size-3" />
+                </motion.button>
+              </motion.div>
+            </div>
+          )}
+        </AnimatePresence>
+        <div className="flex flex-col items-center gap-3 px-4 py-5 text-center">
+          <div
+            data-testid="node-step-icon"
+            className={cn(
+              'flex size-20 shrink-0 items-center justify-center rounded-2xl shadow-lg [&>svg]:size-10',
+              isMissingParams
+                ? 'bg-white/15 text-white shadow-black/20'
+                : 'bg-primary/15 shadow-primary/20 text-primary',
+            )}
+          >
+            {KeyToIconTransformer(getTemplateStepIcon(icon))}
+          </div>
+        </div>
+        <div className="absolute left-1/2 top-full z-[5] mt-2 min-w-72 -translate-x-[47%]">
+          <h3
+            className={cn(
+              'relative -left-2 w-full text-center text-lg font-bold leading-tight',
+              isMissingParams ? 'text-white' : 'text-card-foreground',
+            )}
+          >
+            {label}
+          </h3>
+          <AnimatePresence>
+            {showToolbar && (
+              <motion.div
+                data-testid="node-gherkin-row"
+                className={cn('mt-2 text-sm leading-relaxed', isMissingParams ? 'text-white' : 'text-muted-foreground')}
+                initial={{ opacity: 0, y: 6 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 6 }}
+                transition={{ duration: 0.2, ease: 'easeOut' }}
+              >
+                <OptionsHeaderGherkinStep gherkinStep={gherkinStep} parameters={parameters} />
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+        <Handle type="source" position={Position.Right} className="!z-30 !h-2.5 !w-2.5 !border-0 !bg-zinc-400" />
+      </BaseNode>
     </LazyMotion>
   )
 })

package/templates/starter/src/components/diagram/use-flow-diagram.ts

@@ -344,8 +344,7 @@ export function useFlowDiagram({
     setShowAddNodeDialog(true)
   }, [])
 
-
-return {
+  return {
     enableNodeSearch,
     enableNodeGrouping,
     defaultValueInput,

package/templates/starter/src/components/form/error-message.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
-
-const ErrorMessage = ({ message, visible }: { message: string; visible: boolean }) => {
-  return <div className={`text-sm text-pink-600 ${visible ? 'visible' : 'invisible'}`}>{message}</div>
-}
-
-export default ErrorMessage
+import React from 'react'
+
+const ErrorMessage = ({ message, visible }: { message: string; visible: boolean }) => {
+  return <div className={`text-sm text-pink-600 ${visible ? 'visible' : 'invisible'}`}>{message}</div>
+}
+
+export default ErrorMessage

package/templates/starter/src/components/loading-skeleton/form/button-skeleton.tsx

@@ -1,8 +1,8 @@
-import { Skeleton } from '@/components/ui/skeleton'
-import React from 'react'
-
-const ButtonSkeleton = () => {
-  return <Skeleton className="h-10 w-24" />
-}
-
-export default ButtonSkeleton
+import { Skeleton } from '@/components/ui/skeleton'
+import React from 'react'
+
+const ButtonSkeleton = () => {
+  return <Skeleton className="h-10 w-24" />
+}
+
+export default ButtonSkeleton

package/templates/starter/src/components/loading-skeleton/form/text-input-skeleton.tsx

@@ -1,8 +1,8 @@
-import { Skeleton } from '@/components/ui/skeleton'
-import React from 'react'
-
-const TextInputSkeleton = () => {
-  return <Skeleton className="h-10 w-44" />
-}
-
-export default TextInputSkeleton
+import { Skeleton } from '@/components/ui/skeleton'
+import React from 'react'
+
+const TextInputSkeleton = () => {
+  return <Skeleton className="h-10 w-44" />
+}
+
+export default TextInputSkeleton

package/templates/starter/src/components/loading-skeleton/visualization/table-skeleton.tsx

@@ -1,14 +1,14 @@
-import { Skeleton } from '@/components/ui/skeleton'
-import React from 'react'
-
-const TableSkeleton = () => {
-  return (
-    <div className="flex flex-col gap-2">
-      <Skeleton className="h-10 w-full" />
-      <Skeleton className="h-10 w-full" />
-      <Skeleton className="h-10 w-full" />
-    </div>
-  )
-}
-
-export default TableSkeleton
+import { Skeleton } from '@/components/ui/skeleton'
+import React from 'react'
+
+const TableSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+    </div>
+  )
+}
+
+export default TableSkeleton

package/templates/starter/src/components/navigation/entity-search-command.tsx

@@ -15,15 +15,9 @@ export interface EntitySearchCommandProps<T extends { id: string }> {
   onSelect?: (entity: T) => void
 }
 
-type LoadState<T> =
-  | { status: 'loading' }
-  | { status: 'error'; message: string }
-  | { status: 'ready'; entities: T[] }
-
-type LoadAction<T> =
-  | { type: 'reset' }
-  | { type: 'ready'; entities: T[] }
-  | { type: 'error'; message: string }
+type LoadState<T> = { status: 'loading' } | { status: 'error'; message: string } | { status: 'ready'; entities: T[] }
+
+type LoadAction<T> = { type: 'reset' } | { type: 'ready'; entities: T[] } | { type: 'error'; message: string }
 
 function loadReducer<T>(state: LoadState<T>, action: LoadAction<T>): LoadState<T> {
   switch (action.type) {