diff --git a/content/docs/core/schema-renderer.mdx b/content/docs/core/schema-renderer.mdx index a6142c324e..59129201aa 100644 --- a/content/docs/core/schema-renderer.mdx +++ b/content/docs/core/schema-renderer.mdx @@ -78,9 +78,10 @@ ComponentRegistry.register('my-widget', MyWidgetComponent); ```tsx import { SchemaRenderer } from '@object-ui/react'; +import type { PageNodeSchema } from '@object-ui/types'; function App() { - const schema = { + const schema: PageNodeSchema = { type: 'page', title: 'Dashboard', body: [ diff --git a/content/docs/guide/quick-start.md b/content/docs/guide/quick-start.md index c3242ed4ac..fcdfeef315 100644 --- a/content/docs/guide/quick-start.md +++ b/content/docs/guide/quick-start.md @@ -81,8 +81,9 @@ Replace `src/App.tsx` with: import '@object-ui/components'; import '@object-ui/fields'; import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react'; +import type { CardSchema } from '@object-ui/types'; -const schema = { +const schema: CardSchema = { type: 'card', title: 'Team Directory', description: 'Rendered from JSON metadata', diff --git a/content/docs/guide/schema-playground.md b/content/docs/guide/schema-playground.md index 7cbaa7e59e..bfd109be55 100644 --- a/content/docs/guide/schema-playground.md +++ b/content/docs/guide/schema-playground.md @@ -263,9 +263,10 @@ In code, this is a single call: ```tsx import { SchemaRenderer } from '@object-ui/react'; +import type { CardSchema } from '@object-ui/types'; // The schema object (from your editor, API, or file) -const schema = { +const schema: CardSchema = { type: 'card', title: 'Hello', body: { type: 'text', content: 'World' }, diff --git a/content/docs/guide/schema-rendering.md b/content/docs/guide/schema-rendering.md index cd8e202ab0..b3c8366377 100644 --- a/content/docs/guide/schema-rendering.md +++ b/content/docs/guide/schema-rendering.md @@ -21,6 +21,7 @@ The `SchemaRenderer` is the primary component that interprets your JSON schemas: ```tsx import { SchemaRenderer } from '@object-ui/react' import { initializeComponents } from '@object-ui/components' +import type { PageNodeSchema } from '@object-ui/types' // Side-effect import: loading the package runs its own field registration. import '@object-ui/fields' @@ -28,10 +29,10 @@ import '@object-ui/fields' initializeComponents() function App() { - const schema = { + const schema: PageNodeSchema = { type: "page", title: "My Dashboard", - body: { type: "text", content: "Hello" } + body: [{ type: "text", content: "Hello" }] } return diff --git a/content/docs/plugins/plugin-charts.mdx b/content/docs/plugins/plugin-charts.mdx index 093ea97352..fa6cdad98c 100644 --- a/content/docs/plugins/plugin-charts.mdx +++ b/content/docs/plugins/plugin-charts.mdx @@ -35,9 +35,10 @@ The plugin provides two chart APIs: ```tsx // Import once in your app entry point import '@object-ui/plugin-charts' +import type { BarChartSchema } from '@object-ui/plugin-charts' // Use in schemas -const schema = { +const schema: BarChartSchema = { type: 'bar-chart', data: [ { name: 'Jan', value: 400 }, @@ -95,7 +96,9 @@ The plugin provides two different chart components: For basic single-series bar charts, use the simplified `bar-chart` type: ```tsx -const schema = { +import type { BarChartSchema } from '@object-ui/plugin-charts' + +const schema: BarChartSchema = { type: 'bar-chart', data: [ { month: 'Jan', sales: 400 }, @@ -116,7 +119,9 @@ For multi-series charts or line/area charts, use the advanced `chart` type with ##### Bar Chart ```tsx -const schema = { +import type { ChartSchema } from '@object-ui/types' + +const schema: ChartSchema = { type: 'chart', chartType: 'bar', data: [ @@ -139,7 +144,9 @@ const schema = { ##### Line Chart ```tsx -const schema = { +import type { ChartSchema } from '@object-ui/types' + +const schema: ChartSchema = { type: 'chart', chartType: 'line', data: [ @@ -160,7 +167,9 @@ const schema = { ###### Area Chart ```tsx -const schema = { +import type { ChartSchema } from '@object-ui/types' + +const schema: ChartSchema = { type: 'chart', chartType: 'area', data: [ @@ -198,7 +207,9 @@ Each `series` entry names the column it plots (`dataKey`, or the spec spelling ` An `area` chart keeps every key in this example live: `stack` stacks the two primary areas, and the comparison overlay takes both the dash and the opacity (on a `bar` chart the dash would still reach the mark, but a bar has no stroke to dash). Neither key needs `variant: 'comparison'` — a primary series may carry them too, and then it is the overlay's defaults, not the keys, that stay comparison-only. ```tsx -const schema = { +import type { ChartSchema } from '@object-ui/types' + +const schema: ChartSchema = { type: 'chart', chartType: 'area', data: [ diff --git a/content/docs/plugins/plugin-editor.mdx b/content/docs/plugins/plugin-editor.mdx index c4d1681984..5cb59b077c 100644 --- a/content/docs/plugins/plugin-editor.mdx +++ b/content/docs/plugins/plugin-editor.mdx @@ -30,9 +30,10 @@ npm install @object-ui/plugin-editor ```tsx // Import once in your app entry point import '@object-ui/plugin-editor' +import type { CodeEditorSchema } from '@object-ui/plugin-editor' // Use in schemas -const schema = { +const schema: CodeEditorSchema = { type: 'code-editor', value: 'console.log("Hello, World!");', language: 'javascript', @@ -97,7 +98,9 @@ The Monaco Editor supports 100+ programming languages including: ### JavaScript Editor ```tsx -const schema = { +import type { CodeEditorSchema } from '@object-ui/plugin-editor' + +const schema: CodeEditorSchema = { type: 'code-editor', value: 'function hello() {\n console.log("Hello!");\n}', language: 'javascript', @@ -109,7 +112,9 @@ const schema = { ### Read-only Code Display ```tsx -const schema = { +import type { CodeEditorSchema } from '@object-ui/plugin-editor' + +const schema: CodeEditorSchema = { type: 'code-editor', value: 'const API_KEY = "secret";\n// Do not modify', language: 'typescript', @@ -121,7 +126,9 @@ const schema = { ### Python Editor ```tsx -const schema = { +import type { CodeEditorSchema } from '@object-ui/plugin-editor' + +const schema: CodeEditorSchema = { type: 'code-editor', value: 'def hello():\n print("Hello, World!")', language: 'python', diff --git a/content/docs/plugins/plugin-map.mdx b/content/docs/plugins/plugin-map.mdx index 4482a0f31b..8f260024bb 100644 --- a/content/docs/plugins/plugin-map.mdx +++ b/content/docs/plugins/plugin-map.mdx @@ -70,7 +70,9 @@ const schema: ObjectMapSchema = { ### With Static Data ```tsx -const schema = { +import type { ObjectMapSchema } from '@object-ui/types' + +const schema: ObjectMapSchema = { type: 'object-map', staticData: [ { diff --git a/content/docs/plugins/plugin-markdown.mdx b/content/docs/plugins/plugin-markdown.mdx index 9e7dd0475e..94b2fca448 100644 --- a/content/docs/plugins/plugin-markdown.mdx +++ b/content/docs/plugins/plugin-markdown.mdx @@ -22,9 +22,10 @@ npm install @object-ui/plugin-markdown ```tsx // Import once in your app entry point import '@object-ui/plugin-markdown' +import type { MarkdownSchema } from '@object-ui/plugin-markdown' // Use in schemas -const schema = { +const schema: MarkdownSchema = { type: 'markdown', content: '# Hello World\n\nThis is **markdown** text with [links](https://example.com).' } @@ -333,7 +334,9 @@ await updateData('user-123', { name: 'John Doe' }) Use Tailwind Typography plugin for better markdown styling: ```tsx -const schema = { +import type { MarkdownSchema } from '@object-ui/plugin-markdown' + +const schema: MarkdownSchema = { type: 'markdown', content: '# My Document\n\nContent here...', className: 'prose prose-lg prose-slate dark:prose-invert max-w-none' @@ -354,7 +357,9 @@ All markdown content is automatically sanitized using `rehype-sanitize` to preve ```tsx // Safe - HTML tags are sanitized -const schema = { +import type { MarkdownSchema } from '@object-ui/plugin-markdown' + +const schema: MarkdownSchema = { type: 'markdown', content: '**Safe** markdown with ' } diff --git a/scripts/__tests__/check-doc-snippet-types.test.ts b/scripts/__tests__/check-doc-snippet-types.test.ts index 2673ec0aa0..ec5646ff33 100644 --- a/scripts/__tests__/check-doc-snippet-types.test.ts +++ b/scripts/__tests__/check-doc-snippet-types.test.ts @@ -105,8 +105,10 @@ const FENCE = '```'; */ const README_SAMPLE_DOC = 'content/docs/plugins/plugin-markdown.mdx'; // 195 until objectui#6972 replaced two prop-table rows above it with a -// retirement blockquote (+11 lines); re-declared here, as this pin intends. -const README_SAMPLE_FENCE_LINE = 206; +// retirement blockquote (+11 lines); 206 until objectui#8125's annotation sweep +// added one `import type` line to the page's first block (+1 line); +// re-declared here each time, as this pin intends. +const README_SAMPLE_FENCE_LINE = 207; /** * The regex reader objectui#7555 removed from both gates, kept HERE and only