[docs-infra] Support multiple tabs in demos #40901

bharatkashyap · 2024-02-02T14:14:03Z

Closes [docs-infra] Support code tabs #39837
Closes [docs-infra] Support shared source between demos #38911
Currently, this only supports editing one file - so all other tabs would be view-only.

Open to suggestions on how to make all files real-time editable, since the option I had in mind (which would require updating the react-runner instance scope Modules every time an import was changed) seems to me a bit too complex to become part of the v1 implementation.

Preview (Autocomplete): https://deploy-preview-40901--material-ui.netlify.app/material-ui/react-autocomplete/

Tab A	Tab B

mui-bot · 2024-02-02T14:18:07Z

Netlify deploy preview

https://deploy-preview-40901--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 3f90f79

michaldudak · 2024-02-06T14:51:14Z

This is so good! Thanks for working on it!

I wonder if we still need the collapse/expand button. Or perhaps it can simply adjust the max height of the code container instead of extracting the return value of the main function. cc @danilo-leal

I've noticed that the JS/TS switch doesn't work. The JS source is always displayed.

bharatkashyap · 2024-02-06T16:35:27Z

I've noticed that the JS/TS switch doesn't work. The JS source is always displayed.

That is probably since the Combo Box demo has identical source for both cases; I've only added this to one demo for a proof of concept. I'll add it to a second with different sources to demonstrate JS/TS source switching working as expected

danilo-leal · 2024-02-12T21:49:21Z

Just realized that the styles we added to make the tabs fit nicely within a demo container break them when in a standalone tabbed code block. For example, the installation commands one:

Should we make these different components? Or some other strategy for applying the styles depending on the context?

oliviertassinari

A quick review, great to see this making progress 👍

oliviertassinari · 2024-02-14T10:30:42Z

test/regressions/index.js

+  'docs-components-autocomplete-data', // No components, contains only data for the demo
+  'docs-components-transfer-list-utils', // Commont utilities for demos


I think these should be handled automatically. It doesn't scale to ignore folders and non React components manually.

Suggested change

'docs-components-autocomplete-data', // No components, contains only data for the demo

'docs-components-transfer-list-utils', // Commont utilities for demos

To ignore files that don't follow the ComponentName React convention.

I think it should be a standalone PR, he hit the same pain with: docs-getting-started-templates-landing-page/getLPTheme.png.

oliviertassinari · 2024-02-15T23:46:46Z

docs/data/material/components/transfer-list/SelectAllTransferList.tsx

-function not(a: readonly number[], b: readonly number[]) {
-  return a.filter((value) => b.indexOf(value) === -1);
-}
-
-function intersection(a: readonly number[], b: readonly number[]) {
-  return a.filter((value) => b.indexOf(value) !== -1);
-}
-
-function union(a: readonly number[], b: readonly number[]) {
-  return [...a, ...not(b, a)];
-}
+import { intersection, union, not } from './utils/helpers.js';


This looks fine to test the PR out, but I don't think this should be deduplicate for the final version of the PR.

oliviertassinari · 2024-02-15T23:48:33Z

docs/data/material/components/.eslintrc.js

    'no-console': ['off', { allow: ['info'] }],
    // not very friendly to prop forwarding


That file looks like technical debt to me. This should be in the root .eslintrc file

Suggested change

'no-console': ['off', { allow: ['info'] }],

// not very friendly to prop forwarding

oliviertassinari · 2024-02-15T23:50:26Z

docs/data/material/components/autocomplete/ComboBox.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
+import top100Films from './data/top100Films.js';


I would expect:

Suggested change

import top100Films from './data/top100Films.js';

import top100Films from './data/top100Films.ts';

or likely:

Suggested change

import top100Films from './data/top100Films.js';

import top100Films from './data/top100Films';

to keep it simple

Do you mean that the relative imported package should always be a .ts file?

What I'm thinking is if there is no extension, it would become a lot more complicated to figure out which file to load when resolving these relative imports in loader.js

I assume you're importing .js because it can be imported in both JS and TS.

IMO it can be kept as it is, and in further step, write imported files with TS and modify the docs:typescript:formatted script to generate the imported file in JS, and update the import line

@alexfauquette By as it is do you mean keep the .js extension?

docs/src/modules/components/Demo.js

docs/src/modules/components/DemoEditor.tsx

oliviertassinari · 2024-02-15T23:53:22Z

docs/src/modules/components/DemoToolbar.js

@@ -332,9 +332,25 @@ export default function DemoToolbar(props) {
  const handleSnackbarClose = () => {
    setSnackbarOpen(false);
  };
+
+  const copyWithRelativeModules = React.useCallback(


Why have this in the scope of the component? Why not in the parent scope called from demoData?

Do you mean why not move this function (including the clipboard-copy dependency) to the parent scope of Demo.js?

To the root scope of DemoToolbar.js

docs/src/modules/components/HighlightedCodeWithTabs.tsx

oliviertassinari · 2024-02-16T00:02:22Z

packages/markdown/loader.js

+      extractImports(demos[demoName].raw).forEach((importModuleID) => {
+        // detect relative import
+        // skip for modules that are not demos
+        if (!toolbarHidden.has(moduleID.replace('./', ''))) {


So I guess this could ship as its own PR optimizing things?

Do you mean taking this part apart into a separate PR focussed only on optimisation? I'd imagine this can stay, whereas future optimisation can go in a new PR

I think we should have this as a standalone win/PR. If you go to https://mui.com/material-ui/react-grid/#interactive. Why are we loading the source to make that demo editable? Doesn't make sense.

docs/src/modules/components/HighlightedCodeWithTabs.tsx

oliviertassinari · 2024-03-03T15:07:47Z

I saw React Runner has a multi file demo at https://react-runner.vercel.app/#multi-files and tests https://github.com/nihgwu/react-runner/blob/974ebc932db7b7c7d59f1b50a79aed705efbf75a/packages/react-runner/src/__tests__/useRunner.test.tsx#L210, to see if there are things to learn from it.

danilo-leal · 2024-03-05T19:56:37Z

@bharatkashyap is there anything I can do to help this PR move forward? 😃

bharatkashyap · 2024-03-05T21:44:03Z

@bharatkashyap is there anything I can do to help this PR move forward? 😃

Haha, I guess not 😅 It needs some final work to address review feedback - I've planned to close it this week

oliviertassinari

👍

Pre-v1:

Skipping demos without being editable [docs-infra] Skip resolving non-editable demos in build process #41585
Skipping non React components in visual regressions (Material UI, Base UI, MUI X) [docs-infra] Skip non React components from visual regression tests #41584
eslintrc root

For v1:

TypeScript support
Atomic commit for state change

For v2:

Editable tabs
```
  const codes = [tab1Code, tab2Code];
  const scope = withFiles(baseScope, tab1Code, tab2Code).
```
withFiles from https://github.com/nihgwu/react-runner/blob/974ebc932db7b7c7d59f1b50a79aed705efbf75a/website/src/components/MultiFilesExample/index.tsx#L27.

For a v3

TS/JS switch using useTransition

oliviertassinari · 2024-03-12T12:13:01Z

docs/data/material/components/transfer-list/utils/helpers.js

@@ -0,0 +1,11 @@
+export function not(a, b) {


Suggested change

export function not(a, b) {

export function not(a: readonly number[], b) {

docs/src/modules/components/HighlightedCodeWithTabs.tsx

oliviertassinari · 2024-03-12T12:19:14Z

docs/src/modules/components/DemoToolbar.js

@@ -332,9 +332,25 @@ export default function DemoToolbar(props) {
  const handleSnackbarClose = () => {
    setSnackbarOpen(false);
  };
+
+  const copyWithRelativeModules = React.useCallback(


To the root scope of DemoToolbar.js

oliviertassinari · 2024-03-12T12:22:24Z

packages/markdown/loader.js

+      extractImports(demos[demoName].raw).forEach((importModuleID) => {
+        // detect relative import
+        // skip for modules that are not demos
+        if (!toolbarHidden.has(moduleID.replace('./', ''))) {


I think we should have this as a standalone win/PR. If you go to https://mui.com/material-ui/react-grid/#interactive. Why are we loading the source to make that demo editable? Doesn't make sense.

oliviertassinari · 2024-03-12T12:25:34Z

test/regressions/index.js

+  'docs-components-autocomplete-data', // No components, contains only data for the demo
+  'docs-components-transfer-list-utils', // Commont utilities for demos


I think it should be a standalone PR, he hit the same pain with: docs-getting-started-templates-landing-page/getLPTheme.png.

siriwatknp · 2024-03-13T06:42:13Z

nit: I think the underline is not necessary. An active tab should have a background without hover.

alexfauquette · 2024-03-13T08:33:53Z

docs/data/material/components/autocomplete/ComboBox.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
+import top100Films from './data/top100Films.js';


I assume you're importing .js because it can be imported in both JS and TS.

IMO it can be kept as it is, and in further step, write imported files with TS and modify the docs:typescript:formatted script to generate the imported file in JS, and update the import line

docs/src/modules/components/Demo.js

docs/src/modules/components/DemoEditor.tsx

alexfauquette

It looks good.

I tried my best to understand the markdown loader, but I probably don't have enough understanding of its behavior to catch bugs.

alexfauquette · 2024-04-09T07:53:34Z

packages/markdown/loader.js

+        });
+        relativeModuleFilename = `${importModuleID}${extension}`;


Maybe throw an error if you do not find the file. to say to the user

Hey in the dem xxx you import yyy which does not exist. PLeas ad either

yyy.js

yyy.jsx

I thaugh this comment was nitpicking, but in https://github.com/mui/mui-x/blob/master/docs/data/date-pickers/date-picker/CustomizationExamplesNoSnap.js

The .js file imports a .tsx (which is weird) but then the error message on build time is:

Error: Could not find a module for the relative import "./examplesConfig.stylingundefined" in the demo "CustomizationExamplesNoSnap.js"

Yep, I saw that and the latest commit should fix this

joserodolfofreitas · 2024-04-09T08:28:26Z

Quick question: Once this PR is merged, can we bring the feature to MUI X directly?

alexfauquette · 2024-04-09T08:44:45Z

Yes, I tried the PR here: mui/mui-x#12714

alexfauquette · 2024-04-09T09:02:31Z

packages/markdown/loader.js

+        // If the demo is a JS demo, we can assume that the relative import is either
+        // a `.js` or a `.jsx` file, with `.js` taking precedence over `.jsx`
+        // likewise for TS demos, with `.ts` taking precedence over `.tsx`
+        const extensions = variant === 'JS' ? ['.js', '.jsx'] : ['.ts', '.tsx', '.js', '.jsx'];


To support https://github.com/mui/mui-x/blob/master/docs/data/date-pickers/date-picker/CustomizationExamplesNoSnap.js

Suggested change

const extensions = variant === 'JS' ? ['.js', '.jsx'] : ['.ts', '.tsx', '.js', '.jsx'];

const extensions = variant === 'JS' ? ['.js', '.jsx', '.ts', '.tsx'] : ['.ts', '.tsx', '.js', '.jsx'];

packages/markdown/loader.js

…de-tabs

bharatkashyap · 2024-04-15T09:07:19Z

@danilo-leal This is okay to merge as a v1 for me, pending a review from you around how it looks 😅

danilo-leal · 2024-04-16T21:54:13Z

Looks great to me! I only noticed that the borders on the code block/editor and the demo toolbar are a bit funky—they appear and disappear depending on the mode/tab selected. Check it out:

Screen.Recording.2024-04-16.at.18.49.31.mov

The demo toolbar has a top border in light mode. But, it seems the code block/editor loses its borders on the second tab.

Screen.Recording.2024-04-16.at.18.49.59.mov

In dark mode, the demo toolbar doesn't have both a top and bottom border anymore.

I thought I had fixed these things on #41827 😅 I'll leave you to it as I'm having weird conflicts to pull the latest changes from this PR, so it should be faster if you can tackle it. Later design improvements can come iteratively right after, I think!

alexfauquette · 2024-04-17T08:31:50Z

@danilo-leal I tried to fix it in
c43ca52

In light mode, the code has no border because the contrast between code and the background is enough

In dark mode keep the border gray,

danilo-leal

Let's 🚢 it!

bharatkashyap added the docs Improvements or additions to the documentation label Feb 2, 2024

danilo-leal changed the title ~~[docs] Support multiple tabs in demos~~ [docs-infra] Support multiple tabs in demos Feb 2, 2024

danilo-leal added scope: docs-infra Specific to the docs-infra product and removed docs Improvements or additions to the documentation labels Feb 2, 2024

zannager requested a review from danilo-leal February 2, 2024 14:29

danilo-leal force-pushed the support-code-tabs branch from 41b0eab to 0de3a88 Compare February 2, 2024 21:29

danilo-leal changed the base branch from master to next February 2, 2024 21:41

danilo-leal requested review from siriwatknp, michaldudak and mnajdova as code owners February 2, 2024 21:41

danilo-leal changed the base branch from next to master February 2, 2024 21:42

danilo-leal removed request for mnajdova, michaldudak and siriwatknp February 2, 2024 21:42

This comment was marked as resolved.

Sign in to view

bharatkashyap force-pushed the support-code-tabs branch from 98e3775 to 41b0eab Compare February 3, 2024 05:32

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 12, 2024

oliviertassinari reviewed Feb 16, 2024

View reviewed changes

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 5, 2024

oliviertassinari added the new feature New feature or request label Mar 12, 2024

oliviertassinari reviewed Mar 12, 2024

View reviewed changes

alexfauquette reviewed Mar 13, 2024

View reviewed changes

fix: Alex review

9109034

alexfauquette approved these changes Apr 9, 2024

View reviewed changes

alexfauquette mentioned this pull request Apr 9, 2024

[WIP] Use the demo tabs mui/mui-x#12714

Draft

alexfauquette reviewed Apr 9, 2024

View reviewed changes

bharatkashyap added 2 commits April 9, 2024 16:21

fix: Alex review + X Example

9f9ec22

fix: missed removing

a6b2bec

alexfauquette reviewed Apr 9, 2024

View reviewed changes

packages/markdown/loader.js Outdated Show resolved Hide resolved

packages/markdown/loader.js Outdated Show resolved Hide resolved

bharatkashyap added 5 commits April 9, 2024 18:35

fix: Alex review 3

3ff746f

fix: bugs found on second pass

5c28a20

feat: Fix copy to support modules without extensions

9a8aaeb

fix: eslint

738ce1f

fix: Rebuild codesandbox

20de1b5

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 11, 2024

Merge branch 'next' of github.com:mui-org/material-ui into support-co…

8914ff8

…de-tabs

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 11, 2024

alexfauquette mentioned this pull request Apr 12, 2024

[code-infra] Move the HighlightedCode component to @mui/docs #41859

Merged

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 12, 2024

Merge branch 'next' of github.com:mui-org/material-ui into support-co…

403843c

…de-tabs

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 12, 2024

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 16, 2024

alexfauquette added 2 commits April 17, 2024 10:25

Make codes preview coherent

c43ca52

Merge remote-tracking branch 'upstream/next' into support-code-tabs

3f90f79

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 17, 2024

danilo-leal approved these changes Apr 17, 2024

View reviewed changes

bharatkashyap merged commit c7bc3ed into mui:next Apr 17, 2024
22 checks passed

		'docs-components-autocomplete-data', // No components, contains only data for the demo
		'docs-components-transfer-list-utils', // Commont utilities for demos

		'no-console': ['off', { allow: ['info'] }],
		// not very friendly to prop forwarding

	import top100Films from './data/top100Films.js';
	import top100Films from './data/top100Films.ts';

	export function not(a, b) {
	export function not(a: readonly number[], b) {

		});
		relativeModuleFilename = `${importModuleID}${extension}`;

	const extensions = variant === 'JS' ? ['.js', '.jsx'] : ['.ts', '.tsx', '.js', '.jsx'];
	const extensions = variant === 'JS' ? ['.js', '.jsx', '.ts', '.tsx'] : ['.ts', '.tsx', '.js', '.jsx'];

[docs-infra] Support multiple tabs in demos #40901

[docs-infra] Support multiple tabs in demos #40901

Conversation

bharatkashyap commented Feb 2, 2024 • edited

mui-bot commented Feb 2, 2024 • edited

Netlify deploy preview

Bundle size report

This comment was marked as resolved.

michaldudak commented Feb 6, 2024

bharatkashyap commented Feb 6, 2024

danilo-leal commented Feb 12, 2024

oliviertassinari left a comment

Choose a reason for hiding this comment

oliviertassinari Feb 14, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Feb 15, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari commented Mar 3, 2024 • edited

danilo-leal commented Mar 5, 2024

bharatkashyap commented Mar 5, 2024

oliviertassinari left a comment • edited by bharatkashyap

Choose a reason for hiding this comment

Pre-v1:

For v1:

For v2:

For a v3

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siriwatknp commented Mar 13, 2024 • edited

Choose a reason for hiding this comment

alexfauquette left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joserodolfofreitas commented Apr 9, 2024 • edited

alexfauquette commented Apr 9, 2024

Choose a reason for hiding this comment

bharatkashyap commented Apr 15, 2024

danilo-leal commented Apr 16, 2024

alexfauquette commented Apr 17, 2024

danilo-leal left a comment

Choose a reason for hiding this comment

bharatkashyap commented Feb 2, 2024 •

edited

mui-bot commented Feb 2, 2024 •

edited

oliviertassinari Feb 14, 2024 •

edited

oliviertassinari Feb 15, 2024 •

edited

oliviertassinari commented Mar 3, 2024 •

edited

oliviertassinari left a comment •

edited by bharatkashyap

siriwatknp commented Mar 13, 2024 •

edited

joserodolfofreitas commented Apr 9, 2024 •

edited