diff --git a/packages/providers/README.md b/packages/providers/README.md index f5e07bb534..3e986a6de1 100644 --- a/packages/providers/README.md +++ b/packages/providers/README.md @@ -12,12 +12,24 @@ pnpm add @object-ui/providers ## Providers +Every example below compiles against this package's built types. The values your +own app supplies are written as `declare const` stand-ins so each block stands +alone, and each stand-in is typed from the prop it is passed to — so the bound +the example teaches is the bound the package actually declares. + ### DataSourceProvider Generic data source context that decouples ObjectUI from ObjectStack. ```tsx -import { DataSourceProvider } from '@object-ui/providers'; +import type { ReactNode } from 'react'; +import { DataSourceProvider, type DataSourceProviderProps } from '@object-ui/providers'; + +// `DataSourceProviderProps['dataSource']` is declared `any` today, so this +// stand-in inherits `any`: the compiler checks nothing about the adapter's +// shape here (objectui#8160, objectui#7912 track that laundering). +declare const myCustomDataSource: DataSourceProviderProps['dataSource']; +declare const App: () => ReactNode; @@ -29,7 +41,13 @@ import { DataSourceProvider } from '@object-ui/providers'; Schema/metadata management for objects, fields, and views. ```tsx -import { MetadataProvider } from '@object-ui/providers'; +import type { ReactNode } from 'react'; +import { MetadataProvider, type MetadataProviderProps } from '@object-ui/providers'; + +// `MetadataProviderProps['metadata']` is declared `any` today — same bound as +// `dataSource` above, so nothing about this object's shape is checked here. +declare const myMetadata: MetadataProviderProps['metadata']; +declare const App: () => ReactNode; @@ -40,9 +58,15 @@ import { MetadataProvider } from '@object-ui/providers'; Theme management with system theme detection. +`defaultTheme` takes a `ThemePreference` (`auto | light | dark | system`); both +props are optional. + ```tsx +import type { ReactNode } from 'react'; import { ThemeProvider } from '@object-ui/providers'; +declare const App: () => ReactNode; + @@ -50,15 +74,31 @@ import { ThemeProvider } from '@object-ui/providers'; ## Usage Example +`DataSourceProvider` and `MetadataProvider` both declare `children` as required, +so each one needs a real element inside it — a placeholder comment is not a +child. + ```tsx -import { DataSourceProvider, MetadataProvider, ThemeProvider } from '@object-ui/providers'; +import type { ReactNode } from 'react'; +import { + DataSourceProvider, + MetadataProvider, + ThemeProvider, + type DataSourceProviderProps, + type MetadataProviderProps, +} from '@object-ui/providers'; + +declare const myDataSource: DataSourceProviderProps['dataSource']; +declare const myMetadata: MetadataProviderProps['metadata']; +// Your own component tree goes here. +declare const AppContent: () => ReactNode; function App() { return ( - {/* Your app components */} + diff --git a/scripts/check-doc-snippet-types.mjs b/scripts/check-doc-snippet-types.mjs index aafad4af4c..9a427c58d5 100644 --- a/scripts/check-doc-snippet-types.mjs +++ b/scripts/check-doc-snippet-types.mjs @@ -789,8 +789,6 @@ const UNGATED_DOCS = { '2 parse diagnostic(s) — blocks fenced `ts` that are bare object literals or elided bodies', 'packages/plugin-tree/README.md': '3 parse diagnostic(s) — blocks fenced `ts` that are bare object literals or elided bodies', - 'packages/providers/README.md': - '7 undefined-name diagnostic(s) — blocks continue an earlier block, or use ambient names the page never defines; plus TS2741x1 — candidate real defects, un-triaged', }; // ── Fence scanning ───────────────────────────────────────────────────────────