feat(sandpack): fileExplorer/codeEditor/preview props

pmndrs · Nov 5, 2024 · 65ab7f4 · 65ab7f4
1 parent 5752ba0
commit 65ab7f4
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 4 deletions.
diff --git a/docs/getting-started/authoring.mdx b/docs/getting-started/authoring.mdx
@@ -413,6 +413,41 @@ It is also possible to pass some individual [file format](https://sandpack.codes
 
 </details>
 
+#### `Sandpack[fileExplorer]`
+
+```tsx
+<Sandpack
+  template="react-ts"
+  folder="authoring-sandpack-cloud"
+  fileExplorer
+/>
+```
+
+<details>
+  <summary>Result</summary>
+
+<Sandpack
+  template="react-ts"
+  folder="authoring-sandpack-cloud"
+  fileExplorer
+/>
+
+</details>
+
+> [!TIP]
+> Conveniently, enabling `fileExplorer` will by default `[codeEditor={showTabs: false}]`.
+> You can override it with [`[codeEditor]` options](#sandpack[codeeditor])
+
+You can also pass [any `fileExplorer={options: ComponentProps<SandpackFileExplorer>}`](https://sandpack.codesandbox.io/docs/advanced-usage/components#file-explorer:~:text=Preview-,Options,-If%20you%27re%20looking).
+
+#### `Sandpack[codeEditor]`
+
+You can pass [any `codeEditor={options: ComponentProps<SandpackCodeEditor>}`](https://sandpack.codesandbox.io/docs/advanced-usage/components#code-editor:~:text=Preview-,Options,-Extensions).
+
+#### `Sandpack[preview]`
+
+You can pass [any `preview={options: ComponentProps<SandpackPreview>}`](https://sandpack.codesandbox.io/docs/advanced-usage/components#preview:~:text=Preview-,Options,-Additional%20buttons).
+
 ### `Codesandbox`
 
 ```md

diff --git a/src/components/mdx/Sandpack/Sandpack.tsx b/src/components/mdx/Sandpack/Sandpack.tsx
@@ -2,6 +2,7 @@ import cn from '@/lib/cn'
 import { crawl } from '@/utils/docs'
 import {
   SandpackCodeEditor,
+  SandpackFileExplorer,
   SandpackLayout,
   SandpackPreview,
   SandpackProvider,
@@ -12,6 +13,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 
 // https://tailwindcss.com/docs/configuration#referencing-in-java-script
+import { ComponentProps } from 'react'
 import resolveConfig from 'tailwindcss/resolveConfig'
 import tailwindConfig from '../../../../tailwind.config'
 const fullConfig = resolveConfig(tailwindConfig)
@@ -59,10 +61,16 @@ async function getSandpackFiles(
 export const Sandpack = async ({
   className,
   folder,
+  fileExplorer,
+  codeEditor,
+  preview,
   ...props
 }: SandpackProviderProps & {
-  className: string
+  className?: string
   folder?: string
+  codeEditor?: ComponentProps<typeof SandpackCodeEditor>
+  preview?: ComponentProps<typeof SandpackPreview>
+  fileExplorer?: boolean | ComponentProps<typeof SandpackFileExplorer>
 }) => {
   // console.log('folder', folder)
 
@@ -92,7 +100,7 @@ export const Sandpack = async ({
           },
           font: {
             mono: fullConfig.theme.fontFamily.mono.join(', '),
-            size: fullConfig.theme.fontSize.xs[0],
+            // size: fullConfig.theme.fontSize.xs[0],
           },
         }}
         files={_files}
@@ -102,8 +110,13 @@ export const Sandpack = async ({
         style={{ '--sp-border-radius': fullConfig.theme.borderRadius.lg }}
       >
         <SandpackLayout>
-          <SandpackCodeEditor />
-          <SandpackPreview />
+          {fileExplorer && (
+            <SandpackFileExplorer
+              {...(typeof fileExplorer !== 'boolean' ? fileExplorer : undefined)}
+            />
+          )}
+          <SandpackCodeEditor showTabs={fileExplorer ? false : undefined} {...codeEditor} />
+          <SandpackPreview {...preview} />
         </SandpackLayout>
       </SandpackProvider>
     </div>