@postxl/generator 0.0.1

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

@@ -0,0 +1,521 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateDeleteModalModelComponent = exports.generateEditModalModelComponent = exports.generateModelCreateModalComponent = void 0;
+const assert_never_1 = __importDefault(require("assert-never"));
+const serializer_1 = require("../../../lib/serializer");
+const StringUtils = __importStar(require("../../../lib/utils/string"));
+const meta_1 = require("../../../lib/meta");
+const fields_1 = require("../../../lib/schema/fields");
+const imports_1 = require("../../../lib/imports");
+/**
+ * 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;
+    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>
+  )
+}
+
+`;
+}
+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;
+    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) {
+            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:
+                (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>
+  )
+}
+	`;
+}
+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).addImport({
+        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}
+		/>
+	)
+}
+	`;
+}
+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).addImport({
+        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.addImport({
+            items: [refModel.brandedIdType],
+            from: refMeta.types.importPath,
+        });
+    }
+    for (const f of (0, fields_1.getEnumFields)(model)) {
+        const enumMeta = (0, meta_1.getEnumMetadata)(f);
+        imports.addImport({
+            items: [f.enumerator.typeName],
+            from: enumMeta.types.importPath,
+        });
+        imports.addImport({
+            items: [enumMeta.react.selectFieldName],
+            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()}
+  `;
+}
+/**
+ * Returns a string containing the fields of the input data without the ID field.
+ */
+function getFormInputFields({ model, nullable }) {
+    const form = new serializer_1.Serializer();
+    for (const field of model.fields.values()) {
+        switch (field.kind) {
+            case 'id':
+                continue;
+            case 'relation':
+                if (field.isRequired && nullable !== true) {
+                    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 && nullable !== true) {
+                    form.append(`${getFormikFieldName(field.name)}: ${field.typeName}`);
+                }
+                else {
+                    form.append(`${getFormikFieldName(field.name)}: ${field.typeName} | null`);
+                }
+                break;
+            case 'enum':
+                if (field.isRequired && nullable !== true) {
+                    form.append(`${getFormikFieldName(field.name)}: { id: ${field.typeName} }`);
+                }
+                else {
+                    form.append(`${getFormikFieldName(field.name)}: { id: ${field.typeName} } | null`);
+                }
+                break;
+            default:
+                (0, assert_never_1.default)(field);
+        }
+    }
+    return form.print();
+}
+/**
+ * Returns a string containing all the components that should appear in the Formik form for this model.
+ */
+function getFormFieldComponents({ model }) {
+    var _a;
+    const form = new serializer_1.Serializer();
+    for (const field of model.fields.values()) {
+        const formikFieldName = getFormikFieldName(field.name);
+        const label = StringUtils.toPascalCase(field.name);
+        switch (field.kind) {
+            case 'id': {
+                // NOTE: We never show the ID field in the form even if it's in the type signiture of the form input.
+                break;
+            }
+            case 'scalar': {
+                // 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>
+            `);
+                        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>
+                <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>
+            `);
+                        break scalar;
+                    case 'Date':
+                        form.append(`{/*  Skipped date field ${field.name}. */}`);
+                        break scalar;
+                    default:
+                        console.warn(`Unknown scalar type ${field.typeName} 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>
+            <${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>
+        `);
+                break;
+            }
+            default:
+                (0, assert_never_1.default)(field);
+        }
+    }
+    return form.print();
+}
+/**
+ * Returns a string containing a list of checks for Formik validation function.
+ */
+function getFormikValidationCases({ model, includeId }) {
+    const form = new serializer_1.Serializer();
+    for (const field of model.fields.values()) {
+        if (!includeId && field.kind === 'id')
+            continue;
+        const formikFieldName = getFormikFieldName(field.name);
+        if (field.isRequired) {
+            form.append(`
+        if (!values.${formikFieldName}) {
+          errors.${formikFieldName} = "Required..."
+        }
+      `);
+        }
+    }
+    return form.print();
+}
+function getFormikMutationData({ model: { fields }, includeId }) {
+    return fields
+        .map((field) => {
+        const formikFieldName = getFormikFieldName(field.name);
+        switch (field.kind) {
+            case 'id':
+            case 'scalar':
+                if (field.kind === 'id' && !includeId) {
+                    return '';
+                }
+                if (field.isRequired) {
+                    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 `${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 `${field.name}: values.${formikFieldName}?.id ? values.${formikFieldName}!.id : null,`;
+            default:
+                (0, assert_never_1.default)(field);
+        }
+    })
+        .join('\n');
+}
+// NOTE: This function is separated because many parts rely on the name of the field.
+function getFormikFieldName(name) {
+    return `formik${StringUtils.toPascalCase(name)}`;
+}

package/dist/src/generators/models/repository.generator.d.ts

@@ -0,0 +1,9 @@
+import { Model } from '../../lib/schema/schema';
+import { ModelMetaData } from '../../lib/meta';
+/**
+ * Generates repository data structure for a given model.
+ */
+export declare function generateRepository({ model, meta }: {
+    model: Model;
+    meta: ModelMetaData;
+}): string;