Merge branch 'Weaverse:main' into main

app/components/Marquee.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { CSSProperties, useCallback, useEffect, useRef, useState } from "react";
 
 interface MarqueeProps {
   children: React.ReactNode;
@@ -24,7 +24,12 @@ export function Marquee({
   return (
     <div
       className="flex items-center"
-      style={{ ["--animation-speed" as string]: `${animationTime}s` }}
+      style={
+        {
+          "--animation-speed": `${animationTime}s`,
+          "--gap": `${gap}s`,
+        } as CSSProperties
+      }
     >
       {contentWidth === 0 ? (
         <div ref={contentRef}>{children}</div>

app/modules/header/AnnouncementBar.tsx

@@ -1,20 +1,20 @@
 import { useThemeSettings } from "@weaverse/hydrogen";
 import clsx from "clsx";
 import { useCallback, useEffect, useState } from "react";
+import { IconX } from "~/components/Icons";
 import { Marquee } from "~/components/Marquee";
-import { IconClose } from "../Icon";
 
 const storageKey = "hide-announcement-bar";
 
 function standardizeContent(content: string) {
   // remove br, p, div and \n
-  return content
+  return content ? content
     .replace(/<br\/?>/g, "")
     .replace(/<p>/g, "")
     .replace(/<\/p>/g, "")
     .replace(/<div>/g, "")
     .replace(/<\/div>/g, "")
-    .replace(/\n/g, "");
+    .replace(/\n/g, "") : ''
 }
 
 export function AnnouncementBar() {
@@ -24,10 +24,9 @@ export function AnnouncementBar() {
   const {
     announcementBarText,
     announcementBarHeight,
-    announcementBarFontSize,
     announcementBarTextColor,
     announcementBarBgColor,
-    dismisableAnnouncementBar,
+    dismissibleAnnouncementBar,
     stickyAnnouncementBar,
     enableScrolling,
     scrollingGap,
@@ -37,17 +36,16 @@ export function AnnouncementBar() {
   const settings = {
     content: standardContent,
     announcementBarTextColor,
-    announcementBarFontSize,
     announcementBarBgColor,
     announcementBarHeight,
-    dismisable: dismisableAnnouncementBar,
+    dismissible: dismissibleAnnouncementBar,
     sticky: stickyAnnouncementBar,
     enableScrolling,
     scrollingGap: scrollingGap,
     scrollingSpeed,
     contentWidth,
   };
-  const { content, sticky, dismisable } = settings;
+  const { content, sticky, dismissible } = settings;
   let dismiss = useCallback(() => {
     localStorage.setItem(storageKey, "true");
     setShow(false);
@@ -83,20 +81,25 @@ export function AnnouncementBar() {
         height: `${announcementBarHeight}px`,
         backgroundColor: announcementBarBgColor,
         color: announcementBarTextColor,
-        fontSize: `${announcementBarFontSize}px`,
         ["--animation-speed" as string]: `${animationTime}ms`,
       }}
     >
       {enableScrolling ? (
         <Marquee speed={10} gap={scrollingGap}>
-          <span dangerouslySetInnerHTML={{ __html: content }} />
+          <div
+            className="flex items-center justify-center gap-[var(--gap)]"
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
         </Marquee>
       ) : (
-        <span dangerouslySetInnerHTML={{ __html: content }} />
+        <div
+          className="flex items-center justify-center gap-[var(--gap)]"
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
       )}
-      {dismisable && (
-        <IconClose
-          className="absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer"
+      {dismissible && (
+        <IconX
+          className="absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer w-5 h-5"
           onClick={dismiss}
         />
       )}

app/types/weaverse-hydrogen.ts

@@ -0,0 +1,38 @@
+import type { WeaverseImage } from "@weaverse/hydrogen";
+
+export type OptionDisplayType =
+  | "dropdown"
+  | "button"
+  | "color"
+  | "variant-image"
+  | "custom-image";
+export type OptionSize = "sm" | "md" | "lg";
+export type OptionShape = "square" | "round" | "circle";
+
+export type OptionData = {
+  id: string;
+  name: string;
+  displayName: string;
+  type: OptionDisplayType;
+  size: OptionSize;
+  shape: OptionShape;
+};
+
+export type SwatchesConfigs = {
+  options: OptionData[];
+  swatches: {
+    colors: ColorSwatch[];
+    images: ImageSwatch[];
+  };
+};
+
+export type ColorSwatch = {
+  id: string;
+  name: string;
+  value: string;
+};
+export type ImageSwatch = {
+  id: string;
+  name: string;
+  value: WeaverseImage | string;
+};