diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 8fe5b793..00000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,113 +0,0 @@ -# @weaverse/pilot - -## 3.0.4 - -### Patch Changes - -- Updated dependencies - - @weaverse/hydrogen@4.0.0 - -## 2.8.1 - -### Patch Changes - -- Updated dependencies - - @weaverse/hydrogen@3.4.1 - -## 2.7.8 - -### Patch Changes - -- Updated dependencies - - @weaverse/hydrogen@3.4.0 - -## 2.6.8 - -### Patch Changes - -- Updated dependencies - - @weaverse/hydrogen@3.1.9 - -## 2.6.7 - -### Patch Changes - -- @weaverse/hydrogen@3.1.8 - -## 2.6.6 - -### Patch Changes - -- Updated dependencies - - @weaverse/hydrogen@3.1.7 - -## 2.6.5 - -### Patch Changes - -- Updated dependencies - - @weaverse/hydrogen@3.1.6 - -## 2.6.4 - -### Patch Changes - -- Updated dependencies - - @weaverse/hydrogen@3.1.5 - -## 2.6.3 - -### Patch Changes - -- Updated dependencies - - @weaverse/hydrogen@3.1.3 - -## 2.6.2 - -### Patch Changes - -- Updated dependencies - - @weaverse/hydrogen@3.1.2 - -## 2.5.3 - -### Patch Changes - -- 3a975da: Adding url input type -- Updated dependencies [3a975da] - - @weaverse/hydrogen@3.1.1 - -## 2.5.2 - -### Patch Changes - -- Updated dependencies - - @weaverse/hydrogen@3.1.0 - -## 2.5.1 - -### Patch Changes - -- Updated dependencies - - @weaverse/hydrogen@3.0.1 - -## 2.4.5 - -### Patch Changes - -- Updated dependencies - - @weaverse/hydrogen@2.10.1 - -## 2.4.5-next.0 - -### Patch Changes - -- Updated dependencies - - @weaverse/hydrogen@2.10.1-next.0 - -## 2.4.3 - -### Patch Changes - -- Updated dependencies - - @weaverse/hydrogen@2.9.0 diff --git a/app/components/drawer.tsx b/app/components/drawer.tsx new file mode 100644 index 00000000..22961637 --- /dev/null +++ b/app/components/drawer.tsx @@ -0,0 +1,39 @@ +import * as Dialog from "@radix-ui/react-dialog"; +import { cn } from "~/lib/cn"; + +export function DialogDemo({ + width = "400px", + openFrom, +}: { width?: string; openFrom: "left" | "right" }) { + return ( + + + + + + + + content goes here + + + + ); +} diff --git a/app/modules/header/cart-count.tsx b/app/components/header/cart-count.tsx similarity index 100% rename from app/modules/header/cart-count.tsx rename to app/components/header/cart-count.tsx diff --git a/app/modules/header/desktop-header.tsx b/app/components/header/desktop-header.tsx similarity index 64% rename from app/modules/header/desktop-header.tsx rename to app/components/header/desktop-header.tsx index 2fbe4715..d8da64b9 100644 --- a/app/modules/header/desktop-header.tsx +++ b/app/components/header/desktop-header.tsx @@ -1,23 +1,21 @@ import { Await, Link, - useLocation, useRouteError, useRouteLoaderData, } from "@remix-run/react"; import { useThemeSettings } from "@weaverse/hydrogen"; import { cva } from "class-variance-authority"; -import { Suspense, useEffect } from "react"; +import { Suspense } from "react"; import useWindowScroll from "react-use/esm/useWindowScroll"; -import { IconMagnifyingGlass, IconUser } from "~/components/icons"; +import { DialogDemo } from "~/components/drawer"; +import { IconUser } from "~/components/icons"; import { Logo } from "~/components/logo"; import { cn } from "~/lib/cn"; -import { type EnhancedMenu, useIsHomePath } from "~/lib/utils"; -import { PredictiveSearch } from "~/modules/predictive-search"; +import { useIsHomePath } from "~/lib/utils"; import type { RootLoader } from "~/root"; -import { Drawer, useDrawer } from "../drawer"; -import { CartCount } from "./cart-count"; import { DesktopMenu } from "./menu/desktop-menu"; +import { PredictiveSearchButton } from "./predictive-search"; let variants = cva("", { variants: { @@ -34,19 +32,10 @@ let variants = cva("", { }, }); -export function DesktopHeader({ - menu, - openCart, - shopName, -}: { - openCart: () => void; - menu?: EnhancedMenu; - shopName: string; -}) { +export function DesktopHeader() { let { enableTransparentHeader, headerWidth } = useThemeSettings(); let isHome = useIsHomePath(); let { y } = useWindowScroll(); - let { isOpen, openDrawer, closeDrawer } = useDrawer(); let routeError = useRouteError(); let scrolled = y >= 50; @@ -57,7 +46,7 @@ export function DesktopHeader({
- - + +
- + - + {/* + /> */}
@@ -121,36 +107,3 @@ function AccountLink({ className }: { className?: string }) { ); } - -function SearchToggle({ - isOpen, - openDrawer, - closeDrawer, -}: { - isOpen: boolean; - openDrawer: () => void; - closeDrawer: () => void; -}) { - let { pathname } = useLocation(); - // biome-ignore lint/correctness/useExhaustiveDependencies: - useEffect(() => { - if (isOpen) { - closeDrawer(); - } - }, [pathname]); - - return ( - <> - - - - - - ); -} diff --git a/app/modules/header/index.tsx b/app/components/header/index.tsx similarity index 58% rename from app/modules/header/index.tsx rename to app/components/header/index.tsx index 92b6bda3..33f5e605 100644 --- a/app/modules/header/index.tsx +++ b/app/components/header/index.tsx @@ -2,33 +2,20 @@ import { Await, useRouteLoaderData } from "@remix-run/react"; import { CartForm, type CartReturn } from "@shopify/hydrogen"; import { Suspense, useEffect } from "react"; import { useCartFetchers } from "~/hooks/use-cart-fetchers"; -import type { EnhancedMenu } from "~/lib/utils"; import { Cart } from "~/modules/cart"; import type { RootLoader } from "~/root"; -import { CartLoading } from "../cart-loading"; -import { Drawer, useDrawer } from "../drawer"; +import { CartLoading } from "../../modules/cart-loading"; +import { Drawer, useDrawer } from "../../modules/drawer"; import { DesktopHeader } from "./desktop-header"; -import { MobileMenu } from "./menu/mobile-menu"; import { MobileHeader } from "./mobile-header"; import { ScrollingAnnouncement } from "./scrolling-announcement"; -export function Header({ - shopName, - menu, -}: { - shopName: string; - menu?: EnhancedMenu; -}) { +export function Header() { let { isOpen: isCartOpen, openDrawer: openCart, closeDrawer: closeCart, } = useDrawer(); - let { - isOpen: isMenuOpen, - openDrawer: openMenu, - closeDrawer: closeMenu, - } = useDrawer(); let addToCartFetchers = useCartFetchers(CartForm.ACTIONS.LinesAdd); // toggle cart drawer when adding to cart @@ -39,17 +26,10 @@ export function Header({ return ( <> - - {menu && ( - - )} + {/* */} - - + + ); } @@ -81,26 +61,3 @@ function CartDrawer({ ); } - -export function MenuDrawer({ - isOpen, - onClose, - menu, -}: { - isOpen: boolean; - onClose: () => void; - menu: EnhancedMenu; -}) { - return ( - - - - ); -} diff --git a/app/modules/header/menu/desktop-menu.tsx b/app/components/header/menu/desktop-menu.tsx similarity index 94% rename from app/modules/header/menu/desktop-menu.tsx rename to app/components/header/menu/desktop-menu.tsx index 3fb21a9d..815ca665 100644 --- a/app/modules/header/menu/desktop-menu.tsx +++ b/app/components/header/menu/desktop-menu.tsx @@ -5,16 +5,18 @@ import { useThemeSettings } from "@weaverse/hydrogen"; import clsx from "clsx"; import { useState } from "react"; import Link from "~/components/link"; +import { useShopMenu } from "~/hooks/use-shop-menu"; import { cn } from "~/lib/cn"; import { getMaxDepth } from "~/lib/menu"; import type { SingleMenuItem } from "~/lib/type"; -import type { EnhancedMenu } from "~/lib/utils"; -export function DesktopMenu({ menu }: { menu: EnhancedMenu }) { +export function DesktopMenu() { + let { headerMenu } = useShopMenu(); let { openMenuBy } = useThemeSettings(); let [value, setValue] = useState(null); - if (menu?.items?.length) { - let items = menu.items as unknown as SingleMenuItem[]; + + if (headerMenu?.items?.length) { + let items = headerMenu.items as unknown as SingleMenuItem[]; return ( ; + + return ( + + + + + + + + + Mobile menu + + + + +
Menu
+
+
+ +
+ {headerMenu.items.map((item) => ( + + ))} +
+ +
+ + + + ); +} + +function CollapsibleMenuItem({ item }: { item: SingleMenuItem }) { + let { title, to, items } = item; + + if (!items?.length) { + return ( + + + {title} + + + ); + } + + return ( + + + + + + {items.map((item) => ( + + ))} + + + ); +} + +let MenuTrigger = forwardRef( + (props, ref) => { + return ( + + ); + }, +); diff --git a/app/modules/header/mobile-header.tsx b/app/components/header/mobile-header.tsx similarity index 77% rename from app/modules/header/mobile-header.tsx rename to app/components/header/mobile-header.tsx index fe00986c..96caa90b 100644 --- a/app/modules/header/mobile-header.tsx +++ b/app/components/header/mobile-header.tsx @@ -8,21 +8,18 @@ import { import { useThemeSettings } from "@weaverse/hydrogen"; import { Suspense } from "react"; import useWindowScroll from "react-use/esm/useWindowScroll"; -import { IconList, IconMagnifyingGlass, IconUser } from "~/components/icons"; +import { IconMagnifyingGlass, IconUser } from "~/components/icons"; import { Logo } from "~/components/logo"; import { cn } from "~/lib/cn"; import { useIsHomePath } from "~/lib/utils"; import type { RootLoader } from "~/root"; import { CartCount } from "./cart-count"; +import { MobileMenu } from "./menu/mobile-menu"; export function MobileHeader({ - shopName, openCart, - openMenu, }: { - shopName: string; openCart: () => void; - openMenu: () => void; }) { let isHome = useIsHomePath(); let { enableTransparentHeader } = useThemeSettings(); @@ -35,29 +32,23 @@ export function MobileHeader({
- +
- +
+ + + + + + + + Predictive search + + + + + + ); +} + +function PredictiveSearch() { + return ( +
+ + {({ fetchResults, inputRef }) => ( +
+ + } + autoFocus={true} + /> +
+ )} + + +
+ ); +} diff --git a/app/modules/predictive-search/predictive-search-result.tsx b/app/components/header/predictive-search/predictive-search-result.tsx similarity index 98% rename from app/modules/predictive-search/predictive-search-result.tsx rename to app/components/header/predictive-search/predictive-search-result.tsx index a2063839..ec574dd4 100644 --- a/app/modules/predictive-search/predictive-search-result.tsx +++ b/app/components/header/predictive-search/predictive-search-result.tsx @@ -1,11 +1,11 @@ import { Link } from "@remix-run/react"; import clsx from "clsx"; -import { SearchResultItem } from "./result-item"; import type { NormalizedPredictiveSearchResultItem, NormalizedPredictiveSearchResults, SearchResultTypeProps, -} from "../../types/predictive-search"; +} from "~/types/predictive-search"; +import { SearchResultItem } from "./result-item"; export function PredictiveSearchResult({ goToSearchResult, diff --git a/app/modules/predictive-search/predictive-search-results.tsx b/app/components/header/predictive-search/predictive-search-results.tsx similarity index 85% rename from app/modules/predictive-search/predictive-search-results.tsx rename to app/components/header/predictive-search/predictive-search-results.tsx index e7142b6e..ebae9eb4 100644 --- a/app/modules/predictive-search/predictive-search-results.tsx +++ b/app/components/header/predictive-search/predictive-search-results.tsx @@ -28,14 +28,14 @@ export function PredictiveSearchResults() { if (!totalResults) { return ( -
+
); } return (
-
+
View all products - {/* - View all products - - */}
)}
diff --git a/app/modules/predictive-search/result-item.tsx b/app/components/header/predictive-search/result-item.tsx similarity index 96% rename from app/modules/predictive-search/result-item.tsx rename to app/components/header/predictive-search/result-item.tsx index b7d1e4c0..6f9568ea 100644 --- a/app/modules/predictive-search/result-item.tsx +++ b/app/components/header/predictive-search/result-item.tsx @@ -4,7 +4,7 @@ import clsx from "clsx"; import { Link } from "~/components/link"; import { CompareAtPrice } from "~/components/compare-at-price"; import { getImageAspectRatio, isDiscounted } from "~/lib/utils"; -import type { SearchResultItemProps } from "../../types/predictive-search"; +import type { SearchResultItemProps } from "../../../types/predictive-search"; export function SearchResultItem({ goToSearchResult, diff --git a/app/modules/predictive-search/search-form.tsx b/app/components/header/predictive-search/search-form.tsx similarity index 78% rename from app/modules/predictive-search/search-form.tsx rename to app/components/header/predictive-search/search-form.tsx index c9f5d867..13574dfc 100644 --- a/app/modules/predictive-search/search-form.tsx +++ b/app/components/header/predictive-search/search-form.tsx @@ -3,7 +3,7 @@ import { useEffect, useRef } from "react"; import type { NormalizedPredictiveSearchResults, SearchFromProps, -} from "../../types/predictive-search"; +} from "~/types/predictive-search"; /** * Search form component that posts search requests to the `/search` route @@ -15,16 +15,16 @@ export function PredictiveSearchForm({ method = "POST", ...props }: SearchFromProps) { - const params = useParams(); - const fetcher = useFetcher(); - const inputRef = useRef(null); + let params = useParams(); + let fetcher = useFetcher(); + let inputRef = useRef(null); function fetchResults(event: React.ChangeEvent) { - const searchAction = action ?? "/api/predictive-search"; - const localizedAction = params.locale + let searchAction = action ?? "/api/predictive-search"; + let localizedAction = params.locale ? `/${params.locale}${searchAction}` : searchAction; - const newSearchTerm = event.target.value || ""; + let newSearchTerm = event.target.value || ""; fetcher.submit( { q: newSearchTerm, limit: "6" }, { method, action: localizedAction }, diff --git a/app/modules/header/scrolling-announcement.tsx b/app/components/header/scrolling-announcement.tsx similarity index 94% rename from app/modules/header/scrolling-announcement.tsx rename to app/components/header/scrolling-announcement.tsx index 283de5ca..1e8b1ccf 100644 --- a/app/modules/header/scrolling-announcement.tsx +++ b/app/components/header/scrolling-announcement.tsx @@ -39,7 +39,7 @@ export function ScrollingAnnouncement() { return (
{ + style?: React.CSSProperties; + rootClassName?: string; + scrollbarClassName?: string; + thumbClassName?: string; +} + +export let ScrollArea = forwardRef( + ( + { + size, + rootClassName, + className, + scrollbarClassName, + thumbClassName, + children, + style, + ...rest + }, + ref, + ) => { + return ( + + + {children} + + + + + + ); + }, +); diff --git a/app/hooks/use-analytics.tsx b/app/hooks/use-analytics.ts similarity index 100% rename from app/hooks/use-analytics.tsx rename to app/hooks/use-analytics.ts diff --git a/app/hooks/use-animation.tsx b/app/hooks/use-animation.ts similarity index 100% rename from app/hooks/use-animation.tsx rename to app/hooks/use-animation.ts diff --git a/app/hooks/use-cart-fetchers.tsx b/app/hooks/use-cart-fetchers.ts similarity index 100% rename from app/hooks/use-cart-fetchers.tsx rename to app/hooks/use-cart-fetchers.ts diff --git a/app/hooks/use-closest-weaverse-item.ts b/app/hooks/use-closest-weaverse-item.ts new file mode 100644 index 00000000..69657a91 --- /dev/null +++ b/app/hooks/use-closest-weaverse-item.ts @@ -0,0 +1,22 @@ +import { useItemInstance } from "@weaverse/hydrogen"; +import { useEffect, useState } from "react"; + +export function useClosestWeaverseItem(selector: string) { + let [weaverseId, setWeaverseId] = useState(""); + let weaverseItem = useItemInstance(weaverseId); + + // biome-ignore lint/correctness/useExhaustiveDependencies: + useEffect(() => { + if (!weaverseItem) { + let target = document.querySelector(selector); + if (target) { + let closest = target.closest("[data-wv-id]"); + if (closest) { + setWeaverseId(closest.getAttribute("data-wv-id")); + } + } + } + }, []); + + return weaverseItem; +} diff --git a/app/hooks/use-is-hydrated.tsx b/app/hooks/use-is-hydrated.ts similarity index 100% rename from app/hooks/use-is-hydrated.tsx rename to app/hooks/use-is-hydrated.ts diff --git a/app/hooks/use-page-analytics.tsx b/app/hooks/use-page-analytics.ts similarity index 100% rename from app/hooks/use-page-analytics.tsx rename to app/hooks/use-page-analytics.ts diff --git a/app/hooks/use-shop-menu.ts b/app/hooks/use-shop-menu.ts new file mode 100644 index 00000000..a3e13039 --- /dev/null +++ b/app/hooks/use-shop-menu.ts @@ -0,0 +1,15 @@ +import { useRouteLoaderData } from "@remix-run/react"; +import type { EnhancedMenu } from "~/lib/utils"; +import type { RootLoader } from "~/root"; + +export function useShopMenu() { + let { layout } = useRouteLoaderData("root"); + let shopName = layout?.shop?.name; + let headerMenu = layout?.headerMenu as EnhancedMenu; + let footerMenu = layout?.footerMenu as EnhancedMenu; + return { + shopName, + headerMenu, + footerMenu, + }; +} diff --git a/app/lib/filter.ts b/app/lib/filter.ts index 4f1ddcfc..788e0442 100644 --- a/app/lib/filter.ts +++ b/app/lib/filter.ts @@ -16,27 +16,17 @@ export type SortParam = | "relevance"; export function getAppliedFilterLink( - filter: AppliedFilter, + { filter }: AppliedFilter, params: URLSearchParams, location: Location, ) { - const paramsClone = new URLSearchParams(params); - Object.entries(filter.filter).forEach(([key, value]) => { - const fullKey = FILTER_URL_PREFIX + key; - paramsClone.delete(fullKey, JSON.stringify(value)); - }); + let paramsClone = new URLSearchParams(params); + for (let [k, v] of Object.entries(filter)) { + paramsClone.delete(FILTER_URL_PREFIX + k, JSON.stringify(v)); + } return `${location.pathname}?${paramsClone.toString()}`; } -export function getSortLink( - sort: SortParam, - params: URLSearchParams, - location: Location, -) { - params.set("sort", sort); - return `${location.pathname}?${params.toString()}`; -} - export function getFilterLink( rawInput: string | ProductFilter, params: URLSearchParams, diff --git a/app/lib/type.ts b/app/lib/type.ts index 289bfeb2..0b623c37 100644 --- a/app/lib/type.ts +++ b/app/lib/type.ts @@ -1,17 +1,14 @@ -import type { Storefront as HydrogenStorefront } from "@shopify/hydrogen"; import type { - CountryCode, - CurrencyCode, - LanguageCode, -} from "@shopify/hydrogen/storefront-api-types"; + Storefront as HydrogenStorefront, + I18nBase, +} from "@shopify/hydrogen"; +import type { CurrencyCode } from "@shopify/hydrogen/storefront-api-types"; export type NonNullableFields = { [P in keyof T]: NonNullable; }; -export type Locale = { - language: LanguageCode; - country: CountryCode; +export type Locale = I18nBase & { label: string; currency: CurrencyCode; }; diff --git a/app/modules/country-selector.tsx b/app/modules/country-selector.tsx index 04807803..a81d6080 100644 --- a/app/modules/country-selector.tsx +++ b/app/modules/country-selector.tsx @@ -101,25 +101,24 @@ export function CountrySelector() { countryLocale.language === selectedLocale.language && countryLocale.country === selectedLocale.country; - let countryUrlPath = getCountryUrlPath({ - countryLocale, - defaultLocalePrefix, - pathWithoutLocale, - }); - let onChangeLocale = () => - handleLocaleChange({ - redirectTo: countryUrlPath, - buyerIdentity: { - countryCode: countryLocale.country, - }, - }); return ( + handleLocaleChange({ + redirectTo: getCountryUrlPath({ + countryLocale, + defaultLocalePrefix, + pathWithoutLocale, + }), + buyerIdentity: { + countryCode: countryLocale.country, + }, + }) + } + className="text-white bg-neutral-800 hover:bg-neutral-600 w-full p-2 transition flex gap-2 items-center text-left cursor-pointer py-2 px-4 text-sm" > ; - showSearchSort?: boolean; - numberInRow?: number; - onLayoutChange: (number: number) => void; -}; - -export function DrawerFilter({ - filters, - numberInRow, - onLayoutChange, - appliedFilters = [], - productNumber = 0, - showSearchSort = false, -}: DrawerFilterProps) { - const { openDrawer, isOpen, closeDrawer } = useDrawer(); - return ( -
-
-
- - - - -
- {productNumber} Products -
- - - -
- -
- -
-
-
- ); -} - -function ListItemFilter({ - option, - appliedFilters, -}: { - option: Filter["values"][0]; - appliedFilters: AppliedFilter[]; -}) { - const navigate = useNavigate(); - const [params] = useSearchParams(); - const location = useLocation(); - let filter = appliedFilters.find( - (filter) => JSON.stringify(filter.filter) === option.input, - ); - let [checked, setChecked] = useState(!!filter); - - let handleCheckedChange = (checked: boolean) => { - setChecked(checked); - if (checked) { - const link = getFilterLink(option.input as string, params, location); - navigate(link); - } else if (filter) { - let link = getAppliedFilterLink(filter, params, location); - navigate(link); - } - }; - return ( -
- -
- ); -} - -export function FiltersDrawer({ - filters = [], - appliedFilters = [], -}: Omit) { - const [params] = useSearchParams(); - const filterMarkup = (filter: Filter, option: Filter["values"][0]) => { - switch (filter.type) { - case "PRICE_RANGE": { - let priceFilter = params.get(`${FILTER_URL_PREFIX}price`); - let price = priceFilter - ? (JSON.parse(priceFilter) as ProductFilter["price"]) - : undefined; - let min = Number.isNaN(Number(price?.min)) - ? undefined - : Number(price?.min); - let max = Number.isNaN(Number(price?.max)) - ? undefined - : Number(price?.max); - return ; - } - - default: - return ( - - ); - } - }; - - return ( -
- {filters.map((filter: Filter) => ( - - {({ open }) => ( - <> - - {filter.label} - {open ? ( - - ) : ( - - )} - - -
    - {filter.values?.map((option) => { - return ( -
  • {filterMarkup(filter, option)}
    • - ); - })} -
- - - )} - - ))} -
- ); -} - -// const PRICE_RANGE_FILTER_DEBOUNCE = 500; - -function PriceRangeFilter({ max, min }: { max?: number; min?: number }) { - // const location = useLocation(); - // const params = useMemo( - // () => new URLSearchParams(location.search), - // [location.search], - // ); - // const navigate = useNavigate(); - - const [minPrice, setMinPrice] = useState(min); - const [maxPrice, setMaxPrice] = useState(max); - - // useDebounce( - // () => { - // if (minPrice === undefined && maxPrice === undefined) { - // params.delete(`${FILTER_URL_PREFIX}price`); - // navigate(`${location.pathname}?${params.toString()}`); - // return; - // } - - // const price = { - // ...(minPrice === undefined ? {} : {min: minPrice}), - // ...(maxPrice === undefined ? {} : {max: maxPrice}), - // }; - // const newParams = filterInputToParams({price}, params); - // navigate(`${location.pathname}?${newParams.toString()}`); - // }, - // PRICE_RANGE_FILTER_DEBOUNCE, - // [minPrice, maxPrice], - // ); - - const onChangeMax = (event: SyntheticEvent) => { - const value = (event.target as HTMLInputElement).value; - const newMaxPrice = Number.isNaN(Number.parseFloat(value)) - ? undefined - : Number.parseFloat(value); - setMaxPrice(newMaxPrice); - }; - - const onChangeMin = (event: SyntheticEvent) => { - const value = (event.target as HTMLInputElement).value; - const newMinPrice = Number.isNaN(Number.parseFloat(value)) - ? undefined - : Number.parseFloat(value); - setMinPrice(newMinPrice); - }; - - return ( -
- - -
- ); -} - -export default function SortMenu({ - showSearchSort = false, -}: { - showSearchSort?: boolean; -}) { - const productShortItems: { label: string; key: SortParam }[] = [ - { label: "Featured", key: "featured" }, - { - label: "Price: Low - High", - key: "price-low-high", - }, - { - label: "Price: High - Low", - key: "price-high-low", - }, - { - label: "Best Selling", - key: "best-selling", - }, - { - label: "Newest", - key: "newest", - }, - ]; - - const searchSortItems: { label: string; key: SortParam }[] = [ - { - label: "Price: Low - High", - key: "price-low-high", - }, - { - label: "Price: High - Low", - key: "price-high-low", - }, - { - label: "Relevance", - key: "relevance", - }, - ]; - const items = showSearchSort ? searchSortItems : productShortItems; - const [params] = useSearchParams(); - const location = useLocation(); - const activeItem = - items.find((item) => item.key === params.get("sort")) || items[0]; - - return ( - - - Sort by - - - - {items.map((item) => ( - - {() => ( - -

- {item.label} -

- - )} - - ))} - - - ); -} diff --git a/app/modules/footer.tsx b/app/modules/footer.tsx index aced7097..4a5f8a70 100644 --- a/app/modules/footer.tsx +++ b/app/modules/footer.tsx @@ -14,8 +14,9 @@ import { IconLinkedinLogo, IconXLogo, } from "~/components/icons"; +import { useShopMenu } from "~/hooks/use-shop-menu"; import { cn } from "~/lib/cn"; -import type { ChildEnhancedMenuItem, EnhancedMenu } from "~/lib/utils"; +import type { ChildEnhancedMenuItem } from "~/lib/utils"; import { Input } from "~/modules/input"; import { CountrySelector } from "./country-selector"; @@ -34,13 +35,8 @@ let variants = cva("divide-y divide-line-subtle space-y-9", { }, }); -export function Footer({ - menu, - shopName, -}: { - menu?: EnhancedMenu; - shopName: string; -}) { +export function Footer() { + let { footerMenu, shopName } = useShopMenu(); let { footerWidth, socialFacebook, @@ -60,7 +56,7 @@ export function Footer({ newsletterButtonText, } = useThemeSettings(); - let { items = [] } = menu || {}; + let { items = [] } = footerMenu || {}; let socialItems = [ { name: "Instagram", diff --git a/app/modules/global-loading.tsx b/app/modules/global-loading.tsx index 80f2d4c4..e161f8d4 100644 --- a/app/modules/global-loading.tsx +++ b/app/modules/global-loading.tsx @@ -26,8 +26,6 @@ export function GlobalLoading() { return (
- role="progressbar" aria-hidden={!active} aria-valuetext={active ? "Loading" : undefined} className="fixed inset-x-0 left-0 top-0 z-50 h-1 animate-pulse" @@ -35,7 +33,7 @@ export function GlobalLoading() {
- {items.map((item, id) => { - let { title, ...rest } = item; - let level = getMaxDepth(item); - let isResourceType = - item.items.length && - item.items.every((item) => item?.resource !== null); - let Comp: React.FC = isResourceType - ? ImageMenu - : level > 2 - ? MultiMenu - : level === 2 - ? SingleMenu - : ItemHeader; - return ; - })} - - ); -} - -function MultiMenu(props: SingleMenuItem) { - const { - isOpen: isMenuOpen, - openDrawer: openMenu, - closeDrawer: closeMenu, - } = useDrawer(); - let { title, to, items } = props; - let content = ( - -
- {items.map((item, id) => ( -
- - {({ open }) => ( - <> - -
- - {item.title} - - {item?.items?.length > 0 && ( - - {open ? ( - - ) : ( - - )} - - )} -
- - {item?.items?.length > 0 ? ( -
- -
    - {item.items.map((subItem, ind) => ( -
  • - - {subItem.title} - -
    • - ))} -
- -
- ) : null} - - )} - -
- ))} -
- - ); - return ( -
-
- - {title} - - -
- {content} -
- ); -} - -function ImageMenu({ title, items, to }: SingleMenuItem) { - const { - isOpen: isMenuOpen, - openDrawer: openMenu, - closeDrawer: closeMenu, - } = useDrawer(); - let content = ( - -
- {items.map((item, id) => ( - -
- -
- {item.title} -
-
- - ))} -
- - ); - return ( -
-
- - {title} - - -
- {content} -
- ); -} - -function SingleMenu(props: SingleMenuItem) { - const { - isOpen: isMenuOpen, - openDrawer: openMenu, - closeDrawer: closeMenu, - } = useDrawer(); - let { title, items, to } = props; - let content = ( - -
-
    - {items.map((subItem, ind) => ( -
  • - - {subItem.title} - -
    • - ))} -
-
- - ); - return ( -
-
- - {title} - - -
- {content} -
- ); -} - -function ItemHeader({ title, to }: { title: string; to: string }) { - return ( -
- - {title} - -
- ); -} diff --git a/app/modules/icon.tsx b/app/modules/icon.tsx index d27d6f7b..67c6529a 100644 --- a/app/modules/icon.tsx +++ b/app/modules/icon.tsx @@ -584,74 +584,4 @@ export function IconSliders(props: IconProps) { /> ); - - /** - * @deprecated Use icon from `@/components/icons` instead - */ -} -export function IconFourGrid(props: IconProps) { - return ( - - - - - - - - - - - - - - - - - - - ); - - /** - * @deprecated Use icon from `@/components/icons` instead - */ -} -export function IconThreeGrid(props: IconProps) { - return ( - - - - - - - - - - - - ); - - /** - * @deprecated Use icon from `@/components/icons` instead - */ -} -export function IconTwoGrid(props: IconProps) { - return ( - - - - - - - ); - - /** - * @deprecated Use icon from `@/components/icons` instead - */ -} -export function IconOneGrid(props: IconProps) { - return ( - - - - ); } diff --git a/app/modules/layout.tsx b/app/modules/layout.tsx index ea90773a..b7f1421f 100644 --- a/app/modules/layout.tsx +++ b/app/modules/layout.tsx @@ -1,18 +1,11 @@ -import type { LayoutQuery } from "storefrontapi.generated"; -import type { EnhancedMenu } from "~/lib/utils"; +import { Header } from "~/components/header"; import { Footer } from "./footer"; -import { Header } from "./header"; -type LayoutProps = { +export function Layout({ + children, +}: { children: React.ReactNode; - layout?: LayoutQuery & { - headerMenu?: EnhancedMenu | null; - footerMenu?: EnhancedMenu | null; - }; -}; - -export function Layout({ children, layout }: LayoutProps) { - let { headerMenu, footerMenu } = layout || {}; +}) { return ( <>
@@ -21,16 +14,12 @@ export function Layout({ children, layout }: LayoutProps) { Skip to content
- {headerMenu && layout?.shop.name && ( -
- )} +
{children}
- {footerMenu && layout?.shop.name && ( -