@gearbox-protocol/permissionless-ui 1.1.7 → 1.2.0

package/dist/esm/components/markdown-viewer.js

@@ -0,0 +1,200 @@
+import { jsx } from "react/jsx-runtime";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { PageLayout } from "./layout/index.js";
+function slugify(text) {
+  return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-");
+}
+function getTextContent(children) {
+  if (typeof children === "string") {
+    return children;
+  }
+  if (typeof children === "number") {
+    return String(children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(getTextContent).join("");
+  }
+  if (children && typeof children === "object" && "props" in children) {
+    return getTextContent(children.props.children);
+  }
+  return "";
+}
+function extractCustomId(children) {
+  const text = getTextContent(children);
+  const customIdMatch = text.match(/\{#([a-z0-9-]+)\}\s*$/i);
+  if (customIdMatch) {
+    const id = customIdMatch[1];
+    if (typeof children === "string") {
+      const displayText = text.replace(/\s*\{#[a-z0-9-]+\}\s*$/i, "").trim();
+      return { id, displayText };
+    }
+    return { id, displayText: children };
+  }
+  return { id: slugify(text), displayText: children };
+}
+function MarkdownViewer({ content, title }) {
+  const router = useRouter();
+  useEffect(() => {
+    const hash = window.location.hash;
+    if (hash) {
+      setTimeout(() => {
+        const element = document.getElementById(hash.slice(1));
+        if (element) {
+          element.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+      }, 100);
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(
+    PageLayout,
+    {
+      title: title || "",
+      backButton: { href: "/", text: "Back", onClick: () => router.back() },
+      children: /* @__PURE__ */ jsx("article", { className: "prose prose-invert prose-lg max-w-none", children: /* @__PURE__ */ jsx(
+        ReactMarkdown,
+        {
+          remarkPlugins: [remarkGfm],
+          components: {
+            h1: ({ children, ...props }) => {
+              const { id, displayText } = extractCustomId(children);
+              return /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  id,
+                  className: "text-3xl font-bold text-foreground mt-8 mb-4 scroll-mt-24",
+                  ...props,
+                  children: displayText
+                }
+              );
+            },
+            h2: ({ children, ...props }) => {
+              const { id, displayText } = extractCustomId(children);
+              return /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  id,
+                  className: "text-2xl font-semibold text-foreground mt-6 mb-3 scroll-mt-24",
+                  ...props,
+                  children: displayText
+                }
+              );
+            },
+            h3: ({ children, ...props }) => {
+              const { id, displayText } = extractCustomId(children);
+              return /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  id,
+                  className: "text-xl font-semibold text-foreground mt-5 mb-2 scroll-mt-24",
+                  ...props,
+                  children: displayText
+                }
+              );
+            },
+            h4: ({ children, ...props }) => {
+              const { id, displayText } = extractCustomId(children);
+              return /* @__PURE__ */ jsx(
+                "h4",
+                {
+                  id,
+                  className: "text-lg font-semibold text-foreground mt-4 mb-2 scroll-mt-24",
+                  ...props,
+                  children: displayText
+                }
+              );
+            },
+            p: ({ ...props }) => /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "text-muted-foreground mb-4 leading-relaxed",
+                ...props
+              }
+            ),
+            a: ({ href, ...props }) => {
+              const isAnchorLink = href?.startsWith("#");
+              if (isAnchorLink && href) {
+                return /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href,
+                    className: "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
+                    onClick: (e) => {
+                      e.preventDefault();
+                      const targetId = href.slice(1);
+                      const element = document.getElementById(targetId);
+                      if (element) {
+                        element.scrollIntoView({
+                          behavior: "smooth",
+                          block: "start"
+                        });
+                        window.history.pushState(null, "", href);
+                      }
+                    },
+                    ...props
+                  }
+                );
+              }
+              return /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href,
+                  className: "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  ...props
+                }
+              );
+            },
+            ul: ({ ...props }) => /* @__PURE__ */ jsx(
+              "ul",
+              {
+                className: "list-disc list-inside mb-4 text-muted-foreground space-y-2",
+                ...props
+              }
+            ),
+            ol: ({ ...props }) => /* @__PURE__ */ jsx(
+              "ol",
+              {
+                className: "list-decimal list-inside mb-4 text-muted-foreground space-y-2",
+                ...props
+              }
+            ),
+            li: ({ ...props }) => /* @__PURE__ */ jsx("li", { className: "ml-4 text-muted-foreground", ...props }),
+            blockquote: ({ ...props }) => /* @__PURE__ */ jsx(
+              "blockquote",
+              {
+                className: "border-l-4 border-gray-700 pl-4 my-4 italic text-muted-foreground",
+                ...props
+              }
+            ),
+            code: ({ className, ...props }) => {
+              const isInline = !className?.includes("language-");
+              return isInline ? /* @__PURE__ */ jsx(
+                "code",
+                {
+                  className: "bg-gray-800 text-gray-200 px-1.5 py-0.5 rounded text-sm font-mono",
+                  ...props
+                }
+              ) : /* @__PURE__ */ jsx(
+                "code",
+                {
+                  className: "block bg-gray-800 text-gray-200 p-4 rounded-lg my-4 font-mono text-sm overflow-x-auto",
+                  ...props
+                }
+              );
+            },
+            strong: ({ ...props }) => /* @__PURE__ */ jsx("strong", { className: "font-bold text-foreground", ...props }),
+            em: ({ ...props }) => /* @__PURE__ */ jsx("em", { className: "italic text-foreground", ...props })
+          },
+          children: content
+        }
+      ) })
+    }
+  );
+}
+export {
+  MarkdownViewer
+};

package/dist/types/components/buttons/index.d.ts

@@ -2,4 +2,5 @@ export * from "./back-button";
 export * from "./button";
 export * from "./copy-button";
 export * from "./external-button";
+export * from "./navigation-button";
 export * from "./tab-button";

package/dist/types/components/buttons/navigation-button.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface NavigationButtonProps {
+    href: string;
+    text: string;
+    isActive: boolean;
+}
+declare const NavigationButton: React.ForwardRefExoticComponent<NavigationButtonProps & React.RefAttributes<HTMLAnchorElement>>;
+export { NavigationButton };

package/dist/types/components/index.d.ts

@@ -10,7 +10,8 @@ export * from "./dropdown-menu";
 export * from "./editable-table";
 export * from "./input";
 export * from "./label";
-export * from "./page-layout";
+export * from "./layout";
+export * from "./markdown-viewer";
 export * from "./search-bar";
 export * from "./select";
 export * from "./signatures";

package/dist/types/components/layout/app-logo.d.ts

@@ -0,0 +1,4 @@
+export declare function AppLogo({ appName, size, }: {
+    appName: string;
+    size?: "default" | "small";
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/layout/footer.d.ts

@@ -0,0 +1,5 @@
+import { type LegalReferences } from "./legal-disclaimer";
+export declare function Footer({ appName, legalReferences, }: {
+    appName: string;
+    legalReferences: LegalReferences;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/layout/header.d.ts

@@ -0,0 +1,6 @@
+import { type NavigationButtonProps } from "../buttons";
+export declare function Header({ appName, navigation, connectKitButton, }: {
+    appName: string;
+    navigation: NavigationButtonProps[];
+    connectKitButton: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/layout/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./app-logo";
+export * from "./footer";
+export * from "./header";
+export * from "./legal-disclaimer";
+export * from "./page-layout";

package/dist/types/components/layout/legal-disclaimer.d.ts

@@ -0,0 +1,8 @@
+export interface LegalReferences {
+    termsOfService: string;
+    privacyNotice: string;
+    riskDisclosure: string;
+}
+export declare function LegalDisclaimer({ hrefs }: {
+    hrefs: LegalReferences;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/markdown-viewer.d.ts

@@ -0,0 +1,6 @@
+interface MarkdownViewerProps {
+    content: string;
+    title?: string;
+}
+export declare function MarkdownViewer({ content, title }: MarkdownViewerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.1.7",
+  "version": "1.2.0",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -52,6 +52,9 @@
     "next": "15.5.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-markdown": "^9.0.3",
+    "react-markdown-math": "^1.0.2",
+    "remark-gfm": "^4.0.0",
     "sonner": "^1.7.2",
     "styled-jsx": "^5.1.6",
     "tailwind-merge": "^2.6.0",