From 80992ce4a3b1a7f13ef7a0130efb61ad7ebc8b8a Mon Sep 17 00:00:00 2001
From: Naman Goel <nmn@users.noreply.github.com>
Date: Sat, 4 Jan 2025 00:06:00 +0300
Subject: [PATCH] docs: Better mobile design for the playground. Initial
 implementation complete

---
 apps/docs/components/LoadingSpinner.js        |  46 +++
 apps/docs/components/Playground.js            | 348 +++++++++++++-----
 .../docs/components/playground-utils/files.js |   7 +-
 apps/docs/src/pages/playground.js             |  61 +++
 4 files changed, 365 insertions(+), 97 deletions(-)
 create mode 100644 apps/docs/components/LoadingSpinner.js

diff --git a/apps/docs/components/LoadingSpinner.js b/apps/docs/components/LoadingSpinner.js
new file mode 100644
index 00000000..264b6262
--- /dev/null
+++ b/apps/docs/components/LoadingSpinner.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+import * as React from 'react';
+import * as stylex from '@stylexjs/stylex';
+
+const spin = stylex.keyframes({
+  '0%': { transform: 'rotate(0deg)' },
+  '100%': { transform: 'rotate(360deg)' },
+});
+
+const styles = stylex.create({
+  spinner: {
+    width: 40,
+    height: 40,
+    borderWidth: 4,
+    borderStyle: 'solid',
+    borderColor: 'var(--ifm-color-emphasis-200)',
+    borderTopColor: 'var(--ifm-color-primary)',
+    borderRadius: '50%',
+    animationName: spin,
+    animationDuration: '1s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'linear',
+  },
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: 200,
+  },
+});
+
+export default function LoadingSpinner() {
+  return (
+    <div {...stylex.props(styles.container)}>
+      <div {...stylex.props(styles.spinner)} />
+    </div>
+  );
+}
diff --git a/apps/docs/components/Playground.js b/apps/docs/components/Playground.js
index b6ffd58f..7d7b75f9 100644
--- a/apps/docs/components/Playground.js
+++ b/apps/docs/components/Playground.js
@@ -20,6 +20,7 @@ import { UnControlled as CodeMirror } from 'react-codemirror2';
 import 'codemirror/mode/javascript/javascript';
 import { files } from './playground-utils/files';
 import useDebounced from './hooks/useDebounced';
+import LoadingSpinner from './LoadingSpinner';
 
 // Add FontAwesome icons to the library
 library.add(faBars, faRotateRight);
@@ -55,17 +56,17 @@ async function wcSpawn(instance, ...args) {
  * @returns {Promise} - Promise that resolves with the configured WebContainer instance.
  */
 async function makeWebcontainer() {
-  console.log('Booting WebContainer...');
+  // console.log('Booting WebContainer...');
   const instance = await WebContainer.boot();
-  console.log('Boot successful!');
+  // console.log('Boot successful!');
 
-  console.log('Mounting files...');
+  // console.log('Mounting files...');
   await instance.mount(files);
-  console.log('Mounted files!');
+  // console.log('Mounted files!');
 
-  console.log('Installing dependencies...');
+  // console.log('Installing dependencies...');
   await wcSpawn(instance, 'npm', ['install']);
-  console.log('Installed dependencies!');
+  // console.log('Installed dependencies!');
 
   return instance;
 }
@@ -83,36 +84,7 @@ export default function Playground() {
   const [error, setError] = useState(null);
   const urlRef = useRef(null);
 
-  /**
-   * Function to build the WebContainer and start the development server.
-   */
-  const build = async () => {
-    const containerInstance = instance.current;
-    if (!containerInstance) {
-      console.log('error due to failed instance');
-      setError(
-        'WebContainer failed to load. Please try reloading or use a different browser.',
-      );
-      return;
-    }
-
-    console.log('Trying to run `npm run dev`...');
-    const process = await containerInstance.spawn('npm', ['run', 'dev']);
-    console.log('Spawned `npm run dev`...');
-    process.output.pipeTo(
-      new WritableStream({
-        write(data) {
-          console.log(data);
-        },
-      }),
-    );
-    console.log('Waiting for server-ready event...');
-    containerInstance.on('server-ready', (port, url) => {
-      console.log('server-ready', port, url);
-      setUrl(url);
-      urlRef.current = url;
-    });
-  };
+  const [activePanel, setActivePanel] = useState('code');
 
   /**
    * Function to update files in the WebContainer.
@@ -159,20 +131,41 @@ export default function Playground() {
   // useEffect to initialize the WebContainer and build it
   useEffect(() => {
     let loadingTimeout;
-    makeWebcontainer().then((i) => {
-      instance.current = i;
-      build().then(() => {
-        loadingTimeout = setTimeout(() => {
-          if (!urlRef.current) {
-            console.log('error due to timeout...');
-            setError(
-              'WebContainer failed to load. Please try reloading or use a different browser.',
-            );
-          }
-          loadingTimeout = null;
-        }, 10000);
+
+    /**
+     * Function to build the WebContainer and start the development server.
+     */
+    async function build() {
+      const containerInstance = await makeWebcontainer();
+
+      if (!containerInstance) {
+        console.log('error due to failed instance');
+        setError(
+          'WebContainer failed to load. Please try reloading or use a different browser.',
+        );
+        return;
+      }
+      instance.current = containerInstance;
+
+      // console.log('Trying to run `npm run dev`...');
+      const process = await containerInstance.spawn('npm', ['run', 'dev']);
+      // console.log('Spawned `npm run dev`...');
+      process.output.pipeTo(
+        new WritableStream({
+          write(data) {
+            console.log(data);
+          },
+        }),
+      );
+      // console.log('Waiting for server-ready event...');
+      containerInstance.on('server-ready', (port, url) => {
+        console.log('server-ready', port, url);
+        setUrl(url);
+        urlRef.current = url;
       });
-    });
+    }
+
+    build();
 
     // Cleanup function to unmount the WebContainer and clear timeouts
     return () => {
@@ -186,26 +179,76 @@ export default function Playground() {
   // Render the Playground component
   return (
     <div {...stylex.props(styles.root)}>
-      <header {...stylex.props(styles.header)}>
-        {/* <button>
-          <FontAwesomeIcon icon="fa-solid fa-bars" />
-        </button> */}
-        <button
-          {...stylex.props(styles.reloadButton)}
-          onClick={reloadWebContainer}
-        >
-          <FontAwesomeIcon
-            aria-label="reload"
-            icon="fa-solid fa-rotate-right"
-          />
-        </button>
-      </header>
+      <div {...stylex.props(styles.headerContainer)}>
+        <div {...stylex.props(styles.headerContent)}>
+          <div {...stylex.props(styles.desktopHeader)}>
+            <span {...stylex.props(styles.headerNote)}>
+              Experimental playground - Try a{' '}
+              <a
+                {...stylex.props(styles.link)}
+                href="https://stackblitz.com/edit/vitejs-vite-3vkyxg?file=package.json"
+              >
+                full example app
+              </a>
+            </span>
+          </div>
+          <div {...stylex.props(styles.mobileNav)}>
+            <button
+              {...stylex.props(
+                styles.tabButton,
+                activePanel === 'code' && styles.tabButtonActive,
+              )}
+              onClick={() => setActivePanel('code')}
+            >
+              Code
+            </button>
+            <button
+              {...stylex.props(
+                styles.tabButton,
+                activePanel === 'preview' && styles.tabButtonActive,
+              )}
+              onClick={() => setActivePanel('preview')}
+            >
+              Preview
+              {url && activePanel === 'preview' && (
+                <span {...stylex.props(styles.mobileReloadContainer)}>
+                  <button
+                    {...stylex.props(
+                      styles.reloadButton,
+                      styles.mobileReloadButton,
+                    )}
+                    aria-label="Reload preview"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      reloadWebContainer();
+                    }}
+                  >
+                    <FontAwesomeIcon icon="fa-solid fa-rotate-right" />
+                  </button>
+                </span>
+              )}
+            </button>
+          </div>
+          <div {...stylex.props(styles.desktopReloadContainer)}>
+            <button
+              {...stylex.props(styles.reloadButton)}
+              aria-label="Reload preview"
+              onClick={reloadWebContainer}
+            >
+              <FontAwesomeIcon icon="fa-solid fa-rotate-right" />
+            </button>
+          </div>
+        </div>
+      </div>
       <div {...stylex.props(styles.container)}>
         <BrowserOnly>
           {() => (
             <>
               <CodeMirror
-                {...stylex.props(styles.textarea)}
+                {...stylex.props(
+                  styles.panel,
+                  activePanel === 'code' && styles.panelActive,
+                )}
                 onChange={(editor, data, newCode) => handleCodeChange(newCode)}
                 options={{
                   mode: 'javascript',
@@ -215,14 +258,32 @@ export default function Playground() {
                 value={code}
               />
               {error ? (
-                <div {...stylex.props(styles.textarea, styles.centered)}>
+                <div
+                  {...stylex.props(
+                    styles.panel,
+                    activePanel === 'preview' && styles.panelActive,
+                    styles.centered,
+                  )}
+                >
                   {error}
                 </div>
               ) : url ? (
-                <iframe {...stylex.props(styles.textarea)} src={url} />
+                <iframe
+                  {...stylex.props(
+                    styles.panel,
+                    activePanel === 'preview' && styles.panelActive,
+                  )}
+                  src={url}
+                />
               ) : (
-                <div {...stylex.props(styles.textarea, styles.centered)}>
-                  Loading...
+                <div
+                  {...stylex.props(
+                    styles.panel,
+                    activePanel === 'preview' && styles.panelActive,
+                    styles.centered,
+                  )}
+                >
+                  <LoadingSpinner />
                 </div>
               )}
             </>
@@ -233,72 +294,173 @@ export default function Playground() {
   );
 }
 
+const MOBILE = '@media (max-width: 768px)';
+
 // Style definitions for the Playground component
 const styles = stylex.create({
   root: {
     minHeight: '100vh',
     backgroundColor: 'var(--bg1)',
   },
-  header: {
-    height: 40,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    paddingInline: 4,
+  headerContainer: {
     backgroundColor: 'var(--playground-container-bg)',
     borderBottomWidth: 1,
     borderBottomStyle: 'solid',
     borderBottomColor: 'rgba(255, 255, 255, 0.1)',
     boxShadow: '0 1px 4px rgba(0, 0, 0, 0.1)',
-    zIndex: 20,
   },
-  reloadButton: {
+  headerContent: {
+    alignItems: 'center',
     display: 'flex',
+    height: 40,
+    justifyContent: 'space-between',
+    paddingInline: 16,
+    position: 'relative',
+  },
+  desktopHeader: {
+    display: {
+      default: 'block',
+      [MOBILE]: 'none',
+    },
+  },
+  headerNote: {
+    color: 'var(--fg2)',
+    fontSize: '0.9rem',
+    fontStyle: 'italic',
+  },
+  mobileNav: {
+    alignItems: 'center',
+    display: {
+      default: 'none',
+      [MOBILE]: 'flex',
+    },
+    flexGrow: 1,
+    gap: 8,
+    height: '100%',
+    width: '100%',
+  },
+  tabButton: {
     alignItems: 'center',
-    justifyContent: 'center',
     backgroundColor: {
       default: 'transparent',
       ':hover': 'var(--ifm-color-primary-light)',
     },
+    borderColor: 'transparent',
+    borderRadius: 4,
+    borderStyle: 'none',
+    borderWidth: 0,
     color: 'var(--fg1)',
-    width: 32,
-    height: 32,
+    cursor: 'pointer',
+    display: 'flex',
+    flexBasis: 0,
+    flexGrow: 1,
+    fontSize: '0.9rem',
+    height: 'calc(100% - 12px)',
+    justifyContent: 'center',
+    paddingBottom: 0,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 0,
+    transitionDuration: '200ms',
+    transitionProperty: 'background-color',
+  },
+  tabButtonActive: {
+    color: 'white',
+    backgroundColor: {
+      default: 'var(--ifm-color-primary)',
+      ':hover': 'var(--ifm-color-primary)',
+    },
+  },
+  reloadButton: {
+    alignItems: 'center',
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': 'var(--ifm-color-primary-light)',
+    },
     borderRadius: 4,
     borderStyle: 'none',
+    color: 'var(--fg1)',
     cursor: 'pointer',
-    zIndex: 20,
+    display: 'flex',
+    height: 32,
+    justifyContent: 'center',
     padding: 4,
-    transitionProperty: 'background-color, transform',
-    transitionDuration: '200ms, 150ms',
     transform: {
       default: null,
       ':hover': 'scale(1.05)',
     },
+    transitionDuration: '200ms, 150ms',
+    transitionProperty: 'background-color, transform',
+    width: 32,
+    zIndex: 20,
   },
   container: {
-    display: 'flex',
     alignItems: 'center',
-    justifyContent: 'center',
+    borderBottomColor: 'var(--cyan)',
+    borderBottomStyle: 'solid',
+    borderBottomWidth: 2,
+    display: 'flex',
     height: stylex.firstThatWorks(
       'calc(100dvh - 100px)',
       'calc(100vh - 100px)',
     ),
-    borderBottomWidth: 2,
-    borderBottomStyle: 'solid',
-    borderBottomColor: 'var(--cyan)',
+    justifyContent: 'center',
+    position: 'relative',
   },
-  textarea: {
+  panel: {
+    alignItems: 'stretch',
+    borderStyle: 'none',
+    borderWidth: 0,
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'stretch',
-    justifyContent: 'stretch',
-    width: '50%',
     height: '100%',
-    borderWidth: 0,
-    borderStyle: 'none',
+    justifyContent: 'stretch',
+    left: 0,
+    opacity: {
+      default: 1,
+      [MOBILE]: 0,
+    },
+    pointerEvents: {
+      default: 'auto',
+      [MOBILE]: 'none',
+    },
+    position: {
+      default: 'relative',
+      [MOBILE]: 'absolute',
+    },
+    top: 0,
+    transitionDuration: '200ms',
+    transitionProperty: 'opacity',
+    width: {
+      default: '50%',
+      [MOBILE]: '100%',
+    },
+  },
+  panelActive: {
+    opacity: 1,
+    pointerEvents: 'auto',
+    zIndex: 1,
   },
   centered: {
     alignItems: 'center',
     justifyContent: 'center',
   },
+  desktopReloadContainer: {
+    display: {
+      default: 'block',
+      [MOBILE]: 'none',
+    },
+  },
+  mobileReloadContainer: {
+    display: {
+      default: 'none',
+      [MOBILE]: 'inline-flex',
+    },
+    marginLeft: 8,
+  },
+  mobileReloadButton: {
+    color: 'white',
+    height: 24,
+    width: 24,
+  },
 });
diff --git a/apps/docs/components/playground-utils/files.js b/apps/docs/components/playground-utils/files.js
index 5570b215..1d735b60 100644
--- a/apps/docs/components/playground-utils/files.js
+++ b/apps/docs/components/playground-utils/files.js
@@ -142,13 +142,13 @@ export default defineConfig({
     "preview": "vite preview"
   },
   "dependencies": {
-    "@stylexjs/stylex": "^0.10.0-beta.2",
+    "@stylexjs/stylex": "^0.10.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.25.9",
-    "@stylexjs/postcss-plugin": "^0.10.0-beta.2",
+    "@stylexjs/postcss-plugin": "^0.10.0",
     "@vitejs/plugin-react": "^4.3.4",
     "postcss": "^8.4.49",
     "vite": "^6.0.1"
@@ -179,8 +179,7 @@ createRoot(root).render(
       },
       'App.jsx': {
         file: {
-          contents: `
-import { useState } from 'react';
+          contents: `import { useState } from 'react';
 import reactLogo from './assets/react.svg';
 import viteLogo from '/vite.svg';
 import * as stylex from '@stylexjs/stylex';
diff --git a/apps/docs/src/pages/playground.js b/apps/docs/src/pages/playground.js
index 67579ce9..490b8675 100644
--- a/apps/docs/src/pages/playground.js
+++ b/apps/docs/src/pages/playground.js
@@ -8,6 +8,7 @@
  */
 
 import * as React from 'react';
+import * as stylex from '@stylexjs/stylex';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import Layout from '@theme/Layout';
 
@@ -16,10 +17,70 @@ export default function PlaygroundPage() {
     <Layout>
       <BrowserOnly>
         {() => {
+          const isSafari = /^((?!chrome|android).)*safari/i.test(
+            navigator.userAgent,
+          );
+
+          if (isSafari) {
+            return (
+              <div {...stylex.props(styles.unsupportedMessage)}>
+                <h3 {...stylex.props(styles.messageTitle)}>
+                  Safari Not Supported
+                </h3>
+                <p {...stylex.props(styles.messageText)}>
+                  Safari is not supported at this time. Please try our{' '}
+                  <a
+                    {...stylex.props(styles.link)}
+                    href="https://stackblitz.com/edit/vitejs-vite-3vkyxg?file=package.json"
+                  >
+                    StackBlitz playground
+                  </a>{' '}
+                  instead.
+                </p>
+              </div>
+            );
+          }
+
           const Playground = require('../../components/Playground').default;
+
           return <Playground />;
         }}
       </BrowserOnly>
     </Layout>
   );
 }
+
+const styles = stylex.create({
+  unsupportedMessage: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 32,
+    marginBlock: 64,
+    marginInline: 'auto',
+    maxWidth: 600,
+    textAlign: 'center',
+    backgroundColor: 'var(--ifm-background-surface-color)',
+    borderRadius: 8,
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+  },
+  messageTitle: {
+    fontSize: '1.25rem',
+    marginBottom: 16,
+    color: 'var(--ifm-color-emphasis-700)',
+  },
+  messageText: {
+    fontSize: '1rem',
+    lineHeight: 1.5,
+    color: 'var(--ifm-font-color-base)',
+    margin: 0,
+  },
+  link: {
+    color: 'var(--ifm-color-primary)',
+    textDecoration: {
+      default: 'none',
+      ':hover': 'underline',
+    },
+  },
+});