Skip to content

Commit 7d44388

Browse files
authored
Merge branch 'Weaverse:main' into main
2 parents 2f46ccd + aa4f9f0 commit 7d44388

File tree

72 files changed

+750
-548
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+750
-548
lines changed

.env.example

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,4 @@ WEAVERSE_PROJECT_ID=clptu3l4p001sxfsn1u9jzqnm
2222

2323
# Custom metafields & metaobjects
2424
METAOBJECT_COLORS_TYPE="shopify--color-pattern"
25-
METAOBJECT_COLOR_NAME_KEY="label"
26-
METAOBJECT_COLOR_VALUE_KEY="color"
2725
CUSTOM_COLLECTION_BANNER_METAFIELD="custom.collection_banner"

.graphqlrc.yml

Lines changed: 0 additions & 12 deletions
This file was deleted.

app/components/cart/cart.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import type {
1515
import clsx from "clsx";
1616
import { useRef } from "react";
1717
import useScroll from "react-use/esm/useScroll";
18-
import type { CartApiQueryFragment } from "storefrontapi.generated";
18+
import type { CartApiQueryFragment } from "storefront-api.generated";
1919
import { Button } from "~/components/button";
2020
import { Link } from "~/components/link";
2121
import { getImageAspectRatio } from "~/utils/image";
@@ -59,7 +59,7 @@ function CartDetails({
5959
"pb-12 w-full max-w-page mx-auto",
6060
"grid md:grid-cols-2 lg:grid-cols-3 md:items-start",
6161
"gap-8 md:gap-8 lg:gap-12",
62-
]
62+
],
6363
)}
6464
>
6565
<CartLines lines={cart?.lines?.nodes} layout={layout} />
@@ -166,7 +166,7 @@ function CartLines({
166166
className={clsx(
167167
"grid",
168168
layout === "page" && "gap-9",
169-
layout === "drawer" && "gap-5"
169+
layout === "drawer" && "gap-5",
170170
)}
171171
>
172172
{currentLines.map((line) => (
@@ -216,7 +216,7 @@ function CartSummary({
216216
className={clsx(
217217
layout === "drawer" && "grid gap-4 border-t border-line-subtle pt-4",
218218
layout === "page" &&
219-
"sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 rounded w-full"
219+
"sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 rounded w-full",
220220
)}
221221
>
222222
<h2 id="summary-heading" className="sr-only">
@@ -308,7 +308,7 @@ function CartLineItem({ line, layout }: { line: CartLine; layout: Layouts }) {
308308
<div
309309
className={clsx(
310310
"flex items-center gap-2",
311-
layout === "drawer" && "justify-between"
311+
layout === "drawer" && "justify-between",
312312
)}
313313
>
314314
<CartLineQuantityAdjust line={line} />
@@ -336,7 +336,7 @@ function ItemRemoveButton({
336336
<button
337337
className={clsx(
338338
"flex items-center justify-center w-8 h-8 border-none",
339-
className
339+
className,
340340
)}
341341
type="submit"
342342
>
@@ -480,7 +480,7 @@ function CartEmpty({
480480
layout === "page" && [
481481
hidden ? "" : "grid",
482482
"pb-12 w-full md:items-start gap-4 md:gap-8 lg:gap-12",
483-
]
483+
],
484484
)}
485485
hidden={hidden}
486486
>

app/components/account/account-details.tsx renamed to app/components/customer/account-details.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { CustomerDetailsFragment } from "customer-accountapi.generated";
1+
import type { CustomerDetailsFragment } from "customer-account-api.generated";
22
import { Link } from "~/components/link";
33

44
export function AccountDetails({

app/components/account/address-book.tsx renamed to app/components/customer/address-book.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Form } from "@remix-run/react";
22
import type { CustomerAddress } from "@shopify/hydrogen/customer-account-api-types";
3-
import type { CustomerDetailsFragment } from "customer-accountapi.generated";
3+
import type { CustomerDetailsFragment } from "customer-account-api.generated";
44
import { Link } from "~/components/link";
55
import { Button } from "~/components/button";
66

app/components/account/orders.tsx renamed to app/components/customer/orders.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Image, flattenConnection } from "@shopify/hydrogen";
22
import type { FulfillmentStatus } from "@shopify/hydrogen/customer-account-api-types";
3-
import type { OrderCardFragment } from "customer-accountapi.generated";
3+
import type { OrderCardFragment } from "customer-account-api.generated";
44
import Link from "~/components/link";
55

66
export const ORDER_STATUS: Record<FulfillmentStatus, string> = {

app/components/layout/footer.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ export function Footer() {
124124
<Image
125125
data={footerLogoData}
126126
sizes="auto"
127+
width={500}
127128
className="w-full h-full object-contain object-left"
128129
/>
129130
</div>

app/components/layout/header.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,7 @@ function useIsHomeCheck() {
3838
let { pathname } = useLocation();
3939
let rootData = useRouteLoaderData<RootLoader>("root");
4040
let selectedLocale = rootData?.selectedLocale ?? DEFAULT_LOCALE;
41-
let strippedPathname = pathname.replace(selectedLocale.pathPrefix, "");
42-
return strippedPathname === "/";
41+
return pathname.replace(selectedLocale.pathPrefix, "") === "/";
4342
}
4443

4544
export function Header() {

app/components/logo.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,9 @@ export function Logo() {
2626
className={clsx(
2727
"main-logo",
2828
"max-w-full h-full object-contain mx-auto",
29-
"transition-opacity duration-300 ease-in group-hover/header:opacity-100",
29+
"transition-opacity duration-300 ease-in group-hover/header:opacity-100"
3030
)}
31+
width={500}
3132
style={{ width: "auto" }}
3233
/>
3334
{transparentLogoData && (
@@ -37,8 +38,9 @@ export function Logo() {
3738
className={clsx(
3839
"transparent-logo",
3940
"absolute top-0 left-0 max-w-full h-full object-contain mx-auto",
40-
"transition-opacity duration-300 ease-in group-hover/header:opacity-0",
41+
"transition-opacity duration-300 ease-in group-hover/header:opacity-0"
4142
)}
43+
width={500}
4244
style={{ width: "auto" }}
4345
/>
4446
)}

app/components/product/product-card.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type {
44
ProductVariant,
55
} from "@shopify/hydrogen/storefront-api-types";
66
import clsx from "clsx";
7-
import type { ProductCardFragment } from "storefrontapi.generated";
7+
import type { ProductCardFragment } from "storefront-api.generated";
88
import { Link } from "~/components/link";
99
import { NavLink } from "~/components/nav-link";
1010
import { ProductTag } from "~/components/product-tag";

app/components/product/product-media.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Image } from "@shopify/hydrogen";
22
import { cva, type VariantProps } from "class-variance-authority";
33
import clsx from "clsx";
44
import { useEffect, useState } from "react";
5-
import type { MediaFragment } from "storefrontapi.generated";
5+
import type { MediaFragment } from "storefront-api.generated";
66
import { FreeMode, Pagination, Thumbs } from "swiper/modules";
77
import { Swiper, type SwiperClass, SwiperSlide } from "swiper/react";
88
import { getImageAspectRatio } from "~/utils/image";
@@ -23,7 +23,7 @@ let variants = cva(
2323
mix: "2xl:grid-cols-2",
2424
},
2525
},
26-
}
26+
},
2727
);
2828

2929
export interface ProductMediaProps extends VariantProps<typeof variants> {
@@ -46,7 +46,7 @@ export function ProductMedia(props: ProductMediaProps) {
4646
let media = _media.filter((med) => med.__typename === "MediaImage");
4747
let [thumbsSwiper, setThumbsSwiper] = useState<SwiperClass | null>(null);
4848
const [swiperInstance, setSwiperInstance] = useState<SwiperClass | null>(
49-
null
49+
null,
5050
);
5151
let [activeIndex, setActiveIndex] = useState(0);
5252

@@ -79,7 +79,7 @@ export function ProductMedia(props: ProductMediaProps) {
7979
aspectRatio={getImageAspectRatio(image, imageAspectRatio)}
8080
className={clsx(
8181
"object-cover opacity-0 animate-fade-in w-[80vw] max-w-none lg:w-full lg:h-full",
82-
gridSize === "mix" && idx % 3 === 0 && "lg:col-span-2"
82+
gridSize === "mix" && idx % 3 === 0 && "lg:col-span-2",
8383
)}
8484
sizes="auto"
8585
/>
@@ -109,7 +109,7 @@ export function ProductMedia(props: ProductMediaProps) {
109109
key={med.id}
110110
className={clsx(
111111
"!h-[100px] p-1 border transition-colors aspect-[3/4] cursor-pointer",
112-
activeIndex === i ? "border-black" : "border-transparent"
112+
activeIndex === i ? "border-black" : "border-transparent",
113113
)}
114114
>
115115
<Image

app/components/product/quick-shop.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import type {
77
ProductQuery,
88
ProductVariantFragmentFragment,
99
VariantsQuery,
10-
} from "storefrontapi.generated";
10+
} from "storefront-api.generated";
1111
import { Button } from "~/components/button";
1212
import { Modal, ModalContent, ModalTrigger } from "~/components/modal";
1313
import { AddToCartButton } from "~/components/product/add-to-cart-button";
@@ -29,7 +29,7 @@ export function QuickShop({ data }: { data: QuickViewData }) {
2929
let { product, variants: _variants, storeDomain } = data || {};
3030
let firstVariant = product?.variants?.nodes?.[0];
3131
let [selectedVariant, setSelectedVariant] = useState(
32-
firstVariant as ProductVariantFragmentFragment
32+
firstVariant as ProductVariantFragmentFragment,
3333
);
3434
let [quantity, setQuantity] = useState<number>(1);
3535
let {
@@ -58,8 +58,8 @@ export function QuickShop({ data }: { data: QuickViewData }) {
5858
let atcText = selectedVariant?.availableForSale
5959
? addToCartText
6060
: selectedVariant?.quantityAvailable === -1
61-
? unavailableText
62-
: soldOutText;
61+
? unavailableText
62+
: soldOutText;
6363
return (
6464
<div className="bg-background">
6565
<div className="grid grid-cols-1 items-start gap-5 lg:grid-cols-2">

app/components/product/variant-option.tsx

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,16 @@ import { useRouteLoaderData } from "@remix-run/react";
22
import { Image, type VariantOptionValue } from "@shopify/hydrogen";
33
import {
44
type ColorSwatch,
5+
type ImageSwatch,
56
type SwatchesConfigs,
67
useThemeSettings,
78
} from "@weaverse/hydrogen";
89
import { cva } from "class-variance-authority";
910
import clsx from "clsx";
10-
import type { ProductVariantFragmentFragment } from "storefrontapi.generated";
11+
import type { ProductVariantFragmentFragment } from "storefront-api.generated";
1112
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/tooltip";
12-
import { cn } from "~/utils/cn";
1313
import type { RootLoader } from "~/root";
14+
import { cn } from "~/utils/cn";
1415

1516
export let variants = cva(
1617
"border border-line hover:border-body cursor-pointer",
@@ -45,7 +46,7 @@ export let variants = cva(
4546
false: "",
4647
},
4748
},
48-
}
49+
},
4950
);
5051

5152
interface VariantOptionProps {
@@ -59,13 +60,16 @@ interface VariantOptionProps {
5960

6061
export function VariantOption(props: VariantOptionProps) {
6162
let { name, values, selectedOptionValue, onSelectOptionValue } = props;
62-
let { colorsConfigs } = useRouteLoaderData<RootLoader>("root");
63+
let { swatchesConfigs } = useRouteLoaderData<RootLoader>("root");
6364
let themeSettings = useThemeSettings();
6465
let productSwatches: SwatchesConfigs = themeSettings.productSwatches;
6566
let { options, swatches } = productSwatches;
66-
let colorsSwatches: ColorSwatch[] = colorsConfigs?.length
67-
? colorsConfigs
67+
let colorsSwatches: ColorSwatch[] = swatchesConfigs?.colors?.length
68+
? swatchesConfigs.colors
6869
: swatches.colors;
70+
let imagesSwatches: ImageSwatch[] = swatchesConfigs?.images?.length
71+
? swatchesConfigs.images
72+
: swatches.images;
6973
let optionConf = options.find((opt) => {
7074
return opt.name.toLowerCase() === name.toLowerCase();
7175
});
@@ -97,7 +101,7 @@ export function VariantOption(props: VariantOptionProps) {
97101
selected: selectedOptionValue === value,
98102
disabled: !isAvailable,
99103
}),
100-
!isAvailable && "bg-neutral-100"
104+
!isAvailable && "bg-neutral-100",
101105
)}
102106
onClick={() => onSelectOptionValue(value)}
103107
>
@@ -122,14 +126,14 @@ export function VariantOption(props: VariantOptionProps) {
122126
shape,
123127
selected: selectedOptionValue === value,
124128
disabled: !isAvailable,
125-
})
129+
}),
126130
)}
127131
onClick={() => onSelectOptionValue(value)}
128132
>
129133
<span
130134
className={cn(
131135
"w-full h-full inline-block border-none hover:border-none",
132-
variants({ shape })
136+
variants({ shape }),
133137
)}
134138
style={{ backgroundColor: swatchColor?.value || value }}
135139
/>
@@ -144,8 +148,8 @@ export function VariantOption(props: VariantOptionProps) {
144148
{type === "custom-image" && (
145149
<div className="flex flex-wrap gap-3">
146150
{values.map(({ value, image, isAvailable }) => {
147-
let swatchImage = swatches.images.find(
148-
(i) => i.name.toLowerCase() === value.toLowerCase()
151+
let swatchImage = imagesSwatches.find(
152+
(i) => i.name.toLowerCase() === value.toLowerCase(),
149153
);
150154
let imageToRender = swatchImage?.value || image;
151155
let aspectRatio = "1/1";
@@ -161,7 +165,7 @@ export function VariantOption(props: VariantOptionProps) {
161165
shape,
162166
selected: selectedOptionValue === value,
163167
disabled: !isAvailable,
164-
})
168+
}),
165169
)}
166170
onClick={() => onSelectOptionValue(value)}
167171
style={{ aspectRatio }}
@@ -178,15 +182,15 @@ export function VariantOption(props: VariantOptionProps) {
178182
}
179183
className={cn(
180184
"w-full h-full object-cover object-center border-none hover:border-none",
181-
variants({ shape })
185+
variants({ shape }),
182186
)}
183187
sizes="auto"
184188
/>
185189
) : (
186190
<span
187191
className={cn(
188192
"w-full h-full inline-block",
189-
variants({ shape })
193+
variants({ shape }),
190194
)}
191195
style={{ backgroundColor: value }}
192196
/>
@@ -214,7 +218,7 @@ export function VariantOption(props: VariantOptionProps) {
214218
selected: selectedOptionValue === value,
215219
disabled: !isAvailable,
216220
}),
217-
!isAvailable && "opacity-75"
221+
!isAvailable && "opacity-75",
218222
)}
219223
onClick={() => onSelectOptionValue(value)}
220224
style={{ aspectRatio }}
@@ -225,7 +229,7 @@ export function VariantOption(props: VariantOptionProps) {
225229
sizes="auto"
226230
className={cn(
227231
"w-full h-full object-cover object-center",
228-
variants({ shape })
232+
variants({ shape }),
229233
)}
230234
/>
231235
) : (
@@ -260,7 +264,7 @@ export function VariantOption(props: VariantOptionProps) {
260264
className={cn(
261265
"py-0.5 cursor-pointer border-b border-line hover:border-body",
262266
selectedOptionValue === value.value && "border-body",
263-
!value.isAvailable && "opacity-50"
267+
!value.isAvailable && "opacity-50",
264268
)}
265269
onClick={() => onSelectOptionValue(value.value)}
266270
>

app/components/product/variants.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { VariantSelector } from "@shopify/hydrogen";
22
import type {
33
ProductQuery,
44
ProductVariantFragmentFragment,
5-
} from "storefrontapi.generated";
5+
} from "storefront-api.generated";
66
import { VariantOption } from "./variant-option";
77

88
interface ProductVariantsProps {
@@ -98,7 +98,7 @@ export function ProductVariants(props: ProductVariantsProps) {
9898
let handleSelectOptionValue = (value: string) =>
9999
handleSelectOption(optionName, value);
100100
let selectedValue = selectedOptions?.find(
101-
(opt) => opt.name === optionName
101+
(opt) => opt.name === optionName,
102102
)?.value;
103103

104104
return (

0 commit comments

Comments
 (0)