create-appraisejs 0.2.0-alpha.6 → 0.3.0-alpha.0

package/templates/default/src/app/(base)/environments/environment-form.tsx

@@ -1,219 +1,228 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { formOpts, type Environment } from '@/constants/form-opts/environment-form-opts'
-import { toast } from '@/hooks/use-toast'
-import { ActionResponse } from '@/types/form/actionHandler'
-import { useForm } from '@tanstack/react-form'
-import { useRouter } from 'next/navigation'
-import React, { useState } from 'react'
-import { z } from 'zod'
-import { Eye, EyeOff } from 'lucide-react'
-
-const EnvironmentForm = ({
-  defaultValues,
-  successTitle,
-  successMessage,
-  id,
-  onSubmitAction,
-}: {
-  defaultValues?: Environment
-  successTitle: string
-  successMessage: string
-  id?: string
-  onSubmitAction: (
-    _prev: unknown,
-    value: Environment,
-    id?: string,
-  ) => Promise<ActionResponse>
-}) => {
-  const router = useRouter()
-  const [showPassword, setShowPassword] = useState(false)
-  const form = useForm({
-    defaultValues: defaultValues ?? formOpts?.defaultValues,
-    validators: formOpts?.validators,
-    onSubmit: async ({ value }) => {
-      const res = await onSubmitAction(undefined, value, id)
-      if (res.status === 200) {
-        toast({
-          title: successTitle,
-          description: successMessage,
-        })
-        router.push('/environments')
-      }
-      if (res.status === 400) {
-        toast({
-          title: 'Error',
-          description: res.error,
-          variant: 'destructive',
-        })
-      }
-      if (res.status === 500) {
-        toast({
-          title: 'Error',
-          description: res.error,
-          variant: 'destructive',
-        })
-      }
-    },
-  })
-  return (
-    <form
-      onSubmit={e => {
-        e.preventDefault()
-        e.stopPropagation()
-        form.handleSubmit()
-      }}
-    >
-      <form.Field
-        name="name"
-        validators={{
-          onChange: z.string().min(1, { message: 'Name is required' }),
-        }}
-      >
-        {field => {
-          return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
-              <Label htmlFor={field.name}>Name</Label>
-              <Input id={field.name} value={field.state.value} onChange={e => field.handleChange(e.target.value)} />
-              {field.state.meta.isTouched &&
-                field.state.meta.errors.map((error, index) => (
-                  <p key={index} className="text-xs text-pink-500">
-                    {typeof error === 'string' ? error : error?.message || String(error)}
-                  </p>
-                ))}
-            </div>
-          )
-        }}
-      </form.Field>
-      <form.Field
-        name="baseUrl"
-        validators={{
-          onChange: z.string().url({ message: 'Base URL must be a valid URL' }),
-        }}
-      >
-        {field => {
-          return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
-              <Label htmlFor={field.name}>Base URL</Label>
-              <Input
-                id={field.name}
-                value={field.state.value}
-                onChange={e => field.handleChange(e.target.value)}
-                placeholder="https://example.com"
-              />
-              {field.state.meta.isTouched &&
-                field.state.meta.errors.map((error, index) => (
-                  <p key={index} className="text-xs text-pink-500">
-                    {typeof error === 'string' ? error : error?.message || String(error)}
-                  </p>
-                ))}
-            </div>
-          )
-        }}
-      </form.Field>
-      <form.Field
-        name="apiBaseUrl"
-        validators={{
-          onChange: z.string().url({ message: 'API Base URL must be a valid URL' }).optional().or(z.literal('')),
-        }}
-      >
-        {field => {
-          return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
-              <Label htmlFor={field.name}>API Base URL (Optional)</Label>
-              <Input
-                id={field.name}
-                value={field.state.value}
-                onChange={e => field.handleChange(e.target.value)}
-                placeholder="https://api.example.com"
-              />
-              {field.state.meta.isTouched &&
-                field.state.meta.errors.map((error, index) => (
-                  <p key={index} className="text-xs text-pink-500">
-                    {typeof error === 'string' ? error : error?.message || String(error)}
-                  </p>
-                ))}
-            </div>
-          )
-        }}
-      </form.Field>
-      <form.Field
-        name="username"
-        validators={{
-          onChange: z.string().optional().or(z.literal('')),
-        }}
-      >
-        {field => {
-          return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
-              <Label htmlFor={field.name}>Username (Optional)</Label>
-              <Input
-                id={field.name}
-                value={field.state.value}
-                onChange={e => field.handleChange(e.target.value)}
-                placeholder="Enter username"
-              />
-              {field.state.meta.isTouched &&
-                field.state.meta.errors.map((error, index) => (
-                  <p key={index} className="text-xs text-pink-500">
-                    {typeof error === 'string' ? error : error?.message || String(error)}
-                  </p>
-                ))}
-            </div>
-          )
-        }}
-      </form.Field>
-      <form.Field
-        name="password"
-        validators={{
-          onChange: z.string().optional().or(z.literal('')),
-        }}
-      >
-        {field => {
-          return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
-              <Label htmlFor={field.name}>Password (Optional)</Label>
-              <div className="relative">
-                <Input
-                  id={field.name}
-                  type={showPassword ? 'text' : 'password'}
-                  value={field.state.value}
-                  onChange={e => field.handleChange(e.target.value)}
-                  placeholder="Enter password"
-                  className="pr-10"
-                />
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-                  onClick={() => setShowPassword(!showPassword)}
-                >
-                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                </Button>
-              </div>
-              {field.state.meta.isTouched &&
-                field.state.meta.errors.map((error, index) => (
-                  <p key={index} className="text-xs text-pink-500">
-                    {typeof error === 'string' ? error : error?.message || String(error)}
-                  </p>
-                ))}
-            </div>
-          )
-        }}
-      </form.Field>
-      <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
-        {([canSubmit, isSubmitting]) => (
-          <Button type="submit" disabled={!canSubmit}>
-            {isSubmitting ? '...' : 'Save'}
-          </Button>
-        )}
-      </form.Subscribe>
-    </form>
-  )
-}
-
-export default EnvironmentForm
+'use client'
+
+import { Button } from '@/components/ui/button'
+import ErrorMessage from '@/components/form/error-message'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { formOpts, type Environment } from '@/constants/form-opts/environment-form-opts'
+import { toast } from '@/hooks/use-toast'
+import { useForm } from '@tanstack/react-form'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { Eye, EyeOff } from 'lucide-react'
+import {
+  environmentFieldValidators,
+  getActionErrorMessage,
+  type EnvironmentFormSubmitAction,
+} from './environment-helpers'
+
+type EnvironmentFormProps = {
+  defaultValues?: Environment
+  successTitle: string
+  successMessage: string
+  id?: string
+  onSubmitAction: EnvironmentFormSubmitAction
+}
+
+type EnvironmentFieldErrorsProps = {
+  errors: unknown[]
+  isTouched: boolean
+}
+
+function getErrorMessage(error: unknown) {
+  if (typeof error === 'string') {
+    return error
+  }
+
+  if (error && typeof error === 'object' && 'message' in error && typeof error.message === 'string') {
+    return error.message
+  }
+
+  return String(error)
+}
+
+function EnvironmentFieldErrors({ errors, isTouched }: EnvironmentFieldErrorsProps) {
+  if (!isTouched) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-col gap-1" aria-live="polite">
+      {errors.map((error, index) => (
+        <ErrorMessage key={`${String(error)}-${index}`} message={getErrorMessage(error)} visible={true} />
+      ))}
+    </div>
+  )
+}
+
+const EnvironmentForm = ({
+  defaultValues,
+  successTitle,
+  successMessage,
+  id,
+  onSubmitAction,
+}: EnvironmentFormProps) => {
+  const router = useRouter()
+  const [showPassword, setShowPassword] = useState(false)
+  const form = useForm({
+    defaultValues: defaultValues ?? formOpts.defaultValues,
+    validators: formOpts.validators,
+    onSubmit: async ({ value }) => {
+      const res = await onSubmitAction(undefined, value, id)
+      if (res.status === 200) {
+        toast({
+          title: successTitle,
+          description: successMessage,
+        })
+        router.push('/environments')
+      }
+      if (res.status === 400) {
+        toast({
+          title: 'Error',
+          description: getActionErrorMessage(res),
+          variant: 'destructive',
+        })
+      }
+      if (res.status === 500) {
+        toast({
+          title: 'Error',
+          description: getActionErrorMessage(res),
+          variant: 'destructive',
+        })
+      }
+    },
+  })
+  return (
+    <form
+      onSubmit={e => {
+        e.preventDefault()
+        e.stopPropagation()
+        form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name="name"
+        validators={{
+          onChange: environmentFieldValidators.name,
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Name</Label>
+              <Input id={field.name} value={field.state.value} onChange={e => field.handleChange(e.target.value)} />
+              <EnvironmentFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Field
+        name="baseUrl"
+        validators={{
+          onChange: environmentFieldValidators.baseUrl,
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Base URL</Label>
+              <Input
+                id={field.name}
+                value={field.state.value}
+                onChange={e => field.handleChange(e.target.value)}
+                placeholder="https://example.com"
+              />
+              <EnvironmentFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Field
+        name="apiBaseUrl"
+        validators={{
+          onChange: environmentFieldValidators.apiBaseUrl,
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>API Base URL (Optional)</Label>
+              <Input
+                id={field.name}
+                value={field.state.value}
+                onChange={e => field.handleChange(e.target.value)}
+                placeholder="https://api.example.com"
+              />
+              <EnvironmentFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Field
+        name="username"
+        validators={{
+          onChange: environmentFieldValidators.username,
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Username (Optional)</Label>
+              <Input
+                id={field.name}
+                value={field.state.value}
+                onChange={e => field.handleChange(e.target.value)}
+                placeholder="Enter username"
+              />
+              <EnvironmentFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Field
+        name="password"
+        validators={{
+          onChange: environmentFieldValidators.password,
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Password (Optional)</Label>
+              <div className="relative">
+                <Input
+                  id={field.name}
+                  type={showPassword ? 'text' : 'password'}
+                  value={field.state.value}
+                  onChange={e => field.handleChange(e.target.value)}
+                  placeholder="Enter password"
+                  className="pr-10"
+                />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  aria-label={showPassword ? 'Hide password' : 'Show password'}
+                  className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                  onClick={() => setShowPassword(!showPassword)}
+                >
+                  {showPassword ? <EyeOff className="h-4 w-4" aria-hidden="true" /> : <Eye className="h-4 w-4" aria-hidden="true" />}
+                </Button>
+              </div>
+              <EnvironmentFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
+        {([canSubmit, isSubmitting]) => (
+          <Button type="submit" disabled={!canSubmit}>
+            {isSubmitting ? '...' : 'Save'}
+          </Button>
+        )}
+      </form.Subscribe>
+    </form>
+  )
+}
+
+export default EnvironmentForm

package/templates/default/src/app/(base)/environments/environment-helpers.ts

@@ -0,0 +1,58 @@
+import { environmentSchema, type Environment as EnvironmentFormValues } from '@/constants/form-opts/environment-form-opts'
+import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
+
+export type EnvironmentTableRow = {
+  id: string
+  name: string
+  baseUrl: string
+  apiBaseUrl: string | null
+  username: string | null
+  password: string | null
+  createdAt: Date
+  updatedAt: Date
+}
+
+export type EnvironmentFormSubmitAction = (
+  _prev: unknown,
+  value: EnvironmentFormValues,
+  id?: string,
+) => Promise<ActionResponse>
+
+export const environmentFieldValidators = {
+  name: environmentSchema.shape.name,
+  baseUrl: environmentSchema.shape.baseUrl,
+  apiBaseUrl: environmentSchema.shape.apiBaseUrl,
+  username: environmentSchema.shape.username,
+  password: environmentSchema.shape.password,
+}
+
+export function getActionErrorMessage(response: ActionResponse) {
+  return response.error || response.message || 'Unable to save environment.'
+}
+
+function isEnvironmentRow(value: unknown): value is EnvironmentTableRow {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    typeof value.id === 'string' &&
+    'name' in value &&
+    typeof value.name === 'string' &&
+    'baseUrl' in value &&
+    typeof value.baseUrl === 'string' &&
+    'apiBaseUrl' in value &&
+    (typeof value.apiBaseUrl === 'string' || value.apiBaseUrl === null) &&
+    'username' in value &&
+    (typeof value.username === 'string' || value.username === null) &&
+    'password' in value &&
+    (typeof value.password === 'string' || value.password === null) &&
+    'createdAt' in value &&
+    value.createdAt instanceof Date &&
+    'updatedAt' in value &&
+    value.updatedAt instanceof Date
+  )
+}
+
+export function getEnvironmentTableRows(data: ActionResponseData | undefined): EnvironmentTableRow[] {
+  return Array.isArray(data) ? data.filter(isEnvironmentRow) : []
+}