[docs] Render demos on static MDX routes (mui#761)

mj12albert · Oct 28, 2024 · 26737f8 · 26737f8
1 parent 7f8705d
commit 26737f8
Show file tree

Hide file tree

Showing 19 changed files with 973 additions and 13 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -39,8 +39,10 @@ module.exports = {
     ],
     '@typescript-eslint/no-redeclare': 'off',
 
-    // We LOVE non-breaking spaces here
+    // We LOVE non-breaking spaces, and both straight and curly quotes here
     'no-irregular-whitespace': [1, { skipJSXText: true, skipStrings: true }],
+    'react/no-unescaped-entities': [1, { forbid: ['>', '}'] }],
+    'material-ui/straight-quotes': 'off',
   },
   overrides: [
     ...baseline.overrides.filter(

diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -4,9 +4,16 @@ import * as url from 'url';
 import * as fs from 'fs';
 // eslint-disable-next-line no-restricted-imports
 import withDocsInfra from '@mui/monorepo/docs/nextConfigDocsInfra.js';
+import nextMdx from '@next/mdx';
+import { rehypeDemos } from './src/components/demo/rehypeDemos.mjs';
 
 const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
 const workspaceRoot = path.resolve(currentDirectory, '../');
+const withMdx = nextMdx({
+  options: {
+    rehypePlugins: [rehypeDemos],
+  },
+});
 
 /**
  * @returns {{version: string}}
@@ -21,6 +28,7 @@ const rootPackage = loadPackageJson();
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   trailingSlash: false,
+  pageExtensions: ['mdx', 'tsx'],
   env: {
     // docs-infra
     LIB_VERSION: rootPackage.version,
@@ -67,4 +75,4 @@ const nextConfig = {
   },
 };
 
-export default withDocsInfra(nextConfig);
+export default withDocsInfra(withMdx(nextConfig));
diff --git a/docs/package.json b/docs/package.json
@@ -22,9 +22,12 @@
     "@emotion/react": "^11.13.3",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.13.0",
+    "@mdx-js/loader": "^3.1.0",
     "@mdx-js/mdx": "^3.0.1",
+    "@mdx-js/react": "^3.1.0",
     "@mui/system": "6.1.5",
     "@mui/utils": "6.1.5",
+    "@next/mdx": "^15.0.1",
     "@react-spring/web": "^9.7.4",
     "@stefanprobst/rehype-extract-toc": "^2.2.0",
     "@types/mdx": "^2.0.13",
@@ -57,6 +60,7 @@
     "remark-mdx-frontmatter": "^5.0.0",
     "shiki": "^1.12.1",
     "to-vfile": "^8.0.0",
+    "unist-util-visit": "^5.0.0",
     "vfile-matter": "^5.0.0"
   },
   "devDependencies": {

diff --git a/docs/src/app/new/(content)/components/dialog/NestedDialogs.tsx b/docs/src/app/new/(content)/components/dialog/NestedDialogs.tsx
@@ -0,0 +1,164 @@
+'use client';
+import * as React from 'react';
+import { Dialog as BaseDialog } from '@base_ui/react/Dialog';
+import { styled } from '@mui/system';
+
+export default function NestedDialogs() {
+  return (
+    <BaseDialog.Root>
+      <Trigger>Open</Trigger>
+      <Backdrop />
+      <Popup>
+        <Title>Dialog 1</Title>
+        <Controls>
+          <BaseDialog.Root>
+            <Trigger>Open Nested</Trigger>
+            <Backdrop />
+            <Popup>
+              <Title>Dialog 2</Title>
+              <Controls>
+                <BaseDialog.Root>
+                  <Trigger>Open Nested</Trigger>
+                  <Backdrop />
+                  <Popup>
+                    <Title>Dialog 3</Title>
+                    <Controls>
+                      <Close>Close</Close>
+                    </Controls>
+                  </Popup>
+                </BaseDialog.Root>
+                <Close>Close</Close>
+              </Controls>
+            </Popup>
+          </BaseDialog.Root>
+          <Close>Close</Close>
+        </Controls>
+      </Popup>
+    </BaseDialog.Root>
+  );
+}
+
+const grey = {
+  900: '#0f172a',
+  800: '#1e293b',
+  700: '#334155',
+  500: '#64748b',
+  300: '#cbd5e1',
+  200: '#e2e8f0',
+  100: '#f1f5f9',
+  50: '#f8fafc',
+};
+
+const Popup = styled(BaseDialog.Popup)(
+  ({ theme }) => `
+  --transition-duration: 150ms;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  min-width: 400px;
+  border-radius: 4px;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  font-family: IBM Plex Sans;
+  padding: 16px;
+  z-index: 2100;
+  transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--nested-dialogs))))
+    translateY(calc(-30px * var(--nested-dialogs)));
+  visibility: hidden;
+  opacity: 0.5;
+  transition:
+    transform var(--transition-duration) ease-in,
+    opacity var(--transition-duration) ease-in,
+    visibility var(--transition-duration) step-end;
+
+  &[data-open] {
+    @starting-style {
+      & {
+        transform: translate(-50%, -35%) scale(0.8) translateY(0);
+        opacity: 0.5;
+      }
+    }
+
+    visibility: visible;
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs))))
+      translateY(calc(-30px * var(--nested-dialogs)));
+    transition:
+      transform var(--transition-duration) ease-out,
+      opacity var(--transition-duration) ease-out,
+      visibility var(--transition-duration) step-start;
+  }
+`,
+);
+
+const Title = styled(BaseDialog.Title)`
+  font-size: 1.25rem;
+`;
+
+const Trigger = styled(BaseDialog.Trigger)(
+  ({ theme }) => `
+  background-color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: none;
+  font-family:
+    "IBM Plex Sans",
+    sans-serif;
+
+  &:hover {
+    background-color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+  }
+`,
+);
+
+const Close = styled(BaseDialog.Close)(
+  ({ theme }) => `
+  background-color: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-family: IBM Plex Sans, sans-serif;
+  min-width: 80px;
+
+  &:hover {
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  }
+`,
+);
+
+const Backdrop = styled(BaseDialog.Backdrop)`
+  background-color: rgb(0 0 0 / 0.2);
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  backdrop-filter: blur(0);
+  opacity: 0;
+  transition-property: opacity, backdrop-filter;
+  transition-duration: 250ms;
+  transition-timing-function: ease-in;
+
+  &[data-open] {
+    backdrop-filter: blur(6px);
+    opacity: 1;
+    transition-timing-function: ease-out;
+  }
+
+  &[data-entering] {
+    backdrop-filter: blur(0);
+    opacity: 0;
+  }
+`;
+
+const Controls = styled('div')(
+  ({ theme }) => `
+  display: flex;
+  flex-direction: row-reverse;
+  background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+  gap: 8px;
+  padding: 16px;
+  margin: 32px -16px -16px;
+`,
+);
diff --git a/docs/src/app/new/(content)/components/dialog/UnstyledDialogIntroduction/css-modules/index.js b/docs/src/app/new/(content)/components/dialog/UnstyledDialogIntroduction/css-modules/index.js
@@ -0,0 +1,29 @@
+'use client';
+import * as React from 'react';
+import { Dialog } from '@base_ui/react/Dialog';
+import classes from './styles.module.css';
+
+export default function UnstyledDialogIntroduction() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger className={classes.trigger}>Subscribe</Dialog.Trigger>
+      <Dialog.Backdrop className={classes.backdrop} />
+      <Dialog.Popup className={classes.popup}>
+        <Dialog.Title className={classes.title}>Subscribe</Dialog.Title>
+        <Dialog.Description>
+          Enter your email address to subscribe to our newsletter.
+        </Dialog.Description>
+        <input
+          className={classes.textfield}
+          type="email"
+          aria-label="Email address"
+          placeholder="[email protected]"
+        />
+        <div className="controls">
+          <Dialog.Close className={classes.close}>Subscribe</Dialog.Close>
+          <Dialog.Close className={classes.close}>Cancel</Dialog.Close>
+        </div>
+      </Dialog.Popup>
+    </Dialog.Root>
+  );
+}
diff --git a/.../src/app/new/(content)/components/dialog/UnstyledDialogIntroduction/css-modules/index.tsx b/.../src/app/new/(content)/components/dialog/UnstyledDialogIntroduction/css-modules/index.tsx
@@ -0,0 +1,29 @@
+'use client';
+import * as React from 'react';
+import { Dialog } from '@base_ui/react/Dialog';
+import classes from './styles.module.css';
+
+export default function UnstyledDialogIntroduction() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger className={classes.trigger}>Subscribe</Dialog.Trigger>
+      <Dialog.Backdrop className={classes.backdrop} />
+      <Dialog.Popup className={classes.popup}>
+        <Dialog.Title className={classes.title}>Subscribe</Dialog.Title>
+        <Dialog.Description>
+          Enter your email address to subscribe to our newsletter.
+        </Dialog.Description>
+        <input
+          className={classes.textfield}
+          type="email"
+          aria-label="Email address"
+          placeholder="[email protected]"
+        />
+        <div className="controls">
+          <Dialog.Close className={classes.close}>Subscribe</Dialog.Close>
+          <Dialog.Close className={classes.close}>Cancel</Dialog.Close>
+        </div>
+      </Dialog.Popup>
+    </Dialog.Root>
+  );
+}
diff --git a/.../new/(content)/components/dialog/UnstyledDialogIntroduction/css-modules/styles.module.css b/.../new/(content)/components/dialog/UnstyledDialogIntroduction/css-modules/styles.module.css
@@ -0,0 +1,102 @@
+.popup {
+  background: var(--gray-50);
+  border: 1px solid var(--gray-100);
+  min-width: 400px;
+  border-radius: 4px;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  font-family: IBM Plex Sans;
+  transform: translate(-50%, -50%);
+  padding: 16px;
+  z-index: 2100;
+
+  :global(.dark) & {
+    color: var(--gray-900);
+    border-color: var(--gray-700);
+  }
+}
+
+.trigger {
+  background-color: var(--gray-900);
+  color: var(--gray-50);
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: none;
+  font-family:
+    IBM Plex Sans,
+    sans-serif;
+
+  &:hover {
+    background-color: var(--gray-700);
+
+    :global(.dark) & {
+      background-color: var(--gray-200);
+    }
+  }
+
+  :global(.dark) & {
+    background-color: var(--gray-50);
+    color: var(--gray-900);
+  }
+}
+
+.close {
+  background-color: transparent;
+  border: 1px solid var(--gray-500);
+  color: var(--gray-900);
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-family:
+    IBM Plex Sans,
+    sans-serif;
+  min-width: 80px;
+
+  &:hover {
+    background-color: var(--gray-200);
+
+    :global(.dark) & {
+      background-color: var(--gray-700);
+    }
+  }
+
+  :global(.dark) & {
+    border-color: var(--gray-300);
+    color: var(--gray-50);
+  }
+}
+
+.controls {
+  display: flex;
+  flex-direction: row-reverse;
+  background: var(--gray-100);
+  gap: 8px;
+  padding: 16px;
+  margin: 32px -16px -16px;
+
+  :global(.dark) & {
+    background: var(--gray-800);
+  }
+}
+
+.title {
+  font-size: 1.25rem;
+}
+
+.backdrop {
+  background: rgba(0, 0, 0, 0.35);
+  position: fixed;
+  inset: 0;
+  backdrop-filter: blur(4px);
+  z-index: 2000;
+}
+.textfield {
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid var(--gray-300);
+  font-family: 'IBM Plex Sans', sans-serif;
+  margin: 16px 0;
+  width: 100%;
+  box-sizing: border-box;
+}
diff --git a/docs/src/app/new/(content)/components/dialog/UnstyledDialogIntroduction/index.ts b/docs/src/app/new/(content)/components/dialog/UnstyledDialogIntroduction/index.ts
@@ -0,0 +1,2 @@
+export { default as CssModules } from './css-modules';
+export { default as Tailwind } from './tailwind';