feat: migrate to new version of auto form

apps/web/package.json

@@ -18,6 +18,8 @@
     "stripe:listen": "stripe listen --forward-to=https://localhost:3000/api/billing/webhooks/stripe"
   },
   "dependencies": {
+    "@autoform/react": "^4.0.0",
+    "@autoform/zod": "^4.0.0",
     "@clerk/backend": "^2.6.0",
     "@clerk/nextjs": "^6.27.1",
     "@clerk/themes": "2.4.2",

apps/web/src/components/dashboard/forms/create-component-version.tsx

@@ -1,32 +1,38 @@
 'use client';
 import { createComponentVersionAction } from '@/actions/components';
 import { InputForm } from '@/components/dashboard/forms/generic';
+import { fieldConfig } from '@/components/ui/autoform';
 import { Navigation } from '@/config/navigation';
 import { Component } from '@/database/schema';
+import { enhanceFields } from '@/lib/validation';
 import { createComponentVersionSchema } from '@/validation/component';
 
 export function CreateComponentVersion({
   components,
 }: {
   components: Component[];
 }) {
+  const enhancedSchema = enhanceFields(createComponentVersionSchema, {
+    componentId: {
+      define: 'Component to create version for',
+      superRefine: fieldConfig({
+        fieldType: 'select',
+        inputProps: {
+          values: components.map((component) => ({
+            value: component.id,
+            label: component.name,
+          })),
+        },
+      }),
+    },
+  });
+
   return (
     <InputForm
       postSubmitLink={Navigation.DASHBOARD_COMPONENT_VERSIONS}
       resource="Component Version"
-      schema={createComponentVersionSchema}
+      schema={enhancedSchema}
       action={createComponentVersionAction}
-      fieldConfig={{
-        componentId: {
-          fieldType: 'select',
-          inputProps: {
-            values: components.map((component) => ({
-              value: component.id,
-              label: component.name,
-            })),
-          },
-        },
-      }}
     />
   );
 }

apps/web/src/components/dashboard/forms/create-deployments.tsx

@@ -1,8 +1,10 @@
 'use client';
 import { createDeploymentAction } from '@/actions/deployment';
 import { InputForm } from '@/components/dashboard/forms/generic';
+import { fieldConfig } from '@/components/ui/autoform';
 import { Navigation } from '@/config/navigation';
 import { Environment, ReleaseStep } from '@/database/schema';
+import { enhanceFields } from '@/lib/validation';
 import { createDeploymentsSchema } from '@/validation/deployment';
 
 export function CreateDeploymentForm({
@@ -12,32 +14,39 @@ export function CreateDeploymentForm({
   environments: Environment[];
   releaseSteps: ReleaseStep[];
 }) {
+  const enhancedSchema = enhanceFields(createDeploymentsSchema, {
+    environmentId: {
+      define: 'Environment to deploy to',
+      superRefine: fieldConfig({
+        fieldType: 'select',
+        inputProps: {
+          values: environments.map((environment) => ({
+            value: environment.id,
+            label: environment.name,
+          })),
+        },
+      }),
+    },
+    releaseStepId: {
+      define: 'Release step to deploy',
+      superRefine: fieldConfig({
+        fieldType: 'select',
+        inputProps: {
+          values: releaseSteps.map((step) => ({
+            value: step.id,
+            label: `${step.id} (${step.status})`,
+          })),
+        },
+      }),
+    },
+  });
+
   return (
     <InputForm
       postSubmitLink={Navigation.DASHBOARD_DEPLOYMENTS}
       resource="Deployment"
-      schema={createDeploymentsSchema}
+      schema={enhancedSchema}
       action={createDeploymentAction}
-      fieldConfig={{
-        environmentId: {
-          fieldType: 'select',
-          inputProps: {
-            values: environments.map((environment) => ({
-              value: environment.id,
-              label: environment.name,
-            })),
-          },
-        },
-        releaseStepId: {
-          fieldType: 'select',
-          inputProps: {
-            values: releaseSteps.map((step) => ({
-              value: step.id,
-              label: `${step.id} (${step.status})`,
-            })),
-          },
-        },
-      }}
     />
   );
 }

apps/web/src/components/dashboard/forms/create-environment.tsx

@@ -1,34 +1,38 @@
 'use client';
 import { createEnvironmentAction } from '@/actions/environment';
 import { InputForm } from '@/components/dashboard/forms/generic';
+import { fieldConfig } from '@/components/ui/autoform';
 import { Navigation } from '@/config/navigation';
 import { EnvironmentType } from '@/database/schema';
+import { enhanceFields } from '@/lib/validation';
 import { createEnvironmentSchema } from '@/validation/environment';
 
 export function CreateEnvironmentForm({
   environmentTypes,
 }: {
   environmentTypes: EnvironmentType[];
 }) {
+  const enhancedSchema = enhanceFields(createEnvironmentSchema, {
+    typeId: {
+      define: 'Type of environment we are creating',
+      superRefine: fieldConfig({
+        fieldType: 'select',
+        inputProps: {
+          values: environmentTypes.map((type) => ({
+            value: type.id,
+            label: type.label,
+          })),
+        },
+      }),
+    },
+  });
+
   return (
     <InputForm
       postSubmitLink={Navigation.DASHBOARD_ENVIRONMENTS}
       resource="Environment"
-      schema={createEnvironmentSchema}
+      schema={enhancedSchema}
       action={createEnvironmentAction}
-      fieldConfig={{
-        typeId: {
-          description: 'Type of environment we are creating',
-          fieldType: 'select',
-
-          inputProps: {
-            values: environmentTypes.map((type) => ({
-              value: type.id,
-              label: type.label,
-            })),
-          },
-        },
-      }}
     />
   );
 }

apps/web/src/components/dashboard/forms/create-release-component.tsx

@@ -1,8 +1,10 @@
 'use client';
 import { createReleaseComponentAction } from '@/actions/components';
 import { InputForm } from '@/components/dashboard/forms/generic';
+import { fieldConfig } from '@/components/ui/autoform';
 import { Navigation } from '@/config/navigation';
 import { ComponentVersion, Release } from '@/database/schema';
+import { enhanceFields } from '@/lib/validation';
 import { createReleaseComponentSchema } from '@/validation/component';
 
 export function CreateReleaseComponent({
@@ -12,32 +14,39 @@ export function CreateReleaseComponent({
   componentVersions: ComponentVersion[];
   releases: Release[];
 }) {
+  const enhancedSchema = enhanceFields(createReleaseComponentSchema, {
+    componentVersionId: {
+      define: 'Component version to include in release',
+      superRefine: fieldConfig({
+        fieldType: 'select',
+        inputProps: {
+          values: componentVersions.map((componentVersion) => ({
+            value: componentVersion.id,
+            label: componentVersion.version,
+          })),
+        },
+      }),
+    },
+    releaseId: {
+      define: 'Release to add component to',
+      superRefine: fieldConfig({
+        fieldType: 'select',
+        inputProps: {
+          values: releases.map((release) => ({
+            value: release.id,
+            label: release.version,
+          })),
+        },
+      }),
+    },
+  });
+
   return (
     <InputForm
       postSubmitLink={Navigation.DASHBOARD_RELEASE_COMPONENTS}
       resource="Release Component"
-      schema={createReleaseComponentSchema}
+      schema={enhancedSchema}
       action={createReleaseComponentAction}
-      fieldConfig={{
-        componentVersionId: {
-          fieldType: 'select',
-          inputProps: {
-            values: componentVersions.map((componentVersion) => ({
-              value: componentVersion.id,
-              label: componentVersion.version,
-            })),
-          },
-        },
-        releaseId: {
-          fieldType: 'select',
-          inputProps: {
-            values: releases.map((release) => ({
-              value: release.id,
-              label: release.version,
-            })),
-          },
-        },
-      }}
     />
   );
 }

apps/web/src/components/dashboard/forms/create-release-step.tsx

@@ -1,8 +1,10 @@
 'use client';
 import { createReleaseStepAction } from '@/actions/release';
 import { InputForm } from '@/components/dashboard/forms/generic';
+import { fieldConfig } from '@/components/ui/autoform';
 import { Navigation } from '@/config/navigation';
 import { Release, ReleaseStrategyStep } from '@/database/schema';
+import { enhanceFields } from '@/lib/validation';
 import { createReleaseStepSchema } from '@/validation/release';
 
 export function CreateReleaseStepForm({
@@ -12,32 +14,39 @@ export function CreateReleaseStepForm({
   releases: Release[];
   releaseStrategySteps: ReleaseStrategyStep[];
 }) {
+  const enhancedSchema = enhanceFields(createReleaseStepSchema, {
+    releaseId: {
+      define: 'Release for this step',
+      superRefine: fieldConfig({
+        fieldType: 'select',
+        inputProps: {
+          values: releases.map((release) => ({
+            value: release.id,
+            label: release.version,
+          })),
+        },
+      }),
+    },
+    releaseStrategyStepId: {
+      define: 'Strategy step to execute',
+      superRefine: fieldConfig({
+        fieldType: 'select',
+        inputProps: {
+          values: releaseStrategySteps.map((step) => ({
+            value: step.id,
+            label: step.name,
+          })),
+        },
+      }),
+    },
+  });
+
   return (
     <InputForm
       postSubmitLink={Navigation.DASHBOARD_RELEASE_STEPS}
       resource="Release Step"
-      schema={createReleaseStepSchema}
+      schema={enhancedSchema}
       action={createReleaseStepAction}
-      fieldConfig={{
-        releaseId: {
-          fieldType: 'select',
-          inputProps: {
-            values: releases.map((release) => ({
-              value: release.id,
-              label: release.version,
-            })),
-          },
-        },
-        releaseStrategyStepId: {
-          fieldType: 'select',
-          inputProps: {
-            values: releaseStrategySteps.map((step) => ({
-              value: step.id,
-              label: step.name,
-            })),
-          },
-        },
-      }}
     />
   );
 }