@multiplatform.one/markdown 6.1.0 → 6.4.0

package/src/stories/Callouts.stories.tsx

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Button, Paragraph, YStack } from "tamagui";
+import { MDXAside, MDXNote } from "../Aside";
+import { Notice } from "../Notice";
+
+const meta: Meta = {
+  title: "Markdown/Callouts",
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "MDX callouts: MDXAside (cutoff + Show more), MDXNote, Notice (semantic themes).",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const AsideString: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <MDXAside>A short string aside renders without the cutoff frame.</MDXAside>
+    </YStack>
+  ),
+};
+
+export const AsideCutoff: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <MDXAside>
+        <YStack>
+          {Array.from({ length: 20 }, (_, i) => (
+            <Paragraph key={i}>
+              Aside body line {i + 1}: long enough content to exceed the 300px max height so the
+              gradient cutoff and Show more button appear.
+            </Paragraph>
+          ))}
+        </YStack>
+      </MDXAside>
+    </YStack>
+  ),
+};
+
+export const AsideEdge: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <MDXAside>
+        <Paragraph>Short element child (still gets cutoff frame per implementation).</Paragraph>
+      </MDXAside>
+      <MDXAside>{""}</MDXAside>
+    </YStack>
+  ),
+};
+
+export const NoteStory: Story = {
+  name: "MDXNote",
+  args: { children: "A knob-driven note body." },
+  argTypes: { children: { control: "text" } },
+  render: (args: any) => (
+    <YStack maxWidth={700} padding="$4">
+      <MDXNote>{args.children}</MDXNote>
+      <MDXNote>
+        <Paragraph>
+          Nested content note with a long body. Lorem ipsum dolor sit amet, consectetur adipiscing
+          elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Paragraph>
+        <Button size="$2" alignSelf="flex-start">
+          interactive child
+        </Button>
+      </MDXNote>
+      <MDXNote>{""}</MDXNote>
+      <YStack width={220}>
+        <MDXNote>Narrow width note that must wrap cleanly.</MDXNote>
+      </YStack>
+    </YStack>
+  ),
+};
+
+export const NoticeStory: Story = {
+  name: "Notice",
+  args: { theme: "yellow", title: "Heads up", children: "A knob-driven notice body." },
+  argTypes: {
+    theme: { control: "select", options: ["yellow", "blue", "green", "red"] },
+    title: { control: "text" },
+    children: { control: "text" },
+  },
+  render: (args: any) => (
+    <YStack maxWidth={700} padding="$4">
+      <Notice theme={args.theme} title={args.title}>
+        {args.children}
+      </Notice>
+    </YStack>
+  ),
+};
+
+export const NoticeVariants: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <Notice theme="yellow" title="Warning">
+        Yellow warning notice.
+      </Notice>
+      <Notice theme="blue" title="Info">
+        Blue info notice.
+      </Notice>
+      <Notice theme="green" title="Success">
+        Green success notice.
+      </Notice>
+      <Notice theme="red" title="Error">
+        Red error notice.
+      </Notice>
+    </YStack>
+  ),
+};
+
+export const NoticeEdge: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <Notice>{""}</Notice>
+      <Notice theme="blue">
+        A long notice body without a title. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </Notice>
+      <Notice theme="green" disableUnwrap>
+        <YStack gap="$2">
+          <Paragraph>Interactive children:</Paragraph>
+          <Button size="$2" alignSelf="flex-start">
+            press me
+          </Button>
+        </YStack>
+      </Notice>
+      <YStack style={{ direction: "rtl" } as any}>
+        <Notice theme="red" title="خطأ">
+          {"إشعار خطأ بالعربية للتحقق من الاتجاه"}
+        </Notice>
+      </YStack>
+      <Notice theme="yellow" title="Outer">
+        <Notice theme="blue" title="Nested">
+          nested notice
+        </Notice>
+      </Notice>
+    </YStack>
+  ),
+};

package/src/stories/Code.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import { CodeBlock } from "../components/CodeBlock";
+import { MDXCodeBlock } from "../MdxCodeBlock";
+
+const meta: Meta = {
+  title: "Markdown/Code",
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component: "Markdown CodeBlock (Shiki token renderer) and MDXCodeBlock (Pre/Code + copy).",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+const tsSample = `interface User {
+  id: string;
+  name: string;
+}
+
+function greet(user: User): string {
+  return \`Hello, \${user.name}!\`;
+}`;
+
+const longLineSample = `const reallyLongLine = someFunction(argumentOne, argumentTwo, argumentThree, argumentFour, argumentFive, argumentSix, argumentSeven, argumentEight, argumentNine);\nshort();`;
+
+export const CodeBlockBaseline: Story = {
+  args: { lang: "typescript", theme: "auto" },
+  argTypes: {
+    lang: { control: "text" },
+    theme: { control: "select", options: ["auto", "github-dark", "github-light"] },
+  },
+  render: (args: any) => (
+    <YStack maxWidth={700} padding="$4">
+      <CodeBlock lang={args.lang} theme={args.theme}>
+        {tsSample}
+      </CodeBlock>
+    </YStack>
+  ),
+};
+
+export const CodeBlockEdge: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <CodeBlock lang="notareallanguage">{"unknown language fallback"}</CodeBlock>
+      <CodeBlock lang="typescript">{""}</CodeBlock>
+      <CodeBlock lang="javascript">{longLineSample}</CodeBlock>
+    </YStack>
+  ),
+};
+
+const mdxLines = Array.from({ length: 14 }, (_, i) => `const line${i + 1} = ${i + 1};`).join("\n");
+const mdxLong = Array.from({ length: 30 }, (_, i) => `console.log("line ${i + 1}");`).join("\n");
+
+export const MdxCodeBlockBaseline: Story = {
+  name: "MDXCodeBlock",
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <MDXCodeBlock className="language-tsx">{tsSample}</MDXCodeBlock>
+    </YStack>
+  ),
+};
+
+export const MdxCodeBlockLineNumbers: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <MDXCodeBlock className="language-ts">{mdxLines}</MDXCodeBlock>
+    </YStack>
+  ),
+};
+
+export const MdxCodeBlockCutoff: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <MDXCodeBlock className="language-js">{mdxLong}</MDXCodeBlock>
+    </YStack>
+  ),
+};
+
+export const MdxCodeBlockCollapsible: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <MDXCodeBlock className="language-ts" isCollapsible>
+        {tsSample}
+      </MDXCodeBlock>
+    </YStack>
+  ),
+};
+
+export const MdxCodeBlockHighlight: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <MDXCodeBlock className="language-ts" isHighlightingLines {...({ line: "2-3" } as any)}>
+        {tsSample}
+      </MDXCodeBlock>
+    </YStack>
+  ),
+};
+
+export const MdxCodeBlockEdge: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <MDXCodeBlock className="language-notareallanguage">{"weird lang"}</MDXCodeBlock>
+      <MDXCodeBlock>{""}</MDXCodeBlock>
+      <MDXCodeBlock className="language-js" disableCopy>
+        {"// copy disabled"}
+      </MDXCodeBlock>
+      <MDXCodeBlock className="language-js">{longLineSample}</MDXCodeBlock>
+    </YStack>
+  ),
+};

package/src/stories/Inline.stories.tsx

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Text, YStack } from "tamagui";
+import { Break } from "../components/Break";
+import { InlineCode } from "../components/InlineCode";
+// Inline runs inherit prose type from the mapped Paragraph (T-VALUE), so the
+// stories host them in the markdown Paragraph, not the raw tamagui primitive.
+import { Paragraph } from "../components/Paragraph";
+import { Strong, Emphasis, Strikethrough } from "../components/InlineStyles";
+import { Link } from "../components/Link";
+import { ExternalIcon } from "../ExternalIcon";
+
+const meta: Meta = {
+  title: "Markdown/Inline",
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Markdown inline renderers: Strong, Emphasis, Strikethrough, InlineCode, Link, ExternalIcon, Break.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const InlineBaseline: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4" gap="$2">
+      <Paragraph>
+        Plain text with <Strong>bold</Strong>, <Emphasis>italic</Emphasis>, and{" "}
+        <Strikethrough>struck</Strikethrough> inline runs.
+      </Paragraph>
+      <Paragraph>
+        Nested:{" "}
+        <Strong>
+          bold with <Emphasis>italic inside</Emphasis> and{" "}
+          <Strikethrough>strike inside</Strikethrough>
+        </Strong>
+        .
+      </Paragraph>
+      <Paragraph>
+        Mixed scripts: <Strong>मोटा 太字 عريض</Strong> and <Emphasis>तिरछा 斜体 مائل</Emphasis> and{" "}
+        <Strikethrough>हटाया 删除 محذوف</Strikethrough>.
+      </Paragraph>
+      <Paragraph>
+        Empty runs render nothing: [<Strong>{""}</Strong>][<Emphasis>{""}</Emphasis>][
+        <Strikethrough>{""}</Strikethrough>]
+      </Paragraph>
+    </YStack>
+  ),
+};
+
+export const StrikethroughLinked: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <Paragraph>
+        A struck link:{" "}
+        <Strikethrough>
+          <Link href="https://example.com">deprecated docs page</Link>
+        </Strikethrough>{" "}
+        keeps both decorations.
+      </Paragraph>
+    </YStack>
+  ),
+};
+
+export const InlineCodeStory: Story = {
+  name: "InlineCode",
+  args: { children: "const x = useResolvedKnobs()" },
+  argTypes: { children: { control: "text" } },
+  render: (args: any) => (
+    <YStack maxWidth={700} padding="$4" gap="$2">
+      <Paragraph>
+        Inline <InlineCode>{args.children}</InlineCode> in a sentence.
+      </Paragraph>
+      <Paragraph>
+        Long code wraps:{" "}
+        <InlineCode>
+          {
+            "veryLongIdentifierName.chained.property.access.that.keeps.going.and.going.until.it.must.wrap(argumentOne, argumentTwo)"
+          }
+        </InlineCode>{" "}
+        without a baseline jump.
+      </Paragraph>
+      <Paragraph>
+        Bidi code: <InlineCode>{"const שלום = 'עולם'"}</InlineCode> and empty:{" "}
+        <InlineCode>{""}</InlineCode>.
+      </Paragraph>
+    </YStack>
+  ),
+};
+
+export const LinkVariants: Story = {
+  args: { href: "https://example.com", children: "external link" },
+  argTypes: {
+    href: { control: "text" },
+    children: { control: "text" },
+  },
+  render: (args: any) => (
+    <YStack maxWidth={700} padding="$4" gap="$2">
+      <Paragraph>
+        Knob-driven: <Link href={args.href}>{args.children}</Link>
+      </Paragraph>
+      <Paragraph>
+        Internal <Link href="/docs/intro">/docs/intro</Link> · hash{" "}
+        <Link href="#section">#section</Link> · mailto{" "}
+        <Link href="mailto:test@example.com">mail me</Link> · tel{" "}
+        <Link href="tel:+15125551234">call</Link>
+      </Paragraph>
+      <Paragraph>
+        Unsafe URL policy: <Link href="javascript:alert(1)">javascript: link</Link>
+      </Paragraph>
+      <Paragraph>
+        Empty label link: [<Link href="https://example.com">{""}</Link>] and long label:{" "}
+        <Link href="https://example.com/very/long/path">
+          a very long link label that should wrap across multiple lines while staying underlined and
+          keeping its pointer affordance the whole way through the wrap
+        </Link>
+      </Paragraph>
+    </YStack>
+  ),
+};
+
+export const ExternalIconStory: Story = {
+  name: "ExternalIcon",
+  render: () => (
+    <YStack maxWidth={300} padding="$4" gap="$2">
+      <Paragraph>
+        Bare icon: <ExternalIcon />
+      </Paragraph>
+      <Paragraph>
+        A wrapped external link label that runs long enough to break onto a second line{" "}
+        <Text display="inline-flex" y={2}>
+          <ExternalIcon />
+        </Text>
+      </Paragraph>
+    </YStack>
+  ),
+};
+
+export const BreakStory: Story = {
+  name: "Break",
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <Paragraph>
+        line one
+        <Break />
+        line two after a single break
+        <Break />
+        <Break />
+        line three after consecutive breaks
+        <Break />
+      </Paragraph>
+      <Paragraph>
+        <Break />
+        leading break above this line
+      </Paragraph>
+    </YStack>
+  ),
+};

package/src/stories/Mdx.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Paragraph, YStack } from "tamagui";
+import { MDX } from "../Mdx";
+import { Notice } from "../Notice";
+
+const meta: Meta = {
+  title: "Markdown/MDX",
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Runtime-compiled MDX renderer (compile + evaluate in the browser, mdxComponents mapping).",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+const mdxDoc = `---
+title: Sample
+---
+
+# MDX Heading 1
+
+## Heading 2
+
+### Heading 3 with anchor
+
+Paragraph with **bold**, _italic_, \`inline code\`, an [internal link](/docs) and an
+[external link](https://example.com).
+
+- list item one
+- list item two
+
+1. ordered one
+2. ordered two
+
+> A blockquote paragraph.
+
+---
+
+\`\`\`tsx
+const x: number = 1;
+export default x;
+\`\`\`
+`;
+
+export const Baseline: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <MDX>{mdxDoc}</MDX>
+    </YStack>
+  ),
+};
+
+export const CustomComponentAndProps: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <MDX
+        components={{
+          Notice: Notice as any,
+        }}
+      >
+        {`export const level = 40 + 2;
+
+<Notice theme="blue" title="From MDX">The answer is {level}.</Notice>
+
+Nested components:
+
+<Notice theme="yellow" title="Outer"><Notice theme="green" title="Inner">nested</Notice></Notice>
+`}
+      </MDX>
+    </YStack>
+  ),
+};
+
+export const EmptySource: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4" borderWidth={1} borderColor="$color5">
+      <Paragraph>Frame around an empty MDX source:</Paragraph>
+      <MDX>{""}</MDX>
+    </YStack>
+  ),
+};
+
+export const InvalidSource: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <Paragraph>Invalid MDX below (unclosed JSX tag) — should fail predictably:</Paragraph>
+      <MDX>{"# Broken\n\n<Unclosed\n"}</MDX>
+      <Paragraph>Text after the invalid MDX renderer.</Paragraph>
+    </YStack>
+  ),
+};
+
+export const MissingComponentMapping: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <Paragraph>MDX referencing an unmapped component:</Paragraph>
+      <MDX>{"<NotMapped>hello</NotMapped>\n"}</MDX>
+      <Paragraph>Text after the MDX renderer.</Paragraph>
+    </YStack>
+  ),
+};

package/src/stories/Media.stories.tsx

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Paragraph, YStack } from "tamagui";
+import { MarkdownImage } from "../components/Image";
+import { MDXTabs, MDXTab } from "../Tabs";
+import { Video } from "../Video";
+
+const meta: Meta = {
+  title: "Markdown/Media",
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component: "Markdown media renderers: MarkdownImage, Video, MDXTabs/MDXTab.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+// 1x1 blue png data uri — no network dependency
+const bluePixel =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
+
+export const ImageStory: Story = {
+  name: "MarkdownImage",
+  args: { src: bluePixel, alt: "blue pixel" },
+  argTypes: {
+    src: { control: "text" },
+    alt: { control: "text" },
+  },
+  render: (args: any) => (
+    <YStack maxWidth={700} padding="$4">
+      <MarkdownImage src={args.src} alt={args.alt} />
+    </YStack>
+  ),
+};
+
+export const ImageEdge: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <Paragraph>Broken src:</Paragraph>
+      <MarkdownImage src="https://invalid.invalid/broken.png" alt="broken image" />
+      <Paragraph>Missing src:</Paragraph>
+      <MarkdownImage src="" alt="" title="title only" />
+    </YStack>
+  ),
+};
+
+export const VideoStory: Story = {
+  name: "Video",
+  args: {
+    src: "",
+    muted: true,
+    autoPlay: false,
+    controls: true,
+    loop: false,
+  },
+  argTypes: {
+    src: { control: "text" },
+    muted: { control: "boolean" },
+    autoPlay: { control: "boolean" },
+    controls: { control: "boolean" },
+    loop: { control: "boolean" },
+  },
+  render: (args: any) => (
+    <YStack maxWidth={700} padding="$4">
+      <Video
+        src={args.src}
+        muted={args.muted}
+        autoPlay={args.autoPlay}
+        controls={args.controls}
+        loop={args.loop}
+      >
+        A caption for the video figure.
+      </Video>
+    </YStack>
+  ),
+};
+
+export const VideoEdge: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <Paragraph>Invalid source, no caption:</Paragraph>
+      <Video src="https://invalid.invalid/broken.mp4" />
+      <Paragraph>Empty source with caption:</Paragraph>
+      <Video src="">caption under an empty-source video</Video>
+    </YStack>
+  ),
+};
+
+export const TabsStory: Story = {
+  name: "MDXTabs",
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <MDXTabs items={["npm", "pnpm", "yarn"]} defaultValue="pnpm">
+        <MDXTab>
+          <Paragraph>npm install package</Paragraph>
+        </MDXTab>
+        <MDXTab>
+          <Paragraph>pnpm add package</Paragraph>
+        </MDXTab>
+        <MDXTab>
+          <Paragraph>yarn add package</Paragraph>
+        </MDXTab>
+      </MDXTabs>
+    </YStack>
+  ),
+};
+
+export const TabsEdge: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <Paragraph>Single tab:</Paragraph>
+      <MDXTabs items={["only"]}>
+        {[
+          <MDXTab key="only">
+            <Paragraph>single panel</Paragraph>
+          </MDXTab>,
+        ]}
+      </MDXTabs>
+      <Paragraph>More tabs than panels (missing matching panel):</Paragraph>
+      <MDXTabs items={["one", "two", "three"]}>
+        {[
+          <MDXTab key="one">
+            <Paragraph>panel one only</Paragraph>
+          </MDXTab>,
+        ]}
+      </MDXTabs>
+      <Paragraph>Long + duplicate labels:</Paragraph>
+      <MDXTabs
+        items={["a very long tab label that should overflow the tab list at narrow widths", "dup"]}
+      >
+        {[
+          <MDXTab key="long">
+            <Paragraph>long label panel</Paragraph>
+          </MDXTab>,
+          <MDXTab key="dup">
+            <Paragraph>dup panel</Paragraph>
+          </MDXTab>,
+        ]}
+      </MDXTabs>
+      <Paragraph>Empty items:</Paragraph>
+      <MDXTabs items={[]}>{[]}</MDXTabs>
+    </YStack>
+  ),
+};