create-appraisejs 0.1.7 → 0.1.8

package/templates/default/src/app/(base)/template-step-groups/modify/[id]/page.tsx

@@ -1,45 +1,45 @@
-import {
-  getTemplateStepGroupByIdAction,
-  updateTemplateStepGroupAction,
-} from '@/actions/template-step-group/template-step-group-actions'
-import { TemplateStepGroupForm } from '../../template-step-group-form'
-import React from 'react'
-import { TemplateStepGroup } from '@prisma/client'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Modify Template Step Group',
-  description: 'Update template step group configuration',
-}
-
-const TemplateStepGroupType = {
-  ACTION: 'ACTION',
-  VALIDATION: 'VALIDATION',
-} as const
-
-const ModifyTemplateStepGroup = async ({ params }: { params: Promise<{ id: string }> }) => {
-  const { id } = await params
-  const { data: templateStepGroup, error } = await getTemplateStepGroupByIdAction(id)
-
-  if (error) {
-    return <div>Error: {error}</div>
-  }
-
-  const templateStepGroupData = templateStepGroup as TemplateStepGroup
-
-  return (
-    <TemplateStepGroupForm
-      defaultValues={{
-        name: templateStepGroupData.name ?? '',
-        description: templateStepGroupData.description ?? '',
-        type: (templateStepGroupData as { type?: 'ACTION' | 'VALIDATION' }).type ?? TemplateStepGroupType.ACTION,
-      }}
-      successTitle="Group updated"
-      successMessage="Template step group updated successfully"
-      onSubmitAction={updateTemplateStepGroupAction}
-      id={id}
-    />
-  )
-}
-
-export default ModifyTemplateStepGroup
+import {
+  getTemplateStepGroupByIdAction,
+  updateTemplateStepGroupAction,
+} from '@/actions/template-step-group/template-step-group-actions'
+import { TemplateStepGroupForm } from '../../template-step-group-form'
+import React from 'react'
+import { TemplateStepGroup } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Template Step Group',
+  description: 'Update template step group configuration',
+}
+
+const TemplateStepGroupType = {
+  ACTION: 'ACTION',
+  VALIDATION: 'VALIDATION',
+} as const
+
+const ModifyTemplateStepGroup = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const { data: templateStepGroup, error } = await getTemplateStepGroupByIdAction(id)
+
+  if (error) {
+    return <div>Error: {error}</div>
+  }
+
+  const templateStepGroupData = templateStepGroup as TemplateStepGroup
+
+  return (
+    <TemplateStepGroupForm
+      defaultValues={{
+        name: templateStepGroupData.name ?? '',
+        description: templateStepGroupData.description ?? '',
+        type: (templateStepGroupData as { type?: 'ACTION' | 'VALIDATION' }).type ?? TemplateStepGroupType.ACTION,
+      }}
+      successTitle="Group updated"
+      successMessage="Template step group updated successfully"
+      onSubmitAction={updateTemplateStepGroupAction}
+      id={id}
+    />
+  )
+}
+
+export default ModifyTemplateStepGroup

package/templates/default/src/app/(base)/template-step-groups/page.tsx

@@ -1,60 +1,60 @@
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Component } from 'lucide-react'
-import TemplateStepGroupTable from './template-step-group-table'
-import { Suspense } from 'react'
-import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
-import { getAllTemplateStepGroupsAction } from '@/actions/template-step-group/template-step-group-actions'
-import EmptyState from '@/components/data-state/empty-state'
-import { TemplateStepGroup } from '@prisma/client'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Template Step Groups',
-  description: 'Manage template step groups for organizing related template steps',
-}
-
-const TemplateStepGroups = async () => {
-  const { data: templateStepGroups, error: templateStepGroupsError } = await getAllTemplateStepGroupsAction()
-
-  if (templateStepGroupsError) {
-    return <div>Error: {templateStepGroupsError}</div>
-  }
-
-  const templateStepGroupsData = templateStepGroups as TemplateStepGroup[]
-
-  if (!templateStepGroupsData || templateStepGroupsData.length === 0) {
-    return (
-      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
-        <EmptyState
-          icon={<Component className="h-8 w-8" />}
-          title="No template step groups found"
-          description="Get started by creating a template step group to organize related template steps"
-          createRoute="/template-step-groups/create"
-          createText="Create Template Step Group"
-        />
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <Component className="mr-2 h-8 w-8" />
-            Template Step Groups
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>
-          Template step groups organize related template steps for better management and reusability
-        </HeaderSubtitle>
-      </div>
-      <Suspense fallback={<DataTableSkeleton />}>
-        <TemplateStepGroupTable />
-      </Suspense>
-    </>
-  )
-}
-
-export default TemplateStepGroups
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Component } from 'lucide-react'
+import TemplateStepGroupTable from './template-step-group-table'
+import { Suspense } from 'react'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { getAllTemplateStepGroupsAction } from '@/actions/template-step-group/template-step-group-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { TemplateStepGroup } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Template Step Groups',
+  description: 'Manage template step groups for organizing related template steps',
+}
+
+const TemplateStepGroups = async () => {
+  const { data: templateStepGroups, error: templateStepGroupsError } = await getAllTemplateStepGroupsAction()
+
+  if (templateStepGroupsError) {
+    return <div>Error: {templateStepGroupsError}</div>
+  }
+
+  const templateStepGroupsData = templateStepGroups as TemplateStepGroup[]
+
+  if (!templateStepGroupsData || templateStepGroupsData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<Component className="h-8 w-8" />}
+          title="No template step groups found"
+          description="Get started by creating a template step group to organize related template steps"
+          createRoute="/template-step-groups/create"
+          createText="Create Template Step Group"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <Component className="mr-2 h-8 w-8" />
+            Template Step Groups
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>
+          Template step groups organize related template steps for better management and reusability
+        </HeaderSubtitle>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <TemplateStepGroupTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default TemplateStepGroups

package/templates/default/src/app/(base)/template-step-groups/template-step-group-form.tsx

@@ -1,167 +1,167 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { formOpts, TemplateStepGroup } from '@/constants/form-opts/template-step-group-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 { z } from 'zod'
-
-// TemplateStepGroupType values
-const TemplateStepGroupType = {
-  ACTION: 'ACTION',
-  VALIDATION: 'VALIDATION',
-} as const
-
-// Enum validator for type field
-const TemplateStepGroupTypeEnum = z.enum(['ACTION', 'VALIDATION'])
-
-export const TemplateStepGroupForm = ({
-  defaultValues,
-  successTitle,
-  successMessage,
-  id,
-  onSubmitAction,
-}: {
-  defaultValues?: TemplateStepGroup
-  successTitle: string
-  successMessage: string
-  id?: string
-  onSubmitAction: (
-    _prev: unknown,
-    value: TemplateStepGroup,
-    id?: string,
-  ) => Promise<ActionResponse>
-}) => {
-  const router = useRouter()
-  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('/template-step-groups')
-      }
-      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(3, { message: 'Name must be at least 3 characters' }),
-        }}
-      >
-        {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}
-                name={field.name}
-                value={field.state.value}
-                onChange={e => field.handleChange(e.target.value)}
-              />
-              {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="description">
-        {field => {
-          return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
-              <Label htmlFor={field.name}>Description</Label>
-              <Input
-                id={field.name}
-                name={field.name}
-                value={field.state.value}
-                onChange={e => field.handleChange(e.target.value)}
-              />
-              {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="type"
-        validators={{
-          onChange: TemplateStepGroupTypeEnum,
-        }}
-      >
-        {field => {
-          return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
-              <Label htmlFor={field.name}>Type</Label>
-              <Select
-                onValueChange={value => {
-                  field.handleChange(value as 'ACTION' | 'VALIDATION')
-                }}
-                value={field.state.value}
-              >
-                <SelectTrigger id={field.name}>
-                  <SelectValue placeholder="Select a type" />
-                </SelectTrigger>
-                <SelectContent>
-                  {Object.values(TemplateStepGroupType).map(type => (
-                    <SelectItem key={type} value={type as string}>
-                      {type}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              {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>
-  )
-}
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { formOpts, TemplateStepGroup } from '@/constants/form-opts/template-step-group-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 { z } from 'zod'
+
+// TemplateStepGroupType values
+const TemplateStepGroupType = {
+  ACTION: 'ACTION',
+  VALIDATION: 'VALIDATION',
+} as const
+
+// Enum validator for type field
+const TemplateStepGroupTypeEnum = z.enum(['ACTION', 'VALIDATION'])
+
+export const TemplateStepGroupForm = ({
+  defaultValues,
+  successTitle,
+  successMessage,
+  id,
+  onSubmitAction,
+}: {
+  defaultValues?: TemplateStepGroup
+  successTitle: string
+  successMessage: string
+  id?: string
+  onSubmitAction: (
+    _prev: unknown,
+    value: TemplateStepGroup,
+    id?: string,
+  ) => Promise<ActionResponse>
+}) => {
+  const router = useRouter()
+  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('/template-step-groups')
+      }
+      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(3, { message: 'Name must be at least 3 characters' }),
+        }}
+      >
+        {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}
+                name={field.name}
+                value={field.state.value}
+                onChange={e => field.handleChange(e.target.value)}
+              />
+              {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="description">
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Description</Label>
+              <Input
+                id={field.name}
+                name={field.name}
+                value={field.state.value}
+                onChange={e => field.handleChange(e.target.value)}
+              />
+              {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="type"
+        validators={{
+          onChange: TemplateStepGroupTypeEnum,
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Type</Label>
+              <Select
+                onValueChange={value => {
+                  field.handleChange(value as 'ACTION' | 'VALIDATION')
+                }}
+                value={field.state.value}
+              >
+                <SelectTrigger id={field.name}>
+                  <SelectValue placeholder="Select a type" />
+                </SelectTrigger>
+                <SelectContent>
+                  {Object.values(TemplateStepGroupType).map(type => (
+                    <SelectItem key={type} value={type as string}>
+                      {type}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {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>
+  )
+}