@postxl/generator 0.25.1 → 0.27.0

package/dist/generators/models/react.generator/modals.generator.js

@@ -48,12 +48,35 @@ type CreateInputData = {
  * A modal component that lets the user create a new ${meta.userFriendlyName} instance.
  */
 export const ${modals.createComponentName} = ({ show, onHide }: { show: boolean; onHide: () => void }) => {
+  const Typed = React.useMemo(
+    () => createTypedForm<CreateInputData>().with({ ${(() => {
+        const components = new Set();
+        for (const field of fields.values()) {
+            switch (field.kind) {
+                case 'enum': {
+                    const enumMeta = (0, meta_1.getEnumMetadata)({ enumerator: field.enumerator });
+                    components.add(enumMeta.react.selectFieldName);
+                    break;
+                }
+                case 'relation': {
+                    const refMeta = (0, meta_1.getModelMetadata)({ model: field.relationToModel });
+                    components.add(refMeta.react.components.forms.searchFieldName);
+                    break;
+                }
+                default:
+                    continue;
+            }
+        }
+        return [...components].join(', ');
+    })()} }), 
+    []
+  )
   const cache = trpc.useContext()
   const mutation = trpc.${trpc.create.reactQueryMethod}.useMutation()
 
   return (
     <ModalWithNavigationContainer label="Create new ${meta.userFriendlyName}" show={show} onHide={onHide} fixed wide>
-      <Formik<CreateInputData>
+      <Typed.Formik
         initialValues={{
 					${fields
         .filter((f) => f.kind !== 'id')
@@ -109,7 +132,7 @@ export const ${modals.createComponentName} = ({ show, onHide }: { show: boolean;
 						${getFormFieldComponents({ model })}
           </ModalWithActions>
         )}
-      </Formik>
+      </Typed.Formik>
     </ModalWithNavigationContainer>
   )
 }
@@ -141,12 +164,35 @@ export const ${components.modals.editComponentName} = ({
   show, 
   onHide 
 }: { data: ${model.typeName}; show: boolean; onHide: () => void }) => {
+  const Typed = React.useMemo(
+    () => createTypedForm<EditInputData>().with({ ${(() => {
+        const components = new Set();
+        for (const field of fields.values()) {
+            switch (field.kind) {
+                case 'enum': {
+                    const enumMeta = (0, meta_1.getEnumMetadata)({ enumerator: field.enumerator });
+                    components.add(enumMeta.react.selectFieldName);
+                    break;
+                }
+                case 'relation': {
+                    const refMeta = (0, meta_1.getModelMetadata)({ model: field.relationToModel });
+                    components.add(refMeta.react.components.forms.searchFieldName);
+                    break;
+                }
+                default:
+                    continue;
+            }
+        }
+        return [...components].join(', ');
+    })()} }), 
+    []
+  )
   const cache = trpc.useContext()
   const mutation = trpc.${trpc.update.reactQueryMethod}.useMutation()
 
   return (
     <ModalWithNavigationContainer label="Edit ${meta.userFriendlyName}" show={show} onHide={onHide} fixed wide>
-      <Formik<EditInputData>
+      <Typed.Formik
         initialValues={{
 					${fields
         .map((field) => {
@@ -213,7 +259,7 @@ export const ${components.modals.editComponentName} = ({
             ${getFormFieldComponents({ model })}
           </ModalWithActions>
         )}
-      </Formik>
+      </Typed.Formik>
     </ModalWithNavigationContainer>
   )
 }
@@ -323,13 +369,10 @@ function getFormImports({ model, meta }) {
     return `
     import React from 'react'
     import { toast } from 'react-hot-toast'
-    import { Formik, FormikErrors } from 'formik'
+    import { FormikErrors } from 'formik'
     
-    import { CheckBoxField } from '@components/atoms/CheckBoxInput'
+    import { createTypedForm } from '@components/atoms/Form'
     import { ConfirmButton, ModalWithNavigationContainer, Label, ModalWithActions } from '@components/atoms/Modal'
-    import { TextAreaField } from '@components/atoms/TextAreaInput'
-    import { TextField } from '@components/atoms/TextInput'
-    import { NumberField } from '@components/atoms/NumberInput'
     
     import { trpc } from '@lib/trpc'
 
@@ -491,7 +534,7 @@ function getFormFieldComponents({ model }) {
                         form.append(`
               <div>
                 <Label>${label}</Label>
-                <TextField placeholder="Type..." name="${formikFieldName}" />
+                <Typed.TextField placeholder="Type..." name="${formikFieldName}" />
               </div>
             `);
                         break scalar;
@@ -504,7 +547,7 @@ function getFormFieldComponents({ model }) {
                         form.append(`
               <div>
                 <Label>${label}</Label>
-                <NumberField placeholder="2511" name="${formikFieldName}" decimals={${decimals}}/>
+                <Typed.NumberField placeholder="2511" name="${formikFieldName}" decimals={${decimals}}/>
               </div>
             `);
                         break scalar;
@@ -513,7 +556,7 @@ function getFormFieldComponents({ model }) {
                         form.append(`
               <div>
                 <Label>Is ${label}</Label>
-                <CheckBoxField label="${label}" name="${formikFieldName}" />
+                <Typed.CheckBoxField label="${label}" name="${formikFieldName}" />
               </div>
             `);
                         break scalar;
@@ -534,7 +577,7 @@ function getFormFieldComponents({ model }) {
                 form.append(`
           <div>
             <Label>${refMeta.userFriendlyName}</Label>
-            <${refMeta.react.components.forms.searchFieldName} name="${formikFieldName}" placeholder="Search..." />
+            <Typed.${refMeta.react.components.forms.searchFieldName} name="${formikFieldName}" placeholder="Search..." />
           </div>
         `);
                 break;
@@ -544,7 +587,7 @@ function getFormFieldComponents({ model }) {
                 form.append(`
           <div>
             <Label>${label}</Label>
-            <${enumMeta.react.selectFieldName} name="${formikFieldName}" placeholder="Search..." />
+            <Typed.${enumMeta.react.selectFieldName} name="${formikFieldName}" placeholder="Search..." />
           </div>
         `);
                 break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postxl/generator",
-  "version": "0.25.1",
+  "version": "0.27.0",
   "main": "./dist/generator.js",
   "typings": "./dist/generator.d.ts",
   "bin": {