refactor(storybook): prototype configurable playground runtime - #36732
Draft
Martin Hochel (Hotell) wants to merge 21 commits into
Draft
Martin Hochel (Hotell) wants to merge 21 commits into
Martin Hochel (Hotell) wants to merge 21 commits into
Conversation
…s button from export-to-sandbox lookup
…s and satisfy lint rules
…nner and docs decorator
…-allowlisted modules are reported
…or allowlisted dependencies and Prettier formatting
…Document shortcut
- branded header with primary Run action, compact icon-only toolbar on narrow screens - pane headers with file name, IntelliSense and run status badges - resizable editor/preview split (pointer + keyboard), stacked layout on narrow viewports - Monaco editor theme derived from the active Fluent theme - preview loading / error placeholders, error bar hint about the last successful render - Ctrl/Cmd+Enter runs the code from the editor
…playground - gradient canvas with floating card panes, glass header, gradient brand mark and Run button - custom status pills (pulsing while compiling), file tab, dotted design-canvas preview with fade-in per run - custom error panel and empty state - curated GitHub-inspired syntax palettes for the light and dark editor themes, editor typography tweaks
…sign - flat neutral canvas, bordered surfaces with a single 8px radius, no gradients / glass / shadows / animations - standard Fluent primary button for Run, plain toolbar and dividers - dot + label status indicators (color only for ready / error / warning), spinner while busy - plain preview surface, flat error panel with a top border
Split the prebuilt playground shell from the Storybook addon and generate a consumer-owned Webpack runtime for private packages, typings, themes, and render setup. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 48843c58-937a-4d99-be29-9e0bb93d10bb
Keep playground-only Webpack chunks out of iframe.html while retaining shared chunks needed by Storybook. This prevents the runtime's ReactDOM renderer from corrupting Docs controls. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 48843c58-937a-4d99-be29-9e0bb93d10bb
5 tasks
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
3 participants
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.
Prototype alternative built on #36728.
Plan
@fluentui/react-playgroundshell.@fluentui/react-storybook-addon-playgroundthin: serve the shell, add the Docs button, and extend the consumer's existingwebpackFinal.options.modules; bundle React, private/workspace packages, and an optional TSXsetupmodule through Storybook Webpack.sandbox="allow-scripts", withoutallow-same-origin) and exchange code/results throughpostMessage.No CDN or
esm.shis required: private registry and workspace packages use the consumer's normal Webpack resolution.Difference from #36728
modules.tsoptions.modulessetupmoduleTYPINGS_ENTRIESlistmodules, plus optional declaration-only entriesnew Functionruns in the main playground documentmanifest.jsoniframe.htmlto avoid loading another ReactDOM renderer