@carlonicora/nextjs-jsonapi 1.0.3 → 1.0.5

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,
+};