@postxl/generator 0.0.20 → 0.0.22

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

@@ -14,53 +14,53 @@ function generateModelContext({ model, meta }) {
         items: [model.typeName, model.brandedIdType],
         from: meta.types.importPath,
     });
-    return `
-import React, { useMemo } from 'react'
-
-import { createUseContext } from '@lib/context'
-import { trpc } from '@lib/trpc'
-import { filterMap, mapMap } from '@lib/utils'
-
-${imports.generate()}
-
-type Context = {
-	ready: boolean
-	map: Map<${model.brandedIdType}, ${model.typeName}>
-	list: ${model.typeName}[]
-}
-
-const ReactContext = React.createContext<Context | null>(null)
-
-/**
- * Context provider to fetch the ${meta.userFriendlyName} data and use it in componenets.
- */
-export const ${meta.react.context.contextProviderName} = ({ children }: React.PropsWithChildren<{}>) => {
-	const ${queryName} = trpc.${meta.trpc.getMap.reactQueryMethod}.useQuery()
-
-	const context = useMemo<Context>(() => {
-		const data = ${queryName}.data ?? new Map()
-
-		return {
-			ready: ${queryName}.isLoading === false,
-			map: data,
-			list: [...data.values()]
-		}
-	}, [${queryName}.isLoading, ${queryName}.data])
-
-	return <ReactContext.Provider value={context}>{children}</ReactContext.Provider>
-}
-
-export const ${meta.react.context.testContextProviderName} = ({ 
-	value, 
-	children 
-}: React.PropsWithChildren<{ value: Context }>) => {
-	return <ReactContext.Provider value={value}>{children}</ReactContext.Provider>
-}
-
-/**
- * A React hook to access the model data.
- */
-export const ${meta.react.context.hookFnName} = createUseContext(ReactContext, "${contextReferenceName}")
+    return `
+import React, { useMemo } from 'react'
+
+import { createUseContext } from '@lib/react'
+import { trpc } from '@lib/trpc'
+import { filterMap, mapMap } from '@lib/utils'
+
+${imports.generate()}
+
+type Context = {
+	ready: boolean
+	map: Map<${model.brandedIdType}, ${model.typeName}>
+	list: ${model.typeName}[]
+}
+
+const ReactContext = React.createContext<Context | null>(null)
+
+/**
+ * Context provider to fetch the ${meta.userFriendlyName} data and use it in componenets.
+ */
+export const ${meta.react.context.contextProviderName} = ({ children }: React.PropsWithChildren<{}>) => {
+	const ${queryName} = trpc.${meta.trpc.getMap.reactQueryMethod}.useQuery()
+
+	const context = useMemo<Context>(() => {
+		const data = ${queryName}.data ?? new Map()
+
+		return {
+			ready: ${queryName}.isLoading === false,
+			map: data,
+			list: [...data.values()]
+		}
+	}, [${queryName}.isLoading, ${queryName}.data])
+
+	return <ReactContext.Provider value={context}>{children}</ReactContext.Provider>
+}
+
+export const ${meta.react.context.testContextProviderName} = ({ 
+	value, 
+	children 
+}: React.PropsWithChildren<{ value: Context }>) => {
+	return <ReactContext.Provider value={value}>{children}</ReactContext.Provider>
+}
+
+/**
+ * A React hook to access the model data.
+ */
+export const ${meta.react.context.hookFnName} = createUseContext(ReactContext, "${contextReferenceName}")
 `;
 }
 exports.generateModelContext = generateModelContext;

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

@@ -11,14 +11,14 @@ const modals_generator_1 = require("./modals.generator");
  */
 function generateReactComponentsForModel({ model, meta }) {
     const vfs = new vfs_1.VirtualFS({
-        '/index.ts': `
-        export * from './CreateModal'
-        export * from './EditModal'
-        export * from './DeleteModal'
-
-        export * from './Form'
-        export * from './context'
-        export * from './Library'
+        '/index.ts': `
+        export * from './CreateModal'
+        export * from './EditModal'
+        export * from './DeleteModal'
+
+        export * from './Form'
+        export * from './context'
+        export * from './Library'
 			`,
     });
     vfs.write(`/context.tsx`, (0, context_generator_1.generateModelContext)({ model, meta }));

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

@@ -29,71 +29,71 @@ function generateModelLibraryComponents({ model, meta }) {
         const depMeta = (0, meta_1.getModelMetadata)({ model: field.relationToModel });
         return depMeta.react.context.contextProviderName;
     });
-    return `
-    import React, { useState } from 'react'
-
-    import { CardList } from '@components/shared/CardList'
-    import { CardWithActions } from '@components/shared/CardWithActions'
-
-    ${imports.generate()}
-
-    /**
-     * Show all ${model.name} entries.
-     */
-    export const ${components.libraryComponentName} = () => {
-      const { ready, list } = ${context.hookFnName}()
-
-      return (
-        <CardList>
-          {list.map(item => <${components.cardComponentName} key={item.id} item={item} />)}
-        </CardList>
-      )
-    }
-
-    /**
-     * Show a single ${model.name} entry.
-     */
-    export const ${components.cardComponentName} = ({ item }: { item: ${model.typeName} }) => {
-      const [isEditModalOpen, setIsEditModalOpen] = useState(false)
-      const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
-
-      return (
-        <>
-          <CardWithActions
-            title={item.name}
-            actions={[
-              {
-                label: 'Edit',
-                icon: 'pencil-on-paper',
-                onClick: () => setIsEditModalOpen(true),
-              },
-              {
-                label: 'Delete',
-                icon: 'trash',
-                onClick: () => setIsDeleteModalOpen(true),
-              },
-            ]}
-          />
-          
+    return `
+    import React, { useState } from 'react'
+
+    import { CardList } from '@components/shared/CardList'
+    import { CardWithActions } from '@components/shared/CardWithActions'
+
+    ${imports.generate()}
+
+    /**
+     * Show all ${model.name} entries.
+     */
+    export const ${components.libraryComponentName} = () => {
+      const { ready, list } = ${context.hookFnName}()
+
+      return (
+        <CardList>
+          {list.map(item => <${components.cardComponentName} key={item.id} item={item} />)}
+        </CardList>
+      )
+    }
+
+    /**
+     * Show a single ${model.name} entry.
+     */
+    export const ${components.cardComponentName} = ({ item }: { item: ${model.typeName} }) => {
+      const [isEditModalOpen, setIsEditModalOpen] = useState(false)
+      const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
+
+      return (
+        <>
+          <CardWithActions
+            title={item.name}
+            actions={[
+              {
+                label: 'Edit',
+                icon: 'pencil-on-paper',
+                onClick: () => setIsEditModalOpen(true),
+              },
+              {
+                label: 'Delete',
+                icon: 'trash',
+                onClick: () => setIsDeleteModalOpen(true),
+              },
+            ]}
+          />
+          
           ${nestInParentComponents({
-        child: `
-              <${components.modals.editComponentName} 
-                data={item} 
-                show={isEditModalOpen} 
-                onHide={() => setIsEditModalOpen(false)} 
-              />
+        child: `
+              <${components.modals.editComponentName} 
+                data={item} 
+                show={isEditModalOpen} 
+                onHide={() => setIsEditModalOpen(false)} 
+              />
             `,
         components: depContexts,
-    })}
-
-          <${components.modals.deleteComponentName} 
-            id={item.id} 
-            show={isDeleteModalOpen} 
-            onHide={() => setIsDeleteModalOpen(false)} 
-          />
-        </>
-      )
-    }
+    })}
+
+          <${components.modals.deleteComponentName} 
+            id={item.id} 
+            show={isDeleteModalOpen} 
+            onHide={() => setIsDeleteModalOpen(false)} 
+          />
+        </>
+      )
+    }
   `;
 }
 exports.generateModelLibraryComponents = generateModelLibraryComponents;
@@ -105,9 +105,9 @@ function nestInParentComponents({ child, components }) {
         return child;
     }
     const [parent, ...rest] = components;
-    return `
-    <${parent}>
-      ${nestInParentComponents({ child, components: rest })}
-    </${parent}>
+    return `
+    <${parent}>
+      ${nestInParentComponents({ child, components: rest })}
+    </${parent}>
   `;
 }

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

@@ -17,81 +17,81 @@ function generateModelLookupComponents({ model, meta }) {
         from: meta.types.importPath,
     });
     const typeName = model.typeName;
-    return `
-import React, { useMemo } from 'react'
-
-import { MenuSelectInput, MenuSelectField } from '@components/atoms/MenuSelect'
-import { SelectInput, SelectField } from '@components/atoms/SelectInput'
-import { SearchInput, SearchField } from '@components/atoms/SearchInput'
-import { TableSelectInput, TableSelectField } from '@components/atoms/TableSelectInput'
-
-
-import { UnionOmit } from '@lib/types'
-
-${imports.generate()}
-
-// Select
-
-export const ${components.forms.selectInputName} = ({
-  ...delegated
-}: UnionOmit<React.ComponentPropsWithoutRef<typeof SelectInput<${typeName}>>, 'label' | 'options' | 'loading'>) => {
-  const { list, ready } = ${context.hookFnName}()
-  return <SelectInput<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
-}
-
-export const ${components.forms.selectFieldName} = ({
-  ...delegated
-}: Omit<React.ComponentPropsWithoutRef<typeof SelectField<${typeName}>>, 'label' | 'options' | 'loading'>) => {
-  const { list, ready } = ${context.hookFnName}()
-  return <SelectField<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
-}
-
-// Menu Select
-
-export const ${components.forms.menuSelectInputName} = ({
-	...delegated
-}: UnionOmit<React.ComponentPropsWithoutRef<typeof MenuSelectInput<${typeName}>>, 'label' | 'options' | 'loading'>) => {
-	const { list, ready } = ${context.hookFnName}()
-	return <MenuSelectInput<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
-}
-
-export const ${components.forms.menuSelectFieldName} = ({
-	...delegated
-}: UnionOmit<React.ComponentPropsWithoutRef<typeof MenuSelectField<${typeName}>>, 'label' | 'options' | 'loading'>) => {
-	const { list, ready } = ${context.hookFnName}()
-	return <MenuSelectField<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
-}
-
-// Search
-
-export const ${components.forms.searchInputName} = ({
-	...delegated
-}: UnionOmit<React.ComponentPropsWithoutRef<typeof SearchInput<${typeName}>>, 'label' | 'options' | 'loading'>) => {
-	const { list, ready } = ${context.hookFnName}()
-	return <SearchInput<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
-}
-export const ${components.forms.searchFieldName} = ({
-  ...delegated
-}: Omit<React.ComponentPropsWithoutRef<typeof SearchField<${typeName}>>, 'label' | 'options' | 'loading'>) => {
-  const { list, ready } = ${context.hookFnName}()
-  return <SearchField<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
-}
-
-// Table
-
-export const ${components.forms.tableSelectInputName} = ({
-	...delegated
-}: UnionOmit<React.ComponentPropsWithoutRef<typeof TableSelectInput<${typeName}>>, 'label' | 'options' | 'loading'>) => {
-	const { list, ready } = ${context.hookFnName}()
-	return <TableSelectInput<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
-}
-
-export const ${components.forms.tableSelectFieldName} = ({
-	...delegated
-}: UnionOmit<React.ComponentPropsWithoutRef<typeof TableSelectField<${typeName}>>, 'label' | 'options' | 'loading'>) => {
-	const { list, ready } = ${context.hookFnName}()
-	return <TableSelectField<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
-}
+    return `
+import React, { useMemo } from 'react'
+
+import { MenuSelectInput, MenuSelectField } from '@components/atoms/MenuSelect'
+import { SelectInput, SelectField } from '@components/atoms/SelectInput'
+import { SearchInput, SearchField } from '@components/atoms/SearchInput'
+import { TableSelectInput, TableSelectField } from '@components/atoms/TableSelectInput'
+
+
+import { UnionOmit } from '@lib/types'
+
+${imports.generate()}
+
+// Select
+
+export const ${components.forms.selectInputName} = ({
+  ...delegated
+}: UnionOmit<React.ComponentPropsWithoutRef<typeof SelectInput<${typeName}>>, 'label' | 'options' | 'loading'>) => {
+  const { list, ready } = ${context.hookFnName}()
+  return <SelectInput<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
+}
+
+export const ${components.forms.selectFieldName} = ({
+  ...delegated
+}: Omit<React.ComponentPropsWithoutRef<typeof SelectField<${typeName}>>, 'label' | 'options' | 'loading'>) => {
+  const { list, ready } = ${context.hookFnName}()
+  return <SelectField<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
+}
+
+// Menu Select
+
+export const ${components.forms.menuSelectInputName} = ({
+	...delegated
+}: UnionOmit<React.ComponentPropsWithoutRef<typeof MenuSelectInput<${typeName}>>, 'label' | 'options' | 'loading'>) => {
+	const { list, ready } = ${context.hookFnName}()
+	return <MenuSelectInput<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
+}
+
+export const ${components.forms.menuSelectFieldName} = ({
+	...delegated
+}: UnionOmit<React.ComponentPropsWithoutRef<typeof MenuSelectField<${typeName}>>, 'label' | 'options' | 'loading'>) => {
+	const { list, ready } = ${context.hookFnName}()
+	return <MenuSelectField<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
+}
+
+// Search
+
+export const ${components.forms.searchInputName} = ({
+	...delegated
+}: UnionOmit<React.ComponentPropsWithoutRef<typeof SearchInput<${typeName}>>, 'label' | 'options' | 'loading'>) => {
+	const { list, ready } = ${context.hookFnName}()
+	return <SearchInput<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
+}
+export const ${components.forms.searchFieldName} = ({
+  ...delegated
+}: Omit<React.ComponentPropsWithoutRef<typeof SearchField<${typeName}>>, 'label' | 'options' | 'loading'>) => {
+  const { list, ready } = ${context.hookFnName}()
+  return <SearchField<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
+}
+
+// Table
+
+export const ${components.forms.tableSelectInputName} = ({
+	...delegated
+}: UnionOmit<React.ComponentPropsWithoutRef<typeof TableSelectInput<${typeName}>>, 'label' | 'options' | 'loading'>) => {
+	const { list, ready } = ${context.hookFnName}()
+	return <TableSelectInput<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
+}
+
+export const ${components.forms.tableSelectFieldName} = ({
+	...delegated
+}: UnionOmit<React.ComponentPropsWithoutRef<typeof TableSelectField<${typeName}>>, 'label' | 'options' | 'loading'>) => {
+	const { list, ready } = ${context.hookFnName}()
+	return <TableSelectField<${typeName}> options={list} label={(l) => l.name} loading={!ready} {...delegated} />
+}
 `;
 }
 exports.generateModelLookupComponents = generateModelLookupComponents;