From 82b1c989d01481569b36754d858253ce3eb80697 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 6 Sep 2026 13:04:45 +0000 Subject: [PATCH] docs(layout): compile every README snippet and leave the UNGATED_DOCS ledger MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Part of objectui#5174 — batch 22 of the UNGATED_DOCS burn-down. `packages/layout/README.md` leaves the ledger and all 7 of its ts/tsx blocks now compile against the built types. The gate file's only change is the two lines of that one entry; its strictness region is byte-identical. Two repairs, both inside ts/tsx blocks: - The "Usage with React Router" block was REFUSED rather than judged: it imports `react-router-dom`, which `@object-ui/layout` declares as a peer dependency, so the specifier reaches a snippet only through this repository's own root install and the gate's bound turns it away. Its three router components are now stood in for by `declare const`s typed to what the block uses them as, which keeps the AppShell / SidebarNav composition — this package's own surface — genuinely checked. That refusal was masking a real diagnostic: `Dashboard` was never defined. - The same block routed `/users` to `Users`, the lucide-react icon it imports for the sidebar, so the page rendered a glyph where its content belonged. An icon is a valid component, so no diagnostic could catch it; the route element is now a separately named page component. - The "Customization" block used `AppShell` with no import (TS2304 twice) and now self-imports it. No `packages/**` source touched, no public type widened, no gate loosened, and no new fragment marker: declared fragments stay at 158. Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01FhBNJcLRZLe8M87VcUgpKr --- packages/layout/README.md | 24 ++++++++++++++++++++++-- scripts/check-doc-snippet-types.mjs | 2 -- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/layout/README.md b/packages/layout/README.md index f497d997ec..cd39170bb8 100644 --- a/packages/layout/README.md +++ b/packages/layout/README.md @@ -199,10 +199,22 @@ composed in JSX rather than authored as a JSON node. Full guide: The layout components are designed to work seamlessly with React Router: ```typescript -import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import type { ComponentType, ReactNode } from 'react'; import { AppShell, SidebarNav } from '@object-ui/layout'; import { Home, Users } from 'lucide-react'; +// `react-router-dom` is a PEER dependency (see Installation above): your app +// installs it, this package does not. These three stand in for what you would +// import from it, so the composition below is still checked against the shipped +// `@object-ui/layout` types. +declare const BrowserRouter: ComponentType<{ children?: ReactNode }>; +declare const Routes: ComponentType<{ children?: ReactNode }>; +declare const Route: ComponentType<{ path: string; element: ReactNode }>; + +// Your own page components, one per route. +declare const Dashboard: ComponentType; +declare const UsersPage: ComponentType; + function App() { return ( @@ -219,7 +231,7 @@ function App() { > } /> - } /> + } /> @@ -227,6 +239,12 @@ function App() { } ``` +A route's `element` takes **your page component**, never the `lucide-react` icon +of the same name. This example used to route `/users` to `Users` — the icon it +imports for the sidebar — so the page rendered a 24-pixel glyph where its content +belonged. Nothing catches that for you: an icon is a valid component, so the +route type-checks either way, which is why the two are named apart here. + ## Customization `AppShell` takes a single `className`, and it lands on the `
` content @@ -235,6 +253,8 @@ per-slot `headerClassName` / `sidebarClassName` — the navbar and the sidebar a nodes **you** build, so style them where you build them: ```typescript +import { AppShell } from '@object-ui/layout'; + My App} diff --git a/scripts/check-doc-snippet-types.mjs b/scripts/check-doc-snippet-types.mjs index 9beae7db59..610eee05e8 100644 --- a/scripts/check-doc-snippet-types.mjs +++ b/scripts/check-doc-snippet-types.mjs @@ -717,8 +717,6 @@ const UNGATED_DOCS = { 'self-contained or declared, plus a way to declare a block whose rejection IS the point.', 'packages/fields/README.md': '2 undefined-name diagnostic(s) — blocks continue an earlier block, or use ambient names the page never defines; 1 unresolved-module diagnostic(s)', - 'packages/layout/README.md': - '3 undefined-name diagnostic(s) — blocks continue an earlier block, or use ambient names the page never defines; 3 unresolved-module diagnostic(s)', 'packages/plugin-ai/README.md': '5 undefined-name diagnostic(s) — blocks continue an earlier block, or use ambient names the page never defines; plus TS2322x3 — candidate real defects, un-triaged', 'packages/plugin-charts/README.md':