@carlonicora/nextjs-jsonapi 1.15.0 → 1.17.0

package/src/features/feature/components/forms/FormFeatures.tsx

@@ -1,15 +1,6 @@
 "use client";
 
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  Checkbox,
-  FormLabel,
-  FormMessage,
-} from "../../../../shadcnui";
-import { ModuleInterface } from "../../../module";
+import { Checkbox, FormLabel, FormMessage, ScrollArea } from "../../../../shadcnui";
 import { FeatureInterface } from "../../data";
 
 type FormFeaturesProps = {
@@ -17,88 +8,35 @@ type FormFeaturesProps = {
   name?: string;
   features: FeatureInterface[];
   featureField?: string;
-  moduleField?: string;
 };
 
-export function FormFeatures({
-  form,
-  name,
-  features,
-  featureField = "featureIds",
-  moduleField = "moduleIds",
-}: FormFeaturesProps) {
+export function FormFeatures({ form, name, features, featureField = "featureIds" }: FormFeaturesProps) {
   const selectedFeatures: string[] = form.watch(featureField);
-  const selectedModules: string[] = form.watch(moduleField);
 
   const toggleFeature = (feature: FeatureInterface, checked: boolean) => {
     let newFeatureIds = [...selectedFeatures];
-    let newModuleIds = [...selectedModules];
 
     if (checked) {
       if (!newFeatureIds.includes(feature.id)) {
         newFeatureIds.push(feature.id);
       }
-      feature.modules.forEach((module) => {
-        if (!newModuleIds.includes(module.id)) {
-          newModuleIds.push(module.id);
-        }
-      });
     } else {
       newFeatureIds = newFeatureIds.filter((id) => id !== feature.id);
-      feature.modules.forEach((module) => {
-        newModuleIds = newModuleIds.filter((id) => id !== module.id);
-      });
     }
     form.setValue(featureField, newFeatureIds);
-    form.setValue(moduleField, newModuleIds);
   };
 
-  const toggleModule = (feature: FeatureInterface, module: ModuleInterface, checked: boolean) => {
-    const modulesForFeature = feature.modules.map((m) => m.id);
-    let newModuleIds = [...selectedModules];
-
-    if (checked) {
-      if (!selectedFeatures.includes(feature.id)) {
-        newModuleIds = newModuleIds.filter((id) => !modulesForFeature.includes(id));
-        newModuleIds.push(module.id);
-        form.setValue(featureField, [...selectedFeatures, feature.id]);
-      } else {
-        if (!newModuleIds.includes(module.id)) {
-          newModuleIds.push(module.id);
-        }
-      }
-    } else {
-      newModuleIds = newModuleIds.filter((id) => id !== module.id);
-      const remaining = feature.modules.filter((m) => newModuleIds.includes(m.id));
-      if (remaining.length === 0) {
-        form.setValue(
-          featureField,
-          selectedFeatures.filter((id) => id !== feature.id),
-        );
-      }
-    }
-    form.setValue(moduleField, newModuleIds);
-  };
-
-  const isFeatureChecked = (feature: FeatureInterface) =>
-    selectedFeatures.includes(feature.id) || feature.modules.every((module) => selectedModules.includes(module.id));
+  const isFeatureChecked = (feature: FeatureInterface) => selectedFeatures.includes(feature.id);
 
   return (
     <div className="flex w-full flex-col">
-      {name && <h2 className="mb-5 font-semibold">{name}</h2>}
-      {features.map((feature) => (
-        <Accordion
-          key={feature.id}
-          type="single"
-          collapsible
-          // className={`w-full p-0 ${feature.modules.filter((module) => !module.isCore).length === 0 ? "border-t" : ""}`}
-          className={`w-full p-0`}
-        >
-          <AccordionItem value={feature.id} className="p-0">
-            <div
-              className={`flex items-center justify-between p-0 ${feature.modules.filter((module) => !module.isCore).length === 0 ? "py-4" : ""}`}
-            >
-              <div className="flex items-center" onClick={(e) => e.stopPropagation()}>
+      {name && <h2 className="mb-4 border-b text-lg font-semibold">{name}</h2>}
+      <ScrollArea className="h-[40vh]">
+        <div className="flex flex-col gap-y-2 pr-4">
+          {features
+            .filter((feature) => !feature.isCore)
+            .map((feature) => (
+              <div key={feature.id} className="flex items-center">
                 <Checkbox
                   id={feature.id}
                   checked={isFeatureChecked(feature)}
@@ -110,40 +48,9 @@ export function FormFeatures({
                   {feature.name}
                 </FormLabel>
               </div>
-              {feature.modules.filter((module) => !module.isCore).length > 0 && (
-                <AccordionTrigger asChild>
-                  <div className="w-full"></div>
-                </AccordionTrigger>
-              )}
-            </div>
-            {feature.modules.filter((module) => !module.isCore).length > 0 && (
-              <AccordionContent className="pl-6">
-                {feature.modules
-                  .filter((module) => !module.isCore)
-                  .sort((a: ModuleInterface, b: ModuleInterface) => a.name.localeCompare(b.name))
-                  .map((module: ModuleInterface) => (
-                    <div
-                      key={module.id}
-                      className="flex items-center border-t py-2"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <Checkbox
-                        id={module.id}
-                        checked={selectedModules.includes(module.id)}
-                        onCheckedChange={(val) => {
-                          toggleModule(feature, module, val === true);
-                        }}
-                      />
-                      <FormLabel htmlFor={module.id} className="ml-3 cursor-pointer font-normal">
-                        {module.name}
-                      </FormLabel>
-                    </div>
-                  ))}
-              </AccordionContent>
-            )}
-          </AccordionItem>
-        </Accordion>
-      ))}
+            ))}
+        </div>
+      </ScrollArea>
       <FormMessage />
     </div>
   );

package/src/features/feature/data/feature.interface.ts

@@ -3,7 +3,7 @@ import { ModuleInterface } from "../../module";
 
 export interface FeatureInterface extends ApiDataInterface {
   get name(): string;
-  get isProduction(): boolean;
+  get isCore(): boolean;
 
   get modules(): ModuleInterface[];
 }

package/src/features/feature/data/feature.ts

@@ -4,7 +4,7 @@ import { FeatureInterface } from "./feature.interface";
 
 export class Feature extends AbstractApiData implements FeatureInterface {
   private _name?: string;
-  private _isProduction?: boolean;
+  private _isCore?: boolean;
 
   private _modules: ModuleInterface[] = [];
 
@@ -12,8 +12,8 @@ export class Feature extends AbstractApiData implements FeatureInterface {
     return this._name ?? "";
   }
 
-  get isProduction(): boolean {
-    return this._isProduction == true ? true : false;
+  get isCore(): boolean {
+    return this._isCore == true ? true : false;
   }
 
   get modules(): ModuleInterface[] {
@@ -24,7 +24,7 @@ export class Feature extends AbstractApiData implements FeatureInterface {
     super.rehydrate(data);
 
     this._name = data.jsonApi.attributes.name;
-    this._isProduction = data.jsonApi.attributes.isProduction ?? false;
+    this._isCore = data.jsonApi.attributes.isCore ?? false;
 
     this._modules = this._readIncluded(data, `modules`, Modules.Module) as ModuleInterface[];
 

package/src/features/index.ts

@@ -1,5 +1,12 @@
 // S3 feature exports
 export * from "./auth";
+export * from "./billing";
+export * from "./billing/stripe-customer";
+export * from "./billing/stripe-invoice";
+export * from "./billing/stripe-price";
+export * from "./billing/stripe-product";
+export * from "./billing/stripe-subscription";
+export * from "./billing/stripe-usage";
 export * from "./company";
 export * from "./content";
 export * from "./feature";

package/src/features/module/data/module.interface.ts

@@ -2,7 +2,6 @@ import { ApiDataInterface } from "../../../core";
 
 export interface ModuleInterface extends ApiDataInterface {
   get name(): string;
-  get isCore(): boolean;
   get permissions(): {
     create: boolean | string;
     read: boolean | string;

package/src/features/module/data/module.ts

@@ -3,7 +3,6 @@ import { ModuleInterface } from "./module.interface";
 
 export class Module extends AbstractApiData implements ModuleInterface {
   private _name?: string;
-  private _isCore?: boolean;
   private _permissions?: {
     create: boolean | string;
     read: boolean | string;
@@ -16,10 +15,6 @@ export class Module extends AbstractApiData implements ModuleInterface {
     return this._name ?? "";
   }
 
-  get isCore(): boolean {
-    return this._isCore ?? false;
-  }
-
   get permissions(): {
     create: boolean | string;
     read: boolean | string;
@@ -34,7 +29,6 @@ export class Module extends AbstractApiData implements ModuleInterface {
     super.rehydrate(data);
 
     this._name = data.jsonApi.attributes.name;
-    this._isCore = data.jsonApi.attributes.isCore;
     this._permissions = data.jsonApi.meta.permissions;
 
     return this;

package/src/features/user/components/lists/ContributorsList.tsx

@@ -19,7 +19,7 @@ export function ContributorsList({ content }: ContributorsListProps) {
       <Link
         key={content.author.id}
         href={generateUrl({ page: Modules.User, id: content.author.id })}
-        onClick={(e) => e.stopPropagation()}
+        onClick={(e: React.MouseEvent<HTMLAnchorElement>) => e.stopPropagation()}
       >
         <UserAvatar user={content.author} className="mr-1 h-6 w-6" />
       </Link>
@@ -30,7 +30,7 @@ export function ContributorsList({ content }: ContributorsListProps) {
             <Link
               key={editor.id}
               href={generateUrl({ page: Modules.User, id: editor.id })}
-              onClick={(e) => e.stopPropagation()}
+              onClick={(e: React.MouseEvent<HTMLAnchorElement>) => e.stopPropagation()}
             >
               <UserAvatar user={editor} className="h-5 w-5" />
             </Link>

package/src/features/user/components/widgets/UserAvatar.tsx

@@ -65,7 +65,7 @@ export function UserAvatar({ user, className, showFull, showLink }: UserAvatarPr
           <Link
             href={generateUrl({ page: Modules.User, id: user.id })}
             className={cn(`mb-2 flex w-full flex-row items-center justify-start gap-x-2 text-sm`, className)}
-            onClick={(e) => e.stopPropagation()}
+            onClick={(e: React.MouseEvent<HTMLAnchorElement>) => e.stopPropagation()}
           >
             <div className="flex w-full flex-row items-center gap-x-2">
               {getAvatar()}

package/src/hooks/__tests__/useDataListRetriever.test.ts

@@ -0,0 +1,321 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { renderHook, waitFor, act } from "@testing-library/react";
+import { useDataListRetriever } from "../useDataListRetriever";
+import { createMockModule, createMockApiData } from "../../testing";
+
+describe("useDataListRetriever", () => {
+  const mockModule = createMockModule({ name: "articles" });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe("initialization", () => {
+    it("should initialize with default state", async () => {
+      const retriever = vi.fn().mockResolvedValue([]);
+
+      const { result } = renderHook(() =>
+        useDataListRetriever({
+          retriever,
+          module: mockModule,
+        })
+      );
+
+      // Initially should not be loaded
+      expect(result.current.ready).toBe(true);
+      expect(result.current.isSearch).toBe(false);
+    });
+
+    it("should respect ready=false", async () => {
+      const retriever = vi.fn().mockResolvedValue([]);
+
+      const { result } = renderHook(() =>
+        useDataListRetriever({
+          retriever,
+          module: mockModule,
+          ready: false,
+        })
+      );
+
+      expect(result.current.ready).toBe(false);
+      // Retriever should not be called when not ready
+      expect(retriever).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("data fetching", () => {
+    it("should fetch data when ready", async () => {
+      const mockData = [
+        createMockApiData({ type: "articles", id: "1", attributes: { title: "Article 1" } }),
+        createMockApiData({ type: "articles", id: "2", attributes: { title: "Article 2" } }),
+      ];
+      const retriever = vi.fn().mockResolvedValue(mockData);
+
+      const { result } = renderHook(() =>
+        useDataListRetriever({
+          retriever,
+          module: mockModule,
+        })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      expect(result.current.data).toHaveLength(2);
+      expect(retriever).toHaveBeenCalled();
+    });
+
+    it("should handle fetch errors gracefully", async () => {
+      const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+      const retriever = vi.fn().mockRejectedValue(new Error("Fetch failed"));
+
+      const { result } = renderHook(() =>
+        useDataListRetriever({
+          retriever,
+          module: mockModule,
+        })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      expect(consoleError).toHaveBeenCalled();
+      consoleError.mockRestore();
+    });
+  });
+
+  describe("search", () => {
+    it("should search and call retriever with search term", async () => {
+      const mockData = [
+        createMockApiData({ type: "articles", id: "1", attributes: { title: "Search Result" } }),
+      ];
+      const retriever = vi.fn().mockResolvedValue(mockData);
+
+      const { result } = renderHook(() =>
+        useDataListRetriever({
+          retriever,
+          module: mockModule,
+        })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      const callCountBefore = retriever.mock.calls.length;
+
+      await act(async () => {
+        await result.current.search("test query");
+      });
+
+      await waitFor(() => {
+        // Verify retriever was called again with the search term
+        expect(retriever.mock.calls.length).toBeGreaterThan(callCountBefore);
+        const lastCall = retriever.mock.calls[retriever.mock.calls.length - 1][0];
+        expect(lastCall.search).toBe("test query");
+      });
+    });
+
+    it("should not search if query is unchanged", async () => {
+      const retriever = vi.fn().mockResolvedValue([]);
+
+      const { result } = renderHook(() =>
+        useDataListRetriever({
+          retriever,
+          module: mockModule,
+        })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      const callCountBefore = retriever.mock.calls.length;
+
+      // Search with same empty query
+      await act(async () => {
+        await result.current.search("");
+      });
+
+      // Should not trigger additional fetch
+      expect(retriever.mock.calls.length).toBe(callCountBefore);
+    });
+  });
+
+  describe("refresh", () => {
+    it("should refresh data", async () => {
+      const mockData = [createMockApiData({ type: "articles", id: "1" })];
+      const retriever = vi.fn().mockResolvedValue(mockData);
+
+      const { result } = renderHook(() =>
+        useDataListRetriever({
+          retriever,
+          module: mockModule,
+        })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      const callCountBefore = retriever.mock.calls.length;
+
+      await act(async () => {
+        await result.current.refresh();
+      });
+
+      await waitFor(() => {
+        expect(retriever.mock.calls.length).toBeGreaterThan(callCountBefore);
+      });
+    });
+  });
+
+  describe("setReady", () => {
+    it("should allow setting ready state", async () => {
+      const retriever = vi.fn().mockResolvedValue([]);
+
+      const { result } = renderHook(() =>
+        useDataListRetriever({
+          retriever,
+          module: mockModule,
+          ready: false,
+        })
+      );
+
+      expect(result.current.ready).toBe(false);
+
+      act(() => {
+        result.current.setReady(true);
+      });
+
+      expect(result.current.ready).toBe(true);
+    });
+  });
+
+  describe("element management", () => {
+    it("should update element with setRefreshedElement", async () => {
+      const mockData = [
+        createMockApiData({ type: "articles", id: "1", attributes: { title: "Original" } }),
+      ];
+      const retriever = vi.fn().mockResolvedValue(mockData);
+
+      const { result } = renderHook(() =>
+        useDataListRetriever({
+          retriever,
+          module: mockModule,
+        })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      const updatedElement = createMockApiData({
+        type: "articles",
+        id: "1",
+        attributes: { title: "Updated" },
+      });
+
+      act(() => {
+        result.current.setRefreshedElement(updatedElement as any);
+      });
+
+      // Element should be updated in place
+      expect(result.current.data?.[0]).toBe(updatedElement);
+    });
+
+    it("should remove element with removeElement", async () => {
+      const mockData = [
+        createMockApiData({ type: "articles", id: "1" }),
+        createMockApiData({ type: "articles", id: "2" }),
+      ];
+      const retriever = vi.fn().mockResolvedValue(mockData);
+
+      const { result } = renderHook(() =>
+        useDataListRetriever({
+          retriever,
+          module: mockModule,
+        })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      expect(result.current.data).toHaveLength(2);
+
+      act(() => {
+        result.current.removeElement(mockData[0] as any);
+      });
+
+      expect(result.current.data).toHaveLength(1);
+      expect(result.current.data?.[0].id).toBe("2");
+    });
+  });
+
+  describe("additional parameters", () => {
+    it("should add additional parameter", async () => {
+      const retriever = vi.fn().mockResolvedValue([]);
+
+      const { result } = renderHook(() =>
+        useDataListRetriever({
+          retriever,
+          module: mockModule,
+        })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result.current.addAdditionalParameter("filter", "active");
+      });
+
+      await waitFor(() => {
+        expect(retriever).toHaveBeenCalledWith(
+          expect.objectContaining({ filter: "active" })
+        );
+      });
+    });
+
+    it("should remove additional parameter", async () => {
+      const retriever = vi.fn().mockResolvedValue([]);
+
+      const { result } = renderHook(() =>
+        useDataListRetriever({
+          retriever,
+          module: mockModule,
+        })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result.current.addAdditionalParameter("filter", "active");
+      });
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result.current.removeAdditionalParameter("filter");
+      });
+
+      // Should refetch without the parameter
+      await waitFor(() => {
+        const lastCall = retriever.mock.calls[retriever.mock.calls.length - 1][0];
+        expect(lastCall.filter).toBeUndefined();
+      });
+    });
+  });
+});