From 7b41404ae58c257b566da379aae7dc1f611b4782 Mon Sep 17 00:00:00 2001
From: gimenes <tlgimenes@gmail.com>
Date: Tue, 31 Oct 2023 10:50:24 -0300
Subject: [PATCH] preview

---
 .gitignore                             |  2 ++
 apps/site.ts                           |  4 ++--
 components/Layout.tsx                  |  6 ------
 loaders/List/Sections.tsx              |  4 ++--
 sections/Gallery.tsx                   | 13 ++-----------
 sections/Layout/Container.tsx          | 20 +++++---------------
 sections/Layout/Flex.tsx               | 18 ++++--------------
 sections/Layout/Grid.tsx               | 18 ++++--------------
 sections/Product/NotFoundChallenge.tsx |  6 +++---
 9 files changed, 24 insertions(+), 67 deletions(-)
 delete mode 100644 components/Layout.tsx

diff --git a/.gitignore b/.gitignore
index 689ce20c..d31b5ae5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -71,3 +71,5 @@ import_map.local.json
 .config.json
 # Fresh build directory
 _fresh/
+
+deno.lock
diff --git a/apps/site.ts b/apps/site.ts
index 805e025d..41bc74b8 100644
--- a/apps/site.ts
+++ b/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";
diff --git a/components/Layout.tsx b/components/Layout.tsx
deleted file mode 100644
index 5d002ba1..00000000
--- a/components/Layout.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useContext } from "preact/hooks";
-import { createContext } from "preact";
-
-export const LayoutContext = createContext({ isPreview: false });
-
-export const useLayoutContext = () => useContext(LayoutContext);
diff --git a/loaders/List/Sections.tsx b/loaders/List/Sections.tsx
index acfa200c..ed1eac83 100644
--- a/loaders/List/Sections.tsx
+++ b/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 {
diff --git a/sections/Gallery.tsx b/sections/Gallery.tsx
index 2df82d5b..943586eb 100644
--- a/sections/Gallery.tsx
+++ b/sections/Gallery.tsx
@@ -1,11 +1,10 @@
 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} />
@@ -13,12 +12,4 @@ function Section({ children: { Component, props } }: Props) {
   );
 }
 
-export function Preview(props: Props) {
-  return (
-    <LayoutContext.Provider value={{ isPreview: true }}>
-      <Section {...props} />
-    </LayoutContext.Provider>
-  );
-}
-
-export default Section;
+export default Gallery;
diff --git a/sections/Layout/Container.tsx b/sections/Layout/Container.tsx
index 9899acd1..7acbbf7f 100644
--- a/sections/Layout/Container.tsx
+++ b/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;
diff --git a/sections/Layout/Flex.tsx b/sections/Layout/Flex.tsx
index 988efabd..4a86542b 100644
--- a/sections/Layout/Flex.tsx
+++ b/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;
diff --git a/sections/Layout/Grid.tsx b/sections/Layout/Grid.tsx
index bc12b65e..e7f87630 100644
--- a/sections/Layout/Grid.tsx
+++ b/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;
diff --git a/sections/Product/NotFoundChallenge.tsx b/sections/Product/NotFoundChallenge.tsx
index 263e53c9..fbfcd96c 100644
--- a/sections/Product/NotFoundChallenge.tsx
+++ b/sections/Product/NotFoundChallenge.tsx
@@ -1,4 +1,4 @@
-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 {
@@ -6,10 +6,10 @@ export interface Props {
   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) {