update websites

.github/workflows/chromatic.yml

@@ -2,7 +2,6 @@ name: "Chromatic"
 
 on:
   push:
-    types: [review_requested, ready_for_review]
     paths:
       - "sandpack-react/src/**"
 

.github/workflows/deploy-documentation.yml

@@ -1,6 +1,7 @@
 name: Deploy Documentation
 on:
   push:
+    types: [review_requested, ready_for_review]
     paths:
       - "sandpack-client/**"
       - "sandpack-react/**"

.github/workflows/deploy-landing.yml

@@ -1,6 +1,7 @@
 name: Deploy Landing page
 on:
   push:
+    types: [review_requested, ready_for_review]
     paths:
       - "sandpack-client/**"
       - "sandpack-react/**"

.github/workflows/deploy-theme.yml

@@ -1,6 +1,7 @@
 name: Deploy Theme Builder
 on:
   push:
+    types: [review_requested, ready_for_review]
     paths:
       - "sandpack-client/**"
       - "sandpack-react/**"

sandpack-react/src/types.ts

@@ -11,6 +11,12 @@ import type {
 
 import type { CodeEditorProps } from ".";
 
+interface SandpackRootProps {
+  files?: SandpackFiles;
+  template?: SandpackPredefinedTemplate;
+  customSetup?: SandpackSetup;
+}
+
 export interface SandpackOptions {
   /**
    * List the file path listed in the file tab,
@@ -41,13 +47,8 @@ export interface SandpackOptions {
   externalResources?: string[];
 }
 
-interface SandpackRootProps {
-  files?: SandpackFiles;
-  template?: SandpackPredefinedTemplate;
-  customSetup?: SandpackSetup;
-}
-
-interface SandpackPresetOptions {
+export interface SandpackProps extends SandpackRootProps {
+  theme?: SandpackThemeProp;
   options?: SandpackOptions & {
     editorWidthPercentage?: number;
     editorHeight?: React.CSSProperties["height"];
@@ -75,12 +76,6 @@ interface SandpackPresetOptions {
   };
 }
 
-export interface SandpackProps
-  extends SandpackRootProps,
-    SandpackPresetOptions {
-  theme?: SandpackThemeProp;
-}
-
 export interface SandpackProviderProps extends SandpackRootProps {
   options?: SandpackOptions;
 }

sandpack-react/src/utils/sandpackUtils.ts

@@ -6,18 +6,20 @@ import { addPackageJSONIfNeeded } from "@codesandbox/sandpack-client";
 
 import { SANDBOX_TEMPLATES } from "../templates";
 import type {
-  SandpackProviderState,
   SandboxTemplate,
   SandpackPredefinedTemplate,
   SandpackProviderProps,
   SandpackSetup,
   SandpackFiles,
+  SandboxEnvironment,
 } from "../types";
 
-type SandpackContextInfo = Pick<
-  SandpackProviderState,
-  "activePath" | "openPaths" | "files" | "environment"
->;
+export interface SandpackContextInfo {
+  activePath: string;
+  openPaths: string[];
+  files: Record<string, SandpackBundlerFile>;
+  environment: SandboxEnvironment;
+}
 
 export const getSandpackStateFromProps = (
   props: SandpackProviderProps

website/landing/components/Hero/Hero.tsx

@@ -13,10 +13,10 @@ export const Hero: React.FC = () => {
     <SandpackProvider
       customSetup={{
         dependencies: { "@stitches/react": "latest" },
-        entry: "./index.js",
-        files,
+        entry: "/index.js",
       }}
-      initMode="immediate"
+      files={files}
+      options={{ initMode: "immediate" }}
       template="react"
     >
       <HeroDesktop />{" "}

website/landing/components/Intro/Examples.tsx

@@ -106,10 +106,10 @@ export const Examples: React.FC = () => {
               >
                 <SandpackProvider
                   customSetup={{
-                    files: layoutFiles,
                     dependencies: { "@codesandbox/sandpack-react": "latest" },
                   }}
-                  initMode="user-visible"
+                  files={layoutFiles}
+                  options={{ initMode: "user-visible" }}
                   template="react"
                 >
                   <ClasserProvider

website/landing/components/Intro/Sections/Layout.tsx

@@ -103,9 +103,9 @@ export const LayoutExample: React.FC = () => {
           <Caption>Sandpack preview</Caption>
           <SandpackProvider
             customSetup={{
-              files: layoutFiles,
               dependencies: { "@codesandbox/sandpack-react": "latest" },
             }}
+            files={layoutFiles}
             template="react"
           >
             <ClasserProvider

website/landing/components/common/CodeBlock.tsx

@@ -26,8 +26,8 @@ export const CodeBlock: React.FC = ({ children }) => {
       }}
     >
       <SandpackProvider
-        files={{ "index.ts": (children as string)?.trim() }}
         customSetup={{ entry: "index.ts" }}
+        files={{ "index.ts": (children as string)?.trim() }}
         options={{ initMode: "immediate" }}
       >
         <SandpackThemeProvider theme="sandpack-dark">