feat(headless-docsite): embed code panel in canvas, magenta theme, refine sandbox & tabs#36071
Closed
tudorpopams wants to merge 2 commits intomicrosoft:masterfrom
Closed
feat(headless-docsite): embed code panel in canvas, magenta theme, refine sandbox & tabs#36071tudorpopams wants to merge 2 commits intomicrosoft:masterfrom
tudorpopams wants to merge 2 commits intomicrosoft:masterfrom
Conversation
…me, refine sandbox & tabs
Bebop docsite (apps/public-docsite-v9-headless):
- Custom BebopDocsPage replaces autodocs: title/description/primary canvas/
ArgTypes/remaining stories layout matching deployed Fluent docs.
- BebopSource portals a tabbed Story.tsx + .module.css source panel into the
same .sbdocs-preview canvas card the user already sees, listening to
Storybook's native 'Show code' toggle so it sits next to 'Open in Stackblitz'.
- Per-story tab strip is filtered to CSS modules actually referenced in the
displayed TSX (the meta still lists the full set so the sandbox can bundle
what's needed).
- Sidebar/toolbar accent + tab indicator + selected nav now use Bebop
magenta #9b1f5a (Figma --prmt-color-red ramp); replaces the prior near-black
#4a0a2c. Sidebar hover bg switched to neutral grey.
- Drop the rsms.me Inter import; everything inherits Segoe UI.
Stories (react-headless-components-preview/stories):
- New README.md replaces CLAUDE.md, merging the package metadata header with
the full authoring guide (pattern, boilerplate, token tiers, gotchas,
PR checklist, file map).
- withStorySource pins each story's own raw source as
parameters.docs.source.code+originalSource and overrides fullSource via a
non-writable getter so the babel preset's empty post-strip overwrite is
swallowed; rewrites long ../../bebop/components/*.module.css paths to a
colocated ./styles/*.module.css for paste-ready snippets.
- withCssModuleSource bundles tokens.css + only the CSS modules referenced
from src/example.tsx into the Stackblitz sandbox under src/styles/, and
prepends an import of tokens.css to App.tsx.
- Remove the broken Copy Page button.
Babel preset (babel-preset-storybook-full-source):
- modifyImportsPlugin no longer warns for known-safe relative patterns
(*.module.css, ?raw queries, with{Story,CssModule}Source helpers,
*.stories?raw). Strip behaviour and tests are unchanged.
Recovered bebop/ design system source (tokens.css + 27 component CSS modules)
that drives the docsite preview and Stackblitz sandboxes.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
tudorpopams
changed the title
📊 Bundle size report✅ No changes found |
|
Pull request demo site: URL |
…imer - Rename bebop/ folder to theme/ (tokens.css + 27 component CSS modules) - Rename BebopDocsPage -> HeadlessDocsPage and BebopSource -> HeadlessSourcePanel - Scrub all bebop identifiers, paths, classes, and comments across stories, helpers, .storybook config, and project.json files - Add a disclaimer banner on the docs page explaining that headless components ship without default styles and that the demo CSS is illustrative only Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
Author
|
Superseded by #36073 (branch renamed to drop internal codename). |
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.
Summary
Polishes the headless components docsite: embeds the "Show code" panel directly into the canvas card, swaps the accent to a magenta theme, and refines the Stackblitz sandbox + tab strip so users only see the files actually referenced by the displayed story.
Changes
Docsite (
apps/public-docsite-v9-headless)*.module.css) is portaled into the same.sbdocs-previewcanvas card, listening to Storybook's native "Show code" toggle so it sits next to "Open in Stackblitz".#9b1f5a(Figma--prmt-color-redramp); replaces the prior near-black#4a0a2c. Sidebar hover bg switched to neutral grey.rsms.meInter import — everything inherits Segoe UI.Stories (
react-headless-components-preview/stories)README.mdreplacesCLAUDE.md, merging package metadata with the full authoring guide (pattern, boilerplate, token tiers, gotchas, PR checklist, file map).withStorySourcepins each story's own raw source asparameters.docs.source.code/originalSourceand overridesfullSourcevia a non-writable getter so the babel preset's empty post-strip overwrite is swallowed; rewrites long../../<theme>/components/*.module.csspaths to a colocated./styles/*.module.cssfor paste-ready snippets.withCssModuleSourcebundlestokens.css+ only the CSS modules referenced fromsrc/example.tsxinto the Stackblitz sandbox undersrc/styles/, and prepends an import oftokens.csstoApp.tsx.Babel preset (
babel-preset-storybook-full-source)modifyImportsPluginno longer warns for known-safe relative patterns (*.module.css,?rawqueries,with{Story,CssModule}Sourcehelpers,*.stories?raw). Strip behaviour and tests are unchanged (15/15 passing).Theme source
tokens.css+ 27 component CSS modules) that drives the docsite preview and Stackblitz sandboxes.Verification
yarn nx run public-docsite-v9-headless:build-storybook— clean build, 0 babel warnings.yarn nx run babel-preset-storybook-full-source:test— 15/15 passing.tokens.css+ the modules referenced by the example.