Skip to content

Commit

Permalink
Merge branch 'Weaverse:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
hta218 authored Oct 14, 2024
2 parents df67438 + 3b64b20 commit 17b8af8
Show file tree
Hide file tree
Showing 31 changed files with 1,875 additions and 2,944 deletions.
2 changes: 1 addition & 1 deletion app/components/marquee.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function Marquee({
}
}
}, []);
const maxAnimationTime = 100000; // 100 seconds - slowest speed 0% - 0 speed
const maxAnimationTime = 400000; // 100 seconds - slowest speed 0% - 0 speed
const minAnimationTime = 1000; // 1 second - fastest speed 100% - 100 speed
const animationTime =
((100 - speed) * (maxAnimationTime - minAnimationTime)) / 100 +
Expand Down
71 changes: 71 additions & 0 deletions app/components/modal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { X } from "@phosphor-icons/react";
import {
Close,
Content,
type DialogCloseProps,
type DialogContentProps,
type DialogProps,
type DialogTriggerProps,
Overlay,
Portal,
Root,
Trigger,
} from "@radix-ui/react-dialog";
import type React from "react";
import { forwardRef } from "react";
import { cn } from "~/lib/cn";

export let Modal: React.FC<DialogProps> = Root;

export let ModalTrigger = forwardRef<HTMLButtonElement, DialogTriggerProps>(
({ asChild = true, ...rest }, ref) => {
return <Trigger asChild={asChild} {...rest} ref={ref} />;
}
);

interface ModalContentProps extends DialogContentProps {}

export let ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
({ children, className, ...rest }, ref) => {
return (
<Portal>
<Overlay className="fixed inset-0 z-10" />
<Content
{...rest}
ref={ref}
className={cn(
"data-[state='open']:animate-slide-down-and-fade",
"fixed inset-0 z-10 flex items-center overflow-x-hidden bg-gray-900/50 px-4"
)}
>
<div
style={{ maxHeight: "90vh" }}
className={cn(
"animate-slide-down-and-fade relative overflow-hidden",
"w-full mx-auto h-auto max-w-screen-xl"
)}
>
<ModalClose />
<div className={cn("bg-white shadow p-6", className)}>
{children}
</div>
</div>
</Content>
</Portal>
);
}
);

export let ModalClose = forwardRef<HTMLButtonElement, DialogCloseProps>(
({ asChild, children, ...rest }, ref) => {
return (
<Close asChild {...rest} ref={ref}>
{asChild ? (
children
) : (
<X className="absolute right-3 top-3 cursor-pointer" size={20} />
)}
</Close>
);
}
);
13 changes: 13 additions & 0 deletions app/components/product-tag.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import clsx from "clsx";

export function ProductTag({
children,
className,
}: {
children: React.ReactNode;
className?: string;
}) {
return (
<span className={clsx(["py-1.5 px-2 text-sm", className])}>{children}</span>
);
}
2 changes: 1 addition & 1 deletion app/components/skeleton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function Skeleton({
{...props}
width={width}
height={height}
className={clsx("rounded bg-body/10", className)}
className={clsx("rounded animate-pulse bg-body/10", className)}
/>
);
}
32 changes: 32 additions & 0 deletions app/components/variant-prices.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Money } from "@shopify/hydrogen";
import { CompareAtPrice } from "./compare-at-price";
import { isDiscounted } from "~/lib/utils";
import type {
MoneyV2,
ProductVariant,
} from "@shopify/hydrogen/storefront-api-types";
import clsx from "clsx";

export function VariantPrices({
variant,
showCompareAtPrice = true,
className,
}: {
variant: ProductVariant;
showCompareAtPrice?: boolean;
className?: string;
}) {
if (variant) {
let { price, compareAtPrice } = variant;
return (
<div className={clsx("flex gap-2", className)}>
<Money withoutTrailingZeros data={price} />
{showCompareAtPrice &&
isDiscounted(price as MoneyV2, compareAtPrice as MoneyV2) && (
<CompareAtPrice data={compareAtPrice as MoneyV2} />
)}
</div>
);
}
return null;
}
6 changes: 2 additions & 4 deletions app/modules/add-to-cart-button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,7 @@ export function AddToCartButton({
return (
<CartForm
route="/cart"
inputs={{
lines,
}}
inputs={{ lines }}
action={CartForm.ACTIONS.LinesAdd}
>
{(fetcher: FetcherWithComponents<any>) => {
Expand Down Expand Up @@ -83,7 +81,7 @@ function AddToCartAnalytics({
try {
if (cartInputs.inputs.analytics) {
const dataInForm: unknown = JSON.parse(
String(cartInputs.inputs.analytics),
String(cartInputs.inputs.analytics)
);
Object.assign(cartData, dataInForm);
}
Expand Down
4 changes: 2 additions & 2 deletions app/modules/cart-best-sellers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export function CartBestSellers({
.map(([key, val]) => (val ? `${key}=${val}` : null))
.filter(Boolean)
.join("&"),
[count, sortKey, query, reverse],
[count, sortKey, query, reverse]
);
let productsApiPath = usePrefixPathWithLocale(`/api/products?${queryString}`);

Expand Down Expand Up @@ -106,7 +106,7 @@ function CartBestSellersContent({
return (
<>
{products.map((product) => (
<ProductCard product={product} key={product.id} quickAdd />
<ProductCard product={product} key={product.id} />
))}
</>
);
Expand Down
96 changes: 47 additions & 49 deletions app/modules/drawer-filter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ import {
DisclosureButton,
DisclosurePanel,
Menu,
MenuButton,
MenuItem,
MenuItems,
} from "@headlessui/react";
import { CaretDown, Sliders } from "@phosphor-icons/react";
import {
Link,
useLocation,
Expand All @@ -17,22 +21,15 @@ import type {
import clsx from "clsx";
import type { SyntheticEvent } from "react";
import { useState } from "react";
import Button from "~/components/button";
import { Checkbox } from "~/components/checkbox";
import { IconCaretDown, IconCaretRight } from "~/components/icons";
import { FILTER_URL_PREFIX } from "~/lib/const";
import type { AppliedFilter, SortParam } from "~/lib/filter";
import { getAppliedFilterLink, getFilterLink, getSortLink } from "~/lib/filter";
import { Input } from "./input";
import { Button } from "./button";
import { Drawer, useDrawer } from "./drawer";
import {
IconCaret,
IconFourGrid,
IconOneGrid,
IconSliders,
IconThreeGrid,
IconTwoGrid,
} from "./icon";
import { IconFourGrid, IconOneGrid, IconThreeGrid, IconTwoGrid } from "./icon";
import { Input } from "./input";

type DrawerFilterProps = {
productNumber?: number;
Expand All @@ -54,59 +51,59 @@ export function DrawerFilter({
}: DrawerFilterProps) {
const { openDrawer, isOpen, closeDrawer } = useDrawer();
return (
<div className="border-y border-line py-4 ">
<div className="gap-4 md:gap-8 px-6 md:px-8 lg:px-12 flex w-full items-center justify-between">
<div className="flex flex-1">
<div
<div className="border-y border-line/30 py-4">
<div className="gap-4 md:gap-8 flex w-full items-center justify-between">
<div className="flex gap-1 flex-1">
<button
type="button"
className={clsx(
"border cursor-pointer hidden lg:block",
numberInRow === 4 && " border-[#88847F]",
numberInRow === 4 && " bg-gray-200"
)}
onClick={() => onLayoutChange(4)}
role="button"
>
<IconFourGrid className="w-12 h-12 text-[#88847F]" />
</div>
<div
<IconFourGrid className="w-10 h-10" />
</button>
<button
type="button"
className={clsx(
"border cursor-pointer hidden lg:block",
numberInRow === 3 && " border-[#88847F]",
numberInRow === 3 && " bg-gray-200"
)}
onClick={() => onLayoutChange(3)}
role="button"
>
<IconThreeGrid className="w-12 h-12 text-[#88847F]" />
</div>
<div
<IconThreeGrid className="w-10 h-10" />
</button>
<button
type="button"
className={clsx(
"border cursor-pointer lg:hidden",
numberInRow === 4 && "border-[#88847F]",
numberInRow === 4 && "bg-gray-200"
)}
onClick={() => onLayoutChange(4)}
role="button"
>
<IconTwoGrid className="w-12 h-12 text-[#88847F]" />
</div>
<div
<IconTwoGrid className="w-10 h-10" />
</button>
<button
type="button"
className={clsx(
"border cursor-pointer lg:hidden",
numberInRow === 3 && "border-[#88847F]",
numberInRow === 3 && "bg-gray-200"
)}
onClick={() => onLayoutChange(3)}
role="button"
>
<IconOneGrid className="w-12 h-12 text-[#88847F]" />
</div>
<IconOneGrid className="w-10 h-10" />
</button>
</div>
<span className="flex-1 text-center">{productNumber} Products</span>
<div className="flex gap-2 flex-1 justify-end">
<SortMenu showSearchSort={showSearchSort} />
<Button
onClick={openDrawer}
variant="secondary"
className="flex items-center gap-1.5 border"
variant="outline"
className="flex items-center gap-1.5 border py-2"
>
<IconSliders />
<Sliders size={18} />
<span>Filter</span>
</Button>
<Drawer
Expand All @@ -116,10 +113,10 @@ export function DrawerFilter({
heading="Filter"
>
<div className="px-5 w-[360px]">
{/* @ts-expect-error */}
<FiltersDrawer
filters={filters}
appliedFilters={appliedFilters}
onLayoutChange={console.log}
/>
</div>
</Drawer>
Expand All @@ -140,7 +137,7 @@ function ListItemFilter({
const [params] = useSearchParams();
const location = useLocation();
let filter = appliedFilters.find(
(filter) => JSON.stringify(filter.filter) === option.input,
(filter) => JSON.stringify(filter.filter) === option.input
);
let [checked, setChecked] = useState(!!filter);

Expand Down Expand Up @@ -349,30 +346,31 @@ export default function SortMenu({

return (
<Menu as="div" className="relative z-10">
<Menu.Button className="flex items-center gap-1.5 rounded border px-4 py-3 h-[50px]">
<span className="font-medium text-sm">Sort by</span>
<IconCaret />
</Menu.Button>
<Menu.Items
<MenuButton className="flex items-center gap-1.5 h-10 border px-4 py-2.5">
<span className="font-medium">Sort by</span>
<CaretDown />
</MenuButton>
<MenuItems
as="nav"
className="absolute right-0 top-14 flex h-fit w-56 flex-col gap-2 rounded border bg-background p-5"
className="absolute right-0 top-12 flex h-fit w-40 flex-col gap-2 border border-line/75 bg-background p-5"
>
{items.map((item) => (
<Menu.Item key={item.label}>
<MenuItem key={item.label}>
{() => (
<Link to={getSortLink(item.key, params, location)}>
<p
className={`block text-base ${
className={clsx(
"block text-base hover:underline underline-offset-4",
activeItem?.key === item.key ? "font-bold" : "font-normal"
}`}
)}
>
{item.label}
</p>
</Link>
)}
</Menu.Item>
</MenuItem>
))}
</Menu.Items>
</MenuItems>
</Menu>
);
}
8 changes: 5 additions & 3 deletions app/modules/header/announcement-bar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function AnnouncementBar() {
function updateStyles() {
document.body.style.setProperty(
"--topbar-height",
`${Math.max(topbarHeight - window.scrollY, 0)}px`,
`${Math.max(topbarHeight - window.scrollY, 0)}px`
);
}

Expand Down Expand Up @@ -47,8 +47,10 @@ export function AnnouncementBar() {
rollAsNeeded={!enableScrolling}
>
<div
className="flex items-center gap-[var(--gap)] whitespace-nowrap [&_p]:flex [&_p]:gap-2 [&_p]:items-center"
dangerouslySetInnerHTML={{ __html: topbarText }}
className="flex items-center gap-[--gap] whitespace-nowrap [&_p]:flex [&_p]:gap-2 [&_p]:items-center"
dangerouslySetInnerHTML={{
__html: new Array(10).fill(topbarText).join(""),
}}
/>
</Marquee>
</div>
Expand Down
Loading

0 comments on commit 17b8af8

Please sign in to comment.