diff --git a/CHANGELOG.md b/CHANGELOG.md index c47997c1..828a8617 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # @weaverse/pilot +## 2.8.1 + +### Patch Changes + +- Updated dependencies + - @weaverse/hydrogen@3.4.1 + ## 2.7.8 ### Patch Changes diff --git a/app/components/Button.tsx b/app/components/Button.tsx index 62ee5488..800ca955 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -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", @@ -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: [ @@ -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: { diff --git a/app/components/Marquee.tsx b/app/components/Marquee.tsx index 605440cb..1a81a4b5 100644 --- a/app/components/Marquee.tsx +++ b/app/components/Marquee.tsx @@ -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(null); const [contentWidth, setContentWidth] = useState(0); - const animationTime = Math.floor(contentWidth / speed); // biome-ignore lint/correctness/useExhaustiveDependencies: 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 (
{contentWidth === 0 ? ( -
{children}
+
+ {children} +
) : ( {children} @@ -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: diff --git a/app/components/Tooltip.tsx b/app/components/Tooltip.tsx new file mode 100644 index 00000000..9e73592a --- /dev/null +++ b/app/components/Tooltip.tsx @@ -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) => ( + +); + +export let TooltipTrigger = ({ + asChild = true, + ...rest +}: TooltipTriggerProps) => ; + +export let TooltipContent = forwardRef( + ({ children, className, sideOffset = 4, ...rest }, ref) => { + return ( + + + + + {children} + + ); + }, +); diff --git a/app/components/predictive-search/PredictiveSearchResults.tsx b/app/components/predictive-search/PredictiveSearchResults.tsx index 33e88e46..6289d608 100644 --- a/app/components/predictive-search/PredictiveSearchResults.tsx +++ b/app/components/predictive-search/PredictiveSearchResults.tsx @@ -32,8 +32,8 @@ export function PredictiveSearchResults() { ); } return ( -
-
+
+
+

No results found for {searchTerm.current}

); diff --git a/app/hooks/useHeaderStyles.tsx b/app/hooks/useHeaderStyles.tsx new file mode 100644 index 00000000..5380499d --- /dev/null +++ b/app/hooks/useHeaderStyles.tsx @@ -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]); +} diff --git a/app/modules/Drawer.tsx b/app/modules/Drawer.tsx index 54ed01cb..53b6c020 100644 --- a/app/modules/Drawer.tsx +++ b/app/modules/Drawer.tsx @@ -51,11 +51,7 @@ export function Drawer({ return ( - +
-
+
@@ -90,7 +86,7 @@ export function Drawer({ > - + {description} @@ -37,7 +37,7 @@ export function GenericError({ }} /> )} - diff --git a/app/modules/OrderCard.tsx b/app/modules/OrderCard.tsx index 7d4abdc3..4f29ca1c 100644 --- a/app/modules/OrderCard.tsx +++ b/app/modules/OrderCard.tsx @@ -22,7 +22,7 @@ export function OrderCard({ order }: { order: OrderCardFragment }) { {lineItems[0].image?.altText diff --git a/app/modules/ProductCard.tsx b/app/modules/ProductCard.tsx index c29f3c1b..07ad657d 100644 --- a/app/modules/ProductCard.tsx +++ b/app/modules/ProductCard.tsx @@ -65,7 +65,7 @@ export function ProductCard({ prefetch="intent" > diff --git a/app/modules/Text.tsx b/app/modules/Text.tsx index 7708a4d7..b5ad047e 100644 --- a/app/modules/Text.tsx +++ b/app/modules/Text.tsx @@ -147,7 +147,7 @@ export function Section({ return ( {heading && ( - + {heading} )} @@ -161,6 +161,7 @@ export function PageHeader({ className, heading, variant = "default", + as, ...props }: { children?: React.ReactNode; @@ -182,7 +183,7 @@ export function PageHeader({ return (
{heading && ( - + {heading} )} diff --git a/app/modules/header/AnnouncementBar.tsx b/app/modules/header/AnnouncementBar.tsx index df964b65..8e54d92c 100644 --- a/app/modules/header/AnnouncementBar.tsx +++ b/app/modules/header/AnnouncementBar.tsx @@ -3,61 +3,31 @@ import clsx from "clsx"; import { useCallback, useEffect, useState } from "react"; import { IconX } from "~/components/Icons"; import { Marquee } from "~/components/Marquee"; +import { useHeaderStyles } from "~/hooks/useHeaderStyles"; -const storageKey = "hide-announcement-bar"; - -function standardizeContent(content: string) { - // remove br, p, div and \n - return content - ? content - .replace(//g, "") - .replace(/

/g, "") - .replace(/<\/p>/g, "") - .replace(/

/g, "") - .replace(/<\/div>/g, "") - .replace(/\n/g, "") - : ""; -} +let storageKey = "hide-announcement-bar"; export function AnnouncementBar() { - let [show, setShow] = useState(false); - let [contentWidth, setContentWidth] = useState(0); - const themeSettings = useThemeSettings(); - const { - announcementBarText, - announcementBarHeight, - announcementBarTextColor, - announcementBarBgColor, - dismissibleAnnouncementBar, - stickyAnnouncementBar, + let [show, setShow] = useState(true); + useHeaderStyles(show); + let themeSettings = useThemeSettings(); + let { + topbarText, + topbarHeight, + topbarTextColor, + topbarBgColor, + dismissibleTopbar, + stickyTopbar, enableScrolling, scrollingGap, scrollingSpeed, } = themeSettings; - const standardContent = announcementBarText; - const settings = { - content: standardContent, - announcementBarTextColor, - announcementBarBgColor, - announcementBarHeight, - dismissible: dismissibleAnnouncementBar, - sticky: stickyAnnouncementBar, - enableScrolling, - scrollingGap: scrollingGap, - scrollingSpeed, - contentWidth, - }; - const { content, sticky, dismissible } = settings; + let dismiss = useCallback(() => { localStorage.setItem(storageKey, "true"); setShow(false); }, []); - useEffect(() => { - if (!enableScrolling) { - setContentWidth(0); - } - }, [enableScrolling]); useEffect(() => { let hide = localStorage.getItem(storageKey); if (hide !== "true") { @@ -65,41 +35,33 @@ export function AnnouncementBar() { } }, []); - if (!show || !content) return null; + if (!show || !topbarText) return null; - const maxAnimationTime = 100000; // 100 seconds - slowest speed 0% - 0 speed - const minAnimationTime = 1000; // 1 second - fastest speed 100% - 100 speed - const animationTime = - ((100 - scrollingSpeed) * (maxAnimationTime - minAnimationTime)) / 100 + - minAnimationTime; return (
- {enableScrolling ? ( - -
-
- ) : ( +
- )} - {dismissible && ( +
+ {dismissibleTopbar && (