@carlonicora/nextjs-jsonapi 1.2.0 → 1.3.1

package/dist/scripts/generate-web-module/templates/components/list.template.js

@@ -0,0 +1,84 @@
+"use strict";
+/**
+ * List Template
+ *
+ * Generates {Module}List.tsx component for displaying a list of items.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateListTemplate = generateListTemplate;
+const name_transformer_1 = require("../../transformers/name-transformer");
+/**
+ * Generate the list component file content
+ *
+ * @param data - Frontend template data
+ * @returns Generated file content
+ */
+function generateListTemplate(data) {
+    const { names, fields, relationships, extendsContent, tableFieldNames } = data;
+    // Build field list for the table - use name + first few fields + updatedAt
+    const displayFields = buildDisplayFields(data);
+    return `"use client";
+
+import ${names.pascalCase}Editor from "@/features/${data.targetDir}/${names.kebabCase}/components/forms/${names.pascalCase}Editor";
+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}Service } from "@/features/${data.targetDir}/${names.kebabCase}/data/${names.pascalCase}Service";
+import "@/features/${data.targetDir}/${names.kebabCase}/hooks/use${names.pascalCase}TableStructure";
+import { ContentListTable } from "@carlonicora/nextjs-jsonapi/components";
+import { Modules } from "@carlonicora/nextjs-jsonapi/core";
+import { DataListRetriever, useDataListRetriever } from "@carlonicora/nextjs-jsonapi/hooks";
+import { useTranslations } from "next-intl";
+import { ReactNode } from "react";
+
+export default function ${names.pascalCase}List() {
+  const t = useTranslations();
+
+  const data: DataListRetriever<${names.pascalCase}Interface> = useDataListRetriever({
+    module: Modules.${names.pascalCase},
+    retriever: (params) => ${names.pascalCase}Service.findMany(params),
+    retrieverParams: {},
+  });
+
+  const functions: ReactNode[] = [<${names.pascalCase}Editor key="create-${names.kebabCase}" />];
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[${displayFields}]}
+      tableGeneratorType={Modules.${names.pascalCase}}
+      functions={functions}
+      title={t(\`types.${names.pluralKebab}\`, { count: 2 })}
+    />
+  );
+}
+`;
+}
+/**
+ * Build display fields array for the table
+ */
+function buildDisplayFields(data) {
+    const { names, fields, relationships, extendsContent } = data;
+    const displayFields = [];
+    // Always include name if it exists
+    if (extendsContent || fields.some((f) => f.name === "name")) {
+        displayFields.push(`${names.pascalCase}Fields.name`);
+    }
+    // Add author if present
+    const authorRel = relationships.find((r) => r.variant === "Author");
+    if (authorRel) {
+        const authorFieldName = (0, name_transformer_1.toCamelCase)(authorRel.variant);
+        displayFields.push(`${names.pascalCase}Fields.${authorFieldName}`);
+    }
+    // Add first non-author relationship
+    const otherRel = relationships.find((r) => r.variant !== "Author");
+    if (otherRel) {
+        const relFieldName = otherRel.single
+            ? (0, name_transformer_1.toCamelCase)(otherRel.variant || otherRel.name)
+            : (0, name_transformer_1.pluralize)((0, name_transformer_1.toCamelCase)(otherRel.name));
+        displayFields.push(`${names.pascalCase}Fields.${relFieldName}`);
+    }
+    // Add updatedAt
+    displayFields.push(`${names.pascalCase}Fields.updatedAt`);
+    return displayFields.join(", ");
+}
+//# sourceMappingURL=list.template.js.map

package/dist/scripts/generate-web-module/templates/components/list.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.template.js","sourceRoot":"","sources":["../../../../../scripts/generate-web-module/templates/components/list.template.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+/**
+ * MultiSelector Template
+ *
+ * Generates {Module}MultiSelector.tsx multi-select component.
+ */
+import { FrontendTemplateData } from "../../types/template-data.interface";
+/**
+ * Generate the multi-selector component file content
+ *
+ * @param data - Frontend template data
+ * @returns Generated file content
+ */
+export declare function generateMultiSelectorTemplate(data: FrontendTemplateData): string;
+//# sourceMappingURL=multi-selector.template.d.ts.map

package/dist/scripts/generate-web-module/templates/components/multi-selector.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-selector.template.d.ts","sourceRoot":"","sources":["../../../../../scripts/generate-web-module/templates/components/multi-selector.template.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAE3E;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,oBAAoB,GAAG,MAAM,CAyKhF"}

package/dist/scripts/generate-web-module/templates/components/multi-selector.template.js

@@ -0,0 +1,184 @@
+"use strict";
+/**
+ * MultiSelector Template
+ *
+ * Generates {Module}MultiSelector.tsx multi-select component.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateMultiSelectorTemplate = generateMultiSelectorTemplate;
+/**
+ * Generate the multi-selector component file content
+ *
+ * @param data - Frontend template data
+ * @returns Generated file content
+ */
+function generateMultiSelectorTemplate(data) {
+    const { names } = data;
+    return `"use client";
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage, MultiSelect } from "@carlonicora/nextjs-jsonapi/shadcnui";
+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 { DataListRetriever, useDataListRetriever } from "@carlonicora/nextjs-jsonapi/hooks";
+import { useDebounce } from "@carlonicora/nextjs-jsonapi/hooks";
+import { Modules } from "@carlonicora/nextjs-jsonapi/core";
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useState } from "react";
+import { useWatch } from "react-hook-form";
+
+type ${names.pascalCase}MultiSelectType = {
+  id: string;
+  name: string;
+};
+
+type ${names.pascalCase}MultiSelectorProps = {
+  id: string;
+  form: any;
+  current${names.pascalCase}?: ${names.pascalCase}Interface;
+  label?: string;
+  placeholder?: string;
+  onChange?: (${names.pluralCamel}?: ${names.pascalCase}Interface[]) => void;
+  maxCount?: number;
+  isRequired?: boolean;
+};
+
+export default function ${names.pascalCase}MultiSelector({
+  id,
+  form,
+  current${names.pascalCase},
+  label,
+  placeholder,
+  onChange,
+  maxCount = 3,
+  isRequired = false,
+}: ${names.pascalCase}MultiSelectorProps) {
+  const t = useTranslations("features.${names.camelCase}");
+  const [${names.camelCase}Options, set${names.pascalCase}Options] = useState<any[]>([]);
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  const selected${names.pluralPascal}: ${names.pascalCase}MultiSelectType[] = useWatch({ control: form.control, name: id }) || [];
+
+  const data: DataListRetriever<${names.pascalCase}Interface> = useDataListRetriever({
+    retriever: (params) => ${names.pascalCase}Service.findMany(params),
+    retrieverParams: {},
+    ready: true,
+    module: Modules.${names.pascalCase},
+  });
+
+  const updateSearch = useCallback(
+    (searchedTerm: string) => {
+      if (searchedTerm.trim()) {
+        data.addAdditionalParameter("search", searchedTerm.trim());
+      } else {
+        data.removeAdditionalParameter("search");
+      }
+    },
+    [data],
+  );
+
+  const debouncedUpdateSearch = useDebounce(updateSearch, 500);
+
+  useEffect(() => {
+    debouncedUpdateSearch(searchTerm);
+  }, [debouncedUpdateSearch, searchTerm]);
+
+  useEffect(() => {
+    if (data.data && data.data.length > 0) {
+      const ${names.pluralCamel} = data.data as ${names.pascalCase}Interface[];
+      const filtered${names.pluralPascal} = ${names.pluralCamel}.filter((${names.camelCase}) => ${names.camelCase}.id !== current${names.pascalCase}?.id);
+
+      const options = filtered${names.pluralPascal}.map((${names.camelCase}) => ({
+        label: ${names.camelCase}.name,
+        value: ${names.camelCase}.id,
+        ${names.camelCase}Data: ${names.camelCase},
+      }));
+
+      set${names.pascalCase}Options(options);
+    }
+  }, [data.data, current${names.pascalCase}]);
+
+  // Add options for any already selected ${names.pluralCamel} that aren't in search results
+  useEffect(() => {
+    if (selected${names.pluralPascal}.length > 0) {
+      // Create a map of existing option IDs for quick lookup
+      const existingOptionIds = new Set(${names.camelCase}Options.map((option) => option.value));
+
+      // Find selected ${names.pluralCamel} that don't have an option yet
+      const missingOptions = selected${names.pluralPascal}
+        .filter((${names.camelCase}) => !existingOptionIds.has(${names.camelCase}.id))
+        .map((${names.camelCase}) => ({
+          label: ${names.camelCase}.name,
+          value: ${names.camelCase}.id,
+          ${names.camelCase}Data: ${names.camelCase},
+        }));
+
+      if (missingOptions.length > 0) {
+        set${names.pascalCase}Options((prev) => [...prev, ...missingOptions]);
+      }
+    }
+  }, [selected${names.pluralPascal}, ${names.camelCase}Options]);
+
+  const handleValueChange = (selectedIds: string[]) => {
+    const updatedSelected${names.pluralPascal} = selectedIds.map((id) => {
+      const existing${names.pascalCase} = selected${names.pluralPascal}.find((${names.camelCase}) => ${names.camelCase}.id === id);
+      if (existing${names.pascalCase}) {
+        return existing${names.pascalCase};
+      }
+
+      const option = ${names.camelCase}Options.find((option) => option.value === id);
+      if (option?.${names.camelCase}Data) {
+        return {
+          id: option.${names.camelCase}Data.id,
+          name: option.${names.camelCase}Data.name,
+        };
+      }
+
+      return { id, name: id };
+    });
+
+    form.setValue(id, updatedSelected${names.pluralPascal});
+
+    if (onChange) {
+      const fullSelected${names.pluralPascal} = selectedIds
+        .map((id) => ${names.camelCase}Options.find((option) => option.value === id)?.${names.camelCase}Data)
+        .filter(Boolean) as ${names.pascalCase}Interface[];
+      onChange(fullSelected${names.pluralPascal});
+    }
+  };
+
+  const selected${names.pascalCase}Ids = selected${names.pluralPascal}.map((${names.camelCase}: ${names.pascalCase}MultiSelectType) => ${names.camelCase}.id);
+
+  return (
+    <div className="flex w-full flex-col">
+      <FormField
+        control={form.control}
+        name={id}
+        render={({ field }) => (
+          <FormItem className={\`\${label ? "mb-5" : "mb-1"}\`}>
+            {label && (
+              <FormLabel className="flex items-center">
+                {label}
+                {isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
+              </FormLabel>
+            )}
+            <FormControl>
+              <MultiSelect
+                options={${names.camelCase}Options}
+                onValueChange={handleValueChange}
+                defaultValue={selected${names.pascalCase}Ids}
+                placeholder={placeholder}
+                maxCount={maxCount}
+                animation={0}
+                onSearchChange={setSearchTerm}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=multi-selector.template.js.map

package/dist/scripts/generate-web-module/templates/components/multi-selector.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-selector.template.js","sourceRoot":"","sources":["../../../../../scripts/generate-web-module/templates/components/multi-selector.template.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;AAUH,sEAyKC;AA/KD;;;;;GAKG;AACH,SAAgB,6BAA6B,CAAC,IAA0B;IACtE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEvB,OAAO;;;WAGE,KAAK,CAAC,UAAU,gCAAgC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,UAAU;WAC1G,KAAK,CAAC,UAAU,8BAA8B,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,UAAU;;;;;;;;OAQ5G,KAAK,CAAC,UAAU;;;;;OAKhB,KAAK,CAAC,UAAU;;;WAGZ,KAAK,CAAC,UAAU,MAAM,KAAK,CAAC,UAAU;;;gBAGjC,KAAK,CAAC,WAAW,MAAM,KAAK,CAAC,UAAU;;;;;0BAK7B,KAAK,CAAC,UAAU;;;WAG/B,KAAK,CAAC,UAAU;;;;;;KAMtB,KAAK,CAAC,UAAU;wCACmB,KAAK,CAAC,SAAS;WAC5C,KAAK,CAAC,SAAS,eAAe,KAAK,CAAC,UAAU;;;kBAGvC,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,UAAU;;kCAEvB,KAAK,CAAC,UAAU;6BACrB,KAAK,CAAC,UAAU;;;sBAGvB,KAAK,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;cAsBxB,KAAK,CAAC,WAAW,mBAAmB,KAAK,CAAC,UAAU;sBAC5C,KAAK,CAAC,YAAY,MAAM,KAAK,CAAC,WAAW,YAAY,KAAK,CAAC,SAAS,QAAQ,KAAK,CAAC,SAAS,kBAAkB,KAAK,CAAC,UAAU;;gCAEnH,KAAK,CAAC,YAAY,SAAS,KAAK,CAAC,SAAS;iBACzD,KAAK,CAAC,SAAS;iBACf,KAAK,CAAC,SAAS;UACtB,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,SAAS;;;WAGtC,KAAK,CAAC,UAAU;;0BAED,KAAK,CAAC,UAAU;;4CAEE,KAAK,CAAC,WAAW;;kBAE3C,KAAK,CAAC,YAAY;;0CAEM,KAAK,CAAC,SAAS;;yBAEhC,KAAK,CAAC,WAAW;uCACH,KAAK,CAAC,YAAY;mBACtC,KAAK,CAAC,SAAS,+BAA+B,KAAK,CAAC,SAAS;gBAChE,KAAK,CAAC,SAAS;mBACZ,KAAK,CAAC,SAAS;mBACf,KAAK,CAAC,SAAS;YACtB,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,SAAS;;;;aAItC,KAAK,CAAC,UAAU;;;gBAGb,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,SAAS;;;2BAG3B,KAAK,CAAC,YAAY;sBACvB,KAAK,CAAC,UAAU,cAAc,KAAK,CAAC,YAAY,UAAU,KAAK,CAAC,SAAS,QAAQ,KAAK,CAAC,SAAS;oBAClG,KAAK,CAAC,UAAU;yBACX,KAAK,CAAC,UAAU;;;uBAGlB,KAAK,CAAC,SAAS;oBAClB,KAAK,CAAC,SAAS;;uBAEZ,KAAK,CAAC,SAAS;yBACb,KAAK,CAAC,SAAS;;;;;;;uCAOD,KAAK,CAAC,YAAY;;;0BAG/B,KAAK,CAAC,YAAY;uBACrB,KAAK,CAAC,SAAS,kDAAkD,KAAK,CAAC,SAAS;8BACzE,KAAK,CAAC,UAAU;6BACjB,KAAK,CAAC,YAAY;;;;kBAI7B,KAAK,CAAC,UAAU,iBAAiB,KAAK,CAAC,YAAY,SAAS,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,UAAU,uBAAuB,KAAK,CAAC,SAAS;;;;;;;;;;;;;;;;;2BAiB7H,KAAK,CAAC,SAAS;;wCAEF,KAAK,CAAC,UAAU;;;;;;;;;;;;;;CAcvD,CAAC;AACF,CAAC"}

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

@@ -0,0 +1,14 @@
+/**
+ * Selector Template
+ *
+ * Generates {Module}Selector.tsx searchable combobox component.
+ */
+import { FrontendTemplateData } from "../../types/template-data.interface";
+/**
+ * Generate the selector component file content
+ *
+ * @param data - Frontend template data
+ * @returns Generated file content
+ */
+export declare function generateSelectorTemplate(data: FrontendTemplateData): string;
+//# sourceMappingURL=selector.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selector.template.d.ts","sourceRoot":"","sources":["../../../../../scripts/generate-web-module/templates/components/selector.template.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAE3E;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,oBAAoB,GAAG,MAAM,CAwL3E"}

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

@@ -0,0 +1,199 @@
+"use strict";
+/**
+ * Selector Template
+ *
+ * Generates {Module}Selector.tsx searchable combobox component.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateSelectorTemplate = generateSelectorTemplate;
+/**
+ * Generate the selector component file content
+ *
+ * @param data - Frontend template data
+ * @returns Generated file content
+ */
+function generateSelectorTemplate(data) {
+    const { names } = data;
+    return `"use client";
+
+import {
+  Command,
+  CommandItem,
+  CommandList,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@carlonicora/nextjs-jsonapi/shadcnui";
+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 { DataListRetriever, useDataListRetriever } from "@carlonicora/nextjs-jsonapi/hooks";
+import { useDebounce } from "@carlonicora/nextjs-jsonapi/hooks";
+import { Modules } from "@carlonicora/nextjs-jsonapi/core";
+
+import { CircleX, RefreshCwIcon, SearchIcon, XIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+type ${names.pascalCase}SelectorProps = {
+  id: string;
+  form: any;
+  label?: string;
+  placeholder?: string;
+  onChange?: (${names.camelCase}?: ${names.pascalCase}Interface) => void;
+  isRequired?: boolean;
+};
+
+export default function ${names.pascalCase}Selector({
+  id,
+  form,
+  label,
+  placeholder,
+  onChange,
+  isRequired = false,
+}: ${names.pascalCase}SelectorProps) {
+  const t = useTranslations();
+
+  const [open, setOpen] = useState<boolean>(false);
+
+  const searchTermRef = useRef<string>("");
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+
+  const data: DataListRetriever<${names.pascalCase}Interface> = useDataListRetriever({
+    retriever: (params) => {
+      return ${names.pascalCase}Service.findMany(params);
+    },
+    retrieverParams: {},
+    module: Modules.${names.pascalCase},
+  });
+
+  const search = useCallback(
+    async (searchedTerm: string) => {
+      try {
+        if (searchedTerm === searchTermRef.current) return;
+        setIsSearching(true);
+        searchTermRef.current = searchedTerm;
+        await data.search(searchedTerm);
+      } finally {
+        setIsSearching(false);
+      }
+    },
+    [searchTermRef, data],
+  );
+
+  const updateSearchTerm = useDebounce(search, 500);
+
+  useEffect(() => {
+    setIsSearching(true);
+    updateSearchTerm(searchTerm);
+  }, [updateSearchTerm, searchTerm]);
+
+  const set${names.pascalCase} = (${names.camelCase}?: ${names.pascalCase}Interface) => {
+    if (onChange) onChange(${names.camelCase});
+    if (!${names.camelCase}) {
+      form.setValue(id, undefined);
+      setOpen(false);
+      return;
+    }
+
+    form.setValue(id, { id: ${names.camelCase}.id, name: ${names.camelCase}.name });
+    setOpen(false);
+
+    setTimeout(() => {
+      setOpen(false);
+    }, 0);
+  };
+
+  return (
+    <div className="flex w-full flex-col">
+      <FormField
+        control={form.control}
+        name={id}
+        render={({ field }) => (
+          <FormItem className={\`\${label ? "mb-5" : "mb-1"}\`}>
+            {label && (
+              <FormLabel className="flex items-center">
+                {label}
+                {isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
+              </FormLabel>
+            )}
+            <FormControl>
+              <Popover open={open} onOpenChange={setOpen} modal={true}>
+                <div className="flex w-full flex-row items-center justify-between">
+                  <PopoverTrigger className="w-full">
+                    <div className="flex w-full flex-row items-center justify-start rounded-md text-sm">
+                      {field.value ? (
+                        <>
+                          <div className="flex w-full flex-row items-center justify-start rounded-md border p-2">
+                            <span className="">{field.value?.name ?? ""}</span>
+                          </div>
+                        </>
+                      ) : (
+                        <div className="text-muted-foreground mr-7 flex h-10 w-full flex-row items-center justify-start rounded-md border p-2 text-sm">
+                          {placeholder ?? t(\`generic.search.placeholder\`, { type: t(\`types.${names.pluralKebab}\`, { count: 1 }) })}
+                        </div>
+                      )}
+                    </div>
+                  </PopoverTrigger>
+                  {field.value && (
+                    <CircleX
+                      className="text-muted hover:text-destructive ml-2 h-6 w-6 cursor-pointer"
+                      onClick={() => set${names.pascalCase}()}
+                    />
+                  )}
+                </div>
+                <PopoverContent>
+                  <Command shouldFilter={false}>
+                    <div className="relative mb-2 w-full">
+                      <SearchIcon className="text-muted-foreground absolute left-2.5 top-2.5 h-4 w-4" />
+                      <Input
+                        placeholder={t(\`generic.search.placeholder\`, { type: t(\`types.${names.pluralKebab}\`, { count: 1 }) })}
+                        type="text"
+                        className="w-full pl-8 pr-8"
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        value={searchTerm}
+                      />
+                      {isSearching ? (
+                        <RefreshCwIcon className="text-muted-foreground absolute right-2.5 top-2.5 h-4 w-4 animate-spin" />
+                      ) : searchTermRef.current ? (
+                        <XIcon
+                          className={\`absolute right-2.5 top-2.5 h-4 w-4 \${searchTermRef.current ? "cursor-pointer" : "text-muted-foreground"}\`}
+                          onClick={() => {
+                            setSearchTerm("");
+                            search("");
+                          }}
+                        />
+                      ) : (
+                        <></>
+                      )}
+                    </div>
+                    <CommandList>
+                      {data.data &&
+                        data.data.length > 0 &&
+                        (data.data as ${names.pascalCase}Interface[]).map((${names.camelCase}: ${names.pascalCase}Interface) => (
+                          <CommandItem className="cursor-pointer" key={${names.camelCase}.id} onSelect={() => set${names.pascalCase}(${names.camelCase})}>
+                            <span className="">{${names.camelCase}.name}</span>
+                          </CommandItem>
+                        ))}
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=selector.template.js.map

package/dist/scripts/generate-web-module/templates/components/selector.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector.template.js","sourceRoot":"","sources":["../../../../../scripts/generate-web-module/templates/components/selector.template.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;AAUH,4DAwLC;AA9LD;;;;;GAKG;AACH,SAAgB,wBAAwB,CAAC,IAA0B;IACjE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEvB,OAAO;;;;;;;;;;;;;;;;WAgBE,KAAK,CAAC,UAAU,gCAAgC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,UAAU;WAC1G,KAAK,CAAC,UAAU,8BAA8B,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,UAAU;;;;;;;;;OAS5G,KAAK,CAAC,UAAU;;;;;gBAKP,KAAK,CAAC,SAAS,MAAM,KAAK,CAAC,UAAU;;;;0BAI3B,KAAK,CAAC,UAAU;;;;;;;KAOrC,KAAK,CAAC,UAAU;;;;;;;;;;kCAUa,KAAK,CAAC,UAAU;;eAEnC,KAAK,CAAC,UAAU;;;sBAGT,KAAK,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;aAwBzB,KAAK,CAAC,UAAU,OAAO,KAAK,CAAC,SAAS,MAAM,KAAK,CAAC,UAAU;6BAC5C,KAAK,CAAC,SAAS;WACjC,KAAK,CAAC,SAAS;;;;;;8BAMI,KAAK,CAAC,SAAS,cAAc,KAAK,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gGAkCsB,KAAK,CAAC,WAAW;;;;;;;;0CAQvE,KAAK,CAAC,UAAU;;;;;;;;;2FASiC,KAAK,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;wCAuBpE,KAAK,CAAC,UAAU,qBAAqB,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,UAAU;yEACxC,KAAK,CAAC,SAAS,2BAA2B,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,SAAS;kDACpG,KAAK,CAAC,SAAS;;;;;;;;;;;;;;;CAehE,CAAC;AACF,CAAC"}

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

@@ -0,0 +1,14 @@
+/**
+ * Context Template
+ *
+ * Generates {Module}Context.tsx for module state management.
+ */
+import { FrontendTemplateData } from "../types/template-data.interface";
+/**
+ * Generate the context file content
+ *
+ * @param data - Frontend template data
+ * @returns Generated file content
+ */
+export declare function generateContextTemplate(data: FrontendTemplateData): string;
+//# sourceMappingURL=context.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.template.d.ts","sourceRoot":"","sources":["../../../../scripts/generate-web-module/templates/context.template.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAExE;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,oBAAoB,GAAG,MAAM,CA0G1E"}

package/dist/scripts/generate-web-module/templates/context.template.js

@@ -0,0 +1,121 @@
+"use strict";
+/**
+ * Context Template
+ *
+ * Generates {Module}Context.tsx for module state management.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateContextTemplate = generateContextTemplate;
+/**
+ * Generate the context file content
+ *
+ * @param data - Frontend template data
+ * @returns Generated file content
+ */
+function generateContextTemplate(data) {
+    const { names, extendsContent } = data;
+    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 { SharedProvider } from "@carlonicora/nextjs-jsonapi/contexts";
+import { usePageUrlGenerator } from "@carlonicora/nextjs-jsonapi/hooks";
+import { BreadcrumbItemData } from "@carlonicora/nextjs-jsonapi/interfaces";
+
+import { JsonApiHydratedDataInterface, Modules, rehydrate } from "@carlonicora/nextjs-jsonapi/core";
+import { useTranslations } from "next-intl";
+import { createContext, ReactNode, useContext, useState } from "react";
+
+interface ${names.pascalCase}ContextType {
+  ${names.camelCase}: ${names.pascalCase}Interface | undefined;
+  set${names.pascalCase}: (value: ${names.pascalCase}Interface | undefined) => void;
+  reload${names.pascalCase}: () => Promise<void>;
+}
+
+const ${names.pascalCase}Context = createContext<${names.pascalCase}ContextType | undefined>(undefined);
+
+type ${names.pascalCase}ProviderProps = {
+  children: ReactNode;
+  dehydrated${names.pascalCase}?: JsonApiHydratedDataInterface;
+};
+
+export const ${names.pascalCase}Provider = ({ children, dehydrated${names.pascalCase} }: ${names.pascalCase}ProviderProps) => {
+  const generateUrl = usePageUrlGenerator();
+  const t = useTranslations();
+
+  const [${names.camelCase}, set${names.pascalCase}] = useState<${names.pascalCase}Interface | undefined>(
+    dehydrated${names.pascalCase} ? rehydrate<${names.pascalCase}Interface>(Modules.${names.pascalCase}, dehydrated${names.pascalCase}) : undefined,
+  );
+
+  const reload${names.pascalCase} = async () => {
+    if (!${names.camelCase}) return;
+
+    const fresh${names.pascalCase} = await ${names.pascalCase}Service.findOne({ id: ${names.camelCase}.id });
+    set${names.pascalCase}(fresh${names.pascalCase});
+  };
+
+  const breadcrumb = () => {
+    const response: BreadcrumbItemData[] = [];
+
+    response.push({
+      name: t(\`types.${names.pluralCamel}\`, { count: 2 }),
+      href: generateUrl({ page: Modules.${names.pascalCase} }),
+    });
+
+    if (${names.camelCase})
+      response.push({
+        name: ${names.camelCase}.name,
+        href: generateUrl({ page: Modules.${names.pascalCase}, id: ${names.camelCase}.id }),
+      });
+
+    return response;
+  };
+
+  const title = () => {
+    const response: any = {
+      type: t(\`types.${names.pluralCamel}\`, { count: ${names.camelCase} ? 1 : 2 }),
+    };
+
+    const functions: ReactNode[] = [];
+
+    if (${names.camelCase}) {
+      response.element = ${names.camelCase}.name;
+
+      functions.push(<${names.pascalCase}Deleter key={\`${names.pascalCase}Deleter\`} ${names.camelCase}={${names.camelCase}} />);
+      functions.push(<${names.pascalCase}Editor key={\`${names.pascalCase}Editor\`} ${names.camelCase}={${names.camelCase}} propagateChanges={set${names.pascalCase}} />);
+    } else {
+      functions.push(<${names.pascalCase}Editor key={\`${names.pascalCase}Editor\`} />);
+    }
+
+    if (functions.length > 0) response.functions = functions;
+
+    return response;
+  };
+
+  return (
+    <SharedProvider value={{ breadcrumbs: breadcrumb(), title: title() }}>
+      <${names.pascalCase}Context.Provider
+        value={{
+          ${names.camelCase}: ${names.camelCase},
+          set${names.pascalCase}: set${names.pascalCase},
+          reload${names.pascalCase}: reload${names.pascalCase},
+        }}
+      >
+        {children}
+      </${names.pascalCase}Context.Provider>
+    </SharedProvider>
+  );
+};
+
+export const use${names.pascalCase}Context = (): ${names.pascalCase}ContextType => {
+  const context = useContext(${names.pascalCase}Context);
+  if (context === undefined) {
+    throw new Error("use${names.pascalCase}Context must be used within a ${names.pascalCase}Provider");
+  }
+  return context;
+};
+`;
+}
+//# sourceMappingURL=context.template.js.map

package/dist/scripts/generate-web-module/templates/context.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.template.js","sourceRoot":"","sources":["../../../../scripts/generate-web-module/templates/context.template.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;AAUH,0DA0GC;AAhHD;;;;;GAKG;AACH,SAAgB,uBAAuB,CAAC,IAA0B;IAChE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IAEvC,OAAO;;SAEA,KAAK,CAAC,UAAU,4BAA4B,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,qBAAqB,KAAK,CAAC,UAAU;SAClH,KAAK,CAAC,UAAU,2BAA2B,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,qBAAqB,KAAK,CAAC,UAAU;WAC/G,KAAK,CAAC,UAAU,gCAAgC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,UAAU;WAC1G,KAAK,CAAC,UAAU,8BAA8B,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,UAAU;;;;;;;;;YASvG,KAAK,CAAC,UAAU;IACxB,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,UAAU;OACjC,KAAK,CAAC,UAAU,aAAa,KAAK,CAAC,UAAU;UAC1C,KAAK,CAAC,UAAU;;;QAGlB,KAAK,CAAC,UAAU,2BAA2B,KAAK,CAAC,UAAU;;OAE5D,KAAK,CAAC,UAAU;;cAET,KAAK,CAAC,UAAU;;;eAGf,KAAK,CAAC,UAAU,qCAAqC,KAAK,CAAC,UAAU,OAAO,KAAK,CAAC,UAAU;;;;WAIhG,KAAK,CAAC,SAAS,QAAQ,KAAK,CAAC,UAAU,gBAAgB,KAAK,CAAC,UAAU;gBAClE,KAAK,CAAC,UAAU,gBAAgB,KAAK,CAAC,UAAU,sBAAsB,KAAK,CAAC,UAAU,eAAe,KAAK,CAAC,UAAU;;;gBAGrH,KAAK,CAAC,UAAU;WACrB,KAAK,CAAC,SAAS;;iBAET,KAAK,CAAC,UAAU,YAAY,KAAK,CAAC,UAAU,yBAAyB,KAAK,CAAC,SAAS;SAC5F,KAAK,CAAC,UAAU,SAAS,KAAK,CAAC,UAAU;;;;;;;wBAO1B,KAAK,CAAC,WAAW;0CACC,KAAK,CAAC,UAAU;;;UAGhD,KAAK,CAAC,SAAS;;gBAET,KAAK,CAAC,SAAS;4CACa,KAAK,CAAC,UAAU,SAAS,KAAK,CAAC,SAAS;;;;;;;;wBAQ5D,KAAK,CAAC,WAAW,gBAAgB,KAAK,CAAC,SAAS;;;;;UAK9D,KAAK,CAAC,SAAS;2BACE,KAAK,CAAC,SAAS;;wBAElB,KAAK,CAAC,UAAU,kBAAkB,KAAK,CAAC,UAAU,cAAc,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS;wBACnG,KAAK,CAAC,UAAU,iBAAiB,KAAK,CAAC,UAAU,aAAa,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,0BAA0B,KAAK,CAAC,UAAU;;wBAE3I,KAAK,CAAC,UAAU,iBAAiB,KAAK,CAAC,UAAU;;;;;;;;;;SAUhE,KAAK,CAAC,UAAU;;YAEb,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS;eAChC,KAAK,CAAC,UAAU,QAAQ,KAAK,CAAC,UAAU;kBACrC,KAAK,CAAC,UAAU,WAAW,KAAK,CAAC,UAAU;;;;UAInD,KAAK,CAAC,UAAU;;;;;kBAKR,KAAK,CAAC,UAAU,iBAAiB,KAAK,CAAC,UAAU;+BACpC,KAAK,CAAC,UAAU;;0BAErB,KAAK,CAAC,UAAU,iCAAiC,KAAK,CAAC,UAAU;;;;CAI1F,CAAC;AACF,CAAC"}