Skip to content

Commit

Permalink
alternative solution
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliviertassinari
oliviertassinari committed Dec 4, 2022
1 parent 1ccd13c commit b37c7f2
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 165 deletions.
149 changes: 69 additions & 80 deletions docs/src/modules/components/Demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
import { useCodeVariant } from 'docs/src/modules/utils/codeVariant';
import { CODE_VARIANTS } from 'docs/src/modules/constants';
import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
import BrandingProvider from 'docs/src/BrandingProvider';
import { blue, blueDark, grey } from 'docs/src/modules/brandingTheme';

/**
Expand Down Expand Up @@ -276,13 +275,13 @@ const DemoRootJoy = joyStyled('div', {
radial-gradient(at 80% 0%, ${blueDark[700]} 0px, transparent 50%),
radial-gradient(at 0% 95%, ${blueDark[700]} 0px, transparent 50%),
radial-gradient(at 0% 5%, ${blueDark[700]} 0px, transparent 25%),
radial-gradient(at 93% 85%, ${alpha(blueDark[500], 0.8)} 0px, transparent 50%),
radial-gradient(at 93% 85%, ${alpha(blueDark[500], 0.8)} 0px, transparent 50%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`
: `radial-gradient(at 51% 52%, ${alpha(blue[50], 0.5)} 0px, transparent 50%),
radial-gradient(at 80% 0%, #FFFFFF 0px, transparent 20%),
radial-gradient(at 0% 95%, ${alpha(blue[100], 0.3)}, transparent 40%),
radial-gradient(at 0% 20%, ${blue[50]} 0px, transparent 50%),
radial-gradient(at 93% 85%, ${alpha(blue[100], 0.2)} 0px, transparent 50%),
radial-gradient(at 0% 20%, ${blue[50]} 0px, transparent 50%),
radial-gradient(at 93% 85%, ${alpha(blue[100], 0.2)} 0px, transparent 50%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.03'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`,
}),
...(hiddenToolbar && {
Expand Down Expand Up @@ -317,7 +316,7 @@ const InitialFocus = styled(IconButton)(({ theme }) => ({
}));

export default function Demo(props) {
const { demo, demoOptions, disableAd, githubLocation, mode } = props;
const { demo, demoOptions, disableAd, githubLocation } = props;

if (process.env.NODE_ENV !== 'production') {
if (demoOptions.hideToolbar === false) {
Expand Down Expand Up @@ -386,7 +385,6 @@ export default function Demo(props) {
const adVisibility = showAd && !disableAd && !demoOptions.disableAd;

const DemoRoot = demoData.product === 'joy-ui' ? DemoRootJoy : DemoRootMaterial;
const Wrapper = demoData.product === 'joy-ui' ? BrandingProvider : React.Fragment;

const isPreview = !codeOpen && showPreview;
const initialEditorCode = isPreview
Expand Down Expand Up @@ -439,13 +437,7 @@ export default function Demo(props) {
onMouseEnter={handleDemoHover}
onMouseLeave={handleDemoHover}
>
<Wrapper {...(demoData.product === 'joy-ui' && { mode })}>
<InitialFocus
aria-label={t('initialFocusLabel')}
action={initialFocusRef}
tabIndex={-1}
/>
</Wrapper>
<InitialFocus aria-label={t('initialFocusLabel')} action={initialFocusRef} tabIndex={-1} />
<DemoSandbox
key={demoKey}
style={demoSandboxedStyle}
Expand All @@ -458,74 +450,72 @@ export default function Demo(props) {
</DemoRoot>
<AnchorLink id={`${demoName}.js`} />
<AnchorLink id={`${demoName}.tsx`} />
<Wrapper {...(demoData.product === 'joy-ui' ? { mode } : {})}>
{demoOptions.hideToolbar ? null : (
<NoSsr defer fallback={<DemoToolbarFallback />}>
<React.Suspense fallback={<DemoToolbarFallback />}>
<DemoToolbar
codeOpen={codeOpen}
codeVariant={codeVariant}
demo={demo}
demoData={demoData}
demoHovered={demoHovered}
demoId={demoId}
demoName={demoName}
demoOptions={demoOptions}
demoSourceId={demoSourceId}
initialFocusRef={initialFocusRef}
onCodeOpenChange={() => {
setCodeOpen((open) => !open);
setShowAd(true);
}}
onResetDemoClick={resetDemo}
openDemoSource={openDemoSource}
showPreview={showPreview}
/>
</React.Suspense>
</NoSsr>
)}
<Collapse in={openDemoSource} unmountOnExit>
{/* A limitation from https://github.com/nihgwu/react-runner,
we can't inject the `window` of the iframe so we need a disableLiveEdit option. */}
{demoOptions.disableLiveEdit ? (
<DemoCodeViewer
code={editorCode.value}
id={demoSourceId}
language={demoData.sourceLanguage}
copyButtonProps={{
'data-ga-event-category': codeOpen ? 'demo-expand' : 'demo',
'data-ga-event-label': demoOptions.demo,
'data-ga-event-action': 'copy-click',
{demoOptions.hideToolbar ? null : (
<NoSsr defer fallback={<DemoToolbarFallback />}>
<React.Suspense fallback={<DemoToolbarFallback />}>
<DemoToolbar
codeOpen={codeOpen}
codeVariant={codeVariant}
demo={demo}
demoData={demoData}
demoHovered={demoHovered}
demoId={demoId}
demoName={demoName}
demoOptions={demoOptions}
demoSourceId={demoSourceId}
initialFocusRef={initialFocusRef}
onCodeOpenChange={() => {
setCodeOpen((open) => !open);
setShowAd(true);
}}
onResetDemoClick={resetDemo}
openDemoSource={openDemoSource}
showPreview={showPreview}
/>
) : (
<DemoEditor
// Mount a new text editor when the preview mode change to reset the undo/redo history.
key={editorCode.isPreview}
value={editorCode.value}
onChange={(value) => {
setEditorCode({
...editorCode,
value,
});
}}
onFocus={() => {
setLiveDemoActive(true);
}}
id={demoSourceId}
language={demoData.sourceLanguage}
copyButtonProps={{
'data-ga-event-category': codeOpen ? 'demo-expand' : 'demo',
'data-ga-event-label': demoOptions.demo,
'data-ga-event-action': 'copy-click',
}}
>
<DemoEditorError>{debouncedError}</DemoEditorError>
</DemoEditor>
)}
</Collapse>
{adVisibility ? <AdCarbonInline /> : null}
</Wrapper>
</React.Suspense>
</NoSsr>
)}
<Collapse in={openDemoSource} unmountOnExit>
{/* A limitation from https://github.com/nihgwu/react-runner,
we can't inject the `window` of the iframe so we need a disableLiveEdit option. */}
{demoOptions.disableLiveEdit ? (
<DemoCodeViewer
code={editorCode.value}
id={demoSourceId}
language={demoData.sourceLanguage}
copyButtonProps={{
'data-ga-event-category': codeOpen ? 'demo-expand' : 'demo',
'data-ga-event-label': demoOptions.demo,
'data-ga-event-action': 'copy-click',
}}
/>
) : (
<DemoEditor
// Mount a new text editor when the preview mode change to reset the undo/redo history.
key={editorCode.isPreview}
value={editorCode.value}
onChange={(value) => {
setEditorCode({
...editorCode,
value,
});
}}
onFocus={() => {
setLiveDemoActive(true);
}}
id={demoSourceId}
language={demoData.sourceLanguage}
copyButtonProps={{
'data-ga-event-category': codeOpen ? 'demo-expand' : 'demo',
'data-ga-event-label': demoOptions.demo,
'data-ga-event-action': 'copy-click',
}}
>
<DemoEditorError>{debouncedError}</DemoEditorError>
</DemoEditor>
)}
</Collapse>
{adVisibility ? <AdCarbonInline /> : null}
</Root>
);
}
Expand All @@ -535,5 +525,4 @@ Demo.propTypes = {
demoOptions: PropTypes.object.isRequired,
disableAd: PropTypes.bool.isRequired,
githubLocation: PropTypes.string.isRequired,
mode: PropTypes.string, // temporary, just to make Joy docs work.
};
5 changes: 3 additions & 2 deletions docs/src/modules/components/DemoSandbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { CacheProvider } from '@emotion/react';
import { StyleSheetManager } from 'styled-components';
import { jssPreset, StylesProvider } from '@mui/styles';
import { useTheme, styled, createTheme, ThemeProvider } from '@mui/material/styles';
import { CssVarsProvider } from '@mui/joy/styles';
import rtl from 'jss-rtl';
import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary';
import { useTranslate } from 'docs/src/modules/utils/i18n';
Expand Down Expand Up @@ -176,8 +177,8 @@ function DemoSandbox(props) {

return (
<DemoErrorBoundary name={name} onResetDemoClick={onResetDemoClick} t={t}>
{canonicalAs.startsWith('/joy-ui') ? (
children
{canonicalAs.startsWith('/joy-ui/') ? (
<CssVarsProvider>{children}</CssVarsProvider>
) : (
<StylesProvider jss={jss}>
<ThemeProvider theme={(outerTheme) => getTheme(outerTheme)}>{children}</ThemeProvider>
Expand Down
Loading

0 comments on commit b37c7f2

Please sign in to comment.