Merge branch 'Weaverse:main' into main

app/components/Button.tsx

@@ -40,7 +40,10 @@ let variants = cva(
 
 export interface ButtonProps
  extends VariantProps<typeof variants>,
- Omit<HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "children">,
+ Omit<
+ HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,
+ "children" | "type"
+ >,
  Partial<HydrogenComponentProps> {
  as?: keyof HTMLElementTagNameMap;
  className?: string;

app/components/Icons.tsx

@@ -1,5 +1,3 @@
-import clsx from "clsx";
-
 type IconProps = JSX.IntrinsicElements["svg"];
 
 // Using icons from https://phosphoricons.com/
@@ -64,37 +62,92 @@ export function IconTag(props: IconProps) {
  );
 }
 
-export function IconCaret(props: IconProps) {
- let { className, direction = "right", ...rest } = props;
- let rotate;
+export function IconCaretLeft(props: IconProps) {
+ return (
+ <svg
+ xmlns="http:https://www.w3.org/2000/svg"
+ width="32"
+ height="32"
+ viewBox="0 0 256 256"
+ fill="currentColor"
+ {...props}
+ >
+ <path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path>
+ </svg>
+ );
+}
+
+export function IconCaretRight(props: IconProps) {
+ return (
+ <svg
+ xmlns="http:https://www.w3.org/2000/svg"
+ width="32"
+ height="32"
+ viewBox="0 0 256 256"
+ fill="currentColor"
+ {...props}
+ >
+ <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path>
+ </svg>
+ );
+}
+
+export function IconCaretDown(props: IconProps) {
+ return (
+ <svg
+ xmlns="http:https://www.w3.org/2000/svg"
+ width="32"
+ height="32"
+ viewBox="0 0 256 256"
+ fill="currentColor"
+ {...props}
+ >
+ <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path>
+ </svg>
+ );
+}
+
+export function IconCaretUp(props: IconProps) {
+ return (
+ <svg
+ xmlns="http:https://www.w3.org/2000/svg"
+ width="32"
+ height="32"
+ viewBox="0 0 256 256"
+ fill="currentColor"
+ {...props}
+ >
+ <path d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z"></path>
+ </svg>
+ );
+}
 
- switch (direction) {
- case "down":
- rotate = "rotate-0";
- break;
- case "up":
- rotate = "rotate-180";
- break;
- case "right":
- rotate = "-rotate-90";
- break;
- case "left":
- rotate = "rotate-90";
- break;
- default:
- rotate = "rotate-0";
- }
+export function IconArrowLeft(props: IconProps) {
  return (
  <svg
  xmlns="http:https://www.w3.org/2000/svg"
  width="32"
  height="32"
+ viewBox="0 0 256 256"
  fill="currentColor"
+ {...props}
+ >
+ <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
+ </svg>
+ );
+}
+
+export function IconArrowRight(props: IconProps) {
+ return (
+ <svg
+ xmlns="http:https://www.w3.org/2000/svg"
+ width="32"
+ height="32"
  viewBox="0 0 256 256"
- className={clsx(className, rotate)}
- {...rest}
+ fill="currentColor"
+ {...props}
  >
- <path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path>
+ <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
  </svg>
  );
 }

app/components/OverlayAndBackground.tsx

@@ -0,0 +1,33 @@
+import type { BackgroundImageProps } from "./BackgroundImage";
+import { BackgroundImage } from "./BackgroundImage";
+import type { OverlayProps } from "./Overlay";
+import { Overlay } from "./Overlay";
+
+export interface OverlayAndBackgroundProps
+ extends BackgroundImageProps,
+ OverlayProps {}
+
+export function OverlayAndBackground(props: OverlayAndBackgroundProps) {
+ let {
+ backgroundImage,
+ backgroundFit,
+ backgroundPosition,
+ enableOverlay,
+ overlayColor,
+ overlayOpacity,
+ } = props;
+ return (
+ <>
+ <BackgroundImage
+ backgroundImage={backgroundImage}
+ backgroundFit={backgroundFit}
+ backgroundPosition={backgroundPosition}
+ />
+ <Overlay
+ enableOverlay={enableOverlay}
+ overlayColor={overlayColor}
+ overlayOpacity={overlayOpacity}
+ />
+ </>
+ );
+}

app/components/Section.tsx

@@ -8,9 +8,10 @@ import type { HTMLAttributes } from "react";
 import React, { forwardRef } from "react";
 import { cn } from "~/lib/cn";
 import type { BackgroundImageProps } from "./BackgroundImage";
-import { BackgroundImage, backgroundInputs } from "./BackgroundImage";
+import { backgroundInputs } from "./BackgroundImage";
 import type { OverlayProps } from "./Overlay";
-import { Overlay, overlayInputs } from "./Overlay";
+import { overlayInputs } from "./Overlay";
+import { OverlayAndBackground } from "./OverlayAndBackground";
 
 export type BackgroundProps = BackgroundImageProps & {
  backgroundFor: "section" | "content";
@@ -132,31 +133,6 @@ export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
  );
 });
 
-function OverlayAndBackground(props: SectionProps) {
- let {
- backgroundImage,
- backgroundFit,
- backgroundPosition,
- enableOverlay,
- overlayColor,
- overlayOpacity,
- } = props;
- return (
- <>
- <BackgroundImage
- backgroundImage={backgroundImage}
- backgroundFit={backgroundFit}
- backgroundPosition={backgroundPosition}
- />
- <Overlay
- enableOverlay={enableOverlay}
- overlayColor={overlayColor}
- overlayOpacity={overlayOpacity}
- />
- </>
- );
-}
-
 export let layoutInputs: InspectorGroup["inputs"] = [
  {
  type: "select",

app/lib/utils.ts

@@ -2,6 +2,7 @@ import { useLocation } from "@remix-run/react";
 import type { FulfillmentStatus } from "@shopify/hydrogen/customer-account-api-types";
 import type { MoneyV2 } from "@shopify/hydrogen/storefront-api-types";
 import type { WeaverseImage } from "@weaverse/hydrogen";
+import type { LinkHTMLAttributes } from "react";
 import type {
  ChildMenuItemFragment,
  MenuFragment,
@@ -347,3 +348,17 @@ export function getImageAspectRatio(
  }
  return aspRt;
 }
+
+export function loadCSS(attrs: LinkHTMLAttributes<HTMLLinkElement>) {
+ return new Promise((resolve, reject) => {
+ let found = document.querySelector(`link[href="${attrs.href}"]`);
+ if (found) {
+ return resolve(true);
+ }
+ let link = document.createElement("link");
+ Object.assign(link, attrs);
+ link.addEventListener("load", () => resolve(true));
+ link.onerror = reject;
+ document.head.appendChild(link);
+ });
+}

app/modules/Drawer.tsx

@@ -1,10 +1,9 @@
-import { Fragment, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
-
-import { Heading, IconClose } from "~/modules";
-import { cn } from "~/lib/cn";
 import clsx from "clsx";
-import { IconCaret } from "~/components/Icons";
+import { Fragment, useState } from "react";
+import { IconCaretLeft } from "~/components/Icons";
+import { cn } from "~/lib/cn";
+import { Heading, IconClose } from "~/modules";
 
 /**
  * Drawer component that opens on user click.
@@ -101,9 +100,8 @@ export function Drawer({
  onClick={onClose}
  data-test="close-cart"
  >
- <IconCaret
+ <IconCaretLeft
  className="w-4 h-4"
- direction="left"
  aria-label="Close panel"
  />
  </button>

app/modules/Input.tsx

@@ -20,18 +20,21 @@ const variants = {
 };
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
- ({
- className = "",
- type,
- variant = "default",
- prefixElement,
- prefix,
- suffix,
- onFocus,
- onBlur,
- onClear,
- ...rest
- }: InputProps) => {
+ (
+ {
+ className = "",
+ type,
+ variant = "default",
+ prefixElement,
+ prefix,
+ suffix,
+ onFocus,
+ onBlur,
+ onClear,
+ ...rest
+ },
+ ref,
+ ) => {
  let [focused, setFocused] = useState(false);
  let commonClasses = clsx(
  "w-full rounded-sm border px-3 py-2.5",
@@ -52,6 +55,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 
  let rawInput = (
  <input
+ ref={ref}
  className={clsx(
  "w-full focus-visible:outline-none !shadow-none focus:ring-0",
  hasChild ? "grow border-none bg-transparent p-0" : commonClasses,

app/modules/menu/MobileMenu.tsx

@@ -1,14 +1,14 @@
-import { Link } from "@remix-run/react";
-import { Drawer, useDrawer } from "../Drawer";
 import { Disclosure } from "@headlessui/react";
+import { Link } from "@remix-run/react";
 import { Image } from "@shopify/hydrogen";
+import { IconCaretDown, IconCaretRight } from "~/components/Icons";
+import { Drawer, useDrawer } from "../Drawer";
 import {
  Nav_Items,
- type SingleMenuProps,
  type ImageItem,
  type MultiMenuProps,
+ type SingleMenuProps,
 } from "./defines";
-import { IconCaret } from "~/components/Icons";
 
 const MenuByType = {
  multi: MultiMenu,
@@ -54,10 +54,11 @@ function MultiMenu(props: MultiMenuProps) {
  <h5 className="flex justify-between py-3 w-full uppercase font-medium">
  {item.title}
  <span className="md:hidden">
- <IconCaret
- className="w-4 h-4"
- direction={open ? "down" : "right"}
- />
+ {open ? (
+ <IconCaretDown className="w-4 h-4" />
+ ) : (
+ <IconCaretRight className="w-4 h-4" />
+ )}
  </span>
  </h5>
  </Disclosure.Button>
@@ -101,8 +102,7 @@ function MultiMenu(props: MultiMenuProps) {
  onClick={openMenu}
  >
  <span className="uppercase font-medium">{title}</span>{" "}
- <IconCaret className="w-4 h-4" />
-
+ <IconCaretRight className="w-4 h-4" />
  </div>
  {content}
  </div>
@@ -134,7 +134,11 @@ function ImageMenu({
  {imageItems.map((item, id) => (
  <Link to={item.to} prefetch="intent" key={id}>
  <div className="w-full aspect-square relative">
- <Image data={item.data} className="w-full h-full object-cover" sizes="auto"/>
+ <Image
+ data={item.data}
+ className="w-full h-full object-cover"
+ sizes="auto"
+ />
  <div className="absolute w-full top-1/2 left-0 text-center -translate-y-1/2 text-white font-medium pointer-events-none">
  {item.title}
  </div>

app/modules/product-form/product-media.tsx

@@ -1,8 +1,7 @@
 import { Image } from "@shopify/hydrogen";
 import clsx from "clsx";
-import { useKeenSlider } from "keen-slider/react.es";
+import { useKeenSlider } from "keen-slider/react";
 import { useEffect, useState } from "react";
-
 import type { MediaFragment } from "storefrontapi.generated";
 
 interface ProductMediaProps {

app/sections/columns-with-images/column.tsx

@@ -10,7 +10,9 @@ import { forwardRef } from "react";
 import type { ButtonProps } from "~/components/Button";
 import Button, { buttonContentInputs } from "~/components/Button";
 
-interface ColumnWithImageItemProps extends ButtonProps, HydrogenComponentProps {
+interface ColumnWithImageItemProps
+ extends Pick<ButtonProps, "variant" | "text" | "link" | "openInNewTab">,
+ HydrogenComponentProps {
  imageSrc: WeaverseImage;
  heading: string;
  content: string;
@@ -134,6 +136,6 @@ export let schema: HydrogenComponentSchema = {
  },
  ],
  presets: {
- imageSrc: IMAGES_PLACEHOLDERS.image,
+ imageSrc: IMAGES_PLACEHOLDERS.product_1,
  },
 };