@carlonicora/nextjs-jsonapi 1.50.0 → 1.52.0

package/scripts/generate-web-module/utils/bootstrapper-updater.ts

@@ -54,8 +54,8 @@ export function updateBootstrapper(
 
   let content = fs.readFileSync(bootstrapperPath, "utf-8");
 
-  // Check if module is already registered
-  const modulePattern = new RegExp(`${names.pascalCase}Module`, "g");
+  // Check if module is already registered (exact match to avoid e.g. "InvoiceModule" matching "InvoiceLineModule")
+  const modulePattern = new RegExp(`\\b${names.pascalCase}Module\\b`, "g");
   if (modulePattern.test(content)) {
     return {
       success: true,

package/scripts/generate-web-module/utils/file-writer.ts

@@ -6,6 +6,7 @@
 
 import * as fs from "fs";
 import * as path from "path";
+import { execSync } from "child_process";
 import { GeneratedFile } from "../types/template-data.interface";
 
 export interface WriteOptions {
@@ -74,6 +75,26 @@ export function writeFiles(files: GeneratedFile[], options: WriteOptions = {}):
   return files.map((file) => writeFile(file, options));
 }
 
+/**
+ * Format files with Prettier
+ *
+ * @param filePaths - Absolute paths of files to format
+ */
+export function formatFiles(filePaths: string[]): void {
+  if (filePaths.length === 0) return;
+
+  console.info(`\n💅 Formatting ${filePaths.length} files with Prettier...`);
+  try {
+    execSync(`npx prettier --write ${filePaths.map((p) => `"${p}"`).join(" ")}`, {
+      stdio: "pipe",
+      cwd: process.cwd(),
+    });
+    console.info(`   ✅ Formatted successfully`);
+  } catch {
+    console.warn(`   ⚠️  Prettier formatting failed — files were written but may need manual formatting`);
+  }
+}
+
 /**
  * Print write results to console
  *

package/scripts/generate-web-module/utils/i18n-updater.ts

@@ -56,39 +56,39 @@ export function updateI18n(
   const moduleMessages = buildI18nMessages(i18nKeys);
   const lowercaseModuleName = names.camelCase.toLowerCase();
 
-  // Always ensure types section is updated (even if features already exist)
-  let typesUpdated = false;
-  if (!messages.types) {
-    messages.types = {};
+  // Always ensure entities section is updated (even if features already exist)
+  let entitiesUpdated = false;
+  if (!messages.entities) {
+    messages.entities = {};
   }
-  const typesKey = Object.keys(moduleMessages.types)[0];
+  const entitiesKey = Object.keys(moduleMessages.entities)[0];
   const lowercasePluralKey = names.pluralCamel.toLowerCase();
-  if (typesKey && !messages.types[lowercasePluralKey]) {
-    messages.types[lowercasePluralKey] = moduleMessages.types[typesKey];
-    typesUpdated = true;
+  if (entitiesKey && !messages.entities[lowercasePluralKey]) {
+    messages.entities[lowercasePluralKey] = moduleMessages.entities[entitiesKey];
+    entitiesUpdated = true;
   }
 
   // Check if module already exists in features
   const featuresAlreadyExist = messages.features && messages.features[lowercaseModuleName];
 
   if (featuresAlreadyExist) {
-    // Features exist, but we may have added types
-    if (typesUpdated) {
+    // Features exist, but we may have added entities
+    if (entitiesUpdated) {
       if (dryRun) {
         return {
           success: true,
-          message: `[DRY RUN] Module ${names.camelCase} exists, would add types.${lowercasePluralKey}`,
+          message: `[DRY RUN] Module ${names.camelCase} exists, would add entities.${lowercasePluralKey}`,
           alreadyExists: true,
         };
       }
 
-      // Write updated content (types were added)
+      // Write updated content (entities were added)
       const updatedContent = JSON.stringify(messages, null, 2);
       fs.writeFileSync(messagesPath, updatedContent, "utf-8");
 
       return {
         success: true,
-        message: `Module ${names.camelCase} exists, added types.${lowercasePluralKey}`,
+        message: `Module ${names.camelCase} exists, added entities.${lowercasePluralKey}`,
         alreadyExists: true,
       };
     }

package/scripts/generate-web-module/utils/index.ts

@@ -4,6 +4,6 @@
  * Exports all utility functions.
  */
 
-export { writeFile, writeFiles, printResults, type WriteOptions, type WriteResult } from "./file-writer";
+export { writeFile, writeFiles, formatFiles, printResults, type WriteOptions, type WriteResult } from "./file-writer";
 export { updateBootstrapper, generateImportStatement, generateModuleEntry, type BootstrapperUpdateResult } from "./bootstrapper-updater";
 export { updateI18n, previewI18nMessages, type I18nUpdateResult } from "./i18n-updater";

package/src/components/containers/RoundPageContainer.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components";
+import { Tab } from "@/components/containers";
+import { RoundPageContainerTitle } from "@/components/containers/RoundPageContainerTitle";
+import { Header } from "@/components/navigations";
+import { useHeaderChildren } from "@/contexts";
+import { cn } from "@/index";
+import { ModuleWithPermissions } from "@/permissions";
+import { ReactNode, useState } from "react";
+
+type RoundPageContainerProps = {
+  module: ModuleWithPermissions;
+  details?: ReactNode;
+  tabs?: Tab[];
+  children?: ReactNode;
+};
+
+export function RoundPageContainer({ module, details, tabs, children }: RoundPageContainerProps) {
+  const headerChildren = useHeaderChildren();
+  const [showDetails, setShowDetails] = useState(false);
+
+  return (
+    <>
+      <Header className="bg-sidebar border-0">{headerChildren}</Header>
+      <div className="flex h-[calc(100vh-3rem)] w-full flex-col p-2 pt-0 pl-0">
+        <div className="bg-background flex h-full w-full rounded-lg border p-0">
+          <div className="flex w-full flex-col">
+            <RoundPageContainerTitle
+              module={module}
+              details={details}
+              showDetails={showDetails}
+              setShowDetails={setShowDetails}
+            />
+            <div className="flex h-full w-full overflow-hidden">
+              {tabs ? (
+                <Tabs defaultValue={tabs[0].label} className="w-full">
+                  <div className="p-4">
+                    <TabsList className={``}>
+                      {tabs.map((tab) => (
+                        <TabsTrigger key={tab.label} value={tab.label} className={`px-4`}>
+                          {tab.contentLabel ?? tab.label}
+                        </TabsTrigger>
+                      ))}
+                    </TabsList>
+                  </div>
+                  <div className="flex w-full overflow-y-auto px-4">
+                    {tabs.map((tab) => (
+                      <TabsContent key={tab.label} value={tab.label} className={`pb-20`}>
+                        {tab.content}
+                      </TabsContent>
+                    ))}
+                  </div>
+                </Tabs>
+              ) : (
+                <>
+                  {children && (
+                    <div className="grow overflow-y-auto p-4">
+                      <div className="mx-auto max-w-6xl space-y-12 p-8">{children}</div>
+                    </div>
+                  )}
+                </>
+              )}
+              {details && (
+                <div
+                  className={cn(
+                    "h-full shrink-0 overflow-hidden overflow-y-auto transition-all duration-300 ease-in-out",
+                    showDetails ? "w-96 border-l p-4 opacity-100" : "ml-0 w-0 border-l-0 p-0 opacity-0",
+                  )}
+                >
+                  {details}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/containers/RoundPageContainerTitle.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@/components";
+import { useSharedContext } from "@/contexts";
+import { ModuleWithPermissions } from "@/permissions";
+import { cn } from "@/utils";
+import { PanelRightCloseIcon, PanelRightOpenIcon } from "lucide-react";
+import { ReactNode } from "react";
+
+type RoundPageContainerTitleProps = {
+  module: ModuleWithPermissions;
+  details?: ReactNode;
+  showDetails: boolean;
+  setShowDetails: (show: boolean) => void;
+};
+
+export function RoundPageContainerTitle({
+  module,
+  details,
+  showDetails,
+  setShowDetails,
+}: RoundPageContainerTitleProps) {
+  const { title } = useSharedContext();
+
+  return (
+    <div className="flex w-full flex-row items-center justify-between border-b p-4">
+      <div className="flex w-full gap-x-4">
+        <div className={"text-muted-foreground flex items-center gap-x-2 text-lg font-light whitespace-nowrap"}>
+          {module && module.icon && <module.icon className="text-primary h-6 w-6" />}
+          {title.type}
+        </div>
+        <div className={cn("text-primary w-full text-xl font-semibold")}>{title.element}</div>
+      </div>
+      {(title.functions || details) && (
+        <div className="flex gap-x-2">
+          {title.functions}
+          {details && (
+            <Tooltip>
+              <TooltipTrigger>
+                <Button
+                  render={<div />}
+                  nativeButton={false}
+                  variant={`ghost`}
+                  onClick={() => setShowDetails(!showDetails)}
+                >
+                  {showDetails ? (
+                    <PanelRightCloseIcon className="text-muted-foreground" />
+                  ) : (
+                    <PanelRightOpenIcon className="text-accent" />
+                  )}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{showDetails ? "Hide details" : "Show details"}</TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/containers/index.ts

@@ -1,3 +1,5 @@
 export * from "./PageContainer";
 export * from "./ReactMarkdownContainer";
+export * from "./RoundPageContainer";
+export * from "./RoundPageContainerTitle";
 export * from "./TabsContainer";

package/src/components/navigations/Header.tsx

@@ -6,13 +6,14 @@ import { BreadcrumbNavigation } from "./Breadcrumb";
 
 type HeaderProps = {
   children?: React.ReactNode;
+  className?: string;
 };
 
-export function Header({ children }: HeaderProps) {
+export function Header({ children, className }: HeaderProps) {
   const { breadcrumbs } = useSharedContext();
 
   return (
-    <header className={`sticky top-0 z-10 flex h-12 flex-col items-center justify-start gap-x-4 border-b`}>
+    <header className={`sticky top-0 z-10 flex h-12 flex-col items-center justify-start gap-x-4 ${className ?? ""}`}>
       <div className="bg-sidebar flex h-12 w-full flex-row items-center justify-between pl-2 pr-4">
         <SidebarTrigger aria-label="Toggle sidebar" id="sidebar-trigger" />
         <div className="flex w-full flex-row items-center justify-start">

package/src/shadcnui/index.ts

@@ -14,6 +14,7 @@ export * from "./ui/carousel";
 export * from "./ui/chart";
 export * from "./ui/checkbox";
 export * from "./ui/collapsible";
+export * from "./ui/combobox";
 export * from "./ui/command";
 export * from "./ui/context-menu";
 export * from "./ui/dialog";

package/src/shadcnui/ui/command.tsx

@@ -116,7 +116,7 @@ function CommandItem({ className, children, ...props }: React.ComponentProps<typ
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none [&_svg:not([class*='size-'])]:size-3.5 [[data-slot=dialog-content]_&]:rounded-md group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-[selected=true]:bg-muted data-[selected=true]:text-foreground data-[selected=true]:*:[svg]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none [&_svg:not([class*='size-'])]:size-3.5 [[data-slot=dialog-content]_&]:rounded-md group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -132,7 +132,7 @@ function CommandShortcut({ className, ...props }: React.ComponentProps<"span">)
     <span
       data-slot="command-shortcut"
       className={cn(
-        "text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-[0.625rem] tracking-widest",
+        "text-muted-foreground group-data-[selected=true]/command-item:text-foreground ml-auto text-[0.625rem] tracking-widest",
         className,
       )}
       {...props}