@baseplate-dev/react-generators 0.1.1

package/dist/generators/admin/admin-components/admin-components.generator.js

@@ -0,0 +1,51 @@
+import { createNodePackagesTask, extractPackageVersions, projectScope, typescriptFileProvider, } from '@baseplate-dev/core-generators';
+import { createGenerator, createGeneratorTask } from '@baseplate-dev/sync';
+import { z } from 'zod';
+import { REACT_PACKAGES } from '#src/constants/react-packages.js';
+import { reactComponentsImportsProvider, reactComponentsProvider, } from '#src/generators/core/react-components/react-components.generator.js';
+import { adminComponentsImportsProvider, createAdminComponentsImports, } from './generated/ts-import-maps.js';
+import { ADMIN_ADMIN_COMPONENTS_TS_TEMPLATES } from './generated/ts-templates.js';
+const descriptorSchema = z.object({});
+export const adminComponentsGenerator = createGenerator({
+    name: 'admin/admin-components',
+    generatorFileUrl: import.meta.url,
+    descriptorSchema,
+    buildTasks: () => ({
+        nodePackages: createNodePackagesTask({
+            prod: extractPackageVersions(REACT_PACKAGES, ['nanoid']),
+        }),
+        main: createGeneratorTask({
+            dependencies: {
+                reactComponents: reactComponentsProvider,
+                reactComponentsImports: reactComponentsImportsProvider,
+                typescriptFile: typescriptFileProvider,
+            },
+            exports: {
+                adminComponentsImports: adminComponentsImportsProvider.export(projectScope),
+            },
+            run({ reactComponents, reactComponentsImports, typescriptFile }) {
+                reactComponents.registerComponent({ name: 'EmbeddedListInput' });
+                reactComponents.registerComponent({
+                    name: 'EmbeddedObjectInput',
+                });
+                reactComponents.registerComponent({ name: 'DescriptionList' });
+                return {
+                    providers: {
+                        adminComponentsImports: createAdminComponentsImports(reactComponents.getComponentsFolder()),
+                    },
+                    build: async (builder) => {
+                        await builder.apply(typescriptFile.renderTemplateGroup({
+                            group: ADMIN_ADMIN_COMPONENTS_TS_TEMPLATES.componentsGroup,
+                            baseDirectory: reactComponents.getComponentsFolder(),
+                            importMapProviders: {
+                                reactComponentsImports,
+                            },
+                        }));
+                    },
+                };
+            },
+        }),
+    }),
+});
+export { adminComponentsImportsProvider } from './generated/ts-import-maps.js';
+//# sourceMappingURL=admin-components.generator.js.map

package/dist/generators/admin/admin-components/admin-components.generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin-components.generator.js","sourceRoot":"","sources":["../../../../src/generators/admin/admin-components/admin-components.generator.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,sBAAsB,EACtB,YAAY,EACZ,sBAAsB,GACvB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EACL,8BAA8B,EAC9B,uBAAuB,GACxB,MAAM,qEAAqE,CAAC;AAE7E,OAAO,EACL,8BAA8B,EAC9B,4BAA4B,GAC7B,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,mCAAmC,EAAE,MAAM,6BAA6B,CAAC;AAElF,MAAM,gBAAgB,GAAG,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,wBAAwB,GAAG,eAAe,CAAC;IACtD,IAAI,EAAE,wBAAwB;IAC9B,gBAAgB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG;IACjC,gBAAgB;IAChB,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC;QACjB,YAAY,EAAE,sBAAsB,CAAC;YACnC,IAAI,EAAE,sBAAsB,CAAC,cAAc,EAAE,CAAC,QAAQ,CAAC,CAAC;SACzD,CAAC;QACF,IAAI,EAAE,mBAAmB,CAAC;YACxB,YAAY,EAAE;gBACZ,eAAe,EAAE,uBAAuB;gBACxC,sBAAsB,EAAE,8BAA8B;gBACtD,cAAc,EAAE,sBAAsB;aACvC;YACD,OAAO,EAAE;gBACP,sBAAsB,EACpB,8BAA8B,CAAC,MAAM,CAAC,YAAY,CAAC;aACtD;YACD,GAAG,CAAC,EAAE,eAAe,EAAE,sBAAsB,EAAE,cAAc,EAAE;gBAC7D,eAAe,CAAC,iBAAiB,CAAC,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC;gBACjE,eAAe,CAAC,iBAAiB,CAAC;oBAChC,IAAI,EAAE,qBAAqB;iBAC5B,CAAC,CAAC;gBACH,eAAe,CAAC,iBAAiB,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAC;gBAE/D,OAAO;oBACL,SAAS,EAAE;wBACT,sBAAsB,EAAE,4BAA4B,CAClD,eAAe,CAAC,mBAAmB,EAAE,CACtC;qBACF;oBACD,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;wBACvB,MAAM,OAAO,CAAC,KAAK,CACjB,cAAc,CAAC,mBAAmB,CAAC;4BACjC,KAAK,EAAE,mCAAmC,CAAC,eAAe;4BAC1D,aAAa,EAAE,eAAe,CAAC,mBAAmB,EAAE;4BACpD,kBAAkB,EAAE;gCAClB,sBAAsB;6BACvB;yBACF,CAAC,CACH,CAAC;oBACJ,CAAC;iBACF,CAAC;YACJ,CAAC;SACF,CAAC;KACH,CAAC;CACH,CAAC,CAAC;AAEH,OAAO,EAAE,8BAA8B,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/generators/admin/admin-components/generated/ts-import-maps.d.ts

@@ -0,0 +1,45 @@
+import type { TsImportMapProviderFromSchema } from '@baseplate-dev/core-generators';
+declare const adminComponentsImportsSchema: {
+    DescriptionList: {
+        name: string;
+    };
+    EmbeddedListFormProps: {
+        isTypeOnly: true;
+    };
+    EmbeddedListInput: {
+        name: string;
+    };
+    EmbeddedListTableProps: {
+        isTypeOnly: true;
+    };
+    EmbeddedObjectFormProps: {
+        isTypeOnly: true;
+    };
+    EmbeddedObjectInput: {
+        name: string;
+    };
+};
+export type AdminComponentsImportsProvider = TsImportMapProviderFromSchema<typeof adminComponentsImportsSchema>;
+export declare const adminComponentsImportsProvider: import("@baseplate-dev/sync").ProviderType<import("@baseplate-dev/core-generators").InferTsImportMapFromSchema<{
+    DescriptionList: {
+        name: string;
+    };
+    EmbeddedListFormProps: {
+        isTypeOnly: true;
+    };
+    EmbeddedListInput: {
+        name: string;
+    };
+    EmbeddedListTableProps: {
+        isTypeOnly: true;
+    };
+    EmbeddedObjectFormProps: {
+        isTypeOnly: true;
+    };
+    EmbeddedObjectInput: {
+        name: string;
+    };
+}>>;
+export declare function createAdminComponentsImports(importBase: string): AdminComponentsImportsProvider;
+export {};
+//# sourceMappingURL=ts-import-maps.d.ts.map

package/dist/generators/admin/admin-components/generated/ts-import-maps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-import-maps.d.ts","sourceRoot":"","sources":["../../../../../src/generators/admin/admin-components/generated/ts-import-maps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AASpF,QAAA,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;CAOhC,CAAC;AAEH,MAAM,MAAM,8BAA8B,GAAG,6BAA6B,CACxE,OAAO,4BAA4B,CACpC,CAAC;AAEF,eAAO,MAAM,8BAA8B;;;;;;;;;;;;;;;;;;;GAGxC,CAAC;AAEJ,wBAAgB,4BAA4B,CAC1C,UAAU,EAAE,MAAM,GACjB,8BAA8B,CAgBhC"}

package/dist/generators/admin/admin-components/generated/ts-import-maps.js

@@ -0,0 +1,26 @@
+import { createTsImportMap, createTsImportMapSchema, } from '@baseplate-dev/core-generators';
+import { createReadOnlyProviderType } from '@baseplate-dev/sync';
+import path from 'node:path/posix';
+const adminComponentsImportsSchema = createTsImportMapSchema({
+    DescriptionList: { name: 'default' },
+    EmbeddedListFormProps: { isTypeOnly: true },
+    EmbeddedListInput: { name: 'default' },
+    EmbeddedListTableProps: { isTypeOnly: true },
+    EmbeddedObjectFormProps: { isTypeOnly: true },
+    EmbeddedObjectInput: { name: 'default' },
+});
+export const adminComponentsImportsProvider = createReadOnlyProviderType('admin-components-imports');
+export function createAdminComponentsImports(importBase) {
+    if (!importBase.startsWith('@/')) {
+        throw new Error('importBase must start with @/');
+    }
+    return createTsImportMap(adminComponentsImportsSchema, {
+        DescriptionList: path.join(importBase, 'DescriptionList/index.js'),
+        EmbeddedListFormProps: path.join(importBase, 'EmbeddedListInput/index.js'),
+        EmbeddedListInput: path.join(importBase, 'EmbeddedListInput/index.js'),
+        EmbeddedListTableProps: path.join(importBase, 'EmbeddedListInput/index.js'),
+        EmbeddedObjectFormProps: path.join(importBase, 'EmbeddedObjectInput/index.js'),
+        EmbeddedObjectInput: path.join(importBase, 'EmbeddedObjectInput/index.js'),
+    });
+}
+//# sourceMappingURL=ts-import-maps.js.map

package/dist/generators/admin/admin-components/generated/ts-import-maps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-import-maps.js","sourceRoot":"","sources":["../../../../../src/generators/admin/admin-components/generated/ts-import-maps.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,IAAI,MAAM,iBAAiB,CAAC;AAEnC,MAAM,4BAA4B,GAAG,uBAAuB,CAAC;IAC3D,eAAe,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;IACpC,qBAAqB,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE;IAC3C,iBAAiB,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;IACtC,sBAAsB,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE;IAC5C,uBAAuB,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE;IAC7C,mBAAmB,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;CACzC,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,8BAA8B,GACzC,0BAA0B,CACxB,0BAA0B,CAC3B,CAAC;AAEJ,MAAM,UAAU,4BAA4B,CAC1C,UAAkB;IAElB,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;QACjC,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;IACnD,CAAC;IAED,OAAO,iBAAiB,CAAC,4BAA4B,EAAE;QACrD,eAAe,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,0BAA0B,CAAC;QAClE,qBAAqB,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,4BAA4B,CAAC;QAC1E,iBAAiB,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,4BAA4B,CAAC;QACtE,sBAAsB,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,4BAA4B,CAAC;QAC3E,uBAAuB,EAAE,IAAI,CAAC,IAAI,CAChC,UAAU,EACV,8BAA8B,CAC/B;QACD,mBAAmB,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,8BAA8B,CAAC;KAC3E,CAAC,CAAC;AACL,CAAC"}

package/dist/generators/admin/admin-components/generated/ts-templates.d.ts

@@ -0,0 +1,99 @@
+export declare const ADMIN_ADMIN_COMPONENTS_TS_TEMPLATES: {
+    componentsGroup: import("@baseplate-dev/core-generators").TsTemplateGroup<{
+        descriptionList: {
+            destination: string;
+            template: import("@baseplate-dev/core-generators").TsTemplateFile<{}, Record<never, import("@baseplate-dev/sync").ProviderType<import("@baseplate-dev/sync").Provider>>>;
+        };
+        embeddedListInput: {
+            destination: string;
+            template: import("@baseplate-dev/core-generators").TsTemplateFile<{}, {
+                reactComponentsImports: import("@baseplate-dev/sync").ProviderType<import("@baseplate-dev/core-generators").InferTsImportMapFromSchema<{
+                    Alert: {};
+                    AlertIcon: {};
+                    BackButton: {};
+                    Button: {};
+                    ButtonGroup: {};
+                    Card: {};
+                    CheckedInput: {};
+                    ConfirmDialog: {};
+                    ErrorableLoader: {};
+                    ErrorDisplay: {};
+                    FormError: {};
+                    FormLabel: {};
+                    LinkButton: {};
+                    ListGroup: {};
+                    Modal: {};
+                    NotFoundCard: {};
+                    ReactDatePickerInput: {};
+                    ReactSelectInput: {};
+                    SelectInput: {};
+                    Sidebar: {};
+                    Spinner: {};
+                    Status: {
+                        isTypeOnly: true;
+                    };
+                    StatusType: {
+                        isTypeOnly: true;
+                    };
+                    Table: {};
+                    TextAreaInput: {};
+                    TextInput: {};
+                    Toast: {};
+                    useConfirmDialog: {};
+                    UseConfirmDialogRequestOptions: {
+                        isTypeOnly: true;
+                    };
+                    useConfirmDialogState: {};
+                    useStatus: {};
+                    useToast: {};
+                }>>;
+            }>;
+        };
+        embeddedObjectInput: {
+            destination: string;
+            template: import("@baseplate-dev/core-generators").TsTemplateFile<{}, {
+                reactComponentsImports: import("@baseplate-dev/sync").ProviderType<import("@baseplate-dev/core-generators").InferTsImportMapFromSchema<{
+                    Alert: {};
+                    AlertIcon: {};
+                    BackButton: {};
+                    Button: {};
+                    ButtonGroup: {};
+                    Card: {};
+                    CheckedInput: {};
+                    ConfirmDialog: {};
+                    ErrorableLoader: {};
+                    ErrorDisplay: {};
+                    FormError: {};
+                    FormLabel: {};
+                    LinkButton: {};
+                    ListGroup: {};
+                    Modal: {};
+                    NotFoundCard: {};
+                    ReactDatePickerInput: {};
+                    ReactSelectInput: {};
+                    SelectInput: {};
+                    Sidebar: {};
+                    Spinner: {};
+                    Status: {
+                        isTypeOnly: true;
+                    };
+                    StatusType: {
+                        isTypeOnly: true;
+                    };
+                    Table: {};
+                    TextAreaInput: {};
+                    TextInput: {};
+                    Toast: {};
+                    useConfirmDialog: {};
+                    UseConfirmDialogRequestOptions: {
+                        isTypeOnly: true;
+                    };
+                    useConfirmDialogState: {};
+                    useStatus: {};
+                    useToast: {};
+                }>>;
+            }>;
+        };
+    }>;
+};
+//# sourceMappingURL=ts-templates.d.ts.map

package/dist/generators/admin/admin-components/generated/ts-templates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-templates.d.ts","sourceRoot":"","sources":["../../../../../src/generators/admin/admin-components/generated/ts-templates.ts"],"names":[],"mappings":"AA6DA,eAAO,MAAM,mCAAmC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAsB,CAAC"}

package/dist/generators/admin/admin-components/generated/ts-templates.js

@@ -0,0 +1,54 @@
+import { createTsTemplateFile, createTsTemplateGroup, } from '@baseplate-dev/core-generators';
+import { reactComponentsImportsProvider } from '../../../core/react-components/generated/ts-import-maps.js';
+const descriptionList = createTsTemplateFile({
+    group: 'components',
+    name: 'description-list',
+    projectExports: { DescriptionList: { exportName: 'default' } },
+    source: { path: 'DescriptionList/index.tsx' },
+    variables: {},
+});
+const embeddedListInput = createTsTemplateFile({
+    group: 'components',
+    importMapProviders: {
+        reactComponentsImports: reactComponentsImportsProvider,
+    },
+    name: 'embedded-list-input',
+    projectExports: {
+        EmbeddedListFormProps: { isTypeOnly: true },
+        EmbeddedListInput: { exportName: 'default' },
+        EmbeddedListTableProps: { isTypeOnly: true },
+    },
+    source: { path: 'EmbeddedListInput/index.tsx' },
+    variables: {},
+});
+const embeddedObjectInput = createTsTemplateFile({
+    group: 'components',
+    importMapProviders: {
+        reactComponentsImports: reactComponentsImportsProvider,
+    },
+    name: 'embedded-object-input',
+    projectExports: {
+        EmbeddedObjectFormProps: { isTypeOnly: true },
+        EmbeddedObjectInput: { exportName: 'default' },
+    },
+    source: { path: 'EmbeddedObjectInput/index.tsx' },
+    variables: {},
+});
+const componentsGroup = createTsTemplateGroup({
+    templates: {
+        descriptionList: {
+            destination: 'DescriptionList/index.tsx',
+            template: descriptionList,
+        },
+        embeddedListInput: {
+            destination: 'EmbeddedListInput/index.tsx',
+            template: embeddedListInput,
+        },
+        embeddedObjectInput: {
+            destination: 'EmbeddedObjectInput/index.tsx',
+            template: embeddedObjectInput,
+        },
+    },
+});
+export const ADMIN_ADMIN_COMPONENTS_TS_TEMPLATES = { componentsGroup };
+//# sourceMappingURL=ts-templates.js.map

package/dist/generators/admin/admin-components/generated/ts-templates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-templates.js","sourceRoot":"","sources":["../../../../../src/generators/admin/admin-components/generated/ts-templates.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,gCAAgC,CAAC;AAExC,OAAO,EAAE,8BAA8B,EAAE,MAAM,4DAA4D,CAAC;AAE5G,MAAM,eAAe,GAAG,oBAAoB,CAAC;IAC3C,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,kBAAkB;IACxB,cAAc,EAAE,EAAE,eAAe,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE;IAC9D,MAAM,EAAE,EAAE,IAAI,EAAE,2BAA2B,EAAE;IAC7C,SAAS,EAAE,EAAE;CACd,CAAC,CAAC;AAEH,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;IAC7C,KAAK,EAAE,YAAY;IACnB,kBAAkB,EAAE;QAClB,sBAAsB,EAAE,8BAA8B;KACvD;IACD,IAAI,EAAE,qBAAqB;IAC3B,cAAc,EAAE;QACd,qBAAqB,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE;QAC3C,iBAAiB,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE;QAC5C,sBAAsB,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE;KAC7C;IACD,MAAM,EAAE,EAAE,IAAI,EAAE,6BAA6B,EAAE;IAC/C,SAAS,EAAE,EAAE;CACd,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;IAC/C,KAAK,EAAE,YAAY;IACnB,kBAAkB,EAAE;QAClB,sBAAsB,EAAE,8BAA8B;KACvD;IACD,IAAI,EAAE,uBAAuB;IAC7B,cAAc,EAAE;QACd,uBAAuB,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE;QAC7C,mBAAmB,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE;KAC/C;IACD,MAAM,EAAE,EAAE,IAAI,EAAE,+BAA+B,EAAE;IACjD,SAAS,EAAE,EAAE;CACd,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,qBAAqB,CAAC;IAC5C,SAAS,EAAE;QACT,eAAe,EAAE;YACf,WAAW,EAAE,2BAA2B;YACxC,QAAQ,EAAE,eAAe;SAC1B;QACD,iBAAiB,EAAE;YACjB,WAAW,EAAE,6BAA6B;YAC1C,QAAQ,EAAE,iBAAiB;SAC5B;QACD,mBAAmB,EAAE;YACnB,WAAW,EAAE,+BAA+B;YAC5C,QAAQ,EAAE,mBAAmB;SAC9B;KACF;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mCAAmC,GAAG,EAAE,eAAe,EAAE,CAAC"}

package/dist/generators/admin/admin-components/templates/DescriptionList/index.tsx

@@ -0,0 +1,45 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+
+import clsx from 'clsx';
+
+// adapted from https://flowbite.com/docs/typography/lists/#description-list
+
+interface Props {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function DescriptionList({ className, children }: Props): ReactElement {
+  return (
+    <dl
+      className={clsx('grid md:grid-cols-[minmax(100px,_1fr)_2fr]', className)}
+    >
+      {children}
+    </dl>
+  );
+}
+
+interface DescriptionListItemProps {
+  children: React.ReactNode;
+  label: string | React.ReactNode;
+}
+
+DescriptionList.Item = function DescriptionListItem({
+  children,
+  label,
+}: DescriptionListItemProps): ReactElement {
+  return (
+    <>
+      <dt className="col-start-1 mt-2 text-gray-500 first-of-type:mt-0 first-of-type:border-t-0 md:mt-0 md:border-t md:py-4 md:pr-2">
+        {label}
+      </dt>
+      <dd className="first-of-type:border-t-0 md:border-t md:py-4">
+        {children}
+      </dd>
+    </>
+  );
+};
+
+export default DescriptionList;

package/dist/generators/admin/admin-components/templates/EmbeddedListInput/index.tsx

@@ -0,0 +1,213 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+import type {
+  Control,
+  DefaultValues,
+  FieldPath,
+  FieldPathValue,
+  FieldValues,
+} from 'react-hook-form';
+
+import {
+  Alert,
+  Button,
+  FormError,
+  FormLabel,
+  Modal,
+} from '%reactComponentsImports';
+import clsx from 'clsx';
+import { nanoid } from 'nanoid';
+import { useMemo, useState } from 'react';
+import { useController } from 'react-hook-form';
+
+export interface EmbeddedListTableProps<InputType> {
+  items: (InputType & { id: string })[];
+  edit: (index: number) => void;
+  remove: (index: number) => void;
+}
+
+export interface EmbeddedListFormProps<InputType> {
+  initialData?: DefaultValues<InputType>;
+  onSubmit: (data: InputType) => void;
+}
+
+interface Props<InputType> {
+  className?: string;
+  onChange: (value: InputType[]) => void;
+  renderTable: (tableProps: EmbeddedListTableProps<InputType>) => ReactElement;
+  renderForm: (formProps: EmbeddedListFormProps<InputType>) => ReactElement;
+  value: InputType[] | null | undefined;
+  itemName?: string;
+  defaultValue?: DefaultValues<InputType>;
+}
+
+function EmbeddedListInput<InputType>({
+  className,
+  onChange,
+  renderTable,
+  renderForm,
+  value,
+  itemName,
+  defaultValue = {} as DefaultValues<InputType>,
+}: Props<InputType>): ReactElement {
+  const [valueToEdit, setValueToEdit] = useState<
+    { idx?: number; data: DefaultValues<InputType> } | undefined
+  >();
+
+  const definedValue = value ?? [];
+
+  const handleSubmit = (data: InputType): void => {
+    if (valueToEdit?.idx === undefined) {
+      onChange([...definedValue, data]);
+    } else {
+      onChange(
+        definedValue.map((item, idx) =>
+          idx === valueToEdit.idx ? data : item,
+        ),
+      );
+    }
+    setValueToEdit(undefined);
+  };
+
+  // TODO: Improve with better ID tracking
+  // We don't have a good way of making sure each row has a unique key
+  // so since we rarely update items, we just re-assign a random ID every time
+  // the values change
+  const valueWithIds = useMemo(
+    () => (value ?? []).map((item) => ({ id: nanoid(), ...item })),
+    [value],
+  );
+
+  return (
+    <div className={clsx('space-y-2', className)}>
+      <Button
+        size="small"
+        onClick={() => {
+          setValueToEdit({ data: defaultValue });
+        }}
+      >
+        Add Item
+      </Button>
+      {definedValue.length > 0 ? (
+        renderTable({
+          items: valueWithIds,
+          edit: (idx) => {
+            setValueToEdit({
+              idx,
+              data: definedValue[idx] as DefaultValues<InputType>,
+            });
+          },
+          remove: (idx) => {
+            onChange(definedValue.filter((_, i) => i !== idx));
+          },
+        })
+      ) : (
+        <Alert type="info">No items currently</Alert>
+      )}
+      <Modal
+        isOpen={!!valueToEdit}
+        onClose={() => {
+          setValueToEdit(undefined);
+        }}
+        width="large"
+      >
+        <Modal.Header
+          onClose={() => {
+            setValueToEdit(undefined);
+          }}
+        >
+          Edit {itemName ?? 'Item'}
+        </Modal.Header>
+        <Modal.Body>
+          {renderForm({
+            initialData: valueToEdit?.data,
+            onSubmit: handleSubmit,
+          })}
+        </Modal.Body>
+      </Modal>
+    </div>
+  );
+}
+
+interface EmbeddedListInputLabelledProps<InputType> extends Props<InputType> {
+  label?: React.ReactNode;
+  error?: React.ReactNode;
+}
+
+EmbeddedListInput.Labelled = function EmbeddedOneToOneInputLabelled<InputType>({
+  label,
+  className,
+  error,
+  ...rest
+}: EmbeddedListInputLabelledProps<InputType>): ReactElement {
+  return (
+    <div className={clsx('', className)}>
+      <div className={className}>
+        {label && <FormLabel>{label}</FormLabel>}
+        <EmbeddedListInput {...rest} />
+        {error && <FormError>{error}</FormError>}
+      </div>
+    </div>
+  );
+};
+
+interface EmbeddedListInputLabelledControllerProps<
+  FormType extends FieldValues,
+  FormPath extends FieldPath<FormType>,
+> extends Omit<
+    EmbeddedListInputLabelledProps<
+      Exclude<
+        FieldPathValue<FormType, FormPath>,
+        undefined | null
+      > extends (infer InputType)[]
+        ? InputType
+        : never
+    >,
+    'onChange' | 'value' | 'error'
+  > {
+  className?: string;
+  control: Control<FormType>;
+  name: FormPath;
+}
+
+EmbeddedListInput.LabelledController =
+  function EmbeddedListInputLabelledController<
+    FormType extends FieldValues,
+    FormPath extends FieldPath<FormType>,
+  >({
+    control,
+    name,
+    ...rest
+  }: EmbeddedListInputLabelledControllerProps<
+    FormType,
+    FormPath
+  >): ReactElement {
+    const {
+      field,
+      fieldState: { error },
+    } = useController({
+      name,
+      control,
+    });
+
+    return (
+      <EmbeddedListInput.Labelled
+        {...rest}
+        error={error?.message}
+        onChange={(value) => {
+          field.onChange(value as FieldPathValue<FormType, FormPath>);
+        }}
+        value={
+          field.value as (FieldPathValue<
+            FormType,
+            FormPath
+          > extends (infer InputType)[]
+            ? InputType
+            : never)[]
+        }
+      />
+    );
+  };
+
+export default EmbeddedListInput;