@carlonicora/nextjs-jsonapi 1.112.0 → 1.113.0

package/dist/scripts/generate-web-module/utils/i18n-updater.js

@@ -86,45 +86,44 @@ function updateI18n(data, webBasePath, language = "en", dryRun = false) {
         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 entities
-        if (entitiesUpdated) {
-            if (dryRun) {
-                return {
-                    success: true,
-                    message: `[DRY RUN] Module ${names.camelCase} exists, would add entities.${lowercasePluralKey}`,
-                    alreadyExists: true,
-                };
+    // Additively merge this module's feature keys (fields / relationships /
+    // sections), FILLING missing keys without overwriting existing translations.
+    // Handles a brand-new module AND an existing-but-incomplete block (e.g. one
+    // first generated before its fields were known — which previously stayed an
+    // empty `{ fields: {}, relationships: {} }` skeleton forever).
+    const mergeMissing = (target, source) => {
+        const out = target && typeof target === "object" && !Array.isArray(target) ? { ...target } : {};
+        for (const k of Object.keys(source)) {
+            const v = source[k];
+            if (v && typeof v === "object" && !Array.isArray(v)) {
+                out[k] = mergeMissing(out[k], v);
+            }
+            else if (out[k] === undefined) {
+                out[k] = v;
             }
-            // 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 entities.${lowercasePluralKey}`,
-                alreadyExists: true,
-            };
         }
+        return out;
+    };
+    if (!messages.features) {
+        messages.features = {};
+    }
+    const moduleBlock = moduleMessages.features[i18nKeys.moduleName];
+    const beforeFeatures = JSON.stringify(messages.features[lowercaseModuleName] ?? null);
+    messages.features[lowercaseModuleName] = mergeMissing(messages.features[lowercaseModuleName], moduleBlock);
+    const featuresUpdated = JSON.stringify(messages.features[lowercaseModuleName]) !== beforeFeatures;
+    if (!entitiesUpdated && !featuresUpdated) {
         return {
             success: true,
-            message: `Module ${names.camelCase} already exists in messages/${language}.json`,
+            message: `Module ${names.camelCase} already up to date in messages/${language}.json`,
             alreadyExists: true,
         };
     }
-    // Add to features section (new module)
-    if (!messages.features) {
-        messages.features = {};
-    }
-    messages.features[lowercaseModuleName] = moduleMessages.features[i18nKeys.moduleName];
     if (dryRun) {
         return {
             success: true,
             message: `[DRY RUN] Would update messages/${language}.json with ${names.camelCase} translations`,
         };
     }
-    // Write updated content with proper formatting
     const updatedContent = JSON.stringify(messages, null, 2);
     fs.writeFileSync(messagesPath, updatedContent, "utf-8");
     return {

package/dist/scripts/generate-web-module/utils/i18n-updater.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "1.112.0",
+  "version": "1.113.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/scripts/generate-web-module/__tests__/selector.spec.ts

@@ -2,23 +2,28 @@ import { describe, it, expect } from "vitest";
 import { makeFrontendData } from "./fixtures";
 import { generateSelectorTemplate } from "../templates/components/selector.template";
 
-describe("selector template — combobox style", () => {
-  it("uses Button combobox trigger + Command primitives + Loader2", () => {
+describe("selector template — UserSelector-style UI", () => {
+  it("uses the input-styled trigger + custom search Input (mirrors UserSelector)", () => {
     const out = generateSelectorTemplate(makeFrontendData());
-    expect(out).toContain('role="combobox"');
-    expect(out).toContain("ChevronsUpDown");
-    expect(out).toContain("CommandInput");
-    expect(out).toContain("CommandEmpty");
-    expect(out).toContain("CommandGroup");
-    expect(out).toContain("Loader2");
-    expect(out).toContain("w-(--radix-popover-trigger-width) p-0");
+    expect(out).toContain("CircleX");
+    expect(out).toContain("SearchIcon");
+    expect(out).toContain("RefreshCwIcon");
+    expect(out).toContain("bg-input/20");
+    expect(out).toContain("w-(--anchor-width)");
+    expect(out).toContain("ui.search.placeholder");
+    // custom <Input> search, not the cmdk CommandInput
+    expect(out).toContain("<Input");
+    expect(out).toContain("CommandList");
+    expect(out).toContain("CommandItem");
   });
 
-  it("drops the legacy bespoke styling", () => {
+  it("drops the legacy Button-combobox styling", () => {
     const out = generateSelectorTemplate(makeFrontendData());
-    expect(out).not.toContain("CircleX");
-    expect(out).not.toContain("RefreshCwIcon");
-    expect(out).not.toContain("SearchIcon");
-    expect(out).not.toContain("bg-input/20");
+    expect(out).not.toContain('role="combobox"');
+    expect(out).not.toContain("ChevronsUpDown");
+    expect(out).not.toContain("CommandInput");
+    expect(out).not.toContain("CommandEmpty");
+    expect(out).not.toContain("CommandGroup");
+    expect(out).not.toContain("w-(--radix-popover-trigger-width)");
   });
 });

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

@@ -53,7 +53,7 @@ export function ${names.pascalCase}Content({ ${camel} }: ${names.pascalCase}Cont
       .map(
         (field) => `      <div className="flex flex-col gap-y-3">
         <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
-          {t(\`features.${names.camelCase}.fields.${field.name}.label\`)}
+          {t(\`features.${names.camelCase.toLowerCase()}.fields.${field.name}.label\`)}
         </h3>
         <Card className="flex w-full flex-col p-4">
           <BlockNoteEditorContainer id={${camel}.id} type="${camel}" initialContent={${camel}.${field.name}} />
@@ -65,7 +65,7 @@ export function ${names.pascalCase}Content({ ${camel} }: ${names.pascalCase}Cont
     const attributesBlock = hasAttributes
       ? `\n      <div className="flex flex-col gap-y-3">
         <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
-          {t(\`features.${names.camelCase}.sections.details\`)}
+          {t(\`features.${names.camelCase.toLowerCase()}.sections.details\`)}
         </h3>
         <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
 ${attributeElements}
@@ -113,7 +113,7 @@ export function ${names.pascalCase}Content({ ${camel} }: ${names.pascalCase}Cont
     <div className="flex flex-col gap-y-8">
       <div className="flex flex-col gap-y-3">
         <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
-          {t(\`features.${names.camelCase}.sections.details\`)}
+          {t(\`features.${names.camelCase.toLowerCase()}.sections.details\`)}
         </h3>
         <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
 ${attributeElements}
@@ -145,17 +145,17 @@ function generateAttributeElements(data: FrontendTemplateData): string {
   displayableFields.forEach((field) => {
     if (field.type === "string") {
       elements.push(`          <AttributeElement
-            title={t(\`features.${names.camelCase}.fields.${field.name}.label\`)}
+            title={t(\`features.${names.camelCase.toLowerCase()}.fields.${field.name}.label\`)}
             value={${camel}.${field.name}}
           />`);
     } else if (field.type === "boolean") {
       elements.push(`          <AttributeElement
-            title={t(\`features.${names.camelCase}.fields.${field.name}.label\`)}
+            title={t(\`features.${names.camelCase.toLowerCase()}.fields.${field.name}.label\`)}
             value={${camel}.${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\`)}
+            title={t(\`features.${names.camelCase.toLowerCase()}.fields.${field.name}.label\`)}
             value={${camel}.${field.name}?.toString()}
           />`);
     }
@@ -170,7 +170,7 @@ function generateAttributeElements(data: FrontendTemplateData): string {
         const propName = toCamelCase(rel.alias || rel.variant || rel.name);
         elements.push(`          {${camel}.${propName} && (
             <AttributeElement
-              title={t(\`generic.relationships.${propName}.label\`)}
+              title={t(\`features.${names.camelCase.toLowerCase()}.relationships.${propName.toLowerCase()}.label\`)}
               value={${camel}.${propName}.${displayProp}}
             />
           )}`);

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

@@ -2,6 +2,10 @@
  * Selector Template
  *
  * Generates {Module}Selector.tsx searchable combobox component.
+ *
+ * UI mirrors the framework's UserSelector (packages/.../features/user/components/forms/UserSelector.tsx):
+ * an input-styled trigger, a CircleX clear affordance, an `--anchor-width` popover, and a custom
+ * search Input with a SearchIcon + spinner/clear — minus the user-specific avatar.
  */
 
 import { FrontendTemplateData } from "../../types/template-data.interface";
@@ -21,25 +25,21 @@ export function generateSelectorTemplate(data: FrontendTemplateData): string {
   return `"use client";
 
 import {
-  Button,
   Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
   CommandItem,
   CommandList,
   FormFieldWrapper,
+  Input,
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@carlonicora/nextjs-jsonapi/components";
 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 { DataListRetriever, useDataListRetriever, useDebounce } from "@carlonicora/nextjs-jsonapi/client";
 import { Modules } from "@carlonicora/nextjs-jsonapi/core";
 
-import { ChevronsUpDown, Loader2, XIcon } from "lucide-react";
+import { CircleX, RefreshCwIcon, SearchIcon, XIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useRef, useState } from "react";
 
@@ -121,55 +121,62 @@ export default function ${names.pascalCase}Selector({
           <Popover open={open} onOpenChange={setOpen} modal={true}>
             <div className="flex w-full flex-row items-center justify-between">
               <PopoverTrigger className="w-full">
-                <Button
-                  variant="outline"
-                  role="combobox"
-                  aria-expanded={open}
-                  className="h-auto min-h-10 w-full justify-between px-3 py-2"
-                >
-                  <span className={field.value ? "" : "text-muted-foreground"}>
-                    {field.value?.name ?? placeholder ?? t(\`generic.search.placeholder\`, { type: t(\`entities.${i18nKey}\`, { count: 1 }) })}
-                  </span>
-                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                </Button>
+                <div className="flex w-full flex-row items-center justify-start rounded-md">
+                  {field.value ? (
+                    <div className="bg-input/20 dark:bg-input/30 border-input flex h-7 w-full flex-row items-center justify-start rounded-md border px-2 py-0.5 text-sm md:text-xs/relaxed">
+                      <span>{field.value?.name ?? ""}</span>
+                    </div>
+                  ) : (
+                    <div className="bg-input/20 dark:bg-input/30 border-input text-muted-foreground flex h-7 w-full flex-row items-center justify-start rounded-md border px-2 py-0.5 text-sm md:text-xs/relaxed">
+                      {placeholder ?? t(\`ui.search.placeholder\`, { type: t(\`entities.${i18nKey}\`, { count: 1 }) })}
+                    </div>
+                  )}
+                </div>
               </PopoverTrigger>
               {field.value && (
-                <XIcon
-                  className="text-muted-foreground hover:text-destructive ml-2 h-5 w-5 cursor-pointer"
+                <CircleX
+                  className="text-muted hover:text-destructive ml-2 h-4 w-4 shrink-0 cursor-pointer"
                   onClick={() => set${names.pascalCase}()}
                 />
               )}
             </div>
-            <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+            <PopoverContent align="start" className="w-(--anchor-width)">
               <Command shouldFilter={false}>
-                <CommandInput
-                  placeholder={t(\`generic.search.placeholder\`, { type: t(\`entities.${i18nKey}\`, { count: 1 }) })}
-                  value={searchTerm}
-                  onValueChange={setSearchTerm}
-                />
-                <CommandList>
-                  {isSearching && (
-                    <div className="flex items-center justify-center py-6">
-                      <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
-                    </div>
-                  )}
-                  {!isSearching && data.data && data.data.length === 0 && (
-                    <CommandEmpty>{t(\`generic.search.no_results\`)}</CommandEmpty>
-                  )}
-                  {!isSearching && data.data && data.data.length > 0 && (
-                    <CommandGroup>
-                      {(data.data as ${names.pascalCase}Interface[]).map((${names.camelCase}: ${names.pascalCase}Interface) => (
-                        <CommandItem
-                          key={${names.camelCase}.id}
-                          value={${names.camelCase}.id}
-                          onSelect={() => set${names.pascalCase}(${names.camelCase})}
-                          className="hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent cursor-pointer"
-                        >
-                          {${names.camelCase}.${displayProp}}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
+                <div className="relative mb-2 w-full">
+                  <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
+                  <Input
+                    placeholder={t(\`ui.search.placeholder\`, { type: t(\`entities.${i18nKey}\`, { count: 1 }) })}
+                    type="text"
+                    className="w-full pr-8 pl-8"
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    value={searchTerm}
+                  />
+                  {isSearching ? (
+                    <RefreshCwIcon className="text-muted-foreground absolute top-2.5 right-2.5 h-4 w-4 animate-spin" />
+                  ) : searchTermRef.current ? (
+                    <XIcon
+                      className={\`absolute top-2.5 right-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 hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
+                        key={${names.camelCase}.id}
+                        onSelect={() => set${names.pascalCase}(${names.camelCase})}
+                      >
+                        <span className="">{${names.camelCase}.${displayProp}}</span>
+                      </CommandItem>
+                    ))}
                 </CommandList>
               </Command>
             </PopoverContent>

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

@@ -42,7 +42,7 @@ ${featureImport}
 export const ${names.pascalCase}Module = (factory: ModuleFactory) =>
   factory({
     pageUrl: "/${names.pluralKebab}",
-    name: "${names.pluralCamel}",
+    name: "${endpoint}",
     model: ${names.pascalCase},
     moduleId: "${moduleId}",
     icon: ${DEFAULT_MODULE_ICON},

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

@@ -205,7 +205,7 @@ function generateFieldColumnEntries(data: FrontendTemplateData): string {
       entries.push(`    [${names.pascalCase}Fields.${key}]: () => ({
       id: "${key}",
       accessorKey: "${key}",
-      header: t(\`generic.relationships.${key}.label\`),
+      header: t(\`features.${names.camelCase.toLowerCase()}.relationships.${key.toLowerCase()}.label\`),
       cell: ({ row }: { row: TableContent<${names.pascalCase}Interface> }) => {
         const ${names.camelCase}: ${names.pascalCase}Interface = row.original.jsonApiData;
         return <span>{${accessor}}</span>;

package/scripts/generate-web-module/transformers/i18n-generator.ts

@@ -88,6 +88,7 @@ export function buildI18nMessages(i18nKeys: I18nKeySet): Record<string, any> {
       [i18nKeys.moduleName]: {
         fields: i18nKeys.fields,
         relationships: i18nKeys.relationships,
+        sections: { details: "Details" },
       },
     },
     entities: {

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

@@ -68,44 +68,40 @@ export function updateI18n(
     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 entities
-    if (entitiesUpdated) {
-      if (dryRun) {
-        return {
-          success: true,
-          message: `[DRY RUN] Module ${names.camelCase} exists, would add entities.${lowercasePluralKey}`,
-          alreadyExists: true,
-        };
+  // Additively merge this module's feature keys (fields / relationships /
+  // sections), FILLING missing keys without overwriting existing translations.
+  // Handles a brand-new module AND an existing-but-incomplete block (e.g. one
+  // first generated before its fields were known — which previously stayed an
+  // empty `{ fields: {}, relationships: {} }` skeleton forever).
+  const mergeMissing = (target: Record<string, any>, source: Record<string, any>): Record<string, any> => {
+    const out = target && typeof target === "object" && !Array.isArray(target) ? { ...target } : {};
+    for (const k of Object.keys(source)) {
+      const v = source[k];
+      if (v && typeof v === "object" && !Array.isArray(v)) {
+        out[k] = mergeMissing(out[k], v);
+      } else if (out[k] === undefined) {
+        out[k] = v;
       }
-
-      // 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 entities.${lowercasePluralKey}`,
-        alreadyExists: true,
-      };
     }
+    return out;
+  };
+
+  if (!messages.features) {
+    messages.features = {};
+  }
+  const moduleBlock = moduleMessages.features[i18nKeys.moduleName];
+  const beforeFeatures = JSON.stringify(messages.features[lowercaseModuleName] ?? null);
+  messages.features[lowercaseModuleName] = mergeMissing(messages.features[lowercaseModuleName], moduleBlock);
+  const featuresUpdated = JSON.stringify(messages.features[lowercaseModuleName]) !== beforeFeatures;
 
+  if (!entitiesUpdated && !featuresUpdated) {
     return {
       success: true,
-      message: `Module ${names.camelCase} already exists in messages/${language}.json`,
+      message: `Module ${names.camelCase} already up to date in messages/${language}.json`,
       alreadyExists: true,
     };
   }
 
-  // Add to features section (new module)
-  if (!messages.features) {
-    messages.features = {};
-  }
-  messages.features[lowercaseModuleName] = moduleMessages.features[i18nKeys.moduleName];
-
   if (dryRun) {
     return {
       success: true,
@@ -113,7 +109,6 @@ export function updateI18n(
     };
   }
 
-  // Write updated content with proper formatting
   const updatedContent = JSON.stringify(messages, null, 2);
   fs.writeFileSync(messagesPath, updatedContent, "utf-8");
 

package/src/components/tables/ContentListTable.tsx

@@ -47,6 +47,7 @@ type ContentListTableProps = {
   defaultExpanded?: boolean | ExpandedState;
   fullWidth?: boolean;
   groupBy?: string;
+  emptyState?: ReactNode;
 };
 
 export const ContentListTable = memo(function ContentListTable(props: ContentListTableProps) {
@@ -219,7 +220,7 @@ export const ContentListTable = memo(function ContentListTable(props: ContentLis
             ) : (
               <TableRow>
                 <TableCell colSpan={tableColumns.length} className="h-24 text-center">
-                  No results.
+                  {props.emptyState ?? "No results."}
                 </TableCell>
               </TableRow>
             )}

package/src/shadcnui/index.ts

@@ -16,10 +16,12 @@ export * from "./ui/checkbox";
 export * from "./ui/collapsible";
 export * from "./ui/combobox";
 export * from "./ui/command";
+export * from "./ui/confirm-dialog";
 export * from "./ui/context-menu";
 export * from "./ui/dialog";
 export * from "./ui/drawer";
 export * from "./ui/dropdown-menu";
+export * from "./ui/empty-state";
 export * from "./ui/field";
 export * from "./ui/form";
 export * from "./ui/hover-card";
@@ -40,6 +42,7 @@ export * from "./ui/sidebar";
 export * from "./ui/skeleton";
 export * from "./ui/slider";
 export * from "./ui/sonner";
+export * from "./ui/spinner";
 export * from "./ui/switch";
 export * from "./ui/table";
 export * from "./ui/tabs";

package/src/shadcnui/ui/__tests__/confirm-dialog.test.tsx

@@ -0,0 +1,46 @@
+// packages/nextjs-jsonapi/src/shadcnui/ui/__tests__/confirm-dialog.test.tsx
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ConfirmDialog } from "../confirm-dialog";
+
+describe("ConfirmDialog", () => {
+  it("renders title/description and calls onConfirm then closes", async () => {
+    const onConfirm = vi.fn();
+    const onOpenChange = vi.fn();
+    render(
+      <ConfirmDialog
+        open
+        onOpenChange={onOpenChange}
+        title="Reveal plot secrets?"
+        description="Spoilers ahead."
+        confirmLabel="Reveal"
+        cancelLabel="Keep hidden"
+        destructive
+        onConfirm={onConfirm}
+      />,
+    );
+    expect(screen.getByText("Reveal plot secrets?")).toBeInTheDocument();
+    expect(screen.getByText("Spoilers ahead.")).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Reveal" }));
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("cancel closes without confirming", async () => {
+    const onConfirm = vi.fn();
+    const onOpenChange = vi.fn();
+    render(
+      <ConfirmDialog
+        open
+        onOpenChange={onOpenChange}
+        title="t"
+        confirmLabel="Yes"
+        cancelLabel="No"
+        onConfirm={onConfirm}
+      />,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "No" }));
+    expect(onConfirm).not.toHaveBeenCalled();
+  });
+});

package/src/shadcnui/ui/__tests__/empty-state.test.tsx

@@ -0,0 +1,26 @@
+// packages/nextjs-jsonapi/src/shadcnui/ui/__tests__/empty-state.test.tsx
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { InboxIcon } from "lucide-react";
+import { EmptyState } from "../empty-state";
+
+describe("EmptyState", () => {
+  it("renders title, description and action", () => {
+    render(
+      <EmptyState
+        icon={InboxIcon}
+        title="No games yet"
+        description="Create your first game."
+        action={<button type="button">New game</button>}
+      />,
+    );
+    expect(screen.getByText("No games yet")).toBeInTheDocument();
+    expect(screen.getByText("Create your first game.")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "New game" })).toBeInTheDocument();
+  });
+
+  it("renders without optional parts", () => {
+    render(<EmptyState title="Empty" />);
+    expect(screen.getByText("Empty")).toBeInTheDocument();
+  });
+});

package/src/shadcnui/ui/__tests__/spinner.test.tsx

@@ -0,0 +1,18 @@
+// packages/nextjs-jsonapi/src/shadcnui/ui/__tests__/spinner.test.tsx
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Spinner } from "../spinner";
+
+describe("Spinner", () => {
+  it("renders a status indicator with animate-spin", () => {
+    render(<Spinner />);
+    const spinner = screen.getByRole("status");
+    expect(spinner).toHaveClass("animate-spin");
+    expect(spinner).toHaveClass("size-4");
+  });
+
+  it("applies the size variant", () => {
+    render(<Spinner size="lg" />);
+    expect(screen.getByRole("status")).toHaveClass("size-8");
+  });
+});