Merge branch 'Weaverse:main' into main

Author: hta218

README.md

@@ -13,8 +13,8 @@ _Pilot is an innovative Shopify theme, powered by Hydrogen, Remix, and Weaverse,
 ## Demo
 
 - Live store: https://pilot.weaverse.dev
-- Try customizing Pilot on Weaverse Playground: https://studio.weaverse.io/demo
-  ![demo](https://cdn.shopify.com/s/files/1/0693/8201/3220/files/Home.png?v=1695816170)
+- Customizing Pilot on Weaverse Studio: https://studio.weaverse.io/demo
+  ![pilot.weaverse.dev](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/pilot.weavverse.dev.png?v=1735017659)
 
 ## What's included
 
@@ -26,9 +26,10 @@ _Pilot is an innovative Shopify theme, powered by Hydrogen, Remix, and Weaverse,
 - GraphQL generator
 - TypeScript and JavaScript flavors
 - Tailwind CSS (via PostCSS)
+- Radix UI
 - New Shopify customer account API
 - Full-featured setup of components and routes
-- Fully customizable inside [Weaverse](https://weaverse.io)
+- Fully customizable inside [Weaverse Studio](https://weaverse.io)
 
 ## Deployment
 
@@ -45,9 +46,9 @@ _Pilot is an innovative Shopify theme, powered by Hydrogen, Remix, and Weaverse,
 
 1. Install [Weaverse Hydrogen Customizer](https://apps.shopify.com/weaverse) from Shopify App Store.
 2. Create new Hydrogen storefront inside Weaverse.
-3. Initialize the project and start a local dev server with `@weaverse/cli` tool as instructed in the Weaverse editor.
-   ![Init Weaverse Storefront](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/New_storefront.png?v=1699244454)
-4. Open the Weaverse editor to start customizing and tailoring your storefront according to your preferences.
+3. Initialize the project and start a local dev server with `@weaverse/cli` tool as instructed in the Weaverse Studio.
+   ![Create new Weaverse Shopify Hydrogen project](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/new_hydrogen_project.png?v=1735008500)
+4. Open **Weaverse Studio** to start customizing and tailoring your storefront according to your preferences.
 
 ## Features overview
 
@@ -217,7 +218,7 @@ let Video = forwardRef<HTMLElement, VideoProps>((props, ref) => {
 export default Video;
 ```
 
-Export a `schema` object from the file to define the component's schema with default data and settings to be used in the Weaverse editor.
+Export a `schema` object from the file to define the component's schema with default data and settings to be used in the **Weaverse Studio**.
 
 ```tsx:app/weaverse/sections/Video.tsx
 export let schema: HydrogenComponentSchema = {
@@ -276,11 +277,11 @@ export let loader = async ({weaverse, data}: ComponentLoaderArgs) => {
 
 And then you can use the data in your component with `Component.props.loaderData` 🤗
 
-### Customizing the theme inside Weaverse Editor
+### Manage content and style your pages within Weaverse Studio
 
-Weaverse provides a convenient way to customize your theme inside the **Weaverse editor**. You can add new sections, customize existing ones, and change the theme settings.
+Weaverse provides a convenient way to customize your theme inside the **Weaverse Studio**. You can add new sections, customize existing ones, and change the theme settings.
 
-![Weaverse Editor](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/playground.jpg?v=1699244445)
+![Weaverse Studio](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/weaverse_studio.png?v=1735017805)
 
 ### Local development inspects
 

app/components/account/order-details.tsx

@@ -4,8 +4,8 @@ import { Image, Money } from "@shopify/hydrogen";
 import clsx from "clsx";
 import { Link } from "~/components/link";
 import { Section } from "~/components/section";
-import { statusMessage } from "~/lib/utils";
 import type { loader as orderDetailsLoader } from "~/routes/($locale).account.orders.$id";
+import { ORDER_STATUS } from "./orders";
 
 export function OrderDetails() {
   let { order, lineItems, fulfillmentStatus } =
@@ -15,7 +15,7 @@ export function OrderDetails() {
   for (let lineItem of lineItems) {
     totalDiscount += lineItem.discountAllocations.reduce(
       (acc, curr) => acc + Number.parseFloat(curr.allocatedAmount.amount),
-      0,
+      0
     );
   }
 
@@ -167,10 +167,10 @@ export function OrderDetails() {
                 <div
                   className={clsx(
                     "mt-3 px-2.5 py-1 text-sm inline-block w-auto",
-                    "text-body-inverse bg-body-subtle",
+                    "text-body-inverse bg-body-subtle"
                   )}
                 >
-                  {statusMessage(fulfillmentStatus)}
+                  {ORDER_STATUS[fulfillmentStatus] || fulfillmentStatus}
                 </div>
               )}
             </div>

app/components/account/orders.tsx

@@ -1,7 +1,16 @@
 import { Image, flattenConnection } from "@shopify/hydrogen";
+import type { FulfillmentStatus } from "@shopify/hydrogen/customer-account-api-types";
 import type { OrderCardFragment } from "customer-accountapi.generated";
 import Link from "~/components/link";
-import { statusMessage } from "~/lib/utils";
+
+export const ORDER_STATUS: Record<FulfillmentStatus, string> = {
+  SUCCESS: "Success",
+  PENDING: "Pending",
+  OPEN: "Open",
+  FAILURE: "Failure",
+  ERROR: "Error",
+  CANCELLED: "Cancelled",
+};
 
 type OrderCardsProps = {
   orders: OrderCardFragment[];
@@ -79,7 +88,7 @@ function OrderCard({ order }: { order: OrderCardFragment }) {
               <dt className="sr-only">Fulfillment Status</dt>
               <dd className="mt-3">
                 <span className="px-2.5 py-1 text-xs font-medium border bg-gray-100">
-                  {statusMessage(fulfillmentStatus)}
+                  {ORDER_STATUS[fulfillmentStatus] || fulfillmentStatus}
                 </span>
               </dd>
             </>

app/components/breadcrumb.tsx

@@ -1,11 +1,15 @@
-import { cn } from "~/lib/cn";
+import { cn } from "~/utils/cn";
 import { Link } from "./link";
 
 export function BreadCrumb({
   homeLabel = "Home",
   page,
   className,
-}: { homeLabel?: string; page: string; className?: string }) {
+}: {
+  homeLabel?: string;
+  page: string;
+  className?: string;
+}) {
   return (
     <div className={cn("flex items-center gap-2 text-body-subtle", className)}>
       <Link to="/" className="hover:underline underline-offset-4">

app/components/button.tsx

@@ -3,7 +3,7 @@ import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
 import type { HTMLAttributes } from "react";
 import { forwardRef } from "react";
-import { cn } from "~/lib/cn";
+import { cn } from "~/utils/cn";
 
 export let variants = cva(
   [
@@ -62,7 +62,7 @@ export let variants = cva(
     defaultVariants: {
       variant: "primary",
     },
-  },
+  }
 );
 
 export interface ButtonStyleProps {

app/modules/cart-best-sellers.tsx renamed to app/components/cart/cart-best-sellers.tsx

@@ -7,7 +7,7 @@ import clsx from "clsx";
 import { useEffect, useId, useMemo } from "react";
 import { ProductCard } from "~/components/product/product-card";
 import { Skeleton } from "~/components/skeleton";
-import { usePrefixPathWithLocale } from "~/lib/utils";
+import { usePrefixPathWithLocale } from "~/hooks/use-prefix-path-with-locale";
 
 interface CartBestSellersProps {
   count: number;

app/modules/cart.tsx renamed to app/components/cart/cart.tsx

@@ -18,7 +18,7 @@ import useScroll from "react-use/esm/useScroll";
 import type { CartApiQueryFragment } from "storefrontapi.generated";
 import { Button } from "~/components/button";
 import { Link } from "~/components/link";
-import { getImageAspectRatio } from "~/lib/utils";
+import { getImageAspectRatio } from "~/utils/image";
 import { CartBestSellers } from "./cart-best-sellers";
 
 type CartLine = OptimisticCart<CartApiQueryFragment>["lines"]["nodes"][0];
@@ -43,7 +43,7 @@ export function Cart({
   return <CartEmpty hidden={linesCount} onClose={onClose} layout={layout} />;
 }
 
-export function CartDetails({
+function CartDetails({
   layout,
   cart,
 }: {
@@ -59,7 +59,7 @@ export function CartDetails({
           "pb-12 w-full max-w-page mx-auto",
           "grid md:grid-cols-2 lg:grid-cols-3 md:items-start",
           "gap-8 md:gap-8 lg:gap-12",
-        ],
+        ]
       )}
     >
       <CartLines lines={cart?.lines?.nodes} layout={layout} />
@@ -166,7 +166,7 @@ function CartLines({
         className={clsx(
           "grid",
           layout === "page" && "gap-9",
-          layout === "drawer" && "gap-5",
+          layout === "drawer" && "gap-5"
         )}
       >
         {currentLines.map((line) => (
@@ -180,7 +180,10 @@ function CartLines({
 function CartCheckoutActions({
   checkoutUrl,
   layout,
-}: { checkoutUrl: string; layout: Layouts }) {
+}: {
+  checkoutUrl: string;
+  layout: Layouts;
+}) {
   if (!checkoutUrl) return null;
 
   return (
@@ -213,7 +216,7 @@ function CartSummary({
       className={clsx(
         layout === "drawer" && "grid gap-4 border-t border-line-subtle pt-4",
         layout === "page" &&
-          "sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 rounded w-full",
+          "sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 rounded w-full"
       )}
     >
       <h2 id="summary-heading" className="sr-only">
@@ -305,7 +308,7 @@ function CartLineItem({ line, layout }: { line: CartLine; layout: Layouts }) {
         <div
           className={clsx(
             "flex items-center gap-2",
-            layout === "drawer" && "justify-between",
+            layout === "drawer" && "justify-between"
           )}
         >
           <CartLineQuantityAdjust line={line} />
@@ -320,7 +323,10 @@ function CartLineItem({ line, layout }: { line: CartLine; layout: Layouts }) {
 function ItemRemoveButton({
   lineId,
   className,
-}: { lineId: CartLine["id"]; className?: string }) {
+}: {
+  lineId: CartLine["id"];
+  className?: string;
+}) {
   return (
     <CartForm
       route="/cart"
@@ -330,7 +336,7 @@ function ItemRemoveButton({
       <button
         className={clsx(
           "flex items-center justify-center w-8 h-8 border-none",
-          className,
+          className
         )}
         type="submit"
       >
@@ -452,7 +458,7 @@ function CartLinePrice({
   );
 }
 
-export function CartEmpty({
+function CartEmpty({
   hidden = false,
   layout = "drawer",
   onClose,
@@ -474,7 +480,7 @@ export function CartEmpty({
         layout === "page" && [
           hidden ? "" : "grid",
           "pb-12 w-full md:items-start gap-4 md:gap-8 lg:gap-12",
-        ],
+        ]
       )}
       hidden={hidden}
     >

app/components/compare-at-price.tsx

@@ -1,6 +1,6 @@
 import { useMoney } from "@shopify/hydrogen";
 import type { MoneyV2 } from "@shopify/hydrogen/storefront-api-types";
-import { cn } from "~/lib/cn";
+import { cn } from "~/utils/cn";
 
 export function CompareAtPrice({
   data,

app/components/heading.tsx

@@ -7,7 +7,7 @@ import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
 import type { CSSProperties } from "react";
 import { forwardRef } from "react";
-import { cn } from "~/lib/cn";
+import { cn } from "~/utils/cn";
 
 let fontSizeVariants = cva("", {
   variants: {
@@ -132,7 +132,7 @@ let Heading = forwardRef<
       style={style}
       className={cn(
         size === "custom" && fontSizeVariants({ mobileSize, desktopSize }),
-        variants({ size, weight, letterSpacing, alignment, className }),
+        variants({ size, weight, letterSpacing, alignment, className })
       )}
     >
       {content}

app/components/layout/cart-drawer.tsx

@@ -6,7 +6,7 @@ import clsx from "clsx";
 import { Suspense, useState } from "react";
 import Link from "~/components/link";
 import { ScrollArea } from "~/components/scroll-area";
-import { Cart } from "~/modules/cart";
+import { Cart } from "~/components/cart/cart";
 import type { RootLoader } from "~/root";
 
 export let openCartDrawer = () => {};
@@ -53,7 +53,7 @@ export function CartDrawer() {
                     "text-sm leading-none text-center font-medium",
                     "transition-colors duration-300",
                     "group-hover/header:bg-[--color-header-text]",
-                    "group-hover/header:text-[--color-header-bg]",
+                    "group-hover/header:text-[--color-header-bg]"
                   )}
                 >
                   <span className="-mr-px">{cart?.totalQuantity}</span>

app/components/layout/country-selector.tsx

@@ -11,10 +11,9 @@ import type { CartBuyerIdentityInput } from "@shopify/hydrogen/storefront-api-ty
 import { useEffect, useRef } from "react";
 import ReactCountryFlag from "react-country-flag";
 import { useInView } from "react-intersection-observer";
-import { getCountryUrlPath } from "~/lib/locale";
-import type { Localizations } from "~/lib/type";
-import { DEFAULT_LOCALE } from "~/lib/utils";
+import { DEFAULT_LOCALE } from "~/utils/const";
 import type { RootLoader } from "~/root";
+import type { Locale, Localizations } from "~/types/locale";
 
 export function CountrySelector() {
   let fetcher = useFetcher();
@@ -24,7 +23,7 @@ export function CountrySelector() {
   let { pathname, search } = useLocation();
   let pathWithoutLocale = `${pathname.replace(
     selectedLocale.pathPrefix,
-    "",
+    ""
   )}${search}`;
 
   let countries = (fetcher.data ?? {}) as Localizations;
@@ -139,3 +138,20 @@ export function CountrySelector() {
     </div>
   );
 }
+
+function getCountryUrlPath({
+  countryLocale,
+  defaultLocalePrefix,
+  pathWithoutLocale,
+}: {
+  countryLocale: Locale;
+  pathWithoutLocale: string;
+  defaultLocalePrefix: string;
+}) {
+  let countryPrefixPath = "";
+  let countryLocalePrefix = `${countryLocale.language}-${countryLocale.country}`;
+  if (countryLocalePrefix !== defaultLocalePrefix) {
+    countryPrefixPath = `/${countryLocalePrefix.toLowerCase()}`;
+  }
+  return `${countryPrefixPath}${pathWithoutLocale}`;
+}

app/components/layout/desktop-menu.tsx

@@ -6,9 +6,8 @@ import clsx from "clsx";
 import { useState } from "react";
 import Link from "~/components/link";
 import { useShopMenu } from "~/hooks/use-shop-menu";
-import { cn } from "~/lib/cn";
-import { getMaxDepth } from "~/lib/menu";
-import type { SingleMenuItem } from "~/lib/type";
+import { cn } from "~/utils/cn";
+import type { SingleMenuItem } from "~/types/menu";
 
 export function DesktopMenu() {
   let { headerMenu } = useShopMenu();
@@ -155,7 +154,7 @@ function MegaMenu({ items }: { items: SingleMenuItem[] }) {
               ))}
             </div>
           </SlideIn>
-        ),
+        )
       )}
     </div>
   );
@@ -171,7 +170,7 @@ function SlideIn(props: {
     <div
       className={cn(
         "opacity-0 animate-slide-left [animation-delay:calc(var(--idx)*0.1s+0.1s)]",
-        className,
+        className
       )}
       style={
         {
@@ -185,3 +184,10 @@ function SlideIn(props: {
     </div>
   );
 }
+
+function getMaxDepth(item: { items: any[] }): number {
+  if (item.items?.length > 0) {
+    return Math.max(...item.items.map(getMaxDepth)) + 1;
+  }
+  return 1;
+}