@multiplatform.one/markdown 6.0.0

package/src/MdxCodeBlock/mdxCodeBlock.spec.tsx

@@ -0,0 +1,66 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import React from "react";
+import { describe, expect, it } from "vitest";
+import { MDXCodeBlock } from "./index";
+
+describe("MDXCodeBlock", () => {
+  it("should render code content", () => {
+    const codeContent = <span className="token keyword">const</span>;
+
+    const { container } = renderWithProviders(<MDXCodeBlock>{codeContent}</MDXCodeBlock>);
+
+    expect(container.textContent).toContain("const");
+  });
+
+  it("should handle collapsible code blocks", () => {
+    const codeContent = <span>Test code</span>;
+
+    const { getByText, queryByText } = renderWithProviders(
+      <MDXCodeBlock isCollapsible>{codeContent}</MDXCodeBlock>,
+    );
+
+    const toggleButton = getByText("Show code");
+    expect(toggleButton).toBeDefined();
+    expect(queryByText("Test code")).toBeNull();
+  });
+
+  it("should show line numbers for long code blocks", () => {
+    const longCode = Array.from({ length: 15 }, (_, i) => <span key={i}>{`Line ${i + 1}\n`}</span>);
+
+    const { container } = renderWithProviders(<MDXCodeBlock>{longCode}</MDXCodeBlock>);
+
+    const pre = container.querySelector("pre");
+    expect(pre).toBeDefined();
+    expect(pre?.getAttribute("data-line-numbers")).toBe("true");
+  });
+
+  it("should not show line numbers for short code blocks", () => {
+    const shortCode = Array.from({ length: 5 }, (_, i) => <span key={i}>{`Line ${i + 1}\n`}</span>);
+
+    const { container } = renderWithProviders(<MDXCodeBlock>{shortCode}</MDXCodeBlock>);
+
+    const pre = container.querySelector("pre");
+    expect(pre).toBeDefined();
+    expect(pre?.getAttribute("data-line-numbers")).toBe("false");
+  });
+
+  it("should handle copy functionality when not disabled", () => {
+    const codeContent = <span>Copy this code</span>;
+
+    const { container } = renderWithProviders(<MDXCodeBlock>{codeContent}</MDXCodeBlock>);
+
+    const copyButton = container.querySelector('[aria-label="Copy code to clipboard"]');
+    expect(copyButton).toBeDefined();
+  });
+
+  it("should not show copy button when disabled", () => {
+    const codeContent = <span>Cannot copy this</span>;
+
+    const { container } = renderWithProviders(
+      <MDXCodeBlock disableCopy>{codeContent}</MDXCodeBlock>,
+    );
+
+    const copyButton = container.querySelector('[aria-label="Copy code to clipboard"]');
+    expect(copyButton).toBeNull();
+  });
+});

package/src/MdxCodeBlock/mdxCodeBlockContext.ts

@@ -0,0 +1,15 @@
+import type { CodeProps } from "@multiplatform.one/components";
+import type { ReactNode } from "react";
+import type { SizeTokens } from "tamagui";
+import { createContext } from "react";
+
+export interface MDXCodeBlockContextValue extends Partial<Omit<CodeProps, "size">> {
+  children?: ReactNode;
+  disableCopy?: boolean;
+  isCollapsible?: boolean;
+  isHighlightingLines?: boolean;
+  showLineNumbers?: boolean;
+  size?: SizeTokens | string;
+}
+
+export const MDXCodeBlockContext = createContext<MDXCodeBlockContextValue>({});

package/src/Notice/index.tsx

@@ -0,0 +1,76 @@
+import { unwrapText } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import { H3, Paragraph, XStack, YStack, styled } from "tamagui";
+import { AlertTriangleIcon, CheckCircleIcon, InfoIcon } from "../icons";
+
+type NoticeTheme = "yellow" | "blue" | "green" | "red";
+
+function getIcon(theme: NoticeTheme) {
+  switch (theme) {
+    case "blue":
+      return InfoIcon;
+    case "green":
+      return CheckCircleIcon;
+    default:
+      return AlertTriangleIcon;
+  }
+}
+
+export interface NoticeProps {
+  children: ReactNode;
+  theme?: NoticeTheme;
+  disableUnwrap?: boolean;
+  title?: string;
+}
+
+export const NoticeFrame = styled(YStack, {
+  name: "NoticeFrame",
+  borderWidth: 1,
+  borderColor: "$borderColor",
+  backgroundColor: "$background",
+  marginVertical: "$4",
+  position: "relative",
+});
+
+export function Notice({
+  children,
+  theme = "yellow",
+  disableUnwrap,
+  title,
+  ...props
+}: NoticeProps & Record<string, unknown>) {
+  const { knobProps } = useResolvedKnobs();
+  const IconComponent = getIcon(theme);
+
+  return (
+    <NoticeFrame
+      {...knobProps.panelPadding}
+      {...knobProps.gap}
+      borderRadius={knobProps.borderRadius.borderRadius}
+      {...props}
+    >
+      <XStack {...knobProps.gap}>
+        <YStack marginTop={5}>
+          <IconComponent size={20} color="$color10" />
+        </YStack>
+        <YStack flex={1}>
+          {title && (
+            <H3 size="$5" marginBottom={-10} marginTop={5}>
+              {title}
+            </H3>
+          )}
+          <Paragraph
+            paddingVertical={knobProps.gap.gap}
+            color="$color11"
+            marginTop={-3}
+            marginBottom={-3}
+            size="$5"
+          >
+            {disableUnwrap ? children : unwrapText(children)}
+          </Paragraph>
+        </YStack>
+      </XStack>
+    </NoticeFrame>
+  );
+}

package/src/SimpleTable/index.tsx

@@ -0,0 +1,125 @@
+import type { ReactNode } from "react";
+import { Paragraph, ScrollView, Text, useMedia } from "tamagui";
+import { Table } from "@multiplatform.one/table-primitives";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+
+type CellContent = ReactNode;
+
+const markdownPattern =
+  /(\*\*\[([^\]]+)\]\(([^)]+)\)\*\*)|(\[([^\]]+)\]\(([^)]+)\))|(\*\*([^*]+)\*\*)|(`([^`]+)`)/g;
+
+function parseCell(content: CellContent): ReactNode {
+  if (typeof content !== "string") return content;
+
+  const matches = [...content.matchAll(markdownPattern)];
+  if (!matches.length) return content;
+
+  const parts: ReactNode[] = [];
+  let lastIndex = 0;
+
+  for (const match of matches) {
+    const matchIndex = match.index ?? 0;
+    if (matchIndex > lastIndex) {
+      parts.push(content.slice(lastIndex, matchIndex));
+    }
+
+    const key = `m-${matchIndex}`;
+    if (match[1]) {
+      parts.push(
+        <Text key={key} fontWeight="700" color="$blue10">
+          {match[2]}
+        </Text>,
+      );
+    } else if (match[4]) {
+      parts.push(
+        <Text key={key} color="$blue10">
+          {match[5]}
+        </Text>,
+      );
+    } else if (match[7]) {
+      parts.push(
+        <Text key={key} fontWeight="700">
+          {match[8]}
+        </Text>,
+      );
+    } else if (match[9]) {
+      parts.push(
+        <Text
+          key={key}
+          fontFamily="$mono"
+          backgroundColor="$color4"
+          paddingHorizontal="$1.5"
+          paddingVertical="$0.5"
+          borderRadius="$2"
+        >
+          {match[10]}
+        </Text>,
+      );
+    }
+
+    lastIndex = matchIndex + match[0].length;
+  }
+
+  if (lastIndex < content.length) {
+    parts.push(content.slice(lastIndex));
+  }
+
+  return parts.length === 1 ? parts[0] : parts;
+}
+
+export interface SimpleTableProps {
+  headers: CellContent[];
+  rows: CellContent[][];
+}
+
+export function SimpleTable({ headers, rows }: SimpleTableProps) {
+  const { knobProps } = useResolvedKnobs();
+  const media = useMedia();
+  const isMobile = media.sm;
+
+  const table = (
+    <Table
+      borderColor="$borderColor"
+      borderRadius={knobProps.borderRadius.borderRadius}
+      alignCells={{ x: "start", y: "center" }}
+      alignHeaderCells={{ x: "start", y: "center" }}
+      {...(isMobile && { minWidth: 760 })}
+    >
+      <Table.Head>
+        <Table.Row rowLocation="first">
+          {headers.map((header, headerIdx) => (
+            <Table.HeaderCell key={`h-${headerIdx}`}>
+              <Paragraph size="$4" fontWeight="600">
+                {header}
+              </Paragraph>
+            </Table.HeaderCell>
+          ))}
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {rows.map((row, rowIdx) => (
+          <Table.Row
+            key={`r-${rowIdx}`}
+            rowLocation={rowIdx === rows.length - 1 ? "last" : "middle"}
+          >
+            {row.map((cell, cellIdx) => (
+              <Table.Cell key={`c-${rowIdx}-${cellIdx}`}>
+                <Paragraph size="$4">{parseCell(cell)}</Paragraph>
+              </Table.Cell>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  );
+
+  if (isMobile) {
+    return (
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        {table}
+      </ScrollView>
+    );
+  }
+
+  return table;
+}

package/src/Table/index.tsx

@@ -0,0 +1,80 @@
+import type { ReactNode } from "react";
+import { Paragraph, ScrollView, YStack, styled } from "tamagui";
+import { Table as BaseTable } from "@multiplatform.one/table-primitives";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+
+const MDXTableFrame = styled(YStack, {
+  marginVertical: "$4",
+  overflow: "hidden",
+});
+
+export function MDXTable({
+  children,
+  ...props
+}: { children?: ReactNode } & Record<string, unknown>) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+      <MDXTableFrame>
+        <BaseTable
+          borderColor="$borderColor"
+          borderRadius={knobProps.borderRadius.borderRadius}
+          alignCells={{ x: "start", y: "center" }}
+          alignHeaderCells={{ x: "start", y: "center" }}
+          {...props}
+        >
+          {children}
+        </BaseTable>
+      </MDXTableFrame>
+    </ScrollView>
+  );
+}
+
+export function MDXTableHead({
+  children,
+  ...props
+}: { children?: ReactNode } & Record<string, unknown>) {
+  return <BaseTable.Head {...props}>{children}</BaseTable.Head>;
+}
+
+export function MDXTableBody({
+  children,
+  ...props
+}: { children?: ReactNode } & Record<string, unknown>) {
+  return <BaseTable.Body {...props}>{children}</BaseTable.Body>;
+}
+
+export function MDXTableRow({
+  children,
+  ...props
+}: { children?: ReactNode } & Record<string, unknown>) {
+  return (
+    <BaseTable.Row rowLocation="middle" {...props}>
+      {children}
+    </BaseTable.Row>
+  );
+}
+
+export function MDXTableHeaderCell({
+  children,
+  ...props
+}: { children?: ReactNode } & Record<string, unknown>) {
+  return (
+    <BaseTable.HeaderCell {...props}>
+      <Paragraph size="$4" fontWeight="600">
+        {children}
+      </Paragraph>
+    </BaseTable.HeaderCell>
+  );
+}
+
+export function MDXTableCell({
+  children,
+  ...props
+}: { children?: ReactNode } & Record<string, unknown>) {
+  return (
+    <BaseTable.Cell {...props}>
+      <Paragraph size="$4">{children}</Paragraph>
+    </BaseTable.Cell>
+  );
+}

package/src/Tabs/index.tsx

@@ -0,0 +1,76 @@
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { Paragraph, XStack, YStack, styled } from "tamagui";
+
+const TabListFrame = styled(XStack, {
+  borderBottomWidth: 1,
+  borderBottomColor: "$borderColor",
+  marginBottom: "$3",
+  gap: "$1",
+});
+
+const TabTrigger = styled(XStack, {
+  paddingHorizontal: "$4",
+  paddingVertical: "$2",
+  cursor: "pointer",
+  borderBottomWidth: 2,
+  borderBottomColor: "transparent",
+  marginBottom: -1,
+
+  hoverStyle: {
+    backgroundColor: "$color3",
+  },
+
+  variants: {
+    active: {
+      true: {
+        borderBottomColor: "$color10",
+      },
+    },
+  } as const,
+});
+
+export interface MDXTabsProps {
+  items: string[];
+  children: ReactNode[];
+  defaultValue?: string;
+}
+
+export function MDXTabs({ items, children, defaultValue }: MDXTabsProps) {
+  const [activeIndex, setActiveIndex] = useState(() => {
+    if (defaultValue) {
+      const idx = items.indexOf(defaultValue);
+      return idx >= 0 ? idx : 0;
+    }
+    return 0;
+  });
+
+  const childArray = Array.isArray(children) ? children : [children];
+
+  return (
+    <YStack marginVertical="$4">
+      <TabListFrame>
+        {items.map((item, i) => (
+          <TabTrigger key={item} active={i === activeIndex} onPress={() => setActiveIndex(i)}>
+            <Paragraph
+              size="$4"
+              fontWeight={i === activeIndex ? "600" : "400"}
+              color={i === activeIndex ? "$color12" : "$color9"}
+            >
+              {item}
+            </Paragraph>
+          </TabTrigger>
+        ))}
+      </TabListFrame>
+      <YStack>{childArray[activeIndex] ?? null}</YStack>
+    </YStack>
+  );
+}
+
+export interface MDXTabProps {
+  children: ReactNode;
+}
+
+export function MDXTab({ children }: MDXTabProps) {
+  return <YStack>{children}</YStack>;
+}

package/src/Ul/index.ts

@@ -0,0 +1,11 @@
+import { YStack, styled } from "tamagui";
+
+export const UL = styled(YStack, {
+  name: "UL",
+  render: "ul",
+  marginVertical: "$1",
+  marginLeft: "$4",
+  marginRight: "$2",
+});
+
+export type ULProps = React.ComponentProps<typeof UL>;

package/src/Ul/ul.spec.tsx

@@ -0,0 +1,131 @@
+import { screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Text } from "tamagui";
+import { describe, expect, it } from "vitest";
+import { LI } from "../Li";
+import { UL } from "./index";
+
+describe("UL Component", () => {
+  it.skip("should render successfully", () => {
+    const { container } = renderWithProviders(
+      <UL>
+        <LI>Item 1</LI>
+        <LI>Item 2</LI>
+      </UL>,
+    );
+    const ulElement = container.querySelector("ul");
+    expect(ulElement).toBeDefined();
+    expect(ulElement?.children.length).toBe(2);
+  });
+
+  it.skip("should dynamically apply styles when changed", () => {
+    const { container, rerender } = renderWithProviders(
+      <UL>
+        <LI>Item 1</LI>
+        <LI>Item 2</LI>
+      </UL>,
+    );
+    let ulElement = container.querySelector("ul");
+    let computedStyle = window.getComputedStyle(ulElement!);
+    expect(computedStyle.marginTop).toBe("var(--t-space-1)");
+    expect(computedStyle.marginLeft).toBe("var(--t-space-4)");
+    rerender(
+      <UL>
+        <LI>Updated Item 1</LI>
+        <LI>Updated Item 2</LI>
+        <LI>New Item 3</LI>
+      </UL>,
+    );
+    ulElement = container.querySelector("ul");
+    computedStyle = window.getComputedStyle(ulElement!);
+    expect(ulElement?.children.length).toBe(3);
+    expect(ulElement?.children[0].textContent).toContain("Updated Item 1");
+    expect(ulElement?.children[1].textContent).toContain("Updated Item 2");
+    expect(ulElement?.children[2].textContent).toContain("New Item 3");
+    expect(computedStyle.marginTop).toBe("var(--t-space-1)");
+    expect(computedStyle.marginLeft).toBe("var(--t-space-4)");
+  });
+
+  it.skip("should dynamically handle nested list items", () => {
+    const { container, rerender } = renderWithProviders(
+      <UL>
+        <LI>Item 1</LI>
+        <LI>
+          Item 2
+          <UL>
+            <LI>Subitem 1</LI>
+            <LI>Subitem 2</LI>
+          </UL>
+        </LI>
+      </UL>,
+    );
+    let ulElement = container.querySelectorAll("ul");
+    expect(ulElement.length).toBe(2);
+    rerender(
+      <UL>
+        <LI>Item 1</LI>
+        <LI>
+          Item 2
+          <UL>
+            <LI>Updated Subitem 1</LI>
+            <LI>Updated Subitem 2</LI>
+            <LI>New Subitem 3</LI>
+          </UL>
+        </LI>
+      </UL>,
+    );
+    ulElement = container.querySelectorAll("ul");
+    expect(ulElement.length).toBe(2);
+    const nestedUL = ulElement[1];
+    expect(nestedUL?.children.length).toBe(3);
+    expect(nestedUL?.children[0].textContent).toContain("Updated Subitem 1");
+    expect(nestedUL?.children[1].textContent).toContain("Updated Subitem 2");
+    expect(nestedUL?.children[2].textContent).toContain("New Subitem 3");
+  });
+
+  describe("edge cases", () => {
+    it.skip("should handle empty content dynamically", () => {
+      const { container, rerender } = renderWithProviders(<UL />);
+      let ulElement = container.querySelector("ul");
+      expect(ulElement).toBeDefined();
+      expect(ulElement?.children.length).toBe(0);
+      rerender(
+        <UL>
+          <LI>Item 1</LI>
+          <LI>Item 2</LI>
+        </UL>,
+      );
+      ulElement = container.querySelector("ul");
+      expect(ulElement?.children.length).toBe(2);
+    });
+
+    it.skip("should handle dynamic updates for list items with special characters", () => {
+      const { rerender } = renderWithProviders(
+        <UL>
+          <LI>Item &amp; More</LI>
+          <LI>
+            Item with <Text>bold</Text> text
+          </LI>
+        </UL>,
+      );
+      let ulElement = screen.getByRole("list");
+      const liElements = ulElement.querySelectorAll("li");
+      expect(liElements.length).toBe(2);
+      expect(liElements[0].textContent).toContain("Item & More");
+      expect(liElements[1].textContent).toBe("Item with bold text");
+      rerender(
+        <UL>
+          <LI>Updated Item &amp; More</LI>
+          <LI>
+            New Item with <Text>italic</Text> text
+          </LI>
+        </UL>,
+      );
+      ulElement = screen.getByRole("list");
+      const updatedLiElements = ulElement.querySelectorAll("li");
+      expect(updatedLiElements.length).toBe(2);
+      expect(updatedLiElements[0].textContent).toContain("Updated Item & More");
+      expect(updatedLiElements[1].textContent).toBe("New Item with italic text");
+    });
+  });
+});

package/src/Video/index.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from "react";
+import { isWeb, Paragraph, YStack } from "tamagui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+
+export interface VideoProps {
+  src: string;
+  children?: ReactNode;
+  muted?: boolean;
+  autoPlay?: boolean;
+  controls?: boolean;
+  loop?: boolean;
+  poster?: string;
+}
+
+export function Video({
+  src,
+  children,
+  muted = true,
+  autoPlay = true,
+  controls = false,
+  loop = true,
+  poster,
+  ...props
+}: VideoProps & Record<string, unknown>) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <YStack render="figure" marginHorizontal={0} marginVertical="$6" {...props}>
+      {isWeb ? (
+        <YStack
+          render="video"
+          // @ts-expect-error HTML video attributes via render prop
+          src={src}
+          autoPlay={autoPlay}
+          playsInline
+          muted={muted}
+          controls={controls}
+          loop={loop}
+          poster={poster}
+          style={{ width: "100%", display: "block", borderRadius: 8 }}
+        />
+      ) : (
+        <YStack
+          {...knobProps.panelPadding}
+          borderRadius={knobProps.borderRadius.borderRadius}
+          backgroundColor="$color3"
+          alignItems="center"
+          justifyContent="center"
+          minHeight={200}
+        >
+          <Paragraph color="$color9" size="$4">
+            Video playback requires a native video player
+          </Paragraph>
+        </YStack>
+      )}
+      {children ? (
+        <Paragraph render="figcaption" lineHeight={23} marginTop="$2" color="$color9" size="$3">
+          {children}
+        </Paragraph>
+      ) : null}
+    </YStack>
+  );
+}

package/src/components/Blockquote.tsx

@@ -0,0 +1,20 @@
+import { View } from "tamagui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { markdownBlockquoteColors } from "../shared/colorRamps";
+import type { BlockquoteProps } from "../types";
+
+export function Blockquote({ children }: BlockquoteProps) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <View
+      backgroundColor={markdownBlockquoteColors.background.base}
+      borderLeftWidth={4}
+      borderLeftColor={markdownBlockquoteColors.border.base}
+      paddingLeft={knobProps.panelPadding.padding}
+      paddingVertical={knobProps.gap.gap}
+      marginVertical="$3"
+    >
+      {children}
+    </View>
+  );
+}

package/src/components/Break.tsx

@@ -0,0 +1,6 @@
+import { Text } from "tamagui";
+import type { BreakProps } from "../types";
+
+export function Break(_props: BreakProps) {
+  return <Text>{"\n"}</Text>;
+}