StreamShop App

deco.ts

@@ -38,6 +38,7 @@ const config = {
     app("linx-impulse"),
     app("shopify"),
     app("nuvemshop"),
+    app("streamshop"),
     app("website"),
     app("commerce"),
     app("workflows"),

decohub/apps/streamshop.ts

@@ -0,0 +1 @@
+export { default, preview } from "../../streamshop/mod.ts";

shopify/utils/storefront/storefront.graphql.gen.ts

@@ -7789,6 +7789,17 @@ export type AddItemToCartMutationVariables = Exact<{
 
 export type AddItemToCartMutation = { payload?: { cart?: { id: string, checkoutUrl: any, totalQuantity: number, lines: { nodes: Array<{ id: string, quantity: number, merchandise: { id: string, title: string, image?: { url: any, altText?: string | null } | null, product: { title: string, onlineStoreUrl?: any | null, handle: string }, price: { amount: any, currencyCode: CurrencyCode } }, discountAllocations: Array<{ code: string, discountedAmount: { amount: any, currencyCode: CurrencyCode } } | {}>, cost: { totalAmount: { amount: any, currencyCode: CurrencyCode }, subtotalAmount: { amount: any, currencyCode: CurrencyCode }, amountPerQuantity: { amount: any, currencyCode: CurrencyCode }, compareAtAmountPerQuantity?: { amount: any, currencyCode: CurrencyCode } | null } } | { id: string, quantity: number, merchandise: { id: string, title: string, image?: { url: any, altText?: string | null } | null, product: { title: string, onlineStoreUrl?: any | null, handle: string }, price: { amount: any, currencyCode: CurrencyCode } }, discountAllocations: Array<{ code: string, discountedAmount: { amount: any, currencyCode: CurrencyCode } } | {}>, cost: { totalAmount: { amount: any, currencyCode: CurrencyCode }, subtotalAmount: { amount: any, currencyCode: CurrencyCode }, amountPerQuantity: { amount: any, currencyCode: CurrencyCode }, compareAtAmountPerQuantity?: { amount: any, currencyCode: CurrencyCode } | null } }> }, cost: { totalTaxAmount?: { amount: any, currencyCode: CurrencyCode } | null, subtotalAmount: { amount: any, currencyCode: CurrencyCode }, totalAmount: { amount: any, currencyCode: CurrencyCode }, checkoutChargeAmount: { amount: any, currencyCode: CurrencyCode } }, discountCodes: Array<{ code: string, applicable: boolean }>, discountAllocations: Array<{ discountedAmount: { amount: any, currencyCode: CurrencyCode } } | { discountedAmount: { amount: any, currencyCode: CurrencyCode } } | { discountedAmount: { amount: any, currencyCode: CurrencyCode } }> } | null } | null };
 
+export type RegisterAccountMutationVariables = Exact<{
+  email: Scalars['String']['input'];
+  password: Scalars['String']['input'];
+  firstName?: InputMaybe<Scalars['String']['input']>;
+  lastName?: InputMaybe<Scalars['String']['input']>;
+  acceptsMarketing?: InputMaybe<Scalars['Boolean']['input']>;
+}>;
+
+
+export type RegisterAccountMutation = { customerCreate?: { customer?: { id: string } | null, customerUserErrors: Array<{ code?: CustomerErrorCode | null, message: string }> } | null };
+
 export type AddCouponMutationVariables = Exact<{
   cartId: Scalars['ID']['input'];
   discountCodes: Array<Scalars['String']['input']> | Scalars['String']['input'];

streamshop/README.md

@@ -0,0 +1 @@
+# Stream Shop Readme

streamshop/actions/myAction.ts

@@ -0,0 +1,25 @@
+import { AppContext } from "../mod.ts";
+import { GithubUser } from "../utils/types.ts";
+
+interface Props {
+  username: string;
+}
+
+/**
+ * @title This name will appear on the admin
+ */
+const action = async (
+  props: Props,
+  _req: Request,
+  ctx: AppContext,
+): Promise<GithubUser> => {
+  const response = await ctx.api[`POST /users/:username`]({
+    username: props.username,
+  }, { body: { filter: "filter" } });
+
+  const result = await response.json();
+
+  return result;
+};
+
+export default action;

streamshop/components/ui/Avatar.tsx

@@ -0,0 +1,51 @@
+import { clx } from "../../sdk/clx.ts";
+
+/**
+ * This component renders the filter and selectors for skus.
+ * TODO: Figure out a better name for this component.
+ */
+interface Props {
+  variant?: "active" | "disabled" | "default";
+  content: string;
+}
+
+const colors: Record<string, Record<string, string>> = {
+  "azul-clara": { backgroundColor: "#87CEFA" },
+  "azul-marinho": { backgroundColor: "#000080" },
+  "branca": { backgroundColor: "#FFFFFF" },
+  "cinza": { backgroundColor: "#808080" },
+  "cinza-escura": { backgroundColor: "#A9A9A9" },
+  "laranja": { backgroundColor: "#FFA500" },
+  "marrom": { backgroundColor: "#A52A2A" },
+  "preta": { backgroundColor: "#161616" },
+  "verde-clara": { backgroundColor: "#90EE90" },
+  "vermelha": { backgroundColor: "#FF0000" },
+};
+
+const variants = {
+  active: "ring-base-content",
+  disabled: "line-through",
+  default: "ring-base-400",
+};
+
+function Avatar({ content, variant = "default" }: Props) {
+  return (
+    <div class="avatar placeholder">
+      <div
+        class={clx(
+          "h-6 w-6",
+          "rounded-full",
+          "ring-1 ring-offset-2",
+          variants[variant],
+        )}
+        style={colors[content]}
+      >
+        <span class="uppercase">
+          {colors[content] ? "" : content.substring(0, 2)}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default Avatar;

streamshop/components/ui/Breadcrumb.tsx

@@ -0,0 +1,26 @@
+import type { BreadcrumbList } from "apps/commerce/types.ts";
+import { relative } from "../../sdk/url.ts";
+
+interface Props {
+  itemListElement: BreadcrumbList["itemListElement"];
+}
+
+function Breadcrumb({ itemListElement = [] }: Props) {
+  const items = [{ name: "Home", item: "/" }, ...itemListElement];
+
+  return (
+    <div class="breadcrumbs py-0 text-xs font-normal text-base-400">
+      <ul>
+        {items
+          .filter(({ name, item }) => name && item)
+          .map(({ name, item }) => (
+            <li>
+              <a href={relative(item)}>{name}</a>
+            </li>
+          ))}
+      </ul>
+    </div>
+  );
+}
+
+export default Breadcrumb;

streamshop/components/ui/CategoryBanner.tsx

@@ -0,0 +1,88 @@
+import type { ImageWidget } from "apps/admin/widgets.ts";
+import { Picture, Source } from "apps/website/components/Picture.tsx";
+import { type SectionProps } from "@deco/deco";
+/**
+ * @titleBy matcher
+ */
+export interface Banner {
+  /** @description RegExp to enable this banner on the current URL. Use /feminino/* to display this banner on feminino category  */
+  matcher: string;
+  /** @description text to be rendered on top of the image */
+  title?: string;
+  /** @description text to be rendered on top of the image */
+  subtitle?: string;
+  image: {
+    /** @description Image for big screens */
+    desktop: ImageWidget;
+    /** @description Image for small screens */
+    mobile: ImageWidget;
+    /** @description image alt text */
+    alt?: string;
+  };
+}
+const DEFAULT_PROPS = {
+  banners: [
+    {
+      image: {
+        mobile:
+          "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/239/91102b71-4832-486a-b683-5f7b06f649af",
+        desktop:
+          "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/239/ec597b6a-dcf1-48ca-a99d-95b3c6304f96",
+        alt: "a",
+      },
+      title: "Woman",
+      matcher: "/*",
+      subtitle: "As",
+    },
+  ],
+};
+function Banner(props: SectionProps<ReturnType<typeof loader>>) {
+  const { banner } = props;
+  if (!banner) {
+    return null;
+  }
+  const { title, subtitle, image } = banner;
+  return (
+    <div class="grid grid-cols-1 grid-rows-1">
+      <Picture preload class="col-start-1 col-span-1 row-start-1 row-span-1">
+        <Source
+          src={image.mobile}
+          width={360}
+          height={120}
+          media="(max-width: 767px)"
+        />
+        <Source
+          src={image.desktop}
+          width={1440}
+          height={200}
+          media="(min-width: 767px)"
+        />
+        <img class="w-full" src={image.desktop} alt={image.alt ?? title} />
+      </Picture>
+
+      <div class="container flex flex-col items-center justify-center sm:items-start col-start-1 col-span-1 row-start-1 row-span-1 w-full">
+        <h1>
+          <span class="text-5xl font-medium text-base-100">
+            {title}
+          </span>
+        </h1>
+        <h2>
+          <span class="text-xl font-medium text-base-100">
+            {subtitle}
+          </span>
+        </h2>
+      </div>
+    </div>
+  );
+}
+export interface Props {
+  banners?: Banner[];
+}
+export const loader = (props: Props, req: Request) => {
+  const { banners } = { ...DEFAULT_PROPS, ...props };
+  const banner = banners.find(({ matcher }) =>
+    new URLPattern({ pathname: matcher }).test(req.url)
+  );
+  return { banner };
+};
+export default Banner;

streamshop/components/ui/Drawer.tsx

@@ -0,0 +1,87 @@
+import { type ComponentChildren } from "preact";
+import { clx } from "../../sdk/clx.ts";
+import { useId } from "../../sdk/useId.ts";
+import Icon from "./Icon.tsx";
+import { useScript } from "@deco/deco/hooks";
+export interface Props {
+  open?: boolean;
+  class?: string;
+  children?: ComponentChildren;
+  aside: ComponentChildren;
+  id?: string;
+}
+const script = (id: string) => {
+  const handler = (e: KeyboardEvent) => {
+    if (e.key !== "Escape" && e.keyCode !== 27) {
+      return;
+    }
+    const input = document.getElementById(id) as HTMLInputElement | null;
+    if (!input) {
+      return;
+    }
+    input.checked = false;
+  };
+  addEventListener("keydown", handler);
+};
+function Drawer(
+  { children, aside, open, class: _class = "", id = useId() }: Props,
+) {
+  return (
+    <>
+      <div class={clx("drawer", _class)}>
+        <input
+          id={id}
+          name={id}
+          checked={open}
+          type="checkbox"
+          class="drawer-toggle"
+          aria-label={open ? "open drawer" : "closed drawer"}
+        />
+
+        <div class="drawer-content">
+          {children}
+        </div>
+
+        <aside
+          data-aside
+          class={clx(
+            "drawer-side h-full z-40 overflow-hidden",
+            "[[data-aside]&_section]:contents",
+          )}
+        >
+          <label for={id} class="drawer-overlay" />
+          {aside}
+        </aside>
+      </div>
+      <script
+        type="module"
+        dangerouslySetInnerHTML={{ __html: useScript(script, id) }}
+      />
+    </>
+  );
+}
+function Aside({ title, drawer, children }: {
+  title: string;
+  drawer: string;
+  children: ComponentChildren;
+}) {
+  return (
+    <div
+      data-aside
+      class="bg-base-100 grid grid-rows-[auto_1fr] h-full divide-y"
+      style={{ maxWidth: "100vw" }}
+    >
+      <div class="flex justify-between items-center">
+        <h1 class="px-4 py-3">
+          <span class="font-medium text-2xl">{title}</span>
+        </h1>
+        <label for={drawer} aria-label="X" class="btn btn-ghost">
+          <Icon id="close" />
+        </label>
+      </div>
+      {children}
+    </div>
+  );
+}
+Drawer.Aside = Aside;
+export default Drawer;

streamshop/components/ui/Icon.tsx

@@ -0,0 +1,46 @@
+import { asset } from "$fresh/runtime.ts";
+import type { JSX } from "preact";
+
+export type AvailableIcons =
+  | "search"
+  | "shopping_bag"
+  | "menu"
+  | "account_circle"
+  | "close"
+  | "chevron-right"
+  | "favorite"
+  | "home_pin"
+  | "call"
+  | "local_shipping"
+  | "pan_zoom"
+  | "share"
+  | "sell"
+  | "check-circle"
+  | "error"
+  | "trash";
+
+interface Props extends JSX.SVGAttributes<SVGSVGElement> {
+  /**
+   * Symbol id from element to render. Take a look at `/static/icons.svg`.
+   *
+   * Example: <Icon id="search" />
+   */
+  id: AvailableIcons;
+  size?: number;
+}
+
+function Icon(
+  { id, size = 24, width, height, ...otherProps }: Props,
+) {
+  return (
+    <svg
+      {...otherProps}
+      width={width ?? size}
+      height={height ?? size}
+    >
+      <use href={asset(`/sprites.svg#${id}`)} />
+    </svg>
+  );
+}
+
+export default Icon;

streamshop/components/ui/Modal.tsx

@@ -0,0 +1,37 @@
+import { ComponentChildren } from "preact";
+import { useId } from "../../sdk/useId.ts";
+import { useScript } from "@deco/deco/hooks";
+interface Props {
+  open?: boolean;
+  children?: ComponentChildren;
+  id?: string;
+}
+const script = (id: string) => {
+  const handler = (e: KeyboardEvent) => {
+    if (e.key !== "Escape" && e.keyCode !== 27) {
+      return;
+    }
+    const input = document.getElementById(id) as HTMLInputElement | null;
+    if (!input) {
+      return;
+    }
+    input.checked = false;
+  };
+  addEventListener("keydown", handler);
+};
+function Modal({ children, open, id = useId() }: Props) {
+  return (
+    <>
+      <input id={id} checked={open} type="checkbox" class="modal-toggle" />
+      <div class="modal">
+        {children}
+        <label class="modal-backdrop" for={id}>Close</label>
+      </div>
+      <script
+        type="module"
+        dangerouslySetInnerHTML={{ __html: useScript(script, id) }}
+      />
+    </>
+  );
+}
+export default Modal;