@carlonicora/nextjs-jsonapi 1.2.0 → 1.3.1

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

@@ -0,0 +1,129 @@
+/**
+ * Container Template
+ *
+ * Generates {Module}Container.tsx component for displaying item detail page.
+ */
+
+import { FrontendTemplateData } from "../../types/template-data.interface";
+
+/**
+ * Generate the container component file content
+ *
+ * @param data - Frontend template data
+ * @returns Generated file content
+ */
+export function generateContainerTemplate(data: FrontendTemplateData): string {
+  const { names, extendsContent } = data;
+
+  // Content-extending modules get full tabs with relevant content/users
+  if (extendsContent) {
+    return generateContentContainerTemplate(data);
+  }
+
+  // Non-content modules get simpler container
+  return generateSimpleContainerTemplate(data);
+}
+
+/**
+ * Generate container for Content-extending modules
+ */
+function generateContentContainerTemplate(data: FrontendTemplateData): string {
+  const { names } = data;
+
+  return `"use client";
+
+import ${names.pascalCase}Content from "@/features/${data.targetDir}/${names.kebabCase}/components/details/${names.pascalCase}Content";
+import ${names.pascalCase}Details from "@/features/${data.targetDir}/${names.kebabCase}/components/details/${names.pascalCase}Details";
+import { use${names.pascalCase}Context } 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 {
+  AllowedUsersDetails,
+  PageContentContainer,
+  RelevantContentsList,
+  RelevantUsersList,
+} from "@carlonicora/nextjs-jsonapi/components";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@carlonicora/nextjs-jsonapi/shadcnui";
+import { useTranslations } from "next-intl";
+
+type ${names.pascalCase}ContainerProps = {
+  ${names.camelCase}: ${names.pascalCase}Interface;
+};
+
+function ${names.pascalCase}ContainerInternal({ ${names.camelCase} }: ${names.pascalCase}ContainerProps) {
+  const t = useTranslations();
+
+  return (
+    <PageContentContainer
+      details={<${names.pascalCase}Details />}
+      footer={
+        <AllowedUsersDetails showTitle content={${names.camelCase}} />
+      }
+      content={
+        <Tabs defaultValue={\`${names.camelCase}\`}>
+          <TabsList className="mb-4">
+            <TabsTrigger value="${names.camelCase}">{t(\`types.${names.pluralCamel}\`, { count: 1 })}</TabsTrigger>
+            <TabsTrigger value="contents">{t(\`generic.relevant\`)}</TabsTrigger>
+            <TabsTrigger value="users">{t(\`generic.relevant_users\`)}</TabsTrigger>
+          </TabsList>
+          <TabsContent value="${names.camelCase}">
+            <${names.pascalCase}Content />
+          </TabsContent>
+          <TabsContent value="contents">
+            <RelevantContentsList id={${names.camelCase}.id} />
+          </TabsContent>
+          <TabsContent value="users">
+            <RelevantUsersList id={${names.camelCase}.id} />
+          </TabsContent>
+        </Tabs>
+      }
+    />
+  );
+}
+
+export default function ${names.pascalCase}Container() {
+  const { ${names.camelCase} } = use${names.pascalCase}Context();
+  if (!${names.camelCase}) return null;
+
+  return <${names.pascalCase}ContainerInternal ${names.camelCase}={${names.camelCase}} />;
+}
+`;
+}
+
+/**
+ * Generate container for non-Content modules
+ */
+function generateSimpleContainerTemplate(data: FrontendTemplateData): string {
+  const { names } = data;
+
+  return `"use client";
+
+import ${names.pascalCase}Details from "@/features/${data.targetDir}/${names.kebabCase}/components/details/${names.pascalCase}Details";
+import { use${names.pascalCase}Context } 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 { PageContentContainer } from "@carlonicora/nextjs-jsonapi/components";
+
+type ${names.pascalCase}ContainerProps = {
+  ${names.camelCase}: ${names.pascalCase}Interface;
+};
+
+function ${names.pascalCase}ContainerInternal({ ${names.camelCase} }: ${names.pascalCase}ContainerProps) {
+  return (
+    <PageContentContainer
+      details={<${names.pascalCase}Details />}
+      content={
+        <div className="flex w-full flex-col gap-y-4">
+          {/* Add custom content sections here */}
+        </div>
+      }
+    />
+  );
+}
+
+export default function ${names.pascalCase}Container() {
+  const { ${names.camelCase} } = use${names.pascalCase}Context();
+  if (!${names.camelCase}) return null;
+
+  return <${names.pascalCase}ContainerInternal ${names.camelCase}={${names.camelCase}} />;
+}
+`;
+}

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

@@ -0,0 +1,40 @@
+/**
+ * Content Template
+ *
+ * Generates {Module}Content.tsx component for displaying BlockNote content.
+ * Only generated for Content-extending modules.
+ */
+
+import { FrontendTemplateData } from "../../types/template-data.interface";
+
+/**
+ * Generate the content display component file content
+ *
+ * @param data - Frontend template data
+ * @returns Generated file content or null if not Content-extending
+ */
+export function generateContentTemplate(data: FrontendTemplateData): string | null {
+  const { names, extendsContent } = data;
+
+  // Only generate for Content-extending modules
+  if (!extendsContent) {
+    return null;
+  }
+
+  return `"use client";
+
+import { use${names.pascalCase}Context } from "@/features/${data.targetDir}/${names.kebabCase}/contexts/${names.pascalCase}Context";
+import { BlockNoteEditorContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { Card } from "@carlonicora/nextjs-jsonapi/shadcnui";
+
+export default function ${names.pascalCase}Content() {
+  const { ${names.camelCase} } = use${names.pascalCase}Context();
+
+  return (
+    <Card className="flex w-full flex-col p-4">
+      <BlockNoteEditorContainer id={${names.camelCase}.id} type="${names.camelCase}" initialContent={${names.camelCase}.content} />
+    </Card>
+  );
+}
+`;
+}

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

@@ -0,0 +1,51 @@
+/**
+ * Deleter Template
+ *
+ * Generates {Module}Deleter.tsx component for delete confirmation.
+ */
+
+import { FrontendTemplateData } from "../../types/template-data.interface";
+
+/**
+ * Generate the deleter component file content
+ *
+ * @param data - Frontend template data
+ * @returns Generated file content
+ */
+export function generateDeleterTemplate(data: FrontendTemplateData): string {
+  const { names } = data;
+
+  return `"use client";
+
+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 { CommonDeleter } from "@carlonicora/nextjs-jsonapi/components";
+import { usePageUrlGenerator } from "@carlonicora/nextjs-jsonapi/hooks";
+
+import { Modules } from "@carlonicora/nextjs-jsonapi/core";
+import { useTranslations } from "next-intl";
+
+type ${names.pascalCase}DeleterProps = {
+  ${names.camelCase}: ${names.pascalCase}Interface;
+};
+
+function ${names.pascalCase}DeleterInternal({ ${names.camelCase} }: ${names.pascalCase}DeleterProps) {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+
+  if (!${names.camelCase}) return null;
+
+  return (
+    <CommonDeleter
+      type={\`${names.pluralKebab}\`}
+      deleteFunction={() => ${names.pascalCase}Service.delete({ ${names.camelCase}Id: ${names.camelCase}.id })}
+      redirectTo={generateUrl({ page: Modules.${names.pascalCase} })}
+    />
+  );
+}
+
+export default function ${names.pascalCase}Deleter(props: ${names.pascalCase}DeleterProps) {
+  return <${names.pascalCase}DeleterInternal {...props} />;
+}
+`;
+}

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

@@ -0,0 +1,115 @@
+/**
+ * Details Template
+ *
+ * Generates {Module}Details.tsx component for displaying item details.
+ */
+
+import { FrontendTemplateData } from "../../types/template-data.interface";
+import { toCamelCase, pluralize } from "../../transformers/name-transformer";
+
+/**
+ * Generate the details component file content
+ *
+ * @param data - Frontend template data
+ * @returns Generated file content
+ */
+export function generateDetailsTemplate(data: FrontendTemplateData): string {
+  const { names, fields, relationships, extendsContent } = data;
+
+  const attributeElements = generateAttributeElements(data);
+
+  return `"use client";
+
+import { use${names.pascalCase}Context } from "@/features/${data.targetDir}/${names.kebabCase}/contexts/${names.pascalCase}Context";
+import { AttributeElement, ContentTitle, ReactMarkdownContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { useSharedContext } from "@carlonicora/nextjs-jsonapi/contexts";
+import { useTranslations } from "next-intl";
+
+function ${names.pascalCase}DetailsInternal() {
+  const { ${names.camelCase}, reload${names.pascalCase} } = use${names.pascalCase}Context();
+  const t = useTranslations();
+  const { title } = useSharedContext();
+
+  if (!${names.camelCase}) return null;
+
+  return (
+    <div className="flex w-full flex-col gap-y-2">
+      <ContentTitle type={title.type} element={title.element} functions={title.functions} />
+${attributeElements}
+    </div>
+  );
+}
+
+export default function ${names.pascalCase}Details() {
+  const { ${names.camelCase} } = use${names.pascalCase}Context();
+  if (!${names.camelCase}) return null;
+
+  return <${names.pascalCase}DetailsInternal />;
+}
+`;
+}
+
+/**
+ * Generate attribute elements for display fields
+ */
+function generateAttributeElements(data: FrontendTemplateData): string {
+  const { names, fields, relationships, extendsContent } = data;
+  const elements: string[] = [];
+
+  // Show abstract if Content-extending
+  if (extendsContent) {
+    elements.push(`      <AttributeElement
+        title={t(\`generic.abstract\`)}
+        value={<ReactMarkdownContainer size="small" content={${names.camelCase}.abstract} />}
+      />`);
+  }
+
+  // Add custom fields (excluding name, tldr, abstract, content which are handled elsewhere)
+  const displayableFields = fields.filter(
+    (f) => !["name", "tldr", "abstract", "content", "id"].includes(f.name)
+  );
+
+  displayableFields.forEach((field) => {
+    if (field.type === "string") {
+      elements.push(`      <AttributeElement
+        title={t(\`features.${names.camelCase}.fields.${field.name}.label\`)}
+        value={${names.camelCase}.${field.name}}
+      />`);
+    } else if (field.type === "boolean") {
+      elements.push(`      <AttributeElement
+        title={t(\`features.${names.camelCase}.fields.${field.name}.label\`)}
+        value={${names.camelCase}.${field.name} ? t(\`generic.yes\`) : t(\`generic.no\`)}
+      />`);
+    } else if (field.type === "number") {
+      elements.push(`      <AttributeElement
+        title={t(\`features.${names.camelCase}.fields.${field.name}.label\`)}
+        value={${names.camelCase}.${field.name}?.toString()}
+      />`);
+    }
+  });
+
+  // Add relationship displays (basic - can be enhanced manually)
+  relationships
+    .filter((rel) => rel.variant !== "Author") // Skip author, usually shown in title
+    .forEach((rel) => {
+      if (rel.single) {
+        const propName = toCamelCase(rel.variant || rel.name);
+        elements.push(`      {${names.camelCase}.${propName} && (
+        <AttributeElement
+          title={t(\`generic.relationships.${propName}.label\`)}
+          value={${names.camelCase}.${propName}.name}
+        />
+      )}`);
+      } else {
+        const propName = pluralize(toCamelCase(rel.name));
+        elements.push(`      {${names.camelCase}.${propName} && ${names.camelCase}.${propName}.length > 0 && (
+        <AttributeElement
+          title={t(\`types.${pluralize(rel.name.toLowerCase())}\`, { count: 2 })}
+          value={${names.camelCase}.${propName}.map((item) => item.name).join(", ")}
+        />
+      )}`);
+      }
+    });
+
+  return elements.join("\n");
+}