@carlonicora/nextjs-jsonapi 1.38.1 → 1.38.3

package/scripts/generate-web-module/templates/components/selector.template.ts

@@ -30,8 +30,8 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@carlonicora/nextjs-jsonapi/components";
-import { ${names.pascalCase}Interface } from "@/features/${data.targetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";
-import { ${names.pascalCase}Service } from "@/features/${data.targetDir}/${names.kebabCase}/data/${names.pascalCase}Service";
+import { ${names.pascalCase}Interface } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";
+import { ${names.pascalCase}Service } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Service";
 import { DataListRetriever, useDataListRetriever } from "@carlonicora/nextjs-jsonapi/client";
 import { useDebounce } from "@carlonicora/nextjs-jsonapi/client";
 import { Modules } from "@carlonicora/nextjs-jsonapi/core";

package/scripts/generate-web-module/templates/context.template.ts

@@ -17,10 +17,10 @@ export function generateContextTemplate(data: FrontendTemplateData): string {
 
   return `"use client";
 
-import ${names.pascalCase}Deleter from "@/features/${data.targetDir}/${names.kebabCase}/components/forms/${names.pascalCase}Deleter";
-import ${names.pascalCase}Editor from "@/features/${data.targetDir}/${names.kebabCase}/components/forms/${names.pascalCase}Editor";
-import { ${names.pascalCase}Interface } from "@/features/${data.targetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";
-import { ${names.pascalCase}Service } from "@/features/${data.targetDir}/${names.kebabCase}/data/${names.pascalCase}Service";
+import ${names.pascalCase}Deleter from "@/features/${data.importTargetDir}/${names.kebabCase}/components/forms/${names.pascalCase}Deleter";
+import ${names.pascalCase}Editor from "@/features/${data.importTargetDir}/${names.kebabCase}/components/forms/${names.pascalCase}Editor";
+import { ${names.pascalCase}Interface } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";
+import { ${names.pascalCase}Service } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Service";
 import { SharedProvider } from "@carlonicora/nextjs-jsonapi/contexts";
 import { usePageUrlGenerator } from "@carlonicora/nextjs-jsonapi/client";
 import { BreadcrumbItemData } from "@carlonicora/nextjs-jsonapi/core";

package/scripts/generate-web-module/templates/data/interface.template.ts

@@ -37,20 +37,14 @@ function generateImports(data: FrontendTemplateData): string {
 
   // Relationship interface imports
   relationships.forEach((rel) => {
-    imports.push(
-      `import { ${rel.interfaceName} } from "${rel.interfaceImportPath}";`
-    );
+    imports.push(`import { ${rel.interfaceName} } from "${rel.interfaceImportPath}";`);
   });
 
   // Base interface import
   if (extendsContent) {
-    imports.push(
-      `import { ContentInput, ContentInterface } from "@/features/features/content/data/ContentInterface";`
-    );
+    imports.push(`import { ContentInput, ContentInterface } from "@/features/content/data/ContentInterface";`);
   } else {
-    imports.push(
-      `import { ApiDataInterface } from "@carlonicora/nextjs-jsonapi/core";`
-    );
+    imports.push(`import { ApiDataInterface } from "@carlonicora/nextjs-jsonapi/core";`);
   }
 
   return imports.join("\n");
@@ -132,7 +126,7 @@ function generateInterface(data: FrontendTemplateData): string {
       // Build return type - use intersection if relationship has fields
       let baseType = rel.interfaceName;
       if (rel.fields && rel.fields.length > 0) {
-        const metaFields = rel.fields.map(f => `${f.name}?: ${f.tsType}`).join("; ");
+        const metaFields = rel.fields.map((f) => `${f.name}?: ${f.tsType}`).join("; ");
         baseType = `${rel.interfaceName} & { ${metaFields} }`;
       }
 
@@ -142,7 +136,7 @@ function generateInterface(data: FrontendTemplateData): string {
       const propertyName = pluralize(toCamelCase(rel.name));
       // Use intersection type if relationship has fields (edge properties)
       if (rel.fields && rel.fields.length > 0) {
-        const metaFields = rel.fields.map(f => `${f.name}?: ${f.tsType}`).join("; ");
+        const metaFields = rel.fields.map((f) => `${f.name}?: ${f.tsType}`).join("; ");
         getterLines.push(`  get ${propertyName}(): (${rel.interfaceName} & { ${metaFields} })[];`);
       } else {
         getterLines.push(`  get ${propertyName}(): ${rel.interfaceName}[];`);

package/scripts/generate-web-module/templates/data/model.template.ts

@@ -48,7 +48,7 @@ function generateImports(data: FrontendTemplateData): string {
 
   // Own interface import
   imports.push(
-    `import { ${names.pascalCase}Input, ${names.pascalCase}Interface } from "@/features/${data.targetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";`,
+    `import { ${names.pascalCase}Input, ${names.pascalCase}Interface } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";`,
   );
 
   // Relationship interface imports
@@ -58,7 +58,7 @@ function generateImports(data: FrontendTemplateData): string {
 
   // Base class and core imports
   if (extendsContent) {
-    imports.push(`import { Content } from "@/features/features/content/data/Content";`);
+    imports.push(`import { Content } from "@/features/content/data/Content";`);
     imports.push(`import { JsonApiHydratedDataInterface, Modules } from "@carlonicora/nextjs-jsonapi/core";`);
   } else {
     imports.push(

package/scripts/generate-web-module/templates/data/service.template.ts

@@ -49,7 +49,7 @@ function generateImports(data: FrontendTemplateData): string {
 
   return `import { AbstractService, HttpMethod, NextRef, PreviousRef } from "@carlonicora/nextjs-jsonapi/core";
 import { EndpointCreator } from "@carlonicora/nextjs-jsonapi/core";
-import { ${names.pascalCase}Input, ${names.pascalCase}Interface } from "@/features/${data.targetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";
+import { ${names.pascalCase}Input, ${names.pascalCase}Interface } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";
 import { Modules } from "@carlonicora/nextjs-jsonapi/core";`;
 }
 

package/scripts/generate-web-module/templates/module.template.ts

@@ -20,7 +20,7 @@ export function generateModuleTemplate(data: FrontendTemplateData): string {
   const listFieldNames = getListFieldNames(data);
   const listInclusionFields = listFieldNames.map((f) => `\`${f}\``).join(", ");
 
-  return `import { ${names.pascalCase} } from "@/features/${data.targetDir}/${names.kebabCase}/data/${names.pascalCase}";
+  return `import { ${names.pascalCase} } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}";
 import { createJsonApiInclusion } from "@carlonicora/nextjs-jsonapi/core";
 import { ModuleFactory } from "@carlonicora/nextjs-jsonapi/core";
 import { ${DEFAULT_MODULE_ICON} } from "lucide-react";

package/scripts/generate-web-module/templates/pages/detail-page.template.ts

@@ -15,10 +15,10 @@ import { FrontendTemplateData } from "../../types/template-data.interface";
 export function generateDetailPageTemplate(data: FrontendTemplateData): string {
   const { names } = data;
 
-  return `import ${names.pascalCase}Container from "@/features/${data.targetDir}/${names.kebabCase}/components/containers/${names.pascalCase}Container";
-import { ${names.pascalCase}Provider } from "@/features/${data.targetDir}/${names.kebabCase}/contexts/${names.pascalCase}Context";
-import { ${names.pascalCase}Interface } from "@/features/${data.targetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";
-import { ${names.pascalCase}Service } from "@/features/${data.targetDir}/${names.kebabCase}/data/${names.pascalCase}Service";
+  return `import ${names.pascalCase}Container from "@/features/${data.importTargetDir}/${names.kebabCase}/components/containers/${names.pascalCase}Container";
+import { ${names.pascalCase}Provider } from "@/features/${data.importTargetDir}/${names.kebabCase}/contexts/${names.pascalCase}Context";
+import { ${names.pascalCase}Interface } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";
+import { ${names.pascalCase}Service } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Service";
 import { generateSpecificMetadata } from "@/utils/metadata";
 import { PageContainer } from "@carlonicora/nextjs-jsonapi/components";
 import { Modules } from "@carlonicora/nextjs-jsonapi/core";

package/scripts/generate-web-module/templates/pages/list-page.template.ts

@@ -15,8 +15,8 @@ import { FrontendTemplateData } from "../../types/template-data.interface";
 export function generateListPageTemplate(data: FrontendTemplateData): string {
   const { names } = data;
 
-  return `import ${names.pascalCase}ListContainer from "@/features/${data.targetDir}/${names.kebabCase}/components/containers/${names.pascalCase}ListContainer";
-import { ${names.pascalCase}Provider } from "@/features/${data.targetDir}/${names.kebabCase}/contexts/${names.pascalCase}Context";
+  return `import ${names.pascalCase}ListContainer from "@/features/${data.importTargetDir}/${names.kebabCase}/components/containers/${names.pascalCase}ListContainer";
+import { ${names.pascalCase}Provider } from "@/features/${data.importTargetDir}/${names.kebabCase}/contexts/${names.pascalCase}Context";
 import { PageContainer } from "@carlonicora/nextjs-jsonapi/components";
 import { Modules } from "@carlonicora/nextjs-jsonapi/core";
 import { Action } from "@carlonicora/nextjs-jsonapi/core";

package/scripts/generate-web-module/templates/table-hook.template.ts

@@ -22,11 +22,15 @@ export function generateTableHookTemplate(data: FrontendTemplateData): string {
 
   return `"use client";
 
-import { ${names.pascalCase}Fields } from "@/features/${data.targetDir}/${names.kebabCase}/data/${names.pascalCase}Fields";
-import { ${names.pascalCase}Interface } from "@/features/${data.targetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";
+import { ${names.pascalCase}Fields } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Fields";
+import { ${names.pascalCase}Interface } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";
 import { cellDate, cellId${hasAuthors ? ", ContributorsList" : ""} } from "@carlonicora/nextjs-jsonapi/components";
-import { Modules } from "@carlonicora/nextjs-jsonapi/core";${extendsContent ? `
-import { ContentInterface } from "@carlonicora/nextjs-jsonapi/core";` : ""}
+import { Modules } from "@carlonicora/nextjs-jsonapi/core";${
+    extendsContent
+      ? `
+import { ContentInterface } from "@carlonicora/nextjs-jsonapi/core";`
+      : ""
+  }
 import {
   registerTableGenerator,
   TableContent,
@@ -107,9 +111,13 @@ function generateFieldColumnEntries(data: FrontendTemplateData): string {
           <Tooltip>
             <TooltipTrigger>
               <Link href={generateUrl({ page: Modules.${names.pascalCase}, id: ${names.camelCase}.id })}>{${names.camelCase}.name}</Link>
-            </TooltipTrigger>${extendsContent ? `
-            <TooltipContent>{${names.camelCase}.tldr}</TooltipContent>` : `
-            <TooltipContent>{${names.camelCase}.name}</TooltipContent>`}
+            </TooltipTrigger>${
+              extendsContent
+                ? `
+            <TooltipContent>{${names.camelCase}.tldr}</TooltipContent>`
+                : `
+            <TooltipContent>{${names.camelCase}.name}</TooltipContent>`
+            }
           </Tooltip>
         );
       },
@@ -135,7 +143,7 @@ function generateFieldColumnEntries(data: FrontendTemplateData): string {
 
   // Other displayable fields (excluding id, name, tldr, abstract, content, dates)
   const displayableFields = fields.filter(
-    (f) => !["id", "name", "tldr", "abstract", "content", "createdAt", "updatedAt"].includes(f.name)
+    (f) => !["id", "name", "tldr", "abstract", "content", "createdAt", "updatedAt"].includes(f.name),
   );
 
   displayableFields.forEach((field) => {

package/scripts/generate-web-module/types/template-data.interface.ts

@@ -35,7 +35,13 @@ export interface FrontendField {
 /**
  * Form component types
  */
-export type FormComponentType = "FormInput" | "FormTextarea" | "BlockNoteEditor" | "Checkbox" | "DatePicker" | "FormInputNumber";
+export type FormComponentType =
+  | "FormInput"
+  | "FormTextarea"
+  | "BlockNoteEditor"
+  | "Checkbox"
+  | "DatePicker"
+  | "FormInputNumber";
 
 /**
  * Frontend relationship representation
@@ -121,6 +127,8 @@ export interface FrontendTemplateData {
   moduleId: string;
   endpoint: string;
   targetDir: string;
+  /** Stripped version of targetDir for use in imports (e.g., "culling" instead of "features/culling") */
+  importTargetDir: string;
 
   // Parent class detection
   extendsContent: boolean;

package/src/components/containers/PageContainer.tsx

@@ -12,7 +12,7 @@ export function PageContainer({ children, testId, className }: PageContainerProp
   return (
     <div className={`flex h-full w-full flex-col`} data-testid={testId}>
       <Header>{headerChildren}</Header>
-      <main className={cn(`flex w-full flex-1 flex-col gap-y-4 pt-4 pl-4 pr-4 pb-20`, className)}>{children}</main>
+      <main className={cn(`flex w-full flex-1 flex-col gap-y-4 pt-4 pl-4 pr-0 pb-20`, className)}>{children}</main>
     </div>
   );
 }

package/src/components/pages/PageContentContainer.tsx

@@ -2,7 +2,7 @@
 
 import { ReactNode, useEffect, useState } from "react";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../../shadcnui";
-import { useIsMobile } from "../../utils";
+import { cn, useIsMobile } from "../../utils";
 
 type PageContentContainerProps = {
   header?: ReactNode;
@@ -27,7 +27,7 @@ export function PageContentContainer({ header, details, footer, content }: PageC
 
   return (
     <div className="flex h-[calc(100vh-4rem)] w-full flex-col transition-opacity duration-150 animate-in fade-in">
-      {header && <div className="mb-4 flex w-full shrink-0 border-b">{header}</div>}
+      {header && <div className="mb-4 flex w-full shrink-0 border-b pr-4">{header}</div>}
       <div className="min-h-0 flex-1">
         {details || footer ? (
           <ResizablePanelGroup
@@ -49,12 +49,12 @@ export function PageContentContainer({ header, details, footer, content }: PageC
               </div>
             </ResizablePanel>
             <ResizableHandle withHandle />
-            <ResizablePanel id="right-panel" className={isMobile ? "pt-4" : "pl-4"}>
-              <div className="h-full overflow-x-hidden overflow-y-auto p-2 pb-20">{content}</div>
+            <ResizablePanel id="right-panel" className={cn("w-full", isMobile ? "pt-4" : "")}>
+              <div className="h-full overflow-x-hidden overflow-y-auto px-4 pb-20">{content}</div>
             </ResizablePanel>
           </ResizablePanelGroup>
         ) : (
-          <div className="h-full overflow-x-hidden overflow-y-auto p-2 pb-20">{content}</div>
+          <div className="h-full overflow-x-hidden overflow-y-auto px-4 pb-20">{content}</div>
         )}
       </div>
     </div>