Skip to content

[Website] Fix all broken CodeSandbox examples #9516

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
weronikaolejniczak wants to merge 21 commits into
base: main
Choose a base branch
from
+1,007 −565
Open

[Website] Fix all broken CodeSandbox examples #9516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
9cb8a1a
fix(website): add moment-timezone to CodeSandbox deps
weronikaolejniczak Mar 18, 2026
326db57
fix(website): fix broken examples in Utilities
weronikaolejniczak Mar 18, 2026
844f523
fix(website): fix broken dataviz examples
weronikaolejniczak Mar 18, 2026
13c313f
fix(docusaurus-theme): load charts css to render charts
weronikaolejniczak Mar 18, 2026
774bf9d
fix(website): fix broken Navigation examples
weronikaolejniczak Mar 18, 2026
f07abbd
fix(website): fix broken Layout examples
weronikaolejniczak Mar 18, 2026
69366ca
fix(website): fix broken Templates examples
weronikaolejniczak Mar 18, 2026
12e76f1
chore(website): update @faker-js/faker dep to latest
weronikaolejniczak Mar 18, 2026
1ccd784
fix(website): fix broken Editors and Syntax examples
weronikaolejniczak Mar 18, 2026
6bf0b14
fix(website): fix broken Tables examples
weronikaolejniczak Mar 18, 2026
a3feb6c
fix(website): fix broken Forms examples
weronikaolejniczak Mar 18, 2026
90d52bb
fix(website): fix all broken Display examples
weronikaolejniczak Mar 18, 2026
f5cdb82
Potential fix for pull request finding
weronikaolejniczak Mar 19, 2026
ac3547c
refactor(website): address Copilot's feedback
weronikaolejniczak Mar 19, 2026
ec873ce
Merge branch 'main' into fix/codesandbox-examples
weronikaolejniczak Mar 19, 2026
62153c1
fix(website): add missing imports to Incremental search
weronikaolejniczak Mar 25, 2026
73abfbf
fix(website): fix file picker programmatic removal
weronikaolejniczak Mar 25, 2026
903ec42
fix(docusaurus-theme): set key on ActionComponent
weronikaolejniczak Mar 25, 2026
4aa944c
revert(website): revert double-quote formatting
weronikaolejniczak Mar 25, 2026
fce0463
revert(website): revert double-quotes formatting
weronikaolejniczak Mar 25, 2026
dc1b741
feat(website): pass previewWrapperSource to Codesandbox
weronikaolejniczak Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export interface DemoActionsBarProps {
activeSource: DemoSourceMeta | null;
sources: DemoSourceMeta[];
extraFiles?: ExtraFiles;
previewWrapperSource?: string;
isSourceOpen: boolean;
setSourceOpen(isOpen: boolean): void;
onClickReloadExample(): void;
Expand Down Expand Up @@ -55,6 +56,7 @@ export const DemoActionsBar = ({
activeSource,
sources,
extraFiles,
previewWrapperSource,
onClickReloadExample,
onClickCopyToClipboard,
}: DemoActionsBarProps) => {
Expand All @@ -73,8 +75,10 @@ export const DemoActionsBar = ({
</EuiButton>
{extraActions.map((ActionComponent) => (
<ActionComponent
key={ActionComponent.displayName ?? ActionComponent.name}
Copy link
Copy Markdown
Contributor Author

@weronikaolejniczak weronikaolejniczak Mar 25, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is to get rid of that annoying "key" warning in DevTools console. Not that the lack of key in this case is causing any issues.

sources={sources}
extraFiles={extraFiles}
previewWrapperSource={previewWrapperSource}
activeSource={activeSource}
/>
))}
Expand Down
44 changes: 40 additions & 4 deletions packages/docusaurus-theme/src/components/demo/codesandbox/open_action.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ const indexTsxSource = dedent`
<EuiProvider cache={cache}>
<Demo />
</EuiProvider>
);`;
);
`;

const publicIndexHtmlSource = dedent`
<head>
Expand Down Expand Up @@ -69,12 +70,29 @@ export type Options = {
const processTsxSource = (source: string) => {
// jsxImportSource pragma is needed in CodeSandbox as it doesn't seem
// to support that setting via tsconfig.json
return `/** @jsxImportSource @emotion/react */\n${source}`;
let processed = `/** @jsxImportSource @emotion/react */\n${source}`;

// Inject `@elastic/charts` CSS for demos that use the charts library,
// since CodeSandbox doesn't load it globally unlike the docs site
if (source.includes('@elastic/charts')) {
// Match the closing line of the @elastic/charts import (handles both
// single-line and multi-line imports, and both quote styles)
processed = processed.replace(
/^(.*from ['"]@elastic\/charts['"];)$/m,
[
'$1',
"import '@elastic/charts/dist/theme_only_light.css';",
"import '@elastic/charts/dist/theme_only_dark.css';",
].join('\n')
);
}

return processed;
};

export const createOpenInCodeSandboxAction =
({ files = {}, dependencies }: Options): ActionComponent =>
({ extraFiles, activeSource }) => {
({ extraFiles, activeSource, previewWrapperSource }) => {
const parameters: string = useMemo(() => {
const source = activeSource?.code || '';

Expand All @@ -93,6 +111,24 @@ export const createOpenInCodeSandboxAction =
return getParameters({
files: {
...defaultCodeSandboxParameters.files,
...(previewWrapperSource
? {
'index.tsx': {
content: indexTsxSource
.replace(
"import Demo from './demo';",
"import Demo from './demo';\nimport PreviewWrapper from './preview_wrapper';"
)
.replace(
'<Demo />',
'<PreviewWrapper>\n <Demo />\n </PreviewWrapper>'
),
Comment on lines +118 to +125
Copy link
Copy Markdown
Contributor Author

@weronikaolejniczak weronikaolejniczak Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally, I don't like this but the only other ideas that came to mind were: 2 separate indexTsxSource variables or a function that modifies the template. That being said, this way was the simplest one.

},
'preview_wrapper.tsx': {
content: processTsxSource(previewWrapperSource),
},
}
: {}),
'demo.tsx': {
content: processTsxSource(source),
},
Expand All @@ -107,7 +143,7 @@ export const createOpenInCodeSandboxAction =
...codeSandboxFiles,
},
} as any);
}, [activeSource, extraFiles]);
}, [activeSource, extraFiles, previewWrapperSource]);

return (
<form
Expand Down
3 changes: 3 additions & 0 deletions packages/docusaurus-theme/src/components/demo/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ export interface DemoProps extends PropsWithChildren {
extraFiles?: ExtraFiles;
previewPadding?: DemoPreviewProps['padding'];
previewWrapper?: DemoPreviewProps['wrapperComponent'];
previewWrapperSource?: string;
}

const getDemoStyles = (euiTheme: UseEuiTheme) => ({
Expand All @@ -100,6 +101,7 @@ export const Demo = ({
isSourceOpen: _isSourceOpen = false,
previewPadding,
previewWrapper,
previewWrapperSource,
}: DemoProps) => {
const styles = useEuiMemoizedStyles(getDemoStyles);
const [sources, setSources] = useState<DemoSourceMeta[]>([]);
Expand Down Expand Up @@ -153,6 +155,7 @@ export const Demo = ({
activeSource={activeSource}
extraFiles={extraFiles}
sources={sources}
previewWrapperSource={previewWrapperSource}
onClickCopyToClipboard={onClickCopyToClipboard}
onClickReloadExample={onClickReloadExample}
/>
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme/src/theme/Demo/actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export type ActionComponentProps = {
activeSource: DemoSourceMeta | null;
sources: DemoSourceMeta[];
extraFiles?: ExtraFiles;
previewWrapperSource?: string;
};

export type ActionComponent = ComponentType<ActionComponentProps>;
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme/src/theme/theme.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -594,6 +594,7 @@ declare module '@theme/Demo/actions' {
activeSource: DemoSourceMeta;
sources: DemoSourceMeta[];
extraFiles?: ExtraFiles;
previewWrapperSource?: string;
};

export type ActionComponent = ComponentType<ActionComponentProps>;
Expand Down
Loading