@dust-tt/sparkle 0.2.645 → 0.2.646-rc-2

package/src/components/markdown/HeaderBlocks.tsx

@@ -0,0 +1,160 @@
+import React, { memo } from "react";
+
+import { cn } from "@sparkle/lib/utils";
+
+import { MarkdownNode } from "./types";
+import { sameNodePosition, sameTextStyling } from "./utils";
+
+export const markdownHeaderClasses = {
+  h1: "s-heading-2xl",
+  h2: "s-heading-xl",
+  h3: "s-heading-lg",
+  h4: "s-text-base s-font-semibold",
+  h5: "s-text-sm s-font-semibold",
+  h6: "s-text-sm s-font-regular s-italic",
+};
+
+interface HeaderBlockProps {
+  children: React.ReactNode;
+  textColor?: string;
+  forcedTextSize?: string;
+  node?: MarkdownNode;
+}
+
+export const MemoH1Block = memo(
+  ({ children, textColor, forcedTextSize }: HeaderBlockProps) => {
+    return (
+      <h1
+        className={cn(
+          "s-pb-2 s-pt-4",
+          forcedTextSize ? forcedTextSize : markdownHeaderClasses.h1,
+          textColor
+        )}
+      >
+        {children}
+      </h1>
+    );
+  },
+  (prev, next) => {
+    return (
+      sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next)
+    );
+  }
+);
+
+MemoH1Block.displayName = "H1Block";
+
+export const MemoH2Block = memo(
+  ({ children, textColor, forcedTextSize }: HeaderBlockProps) => {
+    return (
+      <h2
+        className={cn(
+          "s-pb-2 s-pt-4",
+          forcedTextSize ? forcedTextSize : markdownHeaderClasses.h2,
+          textColor
+        )}
+      >
+        {children}
+      </h2>
+    );
+  },
+  (prev, next) => {
+    return (
+      sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next)
+    );
+  }
+);
+
+MemoH2Block.displayName = "H2Block";
+
+export const MemoH3Block = memo(
+  ({ children, textColor, forcedTextSize }: HeaderBlockProps) => {
+    return (
+      <h3
+        className={cn(
+          "s-pb-2 s-pt-4",
+          forcedTextSize ? forcedTextSize : markdownHeaderClasses.h3,
+          textColor
+        )}
+      >
+        {children}
+      </h3>
+    );
+  },
+  (prev, next) => {
+    return (
+      sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next)
+    );
+  }
+);
+
+MemoH3Block.displayName = "H3Block";
+
+export const MemoH4Block = memo(
+  ({ children, textColor, forcedTextSize }: HeaderBlockProps) => {
+    return (
+      <h4
+        className={cn(
+          "s-pb-2 s-pt-3",
+          forcedTextSize ? forcedTextSize : markdownHeaderClasses.h4,
+          textColor
+        )}
+      >
+        {children}
+      </h4>
+    );
+  },
+  (prev, next) => {
+    return (
+      sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next)
+    );
+  }
+);
+
+MemoH4Block.displayName = "H4Block";
+
+export const MemoH5Block = memo(
+  ({ children, textColor, forcedTextSize }: HeaderBlockProps) => {
+    return (
+      <h5
+        className={cn(
+          "s-pb-1.5 s-pt-2.5",
+          forcedTextSize ? forcedTextSize : markdownHeaderClasses.h5,
+          textColor
+        )}
+      >
+        {children}
+      </h5>
+    );
+  },
+  (prev, next) => {
+    return (
+      sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next)
+    );
+  }
+);
+
+MemoH5Block.displayName = "H5Block";
+
+export const MemoH6Block = memo(
+  ({ children, textColor, forcedTextSize }: HeaderBlockProps) => {
+    return (
+      <h6
+        className={cn(
+          "s-pb-1.5 s-pt-2.5",
+          forcedTextSize ? forcedTextSize : markdownHeaderClasses.h6,
+          textColor
+        )}
+      >
+        {children}
+      </h6>
+    );
+  },
+  (prev, next) => {
+    return (
+      sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next)
+    );
+  }
+);
+
+MemoH6Block.displayName = "H6Block";

package/src/components/markdown/InputBlock.tsx

@@ -0,0 +1,60 @@
+import React, { memo } from "react";
+import type { ReactMarkdownProps } from "react-markdown/lib/ast-to-react";
+
+import { Checkbox } from "@sparkle/components";
+
+import { MarkdownNode } from "./types";
+import { sameNodePosition } from "./utils";
+
+type InputBlockProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "ref"
+> &
+  ReactMarkdownProps & {
+    ref?: React.Ref<HTMLInputElement>;
+    node?: MarkdownNode;
+  };
+
+export const MemoInputBlock = memo(
+  ({ type, checked, className, onChange, ref, ...props }: InputBlockProps) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    React.useImperativeHandle(ref, () => inputRef.current!);
+
+    if (type !== "checkbox") {
+      return (
+        <input
+          ref={inputRef}
+          type={type}
+          checked={checked}
+          className={className}
+          {...props}
+        />
+      );
+    }
+
+    const handleCheckedChange = (isChecked: boolean) => {
+      onChange?.({
+        target: { type: "checkbox", checked: isChecked },
+      } as React.ChangeEvent<HTMLInputElement>);
+    };
+
+    return (
+      <div className="s-inline-flex s-items-center">
+        <Checkbox
+          ref={inputRef as React.Ref<HTMLButtonElement>}
+          size="xs"
+          checked={checked}
+          className="s-translate-y-[3px]"
+          onCheckedChange={handleCheckedChange}
+        />
+      </div>
+    );
+  },
+  (prev, next) =>
+    sameNodePosition(prev.node, next.node) &&
+    prev.type === next.type &&
+    prev.checked === next.checked &&
+    prev.className === next.className
+);
+
+MemoInputBlock.displayName = "InputBlock";

package/src/components/markdown/LinkBlock.tsx

@@ -0,0 +1,36 @@
+import React, { memo } from "react";
+
+import { sameNodePosition } from "@sparkle/components/markdown/utils";
+import { cn } from "@sparkle/lib/utils";
+
+import { MarkdownNode } from "./types";
+
+interface LinkBlockProps {
+  href?: string;
+  children: React.ReactNode;
+  node?: MarkdownNode;
+}
+
+export const MemoLinkBlock = memo(
+  ({ href, children }: LinkBlockProps) => {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={cn(
+          "s-break-all s-font-semibold s-transition-all s-duration-200 s-ease-in-out hover:s-underline",
+          "s-text-highlight dark:s-text-highlight-night",
+          "hover:s-text-highlight-400 dark:hover:s-text-highlight-400-night",
+          "active:s-text-highlight-dark dark:active:s-text-highlight-dark-night"
+        )}
+      >
+        {children}
+      </a>
+    );
+  },
+  (prev, next) =>
+    sameNodePosition(prev.node, next.node) && prev.href === next.href
+);
+
+MemoLinkBlock.displayName = "LinkBlock";

package/src/components/markdown/List.tsx

@@ -1,21 +1,36 @@
 import { cva } from "class-variance-authority";
-import React from "react";
+import React, { memo } from "react";
 
 import { cn } from "@sparkle/lib";
 
+import { sameNodePosition, sameTextStyling } from "./utils";
+
+type MarkdownPoint = { line?: number; column?: number };
+type MarkdownPosition = { start?: MarkdownPoint; end?: MarkdownPoint };
+type MarkdownNode = {
+  position?: MarkdownPosition;
+};
+
 export const ulBlockVariants = cva(["s-list-disc s-pb-2 s-pl-6"]);
 
 interface UlBlockProps {
   children: React.ReactNode;
   textColor: string;
   textSize: string;
+  node?: MarkdownNode;
 }
 
-export function UlBlock({ children, textColor, textSize }: UlBlockProps) {
-  return (
-    <ul className={cn(ulBlockVariants(), textColor, textSize)}>{children}</ul>
-  );
-}
+export const MemoUlBlock = memo(
+  ({ children, textColor, textSize }: UlBlockProps) => {
+    return (
+      <ul className={cn(ulBlockVariants(), textColor, textSize)}>{children}</ul>
+    );
+  },
+  (prev, next) =>
+    sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next)
+);
+
+MemoUlBlock.displayName = "UlBlock";
 
 export const olBlockVariants = cva(["s-list-decimal s-pb-2 s-pl-6"]);
 
@@ -24,20 +39,24 @@ interface OlBlockProps {
   start?: number;
   textColor: string;
   textSize: string;
+  node?: MarkdownNode;
 }
 
-export function OlBlock({
-  children,
-  start,
-  textColor,
-  textSize,
-}: OlBlockProps) {
-  return (
-    <ol start={start} className={cn(olBlockVariants(), textColor, textSize)}>
-      {children}
-    </ol>
-  );
-}
+export const MemoOlBlock = memo(
+  ({ children, start, textColor, textSize }: OlBlockProps) => {
+    return (
+      <ol start={start} className={cn(olBlockVariants(), textColor, textSize)}>
+        {children}
+      </ol>
+    );
+  },
+  (prev, next) =>
+    sameNodePosition(prev.node, next.node) &&
+    prev.start === next.start &&
+    sameTextStyling(prev, next)
+);
+
+MemoOlBlock.displayName = "OlBlock";
 
 export const liBlockVariants = cva(["s-break-words"]);
 
@@ -46,17 +65,21 @@ interface LiBlockProps {
   className?: string;
   textColor: string;
   textSize: string;
+  node?: MarkdownNode;
 }
 
-export function LiBlock({
-  children,
-  className,
-  textColor,
-  textSize,
-}: LiBlockProps) {
-  return (
-    <li className={cn(liBlockVariants(), textColor, textSize, className)}>
-      {children}
-    </li>
-  );
-}
+export const MemoLiBlock = memo(
+  ({ children, className, textColor, textSize }: LiBlockProps) => {
+    return (
+      <li className={cn(liBlockVariants(), textColor, textSize, className)}>
+        {children}
+      </li>
+    );
+  },
+  (prev, next) =>
+    sameNodePosition(prev.node, next.node) &&
+    prev.className === next.className &&
+    sameTextStyling(prev, next)
+);
+
+MemoLiBlock.displayName = "LiBlock";