@postxl/generator 0.74.2 → 1.0.3

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

@@ -1,710 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateDeleteModalModelComponent = exports.generateEditModalModelComponent = exports.generateModelCreateModalComponent = void 0;
-const imports_1 = require("../../../lib/imports");
-const meta_1 = require("../../../lib/meta");
-const fields_1 = require("../../../lib/schema/fields");
-const serializer_1 = require("../../../lib/serializer");
-const test_id_collector_1 = require("../../../lib/test-id-collector");
-const types_1 = require("../../../lib/types");
-const StringUtils = __importStar(require("../../../lib/utils/string"));
-/**
- * Utility generator that creates a create modal component for a given model.
- */
-function generateModelCreateModalComponent({ model, meta }) {
-    const { fields } = model;
-    const { react: { components: { modals }, }, trpc, } = meta;
-    const testIdCollector = test_id_collector_1.TestIdCollector.from(meta.seed.constantName + '-createModal');
-    const dimensions = getModalComponentDimensions({ model });
-    return `
-/* eslint-disable @typescript-eslint/no-unused-vars */
-${getFormImports({ model, meta })}
-
-type CreateInputData = {
-  ${getCreateFormInputFields({ model })}
-}
-
-const INITIAL_VALUES = {
-  ${fields
-        .filter((f) => f.kind !== 'id' && !f.attributes.isReadonly)
-        .map((field) => `${getFormikFieldName(field.name)}: null,`)
-        .join('\n')}
-}
-
-/**
- * A modal component that lets the user create a new ${meta.userFriendlyName} instance.
- */
-export const ${modals.createComponentName} = ({ 
-  show, 
-  onHide, 
-  data 
-}: { 
-  show: boolean; 
-  onHide: () => void; 
-  data?: Partial<CreateInputData> 
-}) => {
-  const Typed = React.useMemo(
-    () => createTypedForm<CreateInputData>().with({ ${(() => {
-        const components = new Set();
-        for (const field of fields.values()) {
-            if (field.attributes.isReadonly) {
-                continue;
-            }
-            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} ${dimensions}>
-      <Typed.Formik
-        initialValues={{ ...INITIAL_VALUES, ...data }}
-        validate={(values) => {
-          const errors: { [K in keyof CreateInputData]?: string } = {}
-
-					${getFormikValidationCases({ model })}
-
-          return errors
-        }}
-        onSubmit={async (values) => {
-          
-          try {
-            const res = await toast.promise(
-              mutation.mutateAsync(
-                {									
-                  ${getFormikCreateMutationData({ model })}
-                },
-                {
-                  async onSuccess() {
-                    await cache.${trpc.routerName}.invalidate()
-                  },
-                },
-              ),
-              {
-                loading: "Creating new ${meta.userFriendlyName}...",
-                success: "New ${meta.userFriendlyName} created!",
-                error: (error) => {
-                  if (error instanceof TRPCClientError) {
-                    return error.message
-                  }
-
-                  return 'Something went wrong...'
-                },
-              },
-            )
-
-            if (res.id) {
-              onHide()
-            }
-          } catch (err) {
-            console.error(err)
-          }
-        }}
-      >
-        {({ isSubmitting, submitForm }) => (
-          <ModalWithActions actions={
-            <ConfirmButton
-              color="primary"
-              label="Create"
-              fill="fill"
-              onClick={submitForm}
-              loading={isSubmitting}
-              __e2e_test_id__="${testIdCollector.idFor('submit', { typePrefix: 'buttons' })}"
-            />
-					}>
-						${getFormFieldComponents({ model, testIdCollector: testIdCollector })}
-          </ModalWithActions>
-        )}
-      </Typed.Formik>
-    </ModalWithNavigationContainer>
-  )
-}
-
-`;
-}
-exports.generateModelCreateModalComponent = generateModelCreateModalComponent;
-/**
- * Returns a React component that lets you edit a model instance.
- */
-function generateEditModalModelComponent({ model, meta }) {
-    const { fields } = model;
-    const { react: { components }, trpc, } = meta;
-    const testIdCollector = test_id_collector_1.TestIdCollector.from(meta.seed.constantName + '-editModal');
-    const dimensions = getModalComponentDimensions({ model });
-    return `
-/* eslint-disable @typescript-eslint/no-unused-vars */
-${getFormImports({ model, meta })}
-
-
-type EditInputData = {
-  ${getFormikFieldName(model.idField.name)}: ${model.brandedIdType}
-	${getEditFormInputFields({ model })}
-}
-
-/**
- * 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 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} ${dimensions}>
-      <Typed.Formik
-        initialValues={{
-					${fields
-        .filter((f) => !f.attributes.isReadonly || f.kind === 'id')
-        .map((field) => {
-        switch (field.kind) {
-            case 'enum':
-            case 'relation':
-                if (field.isRequired) {
-                    return `${getFormikFieldName(field.name)}: { id: data.${field.name} },`;
-                }
-                return `${getFormikFieldName(field.name)}: data.${field.name} ? { id: data.${field.name} } : null,`;
-            case 'id':
-            case 'scalar':
-                return `${getFormikFieldName(field.name)}: data.${field.name},`;
-            default:
-                throw new types_1.ExhaustiveSwitchCheck(field);
-        }
-    })
-        .join('\n')}
-        }}
-        validate={(values) => {
-          const errors: { [K in keyof EditInputData]?: string } = {}
-
-					${getFormikValidationCases({ model })}
-
-          return errors
-        }}
-        onSubmit={async (values) => {
-          try {
-            await toast.promise(
-              mutation.mutateAsync(
-                {
-                  ${getEditFormikMutationData({ model })}
-                },
-                {
-                  async onSuccess() {
-                    await cache.${trpc.routerName}.invalidate()
-                  },
-                },
-              ),
-              {
-                loading: "Updating ${meta.userFriendlyName}...",
-                success: "${meta.userFriendlyName} updated!",
-                error: (error) => {
-                  if (error instanceof TRPCClientError) {
-                    return error.message
-                  }
-
-                  return 'Something went wrong...'
-                },
-              },
-            )
-
-            onHide()
-          } catch (err) {
-            console.error(err)
-          }
-        }}
-      >
-        {({ isSubmitting, submitForm }) => (
-          <ModalWithActions
-            actions={
-              <ConfirmButton
-                label="Save"
-                color="primary"
-                onClick={submitForm}
-                loading={isSubmitting}
-                __e2e_test_id__="${testIdCollector.idFor('submit', { typePrefix: 'buttons' })}"
-              />
-            }
-          >
-            ${getFormFieldComponents({ model, testIdCollector: testIdCollector })}
-          </ModalWithActions>
-        )}
-      </Typed.Formik>
-    </ModalWithNavigationContainer>
-  )
-}
-	`;
-}
-exports.generateEditModalModelComponent = generateEditModalModelComponent;
-/**
- * Generates a modal component that lets you delete a model instance.
- */
-function generateDeleteModalModelComponent({ model, meta }) {
-    const { react: { components }, trpc, } = meta;
-    const imports = imports_1.ImportsGenerator.from(meta.react.folderPath).addTypeImport({
-        items: [model.brandedIdType],
-        from: meta.types.importPath,
-    });
-    return `
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { TRPCClientError } from '@trpc/client'
-
-import { Formik } 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.routerName}.invalidate()
-          },
-        }),
-        {
-          loading: "Deleting ${meta.userFriendlyName}...",
-          success: "${meta.userFriendlyName} deleted!",
-          error: (err) => {
-            if (err instanceof TRPCClientError) {
-              return err.message
-            }
-            return '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;
-/**
- * Returns the import statements to the models that are used in this modal.
- */
-function getFormImports({ model, meta }) {
-    const imports = imports_1.ImportsGenerator.from(meta.react.folderPath).addTypeImport({
-        items: [model.brandedIdType, model.typeName],
-        from: meta.types.importPath,
-    });
-    for (const ref of (0, fields_1.getRelationFields)(model)) {
-        const refModel = ref.relationToModel;
-        const refMeta = (0, meta_1.getModelMetadata)({ model: refModel });
-        imports.addImport({
-            items: [refMeta.react.components.forms.searchFieldName],
-            from: refMeta.react.folderPath,
-        });
-        imports.addTypeImport({
-            items: [refModel.brandedIdType],
-            from: refMeta.types.importPath,
-        });
-    }
-    for (const f of (0, fields_1.getEnumFields)(model)) {
-        const enumMeta = (0, meta_1.getEnumMetadata)(f);
-        imports.addTypeImport({
-            items: [f.enumerator.tsTypeName],
-            from: enumMeta.types.importPath,
-        });
-        imports.addImport({
-            items: [enumMeta.react.selectFieldName],
-            from: enumMeta.react.folderPath,
-        });
-    }
-    return `
-    import { TRPCClientError } from '@trpc/client'
-    import React from 'react'
-    import { toast } from 'react-hot-toast'
-    
-    import { createTypedForm } from '@components/atoms/Form'
-    import { ConfirmButton, ModalWithNavigationContainer, Label, ModalWithActions } from '@components/atoms/Modal'
-    
-    import { trpc } from '@lib/trpc'
-
-    ${imports.generate()}
-  `;
-}
-/**
- * Returns a string containing TypeScript type definition for the input data of the create mutation.
- *
- * NOTE: This function assumes that fields might also be null because we have no data yet.
- */
-function getCreateFormInputFields({ model }) {
-    const form = new serializer_1.Serializer();
-    for (const field of model.fields.values()) {
-        if (field.attributes.isReadonly) {
-            continue;
-        }
-        switch (field.kind) {
-            case 'id':
-                continue;
-            case 'relation':
-                form.append(`${getFormikFieldName(field.name)}: { id: ${field.relationToModel.brandedIdType} } | null`);
-                break;
-            case 'scalar':
-                form.append(`${getFormikFieldName(field.name)}: ${field.tsTypeName} | null`);
-                break;
-            case 'enum':
-                form.append(`${getFormikFieldName(field.name)}: { id: ${field.typeName} } | null`);
-                break;
-            default:
-                throw new types_1.ExhaustiveSwitchCheck(field);
-        }
-    }
-    return form.print();
-}
-function getFormikCreateMutationData({ model: { fields } }) {
-    return fields
-        .filter((f) => !f.attributes.isReadonly)
-        .map((field) => {
-        const formikFieldName = getFormikFieldName(field.name);
-        switch (field.kind) {
-            case 'id':
-            case 'scalar':
-                // NOTE: Create methods generate the ID field upon submission.
-                if (field.kind === 'id') {
-                    return '';
-                }
-                if (field.isRequired) {
-                    return `
-            // NOTE: We force unwrap values, because we validate values using Formik.
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            ${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.
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              ${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.
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            ${field.name}: values.${formikFieldName}!.id,
-            `;
-                }
-                return `${field.name}: values.${formikFieldName}?.id ? values.${formikFieldName}.id : null,`;
-            default:
-                throw new types_1.ExhaustiveSwitchCheck(field);
-        }
-    })
-        .join('\n');
-}
-/**
- * Returns a string containing the fields of the input data without the ID field.
- */
-function getEditFormInputFields({ model }) {
-    const form = new serializer_1.Serializer();
-    for (const field of model.fields.values()) {
-        if (field.attributes.isReadonly) {
-            continue;
-        }
-        switch (field.kind) {
-            case 'id':
-                continue;
-            case 'relation':
-                if (field.isRequired) {
-                    form.append(`${getFormikFieldName(field.name)}: { id: ${field.relationToModel.brandedIdType} }`);
-                }
-                else {
-                    form.append(`${getFormikFieldName(field.name)}: { id: ${field.relationToModel.brandedIdType} } | null`);
-                }
-                break;
-            case 'scalar':
-                if (field.isRequired) {
-                    form.append(`${getFormikFieldName(field.name)}: ${field.tsTypeName}`);
-                }
-                else {
-                    form.append(`${getFormikFieldName(field.name)}: ${field.tsTypeName} | null`);
-                }
-                break;
-            case 'enum':
-                if (field.isRequired) {
-                    form.append(`${getFormikFieldName(field.name)}: { id: ${field.typeName} }`);
-                }
-                else {
-                    form.append(`${getFormikFieldName(field.name)}: { id: ${field.typeName} } | null`);
-                }
-                break;
-            default:
-                throw new types_1.ExhaustiveSwitchCheck(field);
-        }
-    }
-    return form.print();
-}
-function getEditFormikMutationData({ model: { fields } }) {
-    return fields
-        .filter((f) => !f.attributes.isReadonly || f.kind === 'id')
-        .map((field) => {
-        const formikFieldName = getFormikFieldName(field.name);
-        switch (field.kind) {
-            case 'id':
-            // NOTE: Edit mutation expects the ID field to identify the object.
-            // eslint-disable-next-line no-fallthrough
-            case 'scalar':
-                return `${field.name}: values.${formikFieldName},`;
-            case 'relation':
-                if (field.isRequired) {
-                    return `${field.name}: values.${formikFieldName}.id,`;
-                }
-                return `${field.name}: values.${formikFieldName}?.id ? values.${formikFieldName}.id : null,`;
-            case 'enum':
-                if (field.isRequired) {
-                    return `${field.name}: values.${formikFieldName}.id,`;
-                }
-                return `${field.name}: values.${formikFieldName}?.id ? values.${formikFieldName}.id : null,`;
-            default:
-                throw new types_1.ExhaustiveSwitchCheck(field);
-        }
-    })
-        .join('\n');
-}
-/**
- * Returns a string containing all the components that should appear in the Formik form for this model.
- */
-function getFormFieldComponents({ model, testIdCollector, }) {
-    var _a;
-    const form = new serializer_1.Serializer();
-    for (const field of model.fields.values()) {
-        // By default, we hide generated fields like createdAt, updatedAt, deletedAt.
-        if (field.attributes.isReadonly) {
-            continue;
-        }
-        const formikFieldName = getFormikFieldName(field.name);
-        const label = field.attributes.label;
-        switch (field.kind) {
-            case 'id': {
-                // NOTE: We never show the ID field in the form even if it's in the type signature of the form input.
-                break;
-            }
-            case 'scalar': {
-                // Each scalar field has a different generic component based on the provided type.
-                scalar: switch (field.tsTypeName) {
-                    case 'string': {
-                        form.append(`
-              <div>
-                <Label>${label}</Label>
-                <Typed.TextField 
-                  name="${formikFieldName}"
-                  placeholder="Type..."
-                  __e2e_field_test_id__="${testIdCollector.idFor(field.name, { typePrefix: 'fields' })}"
-                />
-              </div>
-            `);
-                        break scalar;
-                    }
-                    case 'number': {
-                        let decimals = 0;
-                        if (((_a = field.validation) === null || _a === void 0 ? void 0 : _a.type) === 'float') {
-                            decimals = 2;
-                        }
-                        form.append(`
-              <div>
-                <Label>${label}</Label>
-                <Typed.NumberField 
-                  name="${formikFieldName}"
-                  placeholder="2511"
-                  decimals={${decimals}}
-                  __e2e_field_test_id__="${testIdCollector.idFor(field.name, { typePrefix: 'fields' })}"
-                />
-              </div>
-            `);
-                        break scalar;
-                    }
-                    case 'boolean': {
-                        form.append(`
-              <div>
-                <Label>Is ${label}</Label>
-                <Typed.CheckBoxField 
-                  name="${formikFieldName}" 
-                  label="${label}" 
-                  __e2e_field_test_id__="${testIdCollector.idFor(field.name, { typePrefix: 'fields' })}"
-                />
-              </div>
-            `);
-                        break scalar;
-                    }
-                    case 'Date': {
-                        form.append(`{/*  Skipped date field ${field.name}. */}`);
-                        break scalar;
-                    }
-                    default: {
-                        console.warn(`Unknown scalar type ${field.tsTypeName} for field ${model.name}.${field.name}.`);
-                        break scalar;
-                    }
-                }
-                break;
-            }
-            case 'relation': {
-                const refMeta = (0, meta_1.getModelMetadata)({ model: field.relationToModel });
-                form.append(`
-          <div>
-            <Label>${refMeta.userFriendlyName}</Label>
-            <Typed.${refMeta.react.components.forms.searchFieldName} 
-              name="${formikFieldName}" 
-              placeholder="Search..." 
-              __e2e_options_test_id__="${testIdCollector.idFor(field.name, { typePrefix: 'options' })}"
-              __e2e_combobox_test_id__="${testIdCollector.idFor(field.name, { typePrefix: 'fields' })}"
-            />
-          </div>
-        `);
-                break;
-            }
-            case 'enum': {
-                const enumMeta = (0, meta_1.getEnumMetadata)({ enumerator: field.enumerator });
-                form.append(`
-          <div>
-            <Label>${label}</Label>
-            <Typed.${enumMeta.react.selectFieldName} 
-              name="${formikFieldName}" 
-              placeholder="Search..." 
-              __e2e_field_test_id__="${testIdCollector.idFor(field.name, { typePrefix: 'fields' })}"
-            />
-          </div>
-        `);
-                break;
-            }
-            default:
-                throw new types_1.ExhaustiveSwitchCheck(field);
-        }
-    }
-    return form.print();
-}
-/**
- * Returns a string containing a list of checks for Formik validation function.
- */
-function getFormikValidationCases({ model }) {
-    const form = new serializer_1.Serializer();
-    for (const field of model.fields.values()) {
-        if (field.kind === 'id' || field.attributes.isReadonly) {
-            continue;
-        }
-        const formikFieldName = getFormikFieldName(field.name);
-        if (field.isRequired) {
-            form.append(`
-        if (!values.${formikFieldName}) {
-          errors.${formikFieldName} = "Required..."
-        }
-      `);
-        }
-    }
-    return form.print();
-}
-// NOTE: This function is separated because many parts rely on the name of the field.
-function getFormikFieldName(name) {
-    return `formik${StringUtils.toPascalCase(name)}`;
-}
-/**
- * Returns a string representing the "missing" dimension parameters for the modal component
- * depending on the type of the modal.
- */
-function getModalComponentDimensions({ model }) {
-    const _fields = model.fields.filter((f) => f.kind !== 'id' && !f.attributes.isReadonly);
-    if (_fields.length > 3) {
-        return 'fixed wide';
-    }
-    return '';
-}