Merge pull request #59 from deco-sites/fix/preview

preview

.gitignore

@@ -71,3 +71,5 @@ import_map.local.json
 .config.json
 # Fresh build directory
 _fresh/
+
+deno.lock

apps/site.ts

@@ -4,7 +4,7 @@ import { color as vnda } from "apps/vnda/mod.ts";
 import { color as vtex } from "apps/vtex/mod.ts";
 import { color as wake } from "apps/wake/mod.ts";
 import { color as linx } from "apps/linx/mod.ts";
-import { Section } from "deco/blocks/section.ts";
+import { Flex } from "deco/blocks/section.ts";
 import { App } from "deco/mod.ts";
 import { rgb24 } from "std/fmt/colors.ts";
 import manifest, { Manifest } from "../manifest.gen.ts";
@@ -16,7 +16,7 @@ export type Props = {
    * @default custom
    */
   platform: Platform;
-  theme?: Section;
+  theme?: Flex;
 } & CommerceProps;
 
 export type Platform = "vtex" | "vnda" | "shopify" | "wake" | "linx" | "custom";

loaders/List/Sections.tsx

@@ -1,8 +1,8 @@
-import type { Section } from "deco/blocks/section.ts";
+import type { Flex } from "deco/blocks/section.ts";
 import type { VNode } from "../../constants.tsx";
 
 interface Props {
-  sections: Section[] | null;
+  sections: Flex[] | null;
 }
 
 function Sections({ sections }: Props): VNode[] | null {

sections/Gallery.tsx

@@ -1,24 +1,15 @@
 import { Section } from "deco/blocks/section.ts";
-import { LayoutContext } from "$store/components/Layout.tsx";
 
 interface Props {
   children: Section;
 }
 
-function Section({ children: { Component, props } }: Props) {
+function Gallery({ children: { Component, props } }: Props) {
   return (
     <>
       <Component {...props} />
     </>
   );
 }
 
-export function Preview(props: Props) {
-  return (
-    <LayoutContext.Provider value={{ isPreview: true }}>
-      <Section {...props} />
-    </LayoutContext.Provider>
-  );
-}
-
-export default Section;
+export default Gallery;

sections/Layout/Container.tsx

@@ -1,5 +1,5 @@
 import { Section } from "deco/blocks/section.ts";
-import { LayoutContext, useLayoutContext } from "$store/components/Layout.tsx";
+import { context } from "deco/mod.ts";
 
 interface Props {
   children?: Section;
@@ -13,13 +13,11 @@ function Placeholder() {
   );
 }
 
-function Section({ children }: Props) {
-  const { isPreview } = useLayoutContext();
-
-  if (isPreview && typeof children?.Component !== "function") {
+function Container({ children }: Props) {
+  if (!context.isDeploy && typeof children?.Component !== "function") {
     return (
       <div class="bg-primary bg-opacity-5 p-4">
-        <Section children={{ Component: Placeholder, props: {} }} />
+        <Container children={{ Component: Placeholder, props: {} }} />
       </div>
     );
   }
@@ -35,12 +33,4 @@ function Section({ children }: Props) {
   );
 }
 
-export function Preview(props: Props) {
-  return (
-    <LayoutContext.Provider value={{ isPreview: true }}>
-      <Section {...props} />
-    </LayoutContext.Provider>
-  );
-}
-
-export default Section;
+export default Container;

sections/Layout/Flex.tsx

@@ -1,6 +1,5 @@
-import { LayoutContext, useLayoutContext } from "$store/components/Layout.tsx";
 import { clx } from "$store/sdk/clx.ts";
-import { Section } from "deco/blocks/section.ts";
+import { context } from "deco/mod.ts";
 import { flex, VNode } from "../../constants.tsx";
 
 interface Props {
@@ -33,9 +32,8 @@ interface Props {
   };
 }
 
-function Section({ layout, children }: Props) {
-  const { isPreview } = useLayoutContext();
-  const items = isPreview && !children?.length
+function Flex({ layout, children }: Props) {
+  const items = !context.isDeploy && !children?.length
     ? new Array(4).fill(0).map(() => <ItemPreview />)
     : children;
 
@@ -58,14 +56,6 @@ function Section({ layout, children }: Props) {
   );
 }
 
-export function Preview(props: Props) {
-  return (
-    <LayoutContext.Provider value={{ isPreview: true }}>
-      <Section {...props} />
-    </LayoutContext.Provider>
-  );
-}
-
 const ItemPreview = () => (
   <div class="card w-48 h-48 bg-base-100 shadow">
     <div class="card-body items-center justify-center text-base-300 text-sm">
@@ -74,4 +64,4 @@ const ItemPreview = () => (
   </div>
 );
 
-export default Section;
+export default Flex;

sections/Layout/Grid.tsx

@@ -1,7 +1,6 @@
-import { Section } from "deco/blocks/section.ts";
+import { context } from "deco/mod.ts";
 import { grid, VNode } from "../../constants.tsx";
 import { clx } from "../../sdk/clx.ts";
-import { LayoutContext, useLayoutContext } from "$store/components/Layout.tsx";
 
 interface Props {
   children?: VNode[] | null;
@@ -65,9 +64,8 @@ interface Props {
   };
 }
 
-function Section({ layout, children }: Props) {
-  const { isPreview } = useLayoutContext();
-  const items = isPreview && !children?.length
+function Grid({ layout, children }: Props) {
+  const items = !context.isDeploy && !children?.length
     ? new Array(12).fill(0).map(() => <ItemPreview />)
     : children;
 
@@ -92,14 +90,6 @@ function Section({ layout, children }: Props) {
   );
 }
 
-export function Preview(props: Props) {
-  return (
-    <LayoutContext.Provider value={{ isPreview: true }}>
-      <Section {...props} />
-    </LayoutContext.Provider>
-  );
-}
-
 const ItemPreview = () => (
   <div class="card w-48 h-48 bg-base-100 shadow">
     <div class="card-body items-center justify-center text-base-300 text-sm">
@@ -108,4 +98,4 @@ const ItemPreview = () => (
   </div>
 );
 
-export default Section;
+export default Grid;

sections/Product/NotFoundChallenge.tsx

@@ -1,15 +1,15 @@
-import type { Section } from "deco/blocks/section.ts";
+import type { Flex } from "deco/blocks/section.ts";
 import type { ProductDetailsPage } from "apps/commerce/types.ts";
 
 export interface Props {
   /** @title Integration */
   page: ProductDetailsPage | null;
 
   /** @title On Product Found */
-  children: Section;
+  children: Flex;
 
   /** @title On Product Not Found */
-  fallback: Section;
+  fallback: Flex;
 }
 
 function NotFoundChallenge({ page, children, fallback }: Props) {