@postxl/generator 0.0.20 → 0.0.22

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

@@ -39,84 +39,84 @@ const imports_1 = require("../../../lib/imports");
 function generateModelCreateModalComponent({ model, meta }) {
     const { fields } = model;
     const { react: { components: { modals }, }, trpc, } = meta;
-    return `
-${getFormImports({ model, meta })}
-
-type CreateInputData = {
-  ${getFormInputFields({ model, nullable: true })}
-}
-
-/**
- * A modal component that lets the user create a new ${meta.userFriendlyName} instance.
- */
-export const ${modals.createComponentName} = ({ show, onHide }: { show: boolean; onHide: () => void }) => {
-  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>
-        initialValues={{
+    return `
+${getFormImports({ model, meta })}
+
+type CreateInputData = {
+  ${getFormInputFields({ model, nullable: true })}
+}
+
+/**
+ * A modal component that lets the user create a new ${meta.userFriendlyName} instance.
+ */
+export const ${modals.createComponentName} = ({ show, onHide }: { show: boolean; onHide: () => void }) => {
+  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>
+        initialValues={{
 					${fields
         .filter((f) => f.kind !== 'id')
         .map((field) => `${getFormikFieldName(field.name)}: null,`)
-        .join('\n')}
-				}}
-        validate={(values) => {
-          const errors: FormikErrors<CreateInputData> = {}
-
-					${getFormikValidationCases({ model, includeId: false })}
-
-          return errors
-        }}
-        onSubmit={async (values) => {
-          
-          try {
-            const res = await toast.promise(
-              mutation.mutateAsync(
-                {									
-                  ${getFormikMutationData({ model, includeId: false })}
-                },
-                {
-                  async onSuccess() {
-                    await cache.${trpc.getMap.reactQueryMethod}.invalidate()
-                  },
-                },
-              ),
-              {
-                loading: "Creating new ${meta.userFriendlyName}...",
-                success: "New ${meta.userFriendlyName} created!",
-                error: "Something went wrong...",
-              },
-            )
-
-            if (res.id) {
-              onHide()
-            }
-          } catch (err) {
-            console.error(err)
-          }
-        }}
-      >
-        {({ isSubmitting, handleSubmit, isValid }) => (
-          <ModalWithActions actions={
-            <ConfirmButton
-              color="primary"
-              label="Create"
-              fill="fill"
-              onClick={handleSubmit}
-              loading={isSubmitting}
-              disabled={!isValid}
-            />
-					}>
-						${getFormFieldComponents({ model })}
-          </ModalWithActions>
-        )}
-      </Formik>
-    </ModalWithNavigationContainer>
-  )
-}
-
+        .join('\n')}
+				}}
+        validate={(values) => {
+          const errors: FormikErrors<CreateInputData> = {}
+
+					${getFormikValidationCases({ model, includeId: false })}
+
+          return errors
+        }}
+        onSubmit={async (values) => {
+          
+          try {
+            const res = await toast.promise(
+              mutation.mutateAsync(
+                {									
+                  ${getFormikMutationData({ model, includeId: false })}
+                },
+                {
+                  async onSuccess() {
+                    await cache.${trpc.getMap.reactQueryMethod}.invalidate()
+                  },
+                },
+              ),
+              {
+                loading: "Creating new ${meta.userFriendlyName}...",
+                success: "New ${meta.userFriendlyName} created!",
+                error: "Something went wrong...",
+              },
+            )
+
+            if (res.id) {
+              onHide()
+            }
+          } catch (err) {
+            console.error(err)
+          }
+        }}
+      >
+        {({ isSubmitting, handleSubmit, isValid }) => (
+          <ModalWithActions actions={
+            <ConfirmButton
+              color="primary"
+              label="Create"
+              fill="fill"
+              onClick={handleSubmit}
+              loading={isSubmitting}
+              disabled={!isValid}
+            />
+					}>
+						${getFormFieldComponents({ model })}
+          </ModalWithActions>
+        )}
+      </Formik>
+    </ModalWithNavigationContainer>
+  )
+}
+
 `;
 }
 exports.generateModelCreateModalComponent = generateModelCreateModalComponent;
@@ -126,30 +126,30 @@ exports.generateModelCreateModalComponent = generateModelCreateModalComponent;
 function generateEditModalModelComponent({ model, meta }) {
     const { fields } = model;
     const { react: { components }, trpc, } = meta;
-    return `
-${getFormImports({ model, meta })}
-
-
-type EditInputData = {
-  ${getFormikFieldName(model.idField.name)}: ${model.brandedIdType}
-	${getFormInputFields({ model, nullable: false })}
-}
-
-/**
- * Modal component that may be used to edit a ${model.name} instance.
- */
-export const ${components.modals.editComponentName} = ({ 
-  data, 
-  show, 
-  onHide 
-}: { data: ${model.typeName}; show: boolean; onHide: () => void }) => {
-  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>
-        initialValues={{
+    return `
+${getFormImports({ model, meta })}
+
+
+type EditInputData = {
+  ${getFormikFieldName(model.idField.name)}: ${model.brandedIdType}
+	${getFormInputFields({ model, nullable: false })}
+}
+
+/**
+ * Modal component that may be used to edit a ${model.name} instance.
+ */
+export const ${components.modals.editComponentName} = ({ 
+  data, 
+  show, 
+  onHide 
+}: { data: ${model.typeName}; show: boolean; onHide: () => void }) => {
+  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>
+        initialValues={{
 					${fields
         .map((field) => {
         switch (field.kind) {
@@ -166,60 +166,60 @@ export const ${components.modals.editComponentName} = ({
                 (0, assert_never_1.default)(field);
         }
     })
-        .join('\n')}
-        }}
-        validate={(values) => {
-          const errors: { [K in keyof EditInputData]?: string } = {}
-
-					${getFormikValidationCases({ model, includeId: true })}
-
-          return errors
-        }}
-        onSubmit={async (values) => {
-          try {
-            await toast.promise(
-              mutation.mutateAsync(
-                {
-                  ${getFormikMutationData({ model, includeId: true })}
-                },
-                {
-                  async onSuccess() {
-                    await cache.${trpc.getMap.reactQueryMethod}.invalidate()
-                  },
-                },
-              ),
-              {
-                loading: "Updating ${meta.userFriendlyName}...",
-                success: "${meta.userFriendlyName} updated!",
-                error: "Something went wrong...",
-              },
-            )
-
-            onHide()
-          } catch (err) {
-            console.error(err)
-          }
-        }}
-      >
-        {({ isSubmitting, isValid, handleSubmit }) => (
-          <ModalWithActions
-            actions={
-              <ConfirmButton
-                label="Save"
-                color="primary"
-                onClick={handleSubmit}
-                loading={isSubmitting}
-                disabled={!isValid}
-              />
-            }
-          >
-            ${getFormFieldComponents({ model })}
-          </ModalWithActions>
-        )}
-      </Formik>
-    </ModalWithNavigationContainer>
-  )
-}
+        .join('\n')}
+        }}
+        validate={(values) => {
+          const errors: { [K in keyof EditInputData]?: string } = {}
+
+					${getFormikValidationCases({ model, includeId: true })}
+
+          return errors
+        }}
+        onSubmit={async (values) => {
+          try {
+            await toast.promise(
+              mutation.mutateAsync(
+                {
+                  ${getFormikMutationData({ model, includeId: true })}
+                },
+                {
+                  async onSuccess() {
+                    await cache.${trpc.getMap.reactQueryMethod}.invalidate()
+                  },
+                },
+              ),
+              {
+                loading: "Updating ${meta.userFriendlyName}...",
+                success: "${meta.userFriendlyName} updated!",
+                error: "Something went wrong...",
+              },
+            )
+
+            onHide()
+          } catch (err) {
+            console.error(err)
+          }
+        }}
+      >
+        {({ isSubmitting, isValid, handleSubmit }) => (
+          <ModalWithActions
+            actions={
+              <ConfirmButton
+                label="Save"
+                color="primary"
+                onClick={handleSubmit}
+                loading={isSubmitting}
+                disabled={!isValid}
+              />
+            }
+          >
+            ${getFormFieldComponents({ model })}
+          </ModalWithActions>
+        )}
+      </Formik>
+    </ModalWithNavigationContainer>
+  )
+}
 	`;
 }
 exports.generateEditModalModelComponent = generateEditModalModelComponent;
@@ -232,62 +232,62 @@ function generateDeleteModalModelComponent({ model, meta }) {
         items: [model.brandedIdType],
         from: meta.types.importPath,
     });
-    return `
-import { Formik, FormikErrors } from 'formik'
-import React, { useCallback } from 'react'
-import { toast } from 'react-hot-toast'
-
-import { ConfirmationModal } from '@components/atoms/Modal'
-import { trpc } from '@lib/trpc'
-
-${imports.generate()}
-
-/**
- * Modal components that shows a confirmation modal before deleting a ${meta.userFriendlyName}.
- */
-export const ${components.modals.deleteComponentName} = ({ 
-  id, 
-  show, 
-  onHide 
-}: { 
-  id: ${model.brandedIdType}; 
-  show: boolean; 
-  onHide: () => void 
-}) => {
-	const cache = trpc.useContext()
-	const mutation = trpc.${trpc.delete.reactQueryMethod}.useMutation()
-
-	const handleDelete = useCallback(async () => {
-    try {
-      await toast.promise(
-        mutation.mutateAsync(id, {
-          async onSuccess() {
-            await cache.${trpc.getMap.reactQueryMethod}.invalidate()
-          },
-        }),
-        {
-          loading: "Deleting ${meta.userFriendlyName}...",
-          success: "${meta.userFriendlyName} deleted!",
-          error: "Something went wrong...",
-        },
-      )
-    } catch (err) {
-      console.error(err)
-    }
-  }, [mutation, id, cache])
-
-	return (
-		<ConfirmationModal
-			show={show}
-			onHide={onHide}
-			onConfirm={handleDelete}
-			label="Delete ${meta.userFriendlyName}"
-			description="Please confirm that you want to delete this ${meta.userFriendlyName}."
-			variant="danger"
-			loading={mutation.isLoading}
-		/>
-	)
-}
+    return `
+import { Formik, FormikErrors } from 'formik'
+import React, { useCallback } from 'react'
+import { toast } from 'react-hot-toast'
+
+import { ConfirmationModal } from '@components/atoms/Modal'
+import { trpc } from '@lib/trpc'
+
+${imports.generate()}
+
+/**
+ * Modal components that shows a confirmation modal before deleting a ${meta.userFriendlyName}.
+ */
+export const ${components.modals.deleteComponentName} = ({ 
+  id, 
+  show, 
+  onHide 
+}: { 
+  id: ${model.brandedIdType}; 
+  show: boolean; 
+  onHide: () => void 
+}) => {
+	const cache = trpc.useContext()
+	const mutation = trpc.${trpc.delete.reactQueryMethod}.useMutation()
+
+	const handleDelete = useCallback(async () => {
+    try {
+      await toast.promise(
+        mutation.mutateAsync(id, {
+          async onSuccess() {
+            await cache.${trpc.getMap.reactQueryMethod}.invalidate()
+          },
+        }),
+        {
+          loading: "Deleting ${meta.userFriendlyName}...",
+          success: "${meta.userFriendlyName} deleted!",
+          error: "Something went wrong...",
+        },
+      )
+    } catch (err) {
+      console.error(err)
+    }
+  }, [mutation, id, cache])
+
+	return (
+		<ConfirmationModal
+			show={show}
+			onHide={onHide}
+			onConfirm={handleDelete}
+			label="Delete ${meta.userFriendlyName}"
+			description="Please confirm that you want to delete this ${meta.userFriendlyName}."
+			variant="danger"
+			loading={mutation.isLoading}
+		/>
+	)
+}
 	`;
 }
 exports.generateDeleteModalModelComponent = generateDeleteModalModelComponent;
@@ -322,20 +322,20 @@ function getFormImports({ model, meta }) {
             from: enumMeta.react.folderPath,
         });
     }
-    return `
-    import React from 'react'
-    import { toast } from 'react-hot-toast'
-    import { Formik, FormikErrors } from 'formik'
-    
-    import { CheckBoxField } from '@components/atoms/CheckBoxInput'
-    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'
-
-    ${imports.generate()}
+    return `
+    import React from 'react'
+    import { toast } from 'react-hot-toast'
+    import { Formik, FormikErrors } from 'formik'
+    
+    import { CheckBoxField } from '@components/atoms/CheckBoxInput'
+    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'
+
+    ${imports.generate()}
   `;
 }
 /**
@@ -395,11 +395,11 @@ function getFormFieldComponents({ model }) {
                 // Each scalar field has a different generic component based on the provided type.
                 scalar: switch (field.typeName) {
                     case 'string':
-                        form.append(`
-              <div>
-                <Label>${label}</Label>
-                <TextField placeholder="Type..." name="${formikFieldName}" />
-              </div>
+                        form.append(`
+              <div>
+                <Label>${label}</Label>
+                <TextField placeholder="Type..." name="${formikFieldName}" />
+              </div>
             `);
                         break scalar;
                     case 'number':
@@ -407,19 +407,19 @@ function getFormFieldComponents({ model }) {
                         if (((_a = field.validation) === null || _a === void 0 ? void 0 : _a.type) === 'float') {
                             decimals = 2;
                         }
-                        form.append(`
-              <div>
-                <Label>${label}</Label>
-                <NumberField placeholder="2511" name="${formikFieldName}" decimals={${decimals}}/>
-              </div>
+                        form.append(`
+              <div>
+                <Label>${label}</Label>
+                <NumberField placeholder="2511" name="${formikFieldName}" decimals={${decimals}}/>
+              </div>
             `);
                         break scalar;
                     case 'boolean':
-                        form.append(`
-              <div>
-                <Label>Is ${label}</Label>
-                <CheckBoxField label="${label}" name="${formikFieldName}" />
-              </div>
+                        form.append(`
+              <div>
+                <Label>Is ${label}</Label>
+                <CheckBoxField label="${label}" name="${formikFieldName}" />
+              </div>
             `);
                         break scalar;
                     case 'Date':
@@ -433,21 +433,21 @@ function getFormFieldComponents({ model }) {
             }
             case 'relation': {
                 const refMeta = (0, meta_1.getModelMetadata)({ model: field.relationToModel });
-                form.append(`
-          <div>
-            <Label>${refMeta.userFriendlyName}</Label>
-            <${refMeta.react.components.forms.searchFieldName} name="${formikFieldName}" placeholder="Search..." />
-          </div>
+                form.append(`
+          <div>
+            <Label>${refMeta.userFriendlyName}</Label>
+            <${refMeta.react.components.forms.searchFieldName} name="${formikFieldName}" placeholder="Search..." />
+          </div>
         `);
                 break;
             }
             case 'enum': {
                 const enumMeta = (0, meta_1.getEnumMetadata)({ enumerator: field.enumerator });
-                form.append(`
-          <div>
-            <Label>${label}</Label>
-            <${enumMeta.react.selectFieldName} name="${formikFieldName}" placeholder="Search..." />
-          </div>
+                form.append(`
+          <div>
+            <Label>${label}</Label>
+            <${enumMeta.react.selectFieldName} name="${formikFieldName}" placeholder="Search..." />
+          </div>
         `);
                 break;
             }
@@ -467,10 +467,10 @@ function getFormikValidationCases({ model, includeId }) {
             continue;
         const formikFieldName = getFormikFieldName(field.name);
         if (field.isRequired) {
-            form.append(`
-        if (!values.${formikFieldName}) {
-          errors.${formikFieldName} = "Required..."
-        }
+            form.append(`
+        if (!values.${formikFieldName}) {
+          errors.${formikFieldName} = "Required..."
+        }
       `);
         }
     }
@@ -487,25 +487,25 @@ function getFormikMutationData({ model: { fields }, includeId }) {
                     return '';
                 }
                 if (field.isRequired) {
-                    return `
-            // NOTE: We force unwrap values, because we validate values using Formik.
-            ${field.name}: values.${formikFieldName}!,
+                    return `
+            // NOTE: We force unwrap values, because we validate values using Formik.
+            ${field.name}: values.${formikFieldName}!,
             `;
                 }
                 return `${field.name}: values.${formikFieldName},`;
             case 'relation':
                 if (field.isRequired) {
-                    return `
-              // NOTE: We force unwrap values, because we validate values using Formik.
-              ${field.name}: values.${formikFieldName}!.id,
+                    return `
+              // NOTE: We force unwrap values, because we validate values using Formik.
+              ${field.name}: values.${formikFieldName}!.id,
             `;
                 }
                 return `${field.name}: values.${formikFieldName}?.id ? values.${formikFieldName}!.id : null,`;
             case 'enum':
                 if (field.isRequired) {
-                    return `
-            // NOTE: We force unwrap values, because we validate values using Formik.
-            ${field.name}: values.${formikFieldName}!.id,
+                    return `
+            // NOTE: We force unwrap values, because we validate values using Formik.
+            ${field.name}: values.${formikFieldName}!.id,
             `;
                 }
                 return `${field.name}: values.${formikFieldName}?.id ? values.${formikFieldName}!.id : null,`;