From c9c13ed753cd948e3559b404a37914bab3c26b68 Mon Sep 17 00:00:00 2001 From: hta218 Date: Fri, 13 Dec 2024 16:03:57 +0700 Subject: [PATCH 01/11] Remove unused icons --- app/components/button.tsx | 4 +- app/components/header/cart-drawer.tsx | 17 +- app/components/header/desktop-header.tsx | 13 +- app/components/header/index.tsx | 26 -- app/components/header/mobile-header.tsx | 15 +- .../header/predictive-search/index.tsx | 3 +- app/components/icons.tsx | 313 ------------------ app/hooks/use-cart-fetchers.ts | 8 +- app/modules/cart.tsx | 11 +- app/modules/country-selector.tsx | 7 +- app/modules/footer.tsx | 20 +- app/modules/layout.tsx | 8 +- app/routes/($locale).account.tsx | 4 +- app/sections/ali-reviews/rating.tsx | 12 +- app/sections/ali-reviews/review-item.tsx | 5 +- app/sections/judgeme-reviews/review-form.tsx | 7 +- app/sections/newsletter/newsletter-form.tsx | 4 +- app/sections/our-team/team-members.tsx | 12 +- 18 files changed, 74 insertions(+), 415 deletions(-) delete mode 100644 app/components/header/index.tsx diff --git a/app/components/button.tsx b/app/components/button.tsx index 19d577a6..9bab6d38 100644 --- a/app/components/button.tsx +++ b/app/components/button.tsx @@ -1,9 +1,9 @@ +import { CircleNotch } from "@phosphor-icons/react"; import type { VariantProps } from "class-variance-authority"; import { cva } from "class-variance-authority"; import type { HTMLAttributes } from "react"; import { forwardRef } from "react"; import { cn } from "~/lib/cn"; -import { IconCircleNotch } from "./icons"; export let variants = cva( [ @@ -146,7 +146,7 @@ function Spinner() { className="button-spinner absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" style={style} > - + ); } diff --git a/app/components/header/cart-drawer.tsx b/app/components/header/cart-drawer.tsx index 211a8ac9..ba3732dc 100644 --- a/app/components/header/cart-drawer.tsx +++ b/app/components/header/cart-drawer.tsx @@ -1,17 +1,28 @@ import { Handbag, X } from "@phosphor-icons/react"; import * as Dialog from "@radix-ui/react-dialog"; import { Await, useRouteLoaderData } from "@remix-run/react"; -import { type CartReturn, useAnalytics } from "@shopify/hydrogen"; +import { CartForm, type CartReturn, useAnalytics } from "@shopify/hydrogen"; import clsx from "clsx"; -import { Suspense } from "react"; +import { Suspense, useEffect, useState } from "react"; import Link from "~/components/link"; import { ScrollArea } from "~/components/scroll-area"; +import { useCartFetchers } from "~/hooks/use-cart-fetchers"; import { Cart } from "~/modules/cart"; import type { RootLoader } from "~/root"; export function CartDrawer({ isTransparent }: { isTransparent: boolean }) { let rootData = useRouteLoaderData("root"); let { publish } = useAnalytics(); + let [open, setOpen] = useState(false); + + let addToCartFetchers = useCartFetchers(CartForm.ACTIONS.LinesAdd); + // Toggle cart drawer when adding to cart + useEffect(() => { + if (!open && addToCartFetchers.length) { + setOpen(true); + console.log("👉 --------> - setOpen:", setOpen); + } + }, [addToCartFetchers, open]); return ( {(cart) => ( - + publish("custom_sidecart_viewed", { cart })} className="relative flex items-center justify-center w-8 h-8 focus:ring-border" diff --git a/app/components/header/desktop-header.tsx b/app/components/header/desktop-header.tsx index 2146924f..0f125ebf 100644 --- a/app/components/header/desktop-header.tsx +++ b/app/components/header/desktop-header.tsx @@ -1,3 +1,4 @@ +import { User } from "@phosphor-icons/react"; import { Await, Link, @@ -8,7 +9,6 @@ import { useThemeSettings } from "@weaverse/hydrogen"; import { cva } from "class-variance-authority"; import { Suspense } from "react"; import useWindowScroll from "react-use/esm/useWindowScroll"; -import { IconUser } from "~/components/icons"; import { Logo } from "~/components/logo"; import { cn } from "~/lib/cn"; import { useIsHomePath } from "~/lib/utils"; @@ -85,16 +85,13 @@ function AccountLink({ className }: { className?: string }) { return ( - }> - } - > + }> + }> {(isLoggedIn) => isLoggedIn ? ( - + ) : ( - + ) } diff --git a/app/components/header/index.tsx b/app/components/header/index.tsx deleted file mode 100644 index e70e7004..00000000 --- a/app/components/header/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { CartForm } from "@shopify/hydrogen"; -import { useEffect } from "react"; -import { useCartFetchers } from "~/hooks/use-cart-fetchers"; -import { useDrawer } from "../../modules/drawer"; -import { DesktopHeader } from "./desktop-header"; -import { MobileHeader } from "./mobile-header"; -import { ScrollingAnnouncement } from "./scrolling-announcement"; - -export function Header() { - let { isOpen: isCartOpen, openDrawer: openCart } = useDrawer(); - - let addToCartFetchers = useCartFetchers(CartForm.ACTIONS.LinesAdd); - // toggle cart drawer when adding to cart - useEffect(() => { - if (isCartOpen || !addToCartFetchers.length) return; - openCart(); - }, [addToCartFetchers, isCartOpen, openCart]); - - return ( - <> - - - - - ); -} diff --git a/app/components/header/mobile-header.tsx b/app/components/header/mobile-header.tsx index 293f3ae7..12182ff5 100644 --- a/app/components/header/mobile-header.tsx +++ b/app/components/header/mobile-header.tsx @@ -1,3 +1,4 @@ +import { MagnifyingGlass, User } from "@phosphor-icons/react"; import { Await, Form, @@ -8,7 +9,6 @@ import { import { useThemeSettings } from "@weaverse/hydrogen"; import { Suspense } from "react"; import useWindowScroll from "react-use/esm/useWindowScroll"; -import { IconMagnifyingGlass, IconUser } from "~/components/icons"; import { Logo } from "~/components/logo"; import { cn } from "~/lib/cn"; import { useIsHomePath } from "~/lib/utils"; @@ -54,7 +54,7 @@ export function MobileHeader() { type="submit" className="relative flex items-center justify-center w-8 h-8" > - + @@ -73,16 +73,13 @@ function AccountLink({ className }: { className?: string }) { return ( - }> - } - > + }> + }> {(isLoggedIn) => isLoggedIn ? ( - + ) : ( - + ) } diff --git a/app/components/header/predictive-search/index.tsx b/app/components/header/predictive-search/index.tsx index 21082faa..e795d0bb 100644 --- a/app/components/header/predictive-search/index.tsx +++ b/app/components/header/predictive-search/index.tsx @@ -1,7 +1,6 @@ import { MagnifyingGlass } from "@phosphor-icons/react"; import * as Dialog from "@radix-ui/react-dialog"; import * as VisuallyHidden from "@radix-ui/react-visually-hidden"; -import { IconMagnifyingGlass } from "~/components/icons"; import { cn } from "~/lib/cn"; import { Input } from "~/modules/input"; import { PredictiveSearchResults } from "./predictive-search-results"; @@ -61,7 +60,7 @@ function PredictiveSearch() { className="rounded" autoComplete="off" prefixElement={ - + } autoFocus={true} /> diff --git a/app/components/icons.tsx b/app/components/icons.tsx index 1f220573..9033fe49 100644 --- a/app/components/icons.tsx +++ b/app/components/icons.tsx @@ -152,21 +152,6 @@ export function IconArrowRight(props: IconProps) { ); } -export function IconSealCheck(props: IconProps) { - return ( - - - - ); -} - export function IconX(props: IconProps) { return ( ); } - -export function IconStar(props: IconProps) { - return ( - - - - ); -} - -export function IconStarFilled(props: IconProps) { - return ( - - - - ); -} - -export function IconStarHalfFilled(props: IconProps) { - return ( - - - - ); -} - -export function IconMagnifyingGlass(props: IconProps) { - return ( - - - - ); -} - -export function IconUser(props: IconProps) { - return ( - - - - ); -} - -export function IconHandbag(props: IconProps) { - return ( - - - - ); -} - -export function IconSignIn(props: IconProps) { - return ( - - - - ); -} - -export function IconSignOut(props: IconProps) { - return ( - - - - ); -} - -export function IconList(props: IconProps) { - return ( - - - - ); -} - -export function IconCircleNotch(props: IconProps) { - return ( - - - - ); -} - -export function IconPaperPlaneTilt(props: IconProps) { - return ( - - - - ); -} - -export function IconEnvelopeSimple(props: IconProps) { - return ( - - - - ); -} - -export function IconFacebookLogo(props: IconProps) { - return ( - - - - ); -} -export function IconInstagramLogo(props: IconProps) { - return ( - - - - ); -} -export function IconLinkedinLogo(props: IconProps) { - return ( - - - - ); -} - -export function IconXLogo(props: IconProps) { - return ( - - - - ); -} - -export function IconGithubLogo(props: IconProps) { - return ( - - - - ); -} - -export function IconCheck(props: IconProps) { - return ( - - - - ); -} - -export function IconCheckCircle(props: IconProps) { - return ( - - - - ); -} - -export function IconTrash(props: IconProps) { - return ( - - - - ); -} diff --git a/app/hooks/use-cart-fetchers.ts b/app/hooks/use-cart-fetchers.ts index f9376661..98e78dc7 100644 --- a/app/hooks/use-cart-fetchers.ts +++ b/app/hooks/use-cart-fetchers.ts @@ -2,12 +2,12 @@ import { useFetchers } from "@remix-run/react"; import { CartForm } from "@shopify/hydrogen"; export function useCartFetchers(actionName: string) { - const fetchers = useFetchers(); - const cartFetchers = []; + let fetchers = useFetchers(); + let cartFetchers = []; - for (const fetcher of fetchers) { + for (let fetcher of fetchers) { if (fetcher.formData) { - const formInputs = CartForm.getFormInput(fetcher.formData); + let formInputs = CartForm.getFormInput(fetcher.formData); if (formInputs.action === actionName) { cartFetchers.push(fetcher); } diff --git a/app/modules/cart.tsx b/app/modules/cart.tsx index 1818f2eb..73dd3131 100644 --- a/app/modules/cart.tsx +++ b/app/modules/cart.tsx @@ -1,3 +1,4 @@ +import { Trash } from "@phosphor-icons/react"; import { CartForm, Image, @@ -15,9 +16,8 @@ import clsx from "clsx"; import { useRef } from "react"; import useScroll from "react-use/esm/useScroll"; import type { CartApiQueryFragment } from "storefrontapi.generated"; -import { Link } from "~/components/link"; import { Button } from "~/components/button"; -import { IconTrash } from "~/components/icons"; +import { Link } from "~/components/link"; import { getImageAspectRatio } from "~/lib/utils"; import { Text } from "~/modules/text"; import { CartBestSellers } from "./cart-best-sellers"; @@ -96,10 +96,7 @@ function CartDiscounts({
{codes?.join(", ")} @@ -339,7 +336,7 @@ function ItemRemoveButton({ type="submit" > Remove -
-
+ + +
{children}
diff --git a/app/routes/($locale).account.tsx b/app/routes/($locale).account.tsx index 9ba6cb58..76e1c657 100644 --- a/app/routes/($locale).account.tsx +++ b/app/routes/($locale).account.tsx @@ -1,3 +1,4 @@ +import { SignOut } from "@phosphor-icons/react"; import { Await, Form, @@ -13,7 +14,6 @@ import type { OrderCardFragment, } from "customer-accountapi.generated"; import { Suspense } from "react"; -import { IconSignOut } from "~/components/icons"; import Link from "~/components/link"; import { CACHE_NONE, routeHeaders } from "~/data/cache"; import { CUSTOMER_DETAILS_QUERY } from "~/graphql/customer-account/customer-details-query"; @@ -108,7 +108,7 @@ function Account({ customer, heading, featuredDataPromise }: AccountType) { type="submit" className="text-body-subtle group flex gap-2 items-center" > - + Sign out diff --git a/app/sections/ali-reviews/rating.tsx b/app/sections/ali-reviews/rating.tsx index 80ef8344..6a0efc25 100644 --- a/app/sections/ali-reviews/rating.tsx +++ b/app/sections/ali-reviews/rating.tsx @@ -1,20 +1,16 @@ -import { - IconStar, - IconStarFilled, - IconStarHalfFilled, -} from "~/components/icons"; +import { Star, StarHalf } from "@phosphor-icons/react"; export function Rating({ rating }: { rating: number }) { return (
{Array.from({ length: 5 }).map((_, i) => { if (rating >= i + 1) { - return ; + return ; } if (rating >= i + 0.5) { - return ; + return ; } - return ; + return ; })}
); diff --git a/app/sections/ali-reviews/review-item.tsx b/app/sections/ali-reviews/review-item.tsx index bac8d0cb..c13fb46d 100644 --- a/app/sections/ali-reviews/review-item.tsx +++ b/app/sections/ali-reviews/review-item.tsx @@ -1,7 +1,8 @@ +import { SealCheck } from "@phosphor-icons/react"; import clsx from "clsx"; import { useState } from "react"; import ReactCountryFlag from "react-country-flag"; -import { IconSealCheck, IconX } from "~/components/icons"; +import { IconX } from "~/components/icons"; import { Rating } from "./rating"; export type AliReview = { @@ -79,7 +80,7 @@ export function ReviewItem(props: ReviewItemProps) {
{showVerifiedBadge && (
- +

{verifiedBadgeText}

)} diff --git a/app/sections/judgeme-reviews/review-form.tsx b/app/sections/judgeme-reviews/review-form.tsx index 7348fd5c..5f78fe2c 100644 --- a/app/sections/judgeme-reviews/review-form.tsx +++ b/app/sections/judgeme-reviews/review-form.tsx @@ -1,8 +1,8 @@ +import { Star } from "@phosphor-icons/react"; import { useFetcher, useLoaderData } from "@remix-run/react"; import clsx from "clsx"; import { type FormEvent, useEffect, useRef, useState } from "react"; import { Button } from "~/components/button"; -import { IconStar, IconStarFilled } from "~/components/icons"; import type { JudgemeReviewsData } from "~/lib/judgeme"; import { StarRating } from "~/modules/star-rating"; import type { ProductLoaderType } from "~/routes/($locale).products.$productHandle"; @@ -122,12 +122,11 @@ export function ReviewForm({ onMouseEnter={() => setHover(ratingValue)} onMouseLeave={() => setHover(0)} aria-label={`Rate ${ratingValue} out of 5 stars`} - role="button" > {ratingValue <= (hover || rating) ? ( - + ) : ( - + )}
); diff --git a/app/sections/newsletter/newsletter-form.tsx b/app/sections/newsletter/newsletter-form.tsx index 0697d47a..7af2d817 100644 --- a/app/sections/newsletter/newsletter-form.tsx +++ b/app/sections/newsletter/newsletter-form.tsx @@ -1,3 +1,4 @@ +import { EnvelopeSimple } from "@phosphor-icons/react"; import { useFetcher } from "@remix-run/react"; import type { HydrogenComponentProps, @@ -6,7 +7,6 @@ import type { import clsx from "clsx"; import { forwardRef } from "react"; import { Button } from "~/components/button"; -import { IconEnvelopeSimple } from "~/components/icons"; import type { CustomerApiPlayLoad } from "~/routes/($locale).api.customer"; interface NewsLetterInputProps extends HydrogenComponentProps { @@ -35,7 +35,7 @@ let NewsLetterForm = forwardRef( data-motion="fade-up" >
- + ( target="_blank" className="text-gray-500 hover:text-gray-900" > - + )} @@ -83,7 +79,7 @@ let TeamMembers = forwardRef( target="_blank" className="text-gray-500 hover:text-gray-900" > - + )} @@ -94,7 +90,7 @@ let TeamMembers = forwardRef( target="_blank" className="text-gray-500 hover:text-gray-900" > - + )} From c69f35b55d58625c2ba0f10b48f2ec16ee3b2fdf Mon Sep 17 00:00:00 2001 From: hta218 Date: Fri, 13 Dec 2024 19:12:38 +0700 Subject: [PATCH 02/11] Update cart drawer, handle open when add to cart --- app/components/header/cart-drawer.tsx | 34 +++++++++++++-------------- app/modules/add-to-cart-button.tsx | 2 ++ 2 files changed, 19 insertions(+), 17 deletions(-) diff --git a/app/components/header/cart-drawer.tsx b/app/components/header/cart-drawer.tsx index ba3732dc..d4eefa74 100644 --- a/app/components/header/cart-drawer.tsx +++ b/app/components/header/cart-drawer.tsx @@ -1,28 +1,29 @@ import { Handbag, X } from "@phosphor-icons/react"; import * as Dialog from "@radix-ui/react-dialog"; import { Await, useRouteLoaderData } from "@remix-run/react"; -import { CartForm, type CartReturn, useAnalytics } from "@shopify/hydrogen"; +import { type CartReturn, useAnalytics } from "@shopify/hydrogen"; import clsx from "clsx"; -import { Suspense, useEffect, useState } from "react"; +import { Suspense, useState } from "react"; import Link from "~/components/link"; import { ScrollArea } from "~/components/scroll-area"; -import { useCartFetchers } from "~/hooks/use-cart-fetchers"; import { Cart } from "~/modules/cart"; import type { RootLoader } from "~/root"; -export function CartDrawer({ isTransparent }: { isTransparent: boolean }) { +export let openCartDrawer = () => {}; + +export function CartDrawer() { let rootData = useRouteLoaderData("root"); let { publish } = useAnalytics(); let [open, setOpen] = useState(false); + openCartDrawer = () => setOpen(true); - let addToCartFetchers = useCartFetchers(CartForm.ACTIONS.LinesAdd); // Toggle cart drawer when adding to cart - useEffect(() => { - if (!open && addToCartFetchers.length) { - setOpen(true); - console.log("👉 --------> - setOpen:", setOpen); - } - }, [addToCartFetchers, open]); + // let addToCartFetchers = useCartFetchers(CartForm.ACTIONS.LinesAdd); + // useEffect(() => { + // if (!open && addToCartFetchers.length) { + // setOpen(true); + // } + // }, [addToCartFetchers, open]); return ( 0 && (
{cart?.totalQuantity} diff --git a/app/modules/add-to-cart-button.tsx b/app/modules/add-to-cart-button.tsx index 79407111..06184091 100644 --- a/app/modules/add-to-cart-button.tsx +++ b/app/modules/add-to-cart-button.tsx @@ -11,6 +11,7 @@ import { } from "@shopify/hydrogen"; import { useEffect } from "react"; import { Button } from "~/components/button"; +import { openCartDrawer } from "~/components/header/cart-drawer"; import { usePageAnalytics } from "~/hooks/use-page-analytics"; export function AddToCartButton({ @@ -48,6 +49,7 @@ export function AddToCartButton({ type="submit" className={className} disabled={disabled ?? fetcher.state !== "idle"} + onClick={openCartDrawer} {...props} > {children} From 9765c46f93c4b4c1ce7f0d762148cec1c5b7dd14 Mon Sep 17 00:00:00 2001 From: hta218 Date: Fri, 13 Dec 2024 19:13:21 +0700 Subject: [PATCH 03/11] Simplify header, remove unnecessary mobile markup --- .../header/{desktop-header.tsx => index.tsx} | 47 ++++++---- app/components/header/menu/desktop-menu.tsx | 2 +- app/components/header/menu/mobile-menu.tsx | 2 +- app/components/header/mobile-header.tsx | 89 ------------------- .../header/predictive-search/index.tsx | 2 +- app/components/logo.tsx | 32 ++++--- app/modules/layout.tsx | 6 +- 7 files changed, 55 insertions(+), 125 deletions(-) rename app/components/header/{desktop-header.tsx => index.tsx} (65%) delete mode 100644 app/components/header/mobile-header.tsx diff --git a/app/components/header/desktop-header.tsx b/app/components/header/index.tsx similarity index 65% rename from app/components/header/desktop-header.tsx rename to app/components/header/index.tsx index 0f125ebf..9d111172 100644 --- a/app/components/header/desktop-header.tsx +++ b/app/components/header/index.tsx @@ -1,20 +1,17 @@ -import { User } from "@phosphor-icons/react"; -import { - Await, - Link, - useRouteError, - useRouteLoaderData, -} from "@remix-run/react"; +import { MagnifyingGlass, User } from "@phosphor-icons/react"; +import { Await, useRouteError, useRouteLoaderData } from "@remix-run/react"; import { useThemeSettings } from "@weaverse/hydrogen"; import { cva } from "class-variance-authority"; import { Suspense } from "react"; import useWindowScroll from "react-use/esm/useWindowScroll"; +import Link from "~/components/link"; import { Logo } from "~/components/logo"; import { cn } from "~/lib/cn"; import { useIsHomePath } from "~/lib/utils"; import type { RootLoader } from "~/root"; import { CartDrawer } from "./cart-drawer"; import { DesktopMenu } from "./menu/desktop-menu"; +import { MobileMenu } from "./menu/mobile-menu"; import { PredictiveSearchButton } from "./predictive-search"; let variants = cva("", { @@ -32,7 +29,7 @@ let variants = cva("", { }, }); -export function DesktopHeader() { +export function Header() { let { enableTransparentHeader, headerWidth } = useThemeSettings(); let isHome = useIsHomePath(); let { y } = useWindowScroll(); @@ -45,34 +42,52 @@ export function DesktopHeader() { return (
- + + + + +
- +
diff --git a/app/components/header/menu/desktop-menu.tsx b/app/components/header/menu/desktop-menu.tsx index 815ca665..78c7770d 100644 --- a/app/components/header/menu/desktop-menu.tsx +++ b/app/components/header/menu/desktop-menu.tsx @@ -24,7 +24,7 @@ export function DesktopMenu() { onValueChange={setValue} onMouseLeave={() => setValue(null)} > -