[Joy] Add palette customizer

docs/data/joy/customization/theme-builder/theme-builder.md

@@ -0,0 +1,10 @@
+# Theme builder
+
+<p class="description">Tools for tailoring your custom Joy UI theme.</p>
+
+## Colors
+
+Use the visual color palette builder below to output a code snippet that you can quickly copy and poste onto your codebase.
+For more details about how colors are strucured and work in Joy UI, [read the Colors page](/joy-ui/customization/theme-colors/).
+
+{{"component": "modules/components/JoyThemeBuilder.tsx"}}

docs/data/joy/getting-started/templates/TemplateCollection.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import LZString from 'lz-string';
 import startCase from 'lodash/startCase';
 import NextLink from 'next/link';
 import AspectRatio from '@mui/joy/AspectRatio';
@@ -13,28 +12,7 @@ import Typography from '@mui/joy/Typography';
 import SvgIcon from '@mui/joy/SvgIcon';
 import Visibility from '@mui/icons-material/Visibility';
 import codeSandbox from 'docs/src/modules/sandbox/CodeSandbox';
-import extractTemplates from 'docs/src/modules/utils/extractTemplates';
-
-const cache = {};
-const req = require.context('./?raw', true, /^\.\/[^/]+\/.*\.(js|tsx|ts)$/);
-req.keys().forEach((key) => {
-  cache[key] = req(key);
-});
-
-function compress(object) {
-  return LZString.compressToBase64(JSON.stringify(object))
-    .replace(/\+/g, '-') // Convert '+' to '-'
-    .replace(/\//g, '_') // Convert '/' to '_'
-    .replace(/=+$/, ''); // Remove ending '='
-}
-
-function addHiddenInput(form, name, value) {
-  const input = document.createElement('input');
-  input.type = 'hidden';
-  input.name = name;
-  input.value = value;
-  form.appendChild(input);
-}
+import sourceJoyTemplates from 'docs/src/modules/joy/sourceJoyTemplates';
 
 /**
  * To display a template on the site:
@@ -77,10 +55,10 @@ const AUTHORS = {
 
 export default function TemplateCollection() {
   const newTemplates = ['order-dashboard', 'sign-in-side']; // Stay at the top of the page with `new` badge
-  const templates = extractTemplates(cache);
+  const { names: templateNames, map: templateMap } = sourceJoyTemplates();
   const names = [
     ...newTemplates,
-    ...Object.keys(templates).filter((name) => !newTemplates.includes(name)),
+    ...templateNames.filter((name) => !newTemplates.includes(name)),
   ];
   return (
     <List
@@ -93,7 +71,7 @@ export default function TemplateCollection() {
       }}
     >
       {names.map((name) => {
-        const item = templates[name];
+        const item = templateMap.get(name);
         const author = AUTHORS[name];
         return (
           <Card
@@ -231,33 +209,19 @@ export default function TemplateCollection() {
                   data-ga-event-category="joy-template"
                   data-ga-event-label={name}
                   data-ga-event-action="codesandbox"
-                  onClick={() => {
-                    const { files } = codeSandbox.createJoyTemplate({
-                      ...item,
-                      title: `${startCase(name)} Template - Joy UI`,
-                      githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${
-                        process.env.LIB_VERSION
-                      }/docs/data/joy/templates/${name}/App.${
-                        item.codeVariant === 'TS' ? 'tsx' : 'js'
-                      }`,
-                    });
-                    const parameters = compress({ files });
-
-                    // ref: https://codesandbox.io/docs/api/#define-api
-                    const form = document.createElement('form');
-                    form.method = 'POST';
-                    form.target = '_blank';
-                    form.action = 'https://codesandbox.io/api/v1/sandboxes/define';
-                    addHiddenInput(form, 'parameters', parameters);
-                    addHiddenInput(
-                      form,
-                      'query',
-                      item.codeVariant === 'TS' ? 'file=/App.tsx' : 'file=/App.js',
-                    );
-                    document.body.appendChild(form);
-                    form.submit();
-                    document.body.removeChild(form);
-                  }}
+                  onClick={() =>
+                    codeSandbox
+                      .createJoyTemplate({
+                        ...item,
+                        title: `${startCase(name)} Template - Joy UI`,
+                        githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${
+                          process.env.LIB_VERSION
+                        }/docs/data/joy/templates/${name}/App.${
+                          item.codeVariant === 'TS' ? 'tsx' : 'js'
+                        }`,
+                      })
+                      .openSandbox()
+                  }
                 >
                   <SvgIcon viewBox="0 0 1080 1080">
                     <path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />

docs/data/joy/pages.ts

@@ -107,6 +107,7 @@ const pages = [
     children: [
       { pathname: '/joy-ui/customization/approaches' },
       { pathname: '/joy-ui/customization/dark-mode' },
+      { pathname: '/joy-ui/customization/using-css-variables', title: 'Using CSS variables' },
       {
         pathname: '/joy-ui/customization/theme',
         subheader: 'Theme',
@@ -117,8 +118,14 @@ const pages = [
           { pathname: '/joy-ui/customization/themed-components', title: 'Components' },
         ],
       },
-      { pathname: '/joy-ui/customization/using-css-variables', title: 'Using CSS variables' },
-      { pathname: '/joy-ui/customization/default-theme-viewer' },
+      {
+        subheader: 'Tools',
+        pathname: '/joy-ui/customization/tool',
+        children: [
+          { pathname: '/joy-ui/customization/default-theme-viewer' },
+          { pathname: '/joy-ui/customization/theme-builder' },
+        ],
+      },
     ],
   },
   {

docs/pages/joy-ui/customization/theme-builder.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docs/data/joy/customization/theme-builder/theme-builder.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} disableCssVarsProvider />;
+}

docs/src/modules/components/DemoToolbar.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import copy from 'clipboard-copy';
-import LZString from 'lz-string';
 import { useTheme, styled } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -27,21 +26,6 @@ import { useRouter } from 'next/router';
 import codeSandbox from '../sandbox/CodeSandbox';
 import stackBlitz from '../sandbox/StackBlitz';
 
-function compress(object) {
-  return LZString.compressToBase64(JSON.stringify(object))
-    .replace(/\+/g, '-') // Convert '+' to '-'
-    .replace(/\//g, '_') // Convert '/' to '_'
-    .replace(/=+$/, ''); // Remove ending '='
-}
-
-function addHiddenInput(form, name, value) {
-  const input = document.createElement('input');
-  input.type = 'hidden';
-  input.name = name;
-  input.value = value;
-  form.appendChild(input);
-}
-
 const Root = styled('div')(({ theme }) => ({
   display: 'none',
   [theme.breakpoints.up('sm')]: {
@@ -264,54 +248,6 @@ export default function DemoToolbar(props) {
     }
   };
 
-  const handleCodeSandboxClick = () => {
-    const { files } = codeSandbox.createReactApp(demoData);
-    const parameters = compress({ files });
-
-    // ref: https://codesandbox.io/docs/api/#define-api
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.target = '_blank';
-    form.action = 'https://codesandbox.io/api/v1/sandboxes/define';
-    addHiddenInput(form, 'parameters', parameters);
-    addHiddenInput(
-      form,
-      'query',
-      codeVariant === CODE_VARIANTS.TS ? 'file=/demo.tsx' : 'file=/demo.js',
-    );
-    document.body.appendChild(form);
-    form.submit();
-    document.body.removeChild(form);
-  };
-
-  const handleStackBlitzClick = () => {
-    const demoConfig = stackBlitz.createReactApp(demoData);
-
-    // ref: https://developer.stackblitz.com/docs/platform/post-api/
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.target = '_blank';
-    form.action = `https://stackblitz.com/run?file=demo.${
-      codeVariant === CODE_VARIANTS.TS ? 'tsx' : 'js'
-    }`;
-    addHiddenInput(form, 'project[template]', 'create-react-app');
-    addHiddenInput(form, 'project[title]', demoConfig.title);
-    addHiddenInput(
-      form,
-      'project[description]',
-      `# ${demoConfig.title}\n${demoConfig.description}`,
-    );
-    addHiddenInput(form, 'project[dependencies]', JSON.stringify(demoConfig.dependencies));
-    addHiddenInput(form, 'project[devDependencies]', JSON.stringify(demoConfig.devDependencies));
-    Object.keys(demoConfig.files).forEach((key) => {
-      const value = demoConfig.files[key];
-      addHiddenInput(form, `project[files][${key}]`, value);
-    });
-    document.body.appendChild(form);
-    form.submit();
-    document.body.removeChild(form);
-  };
-
   const [anchorEl, setAnchorEl] = React.useState(null);
   const handleMoreClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -538,7 +474,7 @@ export default function DemoToolbar(props) {
                   data-ga-event-category="demo"
                   data-ga-event-label={demo.gaLabel}
                   data-ga-event-action="codesandbox"
-                  onClick={handleCodeSandboxClick}
+                  onClick={() => codeSandbox.createReactApp(demoData).openSandbox('/demo')}
                   {...getControlProps(3)}
                 >
                   <SvgIcon viewBox="0 0 1024 1024">
@@ -552,7 +488,7 @@ export default function DemoToolbar(props) {
                   data-ga-event-category="demo"
                   data-ga-event-label={demo.gaLabel}
                   data-ga-event-action="stackblitz"
-                  onClick={handleStackBlitzClick}
+                  onClick={() => stackBlitz.createReactApp(demoData).openSandbox('demo')}
                   {...getControlProps(4)}
                 >
                   <SvgIcon viewBox="0 0 19 28">