@carlonicora/nextjs-jsonapi 0.0.1 → 1.0.4

package/src/components/navigations/index.ts

@@ -0,0 +1,6 @@
+export * from "./Breadcrumb";
+export * from "./ContentTitle";
+export * from "./Header";
+export * from "./ModeToggleSwitch";
+export * from "./PageSection";
+export * from "./RecentPagesNavigator";

package/src/components/pages/PageContainerContentDetails.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { ReactNode, useEffect, useRef, useState } from "react";
+import { useUrlRewriter } from "../../hooks/url.rewriter";
+import { ModuleWithPermissions } from "../../permissions";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../shadcnui";
+
+export type PageContainerItems = {
+  title: string;
+  content: ReactNode;
+};
+
+type PageContainerContentDetailsProps = {
+  items: PageContainerItems[];
+  section?: string;
+  module: ModuleWithPermissions;
+  id: string;
+};
+
+export function PageContainerContentDetails({ items, section, module, id }: PageContainerContentDetailsProps) {
+  const rewriteUrl = useUrlRewriter();
+  const [isScrolled, setIsScrolled] = useState<boolean>(false);
+  const sentinelRef = useRef<HTMLDivElement>(null);
+
+  // Use IntersectionObserver to detect when content scrolls past the TabsList
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        // When sentinel is not visible (scrolled past), show border
+        setIsScrolled(!entry.isIntersecting);
+      },
+      {
+        threshold: 0,
+        rootMargin: "0px",
+      },
+    );
+
+    observer.observe(sentinel);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <Tabs
+      defaultValue={section || items[0].title}
+      onValueChange={(a) => rewriteUrl({ page: module, id: id, childPage: a })}
+    >
+      {/* Sentinel element - invisible, used to detect scroll position */}
+      <div ref={sentinelRef} className="h-0" />
+
+      {/* Sticky TabsList with conditional border */}
+      <div className={`bg-background sticky top-0 z-10 mb-2 pb-2 transition-shadow ${isScrolled ? "border-b" : ""}`}>
+        <TabsList>
+          {items.map((item) => (
+            <TabsTrigger key={item.title} value={item.title}>
+              {item.title}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </div>
+
+      <div className="pr-4">
+        {items.map((item) => (
+          <TabsContent key={item.title} value={item.title}>
+            {item.content}
+          </TabsContent>
+        ))}
+      </div>
+    </Tabs>
+  );
+}

package/src/components/pages/PageContentContainer.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { ReactNode } from "react";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../../shadcnui";
+
+type PageContentContainerProps = {
+  details: ReactNode;
+  footer?: ReactNode;
+  content?: ReactNode;
+};
+
+export function PageContentContainer({ details, footer, content }: PageContentContainerProps) {
+  return (
+    <div className="flex h-[calc(100vh-(--spacing(16)))] w-full">
+      <ResizablePanelGroup direction="horizontal" className="items-stretch" autoSaveId="page-content-layout">
+        <ResizablePanel id="left-panel" defaultSize={32} minSize={20} maxSize={40}>
+          <div className="@container flex h-full flex-col pr-4">
+            <div className="flex-1 overflow-y-auto">{details}</div>
+
+            {/* Sticky footer - always visible at bottom */}
+            {footer && <div className="flex flex-col gap-y-2 pt-2 pb-2">{footer}</div>}
+          </div>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel id="right-panel" className="pl-4">
+          <div className="h-full overflow-y-auto">{content}</div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  );
+}

package/src/components/pages/index.ts

@@ -0,0 +1,2 @@
+export * from "./PageContainerContentDetails";
+export * from "./PageContentContainer";

package/src/components/tables/ContentListTable.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+
+import { CaretLeftIcon, CaretRightIcon } from "@radix-ui/react-icons";
+import { ReactNode, memo, useMemo } from "react";
+import { DataListRetriever, useTableGenerator } from "../../hooks";
+import { ModuleWithPermissions } from "../../permissions";
+import { Button, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "../../shadcnui";
+import { ContentTableSearch } from "./ContentTableSearch";
+
+const EMPTY_ARRAY: any[] = [];
+
+export type GenerateTableStructureParams = {
+  data: any[];
+  toggleValueToFormIdsId: (id: string, name: string) => void;
+  isSelected: (id: string) => boolean;
+};
+
+type ContentListTableProps = {
+  title?: string;
+  data: DataListRetriever<any>;
+  tableGenerator?: never;
+  tableGeneratorType: ModuleWithPermissions;
+  fields: any[];
+  checkedIds?: string[];
+  toggleId?: (id: string) => void;
+  functions?: ReactNode;
+  filters?: ReactNode;
+  allowSearch?: boolean;
+  context?: Record<string, any>;
+};
+
+export const ContentListTable = memo(function ContentListTable(props: ContentListTableProps) {
+  const { data, fields, checkedIds, toggleId, allowSearch, filters } = props;
+
+  const { data: tableData, columns: tableColumns } = useTableGenerator(props.tableGeneratorType, {
+    data: data?.data ?? EMPTY_ARRAY,
+    fields: fields,
+    checkedIds: checkedIds,
+    toggleId: toggleId,
+    dataRetriever: data,
+    context: props.context,
+  });
+
+  const columnVisibility = useMemo(
+    () =>
+      fields.reduce(
+        (acc, columnId) => {
+          acc[columnId] = true;
+          return acc;
+        },
+        {} as Record<string, boolean>,
+      ),
+    [fields],
+  );
+
+  const table = useReactTable({
+    data: tableData,
+    columns: tableColumns,
+    getCoreRowModel: getCoreRowModel(),
+    initialState: {
+      columnVisibility,
+    },
+  });
+
+  // if (!data.isLoaded || !data.data) {
+  //   return <ContentListTableLoader />;
+  // }
+
+  const rowModel = tableData ? table.getRowModel() : null;
+  const showFooter = !!(props.functions || data.next || data.previous);
+
+  return (
+    <div className="flex w-full flex-col">
+      <div className="overflow-hidden rounded-md border">
+        <Table>
+          <TableHeader className="bg-muted font-semibold">
+            {props.title && (
+              <TableRow>
+                <TableHead className="bg-card text-primary p-4 text-left font-bold" colSpan={tableColumns.length}>
+                  <div className="flex w-full items-center justify-between gap-x-2">
+                    <div className="w-full">{props.title}</div>
+                    {(props.functions || props.filters || allowSearch) && (
+                      <>
+                        {props.functions}
+                        {props.filters}
+                        <ContentTableSearch data={data} />
+                      </>
+                    )}
+                  </div>
+                </TableHead>
+              </TableRow>
+            )}
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {rowModel && rowModel.rows?.length ? (
+              rowModel.rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={tableColumns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+          {showFooter && (
+            <TableFooter>
+              <TableRow>
+                <TableCell colSpan={tableColumns.length} className="bg-card py-4 text-right">
+                  <div className="flex items-center justify-end space-x-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        data.previous?.(true);
+                      }}
+                      disabled={!data.previous}
+                    >
+                      <CaretLeftIcon className="h-4 w-4" />
+                    </Button>
+                    {data.pageInfo && (
+                      <span className="text-muted-foreground text-xs">
+                        {data.pageInfo.startItem}-{data.pageInfo.endItem}
+                      </span>
+                    )}
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        data.next?.(true);
+                      }}
+                      disabled={!data.next}
+                    >
+                      <CaretRightIcon className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            </TableFooter>
+          )}
+        </Table>
+      </div>
+    </div>
+  );
+});

package/src/components/tables/ContentTableSearch.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { RefreshCw, Search, X } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { DataListRetriever, useDebounce } from "../../hooks";
+import { Input } from "../../shadcnui";
+
+type ContentTableSearchProps = {
+  data: DataListRetriever<any>;
+};
+
+export function ContentTableSearch({ data }: ContentTableSearchProps) {
+  const t = useTranslations();
+  const searchTermRef = useRef<string>("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+
+  const isExpanded = isFocused || searchTerm.length > 0;
+
+  const search = useCallback(
+    async (searchedTerm: string) => {
+      try {
+        if (searchedTerm === searchTermRef.current) return;
+        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 handleSearchIconClick = () => {
+    if (!isExpanded) {
+      setIsFocused(true);
+      // Small delay to ensure the input is rendered before focusing
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  };
+
+  const handleBlur = () => {
+    // Auto-collapse only if search is empty
+    if (searchTerm.length === 0) {
+      setIsFocused(false);
+    }
+  };
+
+  const handleClear = () => {
+    setSearchTerm("");
+    search("");
+    setIsFocused(false);
+  };
+
+  return (
+    <div
+      className={`relative flex h-6 items-center text-xs font-normal transition-all duration-300 ease-in-out ${
+        isExpanded ? "w-64" : "w-6"
+      }`}
+    >
+      <Search
+        className={`absolute top-1 left-1 h-4 w-4 transition-colors ${
+          isExpanded ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground cursor-pointer"
+        }`}
+        onClick={handleSearchIconClick}
+      />
+      {isExpanded && (
+        <Input
+          ref={inputRef}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              handleClear();
+            }
+          }}
+          onFocus={() => setIsFocused(true)}
+          onBlur={handleBlur}
+          placeholder={t(`generic.search.placeholder_global`)}
+          type="text"
+          className="border-border/50 focus-visible:border-border h-10 w-full pr-8 pl-8 text-xs shadow-none focus-visible:ring-0"
+          onChange={(e) => setSearchTerm(e.target.value)}
+          value={searchTerm}
+        />
+      )}
+      {isExpanded && isSearching && (
+        <RefreshCw className="text-muted-foreground absolute top-1 right-1 h-4 w-4 animate-spin" />
+      )}
+      {isExpanded && !isSearching && searchTermRef.current && (
+        <X
+          className="text-muted-foreground hover:text-foreground absolute top-1 right-1 h-4 w-4 cursor-pointer"
+          onClick={handleClear}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/tables/cells/cell.component.tsx

@@ -0,0 +1,18 @@
+import { ColumnDef } from "@tanstack/react-table";
+import React from "react";
+
+export const cellComponent = (params: {
+  id: string;
+  name: string;
+  title: string;
+  component: React.ReactNode;
+}): ColumnDef<any> => {
+  return {
+    id: params.name,
+    accessorKey: params.name,
+    header: params.title,
+    cell: ({ row }) => params.component,
+    enableSorting: false,
+    enableHiding: false,
+  };
+};

package/src/components/tables/cells/cell.date.tsx

@@ -0,0 +1,16 @@
+import { ColumnDef } from "@tanstack/react-table";
+
+export const cellDate = (params: { name: string; title: string }): ColumnDef<any> => {
+  return {
+    id: params.name,
+    accessorKey: params.name,
+    header: params.title,
+    cell: ({ row }) => (
+      <span className="text-muted-foreground text-xs">
+        {row.getValue<Date>(params.name).toLocaleDateString("en", { dateStyle: "medium" })}
+      </span>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  };
+};

package/src/components/tables/cells/cell.id.tsx

@@ -0,0 +1,27 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Checkbox } from "../../../shadcnui";
+
+export const cellId = (params: {
+  name: string;
+  checkedIds?: string[];
+  toggleId?: (id: string) => void;
+}): ColumnDef<any> => {
+  return {
+    id: params.name,
+    accessorKey: params.name,
+    header: "",
+    cell: ({ row }) =>
+      params.toggleId ? (
+        <Checkbox
+          checked={params.checkedIds?.includes(row.getValue(params.name)) || false}
+          onCheckedChange={(value) => {
+            row.toggleSelected(!!value);
+            params.toggleId?.(row.getValue(params.name));
+          }}
+          aria-label="Select row"
+        />
+      ) : null,
+    enableSorting: false,
+    enableHiding: true,
+  };
+};

package/src/components/tables/cells/cell.link.tsx

@@ -0,0 +1,18 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Link } from "../../../shadcnui";
+
+export const cellLink = <T,>(params: {
+  id: string;
+  name: string;
+  title: string;
+  generateUrl: (id: string) => string;
+}): ColumnDef<T> => {
+  return {
+    id: params.name,
+    accessorKey: params.name,
+    header: params.title,
+    cell: ({ row }) => <Link href={params.generateUrl(row.getValue(params.id))}>{row.getValue(params.name)}</Link>,
+    enableSorting: false,
+    enableHiding: false,
+  };
+};

package/src/components/tables/cells/cell.text.tsx

@@ -0,0 +1,12 @@
+import { ColumnDef } from "@tanstack/react-table";
+
+export const cellText = (params: { id: string; name: string; title: string }): ColumnDef<any> => {
+  return {
+    id: params.name,
+    accessorKey: params.name,
+    header: params.title,
+    cell: ({ row }) => row.getValue(params.name),
+    enableSorting: false,
+    enableHiding: false,
+  };
+};

package/src/components/tables/cells/cell.url.tsx

@@ -0,0 +1,13 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Link } from "../../../shadcnui";
+
+export const cellUrl = (params: { name: string; title: string }): ColumnDef<any> => {
+  return {
+    id: params.name,
+    accessorKey: params.name,
+    header: params.title,
+    cell: ({ row }) => <Link href={row.getValue(params.name)}>{row.getValue(params.name)}</Link>,
+    enableSorting: false,
+    enableHiding: false,
+  };
+};

package/src/components/tables/cells/index.ts

@@ -0,0 +1,5 @@
+export * from "./cell.component";
+export * from "./cell.date";
+export * from "./cell.id";
+export * from "./cell.link";
+export * from "./cell.url";

package/src/components/tables/index.ts

@@ -0,0 +1,3 @@
+export * from "./cells";
+export * from "./ContentListTable";
+export * from "./ContentTableSearch";

package/src/contexts/SharedContext.tsx

@@ -0,0 +1,35 @@
+import { createContext, ReactNode, useContext } from "react";
+import { BreadcrumbItemData } from "../interfaces";
+
+const SharedContext = createContext<{
+  breadcrumbs: BreadcrumbItemData[];
+  title: {
+    type: string | string[];
+    element?: string;
+    functions?: ReactNode;
+  };
+} | null>(null);
+
+interface SharedProviderProps {
+  children: ReactNode;
+  value: {
+    breadcrumbs: BreadcrumbItemData[];
+    title: {
+      type: string;
+      element?: string;
+      functions?: ReactNode;
+    };
+  };
+}
+
+export const SharedProvider = ({ children, value }: SharedProviderProps) => {
+  return <SharedContext.Provider value={value}>{children}</SharedContext.Provider>;
+};
+
+export const useSharedContext = () => {
+  const context = useContext(SharedContext);
+  if (!context) {
+    throw new Error("useSharedContext must be used within a SharedProvider");
+  }
+  return context;
+};

package/src/contexts/index.ts

@@ -0,0 +1,2 @@
+export * from "./SharedContext";
+export * from "../features/user/contexts/CurrentUserContext";