[WIP] Update official documentation based on existing features#327
[WIP] Update official documentation based on existing features#327
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Adds a new “Utilities & Tools” documentation section and publishes initial docs pages for the project’s developer tooling packages.
Changes:
- Introduces a new
utilities/docs section with pages for CLI, create-plugin, runner, data-objectstack, and the VS Code extension - Wires the new section into docs navigation (
content/docs/meta.json) and the main docs landing page - Adds cross-links from existing guides (architecture, plugins) to the new utilities docs
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 34 comments.
Show a summary per file
| File | Description |
|---|---|
| content/docs/utilities/cli.mdx | New CLI documentation page (commands, schema formats, config, examples) |
| content/docs/utilities/create-plugin.mdx | New create-plugin documentation page (scaffold workflow, examples, conventions) |
| content/docs/utilities/data-objectstack.mdx | New ObjectStack adapter documentation page (installation, API, examples) |
| content/docs/utilities/runner.mdx | New Runner documentation page (usage, structure, extension guidance) |
| content/docs/utilities/vscode-extension.mdx | New VS Code extension documentation page (features, commands, settings) |
| content/docs/utilities/index.md | New utilities landing page aggregating all tools |
| content/docs/utilities/meta.json | Adds utilities section page ordering |
| content/docs/meta.json | Adds utilities to top-level docs navigation |
| content/docs/index.md | Adds utilities section to the main docs homepage |
| content/docs/guide/plugins.md | Adds links from plugin guide to utilities docs |
| content/docs/guide/architecture.md | Adds utilities list and link in the architecture guide |
| ? Component name: AwesomeComponent | ||
| ? Component type: awesome-component | ||
| ? License: MIT |
There was a problem hiding this comment.
The prompt list doesn’t match what the CLI actually asks. The implementation (packages/create-plugin/src/index.ts) prompts for name (if missing), description, and author only—no component name/type or license. Please adjust the documented prompts to match the real ones.
| ? Component name: AwesomeComponent | |
| ? Component type: awesome-component | |
| ? License: MIT |
| 2. **Import in `src/main.tsx`:** | ||
|
|
||
| ```typescript | ||
| import '@object-ui/plugin-yourplugin' | ||
| ``` |
There was a problem hiding this comment.
This suggests importing plugins in src/main.tsx, but the current runner imports plugins in src/App.tsx (packages/runner/src/App.tsx). Please update the instructions to point to the correct file (or change the runner to import from main.tsx).
| ### 1. Setup Provider | ||
|
|
||
| Wrap your app with the `ObjectStackProvider`: | ||
|
|
||
| ```typescript | ||
| import { ObjectStackProvider } from '@object-ui/data-objectstack' | ||
| import { SchemaRenderer } from '@object-ui/react' | ||
|
|
||
| function App() { | ||
| return ( | ||
| <ObjectStackProvider | ||
| apiUrl="https://api.example.com" | ||
| apiKey="your-api-key" | ||
| > | ||
| <SchemaRenderer schema={schema} /> | ||
| </ObjectStackProvider> | ||
| ) | ||
| } | ||
| ``` |
There was a problem hiding this comment.
This section describes a React ObjectStackProvider, but the package currently exports ObjectStackAdapter / createObjectStackAdapter (no provider component) in packages/data-objectstack/src/index.ts and packages/data-objectstack/README.md. Please rewrite the quick start to show creating the adapter and passing it into the renderer (per the existing package README).
| - **Inquirer** - Interactive prompts | ||
| - **Chalk** - Terminal colors | ||
| - **Ora** - Loading spinners |
There was a problem hiding this comment.
The dependency list is incorrect: @object-ui/create-plugin uses commander + prompts (and does not depend on Inquirer or Ora). See packages/create-plugin/package.json. Please update this list to reflect the actual dependencies.
| - **Inquirer** - Interactive prompts | |
| - **Chalk** - Terminal colors | |
| - **Ora** - Loading spinners | |
| - **commander** - CLI command and argument parsing | |
| - **prompts** - Interactive prompts | |
| - **Chalk** - Terminal colors |
| **Usage:** | ||
| 1. Open a schema file | ||
| 2. Run command | ||
| 3. React component code is copied to clipboard | ||
|
|
There was a problem hiding this comment.
Export to React is documented as copying code to the clipboard, but the implementation opens a new editor tab with generated TSX (packages/vscode-extension/src/extension.ts, exportToReact). Please update the usage text to match actual behavior.
|
|
||
| - **[ObjectStack Adapter](/docs/utilities/data-objectstack)** - Connect to ObjectStack backends | ||
| ```typescript | ||
| import { ObjectStackProvider } from '@object-ui/data-objectstack' |
There was a problem hiding this comment.
ObjectStackProvider is referenced here, but @object-ui/data-objectstack does not export a provider component (it exports createObjectStackAdapter). Please update this snippet to the actual integration pattern (create adapter + pass into the renderer/provider) to prevent broken imports.
| import { ObjectStackProvider } from '@object-ui/data-objectstack' | |
| import { createObjectStackAdapter } from '@object-ui/data-objectstack' | |
| import { SchemaRendererProvider } from '@object-ui/react' | |
| const objectStack = createObjectStackAdapter({ | |
| endpoint: 'https://api.my-objectstack-instance.com', | |
| }) | |
| export function App() { | |
| return ( | |
| <SchemaRendererProvider dataSource={objectStack}> | |
| {/* your schema-driven UI here */} | |
| </SchemaRendererProvider> | |
| ) | |
| } |
| "api": "http://localhost:3000/api/users", | ||
| "method": "GET" |
There was a problem hiding this comment.
The dataSource example shape is inconsistent with the actual DataFetchConfig type: dataSource.api can be a string or an APIRequest object (packages/types/src/api-types.ts), so method should be inside api when you need it (instead of being a sibling key). As written, method would be ignored by strict consumers/validators.
| "api": "http://localhost:3000/api/users", | |
| "method": "GET" | |
| "api": { | |
| "url": "http://localhost:3000/api/users", | |
| "method": "GET" | |
| } |
| **Note:** The `@objectstack/client` package is a peer dependency and must be installed separately. | ||
|
|
There was a problem hiding this comment.
@objectstack/client is documented as a peer dependency that must be installed separately, but packages/data-objectstack/package.json lists it under dependencies. Please update this note to reflect the actual dependency type/installation behavior.
| Reference ObjectStack data sources in your schemas: | ||
|
|
||
| ```json | ||
| { | ||
| "type": "data-table", | ||
| "dataSource": { | ||
| "type": "objectstack", | ||
| "object": "users", | ||
| "query": { | ||
| "filters": [ | ||
| { | ||
| "field": "status", | ||
| "operator": "eq", | ||
| "value": "active" | ||
| } | ||
| ], | ||
| "sort": [ | ||
| { | ||
| "field": "createdAt", | ||
| "direction": "desc" | ||
| } | ||
| ], | ||
| "limit": 50 | ||
| } | ||
| }, | ||
| "columns": [ | ||
| { | ||
| "key": "name", | ||
| "title": "Name" | ||
| }, | ||
| { | ||
| "key": "email", | ||
| "title": "Email" | ||
| }, | ||
| { | ||
| "key": "status", | ||
| "title": "Status" | ||
| } | ||
| ] | ||
| } | ||
| ``` |
There was a problem hiding this comment.
The schema examples here use a custom dataSource: { type: "objectstack", object, query... } shape and objectstack.create actions, but @object-ui/data-objectstack is a programmatic DataSource adapter and does not define/consume these schema fields. Please align this section with the real API (createObjectStackAdapter({ baseUrl, token, cache })) and the actual query model (QueryParams with $filter, $select, etc.).
| #### `preview` - Preview Production Build | ||
|
|
||
| Preview the production build locally. | ||
|
|
||
| ```bash | ||
| objectui preview [options] | ||
| ``` | ||
|
|
||
| **Options:** | ||
| - `--port <number>` - Port to run on (default: 4173) | ||
|
|
There was a problem hiding this comment.
objectui preview is documented here, but there is no preview command in the CLI (packages/cli/src/cli.ts). The closest equivalent is objectui start (production server) after objectui build. Please either document start instead, or implement a preview command.
Documentation Update Progress
Completed
@object-ui/cli) - Project scaffolding and dev server@object-ui/create-plugin) - Plugin template generation@object-ui/runner) - Universal runtime application@object-ui/data-objectstack) - ObjectStack data adapterFinal Steps
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.