fix(docs): split ejected React skin sample into player + component files (#1588)

site/src/components/docs/EjectedSkin.astro

@@ -1,5 +1,6 @@
 ---
 import { getEntry } from 'astro:content';
+import type { BundledLanguage } from 'shiki';
 import ServerCode from '@/components/Code/ServerCode.astro';
 import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs.tsx';
 
@@ -11,24 +12,50 @@ const { id } = Astro.props;
 const entry = await getEntry('ejectedSkins', id);
 if (!entry) return;
 const skin = entry.data;
+
+const EXT_TO_LANG: Record<string, BundledLanguage> = {
+  ts: 'ts',
+  tsx: 'tsx',
+  js: 'js',
+  jsx: 'jsx',
+};
+
+function langFromFilename(filename: string): BundledLanguage {
+  const ext = filename.split('.').pop() ?? '';
+  return EXT_TO_LANG[ext] ?? 'tsx';
+}
+
+// Order React files so the component file is first (initial tab), then config files.
+const reactFiles = skin.tsx
+  ? Object.entries(skin.tsx).sort(([a], [b]) => {
+      const aIsComponent = a.endsWith('.tsx') || a.endsWith('.jsx');
+      const bIsComponent = b.endsWith('.tsx') || b.endsWith('.jsx');
+      if (aIsComponent === bIsComponent) return a.localeCompare(b);
+      return aIsComponent ? -1 : 1;
+    })
+  : [];
 ---
 
 {
   skin.platform === "react" ? (
     <TabsRoot client:idle>
       <TabsList client:idle label={`${skin.name} implementation`}>
-        <Tab client:idle value="tsx" initial>
-          Skin.tsx
-        </Tab>
+        {reactFiles.map(([filename], index) => (
+          <Tab client:idle value={filename} initial={index === 0}>
+            {filename}
+          </Tab>
+        ))}
         {skin.css && (
           <Tab client:idle value="css">
             skin.css
           </Tab>
         )}
       </TabsList>
-      <TabsPanel client:idle value="tsx" initial>
-        <ServerCode code={skin.tsx!} lang="tsx" />
-      </TabsPanel>
+      {reactFiles.map(([filename, code], index) => (
+        <TabsPanel client:idle value={filename} initial={index === 0}>
+          <ServerCode code={code} lang={langFromFilename(filename)} />
+        </TabsPanel>
+      ))}
       {skin.css && (
         <TabsPanel client:idle value="css">
           <ServerCode code={skin.css} lang="css" />

site/src/components/home/Demo/Demo.astro

@@ -78,9 +78,14 @@ const minimalVideoReact = (await getEntry('ejectedSkins', 'minimal-video-react')
       <ServerCode slot="defaultHtmlCss" code={defaultVideo.css!} lang="css" />
       <ServerCode
         slot="defaultReactCode"
-        code={defaultVideoReact.tsx!}
+        code={defaultVideoReact.tsx!["VideoPlayer.tsx"]!}
         lang="tsx"
       />
+      <ServerCode
+        slot="defaultReactPlayer"
+        code={defaultVideoReact.tsx!["player.ts"]!}
+        lang="ts"
+      />
       <ServerCode
         slot="defaultReactCss"
         code={defaultVideoReact.css!}
@@ -94,9 +99,14 @@ const minimalVideoReact = (await getEntry('ejectedSkins', 'minimal-video-react')
       <ServerCode slot="minimalHtmlCss" code={minimalVideo.css!} lang="css" />
       <ServerCode
         slot="minimalReactCode"
-        code={minimalVideoReact.tsx!}
+        code={minimalVideoReact.tsx!["VideoPlayer.tsx"]!}
         lang="tsx"
       />
+      <ServerCode
+        slot="minimalReactPlayer"
+        code={minimalVideoReact.tsx!["player.ts"]!}
+        lang="ts"
+      />
       <ServerCode
         slot="minimalReactCss"
         code={minimalVideoReact.css!}

site/src/components/home/Demo/Eject.tsx

@@ -7,10 +7,12 @@ interface EjectDemoProps {
   defaultHtmlCode: React.ReactNode;
   defaultHtmlCss: React.ReactNode;
   defaultReactCode: React.ReactNode;
+  defaultReactPlayer: React.ReactNode;
   defaultReactCss: React.ReactNode;
   minimalHtmlCode: React.ReactNode;
   minimalHtmlCss: React.ReactNode;
   minimalReactCode: React.ReactNode;
+  minimalReactPlayer: React.ReactNode;
   minimalReactCss: React.ReactNode;
 }
 
@@ -28,6 +30,7 @@ export default function EjectDemo(props: EjectDemoProps) {
     : isDefault
       ? props.defaultReactCode
       : props.minimalReactCode;
+  const playerSlot = isHtml ? null : isDefault ? props.defaultReactPlayer : props.minimalReactPlayer;
   const cssSlot = isHtml
     ? isDefault
       ? props.defaultHtmlCss
@@ -44,6 +47,11 @@ export default function EjectDemo(props: EjectDemoProps) {
         <Tab variant="expanded" value="code" initial>
           {codeLabel}
         </Tab>
+        {playerSlot && (
+          <Tab variant="expanded" value="player">
+            JS
+          </Tab>
+        )}
         <Tab variant="expanded" value="css">
           CSS
         </Tab>
@@ -51,6 +59,11 @@ export default function EjectDemo(props: EjectDemoProps) {
       <TabsPanel variant="expanded" value="code" initial className="bg-faded-black dark:bg-soot m-2.5 mt-0">
         {codeSlot}
       </TabsPanel>
+      {playerSlot && (
+        <TabsPanel variant="expanded" value="player" className="bg-faded-black dark:bg-soot m-2.5 mt-0">
+          {playerSlot}
+        </TabsPanel>
+      )}
       <TabsPanel variant="expanded" value="css" className="bg-faded-black dark:bg-soot m-2.5 mt-0">
         {cssSlot}
       </TabsPanel>

site/src/content.config.ts

@@ -183,8 +183,8 @@ const ejectedSkins = defineCollection({
     platform: z.enum(['html', 'react']),
     style: z.enum(['css', 'tailwind']),
     html: z.string().optional(),
-    tsx: z.string().optional(),
-    jsx: z.string().optional(),
+    tsx: z.record(z.string(), z.string()).optional(),
+    jsx: z.record(z.string(), z.string()).optional(),
     css: z.string().optional(),
   }),
 });