Add interactive component playground (Button pilot) plus docs cleanup - #24
Merged
Conversation
Close the prose section before the PostList demo on the Article Card page, round only the bottom corners of the Footer demo, and space the footer meta paragraphs consistently.
_Playground.jsx is a generic docs island configured from MDX through
serializable props: an HTML template with {classes}/{attrs}/{name}
placeholders plus a controls array (modifier groups as radios or a
select, boolean modifiers/attributes as checkboxes, escaped free text).
One substitution pass drives both the live preview and the Shiki
highlighted code panel with copy button, so they can't drift. Options
can flag previewSurface: dark so .bt-white stays visible.
The theme builder companion feature is tracked in #23.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
✅ Deploy Preview for mcssdev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Controls can now be grouped as { heading, items }; groups become columns
in an auto-fit grid (minmax(9rem, 1fr)) so the layout adapts to width
with no per-page configuration. Flat configs still work through an
implicit group, and control labels are optional when a group heading
already covers them.
CSS fixes: playground chrome now uses light-dark(base-100, base-700)
borders to match the docs tables instead of the brighter theme border,
the preview surface is transparent instead of base-800 in dark mode,
inputs drop to base-900, the theme-switch transition lag is gone, and
the code panel is slightly separated with its own rounded corners.
The authoring API (template placeholders, control schema, the
RADIO_MAX_OPTIONS radio/select threshold, groups, snippets) is now
documented on /components/start, with a pointer in agents/components.md.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…mn grid The playground authoring guide moves from the public /components/start page to a new repo-level docs/ directory (docs/playground.md), meant for developer-focused documentation. The agents/components.md pointer follows. Settings columns are now explicit instead of auto-fit: 2 on mobile, 4 from the --md breakpoint (768px) up. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Every CSS-class-driven component page now has a playground: badge, toggle, notice, avatar, card, tags, breadcrumbs, field, faq, section, featuregrid, socialmedia, testimonial, and pricing. Skipped on purpose: articlecard, banner, header, footer, hero, pagination, readprogressbar, and toc, which are Astro/JS-driven or have no modifiers to toggle. Three small additions to the island's config API made the harder pages expressible, all documented in docs/playground.md: - select options can set an explicit class (so the option value can be a pure state key, e.g. Avatar's initials-vs-image choice), an attr (Feature Grid's col-lg options), and a snippet key that fills the control's placeholder (Notice's per-type icon) - snippets no control consumes substitute statically (Social Media's icons); snippets substitute at every placeholder occurrence (FAQ's name attribute on each details element) Trims, same rationale as the button page: demos that only showed modifier combinations the playground now covers (Notice and Avatar available-styles lists, Card basic-variants example, Tags inline example, Toggle checked example, Social Media xl example, and the four bt-outline color combos on Button). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… more pages Group headings are now consistent categories (Variation, Modifiers, Parts, State, Layout, Behavior, Style, Content) with the specific knob named by the control label, e.g. Badge is Variation > Color instead of a Color heading next to a Content heading. Card gains its missing features as Parts toggles: image (card_media), badges (card_badges), and actions footer (card_actions). The field playground can now force the error state: new .is-invalid state class on .field in the framework (same presentation as :user-invalid, for server-side validation results, tests, and demos), documented on the page and toggled by the Invalid checkbox. Three previously skipped pages turned out to be playgroundable and got one: banner (dismissible toggle), article card (variant, image, tags, byline parts), and pagination (the prevNext pattern; the numbered pagination stays static since its markup comes from windowing logic). Co-Authored-By: Claude Fable 5 <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.
What changed
Component playground. New generic Preact island
_Playground.jsx: docs pages configure it entirely from MDX through serializable props, an HTML template with{classes}/{attrs}/{name}placeholders plus acontrolsarray (mutually exclusive modifier groups render as radios or a select, boolean modifiers and attributes as checkboxes, free text is HTML-escaped). A single substitution pass drives both the live preview and the Shiki-highlighted code panel with copy button, so preview and generated code can never drift. Options can flagpreviewSurface: "dark"so.bt-whiteand friends stay visible. Piloted on the Button page with size, color, outline, text, icon, tight icon, disabled, and label controls. Site CSS lives insite/component.playground.css, registered unlayered in_global.css.Docs cleanup (separate commit): close the prose section before the PostList demo on the Article Card page, round only the bottom corners of the Footer demo, and space footer meta paragraphs consistently.
Why
Static modifier tables show every variant but don't let readers compose them. The playground lets users toggle modifiers, see the result live, and copy the exact markup. Built in-house rather than adopting Storybook and friends because mCSS components are CSS classes, not prop-driven framework components, and the repo already had all the machinery (GridDemo's controls-to-code loop, client-side Shiki, CopyButton).
Notes for review
npm run buildpasses and the built page emits the server-rendered markup plus the hydratable astro-island.🤖 Generated with Claude Code