@multiplatform.one/markdown 6.0.0

package/src/ExternalIcon/ExternalIcon.spec.tsx

@@ -0,0 +1,33 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import { ExternalIcon } from "./index";
+
+describe("ExternalIcon Component", () => {
+  it("renders without crashing", () => {
+    const { container } = renderWithProviders(<ExternalIcon />);
+    const svgElement = container.querySelector("svg");
+    expect(svgElement).toBeTruthy();
+  });
+
+  it("renders Svg with correct attributes", () => {
+    const { container } = renderWithProviders(<ExternalIcon />);
+    const svgElement = container.querySelector("svg");
+    expect(svgElement).toHaveAttribute("height", "10");
+    expect(svgElement).toHaveAttribute("width", "10");
+    expect(svgElement).toHaveAttribute("viewBox", "0 0 15 15");
+  });
+
+  it("applies correct opacity style to Svg", () => {
+    const { container } = renderWithProviders(<ExternalIcon />);
+    const svgElement = container.querySelector("svg");
+    expect(svgElement).toHaveStyle("opacity: 0.4");
+  });
+
+  it("contains Path inside Svg", () => {
+    const { container } = renderWithProviders(<ExternalIcon />);
+    const pathElement = container.querySelector("svg path");
+    expect(pathElement).toBeTruthy();
+    expect(pathElement).toHaveAttribute("fill");
+    // fill is now resolved via useTheme() instead of CSS var(--color)
+  });
+});

package/src/ExternalIcon/index.tsx

@@ -0,0 +1,15 @@
+import { Path, Svg } from "@tamagui/react-native-svg";
+import { useTheme } from "tamagui";
+
+export function ExternalIcon() {
+  const theme = useTheme();
+  const color = theme.color?.val ?? "currentColor";
+  return (
+    <Svg style={{ opacity: 0.4 }} width="10" height="10" viewBox="0 0 15 15">
+      <Path
+        d="M3.64645 11.3536C3.45118 11.1583 3.45118 10.8417 3.64645 10.6465L10.2929 4L6 4C5.72386 4 5.5 3.77614 5.5 3.5C5.5 3.22386 5.72386 3 6 3L11.5 3C11.6326 3 11.7598 3.05268 11.8536 3.14645C11.9473 3.24022 12 3.36739 12 3.5L12 9.00001C12 9.27615 11.7761 9.50001 11.5 9.50001C11.2239 9.50001 11 9.27615 11 9.00001V4.70711L4.35355 11.3536C4.15829 11.5488 3.84171 11.5488 3.64645 11.3536Z"
+        fill={color}
+      />
+    </Svg>
+  );
+}

package/src/Hr/hr.spec.tsx

@@ -0,0 +1,18 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { expect, it } from "vitest";
+import { HR } from "./index";
+
+it("renders without crashing", () => {
+  const { container } = renderWithProviders(<HR />);
+  expect(container).toBeTruthy();
+});
+
+it("renders outer YStack with correct basic alignment and structure", () => {
+  const { container } = renderWithProviders(<HR />);
+  const outerYStack = container.firstElementChild as HTMLElement;
+  expect(outerYStack).toBeTruthy();
+  const styleAttr = outerYStack.getAttribute("style") || "";
+  expect(styleAttr.includes("margin-left: auto"));
+  expect(styleAttr.includes("margin-right: auto"));
+  expect(styleAttr.includes("max-width: 50%"));
+});

package/src/Hr/index.tsx

@@ -0,0 +1,7 @@
+import { YStack } from "tamagui";
+
+export const HR = (props: any) => (
+  <YStack marginVertical="$10" marginBottom="$8" marginHorizontal="auto" width="50%" {...props}>
+    <YStack borderBottomColor="$borderColor" borderBottomWidth={1} flex={1} />
+  </YStack>
+);

package/src/Li/index.tsx

@@ -0,0 +1,14 @@
+import { Paragraph, styled } from "tamagui";
+
+export const LI = styled(Paragraph, {
+  name: "LI",
+  display: "list-item" as any,
+  render: "li",
+  size: "$5",
+  paddingBottom: "$1",
+  style: {
+    listStyleType: "disc",
+  },
+});
+
+export type LIProps = React.ComponentProps<typeof LI>;

package/src/Li/li.spec.tsx

@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { LI } from "./index";
+
+describe("LI Component", () => {
+  it("should render without errors", () => {
+    const { getByText } = renderWithProviders(<LI>This is a list item</LI>);
+    expect(getByText("This is a list item")).toBeDefined();
+  });
+
+  it("should have the correct tag", () => {
+    const { container } = renderWithProviders(<LI>This is a list item</LI>);
+    // Tamagui may render as li or as a styled element; ensure list content is present
+    expect(container.textContent).toContain("This is a list item");
+    const listItem = container.querySelector("li") ?? container.querySelector("[role='listitem']");
+    if (listItem) expect(listItem).toBeTruthy();
+  });
+
+  it("should render dynamic content correctly", () => {
+    const { getByText } = renderWithProviders(<LI>Another list item</LI>);
+    expect(getByText("Another list item")).toBeDefined();
+  });
+
+  it("should have display: list-item", () => {
+    const { container } = renderWithProviders(<LI>This is a list item</LI>);
+    expect(container.textContent).toContain("This is a list item");
+    const listItem = container.querySelector("li") ?? container.querySelector("[role='listitem']");
+    if (listItem) {
+      const display = window.getComputedStyle(listItem).display;
+      expect(display).toBe("list-item");
+    }
+  });
+});

package/src/Markdown.stories.tsx

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import { Markdown } from "./Markdown";
+
+const meta: Meta<typeof Markdown> = {
+  title: "Markdown/Markdown",
+  component: Markdown,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Cross-platform markdown renderer with Shiki syntax highlighting. Supports GFM (tables, strikethrough, task lists).",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Markdown>;
+
+const sampleMarkdown = `# Hello World
+
+This is **bold**, _italic_, and ~~strikethrough~~ text.
+
+## Features
+
+- Markdown parsing with remark
+- GFM support (tables, task lists)
+- Shiki syntax highlighting
+- Cross-platform (web + native)
+
+### Task Lists
+
+- [x] Completed task
+- [ ] Incomplete task
+- [ ] Another task
+
+## Code Blocks
+
+Inline \`code\` looks like this.
+
+\`\`\`typescript
+interface User {
+  id: string;
+  name: string;
+  email: string;
+}
+
+function greet(user: User): string {
+  return \`Hello, \${user.name}!\`;
+}
+\`\`\`
+
+\`\`\`python
+def fibonacci(n: int) -> int:
+    if n <= 1:
+        return n
+    return fibonacci(n - 1) + fibonacci(n - 2)
+
+print(fibonacci(10))
+\`\`\`
+
+## Blockquotes
+
+> This is a blockquote.
+> It can span multiple lines.
+
+## Tables
+
+| Feature | Web | Native |
+|---------|-----|--------|
+| Markdown | Yes | Yes |
+| Syntax Highlighting | Yes | Yes |
+| Tables | Yes | Yes |
+| HTML | Yes | No |
+
+## Links and Images
+
+[Visit GitHub](https://github.com)
+
+---
+
+That's a horizontal rule above.
+`;
+
+export const Main: Story = {
+  name: "Main",
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <Markdown>{sampleMarkdown}</Markdown>
+    </YStack>
+  ),
+};
+
+export const CodeBlock: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <Markdown>
+        {`\`\`\`javascript
+const express = require('express');
+const app = express();
+
+app.get('/', (req, res) => {
+  res.json({ message: 'Hello World!' });
+});
+
+app.listen(3000, () => {
+  console.log('Server running on port 3000');
+});
+\`\`\``}
+      </Markdown>
+    </YStack>
+  ),
+};
+
+export const Simple: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <Markdown>
+        {`# Simple Example
+
+Just some **bold** and _italic_ text with a [link](https://example.com).`}
+      </Markdown>
+    </YStack>
+  ),
+};

package/src/Markdown.tsx

@@ -0,0 +1,62 @@
+/**
+ * Main Markdown component
+ * Cross-platform markdown renderer with Shiki syntax highlighting
+ */
+import { useMemo } from "react";
+import { View, type ViewProps, useThemeName } from "tamagui";
+import { parseMarkdown } from "./parser";
+import { renderMarkdown } from "./renderer";
+import type { CodeTheme, MarkdownProps } from "./types";
+
+export interface MarkdownComponentProps extends MarkdownProps, Omit<ViewProps, "children"> {}
+
+/**
+ * Render markdown string as cross-platform React components
+ *
+ * @example
+ * ```tsx
+ * <Markdown>
+ *   # Hello World
+ *
+ *   This is **bold** and _italic_ text.
+ *
+ *   ```javascript
+ *   const x = 1;
+ *   ```
+ * </Markdown>
+ * ```
+ */
+export function Markdown({
+  children,
+  components,
+  codeTheme = "auto",
+  ...viewProps
+}: MarkdownComponentProps) {
+  const themeName = useThemeName();
+
+  // Resolve "auto" theme to light/dark based on current Tamagui theme
+  const resolvedCodeTheme = useMemo((): Exclude<CodeTheme, "auto"> => {
+    if (codeTheme !== "auto") {
+      return codeTheme;
+    }
+    // Check if theme name contains "dark" (e.g., "dark", "dark_blue", etc.)
+    const isDark = themeName?.includes("dark") ?? false;
+    return isDark ? "github-dark" : "github-light";
+  }, [codeTheme, themeName]);
+
+  const rendered = useMemo(() => {
+    if (!children || typeof children !== "string") {
+      return null;
+    }
+
+    try {
+      const ast = parseMarkdown(children);
+      return renderMarkdown(ast, { components, codeTheme: resolvedCodeTheme });
+    } catch (error) {
+      console.error("Markdown parsing error:", error);
+      return null;
+    }
+  }, [children, components, resolvedCodeTheme]);
+
+  return <View {...viewProps}>{rendered}</View>;
+}

package/src/Mdx/index.tsx

@@ -0,0 +1,32 @@
+import { useMDXComponents } from "@mdx-js/react";
+import type { DebugProp } from "@tamagui/web";
+import type { MDXComponents } from "mdx/types";
+import { useCompileAndEvaluateMdx } from "../hooks";
+import { mdxComponents } from "../mdxComponents";
+
+export interface MDXProps {
+  children: string;
+  components?: MDXComponents;
+  debug?: DebugProp;
+}
+
+const logger = console;
+
+export function MDX({ children, debug, ...props }: MDXProps) {
+  const components = useMDXComponents();
+  const { Component, code, frontmatter } = useCompileAndEvaluateMdx(children);
+  if (!Component) return <>{}</>;
+  if (debug) {
+    logger.debug("MDX", { frontmatter });
+    logger.debug(code);
+  }
+  return (
+    <Component
+      components={{
+        ...mdxComponents,
+        ...components,
+        ...props.components,
+      }}
+    />
+  );
+}

package/src/Mdx/mdx.spec.tsx

@@ -0,0 +1,118 @@
+import { screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import type { MDXComponents } from "mdx/types";
+import { YStack } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useCompileAndEvaluateMdx } from "../hooks";
+import { MDX } from "./index";
+
+const DummyComponent = ({ components }: { components: MDXComponents }) => {
+  return <YStack data-testid="dummy">{JSON.stringify(components)}</YStack>;
+};
+vi.mock("../hooks", () => ({
+  useCompileAndEvaluateMdx: vi.fn(),
+}));
+vi.mock("@mdx-js/react", () => ({
+  useMDXComponents: () => ({ hookKey: "hookValue" }),
+}));
+vi.mock("../mdxComponents", () => ({
+  mdxComponents: { mdxKey: "mdxValue" },
+}));
+
+describe("MDX component", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+  it("renders an empty fragment if no component is returned from the hook", () => {
+    (useCompileAndEvaluateMdx as any).mockReturnValue({
+      Component: null,
+      code: "some code",
+      frontmatter: { test: "frontmatter" },
+    });
+    renderWithProviders(
+      <>
+        <MDX children="hello" />
+      </>,
+    );
+    // When Component is null, no MDX content should be rendered
+    const mdxContent = screen.queryByText("hello");
+    expect(mdxContent).toBeNull();
+  });
+
+  it("renders the evaluated MDX component and passes the merged components prop", () => {
+    const TestDummyComponent = ({ components }: { components: MDXComponents }) => {
+      // Check if components are properly merged by checking keys
+      const componentKeys = Object.keys(components || {});
+      return <YStack data-testid="dummy">{componentKeys.join(",")}</YStack>;
+    };
+
+    (useCompileAndEvaluateMdx as any).mockReturnValue({
+      Component: TestDummyComponent,
+      code: "compiledCode",
+      frontmatter: { test: true },
+    });
+    const additionalComponents = {
+      p: ({ children }: any) => <div data-testid="custom-p">{children}</div>,
+    };
+    renderWithProviders(
+      <>
+        <MDX children="hello" components={additionalComponents} />
+      </>,
+    );
+    const dummyDiv = screen.getByTestId("dummy");
+    const componentKeys = dummyDiv.textContent?.split(",") || [];
+    expect(componentKeys).toContain("mdxKey");
+    expect(componentKeys).toContain("hookKey");
+    expect(componentKeys).toContain("p");
+  });
+
+  it("calls debug logging when the debug prop is provided", () => {
+    const debugSpy = vi.spyOn(console, "debug").mockImplementation(() => {});
+    (useCompileAndEvaluateMdx as any).mockReturnValue({
+      Component: DummyComponent,
+      code: "compiledCode",
+      frontmatter: { test: "frontmatter" },
+    });
+    renderWithProviders(
+      <>
+        <MDX children="hello" debug={true} />
+      </>,
+    );
+    expect(debugSpy).toHaveBeenCalledWith("MDX", {
+      frontmatter: { test: "frontmatter" },
+    });
+    expect(debugSpy).toHaveBeenCalledWith("compiledCode");
+    debugSpy.mockRestore();
+  });
+
+  it("does not call debug logging when the debug prop is false", () => {
+    const debugSpy = vi.spyOn(console, "debug").mockImplementation(() => {});
+    (useCompileAndEvaluateMdx as any).mockReturnValue({
+      Component: DummyComponent,
+      code: "compiledCode",
+      frontmatter: { test: "frontmatter" },
+    });
+    renderWithProviders(
+      <>
+        <MDX children="hello" debug={false} />
+      </>,
+    );
+    expect(debugSpy).not.toHaveBeenCalled();
+    debugSpy.mockRestore();
+  });
+
+  it("does not throw an error when an empty children string is provided", () => {
+    (useCompileAndEvaluateMdx as any).mockReturnValue({
+      Component: DummyComponent,
+      code: "",
+      frontmatter: {},
+    });
+    expect(() =>
+      renderWithProviders(
+        <>
+          <MDX children="hello" />
+        </>,
+      ),
+    ).not.toThrow();
+  });
+});

package/src/MdxCodeBlock/index.tsx

@@ -0,0 +1,168 @@
+import {
+  Code,
+  ErrorBoundary,
+  HighlightedCode,
+  Pre,
+  useClipboard,
+  useShikiTokens,
+} from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { LinearGradient } from "@tamagui/linear-gradient";
+import rangeParser from "parse-numeric-range";
+import type { ReactNode } from "react";
+import { useContext, useMemo, useState } from "react";
+import { Button, ScrollView, Spacer, TooltipSimple, XStack, YStack } from "tamagui";
+import { CheckCircleIcon, ClipboardIcon } from "../icons";
+
+const zIndex = { localTop: 100 };
+import type { MDXCodeBlockContextValue } from "./mdxCodeBlockContext";
+import { MDXCodeBlockContext } from "./mdxCodeBlockContext";
+
+export interface MDXCodeBlockProps extends MDXCodeBlockContextValue {
+  className?: string;
+  id?: string;
+}
+
+/**
+ * Extract raw code text from MDX children.
+ * Children are typically a plain string, but this handles nested elements for safety.
+ */
+function extractCodeText(children: ReactNode): string {
+  if (typeof children === "string") return children;
+  if (Array.isArray(children)) return children.map(extractCodeText).join("");
+  if (children && typeof children === "object" && "props" in children) {
+    return extractCodeText((children as any).props?.children);
+  }
+  return String(children ?? "");
+}
+
+/**
+ * Extract language from className like "language-tsx" -> "tsx"
+ */
+function extractLanguage(className?: string): string {
+  if (!className) return "text";
+  const match = className.match(/language-(\w+)/);
+  return match?.[1] || "text";
+}
+
+export function MDXCodeBlock(props: MDXCodeBlockProps) {
+  const {
+    children,
+    className,
+    disableCopy,
+    id,
+    isCollapsible,
+    isHighlightingLines,
+    showLineNumbers: propShowLineNumbers,
+    size,
+    line,
+    ...codeProps
+  } = { ...useContext(MDXCodeBlockContext), ...props } as MDXCodeBlockProps & {
+    line?: string;
+  };
+
+  const { knobProps } = useResolvedKnobs();
+  const codeText = useMemo(() => extractCodeText(children).replace(/\n$/, ""), [children]);
+  const language = useMemo(() => extractLanguage(className), [className]);
+  const tokens = useShikiTokens(codeText, language);
+
+  const lines = tokens?.length ?? codeText.split("\n").length;
+  const showLineNumbers = propShowLineNumbers ?? lines > 10;
+  const [isCollapsed, setIsCollapsed] = useState(isCollapsible);
+  const isLong = lines > 22;
+  const [isCutoff, setIsCutoff] = useState(isLong && !isCollapsible);
+  const { hasCopied, onCopy } = useClipboard(codeText);
+
+  const highlightLines = useMemo(() => {
+    if (!isHighlightingLines || !line) return [];
+    return rangeParser(line);
+  }, [isHighlightingLines, line]);
+
+  return (
+    <YStack position="relative" marginBottom="$4">
+      <ErrorBoundary>
+        <YStack
+          position="relative"
+          {...(isCutoff && {
+            maxHeight: 400,
+            overflow: "hidden",
+            borderRadius: knobProps.borderRadius.borderRadius,
+          })}
+        >
+          {(!isCollapsed || !isCollapsible) && isCutoff && (
+            <LinearGradient
+              position="absolute"
+              bottom={0}
+              left={0}
+              right={0}
+              height={200}
+              colors={["$backgroundTransparent", "$background"]}
+              zIndex={zIndex.localTop}
+            >
+              <Spacer flex={1} />
+              <Button onPress={() => setIsCutoff(!isCutoff)} alignSelf="center">
+                Show more
+              </Button>
+              <Spacer size="$4" />
+            </LinearGradient>
+          )}
+          {(!isCollapsed || !isCollapsible) && (
+            <Pre
+              padding={0}
+              marginBottom={0}
+              id={id}
+              data-line-numbers={showLineNumbers ? "true" : "false"}
+            >
+              <ScrollView
+                style={{ width: "100%" }}
+                contentContainerStyle={{ minWidth: "100%" }}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+              >
+                <Code
+                  backgroundColor="transparent"
+                  flex={1}
+                  {...knobProps.panelPadding}
+                  size={(size ?? "$5") as any}
+                  {...codeProps}
+                >
+                  <HighlightedCode
+                    tokens={tokens}
+                    highlightLines={highlightLines}
+                    showLineNumbers={showLineNumbers}
+                  >
+                    {codeText}
+                  </HighlightedCode>
+                </Code>
+              </ScrollView>
+            </Pre>
+          )}
+          <XStack position="absolute" top="$3" right="$3" {...knobProps.gap}>
+            {(!isCollapsed || !isCollapsible) && !disableCopy && (
+              <TooltipSimple label={hasCopied ? "Copied" : "Copy to clipboard"}>
+                <Button
+                  aria-label="Copy code to clipboard"
+                  size="$2"
+                  icon={hasCopied ? <CheckCircleIcon size={14} /> : <ClipboardIcon size={14} />}
+                  onPress={onCopy}
+                  $xs={{
+                    display: "none",
+                  }}
+                />
+              </TooltipSimple>
+            )}
+            {isCollapsible && (
+              <Button
+                accessibilityLabel="Show or hide code"
+                size="$2"
+                onPress={() => setIsCollapsed((x) => !x)}
+              >
+                {isCollapsed ? "Show code" : "Hide code"}
+              </Button>
+            )}
+          </XStack>
+        </YStack>
+      </ErrorBoundary>
+    </YStack>
+  );
+}