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 Aug 15, 2024
2 parents 7ccd7ef + b38b3c3 commit 2d8e5e2
Show file tree
Hide file tree
Showing 33 changed files with 1,364 additions and 1,104 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# @weaverse/pilot

## 2.8.1

### Patch Changes

- Updated dependencies
- @weaverse/hydrogen@3.4.1

## 2.7.8

### Patch Changes
Expand Down
10 changes: 3 additions & 7 deletions app/components/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ let variants = cva(
"border-[var(--color-button-primary-bg)]",
"hover:bg-[var(--color-button-primary-text)]",
"hover:text-[var(--color-button-primary-bg)]",
"hover:border-[var(--color-button-primary-text)]",
"hover:border-[var(--color-button-primary-bg)]",
],
secondary: [
"border px-4 py-3",
Expand All @@ -45,7 +45,7 @@ let variants = cva(
"bg-transparent",
"border-[var(--color-button-outline-text-and-border)]",
"hover:bg-[var(--color-button-outline-text-and-border)]",
"hover:text-[var(--color-text)]",
"hover:text-background",
"hover:border-[var(--color-button-outline-text-and-border)]",
],
custom: [
Expand All @@ -57,11 +57,7 @@ let variants = cva(
"hover:text-[var(--color-button-text-hover)]",
"hover:border-[var(--color-button-border-hover)]",
],
link: [
"bg-transparent py-2 border-b",
"text-[var(--color-text)]",
"border-b-[var(--color-text)]",
],
link: ["bg-transparent py-2 border-b", "text-body", "border-b-body"],
},
},
defaultVariants: {
Expand Down
30 changes: 24 additions & 6 deletions app/components/Marquee.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,35 +10,51 @@ interface MarqueeProps {
children: React.ReactNode;
gap?: number;
speed?: number;
rollAsNeeded?: boolean;
}
const ANIMATION_SPEED = 100;
export function Marquee({
children,
gap = 0,
speed = ANIMATION_SPEED,
rollAsNeeded,
}: MarqueeProps) {
const contentRef = useRef<HTMLDivElement>(null);
const [contentWidth, setContentWidth] = useState(0);
const animationTime = Math.floor(contentWidth / speed);
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
useEffect(() => {
if (contentRef.current && !contentWidth) {
if (contentRef.current) {
const { width } = contentRef.current.getBoundingClientRect();
setContentWidth(width);
if (rollAsNeeded) {
if (width < window.innerWidth) {
setContentWidth(0);
} else {
setContentWidth(width);
}
} else {
setContentWidth(width);
}
}
}, []);
const maxAnimationTime = 100000; // 100 seconds - slowest speed 0% - 0 speed
const minAnimationTime = 1000; // 1 second - fastest speed 100% - 100 speed
const animationTime =
((100 - speed) * (maxAnimationTime - minAnimationTime)) / 100 +
minAnimationTime;
return (
<div
className="flex items-center"
className="flex items-center w-full"
style={
{
"--animation-speed": `${animationTime}s`,
"--animation-speed": `${animationTime}ms`,
"--gap": `${gap}px`,
} as CSSProperties
}
>
{contentWidth === 0 ? (
<div ref={contentRef}>{children}</div>
<div ref={contentRef} className="mx-auto">
{children}
</div>
) : (
<OneView contentWidth={contentWidth} gap={gap}>
{children}
Expand All @@ -64,6 +80,8 @@ function OneView({
// if it is, set the contentRepeat to the number of times the text can fit on the screen
const repeat = Math.ceil(window.innerWidth / (contentWidth + gap));
setContentRepeat(repeat);
} else {
// setContentRepeat(3);
}
}, [contentWidth, gap]);
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
Expand Down
50 changes: 50 additions & 0 deletions app/components/Tooltip.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import type {
TooltipContentProps,
TooltipProps,
TooltipTriggerProps,
} from "@radix-ui/react-tooltip";
import {
Arrow,
Content,
Portal,
Provider,
Root,
Trigger,
} from "@radix-ui/react-tooltip";
import { forwardRef } from "react";
import { cn } from "~/lib/cn";

export let TooltipProvider = Provider;
export let Tooltip = ({ delayDuration = 100, ...rest }: TooltipProps) => (
<Root delayDuration={delayDuration} {...rest} />
);

export let TooltipTrigger = ({
asChild = true,
...rest
}: TooltipTriggerProps) => <Trigger asChild={asChild} {...rest} />;

export let TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(
({ children, className, sideOffset = 4, ...rest }, ref) => {
return (
<Content
ref={ref}
className={cn(
"animate-slideDownAndFade",
"z-50 px-4 rounded py-1 shadow-sm text-background bg-body opacity-0",
className,
)}
align="center"
side="top"
sideOffset={sideOffset}
collisionPadding={8}
{...rest}
>
<Arrow asChild>
<span className="border-x-6 border-t-6 border-x-transparent border-t-body" />
</Arrow>
{children}
</Content>
);
},
);
6 changes: 3 additions & 3 deletions app/components/predictive-search/PredictiveSearchResults.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ export function PredictiveSearchResults() {
);
}
return (
<div className="absolute left-1/2 top-20 z-10 flex w-fit -translate-x-1/2 items-center justify-center">
<div className="grid w-screen min-w-[430px] max-w-[720px] grid-cols-1 gap-6 border bg-white p-6 lg:grid-cols-[1fr_2fr] max-h-[80vh] overflow-y-auto">
<div className="absolute left-1/2 top-20 z-10 flex w-fit -translate-x-1/2 items-center justify-center shadow-2xl">
<div className="grid w-screen min-w-[430px] max-w-[720px] grid-cols-1 gap-6 bg-white p-6 lg:grid-cols-[1fr_2fr] max-h-[80vh] overflow-y-auto">
<div className="space-y-8">
<div className="flex flex-col gap-4 divide-y divide-line">
<PredictiveSearchResult
Expand Down Expand Up @@ -82,7 +82,7 @@ function NoPredictiveSearchResults({
return null;
}
return (
<p className="w-[640px] border bg-background p-6">
<p className="w-[640px] shadow-2xl bg-background p-6">
No results found for <q>{searchTerm.current}</q>
</p>
);
Expand Down
23 changes: 23 additions & 0 deletions app/hooks/useHeaderStyles.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { useThemeSettings } from "@weaverse/hydrogen";
import { useCallback, useEffect } from "react";

export function useHeaderStyles(show: boolean) {
let { stickyTopbar, topbarHeight } = useThemeSettings();
const updateStyles = useCallback(() => {
let y = window.scrollY;
let top = stickyTopbar ? topbarHeight : Math.max(topbarHeight - y, 0);
document.body.style.setProperty("--announcement-bar-height", `${top}px`);
}, [stickyTopbar, topbarHeight]);

useEffect(() => {
if (!show) {
if (document.body.style.getPropertyValue("--announcement-bar-height")) {
document.body.style.removeProperty("--announcement-bar-height");
}
return;
}
updateStyles();
window.addEventListener("scroll", updateStyles);
return () => window.removeEventListener("scroll", updateStyles);
}, [updateStyles, show]);
}
12 changes: 4 additions & 8 deletions app/modules/Drawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,7 @@ export function Drawer({

return (
<Transition appear show={open} as={Fragment}>
<Dialog
as="div"
className={clsx("relative", openFrom === "top" ? "z-10" : "z-50")}
onClose={onClose}
>
<Dialog as="div" className="relative z-50" onClose={onClose}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
Expand All @@ -69,13 +65,13 @@ export function Drawer({
</Transition.Child>

<div className="fixed inset-0 top-nav">
<div className="absolute inset-0 top-nav overflow-hidden">
<div className="absolute inset-0 overflow-hidden">
<div
className={`fixed inset-y-0 flex ${
openFrom === "right"
? "right-0 max-w-full"
: openFrom === "top"
? "top-nav overflow-hidden w-screen"
? "top-full-nav overflow-hidden w-screen"
: ""
}`}
>
Expand All @@ -90,7 +86,7 @@ export function Drawer({
>
<DialogPanel
className={cn(
"text-left align-middle transition-all transform shadow-xl bg-background",
"text-left align-middle transition-transform transform shadow-xl bg-background",
openFrom === "top"
? "h-fit w-screen"
: "max-w-lg h-screen-dynamic",
Expand Down
10 changes: 5 additions & 5 deletions app/modules/GenericError.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { Button } from "./Button";
import Button from "~/components/Button";
import { PageHeader, Text } from "./Text";

export function GenericError({
error,
}: {
error?: { message: string; stack?: string };
}) {
const heading = `Something’s wrong here.`;
let description = `We found an error while loading this page.`;
let heading = "Something’s wrong here.";
let description = "We found an error while loading this page.";

// TODO hide error in prod?
if (error) {
Expand All @@ -18,7 +18,7 @@ export function GenericError({

return (
<>
<PageHeader heading={heading}>
<PageHeader heading={heading} as="div">
<Text width="narrow" as="p">
{description}
</Text>
Expand All @@ -37,7 +37,7 @@ export function GenericError({
}}
/>
)}
<Button width="auto" variant="secondary" to={"/"}>
<Button variant="outline" link="/">
Take me to the home page
</Button>
</PageHeader>
Expand Down
2 changes: 1 addition & 1 deletion app/modules/OrderCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export function OrderCard({ order }: { order: OrderCardFragment }) {
<Image
width={168}
height={168}
className="w-full fadeIn cover"
className="w-full opacity-0 animate-fadeIn cover"
alt={lineItems[0].image?.altText ?? "Order image"}
src={lineItems[0].image.url}
/>
Expand Down
2 changes: 1 addition & 1 deletion app/modules/ProductCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export function ProductCard({
prefetch="intent"
>
<Image
className="object-cover w-full fadeIn"
className="object-cover w-full opacity-0 animate-fadeIn"
sizes="(min-width: 64em) 25vw, (min-width: 48em) 30vw, 45vw"
aspectRatio="4/5"
data={image}
Expand Down
2 changes: 1 addition & 1 deletion app/modules/ProductGallery.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export function ProductGallery({
: "(min-width: 48em) 30vw, 90vw"
}
className={clsx(
"object-cover w-full h-full aspect-square fadeIn",
"object-cover w-full h-full aspect-square opacity-0 animate-fadeIn",
i === 0 ? "vt-product-image" : "",
)}
/>
Expand Down
5 changes: 3 additions & 2 deletions app/modules/Text.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ export function Section({
return (
<Component {...props} className={styles}>
{heading && (
<Heading size="lead" className={padding === "y" ? paddings["x"] : ""}>
<Heading size="lead" className={padding === "y" ? paddings.x : ""}>
{heading}
</Heading>
)}
Expand All @@ -161,6 +161,7 @@ export function PageHeader({
className,
heading,
variant = "default",
as,
...props
}: {
children?: React.ReactNode;
Expand All @@ -182,7 +183,7 @@ export function PageHeader({
return (
<header {...props} className={styles}>
{heading && (
<Heading as="h1" width="narrow" size="heading" className="inline-block">
<Heading as={as} width="narrow" size="heading" className="inline-block">
{heading}
</Heading>
)}
Expand Down
Loading

0 comments on commit 2d8e5e2

Please sign in to comment.