@carlonicora/nextjs-jsonapi 1.0.3 → 1.0.4

package/src/components/containers/ReactMarkdownContainer.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useEffect, useRef, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+type ReactMarkdownContainerProps = {
+  content: string;
+  collapsible?: boolean;
+  initialLines?: number;
+  size?: "small" | "normal";
+};
+
+export function ReactMarkdownContainer({
+  content,
+  collapsible = false,
+  initialLines = 4,
+  size = "normal",
+}: ReactMarkdownContainerProps) {
+  const t = useTranslations("generic.buttons");
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [showExpandButton, setShowExpandButton] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (collapsible && contentRef.current && !isExpanded) {
+      // Check if content exceeds the clamped height
+      const isOverflowing = contentRef.current.scrollHeight > contentRef.current.clientHeight;
+      setShowExpandButton(isOverflowing);
+    }
+  }, [collapsible, content, isExpanded]);
+
+  const handleToggle = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const clampStyle =
+    collapsible && !isExpanded
+      ? {
+          display: "-webkit-box",
+          WebkitLineClamp: initialLines,
+          WebkitBoxOrient: "vertical" as const,
+          overflow: "hidden",
+        }
+      : {};
+
+  return (
+    <div className="flex flex-col">
+      <div className="relative">
+        <div ref={contentRef} style={clampStyle} className="transition-all duration-300 ease-in-out">
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            components={{
+              p: ({ children }) => <p className={size === "small" ? "text-xs" : ""}>{children}</p>,
+              li: ({ children }) => <li className={size === "small" ? "text-xs" : ""}>{children}</li>,
+              table: ({ children }) => <table className="w-full table-auto border-collapse border">{children}</table>,
+              th: ({ children }) => (
+                <th className={`border px-4 py-2 text-left ${size === "small" ? "px-2 py-1 text-xs" : ""}`}>
+                  {children}
+                </th>
+              ),
+              td: ({ children }) => (
+                <td className={`border px-4 py-2 ${size === "small" ? "px-2 py-1 text-xs" : ""}`}>{children}</td>
+              ),
+              tr: ({ children }) => <tr className="even:bg-gray-50">{children}</tr>,
+              ul: ({ children }) => <ul className={`list-disc ${size === "small" ? "pl-3" : "pl-4"}`}>{children}</ul>,
+              ol: ({ children }) => (
+                <ol className={`list-decimal ${size === "small" ? "pl-3" : "pl-4"}`}>{children}</ol>
+              ),
+              h1: ({ children }) => (
+                <h1 className={size === "small" ? "my-1 mt-2 text-sm font-bold" : "my-2 mt-4 text-3xl font-medium"}>
+                  {children}
+                </h1>
+              ),
+              h2: ({ children }) => (
+                <h2
+                  className={size === "small" ? "my-1 mt-2 text-sm font-semibold" : "my-2 mt-4 text-2xl font-semibold"}
+                >
+                  {children}
+                </h2>
+              ),
+              h3: ({ children }) => (
+                <h3 className={size === "small" ? "my-1 mt-2 text-sm font-medium" : "my-2 mt-4 text-xl font-semibold"}>
+                  {children}
+                </h3>
+              ),
+              h4: ({ children }) => (
+                <h4 className={size === "small" ? "my-1 mt-2 text-sm font-medium" : "my-2 mt-4 text-lg font-semibold"}>
+                  {children}
+                </h4>
+              ),
+            }}
+          >
+            {content}
+          </ReactMarkdown>
+        </div>
+
+        {collapsible && !isExpanded && showExpandButton && (
+          <div className="pointer-events-none absolute right-0 bottom-0 left-0 h-12 bg-gradient-to-t from-white to-transparent" />
+        )}
+      </div>
+
+      {collapsible && showExpandButton && (
+        <div className="mt-2 flex justify-end">
+          <button
+            onClick={handleToggle}
+            className="flex items-center gap-1 rounded-md px-3 py-1.5 text-sm text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+            aria-label={isExpanded ? t("show_less") : t("show_more")}
+          >
+            <span>{isExpanded ? t("show_less") : t("show_more")}</span>
+            {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/containers/TabsContainer.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useCurrentUserContext } from "../../contexts";
+import { UserInterface } from "../../features";
+import { Action, ModuleWithPermissions } from "../../permissions";
+import { ScrollArea, Tabs, TabsContent, TabsList, TabsTrigger } from "../../shadcnui";
+import { cn } from "../../utils";
+
+export type Tab = {
+  label: string;
+  contentLabel?: React.ReactNode;
+  content: React.ReactNode;
+  modules?: ModuleWithPermissions[];
+  action?: Action;
+};
+
+type TabsContainerProps = {
+  tabs: Tab[];
+  defaultTab?: string;
+  tabsListClassName?: string;
+  tabsTriggerClassName?: string;
+  scrollAreaClassName?: string;
+  style?: "navigation";
+  additionalComponent?: React.ReactNode;
+};
+
+export function TabsContainer({
+  tabs,
+  defaultTab,
+  tabsListClassName,
+  tabsTriggerClassName,
+  scrollAreaClassName,
+  style,
+  additionalComponent,
+}: TabsContainerProps) {
+  const { hasPermissionToModules } = useCurrentUserContext<UserInterface>();
+
+  const validTabs = tabs.filter((tab) =>
+    tab.modules && tab.action ? hasPermissionToModules({ modules: tab.modules, action: tab.action }) : true,
+  );
+
+  if (validTabs.length === 0) return null;
+
+  const defaultValue = defaultTab ?? tabs[0].label;
+
+  if (validTabs.length === 1) {
+    return validTabs[0].content;
+  }
+
+  return (
+    <Tabs defaultValue={defaultValue} className="w-full">
+      <div className="flex w-full items-center justify-between">
+        <TabsList
+          className={cn(
+            `${style ? `my-4 flex w-full justify-start rounded-none border-b bg-transparent pb-0` : ``}`,
+            tabsListClassName,
+          )}
+        >
+          {validTabs.map((tab) => (
+            <TabsTrigger
+              key={tab.label}
+              value={tab.label}
+              className={cn(
+                `${style ? `text-muted-foreground border-accent data-[state=active]:text-foreground hover:text-foreground cursor-pointer rounded-none bg-transparent pb-2 text-sm font-light hover:border-0 data-[state=active]:border-b data-[state=active]:font-medium data-[state=active]:shadow-none` : `text-primary text-xs`}`,
+                tabsTriggerClassName,
+              )}
+            >
+              {tab.contentLabel ?? tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {additionalComponent && additionalComponent}
+      </div>
+      {scrollAreaClassName ? (
+        <ScrollArea className={scrollAreaClassName}>
+          {validTabs.map((tab) => (
+            <TabsContent key={tab.label} value={tab.label}>
+              {tab.content}
+            </TabsContent>
+          ))}
+        </ScrollArea>
+      ) : (
+        <>
+          {validTabs.map((tab) => (
+            <TabsContent key={tab.label} value={tab.label}>
+              {tab.content}
+            </TabsContent>
+          ))}
+        </>
+      )}
+    </Tabs>
+  );
+}

package/src/components/containers/index.ts

@@ -0,0 +1,3 @@
+export * from "./PageContainer";
+export * from "./ReactMarkdownContainer";
+export * from "./TabsContainer";

package/src/components/contents/AttributeElement.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { ReactElement } from "react";
+import { cn } from "../../utils";
+
+type AttributeElementProps = {
+  inline?: boolean;
+  title?: string | ReactElement<any>;
+  value?: string | ReactElement<any>;
+  className?: string;
+};
+
+export function AttributeElement({ inline, title, value, className }: AttributeElementProps) {
+  return (
+    <div className={cn(`flex ${inline === true ? "flex-row" : "flex-col"} my-1 justify-start`, className)}>
+      {title && <div className={`${inline === true ? "min-w-48 pr-4" : "w-full"} text-sm font-semibold`}>{title}</div>}
+      {value && <div className="flex w-full flex-col text-sm">{value}</div>}
+    </div>
+  );
+}

package/src/components/contents/index.ts

@@ -0,0 +1 @@
+export * from "./AttributeElement";

package/src/components/details/AllowedUsersDetails.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ContentInterface } from "../../features/content/data";
+import { ContributorsList } from "../../features/user/components";
+
+type AllowedUsersDetailsProps = {
+  showTitle?: boolean;
+  content: ContentInterface;
+};
+
+export function AllowedUsersDetails({ showTitle, content }: AllowedUsersDetailsProps) {
+  const t = useTranslations();
+
+  return (
+    <div className="mb-2 flex w-full flex-col gap-y-2">
+      {showTitle && <h3 className="text-xs font-semibold">{t("generic.permissions")}</h3>}
+      <div className="flex w-full items-center justify-start gap-x-4">
+        <ContributorsList content={content} />
+      </div>
+    </div>
+  );
+}

package/src/components/details/index.ts

@@ -0,0 +1 @@
+export * from "./AllowedUsersDetails";

package/src/components/editors/BlockNoteDiffInlineContent.tsx

@@ -0,0 +1,152 @@
+import { createReactInlineContentSpec } from "@blocknote/react";
+import { CheckIcon, XIcon } from "lucide-react";
+import { Button } from "../../shadcnui";
+import { cn } from "../../utils";
+
+// Word-level diff with accept/reject functionality
+export const diffWordInlineContentSpec = createReactInlineContentSpec(
+  {
+    type: "diffWord",
+    propSchema: {
+      text: {
+        default: "",
+      },
+      diffType: {
+        default: "unchanged",
+      },
+      diffId: {
+        default: "",
+      },
+      accepted: {
+        default: false,
+      },
+      rejected: {
+        default: false,
+      },
+      onAccept: {
+        default: "",
+        type: "string" as const,
+      },
+      onReject: {
+        default: "",
+        type: "string" as const,
+      },
+    },
+    content: "none",
+  },
+  {
+    render: (props) => {
+      const { text, diffType, diffId, accepted, rejected, onAccept, onReject } = props.inlineContent as any;
+
+      const handleAccept =
+        typeof onAccept === "function" ? onAccept : (window as any).blockNoteDiffHandlers?.handleAcceptChange;
+      const handleReject =
+        typeof onReject === "function" ? onReject : (window as any).blockNoteDiffHandlers?.handleRejectChange;
+
+      if (diffType === "unchanged") {
+        return <span>{text}</span>;
+      }
+
+      // Handle button-only diffType for rendering accept/reject buttons
+      if (diffType === "buttons") {
+        const diffIdList = diffId.split(",");
+        return (
+          <span className="ml-2 inline-flex items-center gap-1">
+            <Button
+              size="sm"
+              variant="ghost"
+              className="m-0 h-6 w-6 p-0 text-green-600 hover:bg-green-50 hover:text-green-700"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (handleAccept) {
+                  diffIdList.forEach((id: string) => handleAccept(id.trim()));
+                }
+              }}
+              title="Accept change"
+            >
+              <CheckIcon className="h-3 w-3" />
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="m-0 h-6 w-6 p-0 text-red-600 hover:bg-red-50 hover:text-red-700"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (handleReject) {
+                  diffIdList.forEach((id: string) => handleReject(id.trim()));
+                }
+              }}
+              title="Reject change"
+            >
+              <XIcon className="h-3 w-3" />
+            </Button>
+          </span>
+        );
+      }
+
+      const isAddition = diffType === "added";
+      const isRemoval = diffType === "removed";
+
+      return (
+        <span className="group relative inline-flex items-center">
+          <span
+            className={cn("rounded-sm px-1 transition-all duration-200", {
+              "border border-green-300 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300":
+                isAddition && !accepted && !rejected,
+              "border border-green-400 bg-green-200 text-green-900": isAddition && accepted,
+              "border border-gray-300 bg-gray-100 text-gray-500 line-through": isAddition && rejected,
+
+              "border border-red-300 bg-red-100 text-red-800 line-through dark:bg-red-900/30 dark:text-red-300":
+                isRemoval && !accepted && !rejected,
+              "border border-gray-400 bg-gray-200 text-gray-600 line-through": isRemoval && accepted,
+              "border border-red-400 bg-red-200 text-red-900 line-through": isRemoval && rejected,
+            })}
+          >
+            {text}
+          </span>
+
+          {!accepted && !rejected && (diffType === "added" || diffType === "removed") && (
+            <span className="absolute -top-8 left-0 z-10 hidden items-center gap-1 rounded border bg-white p-1 shadow-lg group-hover:flex">
+              <Button
+                size="sm"
+                variant="ghost"
+                className="m-0 h-6 w-6 p-0 text-green-600 hover:bg-green-50 hover:text-green-700"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (handleAccept) {
+                    handleAccept(diffId);
+                  }
+                }}
+                title="Accept change"
+              >
+                <CheckIcon className="h-5 w-5" />
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                className="m-0 h-6 w-6 p-0 text-red-600 hover:bg-red-50 hover:text-red-700"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (handleReject) {
+                    handleReject(diffId);
+                  }
+                }}
+                title="Reject change"
+              >
+                <XIcon className="h-5 w-5" />
+              </Button>
+            </span>
+          )}
+        </span>
+      );
+    },
+  },
+);
+
+export const diffInlineContentSpecs = {
+  diffWord: diffWordInlineContentSpec,
+};