Streamshop rebased (#975)

First streamshop version.

---------

Co-authored-by: RyanSantosRibeiro <[email protected]>

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";

decohub/manifest.gen.ts

@@ -24,14 +24,15 @@ import * as $$$$$$$$$$$18 from "./apps/resend.ts";
 import * as $$$$$$$$$$$19 from "./apps/shopify.ts";
 import * as $$$$$$$$$$$20 from "./apps/smarthint.ts";
 import * as $$$$$$$$$$$21 from "./apps/sourei.ts";
-import * as $$$$$$$$$$$22 from "./apps/typesense.ts";
-import * as $$$$$$$$$$$23 from "./apps/verified-reviews.ts";
-import * as $$$$$$$$$$$24 from "./apps/vnda.ts";
-import * as $$$$$$$$$$$25 from "./apps/vtex.ts";
-import * as $$$$$$$$$$$26 from "./apps/wake.ts";
-import * as $$$$$$$$$$$27 from "./apps/wap.ts";
-import * as $$$$$$$$$$$28 from "./apps/weather.ts";
-import * as $$$$$$$$$$$29 from "./apps/workflows.ts";
+import * as $$$$$$$$$$$22 from "./apps/streamshop.ts";
+import * as $$$$$$$$$$$23 from "./apps/typesense.ts";
+import * as $$$$$$$$$$$24 from "./apps/verified-reviews.ts";
+import * as $$$$$$$$$$$25 from "./apps/vnda.ts";
+import * as $$$$$$$$$$$26 from "./apps/vtex.ts";
+import * as $$$$$$$$$$$27 from "./apps/wake.ts";
+import * as $$$$$$$$$$$28 from "./apps/wap.ts";
+import * as $$$$$$$$$$$29 from "./apps/weather.ts";
+import * as $$$$$$$$$$$30 from "./apps/workflows.ts";
 
 const manifest = {
   "apps": {
@@ -57,14 +58,15 @@ const manifest = {
     "decohub/apps/shopify.ts": $$$$$$$$$$$19,
     "decohub/apps/smarthint.ts": $$$$$$$$$$$20,
     "decohub/apps/sourei.ts": $$$$$$$$$$$21,
-    "decohub/apps/typesense.ts": $$$$$$$$$$$22,
-    "decohub/apps/verified-reviews.ts": $$$$$$$$$$$23,
-    "decohub/apps/vnda.ts": $$$$$$$$$$$24,
-    "decohub/apps/vtex.ts": $$$$$$$$$$$25,
-    "decohub/apps/wake.ts": $$$$$$$$$$$26,
-    "decohub/apps/wap.ts": $$$$$$$$$$$27,
-    "decohub/apps/weather.ts": $$$$$$$$$$$28,
-    "decohub/apps/workflows.ts": $$$$$$$$$$$29,
+    "decohub/apps/streamshop.ts": $$$$$$$$$$$22,
+    "decohub/apps/typesense.ts": $$$$$$$$$$$23,
+    "decohub/apps/verified-reviews.ts": $$$$$$$$$$$24,
+    "decohub/apps/vnda.ts": $$$$$$$$$$$25,
+    "decohub/apps/vtex.ts": $$$$$$$$$$$26,
+    "decohub/apps/wake.ts": $$$$$$$$$$$27,
+    "decohub/apps/wap.ts": $$$$$$$$$$$28,
+    "decohub/apps/weather.ts": $$$$$$$$$$$29,
+    "decohub/apps/workflows.ts": $$$$$$$$$$$30,
   },
   "name": "decohub",
   "baseUrl": import.meta.url,

streamshop/README.md

@@ -0,0 +1,67 @@
+Here’s the README translated into English:
+
+---
+
+# StreamShop Components
+
+This repository contains a collection of React components designed for the StreamShop App, an application developed for Deco's e-commerce platform. The app simplifies integration for clients to use StreamShop’s video commerce services, enabling dynamic and modular interfaces that enhance user engagement and shopping experiences.
+
+## 📂 Component Structure
+
+The main components of the project include:
+
+1. **Banner.tsx**
+   - Displays banners with configurable information, including:
+     - Title (`title`) and description (`description`).
+     - Images for different resolutions (`mobile`, `desktop`).
+     - Action buttons (`cta`).
+     - Container width (`containerWidth`).
+
+2. **Embed.tsx**
+   - Configuration and custom styles for dynamic embeds on the website.
+
+3. **InfoReels.tsx**
+   - Displays information about Reels, including:
+     - Configurable video width and height.
+     - Styled content for desktop and mobile.
+
+4. **Reels.tsx**
+   - Dedicated component to display videos in the Reels format.
+   - Accepts a `slug` to identify the store.
+
+5. **Stories.tsx**
+   - Manages a list of Stories with support for multiple videos.
+   - Configurable titles (`title`), calls to action (`cta`), and identifiers (`slugs`).
+
+6. **Widget.tsx**
+   - A customizable component for creating widgets:
+     - Configurable horizontal and vertical position (`positionX`, `positionY`).
+     - Adjustable dimensions and spacing (`size`, `sizePosition`).
+     - Animation options (`animation`).
+``
+
+## 📖 Documentation
+
+Each component includes detailed annotations to facilitate use and configuration. Use your code editor to view descriptions and available options for each prop.
+
+## 🤝 Contributing
+
+Contributions are welcome! To contribute:
+
+1. Fork the repository.
+2. Create a new branch for your feature or fix:
+   ```bash
+   git checkout -b my-feature
+   ```
+3. Push your changes for review:
+   ```bash
+   git push origin my-feature
+   ```
+
+## 📝 License
+
+This project is licensed under the MIT License. See the `LICENSE` file for more details.
+
+---
+
+Let me know if you'd like further adjustments! 😊

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;