Documentation overhaul: Components#98
Merged
Merged
Conversation
Add Why Components, getting-started, and form/data/wizard/list recipes; replace the storybook-based toc with curated, Diataxis-bucketed navigation; fix Toolbar link depth. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the reference index with an aspire.dev-style Overview: a TopicHero plus Start here, Recipes, and Key components card grids. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Help readers pick between the overlapping components: CommandDialog vs StepperCommandDialog vs CommandForm vs Dialog for input, and DataPage vs DataTables for display, with rules of thumb and links to the recipes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Reshape the flat install page into the project's guided-tour voice, matching the Chronicle get-started exemplar. Authored as .mdx with Steps and an Aside, threaded to the same RegisterAuthor/AllAuthors slice used across the Arc getting-started pages. Adds a "what the provider sets up" explanation, a Mermaid diagram showing where Components sits between the generated proxies and PrimeReact, and a CommandDialog snippet so the payoff is visible. Ends with a recap and forward links. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
A threaded three-chapter tutorial builds one library screen on the Arc proxies — a live data table, command-driven add/edit/remove, and a DataPage list-and-detail view. A migration bridge maps the PrimeReact forms and tables you'd hand-wire onto their Components equivalents, side by side. Also surfaces the existing Choosing a component guide in the sidebar. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Correct the list-and-detail tutorial to match the real DataPageProps interface — detailsComponent (lowercase), and drop the non-existent detailsTitle and initialSizes props — and rewrite the DataPage reference example to the idiomatic compound DataPage.Columns/DataPage.MenuItems API with a complete details-panel example. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Correct the DataTableForObservableQuery import to @cratis/components/DataTables (the root barrel only re-exports the namespace, matching Studio usage), add the required emptyMessage, and complete the list-screen DataPage example with title, emptyMessage, a toolbar menu item, and columns. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The documentation-authoring rules (tour voice, structure & formatting, the cross-repo edit->sync->verify workflow, rendering/QA, correct examples) and skills (edit/add/qa docs) live canonically in the Documentation repo's .ai/ and are shared to every repo. Copied here manually ahead of the propagation-on-merge so docs work has the guidance now. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Source/.storybook/main.ts: minify CSS with esbuild instead of Vite's default
lightningcss, which rejects stylesheets that start with a // comment
("Invalid empty selector") and broke `storybook build`.
- Documentation/storybook.md -> storybook.mdx: replace the DocFX storybook stub
with a Starlight page that embeds the static Storybook via <StorybookEmbed/>.
- toc.yml: add the Storybook nav entry under Get started.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Resolve two conflicts: - Documentation/toc.yml: keep the docs-overhaul bucketed nav (onboarding entries + the storybook.mdx embed page) and drop main's auto-generated per-story Storybook tree (pointed at the removed storybook.md) and its grouped "Components" block (incompatible with the converter's flat buckets). Carry over the one genuinely-new component from main as a flat entry: Filter. - Source/.storybook/main.ts: take main's cssMinify:false. main fixed the same lightningcss "Invalid empty selector" build failure that the docs-overhaul esbuild override addressed; converging on main's fix avoids re-conflict. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Verified against Components/Source:
- Root-package import: the package root exposes Filter only as a namespace
(`import * as Filter from './Filter'`), so the flat
`import { FilterPanel, ... } from '@cratis/components'` is wrong. Show the
namespace form (`import { Filter }` → `Filter.FilterPanel`). The
`@cratis/components/Filter` subpath (flat) is unchanged and correct.
- RangeHistogramFilter `buckets` is optional (default 20), not required.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Snippet-correctness audit against current Components source. All fixes verified against the component sources / type defs: - Import paths: components are exposed from the root only as namespaces, so import each from its subpath (@cratis/components/<Component>); StepperPanel from primereact/stepperpanel. - DataPage: detailsComponent (lowercase); detailsTitle/initialSizes removed (not real props). - Props: ErrorBoundary takes only children (no fallback), ToolbarButton title (not tooltip), CommandDialog onCancel (not onHide), SchemaEditor canEdit (not readOnly). - PivotViewer config shapes (getValue, real filter types, color keys, buckets, cardRenderer returns data); TimeMachine version/event shape. - ConfirmationDialog/BusyIndicatorDialog are host-rendered (real trigger API). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The tree-shaking section's "before" and "after" had become near-identical (both subpath imports). Show the actual anti-pattern: the package root re-exports each component as a namespace, so importing from it pulls the whole package in — contrasted with per-component subpath imports that tree-shake. Verified the import surface against Components/Source (root namespaces + CommandForm re-exports its fields). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the prerequisites aside with a standard Prerequisites section to match the other products' onboarding shape. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Show the slice as an event model, highlighting that Components builds the two ui blocks over the backend built in the Arc tutorial. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
DataPage renders a MenuItem's icon as <Icon/>, so the icon prop must be a component type (e.g. icon={FaPlus}) — string CSS classes and JSX elements don't render. ColorPickerField's default color is 000000, not ff0000. Verified against Components/Source.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Verified against current main (cratis/Components, PivotViewer/types.ts): filters, detailRenderer and getItemId are optional; only data, dimensions and cardRenderer are required. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Merge the Components docs-overhaul branch for the new Astro documentation site. Merge product documentation PRs before the Documentation site PR. Verification: Documentation/web npm run check built 710 pages with 0 errors and 0 broken internal links. Sensitive-info scan found no real secrets; only documentation placeholders/dev examples.