docs: Use StackBlitz for S2, and remove CodeSandbox (#9321)

* Add StackBlitz for S2

* Remove CodeSandbox for now

* fix: stackblitz examples

* Simplify

---------

Co-authored-by: Robert Snow <[email protected]>

Author: devongovett

packages/dev/s2-docs/pages/react-aria/getting-started.mdx

@@ -28,7 +28,7 @@ Install React Aria with your preferred package manager.
 
 ## Quick start
 
-The documentation for each component includes vanilla CSS and [Tailwind](https://tailwindcss.com) examples. Copy and paste these into your project and make them your own. You can also download each example as a ZIP or open in CodeSandbox or StackBlitz.
+The documentation for each component includes vanilla CSS and [Tailwind](https://tailwindcss.com) examples. Copy and paste these into your project and make them your own. You can also download each example as a ZIP or open in StackBlitz.
 
 <ExampleSwitcher>
   ```tsx render docs={docs.exports.Select} links={docs.links} props={[]} type="vanilla" files={["starters/docs/src/Select.tsx", "starters/docs/src/Select.css"]} showCoachMark

packages/dev/s2-docs/src/CodePlatter.tsx

@@ -2,15 +2,15 @@
 
 import {ActionButton, ActionButtonGroup, Button, ButtonGroup, Content, createIcon, Dialog, DialogContainer, Heading, Link, Menu, MenuItem, MenuTrigger, Text, ToastQueue, Tooltip, TooltipTrigger} from '@react-spectrum/s2';
 import {CopyButton} from './CopyButton';
-import {createCodeSandbox, getCodeSandboxFiles} from './CodeSandbox';
 import {createStackBlitz} from './StackBlitz';
 import Download from '@react-spectrum/s2/icons/Download';
 import type {DownloadFiles} from './CodeBlock';
+import {getCodeSandboxFiles} from './CodeSandbox';
 import {keyframes} from '../../../@react-spectrum/s2/style/style-macro' with {type: 'macro'};
 import {Library} from './library';
 import LinkIcon from '@react-spectrum/s2/icons/Link';
 import OpenIn from '@react-spectrum/s2/icons/OpenIn';
-import Polygon4 from '@react-spectrum/s2/icons/Polygon4';
+// import Polygon4 from '@react-spectrum/s2/icons/Polygon4';
 import Prompt from '@react-spectrum/s2/icons/Prompt';
 import React, {createContext, ProviderProps, ReactNode, RefObject, useContext, useRef, useState} from 'react';
 import {ShadcnCommand} from './ShadcnCommand';
@@ -72,7 +72,7 @@ export function ShareUrlProvider(props: ProviderProps<string | null>) {
 export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) {
   let codeRef = useRef<HTMLDivElement | null>(null);
   let [showShadcn, setShowShadcn] = useState(false);
-  let [showCodeSandbox, setShowCodeSandbox] = useState(false);
+  // let [showCodeSandbox, setShowCodeSandbox] = useState(false);
   let getText = () => codeRef.current!.querySelector('pre')!.textContent!;
   let {library} = useContext(CodePlatterContext);
   if (!type) {
@@ -158,16 +158,16 @@ export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) {
                   <Text>Install with shadcn</Text>
                 </MenuItem>
               }
-              {files &&
+              {/* {files &&
                 <MenuItem
                   onAction={() => {
                     setShowCodeSandbox(true);
                   }}>
                   <Polygon4 />
                   <Text slot="label">Open in CodeSandbox</Text>
                 </MenuItem>
-              }
-              {files && type !== 's2' &&
+              } */}
+              {files &&
                 <MenuItem
                   onAction={() => {
                     createStackBlitz(getExampleFiles(codeRef, files, urls, entry), deps, type, entry);
@@ -192,11 +192,11 @@ export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) {
       <div ref={codeRef}>
         {children}
       </div>
-      <DialogContainer onDismiss={() => setShowCodeSandbox(false)}>
+      {/* <DialogContainer onDismiss={() => setShowCodeSandbox(false)}>
         {showCodeSandbox &&
           <CodeSandboxDialog getExampleFiles={getExampleFiles} codeRef={codeRef} files={files} urls={urls} entry={entry} deps={deps} type={type} />
         }
-      </DialogContainer>
+      </DialogContainer> */}
       <DialogContainer onDismiss={() => setShowShadcn(false)}>
         {showShadcn &&
           <ShadcnDialog registryUrl={registryUrl} />
@@ -250,9 +250,12 @@ function getExampleCode(codeRef: RefObject<HTMLDivElement | null>, urls: {[name:
     }
   }
 
-  return code
+  if (!code.includes('export default function')) {
     // Export the last function
-    .replace(/\nfunction ([^(]+)((.|\n)+\n\}\n?)$/, '\nexport default function Example$2')
+    code = code.replace(/\nfunction ([^(]+)((.|\n)+\n\}\n?)$/, '\nexport default function Example$2');
+  }
+
+  return code
     // Add function wrapper around raw JSX in examples.
     .replace(/\n<((?:.|\n)+)/, (_, code) => {
       let res = '\nexport default function Example() {\n  return (\n    <';
@@ -319,31 +322,31 @@ function ShadcnDialog({registryUrl}) {
   );
 }
 
-function CodeSandboxDialog({getExampleFiles, codeRef, files, urls, entry, deps, type}) {
-  return (
-    <Dialog size="L">
-      {({close}) => (<>
-        <Heading slot="title">Create a CodeSandbox</Heading>
-        <Content>
-          <p>This will create an editable sandbox with this example in a new tab.</p>
-          <p><strong>Troubleshooting:</strong> If the sandbox fails to open or isn't created, try logging in to CodeSandbox first. If you're already logged in, try signing out and back in.</p>
-        </Content>
-
-        <ButtonGroup>
-          <Button variant="secondary" slot="close">Cancel</Button>
-          <Button
-            variant="accent"
-            onPress={() => {
-              createCodeSandbox(getExampleFiles(codeRef, files, urls, entry), deps, type, entry);
-              close();
-            }}>
-            Open in CodeSandbox
-          </Button>
-        </ButtonGroup>
-      </>)}
-    </Dialog>
-  );
-}
+// function CodeSandboxDialog({getExampleFiles, codeRef, files, urls, entry, deps, type}) {
+//   return (
+//     <Dialog size="L">
+//       {({close}) => (<>
+//         <Heading slot="title">Create a CodeSandbox</Heading>
+//         <Content>
+//           <p>This will create an editable sandbox with this example in a new tab.</p>
+//           <p><strong>Troubleshooting:</strong> If the sandbox fails to open or isn't created, try logging in to CodeSandbox first. If you're already logged in, try signing out and back in.</p>
+//         </Content>
+
+//         <ButtonGroup>
+//           <Button variant="secondary" slot="close">Cancel</Button>
+//           <Button
+//             variant="accent"
+//             onPress={() => {
+//               createCodeSandbox(getExampleFiles(codeRef, files, urls, entry), deps, type, entry);
+//               close();
+//             }}>
+//             Open in CodeSandbox
+//           </Button>
+//         </ButtonGroup>
+//       </>)}
+//     </Dialog>
+//   );
+// }
 
 const pulseAnimation = keyframes(`
   0% {

packages/dev/s2-docs/src/StackBlitz.tsx

@@ -65,6 +65,7 @@ function getFiles(
       dependencies: {
         react: '^19',
         'react-dom': '^19',
+        ...(type === 's2' ? {'@react-spectrum/s2': 'latest'} : {}),
         ...deps
       },
       devDependencies: {
@@ -77,17 +78,21 @@ function getFiles(
           '@tailwindcss/vite': '^4',
           'tailwindcss-react-aria-components': '^2',
           'tailwindcss-animate': '^1'
+        } : {}),
+        ...(type === 's2' ? {
+          'unplugin-parcel-macros': '^0.1.2-alpha.1'
         } : {})
       }
     }, null, 2) + '\n',
     'vite.config.ts': `import {defineConfig} from 'vite';
-import react from '@vitejs/plugin-react';${type === 'tailwind' ? "\nimport tailwindcss from '@tailwindcss/vite';" : ''}
+import react from '@vitejs/plugin-react';${type === 'tailwind' ? "\nimport tailwindcss from '@tailwindcss/vite';" : ''}${type === 's2' ? "\nimport macros from 'unplugin-parcel-macros';" : ''}
 
 export default defineConfig({
-  plugins: [react()${type === 'tailwind' ? ', tailwindcss()' : ''}],
+  plugins: [${type === 's2' ? 'macros.vite(), ' : ''}react()${type === 'tailwind' ? ', tailwindcss()' : ''}],
 });
 `,
-    'index.html': `<html lang="en">
+    'index.html': `<!DOCTYPE html>
+<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Test</title>
@@ -99,10 +104,10 @@ export default defineConfig({
 </body>
 </html>
 `,
-    'src/index.tsx': `import {createRoot} from 'react-dom/client';
+    'src/index.tsx': `import {createRoot} from 'react-dom/client';${type === 's2' ? "\nimport '@react-spectrum/s2/page.css';\nimport {Provider} from '@react-spectrum/s2';" : ''}
 import ${entryName} from './${entryName}';
 
-createRoot(document.getElementById('root')!).render(<${entryName} />);
+createRoot(document.getElementById('root')!).render(${type === 's2' ? `\n  <Provider>\n    <${entryName} />\n  </Provider>\n` : `<${entryName} />`});
 `,
     'tsconfig.json': JSON.stringify({
       compilerOptions: {