Merge branch 'Weaverse:main' into main

Weaverse · May 21, 2024 · fc90084 · fc90084
2 parents d6f74bf + c871f07
commit fc90084
Show file tree

Hide file tree

Showing 17 changed files with 13,118 additions and 23,106 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -14,6 +14,7 @@ module.exports = {
     "no-case-declarations": "off",
     // TODO: Remove jest plugin from hydrogen/eslint-plugin
     "jest/no-deprecated-functions": "off",
+    "react/display-name": "off",
     "import/order": [
       "warn",
       {

diff --git a/.npmrc b/.npmrc
@@ -1,3 +1,6 @@
 @weaverse:registry=https://registry.npmjs.com
 @shopify:registry=https://registry.npmjs.com
 ignore-scripts=true
+public-hoist-pattern[]=cookie
+public-hoist-pattern[]=set-cookie-parser
+public-hoist-pattern[]=textr
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @weaverse/pilot
 
+## 2.6.6
+
+### Patch Changes
+
+- Updated dependencies
+  - @weaverse/hydrogen@3.1.7
+
 ## 2.6.5
 
 ### Patch Changes

diff --git a/app/root.tsx b/app/root.tsx
@@ -1,48 +1,48 @@
-import { defer } from "@shopify/remix-oxygen";
-import type {
-  MetaArgs,
-  type AppLoadContext,
-  type LinksFunction,
-  type LoaderFunctionArgs,
-  type SerializeFrom,
-} from "@shopify/remix-oxygen";
+import poppins400 from "@fontsource/poppins/400.css?url";
+import poppins500 from "@fontsource/poppins/500.css?url";
+import poppins600 from "@fontsource/poppins/600.css?url";
+import poppins700 from "@fontsource/poppins/700.css?url";
 import type { ShouldRevalidateFunction } from "@remix-run/react";
 import {
-  isRouteErrorResponse,
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
+  isRouteErrorResponse,
   useLoaderData,
   useMatches,
   useRouteError,
 } from "@remix-run/react";
 import type { SeoConfig } from "@shopify/hydrogen";
 import {
+  UNSTABLE_Analytics as Analytics,
   getSeoMeta,
   getShopAnalytics,
-  UNSTABLE_Analytics as Analytics,
   useNonce,
 } from "@shopify/hydrogen";
-import invariant from "tiny-invariant";
+import type {
+  AppLoadContext,
+  LinksFunction,
+  LoaderFunctionArgs,
+  MetaArgs,
+  SerializeFrom,
+} from "@shopify/remix-oxygen";
+import { defer } from "@shopify/remix-oxygen";
 import { withWeaverse } from "@weaverse/hydrogen";
-import roboto400 from "@fontsource/roboto/400.css?url";
-import roboto500 from "@fontsource/roboto/500.css?url";
-import roboto700 from "@fontsource/roboto/700.css?url";
+import invariant from "tiny-invariant";
 
-import { CustomAnalytics } from "~/components/CustomAnalytics";
 import { Layout } from "~/components";
-import { seoPayload } from "~/lib/seo.server";
+import { CustomAnalytics } from "~/components/CustomAnalytics";
 import { GlobalLoading } from "~/components/global-loading";
+import { seoPayload } from "~/lib/seo.server";
 
 import { GenericError } from "./components/GenericError";
 import { NotFound } from "./components/NotFound";
-import styles from "./styles/app.css?url";
 import { DEFAULT_LOCALE, parseMenu } from "./lib/utils";
+import styles from "./styles/app.css?url";
 import { GlobalStyle } from "./weaverse/style";
 
-// This is important to avoid re-fetching root queries on sub-navigations
 export const shouldRevalidate: ShouldRevalidateFunction = ({
   formMethod,
   currentUrl,
@@ -65,15 +65,19 @@ export const links: LinksFunction = () => {
   return [
     {
       rel: "stylesheet",
-      href: roboto400,
+      href: poppins400,
+    },
+    {
+      rel: "stylesheet",
+      href: poppins500,
     },
     {
       rel: "stylesheet",
-      href: roboto500,
+      href: poppins600,
     },
     {
       rel: "stylesheet",
-      href: roboto700,
+      href: poppins700,
     },
     { rel: "stylesheet", href: styles },
     {
@@ -168,7 +172,6 @@ function App() {
 export default withWeaverse(App);
 
 export function ErrorBoundary({ error }: { error: Error }) {
-  const nonce = useNonce();
   const routeError = useRouteError();
   const rootData = useRootLoaderData();
   const locale = rootData?.selectedLocale ?? DEFAULT_LOCALE;

diff --git a/app/sections/countdown/index.tsx b/app/sections/countdown/index.tsx
@@ -25,11 +25,12 @@ export let schema: HydrogenComponentSchema = {
     children: [
       {
         type: "heading",
-        content: "Countdown heading",
+        content: "Sale ends in",
       },
       {
         type: "subheading",
-        content: "Countdown to our upcoming event",
+        content:
+          "Insert the time limit or an encouraging message of your marketing campaign to create a sense of urgency for your customers.",
       },
       {
         type: "countdown--timer",

diff --git a/app/sections/countdown/timer.tsx b/app/sections/countdown/timer.tsx
@@ -5,104 +5,103 @@ import type {
 import type { CSSProperties } from "react";
 import { useState, useEffect, forwardRef } from "react";
 
-interface CountDownTimerProps extends HydrogenComponentProps {
-  textColor: string;
-  startDate: number;
-}
-function calculateTimeRemaining(startTime: number) {
+const ONE_SEC = 1000;
+const ONE_MIN = ONE_SEC * 60;
+const ONE_HOUR = ONE_MIN * 60;
+const ONE_DAY = ONE_HOUR * 24;
+
+function calculateRemainingTime(endTime: number) {
   let now = new Date().getTime();
-  let difference = startTime - now;
-  if (difference <= 0) {
-    return {
-      days: 0,
-      hours: 0,
-      minutes: 0,
-      seconds: 0,
-    };
+  let diff = endTime - now;
+  if (diff <= 0) {
+    return { days: 0, hours: 0, minutes: 0, seconds: 0 };
   }
-
-  let days = Math.floor(difference / (1000 * 60 * 60 * 24));
-  let hours = Math.floor(
-    (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
-  );
-  let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
-  let seconds = Math.floor((difference % (1000 * 60)) / 1000);
   return {
-    days,
-    hours,
-    minutes,
-    seconds,
+    days: Math.floor(diff / ONE_DAY),
+    hours: Math.floor((diff % ONE_DAY) / ONE_HOUR),
+    minutes: Math.floor((diff % ONE_HOUR) / ONE_MIN),
+    seconds: Math.floor((diff % ONE_MIN) / ONE_SEC),
   };
 }
-let CountdownTimer = forwardRef<HTMLDivElement, CountDownTimerProps>(
-  (props, ref) => {
-    let { textColor, startDate, ...rest } = props;
-    const [timeRemaining, setTimeRemaining] = useState(
-      calculateTimeRemaining(startDate),
-    );
-    useEffect(() => {
-      const intervalId = setInterval(() => {
-        const updatedTimeRemaining = calculateTimeRemaining(startDate);
-        setTimeRemaining(updatedTimeRemaining);
-        if (
-          updatedTimeRemaining.days <= 0 &&
-          updatedTimeRemaining.hours <= 0 &&
-          updatedTimeRemaining.minutes <= 0 &&
-          updatedTimeRemaining.seconds <= 0
-        ) {
-          clearInterval(intervalId);
-        }
-      }, 1000);
-      return () => clearInterval(intervalId);
-    }, [startDate]);
 
-    let timerStyle: CSSProperties = {
-      "--timer-text-color": textColor,
-    } as CSSProperties;
+type CountDownTimerData = {
+  textColor: string;
+  endTime: number;
+};
 
-    return (
-      <div
-        ref={ref}
-        {...rest}
-        className="flex justify-center gap-5 text-[var(--timer-text-color)] sm-max:gap-2"
-        style={timerStyle}
-      >
-        <div className="">
-          <p className="text-5xl font-medium leading-tight sm-max:text-4xl">
-            {timeRemaining?.days || 0}
-          </p>
-          <p className="text-base font-normal sm-max:text-sm">DAYS</p>
+let CountdownTimer = forwardRef<
+  HTMLDivElement,
+  CountDownTimerData & HydrogenComponentProps
+>((props, ref) => {
+  let { textColor, endTime, ...rest } = props;
+  let [remainingTime, setRemainingTime] = useState(
+    calculateRemainingTime(endTime),
+  );
+
+  useEffect(() => {
+    let intervalId = setInterval(() => {
+      let updatedTimeRemaining = calculateRemainingTime(endTime);
+      setRemainingTime(updatedTimeRemaining);
+      if (
+        updatedTimeRemaining.days <= 0 &&
+        updatedTimeRemaining.hours <= 0 &&
+        updatedTimeRemaining.minutes <= 0 &&
+        updatedTimeRemaining.seconds <= 0
+      ) {
+        clearInterval(intervalId);
+      }
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, [endTime]);
+
+  let timerStyle: CSSProperties = {
+    "--timer-color": textColor,
+  } as CSSProperties;
+
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      className="flex justify-center text-[var(--timer-color)]"
+      style={timerStyle}
+    >
+      <div className="space-y-1">
+        <div className="text-4xl sm:text-5xl font-medium flex items-center">
+          <div className="px-6">{remainingTime?.days || 0}</div>
+          <div className="h-6 border-r border-[var(--timer-color)]" />
         </div>
-        <div className="bg-black w-px h-7 mt-4 sm-max:mt-2" />
-        <div className="">
-          <p className="text-5xl font-medium leading-tight sm-max:text-4xl">
-            {timeRemaining?.hours || 0}
-          </p>
-          <p className="text-base font-normal sm-max:text-sm">HOURS</p>
+        <div className="text-sm sm:text-base capitalize">Days</div>
+      </div>
+      <div className="space-y-1">
+        <div className="text-4xl sm:text-5xl font-medium flex items-center">
+          <div className="px-6">{remainingTime?.hours || 0}</div>
+          <div className="h-6 border-r border-[var(--timer-color)]" />
         </div>
-        <div className="bg-black w-px h-7 mt-4 sm-max:mt-2" />
-        <div className="">
-          <p className="text-5xl font-medium leading-tight sm-max:text-4xl">
-            {timeRemaining?.minutes || 0}
-          </p>
-          <p className="text-base font-normal sm-max:text-sm">MINUTES</p>
+        <div className="text-sm sm:text-base capitalize">hours</div>
+      </div>
+      <div className="space-y-1">
+        <div className="text-4xl sm:text-5xl font-medium flex items-center">
+          <div className="px-6">{remainingTime?.minutes || 0}</div>
+          <div className="h-6 border-r border-[var(--timer-color)]" />
         </div>
-        <div className="bg-black w-px h-7 mt-4 sm-max:mt-2" />
-        <div className="">
-          <p className="text-5xl font-medium leading-tight sm-max:text-4xl">
-            {timeRemaining?.seconds || 0}
-          </p>
-          <p className="text-base font-normal sm-max:text-sm">SECONDS</p>
+        <div className="text-sm sm:text-base capitalize">minutes</div>
+      </div>
+      <div className="space-y-1">
+        <div className="text-4xl sm:text-5xl font-medium flex items-center">
+          <div className="px-6">{remainingTime?.seconds || 0}</div>
         </div>
+        <div className="text-sm sm:text-base capitalize">seconds</div>
       </div>
-    );
-  },
-);
+    </div>
+  );
+});
 
 export default CountdownTimer;
 
 let tomorrow = new Date();
 tomorrow.setDate(tomorrow.getDate() + 1);
+
 export let schema: HydrogenComponentSchema = {
   type: "countdown--timer",
   title: "Timer",
@@ -111,18 +110,17 @@ export let schema: HydrogenComponentSchema = {
     {
       group: "Timer",
       inputs: [
-        {
-          type: "color",
-          name: "textColor",
-          label: "Color",
-          defaultValue: "#000000",
-        },
         {
           type: "datepicker",
-          label: "Start date",
-          name: "startDate",
+          label: "End time",
+          name: "endTime",
           defaultValue: tomorrow.getTime(),
         },
+        {
+          type: "color",
+          name: "textColor",
+          label: "Text color",
+        },
       ],
     },
   ],

diff --git a/app/sections/shared/BackgroundImage.tsx b/app/sections/shared/BackgroundImage.tsx
@@ -17,7 +17,7 @@ export function BackgroundImage(props: BackgroundImageProps) {
   if (backgroundImage) {
     return (
       <Image
-        className="absolute inset-0 w-full h-full"
+        className="absolute inset-0 w-full h-full z-[-1]"
         data={backgroundImage}
         sizes="auto"
         style={{
@@ -35,24 +35,23 @@ export let backgroundInputs: InspectorGroup["inputs"] = [
     type: "heading",
     label: "Background",
   },
-  {
-    type: "color",
-    name: "backgroundColor",
-    label: "Background color",
-    defaultValue: "",
-  },
   {
     type: "select",
-    name: "bgColorFor",
-    label: "Background color for",
+    name: "backgroundFor",
+    label: "Background for",
     configs: {
       options: [
         { value: "section", label: "Section" },
         { value: "content", label: "Content" },
       ],
     },
     defaultValue: "section",
-    condition: "backgroundColor.ne.nil",
+  },
+  {
+    type: "color",
+    name: "backgroundColor",
+    label: "Background color",
+    defaultValue: "",
   },
   {
     type: "image",