feat: Apps

apps/storefront.ts

@@ -0,0 +1,53 @@
+import { Section } from "$live/blocks/section.ts";
+import { App } from "$live/mod.ts";
+import shopify, { Props as ShopifyProps } from "apps/shopify/mod.ts";
+import vnda, { Props as VNDAProps } from "apps/vnda/mod.ts";
+import vtex, { Props as VTEXProps } from "apps/vtex/mod.ts";
+import website, { Props as WebsiteProps } from "apps/website/mod.ts";
+import type { ComponentProps } from "preact";
+import manifest, { Manifest } from "../manifest.gen.ts";
+
+export type State = WebsiteProps & {
+  theme: Section;
+  commerce: VNDAProps | VTEXProps | ShopifyProps;
+};
+
+type WebsiteApp = ReturnType<typeof website>;
+type CommerceApp =
+  | ReturnType<typeof vnda>
+  | ReturnType<typeof vtex>
+  | ReturnType<typeof shopify>;
+
+const PLATFORMS = { vnda, vtex, shopify };
+
+export let _platform: null | keyof typeof PLATFORMS = null;
+
+export default function Storefront(
+  state: State,
+): App<Manifest, State, [WebsiteApp, CommerceApp]> {
+  if (!state.commerce.platform) throw new Error("Missing platform");
+
+  _platform = state.commerce.platform;
+
+  // @ts-expect-error Trust me, I'm an engineer
+  const ecommerce = PLATFORMS[state.commerce.platform]?.(state.commerce);
+  const site = website(state);
+
+  // Add theme to Page
+  const LivePageTSX = site.manifest.pages["apps/website/pages/LivePage.tsx"];
+  const { default: LivePage } = LivePageTSX;
+  site.manifest.pages["apps/website/pages/LivePage.tsx"] = {
+    ...site.manifest.pages["apps/website/pages/LivePage.tsx"],
+    default: (props: ComponentProps<typeof LivePage>) => {
+      return LivePage({ ...props, sections: [state.theme, ...props.sections] });
+    },
+  };
+
+  return {
+    state,
+    manifest,
+    dependencies: [site, ecommerce],
+  };
+}
+
+export { onBeforeResolveProps } from "apps/website/mod.ts";

components/Analytics.tsx

@@ -1,5 +1,5 @@
 import { sendEvent } from "$store/sdk/analytics.tsx";
-import type { AnalyticsEvent } from "deco-sites/std/commerce/types.ts";
+import type { AnalyticsEvent } from "apps/commerce/types.ts";
 
 /**
  * This function is usefull for sending events on click. Works with both Server and Islands components

components/footer/Footer.tsx

@@ -1,16 +1,16 @@
-import Logo from "$store/components/footer/Logo.tsx";
-import Newsletter from "$store/islands/Newsletter.tsx";
+import BackToTop from "$store/components/footer/BackToTop.tsx";
+import ColorClasses from "$store/components/footer/ColorClasses.tsx";
+import Divider from "$store/components/footer/Divider.tsx";
+import ExtraLinks from "$store/components/footer/ExtraLinks.tsx";
 import FooterItems from "$store/components/footer/FooterItems.tsx";
-import Social from "$store/components/footer/Social.tsx";
-import PaymentMethods from "$store/components/footer/PaymentMethods.tsx";
+import Logo from "$store/components/footer/Logo.tsx";
 import MobileApps from "$store/components/footer/MobileApps.tsx";
-import ExtraLinks from "$store/components/footer/ExtraLinks.tsx";
+import PaymentMethods from "$store/components/footer/PaymentMethods.tsx";
 import RegionSelector from "$store/components/footer/RegionSelector.tsx";
-import ColorClasses from "$store/components/footer/ColorClasses.tsx";
-import Divider from "$store/components/footer/Divider.tsx";
-import BackToTop from "$store/components/footer/BackToTop.tsx";
-import PoweredByDeco from "deco-sites/std/components/PoweredByDeco.tsx";
-import type { Image as LiveImage } from "deco-sites/std/components/types.ts";
+import Social from "$store/components/footer/Social.tsx";
+import Newsletter from "$store/islands/Newsletter.tsx";
+import type { ImageWidget } from "apps/admin/widgets.ts";
+import PoweredByDeco from "apps/website/components/PoweredByDeco.tsx";
 
 export type Item = {
   label: string;
@@ -84,7 +84,7 @@ export interface Layout {
 
 export interface Props {
   logo?: {
-    image: LiveImage;
+    image: ImageWidget;
     description?: string;
   };
   newsletter?: {

components/footer/Logo.tsx

@@ -1,8 +1,8 @@
-import type { Image as LiveImage } from "deco-sites/std/components/types.ts";
+import type { ImageWidget } from "apps/admin/widgets.ts";
 
 export interface Props {
   logo?: {
-    image: LiveImage;
+    image: ImageWidget;
     description?: string;
   };
 }

components/footer/Newsletter.tsx

@@ -2,8 +2,8 @@ import { useSignal } from "@preact/signals";
 import { Runtime } from "$store/runtime.ts";
 import type { JSX } from "preact";
 
-const subscribe = Runtime.create(
-  "deco-sites/std/actions/vtex/newsletter/subscribe.ts",
+const subscribe = Runtime.vtex.create(
+  "apps/vtex/actions/newsletter/subscribe.ts",
 );
 
 export interface Form {

components/header/Buttons/Cart/common.tsx

@@ -2,7 +2,7 @@ import Button from "$store/components/ui/Button.tsx";
 import Icon from "$store/components/ui/Icon.tsx";
 import { sendEvent } from "$store/sdk/analytics.tsx";
 import { useUI } from "$store/sdk/useUI.ts";
-import { AnalyticsItem } from "deco-sites/std/commerce/types.ts";
+import { AnalyticsItem } from "apps/commerce/types.ts";
 
 interface Props {
   loading: boolean;

components/header/Buttons/Cart/vnda.tsx

@@ -1,7 +1,4 @@
-import {
-  itemToAnalyticsItem,
-  useCart,
-} from "deco-sites/std/packs/vnda/hooks/useCart.ts";
+import { itemToAnalyticsItem, useCart } from "apps/vnda/hooks/useCart.ts";
 import Button from "./common.tsx";
 
 function CartButton() {

components/header/Buttons/Cart/vtex.tsx

@@ -1,7 +1,4 @@
-import {
-  itemToAnalyticsItem,
-  useCart,
-} from "deco-sites/std/packs/vtex/hooks/useCart.ts";
+import { itemToAnalyticsItem, useCart } from "apps/vtex/hooks/useCart.ts";
 import Button from "./common.tsx";
 
 function CartButton() {

components/header/Drawers.tsx

@@ -5,6 +5,7 @@ import Button from "$store/components/ui/Button.tsx";
 import Drawer from "$store/components/ui/Drawer.tsx";
 import Icon from "$store/components/ui/Icon.tsx";
 import { useUI } from "$store/sdk/useUI.ts";
+import { usePlatform } from "$store/sdk/usePlatform.tsx";
 import type { ComponentChildren } from "preact";
 import { lazy, Suspense } from "preact/compat";
 
@@ -18,6 +19,7 @@ export interface Props {
    * @ignore_gen true
    */
   children?: ComponentChildren;
+  platform: ReturnType<typeof usePlatform>;
 }
 
 const Aside = (
@@ -50,7 +52,7 @@ const Aside = (
   </div>
 );
 
-function Drawers({ menu, searchbar, children }: Props) {
+function Drawers({ menu, searchbar, children, platform }: Props) {
   const { displayCart, displayMenu, displaySearchDrawer } = useUI();
 
   return (
@@ -82,7 +84,7 @@ function Drawers({ menu, searchbar, children }: Props) {
             title="Minha sacola"
             onClose={() => displayCart.value = false}
           >
-            <Cart />
+            <Cart platform={platform} />
           </Aside>
         }
       >

components/header/Header.tsx

@@ -1,10 +1,11 @@
 import type { Props as SearchbarProps } from "$store/components/search/Searchbar.tsx";
 import Drawers from "$store/islands/Header/Drawers.tsx";
-import type { Product, Suggestion } from "deco-sites/std/commerce/types.ts";
-import type { Image } from "deco-sites/std/components/types.ts";
+import type { Product, Suggestion } from "apps/commerce/types.ts";
+import type { ImageWidget } from "apps/admin/widgets.ts";
 import Alert from "./Alert.tsx";
 import Navbar from "./Navbar.tsx";
 import { headerHeight } from "./constants.ts";
+import { usePlatform } from "$store/sdk/usePlatform.tsx";
 
 export interface NavItem {
   label: string;
@@ -18,7 +19,7 @@ export interface NavItem {
     }>;
   }>;
   image?: {
-    src?: Image;
+    src?: ImageWidget;
     alt?: string;
   };
 }
@@ -45,7 +46,7 @@ export interface Props {
   suggestions?: Suggestion | null;
 
   /** @title Logo */
-  logo?: { src: Image; alt: string };
+  logo?: { src: ImageWidget; alt: string };
 }
 
 function Header({
@@ -56,13 +57,16 @@ function Header({
   suggestions,
   logo,
 }: Props) {
+  const platform = usePlatform();
   const searchbar = { ..._searchbar, products, suggestions };
+
   return (
     <>
       <header style={{ height: headerHeight }}>
         <Drawers
           menu={{ items: navItems }}
           searchbar={searchbar}
+          platform={platform}
         >
           <div class="bg-base-100 fixed w-full z-50">
             <Alert alerts={alerts} />

components/header/NavItem.tsx

@@ -1,4 +1,4 @@
-import Image from "deco-sites/std/components/Image.tsx";
+import Image from "apps/website/components/Image.tsx";
 import { headerHeight } from "./constants.ts";
 
 export interface INavItem {

components/header/Navbar.tsx

@@ -4,8 +4,8 @@ import { MenuButton, SearchButton } from "$store/islands/Header/Buttons.tsx";
 import CartButtonVDNA from "$store/islands/Header/Cart/vnda.tsx";
 import CartButtonVTEX from "$store/islands/Header/Cart/vtex.tsx";
 import Searchbar from "$store/islands/Header/Searchbar.tsx";
-import { PLATFORM } from "$store/platform.ts";
-import Image from "deco-sites/std/components/Image.tsx";
+import Image from "apps/website/components/Image.tsx";
+import { usePlatform } from "$store/sdk/usePlatform.tsx";
 import type { INavItem } from "./NavItem.tsx";
 import NavItem from "./NavItem.tsx";
 import { navbarHeight } from "./constants.ts";
@@ -15,6 +15,8 @@ function Navbar({ items, searchbar, logo }: {
   searchbar: SearchbarProps;
   logo?: { src: string; alt: string };
 }) {
+  const platform = usePlatform();
+
   return (
     <>
       {/* Mobile Version */}
@@ -37,8 +39,8 @@ function Navbar({ items, searchbar, logo }: {
 
         <div class="flex gap-1">
           <SearchButton />
-          {PLATFORM === "vtex" && <CartButtonVTEX />}
-          {PLATFORM === "vnda" && <CartButtonVDNA />}
+          {platform === "vtex" && <CartButtonVTEX />}
+          {platform === "vnda" && <CartButtonVDNA />}
         </div>
       </div>
 
@@ -80,8 +82,8 @@ function Navbar({ items, searchbar, logo }: {
               fill="none"
             />
           </a>
-          {PLATFORM === "vtex" && <CartButtonVTEX />}
-          {PLATFORM === "vnda" && <CartButtonVDNA />}
+          {platform === "vtex" && <CartButtonVTEX />}
+          {platform === "vnda" && <CartButtonVDNA />}
         </div>
       </div>
     </>

components/minicart/Cart.tsx

@@ -1,15 +1,20 @@
-import { PLATFORM } from "$store/platform.ts";
+// import { platform } from "$store/apps/storefront.ts";
 import { lazy } from "preact/compat";
+import { usePlatform } from "$store/sdk/usePlatform.tsx";
 
 const CartVTEX = lazy(() => import("./vtex/Cart.tsx"));
 const CartVNDA = lazy(() => import("./vnda/Cart.tsx"));
 
-function Cart() {
-  if (PLATFORM === "vtex") {
+export interface Props {
+  platform: ReturnType<typeof usePlatform>;
+}
+
+function Cart({ platform }: Props) {
+  if (platform === "vtex") {
     return <CartVTEX />;
   }
 
-  if (PLATFORM === "vnda") {
+  if (platform === "vnda") {
     return <CartVNDA />;
   }
 

components/minicart/common/Cart.tsx

@@ -2,7 +2,7 @@ import Button from "$store/components/ui/Button.tsx";
 import { sendEvent } from "$store/sdk/analytics.tsx";
 import { formatPrice } from "$store/sdk/format.ts";
 import { useUI } from "$store/sdk/useUI.ts";
-import { AnalyticsItem } from "deco-sites/std/commerce/types.ts";
+import { AnalyticsItem } from "apps/commerce/types.ts";
 import CartItem, { Item, Props as ItemProps } from "./CartItem.tsx";
 import Coupon, { Props as CouponProps } from "./Coupon.tsx";
 import FreeShippingProgressBar from "./FreeShippingProgressBar.tsx";

components/minicart/common/CartItem.tsx

@@ -3,8 +3,8 @@ import Icon from "$store/components/ui/Icon.tsx";
 import QuantitySelector from "$store/components/ui/QuantitySelector.tsx";
 import { sendEvent } from "$store/sdk/analytics.tsx";
 import { formatPrice } from "$store/sdk/format.ts";
-import { AnalyticsItem } from "deco-sites/std/commerce/types.ts";
-import Image from "deco-sites/std/components/Image.tsx";
+import { AnalyticsItem } from "apps/commerce/types.ts";
+import Image from "apps/website/components/Image.tsx";
 import { useCallback, useState } from "preact/hooks";
 
 export interface Item {

components/minicart/vnda/Cart.tsx

@@ -1,7 +1,4 @@
-import {
-  itemToAnalyticsItem,
-  useCart,
-} from "deco-sites/std/packs/vnda/hooks/useCart.ts";
+import { itemToAnalyticsItem, useCart } from "apps/vnda/hooks/useCart.ts";
 import BaseCart from "../common/Cart.tsx";
 
 const normalizeUrl = (url: string) =>

components/minicart/vtex/Cart.tsx

@@ -1,7 +1,4 @@
-import {
-  itemToAnalyticsItem,
-  useCart,
-} from "deco-sites/std/packs/vtex/hooks/useCart.ts";
+import { itemToAnalyticsItem, useCart } from "apps/vtex/hooks/useCart.ts";
 import BaseCart from "../common/Cart.tsx";
 
 function Cart() {

components/product/AddToCartButton/vnda.tsx

@@ -1,5 +1,5 @@
-import { PropertyValue } from "deco-sites/std/commerce/types.ts";
-import { useCart } from "deco-sites/std/packs/vnda/hooks/useCart.ts";
+import { PropertyValue } from "apps/commerce/types.ts";
+import { useCart } from "apps/vnda/hooks/useCart.ts";
 import Button, { Props as BtnProps } from "./common.tsx";
 
 export interface Props extends Omit<BtnProps, "onAddItem" | "platform"> {

components/product/AddToCartButton/vtex.tsx

@@ -1,4 +1,4 @@
-import { useCart } from "deco-sites/std/packs/vtex/hooks/useCart.ts";
+import { useCart } from "apps/vtex/hooks/useCart.ts";
 import Button, { Props as BtnProps } from "./common.tsx";
 
 export interface Props extends Omit<BtnProps, "onAddItem" | "platform"> {

components/product/OutOfStock.tsx

@@ -1,13 +1,13 @@
 import { useSignal } from "@preact/signals";
 import { Runtime } from "$store/runtime.ts";
-import type { Product } from "deco-sites/std/commerce/types.ts";
+import type { Product } from "apps/commerce/types.ts";
 import type { JSX } from "preact";
 
 export interface Props {
   productID: Product["productID"];
 }
 
-const notifyme = Runtime.create("deco-sites/std/actions/vtex/notifyme.ts");
+const notifyme = Runtime.vtex.create("apps/vtex/actions/notifyme.ts");
 
 function Notify({ productID }: Props) {
   const loading = useSignal(false);