@carlonicora/nextjs-jsonapi 1.16.0 → 1.18.0

package/src/shadcnui/ui/toggle.tsx

@@ -1,39 +1,44 @@
-"use client";
+"use client"
 
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "../../utils/cn";
+import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-md text-xs font-medium transition-all [&_svg:not([class*='size-'])]:size-3.5 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+        outline: "border-input hover:bg-muted border bg-transparent",
       },
       size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
+        default: "h-7 min-w-7 px-2",
+        sm: "h-6 min-w-6 rounded-[min(var(--radius-md),8px)] px-1.5 text-[0.625rem] [&_svg:not([class*='size-'])]:size-3",
+        lg: "h-8 min-w-8 px-2",
       },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
     },
-  },
-);
+  }
+)
 
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props} />
-));
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
 
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };
+export { Toggle, toggleVariants }

package/src/shadcnui/ui/tooltip.tsx

@@ -1,26 +1,23 @@
 "use client"
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
 
-import { cn } from "../../utils/cn"
+import { cn } from "@/lib/utils"
 
 function TooltipProvider({
-  delayDuration = 0,
+  delay = 0,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+}: TooltipPrimitive.Provider.Props) {
   return (
     <TooltipPrimitive.Provider
       data-slot="tooltip-provider"
-      delayDuration={delayDuration}
+      delay={delay}
       {...props}
     />
   )
 }
 
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
   return (
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
@@ -28,32 +25,44 @@ function Tooltip({
   )
 }
 
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
 }
 
 function TooltipContent({
   className,
-  sideOffset = 0,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
   children,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
   return (
     <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
         sideOffset={sideOffset}
-        className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
-        )}
-        {...props}
+        className="isolate z-50"
       >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-md bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>
   )
 }

package/src/testing/factories/createMockApiData.ts

@@ -0,0 +1,143 @@
+import { ApiDataInterface } from "../../core/interfaces/ApiDataInterface";
+
+export interface CreateMockApiDataOptions {
+  type: string;
+  id?: string;
+  attributes?: Record<string, any>;
+  relationships?: Record<string, any>;
+  included?: any[];
+  createdAt?: Date;
+  updatedAt?: Date;
+  self?: string;
+}
+
+/**
+ * Creates a mock ApiDataInterface object for testing.
+ *
+ * @example
+ * ```ts
+ * import { createMockApiData } from '@carlonicora/nextjs-jsonapi/testing';
+ *
+ * const mockArticle = createMockApiData({
+ *   type: 'articles',
+ *   id: '1',
+ *   attributes: { title: 'Test Article', body: 'Content here' },
+ * });
+ * ```
+ *
+ * @example With relationships
+ * ```ts
+ * const mockArticle = createMockApiData({
+ *   type: 'articles',
+ *   id: '1',
+ *   attributes: { title: 'Test' },
+ *   relationships: {
+ *     author: { data: { type: 'users', id: '42' } },
+ *   },
+ * });
+ * ```
+ */
+export function createMockApiData(options: CreateMockApiDataOptions): ApiDataInterface {
+  const {
+    type,
+    id = `mock-${type}-${Math.random().toString(36).substring(7)}`,
+    attributes = {},
+    relationships = {},
+    included = [],
+    createdAt = new Date(),
+    updatedAt = new Date(),
+    self,
+  } = options;
+
+  const jsonApiData = {
+    type,
+    id,
+    attributes: {
+      ...attributes,
+      createdAt: createdAt.toISOString(),
+      updatedAt: updatedAt.toISOString(),
+    },
+    relationships,
+  };
+
+  const mockData: ApiDataInterface = {
+    get included() {
+      return included;
+    },
+    get type() {
+      return type;
+    },
+    get id() {
+      return id;
+    },
+    get createdAt() {
+      return createdAt;
+    },
+    get updatedAt() {
+      return updatedAt;
+    },
+    get self() {
+      return self;
+    },
+    get jsonApi() {
+      return jsonApiData;
+    },
+    generateApiUrl: (params?: any) => {
+      const baseUrl = `/${type}/${id}`;
+      if (params) {
+        const searchParams = new URLSearchParams(params);
+        return `${baseUrl}?${searchParams.toString()}`;
+      }
+      return baseUrl;
+    },
+    dehydrate: () => ({
+      jsonApi: jsonApiData,
+      included,
+      allData: [jsonApiData],
+    }),
+    rehydrate: function (data: any) {
+      return this;
+    },
+    createJsonApi: (data: any) => ({
+      type,
+      id,
+      attributes: data,
+    }),
+  };
+
+  // Add attribute accessors to the mock object
+  Object.keys(attributes).forEach((key) => {
+    Object.defineProperty(mockData, key, {
+      get: () => attributes[key],
+      enumerable: true,
+    });
+  });
+
+  return mockData;
+}
+
+/**
+ * Creates an array of mock ApiDataInterface objects.
+ *
+ * @example
+ * ```ts
+ * import { createMockApiDataList } from '@carlonicora/nextjs-jsonapi/testing';
+ *
+ * const mockArticles = createMockApiDataList('articles', 5, (index) => ({
+ *   title: `Article ${index + 1}`,
+ * }));
+ * ```
+ */
+export function createMockApiDataList(
+  type: string,
+  count: number,
+  attributesFactory?: (index: number) => Record<string, any>,
+): ApiDataInterface[] {
+  return Array.from({ length: count }, (_, index) =>
+    createMockApiData({
+      type,
+      id: `${index + 1}`,
+      attributes: attributesFactory?.(index) ?? {},
+    }),
+  );
+}

package/src/testing/factories/createMockModule.ts

@@ -0,0 +1,32 @@
+import { ApiRequestDataTypeInterface } from "../../core/interfaces/ApiRequestDataTypeInterface";
+
+export interface CreateMockModuleOptions {
+  name: string;
+  cache?: string;
+  inclusions?: ApiRequestDataTypeInterface["inclusions"];
+}
+
+/**
+ * Creates a mock module definition for testing.
+ *
+ * @example
+ * ```ts
+ * import { createMockModule } from '@carlonicora/nextjs-jsonapi/testing';
+ *
+ * const mockArticleModule = createMockModule({ name: 'articles' });
+ * ```
+ */
+export function createMockModule(options: CreateMockModuleOptions): ApiRequestDataTypeInterface {
+  // Create a mock model class
+  class MockModel {
+    id = "mock-id";
+    type = options.name;
+  }
+
+  return {
+    name: options.name,
+    cache: options.cache,
+    inclusions: options.inclusions,
+    model: MockModel,
+  };
+}

package/src/testing/factories/createMockResponse.ts

@@ -0,0 +1,88 @@
+import { ApiResponseInterface } from "../../core/interfaces/ApiResponseInterface";
+import { ApiDataInterface } from "../../core/interfaces/ApiDataInterface";
+
+export interface CreateMockResponseOptions {
+  data?: ApiDataInterface | ApiDataInterface[] | null;
+  ok?: boolean;
+  response?: number;
+  error?: string;
+  meta?: Record<string, any>;
+  self?: string;
+  next?: string;
+  prev?: string;
+}
+
+/**
+ * Creates a mock API response for testing.
+ *
+ * @example
+ * ```ts
+ * import { createMockResponse, createMockApiData } from '@carlonicora/nextjs-jsonapi/testing';
+ *
+ * const mockData = createMockApiData({ type: 'articles', id: '1' });
+ * const response = createMockResponse({ data: mockData, ok: true });
+ * ```
+ *
+ * @example With pagination
+ * ```ts
+ * const response = createMockResponse({
+ *   data: [mockData],
+ *   ok: true,
+ *   next: '/articles?page=2',
+ *   prev: '/articles?page=0',
+ * });
+ * ```
+ */
+export function createMockResponse(options: CreateMockResponseOptions = {}): ApiResponseInterface {
+  const {
+    data = null,
+    ok = true,
+    response = ok ? 200 : 500,
+    error = ok ? "" : "Error",
+    meta,
+    self,
+    next,
+    prev,
+  } = options;
+
+  const mockResponse: ApiResponseInterface = {
+    ok,
+    response,
+    data: data as ApiDataInterface | ApiDataInterface[],
+    error,
+    meta,
+    self,
+    next,
+    prev,
+  };
+
+  // Add pagination methods if next/prev provided
+  if (next) {
+    mockResponse.nextPage = async () => createMockResponse({ ...options, next: undefined, prev: self });
+  }
+
+  if (prev) {
+    mockResponse.prevPage = async () => createMockResponse({ ...options, prev: undefined, next: self });
+  }
+
+  return mockResponse;
+}
+
+/**
+ * Creates a mock error response for testing error scenarios.
+ *
+ * @example
+ * ```ts
+ * import { createMockErrorResponse } from '@carlonicora/nextjs-jsonapi/testing';
+ *
+ * const errorResponse = createMockErrorResponse(404, 'Not Found');
+ * ```
+ */
+export function createMockErrorResponse(statusCode: number, errorMessage: string): ApiResponseInterface {
+  return createMockResponse({
+    ok: false,
+    response: statusCode,
+    error: errorMessage,
+    data: null,
+  });
+}

package/src/testing/factories/createMockService.ts

@@ -0,0 +1,76 @@
+import { vi, type Mock } from "vitest";
+import { ApiResponseInterface } from "../../core/interfaces/ApiResponseInterface";
+import { createMockResponse } from "./createMockResponse";
+
+export type MockApiMethod = Mock<(...args: any[]) => Promise<ApiResponseInterface>>;
+
+export interface MockService {
+  get: MockApiMethod;
+  post: MockApiMethod;
+  put: MockApiMethod;
+  patch: MockApiMethod;
+  delete: MockApiMethod;
+}
+
+export interface CreateMockServiceOptions {
+  defaultResponse?: ApiResponseInterface;
+}
+
+/**
+ * Creates a mock service with Vitest mock functions for all HTTP methods.
+ *
+ * @example
+ * ```ts
+ * import { createMockService, createMockResponse } from '@carlonicora/nextjs-jsonapi/testing';
+ *
+ * const mockService = createMockService();
+ * mockService.get.mockResolvedValue(createMockResponse({ data: mockData }));
+ *
+ * // Use in test
+ * expect(mockService.get).toHaveBeenCalled();
+ * ```
+ *
+ * @example With default response
+ * ```ts
+ * const mockService = createMockService({
+ *   defaultResponse: createMockResponse({ ok: true, data: [] }),
+ * });
+ * ```
+ */
+export function createMockService(options: CreateMockServiceOptions = {}): MockService {
+  const defaultResponse = options.defaultResponse ?? createMockResponse({ ok: true });
+
+  return {
+    get: vi.fn().mockResolvedValue(defaultResponse),
+    post: vi.fn().mockResolvedValue(defaultResponse),
+    put: vi.fn().mockResolvedValue(defaultResponse),
+    patch: vi.fn().mockResolvedValue(defaultResponse),
+    delete: vi.fn().mockResolvedValue(defaultResponse),
+  };
+}
+
+/**
+ * Creates a mock service that returns errors for all methods.
+ *
+ * @example
+ * ```ts
+ * import { createMockErrorService } from '@carlonicora/nextjs-jsonapi/testing';
+ *
+ * const errorService = createMockErrorService(500, 'Internal Server Error');
+ * ```
+ */
+export function createMockErrorService(statusCode: number = 500, errorMessage: string = "Error"): MockService {
+  const errorResponse = createMockResponse({
+    ok: false,
+    response: statusCode,
+    error: errorMessage,
+  });
+
+  return {
+    get: vi.fn().mockResolvedValue(errorResponse),
+    post: vi.fn().mockResolvedValue(errorResponse),
+    put: vi.fn().mockResolvedValue(errorResponse),
+    patch: vi.fn().mockResolvedValue(errorResponse),
+    delete: vi.fn().mockResolvedValue(errorResponse),
+  };
+}

package/src/testing/index.ts

@@ -0,0 +1,56 @@
+/**
+ * Test utilities for @carlonicora/nextjs-jsonapi
+ *
+ * Import from '@carlonicora/nextjs-jsonapi/testing'
+ *
+ * @example
+ * ```ts
+ * import {
+ *   MockJsonApiProvider,
+ *   renderWithProviders,
+ *   createMockApiData,
+ *   createMockResponse,
+ *   createMockModule,
+ *   createMockService,
+ *   jsonApiMatchers,
+ *   extendExpectWithJsonApiMatchers,
+ * } from '@carlonicora/nextjs-jsonapi/testing';
+ * ```
+ */
+
+// Providers
+export { MockJsonApiProvider, defaultMockConfig, type MockJsonApiProviderProps } from "./providers/MockJsonApiProvider";
+
+// Factories
+export { createMockModule, type CreateMockModuleOptions } from "./factories/createMockModule";
+
+export {
+  createMockResponse,
+  createMockErrorResponse,
+  type CreateMockResponseOptions,
+} from "./factories/createMockResponse";
+
+export {
+  createMockService,
+  createMockErrorService,
+  type MockService,
+  type MockApiMethod,
+  type CreateMockServiceOptions,
+} from "./factories/createMockService";
+
+export { createMockApiData, createMockApiDataList, type CreateMockApiDataOptions } from "./factories/createMockApiData";
+
+// Matchers
+export { jsonApiMatchers, extendExpectWithJsonApiMatchers } from "./matchers/jsonApiMatchers";
+
+// Utilities
+export {
+  renderWithProviders,
+  render,
+  screen,
+  waitFor,
+  fireEvent,
+  within,
+  userEvent,
+  type RenderWithProvidersOptions,
+} from "./utils/renderWithProviders";