@carlonicora/nextjs-jsonapi 0.0.1 → 1.0.4

package/src/utils/blocknote-word-diff-renderer.util.ts

@@ -0,0 +1,413 @@
+import { PartialBlock } from "@blocknote/core";
+import { DiffBlock, WordDiff } from "./blocknote-diff.util";
+
+export class BlockNoteWordDiffRendererUtil {
+  static renderWordDiffs(
+    diffBlocks: DiffBlock[],
+    onAcceptChange?: (diffId: string) => void,
+    onRejectChange?: (diffId: string) => void,
+    acceptedChanges?: Set<string>,
+    rejectedChanges?: Set<string>,
+  ): PartialBlock[] {
+    if (acceptedChanges || rejectedChanges) {
+      diffBlocks = this.updateWordDiffStates(diffBlocks, acceptedChanges, rejectedChanges);
+    }
+    return diffBlocks.map((block) => this.renderDiffBlock(block, onAcceptChange, onRejectChange));
+  }
+
+  private static updateWordDiffStates(
+    diffBlocks: DiffBlock[],
+    acceptedChanges?: Set<string>,
+    rejectedChanges?: Set<string>,
+  ): DiffBlock[] {
+    return diffBlocks.map((block) => {
+      const updatedBlock = { ...block };
+
+      if (updatedBlock.diffId) {
+        updatedBlock.accepted = acceptedChanges?.has(updatedBlock.diffId) || false;
+        updatedBlock.rejected = rejectedChanges?.has(updatedBlock.diffId) || false;
+      }
+
+      if (updatedBlock.wordDiffs) {
+        updatedBlock.wordDiffs = updatedBlock.wordDiffs.map((wordDiff) => ({
+          ...wordDiff,
+          accepted: acceptedChanges?.has(wordDiff.diffId) || false,
+          rejected: rejectedChanges?.has(wordDiff.diffId) || false,
+        }));
+      }
+
+      if (updatedBlock.children) {
+        updatedBlock.children = this.updateWordDiffStates(
+          updatedBlock.children as DiffBlock[],
+          acceptedChanges,
+          rejectedChanges,
+        );
+      }
+
+      return updatedBlock;
+    });
+  }
+
+  private static renderDiffBlock(
+    block: DiffBlock,
+    onAcceptChange?: (diffId: string) => void,
+    onRejectChange?: (diffId: string) => void,
+  ): PartialBlock {
+    if (block.diffType === "modified" && block.wordDiffs) {
+      return this.renderWordLevelDiff(block, onAcceptChange, onRejectChange);
+    }
+
+    if (block.diffType === "added" || block.diffType === "removed") {
+      return this.renderBlockLevelDiff(block, onAcceptChange, onRejectChange);
+    }
+
+    const baseBlock: PartialBlock = {
+      id: block.id || crypto.randomUUID(),
+      type: (block.type as any) || "paragraph",
+      props: this.getBlockProps(block),
+      content: Array.isArray(block.content) ? block.content : [],
+      children: block.children?.map((child) =>
+        this.renderDiffBlock(child as DiffBlock, onAcceptChange, onRejectChange),
+      ),
+    };
+
+    return baseBlock;
+  }
+
+  private static renderBlockLevelDiff(
+    block: DiffBlock,
+    onAcceptChange?: (diffId: string) => void,
+    onRejectChange?: (diffId: string) => void,
+  ): PartialBlock {
+    if (!block.diffId) {
+      return {
+        id: block.id || crypto.randomUUID(),
+        type: (block.type as any) || "paragraph",
+        props: block.props || {},
+        content: Array.isArray(block.content) ? block.content : [],
+        children: block.children?.map((child) =>
+          this.renderDiffBlock(child as DiffBlock, onAcceptChange, onRejectChange),
+        ),
+      };
+    }
+
+    const blockAccepted = block.accepted || false;
+    const blockRejected = block.rejected || false;
+
+    let content = Array.isArray(block.content) ? [...block.content] : [];
+
+    if (block.diffType === "added") {
+      if (blockRejected) {
+        return {
+          id: block.id || crypto.randomUUID(),
+          type: "paragraph",
+          props: {},
+          content: [],
+          children: [],
+        };
+      } else if (!blockAccepted) {
+        content = content.map((item: any) => ({
+          ...item,
+          styles: { ...item.styles, bold: true },
+        }));
+
+        content.push({
+          type: "diffActions",
+          props: { diffIds: block.diffId },
+        });
+      }
+    } else if (block.diffType === "removed") {
+      if (blockAccepted) {
+        return {
+          id: block.id || crypto.randomUUID(),
+          type: "paragraph",
+          props: {},
+          content: [],
+          children: [],
+        };
+      } else if (!blockRejected) {
+        content = content.map((item: any) => ({
+          ...item,
+          styles: { ...item.styles, strike: true },
+        }));
+
+        content.push({
+          type: "diffActions",
+          props: { diffIds: block.diffId },
+        });
+      }
+    }
+
+    const baseBlock: PartialBlock = {
+      id: block.id || crypto.randomUUID(),
+      type: (block.type as any) || "paragraph",
+      props: this.getBlockProps(block),
+      content: content,
+      children: block.children?.map((child) =>
+        this.renderDiffBlock(child as DiffBlock, onAcceptChange, onRejectChange),
+      ),
+    };
+
+    return baseBlock;
+  }
+
+  private static renderWordLevelDiff(
+    block: DiffBlock,
+    onAcceptChange?: (diffId: string) => void,
+    onRejectChange?: (diffId: string) => void,
+  ): PartialBlock {
+    if (!block.wordDiffs) {
+      return {
+        id: block.id || crypto.randomUUID(),
+        type: (block.type as any) || "paragraph",
+        props: block.props || {},
+        content: Array.isArray(block.content) ? block.content : [],
+        children: [],
+      };
+    }
+
+    const content = this.groupAndRenderWordDiffs(block.wordDiffs);
+
+    return {
+      id: block.id || crypto.randomUUID(),
+      type: (block.type as any) || "paragraph",
+      props: block.props || {},
+      content: Array.isArray(content) ? content : [],
+      children:
+        block.children?.map((child) => this.renderDiffBlock(child as DiffBlock, onAcceptChange, onRejectChange)) || [],
+    };
+  }
+
+  private static groupAndRenderWordDiffs(wordDiffs: WordDiff[]): any[] {
+    const content: any[] = [];
+
+    for (let i = 0; i < wordDiffs.length; i++) {
+      const wordDiff = wordDiffs[i];
+
+      const isLastOfGroup = this.isLastDiffInGroup(wordDiffs, i);
+
+      const textContent = this.createTextContent(wordDiff, isLastOfGroup);
+      if (textContent) {
+        if (Array.isArray(textContent)) {
+          content.push(...textContent);
+        } else {
+          content.push(textContent);
+        }
+      }
+    }
+
+    const cleanedContent = this.cleanupSpaces(content);
+
+    return cleanedContent;
+  }
+
+  private static cleanupSpaces(content: any[]): any[] {
+    const filtered = content.filter((item) => item !== null && item !== undefined);
+
+    const cleaned: any[] = [];
+
+    for (let i = 0; i < filtered.length; i++) {
+      const current = filtered[i];
+
+      if (current.type === "text" && current.text === " ") {
+        const lastItem = cleaned[cleaned.length - 1];
+
+        if (
+          i === 0 ||
+          i === filtered.length - 1 ||
+          (lastItem && lastItem.type === "text" && lastItem.text === " ") ||
+          (lastItem && lastItem.type === "diffActions")
+        ) {
+          continue;
+        }
+      }
+
+      if (current.type === "diffActions") {
+        const nextItem = i + 1 < filtered.length ? filtered[i + 1] : null;
+
+        cleaned.push(current);
+
+        if (nextItem && nextItem.type === "text" && nextItem.text !== " " && nextItem.type !== "diffActions") {
+          cleaned.push({
+            type: "text",
+            text: " ",
+            styles: {},
+          });
+        }
+
+        continue;
+      }
+
+      cleaned.push(current);
+    }
+
+    return cleaned;
+  }
+
+  private static isLastDiffInGroup(wordDiffs: WordDiff[], currentIndex: number): boolean {
+    const currentDiff = wordDiffs[currentIndex];
+
+    if (currentDiff.type === "unchanged") {
+      return false;
+    }
+
+    for (let i = currentIndex + 1; i < wordDiffs.length; i++) {
+      const nextDiff = wordDiffs[i];
+
+      if (nextDiff.diffId === currentDiff.diffId && (nextDiff.type === "added" || nextDiff.type === "removed")) {
+        return false;
+      }
+
+      if (nextDiff.type !== "unchanged" && nextDiff.diffId !== currentDiff.diffId) {
+        break;
+      }
+    }
+
+    return true;
+  }
+
+  private static createTextContent(wordDiff: WordDiff, isLastOfGroup?: boolean): any[] | any {
+    switch (wordDiff.type) {
+      case "added":
+        if (wordDiff.accepted) {
+          return {
+            type: "text",
+            text: wordDiff.text,
+            styles: {},
+          };
+        } else if (wordDiff.rejected) {
+          return null;
+        } else {
+          if (wordDiff.text.trim() === "") {
+            return {
+              type: "text",
+              text: wordDiff.text,
+              styles: { backgroundColor: "#dcfce7" },
+            };
+          } else {
+            const baseContent = {
+              type: "text",
+              text: wordDiff.text,
+              styles: { bold: true },
+            };
+
+            if (isLastOfGroup) {
+              return [
+                baseContent,
+                {
+                  type: "diffActions",
+                  props: { diffIds: wordDiff.diffId },
+                },
+              ];
+            } else {
+              return baseContent;
+            }
+          }
+        }
+
+      case "removed":
+        if (wordDiff.accepted) {
+          return null;
+        } else if (wordDiff.rejected) {
+          return {
+            type: "text",
+            text: wordDiff.text,
+            styles: {},
+          };
+        } else {
+          if (wordDiff.text.trim() === "") {
+            return {
+              type: "text",
+              text: wordDiff.text,
+              styles: { strike: true },
+            };
+          } else {
+            const baseContent = {
+              type: "text",
+              text: wordDiff.text,
+              styles: { strike: true },
+            };
+
+            if (isLastOfGroup) {
+              return [
+                baseContent,
+                {
+                  type: "diffActions",
+                  props: { diffIds: wordDiff.diffId },
+                },
+              ];
+            } else {
+              return baseContent;
+            }
+          }
+        }
+
+      case "unchanged":
+      default:
+        return {
+          type: "text",
+          text: wordDiff.text,
+          styles: {},
+        };
+    }
+  }
+
+  private static getBlockProps(block: DiffBlock): any {
+    const baseProps = block.props || {};
+
+    return baseProps;
+  }
+
+  static generateChangeSummary(diffBlocks: DiffBlock[]): {
+    totalWords: number;
+    addedWords: number;
+    removedWords: number;
+    acceptedChanges: number;
+    rejectedChanges: number;
+    pendingChanges: number;
+  } {
+    let totalWords = 0;
+    let addedWords = 0;
+    let removedWords = 0;
+    let acceptedChanges = 0;
+    let rejectedChanges = 0;
+    let pendingChanges = 0;
+
+    const processBlock = (block: DiffBlock) => {
+      if (block.wordDiffs) {
+        block.wordDiffs.forEach((wordDiff) => {
+          totalWords++;
+
+          if (wordDiff.type === "added") {
+            addedWords++;
+          } else if (wordDiff.type === "removed") {
+            removedWords++;
+          }
+
+          if (wordDiff.accepted) {
+            acceptedChanges++;
+          } else if (wordDiff.rejected) {
+            rejectedChanges++;
+          } else if (wordDiff.type !== "unchanged") {
+            pendingChanges++;
+          }
+        });
+      }
+
+      if (block.children) {
+        block.children.forEach((child) => processBlock(child as DiffBlock));
+      }
+    };
+
+    diffBlocks.forEach(processBlock);
+
+    return {
+      totalWords,
+      addedWords,
+      removedWords,
+      acceptedChanges,
+      rejectedChanges,
+      pendingChanges,
+    };
+  }
+}

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/utils/compose-refs.ts

@@ -0,0 +1,61 @@
+import * as React from "react";
+
+type PossibleRef<T> = React.Ref<T> | undefined;
+
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef<T>(ref: PossibleRef<T>, value: T) {
+  if (typeof ref === "function") {
+    return ref(value);
+  }
+
+  if (ref !== null && ref !== undefined) {
+    ref.current = value;
+  }
+}
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup === "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+
+    // React <19 will log an error to the console if a callback ref returns a
+    // value. We don't use ref cleanups internally so this will only happen if a
+    // user's ref callback returns a value, which we only expect if they are
+    // using the cleanup functionality added in React 19.
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup === "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+  return React.useCallback(composeRefs(...refs), refs);
+}
+
+export { composeRefs, useComposedRefs };

package/src/utils/date-formatter.ts

@@ -0,0 +1,53 @@
+type FormatOption = "date" | "time" | "dateTime" | "timeSince" | "default";
+
+export const formatDate = (eventDate: Date, formatOption: FormatOption): string => {
+  const browserLocale = navigator.language || "en-US";
+
+  const formatPart = (date: Date, options: Intl.DateTimeFormatOptions): string =>
+    new Intl.DateTimeFormat(browserLocale, options).format(date);
+
+  const now = new Date();
+  const diff = now.getTime() - eventDate.getTime();
+
+  if (formatOption === "default") {
+    if (diff < 24 * 60 * 60 * 1000) formatOption = "timeSince";
+    else formatOption = "dateTime";
+  }
+
+  if (formatOption === "timeSince") {
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    if (days > 0) return `${days} days ago`;
+    if (hours > 0) return `${hours} hours ago`;
+    if (minutes > 0) return `${minutes} minutes ago`;
+    return `${seconds} seconds ago`;
+  }
+
+  // Define formatting options
+  const dateOptions: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  };
+  const timeOptions: Intl.DateTimeFormatOptions = {
+    hour: "2-digit",
+    minute: "2-digit",
+  };
+
+  // Format based on the option
+  switch (formatOption) {
+    case "date":
+      return formatPart(eventDate, dateOptions);
+    case "time":
+      return formatPart(eventDate, timeOptions);
+    case "dateTime":
+      return `${formatPart(eventDate, dateOptions)} ${formatPart(eventDate, timeOptions)}`;
+    default:
+      throw new Error("Invalid format option");
+  }
+};
+
+export type { FormatOption };

package/src/utils/exists.ts

@@ -0,0 +1,7 @@
+export const exists = <T>(itemOrArray: T | T[] | null | undefined): boolean => {
+  if (!itemOrArray) return false;
+  if (Array.isArray(itemOrArray)) {
+    return itemOrArray.length > 0;
+  }
+  return true;
+};

package/src/utils/index.ts

@@ -0,0 +1,15 @@
+export type { ClassValue } from "clsx";
+export { cn } from "./cn";
+export { composeRefs, useComposedRefs } from "./compose-refs";
+export { useIsMobile } from "./use-mobile";
+
+// New utilities
+export { formatDate, type FormatOption } from "./date-formatter";
+export { exists } from "./exists";
+export { getTableComponents, getTableOptions, TableOptions } from "./table-options";
+
+// Schemas
+export { entityObjectSchema, userObjectSchema, type EntityObject, type UserObject } from "./schemas";
+
+export * from "./blocknote-diff.util";
+export * from "./blocknote-word-diff-renderer.util";

package/src/utils/schemas/entity.object.schema.ts

@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+export const entityObjectSchema = z.object({
+  id: z.uuidv4(),
+  name: z.string(),
+});
+
+export type EntityObject = z.infer<typeof entityObjectSchema>;

package/src/utils/schemas/index.ts

@@ -0,0 +1,2 @@
+export { userObjectSchema, type UserObject } from "./user.object.schema";
+export { entityObjectSchema, type EntityObject } from "./entity.object.schema";

package/src/utils/schemas/user.object.schema.ts

@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+export const userObjectSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  avatar: z.string().optional(),
+});
+
+export type UserObject = z.infer<typeof userObjectSchema>;

package/src/utils/table-options.ts

@@ -0,0 +1,67 @@
+import { Action, ModuleWithPermissions } from "../permissions";
+import { cloneElement, createElement, Fragment, ReactElement } from "react";
+
+export class TableOptions {
+  private _components: ReactElement<any>[];
+  private _hasPermissionToModule: <M extends ModuleWithPermissions>(params: {
+    module: M;
+    action: Action;
+    data?: any;
+  }) => boolean;
+
+  constructor(
+    hasPermissionToModule: <M extends ModuleWithPermissions>(params: {
+      module: M;
+      action: Action;
+      data?: any;
+    }) => boolean,
+  ) {
+    this._hasPermissionToModule = hasPermissionToModule;
+    this._components = [];
+  }
+
+  addOption<M extends ModuleWithPermissions>(component: ReactElement<any> | null, module?: M, action?: Action): void {
+    if (!component || (module && action && !this._hasPermissionToModule({ module, action }))) return;
+    this._components.push(component);
+  }
+
+  getComponents(): ReactElement<any>[] {
+    return this._components;
+  }
+
+  getOptions(): ReactElement<any> | null {
+    if (this._components.length === 0) return null;
+
+    const response: ReactElement<any>[] = this._components.map((option, index) =>
+      cloneElement(option, { key: option.key ?? index }),
+    );
+
+    return createElement(Fragment, {}, response);
+  }
+}
+
+export function getTableOptions(params: {
+  hasPermissionToModule: <M extends ModuleWithPermissions>(params: {
+    module: M;
+    action: Action;
+    data?: any;
+  }) => boolean;
+  options: { component: ReactElement<any> | null; module?: ModuleWithPermissions; action?: Action }[];
+}): ReactElement<any> | null {
+  const tableOptions = new TableOptions(params.hasPermissionToModule);
+  params.options.forEach((option) => tableOptions.addOption(option.component, option.module, option.action));
+  return tableOptions.getOptions();
+}
+
+export function getTableComponents(params: {
+  hasPermissionToModule: <M extends ModuleWithPermissions>(params: {
+    module: M;
+    action: Action;
+    data?: any;
+  }) => boolean;
+  options: { component: ReactElement<any> | null; module?: ModuleWithPermissions; action?: Action }[];
+}): ReactElement<any>[] {
+  const tableOptions = new TableOptions(params.hasPermissionToModule);
+  params.options.forEach((option) => tableOptions.addOption(option.component, option.module, option.action));
+  return tableOptions.getComponents();
+}

package/src/utils/use-mobile.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}