@multiplatform.one/markdown 7.7.4 → 7.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/markdown",
-  "version": "7.7.4",
+  "version": "7.8.0",
   "description": "Cross-platform markdown renderer with Shiki syntax highlighting for React and React Native",
   "keywords": [
     "cross-platform",
@@ -82,14 +82,15 @@
     "tamagui": "2.7.6",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.1.0",
-    "@multiplatform.one/components": "7.7.4",
-    "@multiplatform.one/platform": "7.7.4",
-    "@multiplatform.one/router": "7.7.4",
-    "@multiplatform.one/table-primitives": "7.7.4",
-    "@multiplatform.one/theme": "7.7.4"
+    "@multiplatform.one/router": "7.8.0",
+    "@multiplatform.one/components": "7.8.0",
+    "@multiplatform.one/platform": "7.8.0",
+    "@multiplatform.one/theme": "7.8.0",
+    "@multiplatform.one/table-primitives": "7.8.0"
   },
   "devDependencies": {
     "@tamagui/build": "2.7.6",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/mdast": "^4.0.4",
     "@types/mdx": "^2.0.13",
@@ -98,9 +99,9 @@
     "react": "19.2.5",
     "react-dom": "19.2.5",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "7.7.4",
-    "@multiplatform.one/storybook": "7.7.4",
-    "@multiplatform.one/test-utils": "7.7.4"
+    "@multiplatform.one/storybook": "7.8.0",
+    "@multiplatform.one/config": "7.8.0",
+    "@multiplatform.one/test-utils": "7.8.0"
   },
   "peerDependencies": {
     "react": "^19.1.0",

package/src/Table/MDXTable.spec.tsx

@@ -0,0 +1,37 @@
+/**
+ * MDXTable spec (MPO-177). Stories live in Markdown/Tables; this file is the
+ * colocated lock that the MDX table family still paints real table semantics.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import {
+  MDXTable,
+  MDXTableBody,
+  MDXTableCell,
+  MDXTableHead,
+  MDXTableHeaderCell,
+  MDXTableRow,
+} from "./index";
+
+describe("MDXTable", () => {
+  it("renders the family into table/thead/tbody/tr/th/td", () => {
+    const { container } = renderWithProviders(
+      <MDXTable>
+        <MDXTableHead>
+          <MDXTableRow>
+            <MDXTableHeaderCell>Header</MDXTableHeaderCell>
+          </MDXTableRow>
+        </MDXTableHead>
+        <MDXTableBody>
+          <MDXTableRow>
+            <MDXTableCell>Data</MDXTableCell>
+          </MDXTableRow>
+        </MDXTableBody>
+      </MDXTable>,
+    );
+    expect(container.querySelector("table")).toBeTruthy();
+    expect(container.querySelector("thead th")?.textContent).toContain("Header");
+    expect(container.querySelector("tbody td")?.textContent).toContain("Data");
+  });
+});

package/src/Tabs/MDXTabs.spec.tsx

@@ -0,0 +1,73 @@
+/**
+ * MDXTabs spec (MPO-177). Stories live in Markdown/Media; this file is the
+ * colocated lock that the LC-16 wrapper still paints a real tablist.
+ */
+
+import { fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Text } from "tamagui";
+import { describe, expect, it } from "vitest";
+import { MDXTab, MDXTabs } from "./index";
+
+describe("MDXTabs (canonical Tabs)", () => {
+  const renderTabs = (defaultValue?: string) =>
+    renderWithProviders(
+      <MDXTabs items={["npm", "pnpm"]} defaultValue={defaultValue}>
+        {[
+          <MDXTab key="npm">
+            <Text>npm panel</Text>
+          </MDXTab>,
+          <MDXTab key="pnpm">
+            <Text>pnpm panel</Text>
+          </MDXTab>,
+        ]}
+      </MDXTabs>,
+    );
+
+  it("renders a real tablist with aria-selected tabs", () => {
+    renderTabs();
+    expect(screen.getByRole("tablist")).toBeInTheDocument();
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs).toHaveLength(2);
+    expect(tabs[0]).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText("npm panel")).toBeInTheDocument();
+  });
+
+  it("switches panels on click", () => {
+    renderTabs();
+    fireEvent.click(screen.getByText("pnpm"));
+    expect(screen.getByText("pnpm panel")).toBeInTheDocument();
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[1]).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("respects defaultValue addressed by label", () => {
+    renderTabs("pnpm");
+    expect(screen.getByText("pnpm panel")).toBeInTheDocument();
+  });
+
+  it("handles duplicate labels via index-suffixed values", () => {
+    renderWithProviders(
+      <MDXTabs items={["same", "same"]}>
+        {[
+          <MDXTab key="a">
+            <Text>first panel</Text>
+          </MDXTab>,
+          <MDXTab key="b">
+            <Text>second panel</Text>
+          </MDXTab>,
+        ]}
+      </MDXTabs>,
+    );
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs).toHaveLength(2);
+    fireEvent.click(tabs[1]!);
+    expect(screen.getByText("second panel")).toBeInTheDocument();
+  });
+
+  it("renders nothing dangerous for empty items", () => {
+    const { container } = renderWithProviders(<MDXTabs items={[]}>{[]}</MDXTabs>);
+    expect(container).toBeTruthy();
+    expect(screen.queryAllByRole("tab")).toHaveLength(0);
+  });
+});

package/src/Video/Video.spec.tsx

@@ -0,0 +1,48 @@
+/**
+ * Video spec (MPO-177). Stories live in Markdown/Media; this file is the
+ * colocated anatomy lock (web <video> + SB-M-1227 empty-src omission).
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import { Video } from "./index";
+
+describe("Video (web)", () => {
+  it("renders a muted, autoplaying, looping inline <video> inside a figure", () => {
+    const { container } = renderWithProviders(<Video src="https://example.com/clip.mp4" />);
+    expect(container.querySelector("figure")).toBeTruthy();
+    const video = container.querySelector("video");
+    expect(video).toBeTruthy();
+    expect(video!.getAttribute("src")).toBe("https://example.com/clip.mp4");
+    // Boolean media attributes reflect the safe-autoplay defaults.
+    expect(video!.hasAttribute("autoplay")).toBe(true);
+    expect(video!.hasAttribute("loop")).toBe(true);
+    expect(video!.hasAttribute("playsinline")).toBe(true);
+    expect(video!.hasAttribute("controls")).toBe(false);
+  });
+
+  it("omits the <video> element entirely for an empty src (SB-M-1227)", () => {
+    const { container } = renderWithProviders(<Video src="" />);
+    expect(container.querySelector("video")).toBeNull();
+    expect(container.querySelector("figure")).toBeTruthy();
+  });
+
+  it("forwards controls/poster and renders children as a figcaption", () => {
+    const { container } = renderWithProviders(
+      <Video src="https://example.com/clip.mp4" controls poster="https://example.com/poster.png">
+        A demo caption
+      </Video>,
+    );
+    const video = container.querySelector("video");
+    expect(video!.hasAttribute("controls")).toBe(true);
+    expect(video!.getAttribute("poster")).toBe("https://example.com/poster.png");
+    const caption = container.querySelector("figcaption");
+    expect(caption).toBeTruthy();
+    expect(caption!.textContent).toBe("A demo caption");
+  });
+
+  it("renders no figcaption without children", () => {
+    const { container } = renderWithProviders(<Video src="https://example.com/clip.mp4" />);
+    expect(container.querySelector("figcaption")).toBeNull();
+  });
+});

package/src/components/markdownPrimitives.spec.tsx

@@ -1,17 +1,15 @@
 /**
- * LC-16 wrapper specs — the markdown package renders code blocks, inline
- * code, and doc tabs through the canonical `@multiplatform.one/components`
- * implementations (census items #9 / #12); these tests pin the wrappers to
- * the canonical anatomy.
+ * LC-16 wrapper specs — the markdown package renders code blocks and inline
+ * code through the canonical `@multiplatform.one/components` implementations
+ * (census items #9 / #12); these tests pin the wrappers to that anatomy.
+ * Doc tabs live in Tabs/MDXTabs.spec.tsx (MPO-177).
  */
 
-import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Text } from "tamagui";
 import { describe, expect, it } from "vitest";
 import { CodeBlock } from "./CodeBlock";
 import { InlineCode } from "./InlineCode";
-import { MDXTab, MDXTabs } from "../Tabs";
 
 describe("markdown CodeBlock (canonical code family)", () => {
   it("renders code content inside a real <code> element", async () => {
@@ -56,66 +54,3 @@ describe("markdown InlineCode (canonical CodeInline)", () => {
     expect(code!.textContent).toBe("npm install");
   });
 });
-
-describe("MDXTabs (canonical Tabs)", () => {
-  const renderTabs = (defaultValue?: string) =>
-    renderWithProviders(
-      <MDXTabs items={["npm", "pnpm"]} defaultValue={defaultValue}>
-        {[
-          <MDXTab key="npm">
-            <Text>npm panel</Text>
-          </MDXTab>,
-          <MDXTab key="pnpm">
-            <Text>pnpm panel</Text>
-          </MDXTab>,
-        ]}
-      </MDXTabs>,
-    );
-
-  it("renders a real tablist with aria-selected tabs", () => {
-    renderTabs();
-    expect(screen.getByRole("tablist")).toBeInTheDocument();
-    const tabs = screen.getAllByRole("tab");
-    expect(tabs).toHaveLength(2);
-    expect(tabs[0]).toHaveAttribute("aria-selected", "true");
-    expect(screen.getByText("npm panel")).toBeInTheDocument();
-  });
-
-  it("switches panels on click", () => {
-    renderTabs();
-    fireEvent.click(screen.getByText("pnpm"));
-    expect(screen.getByText("pnpm panel")).toBeInTheDocument();
-    const tabs = screen.getAllByRole("tab");
-    expect(tabs[1]).toHaveAttribute("aria-selected", "true");
-  });
-
-  it("respects defaultValue addressed by label", () => {
-    renderTabs("pnpm");
-    expect(screen.getByText("pnpm panel")).toBeInTheDocument();
-  });
-
-  it("handles duplicate labels via index-suffixed values", () => {
-    renderWithProviders(
-      <MDXTabs items={["same", "same"]}>
-        {[
-          <MDXTab key="a">
-            <Text>first panel</Text>
-          </MDXTab>,
-          <MDXTab key="b">
-            <Text>second panel</Text>
-          </MDXTab>,
-        ]}
-      </MDXTabs>,
-    );
-    const tabs = screen.getAllByRole("tab");
-    expect(tabs).toHaveLength(2);
-    fireEvent.click(tabs[1]!);
-    expect(screen.getByText("second panel")).toBeInTheDocument();
-  });
-
-  it("renders nothing dangerous for empty items", () => {
-    const { container } = renderWithProviders(<MDXTabs items={[]}>{[]}</MDXTabs>);
-    expect(container).toBeTruthy();
-    expect(screen.queryAllByRole("tab")).toHaveLength(0);
-  });
-});

package/src/docBlocks.spec.tsx

@@ -1,7 +1,7 @@
 /**
  * Doc building-block specs — the MDX-facing blocks docs compose directly:
- * `Video` (web <video> anatomy + SB-M-1227 empty-src omission), `MDXAside`
- * (cutoff + "Show more" expansion) and `MDXNote` (Alert-based note box).
+ * `MDXAside` (cutoff + "Show more" expansion) and `MDXNote` (Alert-based
+ * note box). Video anatomy lives in Video/Video.spec.tsx (MPO-177).
  */
 
 import { fireEvent, screen } from "@testing-library/react";
@@ -9,47 +9,6 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Text } from "tamagui";
 import { describe, expect, it } from "vitest";
 import { MDXAside, MDXNote } from "./Aside";
-import { Video } from "./Video";
-
-describe("Video (web)", () => {
-  it("renders a muted, autoplaying, looping inline <video> inside a figure", () => {
-    const { container } = renderWithProviders(<Video src="https://example.com/clip.mp4" />);
-    expect(container.querySelector("figure")).toBeTruthy();
-    const video = container.querySelector("video");
-    expect(video).toBeTruthy();
-    expect(video!.getAttribute("src")).toBe("https://example.com/clip.mp4");
-    // Boolean media attributes reflect the safe-autoplay defaults.
-    expect(video!.hasAttribute("autoplay")).toBe(true);
-    expect(video!.hasAttribute("loop")).toBe(true);
-    expect(video!.hasAttribute("playsinline")).toBe(true);
-    expect(video!.hasAttribute("controls")).toBe(false);
-  });
-
-  it("omits the <video> element entirely for an empty src (SB-M-1227)", () => {
-    const { container } = renderWithProviders(<Video src="" />);
-    expect(container.querySelector("video")).toBeNull();
-    expect(container.querySelector("figure")).toBeTruthy();
-  });
-
-  it("forwards controls/poster and renders children as a figcaption", () => {
-    const { container } = renderWithProviders(
-      <Video src="https://example.com/clip.mp4" controls poster="https://example.com/poster.png">
-        A demo caption
-      </Video>,
-    );
-    const video = container.querySelector("video");
-    expect(video!.hasAttribute("controls")).toBe(true);
-    expect(video!.getAttribute("poster")).toBe("https://example.com/poster.png");
-    const caption = container.querySelector("figcaption");
-    expect(caption).toBeTruthy();
-    expect(caption!.textContent).toBe("A demo caption");
-  });
-
-  it("renders no figcaption without children", () => {
-    const { container } = renderWithProviders(<Video src="https://example.com/clip.mp4" />);
-    expect(container.querySelector("figcaption")).toBeNull();
-  });
-});
 
 describe("MDXAside", () => {
   it("renders string content as a plain aside without a cutoff", () => {