diff --git a/app/components/Button.tsx b/app/components/Button.tsx index 45b42931..33d287e5 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -8,8 +8,8 @@ import { cva } from "class-variance-authority"; import type { HTMLAttributes } from "react"; import { forwardRef } from "react"; import { cn } from "~/lib/cn"; -import { IconCircleNotch } from "./Icons"; -import { Link } from "./Link"; +import { IconCircleNotch } from "./icons"; +import { Link } from "./link"; let variants = cva( [ @@ -57,7 +57,12 @@ 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-body", "border-b-body"], + link: [ + "bg-transparent pb-1 text-body", + "after:bg-body after:absolute after:left-0 after:bottom-0.5 after:w-full after:h-px", + "after:scale-x-100 after:transition-transform after:origin-right", + "hover:after:origin-left hover:after:animate-underline", + ], }, }, defaultVariants: { diff --git a/app/components/Checkbox.tsx b/app/components/Checkbox.tsx index 4dba7a51..72f8d18d 100644 --- a/app/components/Checkbox.tsx +++ b/app/components/Checkbox.tsx @@ -1,7 +1,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; import * as React from "react"; import { cn } from "~/lib/cn"; -import { IconCheck } from "./Icons"; +import { IconCheck } from "./icons"; interface CheckboxProps extends React.ComponentPropsWithoutRef { diff --git a/app/components/Logo.tsx b/app/components/Logo.tsx index acc93831..f98e8935 100644 --- a/app/components/Logo.tsx +++ b/app/components/Logo.tsx @@ -1,7 +1,7 @@ import { Image } from "@shopify/hydrogen"; import { useThemeSettings } from "@weaverse/hydrogen"; import clsx from "clsx"; -import { Link } from "~/components/Link"; +import { Link } from "~/components/link"; export function Logo({ isTransparent, diff --git a/app/components/Section.tsx b/app/components/Section.tsx index 461fec6a..27f1bb48 100644 --- a/app/components/Section.tsx +++ b/app/components/Section.tsx @@ -4,15 +4,15 @@ import type { } from "@weaverse/hydrogen"; import type { VariantProps } from "class-variance-authority"; import { cva } from "class-variance-authority"; -import type { HTMLAttributes } from "react"; import type React from "react"; +import type { HTMLAttributes } from "react"; import { forwardRef } from "react"; import { cn } from "~/lib/cn"; -import type { BackgroundImageProps } from "./BackgroundImage"; -import { backgroundInputs } from "./BackgroundImage"; -import type { OverlayProps } from "./Overlay"; -import { overlayInputs } from "./Overlay"; -import { OverlayAndBackground } from "./OverlayAndBackground"; +import type { BackgroundImageProps } from "./background-image"; +import { backgroundInputs } from "./background-image"; +import type { OverlayProps } from "./overlay"; +import { overlayInputs } from "./overlay"; +import { OverlayAndBackground } from "./overlay-and-background"; export type BackgroundProps = BackgroundImageProps & { backgroundFor: "section" | "content"; @@ -36,7 +36,7 @@ let variants = cva("relative", { width: { full: "w-full h-full", stretch: "w-full h-full", - fixed: "w-full h-full max-w-[var(--page-width,1280px)] mx-auto", + fixed: "w-full h-full max-w-page mx-auto", }, padding: { full: "", diff --git a/app/components/BackgroundImage.tsx b/app/components/background-image.tsx similarity index 100% rename from app/components/BackgroundImage.tsx rename to app/components/background-image.tsx diff --git a/app/components/CompareAtPrice.tsx b/app/components/compare-at-price.tsx similarity index 100% rename from app/components/CompareAtPrice.tsx rename to app/components/compare-at-price.tsx diff --git a/app/components/index.ts b/app/components/index.ts deleted file mode 100644 index 54699073..00000000 --- a/app/components/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type { HydrogenComponent } from "@weaverse/hydrogen"; - -import * as Button from "./Button"; -import * as Heading from "./Heading"; -import * as Paragraph from "./Paragraph"; -import * as SubHeading from "./SubHeading"; - -export let sharedComponents: HydrogenComponent[] = [ - SubHeading, - Heading, - Paragraph, - Button, -]; diff --git a/app/components/OverlayAndBackground.tsx b/app/components/overlay-and-background.tsx similarity index 77% rename from app/components/OverlayAndBackground.tsx rename to app/components/overlay-and-background.tsx index e38db90b..be8e84f0 100644 --- a/app/components/OverlayAndBackground.tsx +++ b/app/components/overlay-and-background.tsx @@ -1,7 +1,7 @@ -import type { BackgroundImageProps } from "./BackgroundImage"; -import { BackgroundImage } from "./BackgroundImage"; -import type { OverlayProps } from "./Overlay"; -import { Overlay } from "./Overlay"; +import type { BackgroundImageProps } from "./background-image"; +import { BackgroundImage } from "./background-image"; +import type { OverlayProps } from "./overlay"; +import { Overlay } from "./overlay"; export interface OverlayAndBackgroundProps extends BackgroundImageProps, diff --git a/app/hooks/useAnalytics.tsx b/app/hooks/use-analytics.tsx similarity index 94% rename from app/hooks/useAnalytics.tsx rename to app/hooks/use-analytics.tsx index 2534c403..f8bc6e07 100644 --- a/app/hooks/useAnalytics.tsx +++ b/app/hooks/use-analytics.tsx @@ -7,8 +7,7 @@ import { useShopifyCookies, } from "@shopify/hydrogen"; import { useEffect, useRef } from "react"; - -import { usePageAnalytics } from "./usePageAnalytics"; +import { usePageAnalytics } from "./use-page-analytics"; export function useAnalytics(hasUserConsent: boolean) { useShopifyCookies({ hasUserConsent }); diff --git a/app/hooks/useAsyncCart.ts b/app/hooks/use-async-cart.ts similarity index 100% rename from app/hooks/useAsyncCart.ts rename to app/hooks/use-async-cart.ts diff --git a/app/hooks/useCartFetchers.tsx b/app/hooks/use-cart-fetchers.tsx similarity index 100% rename from app/hooks/useCartFetchers.tsx rename to app/hooks/use-cart-fetchers.tsx diff --git a/app/hooks/useIsHydrated.tsx b/app/hooks/use-is-hydrated.tsx similarity index 100% rename from app/hooks/useIsHydrated.tsx rename to app/hooks/use-is-hydrated.tsx diff --git a/app/hooks/usePageAnalytics.tsx b/app/hooks/use-page-analytics.tsx similarity index 60% rename from app/hooks/usePageAnalytics.tsx rename to app/hooks/use-page-analytics.tsx index d420d091..cedabe65 100644 --- a/app/hooks/usePageAnalytics.tsx +++ b/app/hooks/use-page-analytics.tsx @@ -1,7 +1,6 @@ import { useMatches } from "@remix-run/react"; import type { ShopifyPageViewPayload } from "@shopify/hydrogen"; import { useMemo } from "react"; - import { DEFAULT_LOCALE } from "~/lib/utils"; export function usePageAnalytics({ @@ -9,26 +8,22 @@ export function usePageAnalytics({ }: { hasUserConsent: boolean; }) { - const matches = useMatches(); + let matches = useMatches(); return useMemo(() => { - const data: Record = {}; - - matches.forEach((event) => { - const eventData = event?.data as Record; + let data: Record = {}; + for (let match of matches) { + let eventData = match?.data as Record; if (eventData) { - eventData["analytics"] && Object.assign(data, eventData["analytics"]); - - const selectedLocale = - (eventData["selectedLocale"] as typeof DEFAULT_LOCALE) || - DEFAULT_LOCALE; - + eventData.analytics && Object.assign(data, eventData.analytics); + let selectedLocale = + (eventData.selectedLocale as typeof DEFAULT_LOCALE) || DEFAULT_LOCALE; Object.assign(data, { currency: selectedLocale.currency, acceptedLanguage: selectedLocale.language, }); } - }); + } return { ...data, diff --git a/app/modules/predictive-search/usePredictiveSearch.ts b/app/hooks/use-predictive-search.ts similarity index 97% rename from app/modules/predictive-search/usePredictiveSearch.ts rename to app/hooks/use-predictive-search.ts index b5285898..fb7478fd 100644 --- a/app/modules/predictive-search/usePredictiveSearch.ts +++ b/app/hooks/use-predictive-search.ts @@ -4,7 +4,7 @@ import type { NormalizedPredictiveSearch, NormalizedPredictiveSearchResults, UseSearchReturn, -} from "./types"; +} from "~/types/predictive-search"; export const NO_PREDICTIVE_SEARCH_RESULTS: NormalizedPredictiveSearchResults = [ { type: "queries", items: [] }, diff --git a/app/modules/Cart.tsx b/app/modules/Cart.tsx index 3427df16..951d8175 100644 --- a/app/modules/Cart.tsx +++ b/app/modules/Cart.tsx @@ -15,12 +15,12 @@ import clsx from "clsx"; import { useRef } from "react"; import useScroll from "react-use/esm/useScroll"; import type { CartApiQueryFragment } from "storefrontapi.generated"; -import Button from "~/components/Button"; -import { IconTrash } from "~/components/Icons"; -import { getInputStyleClasses } from "~/lib/utils"; -import { Text } from "~/modules"; -import { Link } from "~/components/Link"; -import { CartBestSellers } from "./CartBestSellers"; +import { Link } from "~/components/link"; +import Button from "~/components/button"; +import { IconTrash } from "~/components/icons"; +import { getImageAspectRatio } from "~/lib/utils"; +import { Text } from "~/modules/text"; +import { CartBestSellers } from "./cart-best-sellers"; type CartLine = OptimisticCart["lines"]["nodes"][0]; type Layouts = "page" | "drawer"; @@ -53,18 +53,23 @@ export function CartDetails({ cart: OptimisticCart; }) { let cartHasItems = !!cart && cart.totalQuantity > 0; - let container = { - drawer: "grid grid-cols-1 h-screen-no-nav grid-rows-[1fr_auto]", - page: "w-full pb-12 grid md:grid-cols-2 md:items-start gap-8 md:gap-8 lg:gap-12", - }; - return ( -
+
{cartHasItems && ( - + )}
@@ -108,24 +113,16 @@ function CartDiscounts({ {/* Show an input to apply a discount */} -
+
- +
@@ -168,30 +165,43 @@ function CartLines({ ref={scrollRef} aria-labelledby="cart-contents" className={clsx([ - y > 0 ? "border-t" : "", - layout === "page" - ? "flex-grow md:translate-y-4" - : "px-6 pb-6 sm-max:pt-2 overflow-auto transition md:px-12", + y > 0 ? "border-t border-line/50" : "", + layout === "page" && "flex-grow md:translate-y-4 lg:col-span-2", + layout === "drawer" && "px-5 pb-5 overflow-auto transition", ])} > -
    +
      {currentLines.map((line) => ( - + ))}
    ); } -function CartCheckoutActions({ checkoutUrl }: { checkoutUrl: string }) { +function CartCheckoutActions({ + checkoutUrl, + layout, +}: { checkoutUrl: string; layout: Layouts }) { if (!checkoutUrl) return null; return ( -
    +
    {/* @todo: */} + {layout === "drawer" && ( + + )}
    ); } @@ -205,26 +215,28 @@ function CartSummary({ cost: CartApiQueryFragment["cost"]; layout: Layouts; }) { - let summary = { - drawer: "grid gap-4 p-6 border-t md:px-12", - page: "sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 bg-background/5 rounded w-full", - }; - return ( -
    +

    Order summary

    - Subtotal - +
    Subtotal
    +
    {cost?.subtotalAmount?.amount ? ( ) : ( "-" )} - +
    {children} @@ -237,7 +249,7 @@ type OptimisticData = { quantity?: number; }; -function CartLineItem({ line }: { line: CartLine }) { +function CartLineItem({ line, layout }: { line: CartLine; layout: Layouts }) { let optimisticData = useOptimisticData(line?.id); if (!line?.id) return null; @@ -255,69 +267,83 @@ function CartLineItem({ line }: { line: CartLine }) { display: optimisticData?.action === "remove" ? "none" : "flex", }} > -
    +
    {merchandise.image && ( {merchandise.title} )}
    - -
    -
    -
    - {merchandise?.product?.handle ? ( - - {merchandise?.product?.title || ""} - - ) : ( - {merchandise?.product?.title || ""} - )} -
    -
    - {(merchandise?.selectedOptions || []) - .filter((option) => option.value !== "Default Title") - .map((option) => ( - - {option.name}: {option.value} - - ))} -
    - -
    -
    - +
    +
    +
    +
    + {merchandise?.product?.handle ? ( + + + {merchandise?.product?.title || ""} + + + ) : ( +

    {merchandise?.product?.title || ""}

    + )} +
    +
    + {(merchandise?.selectedOptions || []) + .filter((option) => option.value !== "Default Title") + .map((option) => ( +
    + {option.name}: {option.value} +
    + ))}
    -
    + {layout === "drawer" && ( + + )}
    - +
    + + {layout === "page" && } - +
    ); } -function ItemRemoveButton({ lineId }: { lineId: CartLine["id"] }) { +function ItemRemoveButton({ + lineId, + className, +}: { lineId: CartLine["id"]; className?: string }) { return ( @@ -341,13 +367,13 @@ function CartLineQuantityAdjust({ line }: { line: CartLine }) { -
    +
    )}
    diff --git a/app/modules/ProductGallery.tsx b/app/modules/ProductGallery.tsx deleted file mode 100644 index 358be753..00000000 --- a/app/modules/ProductGallery.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { Image } from "@shopify/hydrogen"; -import clsx from "clsx"; - -import type { MediaFragment } from "storefrontapi.generated"; - -/** - * A client component that defines a media gallery for hosting images, 3D models, and videos of products - */ -export function ProductGallery({ - media, - className, -}: { - media: MediaFragment[]; - className?: string; -}) { - if (!media.length) { - return null; - } - - return ( -
    - {media.map((med, i) => { - const isFirst = i === 0; - const isFourth = i === 3; - const isFullWidth = i % 3 === 0; - - const image = - med.__typename === "MediaImage" - ? { ...med.image, altText: med.alt || "Product image" } - : null; - - const style = [ - isFullWidth ? "md:col-span-2" : "md:col-span-1", - isFirst || isFourth ? "" : "md:aspect-[4/5]", - "aspect-square snap-center card-image bg-white w-mobileGallery md:w-full", - ].join(" "); - - return ( -
    - {image && ( - - )} -
    - ); - })} -
    - ); -} diff --git a/app/modules/Text.tsx b/app/modules/Text.tsx index b5ad047e..4ff5197e 100644 --- a/app/modules/Text.tsx +++ b/app/modules/Text.tsx @@ -1,5 +1,4 @@ import clsx from "clsx"; - import { formatText, missingClass } from "~/lib/utils"; export function Text({ diff --git a/app/modules/AccountAddressBook.tsx b/app/modules/account-address-book.tsx similarity index 95% rename from app/modules/AccountAddressBook.tsx rename to app/modules/account-address-book.tsx index afb5f274..868a44ef 100644 --- a/app/modules/AccountAddressBook.tsx +++ b/app/modules/account-address-book.tsx @@ -1,8 +1,9 @@ import { Form } from "@remix-run/react"; import type { CustomerAddress } from "@shopify/hydrogen/customer-account-api-types"; import type { CustomerDetailsFragment } from "customer-accountapi.generated"; -import { Button, Text } from "~/modules"; -import { Link } from "~/components/Link"; +import { Link } from "~/components/link"; +import { Button } from "~/modules/Button"; +import { Text } from "~/modules/text"; export function AccountAddressBook({ customer, diff --git a/app/modules/AccountDetails.tsx b/app/modules/account-details.tsx similarity index 96% rename from app/modules/AccountDetails.tsx rename to app/modules/account-details.tsx index df5af9f0..16b6c1f0 100644 --- a/app/modules/AccountDetails.tsx +++ b/app/modules/account-details.tsx @@ -1,5 +1,5 @@ import type { CustomerDetailsFragment } from "customer-accountapi.generated"; -import { Link } from "~/components/Link"; +import { Link } from "~/components/link"; export function AccountDetails({ customer, diff --git a/app/modules/AddToCartButton.tsx b/app/modules/add-to-cart-button.tsx similarity index 96% rename from app/modules/AddToCartButton.tsx rename to app/modules/add-to-cart-button.tsx index ec41eafe..9e9a8972 100644 --- a/app/modules/AddToCartButton.tsx +++ b/app/modules/add-to-cart-button.tsx @@ -10,8 +10,8 @@ import { sendShopifyAnalytics, } from "@shopify/hydrogen"; import { useEffect } from "react"; -import Button from "~/components/Button"; -import { usePageAnalytics } from "~/hooks/usePageAnalytics"; +import Button from "~/components/button"; +import { usePageAnalytics } from "~/hooks/use-page-analytics"; export function AddToCartButton({ children, diff --git a/app/modules/CartBestSellers.tsx b/app/modules/cart-best-sellers.tsx similarity index 96% rename from app/modules/CartBestSellers.tsx rename to app/modules/cart-best-sellers.tsx index 9da445f9..b40f5e0a 100644 --- a/app/modules/CartBestSellers.tsx +++ b/app/modules/cart-best-sellers.tsx @@ -5,9 +5,9 @@ import type { } from "@shopify/hydrogen/storefront-api-types"; import clsx from "clsx"; import { useEffect, useId, useMemo } from "react"; -import { Skeleton } from "~/components/Skeleton"; +import { Skeleton } from "~/components/skeleton"; import { usePrefixPathWithLocale } from "~/lib/utils"; -import { ProductCard } from "~/modules"; +import { ProductCard } from "./product-card"; interface CartBestSellersProps { count: number; diff --git a/app/modules/CartLoading.tsx b/app/modules/cart-loading.tsx similarity index 100% rename from app/modules/CartLoading.tsx rename to app/modules/cart-loading.tsx diff --git a/app/modules/CountrySelector.tsx b/app/modules/country-selector.tsx similarity index 98% rename from app/modules/CountrySelector.tsx rename to app/modules/country-selector.tsx index 292d542a..30efcebf 100644 --- a/app/modules/CountrySelector.tsx +++ b/app/modules/country-selector.tsx @@ -16,7 +16,7 @@ import { PopoverButton, PopoverPanel, } from "@headlessui/react"; -import { IconCaretDown, IconCheckCircle } from "~/components/Icons"; +import { IconCaretDown, IconCheckCircle } from "~/components/icons"; import { getCountryUrlPath } from "~/lib/locale"; import type { Localizations } from "~/lib/type"; import { DEFAULT_LOCALE } from "~/lib/utils"; diff --git a/app/modules/CustomAnalytics.tsx b/app/modules/custom-analytics.tsx similarity index 100% rename from app/modules/CustomAnalytics.tsx rename to app/modules/custom-analytics.tsx diff --git a/app/modules/DrawerFilter.tsx b/app/modules/drawer-filter.tsx similarity index 97% rename from app/modules/DrawerFilter.tsx rename to app/modules/drawer-filter.tsx index 002c7f22..c6166327 100644 --- a/app/modules/DrawerFilter.tsx +++ b/app/modules/drawer-filter.tsx @@ -17,14 +17,14 @@ import type { import clsx from "clsx"; import type { SyntheticEvent } from "react"; import { useState } from "react"; -import { Checkbox } from "~/components/Checkbox"; -import { IconCaretDown, IconCaretRight } from "~/components/Icons"; +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 "."; -import { Button } from "./Button"; -import { Drawer, useDrawer } from "./Drawer"; +import { Input } from "./input"; +import { Button } from "./button"; +import { Drawer, useDrawer } from "./drawer"; import { IconCaret, IconFourGrid, @@ -32,7 +32,7 @@ import { IconSliders, IconThreeGrid, IconTwoGrid, -} from "./Icon"; +} from "./icon"; type DrawerFilterProps = { productNumber?: number; diff --git a/app/modules/FeaturedSection.tsx b/app/modules/featured-section.tsx similarity index 80% rename from app/modules/FeaturedSection.tsx rename to app/modules/featured-section.tsx index f40c579c..7c0cd542 100644 --- a/app/modules/FeaturedSection.tsx +++ b/app/modules/featured-section.tsx @@ -2,15 +2,15 @@ import { useFetcher } from "@remix-run/react"; import { useEffect } from "react"; import { usePrefixPathWithLocale } from "~/lib/utils"; import type { FeaturedData } from "~/routes/($locale).featured-products"; -import { ProductSwimlane } from "./ProductSwimlane"; +import { ProductSwimlane } from "./product-swimlane"; export function FeaturedSection() { const { load, data } = useFetcher(); const path = usePrefixPathWithLocale("/featured-products"); + // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect(() => { load(path); - // eslint-disable-next-line react-hooks/exhaustive-deps }, [path]); if (!data) return null; diff --git a/app/modules/GenericError.tsx b/app/modules/generic-error.tsx similarity index 94% rename from app/modules/GenericError.tsx rename to app/modules/generic-error.tsx index e9d039df..12b13a32 100644 --- a/app/modules/GenericError.tsx +++ b/app/modules/generic-error.tsx @@ -1,5 +1,5 @@ -import Button from "~/components/Button"; -import { PageHeader, Text } from "./Text"; +import Button from "~/components/button"; +import { PageHeader, Text } from "./text"; export function GenericError({ error, diff --git a/app/modules/global-loading.tsx b/app/modules/global-loading.tsx index 6bb47e5e..80f2d4c4 100644 --- a/app/modules/global-loading.tsx +++ b/app/modules/global-loading.tsx @@ -1,5 +1,5 @@ import { useNavigation } from "@remix-run/react"; -import cx from "clsx"; +import clsx from "clsx"; import { useEffect, useRef, useState } from "react"; export function GlobalLoading() { @@ -34,7 +34,7 @@ export function GlobalLoading() { >
    -
    +
    {items.map((item, id) => @@ -97,7 +97,7 @@ function DropdownMenu(props: SingleMenuItem) { let { title, items, to } = props; return ( -
    +
      {items.map((childItem) => ( @@ -117,7 +117,7 @@ function DropdownMenu(props: SingleMenuItem) { function ImagesMenu({ title, items, to }: SingleMenuItem) { return ( -
      +
      {items.map((item, id) => ( diff --git a/app/modules/header/menu/MobileMenu.tsx b/app/modules/header/menu/mobile-menu.tsx similarity index 98% rename from app/modules/header/menu/MobileMenu.tsx rename to app/modules/header/menu/mobile-menu.tsx index 0dd6b20b..1d366ded 100644 --- a/app/modules/header/menu/MobileMenu.tsx +++ b/app/modules/header/menu/mobile-menu.tsx @@ -6,11 +6,11 @@ import { import { Link } from "@remix-run/react"; import { Image } from "@shopify/hydrogen"; import clsx from "clsx"; -import { IconCaretDown, IconCaretRight } from "~/components/Icons"; +import { IconCaretDown, IconCaretRight } from "~/components/icons"; import { getMaxDepth } from "~/lib/menu"; import type { SingleMenuItem } from "~/lib/type"; import type { EnhancedMenu } from "~/lib/utils"; -import { Drawer, useDrawer } from "~/modules/Drawer"; +import { Drawer, useDrawer } from "~/modules/drawer"; export function MobileMenu({ menu }: { menu: EnhancedMenu }) { let items = menu.items as unknown as SingleMenuItem[]; diff --git a/app/modules/header/MobileHeader.tsx b/app/modules/header/mobile-header.tsx similarity index 72% rename from app/modules/header/MobileHeader.tsx rename to app/modules/header/mobile-header.tsx index 74cc166c..5d3ca4e2 100644 --- a/app/modules/header/MobileHeader.tsx +++ b/app/modules/header/mobile-header.tsx @@ -6,14 +6,14 @@ import { useRouteLoaderData, } from "@remix-run/react"; import { useThemeSettings } from "@weaverse/hydrogen"; -import clsx from "clsx"; import { Suspense } from "react"; import useWindowScroll from "react-use/esm/useWindowScroll"; -import { IconList, IconMagnifyingGlass, IconUser } from "~/components/Icons"; -import { Logo } from "~/components/Logo"; +import { IconList, 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 "./CartCount"; +import { CartCount } from "./cart-count"; export function MobileHeader({ shopName, @@ -28,18 +28,27 @@ export function MobileHeader({ let isHome = useIsHomePath(); let { enableTransparentHeader } = useThemeSettings(); let { y } = useWindowScroll(); - let enableTransparent = enableTransparentHeader && isHome; - let isTransparent = enableTransparent && y < 50; let params = useParams(); + let scrolled = y >= 50; + let isTransparent = enableTransparentHeader && isHome && !scrolled; + return (
      diff --git a/app/modules/index.ts b/app/modules/index.ts deleted file mode 100644 index af94d148..00000000 --- a/app/modules/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -export { Layout } from "./Layout"; -export { Drawer, useDrawer } from "./Drawer"; -export { Heading, Section, Text, PageHeader } from "./Text"; -export { Input } from "./Input"; -export { ProductGallery } from "./ProductGallery"; -export { ProductCard } from "./ProductCard"; -export { ProductSwimlane } from "./ProductSwimlane"; -export { Button } from "./Button"; -export { CountrySelector } from "./CountrySelector"; -export { Cart } from "./Cart"; -export { CartLoading } from "./CartLoading"; -export { OrderCard } from "./OrderCard"; -export { AccountDetails } from "./AccountDetails"; -export { AccountAddressBook } from "./AccountAddressBook"; -export { Modal } from "./Modal"; -export { SortFilter } from "./SortFilter"; -export { Grid } from "./Grid"; -export { AddToCartButton } from "./AddToCartButton"; -export * from "./Icon"; diff --git a/app/modules/NotFound.tsx b/app/modules/not-found.tsx similarity index 80% rename from app/modules/NotFound.tsx rename to app/modules/not-found.tsx index 2ec6027f..f3c5ffbe 100644 --- a/app/modules/NotFound.tsx +++ b/app/modules/not-found.tsx @@ -1,6 +1,6 @@ -import { Button } from "./Button"; -import { FeaturedSection } from "./FeaturedSection"; -import { PageHeader, Text } from "./Text"; +import { Button } from "./button"; +import { FeaturedSection } from "./featured-section"; +import { PageHeader, Text } from "./text"; export function NotFound({ type = "page" }: { type?: string }) { const heading = `We’ve lost this ${type}`; diff --git a/app/modules/OrderCard.tsx b/app/modules/order-card.tsx similarity index 97% rename from app/modules/OrderCard.tsx rename to app/modules/order-card.tsx index b656530c..9bcd4f91 100644 --- a/app/modules/OrderCard.tsx +++ b/app/modules/order-card.tsx @@ -1,8 +1,8 @@ import { Image, flattenConnection } from "@shopify/hydrogen"; import type { OrderCardFragment } from "customer-accountapi.generated"; import { statusMessage } from "~/lib/utils"; -import { Heading, Text } from "~/modules"; -import { Link } from "~/components/Link"; +import { Heading, Text } from "~/modules/text"; +import { Link } from "~/components/link"; export function OrderCard({ order }: { order: OrderCardFragment }) { if (!order?.id) return null; diff --git a/app/modules/predictive-search/PredictiveSearch.tsx b/app/modules/predictive-search/index.tsx similarity index 80% rename from app/modules/predictive-search/PredictiveSearch.tsx rename to app/modules/predictive-search/index.tsx index 61e0f5e0..247f914b 100644 --- a/app/modules/predictive-search/PredictiveSearch.tsx +++ b/app/modules/predictive-search/index.tsx @@ -1,7 +1,7 @@ -import { IconMagnifyingGlass } from "~/components/Icons"; -import { Input } from "~/modules"; -import { PredictiveSearchResults } from "./PredictiveSearchResults"; -import { PredictiveSearchForm } from "./SearchForm"; +import { IconMagnifyingGlass } from "~/components/icons"; +import { Input } from "~/modules/input"; +import { PredictiveSearchResults } from "./predictive-search-results"; +import { PredictiveSearchForm } from "./search-form"; export function PredictiveSearch({ isOpen }: { isOpen?: boolean }) { return ( diff --git a/app/modules/predictive-search/PredictiveSearchResult.tsx b/app/modules/predictive-search/predictive-search-result.tsx similarity index 95% rename from app/modules/predictive-search/PredictiveSearchResult.tsx rename to app/modules/predictive-search/predictive-search-result.tsx index 4b814fce..91c2367d 100644 --- a/app/modules/predictive-search/PredictiveSearchResult.tsx +++ b/app/modules/predictive-search/predictive-search-result.tsx @@ -1,11 +1,11 @@ import { Link } from "@remix-run/react"; import clsx from "clsx"; -import { SearchResultItem } from "./ResultItem"; +import { SearchResultItem } from "./result-item"; import type { NormalizedPredictiveSearchResultItem, NormalizedPredictiveSearchResults, SearchResultTypeProps, -} from "./types"; +} from "../../types/predictive-search"; export function PredictiveSearchResult({ goToSearchResult, diff --git a/app/modules/predictive-search/PredictiveSearchResults.tsx b/app/modules/predictive-search/predictive-search-results.tsx similarity index 81% rename from app/modules/predictive-search/PredictiveSearchResults.tsx rename to app/modules/predictive-search/predictive-search-results.tsx index e3a2703f..405d59a7 100644 --- a/app/modules/predictive-search/PredictiveSearchResults.tsx +++ b/app/modules/predictive-search/predictive-search-results.tsx @@ -1,7 +1,7 @@ -import { Link } from "@remix-run/react"; -import { PredictiveSearchResult } from "./PredictiveSearchResult"; -import { usePredictiveSearch } from "./usePredictiveSearch"; -import { IconArrowRight } from "~/components/Icons"; +import Button from "~/components/button"; +import { IconArrowRight } from "~/components/icons"; +import { usePredictiveSearch } from "~/hooks/use-predictive-search"; +import { PredictiveSearchResult } from "./predictive-search-result"; export function PredictiveSearchResults() { let { results, totalResults, searchTerm, searchInputRef } = @@ -33,7 +33,7 @@ export function PredictiveSearchResults() { ); } return ( -
      +
      @@ -62,14 +62,23 @@ export function PredictiveSearchResults() { /> {searchTerm.current && (
      - + View all products + + + {/* View all products - + */}
      )}
      diff --git a/app/modules/predictive-search/ResultItem.tsx b/app/modules/predictive-search/result-item.tsx similarity index 91% rename from app/modules/predictive-search/ResultItem.tsx rename to app/modules/predictive-search/result-item.tsx index f1b1ea72..efe170f5 100644 --- a/app/modules/predictive-search/ResultItem.tsx +++ b/app/modules/predictive-search/result-item.tsx @@ -1,10 +1,10 @@ import { Image, Money } from "@shopify/hydrogen"; -import type { SearchResultItemProps } from "./types"; -import { Link } from "~/components/Link"; -import clsx from "clsx"; import type { MoneyV2 } from "@shopify/hydrogen/storefront-api-types"; -import { CompareAtPrice } from "../../components/CompareAtPrice"; +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"; export function SearchResultItem({ goToSearchResult, diff --git a/app/modules/predictive-search/SearchForm.tsx b/app/modules/predictive-search/search-form.tsx similarity index 97% rename from app/modules/predictive-search/SearchForm.tsx rename to app/modules/predictive-search/search-form.tsx index e9fda441..c9f5d867 100644 --- a/app/modules/predictive-search/SearchForm.tsx +++ b/app/modules/predictive-search/search-form.tsx @@ -3,7 +3,7 @@ import { useEffect, useRef } from "react"; import type { NormalizedPredictiveSearchResults, SearchFromProps, -} from "./types"; +} from "../../types/predictive-search"; /** * Search form component that posts search requests to the `/search` route diff --git a/app/modules/ProductCard.tsx b/app/modules/product-card.tsx similarity index 94% rename from app/modules/ProductCard.tsx rename to app/modules/product-card.tsx index 42b235e6..95824b74 100644 --- a/app/modules/ProductCard.tsx +++ b/app/modules/product-card.tsx @@ -5,10 +5,12 @@ import clsx from "clsx"; import type { ProductCardFragment } from "storefrontapi.generated"; import { getProductPlaceholder } from "~/lib/placeholders"; import { isDiscounted, isNewArrival } from "~/lib/utils"; -import { AddToCartButton, Button, Text } from "~/modules"; -import { Link } from "~/components/Link"; -import { QuickViewTrigger } from "./QuickView"; -import { CompareAtPrice } from "~/components/CompareAtPrice"; +import { Button } from "~/modules/button"; +import { Text } from "~/modules/text"; +import { Link } from "~/components/link"; +import { QuickViewTrigger } from "./quick-view"; +import { CompareAtPrice } from "~/components/compare-at-price"; +import { AddToCartButton } from "./add-to-cart-button"; export function ProductCard({ product, diff --git a/app/modules/product-form/judgeme-review.tsx b/app/modules/product-form/judgeme-review.tsx index f530cb16..d18e9686 100644 --- a/app/modules/product-form/judgeme-review.tsx +++ b/app/modules/product-form/judgeme-review.tsx @@ -5,10 +5,9 @@ import type { } from "@weaverse/hydrogen"; import { useParentInstance } from "@weaverse/hydrogen"; import { forwardRef, useEffect } from "react"; - import { usePrefixPathWithLocale } from "~/lib/utils"; +import { StarRating } from "../star-rating"; -import { StarRating } from "../StarRating"; type JudgemeReviewsData = { rating: number; reviewNumber: number; diff --git a/app/modules/ProductSwimlane.tsx b/app/modules/product-swimlane.tsx similarity index 90% rename from app/modules/ProductSwimlane.tsx rename to app/modules/product-swimlane.tsx index 3bf47149..9f46d516 100644 --- a/app/modules/ProductSwimlane.tsx +++ b/app/modules/product-swimlane.tsx @@ -1,5 +1,6 @@ import type { HomepageFeaturedProductsQuery } from "storefrontapi.generated"; -import { ProductCard, Section } from "~/modules"; +import { Section } from "~/modules/text"; +import { ProductCard } from "./product-card"; const mockProducts = { nodes: new Array(12).fill(""), diff --git a/app/modules/QuickView.tsx b/app/modules/quick-view.tsx similarity index 98% rename from app/modules/QuickView.tsx rename to app/modules/quick-view.tsx index 4110cd6c..fdf2e9f9 100644 --- a/app/modules/QuickView.tsx +++ b/app/modules/quick-view.tsx @@ -6,9 +6,9 @@ import { useEffect, useState } from "react"; import type { ProductData } from "~/lib/products"; import { getExcerpt } from "~/lib/utils"; import { ProductDetail } from "~/sections/product-information/product-detail"; -import { AddToCartButton } from "./AddToCartButton"; -import { Button } from "./Button"; -import { Modal } from "./Modal"; +import { AddToCartButton } from "./add-to-cart-button"; +import { Button } from "./button"; +import { Modal } from "./modal"; import { ProductMedia } from "./product-form/product-media"; import { Quantity } from "./product-form/quantity"; import { ProductVariants } from "./product-form/variants"; diff --git a/app/modules/SortFilter.tsx b/app/modules/sort-filter.tsx similarity index 98% rename from app/modules/SortFilter.tsx rename to app/modules/sort-filter.tsx index fbaa267c..58580268 100644 --- a/app/modules/SortFilter.tsx +++ b/app/modules/sort-filter.tsx @@ -19,7 +19,8 @@ import type { import type { SyntheticEvent } from "react"; import { useMemo, useState } from "react"; import useDebounce from "react-use/esm/useDebounce"; -import { Heading, IconCaret, IconFilters, IconXMark, Text } from "~/modules"; +import { IconCaret, IconFilters, IconXMark } from "~/modules/icon"; +import { Heading, Text } from "~/modules/text"; export type AppliedFilter = { label: string; diff --git a/app/modules/StarRating.tsx b/app/modules/star-rating.tsx similarity index 91% rename from app/modules/StarRating.tsx rename to app/modules/star-rating.tsx index ff43d183..50eec234 100644 --- a/app/modules/StarRating.tsx +++ b/app/modules/star-rating.tsx @@ -1,4 +1,4 @@ -import { IconFilledStar, IconStar, IconStarHalf } from "."; +import { IconFilledStar, IconStar, IconStarHalf } from "./icon"; export function StarRating({ rating }: { rating: number }) { let filledStar = ; diff --git a/app/root.tsx b/app/root.tsx index 23b9bcf0..effc5c40 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -30,13 +30,13 @@ import { defer } from "@shopify/remix-oxygen"; import { withWeaverse } from "@weaverse/hydrogen"; import invariant from "tiny-invariant"; import { seoPayload } from "~/lib/seo.server"; -import { Layout as PageLayout } from "~/modules"; -import { CustomAnalytics } from "~/modules/CustomAnalytics"; +import { Layout as PageLayout } from "~/modules/layout"; +import { CustomAnalytics } from "~/modules/custom-analytics"; import { GlobalLoading } from "~/modules/global-loading"; -import { TooltipProvider } from "./components/Tooltip"; +import { TooltipProvider } from "./components/tooltip"; import { DEFAULT_LOCALE, parseMenu } from "./lib/utils"; -import { GenericError } from "./modules/GenericError"; -import { NotFound } from "./modules/NotFound"; +import { GenericError } from "./modules/generic-error"; +import { NotFound } from "./modules/not-found"; import styles from "./styles/app.css?url"; import { GlobalStyle } from "./weaverse/style"; diff --git a/app/routes/($locale).$shopid.orders.$token.authenticate.tsx b/app/routes/($locale).$shopid.orders.$token.authenticate.tsx index 55ec9314..bb7c37e7 100644 --- a/app/routes/($locale).$shopid.orders.$token.authenticate.tsx +++ b/app/routes/($locale).$shopid.orders.$token.authenticate.tsx @@ -1,7 +1,7 @@ import { type LoaderFunctionArgs, redirect } from "@shopify/remix-oxygen"; import invariant from "tiny-invariant"; - -import { Button, PageHeader } from "~/modules"; +import { Button } from "~/modules/button"; +import { PageHeader } from "~/modules/text"; /* If your online store had active orders before you launched your Hydrogen storefront, diff --git a/app/routes/($locale).account.address.$id.tsx b/app/routes/($locale).account.address.$id.tsx index 53bdd325..748aebd8 100644 --- a/app/routes/($locale).account.address.$id.tsx +++ b/app/routes/($locale).account.address.$id.tsx @@ -9,15 +9,14 @@ import { flattenConnection } from "@shopify/hydrogen"; import type { CustomerAddressInput } from "@shopify/hydrogen/customer-account-api-types"; import { type ActionFunction, json, redirect } from "@shopify/remix-oxygen"; import invariant from "tiny-invariant"; - import { CREATE_ADDRESS_MUTATION, DELETE_ADDRESS_MUTATION, UPDATE_ADDRESS_MUTATION, } from "~/graphql/customer-account/CustomerAddressMutations"; import { getInputStyleClasses } from "~/lib/utils"; -import { Button, Text } from "~/modules"; - +import { Button } from "~/modules/button"; +import { Text } from "~/modules/text"; import type { AccountOutletContext } from "./($locale).account.edit"; import { doLogout } from "./($locale).account_.logout"; diff --git a/app/routes/($locale).account.edit.tsx b/app/routes/($locale).account.edit.tsx index fdaf8ea3..598bba3b 100644 --- a/app/routes/($locale).account.edit.tsx +++ b/app/routes/($locale).account.edit.tsx @@ -10,11 +10,10 @@ import type { } from "@shopify/hydrogen/customer-account-api-types"; import { type ActionFunction, json, redirect } from "@shopify/remix-oxygen"; import invariant from "tiny-invariant"; - import { CUSTOMER_UPDATE_MUTATION } from "~/graphql/customer-account/CustomerUpdateMutation"; import { getInputStyleClasses } from "~/lib/utils"; -import { Button, Text } from "~/modules"; - +import { Button } from "~/modules/button"; +import { Text } from "~/modules/text"; import { doLogout } from "./($locale).account_.logout"; export interface AccountOutletContext { diff --git a/app/routes/($locale).account.orders.$id.tsx b/app/routes/($locale).account.orders.$id.tsx index b2fbe290..235c9224 100644 --- a/app/routes/($locale).account.orders.$id.tsx +++ b/app/routes/($locale).account.orders.$id.tsx @@ -6,8 +6,8 @@ import invariant from "tiny-invariant"; import type { OrderFragment } from "customer-accountapi.generated"; import { CUSTOMER_ORDER_QUERY } from "~/graphql/customer-account/CustomerOrderQuery"; import { statusMessage } from "~/lib/utils"; -import { Heading, PageHeader, Text } from "~/modules"; -import { Link } from "~/components/Link"; +import { Heading, PageHeader, Text } from "~/modules/text"; +import { Link } from "~/components/link"; export const meta: MetaFunction = ({ data }) => { return [{ title: `Order ${data?.order?.name}` }]; diff --git a/app/routes/($locale).account.tsx b/app/routes/($locale).account.tsx index 78e4935a..f458a4bb 100644 --- a/app/routes/($locale).account.tsx +++ b/app/routes/($locale).account.tsx @@ -16,16 +16,13 @@ import { Suspense } from "react"; import { CACHE_NONE, routeHeaders } from "~/data/cache"; import { CUSTOMER_DETAILS_QUERY } from "~/graphql/customer-account/CustomerDetailsQuery"; import { usePrefixPathWithLocale } from "~/lib/utils"; -import { - AccountAddressBook, - AccountDetails, - Button, - Modal, - OrderCard, - PageHeader, - ProductSwimlane, - Text, -} from "~/modules"; +import { PageHeader, Text } from "~/modules/text"; +import { Button } from "~/modules/button"; +import { AccountAddressBook } from "~/modules/account-address-book"; +import { AccountDetails } from "~/modules/account-details"; +import { Modal } from "~/modules/modal"; +import { OrderCard } from "~/modules/order-card"; +import { ProductSwimlane } from "~/modules/product-swimlane"; import { doLogout } from "./($locale).account_.logout"; import { type FeaturedData, diff --git a/app/routes/($locale).api.predictive-search.tsx b/app/routes/($locale).api.predictive-search.tsx index 956a62fd..e51e07a2 100644 --- a/app/routes/($locale).api.predictive-search.tsx +++ b/app/routes/($locale).api.predictive-search.tsx @@ -1,5 +1,4 @@ import { type LoaderFunctionArgs, json } from "@shopify/remix-oxygen"; - import type { PredictiveArticleFragment, PredictiveCollectionFragment, @@ -8,11 +7,11 @@ import type { PredictiveQueryFragment, PredictiveSearchQuery, } from "storefrontapi.generated"; +import { NO_PREDICTIVE_SEARCH_RESULTS } from "~/hooks/use-predictive-search"; import type { NormalizedPredictiveSearch, NormalizedPredictiveSearchResults, -} from "~/modules/predictive-search/types"; -import { NO_PREDICTIVE_SEARCH_RESULTS } from "~/modules/predictive-search/usePredictiveSearch"; +} from "~/types/predictive-search"; type PredictiveSearchResultItem = | PredictiveArticleFragment diff --git a/app/routes/($locale).cart.tsx b/app/routes/($locale).cart.tsx index 46469c4a..6e7793dc 100644 --- a/app/routes/($locale).cart.tsx +++ b/app/routes/($locale).cart.tsx @@ -18,9 +18,7 @@ import type { RootLoader } from "~/root"; export async function action({ request, context }: ActionFunctionArgs) { const { cart } = context; - const formData = await request.formData(); - const { action, inputs } = CartForm.getFormInput(formData); invariant(action, "No cartAction defined"); @@ -95,7 +93,8 @@ export default function CartRoute() { return ( <> -
      +
      +

      Cart

      {(cart) => } diff --git a/app/routes/($locale).collections.$collectionHandle.tsx b/app/routes/($locale).collections.$collectionHandle.tsx index ead7c708..8bbdba68 100644 --- a/app/routes/($locale).collections.$collectionHandle.tsx +++ b/app/routes/($locale).collections.$collectionHandle.tsx @@ -9,8 +9,8 @@ import type { ProductCollectionSortKeys, ProductFilter, } from "@shopify/hydrogen/storefront-api-types"; -import { json } from "@shopify/remix-oxygen"; import type { LoaderFunctionArgs, MetaArgs } from "@shopify/remix-oxygen"; +import { json } from "@shopify/remix-oxygen"; import invariant from "tiny-invariant"; import { routeHeaders } from "~/data/cache"; @@ -18,8 +18,8 @@ import { COLLECTION_QUERY } from "~/data/queries"; import { PAGINATION_SIZE } from "~/lib/const"; import { seoPayload } from "~/lib/seo.server"; import { parseAsCurrency } from "~/lib/utils"; -import type { SortParam } from "~/modules/SortFilter"; -import { FILTER_URL_PREFIX } from "~/modules/SortFilter"; +import type { SortParam } from "~/modules/sort-filter"; +import { FILTER_URL_PREFIX } from "~/modules/sort-filter"; import { WeaverseContent } from "~/weaverse"; export const headers = routeHeaders; diff --git a/app/routes/($locale).policies.$policyHandle.tsx b/app/routes/($locale).policies.$policyHandle.tsx index 755914d9..e4044083 100644 --- a/app/routes/($locale).policies.$policyHandle.tsx +++ b/app/routes/($locale).policies.$policyHandle.tsx @@ -1,10 +1,10 @@ import { useLoaderData } from "@remix-run/react"; import { type LoaderFunctionArgs, json } from "@shopify/remix-oxygen"; import invariant from "tiny-invariant"; - import { routeHeaders } from "~/data/cache"; import { seoPayload } from "~/lib/seo.server"; -import { Button, PageHeader, Section } from "~/modules"; +import { PageHeader, Section } from "~/modules/text"; +import { Button } from "~/modules/button"; export const headers = routeHeaders; diff --git a/app/routes/($locale).policies._index.tsx b/app/routes/($locale).policies._index.tsx index b757ea47..f14488e4 100644 --- a/app/routes/($locale).policies._index.tsx +++ b/app/routes/($locale).policies._index.tsx @@ -7,8 +7,8 @@ import invariant from "tiny-invariant"; import { routeHeaders } from "~/data/cache"; import { seoPayload } from "~/lib/seo.server"; import type { NonNullableFields } from "~/lib/type"; -import { Heading, PageHeader, Section } from "~/modules"; -import { Link } from "~/components/Link"; +import { Heading, PageHeader, Section } from "~/modules/text"; +import { Link } from "~/components/link"; export const headers = routeHeaders; diff --git a/app/routes/($locale).search.tsx b/app/routes/($locale).search.tsx index 88b57090..6d8e6555 100644 --- a/app/routes/($locale).search.tsx +++ b/app/routes/($locale).search.tsx @@ -11,16 +11,11 @@ import { Suspense } from "react"; import { PRODUCT_CARD_FRAGMENT } from "~/data/fragments"; import { PAGINATION_SIZE, getImageLoadingPriority } from "~/lib/const"; import { seoPayload } from "~/lib/seo.server"; -import { - Grid, - Heading, - Input, - PageHeader, - ProductCard, - ProductSwimlane, - Section, - Text, -} from "~/modules"; +import { Heading, PageHeader, Section, Text } from "~/modules/text"; +import { Grid } from "~/modules/grid"; +import { Input } from "~/modules/input"; +import { ProductCard } from "~/modules/product-card"; +import { ProductSwimlane } from "~/modules/product-swimlane"; import { type FeaturedData, getFeaturedData, diff --git a/app/sections/ali-reviews/index.tsx b/app/sections/ali-reviews/index.tsx index 8da6ad9f..bd6472e1 100644 --- a/app/sections/ali-reviews/index.tsx +++ b/app/sections/ali-reviews/index.tsx @@ -3,9 +3,9 @@ import type { HydrogenComponentSchema, } from "@weaverse/hydrogen"; import { forwardRef } from "react"; -import { backgroundInputs } from "~/components/BackgroundImage"; -import type { SectionProps } from "~/components/Section"; -import { Section, layoutInputs } from "~/components/Section"; +import { backgroundInputs } from "~/components/background-image"; +import type { SectionProps } from "~/components/section"; +import { Section, layoutInputs } from "~/components/section"; import type { AliReview } from "./review-item"; type AliReviewsData = { diff --git a/app/sections/ali-reviews/rating.tsx b/app/sections/ali-reviews/rating.tsx index 5833f13b..80ef8344 100644 --- a/app/sections/ali-reviews/rating.tsx +++ b/app/sections/ali-reviews/rating.tsx @@ -2,7 +2,7 @@ import { IconStar, IconStarFilled, IconStarHalfFilled, -} from "~/components/Icons"; +} from "~/components/icons"; export function Rating({ rating }: { rating: number }) { return ( diff --git a/app/sections/ali-reviews/review-bar.tsx b/app/sections/ali-reviews/review-bar.tsx index 09b3ea2d..4e2137b3 100644 --- a/app/sections/ali-reviews/review-bar.tsx +++ b/app/sections/ali-reviews/review-bar.tsx @@ -1,4 +1,4 @@ -import { IconStar } from "~/modules/Icon"; +import { IconStar } from "~/modules/icon"; export function ReviewBar(review: { rating: number; diff --git a/app/sections/ali-reviews/review-item.tsx b/app/sections/ali-reviews/review-item.tsx index 91e833be..bac8d0cb 100644 --- a/app/sections/ali-reviews/review-item.tsx +++ b/app/sections/ali-reviews/review-item.tsx @@ -1,7 +1,7 @@ import clsx from "clsx"; import { useState } from "react"; import ReactCountryFlag from "react-country-flag"; -import { IconSealCheck, IconX } from "~/components/Icons"; +import { IconSealCheck, IconX } from "~/components/icons"; import { Rating } from "./rating"; export type AliReview = { diff --git a/app/sections/all-products.tsx b/app/sections/all-products.tsx index e6cea41d..0de36b04 100644 --- a/app/sections/all-products.tsx +++ b/app/sections/all-products.tsx @@ -7,7 +7,9 @@ import type { import { forwardRef } from "react"; import type { AllProductsQuery } from "storefrontapi.generated"; import { getImageLoadingPriority } from "~/lib/const"; -import { Grid, PageHeader, ProductCard, Section } from "~/modules"; +import { Grid } from "~/modules/grid"; +import { ProductCard } from "~/modules/product-card"; +import { PageHeader, Section } from "~/modules/text"; interface AllProductsProps extends HydrogenComponentProps { heading: string; diff --git a/app/sections/blog-post.tsx b/app/sections/blog-post.tsx index c544ed2b..929abab1 100644 --- a/app/sections/blog-post.tsx +++ b/app/sections/blog-post.tsx @@ -6,8 +6,8 @@ import type { HydrogenComponentSchema, } from "@weaverse/hydrogen"; import { forwardRef } from "react"; - -import { IconFacebook, IconPinterest, Section } from "~/modules"; +import { IconFacebook, IconPinterest } from "~/modules/icon"; +import { Section } from "~/modules/text"; interface BlogPostProps extends HydrogenComponentProps { paddingTop: number; diff --git a/app/sections/blogs.tsx b/app/sections/blogs.tsx index ec01a38e..7658e24d 100644 --- a/app/sections/blogs.tsx +++ b/app/sections/blogs.tsx @@ -7,8 +7,9 @@ import type { import { forwardRef } from "react"; import type { ArticleFragment, BlogQuery } from "storefrontapi.generated"; import { getImageLoadingPriority } from "~/lib/const"; -import { Grid, PageHeader, Section } from "~/modules"; -import { Link } from "~/components/Link"; +import { PageHeader, Section } from "~/modules/text"; +import { Link } from "~/components/link"; +import { Grid } from "~/modules/grid"; interface BlogsProps extends HydrogenComponentProps { layout: "blog" | "default"; @@ -52,7 +53,7 @@ let Blogs = forwardRef((props, ref) => { {articles.map((article, i) => ( >> { diff --git a/app/sections/hero-image.tsx b/app/sections/hero-image.tsx index ea83da95..d1b6e496 100644 --- a/app/sections/hero-image.tsx +++ b/app/sections/hero-image.tsx @@ -5,10 +5,10 @@ import { import type { VariantProps } from "class-variance-authority"; import { cva } from "class-variance-authority"; import { forwardRef } from "react"; -import { backgroundInputs } from "~/components/BackgroundImage"; -import { overlayInputs } from "~/components/Overlay"; -import type { SectionProps } from "~/components/Section"; -import { Section, layoutInputs } from "~/components/Section"; +import { backgroundInputs } from "~/components/background-image"; +import { overlayInputs } from "~/components/overlay"; +import type { SectionProps } from "~/components/section"; +import { Section, layoutInputs } from "~/components/section"; export interface HeroImageProps extends VariantProps {} diff --git a/app/sections/hero-video.tsx b/app/sections/hero-video.tsx index 7ffb7db7..a4dfa6c7 100644 --- a/app/sections/hero-video.tsx +++ b/app/sections/hero-video.tsx @@ -16,8 +16,8 @@ import { useState, } from "react"; import { useInView } from "react-intersection-observer"; -import type { OverlayProps } from "~/components/Overlay"; -import { Overlay, overlayInputs } from "~/components/Overlay"; +import type { OverlayProps } from "~/components/overlay"; +import { Overlay, overlayInputs } from "~/components/overlay"; const SECTION_HEIGHTS = { small: { diff --git a/app/sections/hotspots/index.tsx b/app/sections/hotspots/index.tsx index bf6e789c..c04bcf57 100644 --- a/app/sections/hotspots/index.tsx +++ b/app/sections/hotspots/index.tsx @@ -8,10 +8,10 @@ import { forwardRef } from "react"; import Heading, { headingInputs, type HeadingProps, -} from "~/components/Heading"; -import Paragraph from "~/components/Paragraph"; -import type { SectionProps } from "~/components/Section"; -import { Section } from "~/components/Section"; +} from "~/components/heading"; +import Paragraph from "~/components/paragraph"; +import type { SectionProps } from "~/components/section"; +import { Section } from "~/components/section"; import { getImageAspectRatio } from "~/lib/utils"; interface HotspotsProps diff --git a/app/sections/hotspots/item.tsx b/app/sections/hotspots/item.tsx index 0940021c..2b844ad1 100644 --- a/app/sections/hotspots/item.tsx +++ b/app/sections/hotspots/item.tsx @@ -7,7 +7,7 @@ import type { import type { CSSProperties } from "react"; import { forwardRef } from "react"; import type { ProductQuery } from "storefrontapi.generated"; -import { IconCircle, IconHandBag, IconPlus, IconTag } from "~/components/Icons"; +import { IconCircle, IconHandBag, IconPlus, IconTag } from "~/components/icons"; import { PRODUCT_QUERY } from "~/data/queries"; import { ProductPopup } from "./product-popup"; diff --git a/app/sections/hotspots/product-popup.tsx b/app/sections/hotspots/product-popup.tsx index 0dc2742f..27458b27 100644 --- a/app/sections/hotspots/product-popup.tsx +++ b/app/sections/hotspots/product-popup.tsx @@ -4,7 +4,7 @@ import { IMAGES_PLACEHOLDERS } from "@weaverse/hydrogen"; import clsx from "clsx"; import type { CSSProperties } from "react"; import type { ProductQuery } from "storefrontapi.generated"; -import { Link } from "~/components/Link"; +import { Link } from "~/components/link"; import type { HotspotsItemData } from "./item"; interface ProductPopupProps diff --git a/app/sections/image-gallery/index.tsx b/app/sections/image-gallery/index.tsx index d165b92a..8ae63c2a 100644 --- a/app/sections/image-gallery/index.tsx +++ b/app/sections/image-gallery/index.tsx @@ -1,7 +1,7 @@ import type { HydrogenComponentSchema } from "@weaverse/hydrogen"; import { forwardRef } from "react"; -import type { SectionProps } from "~/components/Section"; -import { Section, sectionInspector } from "~/components/Section"; +import type { SectionProps } from "~/components/section"; +import { Section, sectionInspector } from "~/components/section"; type ImageGalleryProps = SectionProps; diff --git a/app/sections/image-with-text/index.tsx b/app/sections/image-with-text/index.tsx index edcc19eb..7f7d2ed2 100644 --- a/app/sections/image-with-text/index.tsx +++ b/app/sections/image-with-text/index.tsx @@ -1,8 +1,8 @@ import type { HydrogenComponentSchema } from "@weaverse/hydrogen"; import { forwardRef } from "react"; -import { backgroundInputs } from "~/components/BackgroundImage"; -import type { SectionProps } from "~/components/Section"; -import { Section, layoutInputs } from "~/components/Section"; +import { backgroundInputs } from "~/components/background-image"; +import type { SectionProps } from "~/components/section"; +import { Section, layoutInputs } from "~/components/section"; type ImageWithTextProps = SectionProps; diff --git a/app/sections/map.tsx b/app/sections/map.tsx index b3f8f5a1..4c4cad4e 100644 --- a/app/sections/map.tsx +++ b/app/sections/map.tsx @@ -2,12 +2,12 @@ import type { HydrogenComponentSchema } from "@weaverse/hydrogen"; import { type VariantProps, cva } from "class-variance-authority"; import clsx from "clsx"; import { forwardRef } from "react"; -import type { ButtonStyleProps } from "~/components/Button"; -import Button, { buttonStylesInputs } from "~/components/Button"; -import Heading from "~/components/Heading"; -import Paragraph from "~/components/Paragraph"; -import type { SectionProps } from "~/components/Section"; -import { Section } from "~/components/Section"; +import type { ButtonStyleProps } from "~/components/button"; +import Button, { buttonStylesInputs } from "~/components/button"; +import Heading from "~/components/heading"; +import Paragraph from "~/components/paragraph"; +import type { SectionProps } from "~/components/section"; +import { Section } from "~/components/section"; let variants = cva("", { variants: { diff --git a/app/sections/newsletter/index.tsx b/app/sections/newsletter/index.tsx index 508530b2..b6ca635e 100644 --- a/app/sections/newsletter/index.tsx +++ b/app/sections/newsletter/index.tsx @@ -1,7 +1,7 @@ import type { HydrogenComponentSchema } from "@weaverse/hydrogen"; import { forwardRef } from "react"; -import type { SectionProps } from "~/components/Section"; -import { Section, sectionInspector } from "~/components/Section"; +import type { SectionProps } from "~/components/section"; +import { Section, sectionInspector } from "~/components/section"; type NewsLetterProps = SectionProps; diff --git a/app/sections/newsletter/newsletter-form.tsx b/app/sections/newsletter/newsletter-form.tsx index 4d2d3cb5..a2f29cb1 100644 --- a/app/sections/newsletter/newsletter-form.tsx +++ b/app/sections/newsletter/newsletter-form.tsx @@ -5,8 +5,8 @@ import type { } from "@weaverse/hydrogen"; import clsx from "clsx"; import { forwardRef } from "react"; -import Button from "~/components/Button"; -import { IconEnvelopeSimple } from "~/components/Icons"; +import Button from "~/components/button"; +import { IconEnvelopeSimple } from "~/components/icons"; import type { CustomerApiPlayLoad } from "~/routes/($locale).api.customer"; interface NewsLetterInputProps extends HydrogenComponentProps { diff --git a/app/sections/our-team/index.tsx b/app/sections/our-team/index.tsx index 395b839d..39372ff7 100644 --- a/app/sections/our-team/index.tsx +++ b/app/sections/our-team/index.tsx @@ -5,8 +5,8 @@ import type { } from "@weaverse/hydrogen"; import { forwardRef } from "react"; import type { OurTeamQuery } from "storefrontapi.generated"; -import { backgroundInputs } from "~/components/BackgroundImage"; -import { Section, type SectionProps, layoutInputs } from "~/components/Section"; +import { backgroundInputs } from "~/components/background-image"; +import { Section, type SectionProps, layoutInputs } from "~/components/section"; type OurTeamData = { metaobject: WeaverseMetaObject; diff --git a/app/sections/our-team/team-members.tsx b/app/sections/our-team/team-members.tsx index 452a0620..af47bf02 100644 --- a/app/sections/our-team/team-members.tsx +++ b/app/sections/our-team/team-members.tsx @@ -12,7 +12,7 @@ import { IconGithubLogo, IconLinkedinLogo, IconXLogo, -} from "~/components/Icons"; +} from "~/components/icons"; type MemberType = { name: string; diff --git a/app/sections/page.tsx b/app/sections/page.tsx index 55fc1b9a..bf619009 100644 --- a/app/sections/page.tsx +++ b/app/sections/page.tsx @@ -4,9 +4,8 @@ import type { HydrogenComponentSchema, } from "@weaverse/hydrogen"; import { forwardRef } from "react"; - import type { PageDetailsQuery } from "storefrontapi.generated"; -import { PageHeader } from "~/modules"; +import { PageHeader } from "~/modules/text"; interface PageProps extends HydrogenComponentProps { paddingTop: number; diff --git a/app/sections/product-information/index.tsx b/app/sections/product-information/index.tsx index 212201f0..53193c43 100644 --- a/app/sections/product-information/index.tsx +++ b/app/sections/product-information/index.tsx @@ -3,11 +3,11 @@ import { Money, ShopPayButton, useOptimisticVariant } from "@shopify/hydrogen"; import type { MoneyV2 } from "@shopify/hydrogen/storefront-api-types"; import type { HydrogenComponentSchema } from "@weaverse/hydrogen"; import { forwardRef, useEffect, useState } from "react"; -import { CompareAtPrice } from "~/components/CompareAtPrice"; -import { Section, type SectionProps, layoutInputs } from "~/components/Section"; +import { CompareAtPrice } from "~/components/compare-at-price"; +import { Link } from "~/components/link"; +import { Section, type SectionProps, layoutInputs } from "~/components/section"; import { getExcerpt, isDiscounted, isNewArrival } from "~/lib/utils"; -import { AddToCartButton } from "~/modules"; -import { Link } from "~/components/Link"; +import { AddToCartButton } from "~/modules/add-to-cart-button"; import { ProductMedia, type ProductMediaProps, diff --git a/app/sections/product-information/product-detail.tsx b/app/sections/product-information/product-detail.tsx index 079b0b36..367b0283 100644 --- a/app/sections/product-information/product-detail.tsx +++ b/app/sections/product-information/product-detail.tsx @@ -4,8 +4,8 @@ import { DisclosurePanel, } from "@headlessui/react"; import clsx from "clsx"; -import { IconX } from "~/components/Icons"; -import { Link } from "~/components/Link"; +import { IconX } from "~/components/icons"; +import { Link } from "~/components/link"; export function ProductDetail({ title, diff --git a/app/sections/product-list.tsx b/app/sections/product-list.tsx index 6976445c..12c2f404 100644 --- a/app/sections/product-list.tsx +++ b/app/sections/product-list.tsx @@ -5,11 +5,10 @@ import type { HydrogenComponentSchema, } from "@weaverse/hydrogen"; import { forwardRef } from "react"; - import { COLLECTION_QUERY } from "~/data/queries"; import { PAGINATION_SIZE } from "~/lib/const"; -import { ProductSwimlane } from "~/modules"; -import type { SortParam } from "~/modules/SortFilter"; +import { ProductSwimlane } from "~/modules/product-swimlane"; +import type { SortParam } from "~/modules/sort-filter"; import { getSortValuesFromParam } from "~/routes/($locale).collections.$collectionHandle"; interface ProductListProps diff --git a/app/sections/promotion-grid/index.tsx b/app/sections/promotion-grid/index.tsx index ed2532d4..9b4556ef 100644 --- a/app/sections/promotion-grid/index.tsx +++ b/app/sections/promotion-grid/index.tsx @@ -5,10 +5,10 @@ import { import type { VariantProps } from "class-variance-authority"; import { cva } from "class-variance-authority"; import { forwardRef } from "react"; -import { backgroundInputs } from "~/components/BackgroundImage"; -import { overlayInputs } from "~/components/Overlay"; -import type { SectionProps } from "~/components/Section"; -import { Section, layoutInputs } from "~/components/Section"; +import { backgroundInputs } from "~/components/background-image"; +import { overlayInputs } from "~/components/overlay"; +import type { SectionProps } from "~/components/section"; +import { Section, layoutInputs } from "~/components/section"; type PromotionGridProps = VariantProps & SectionProps; diff --git a/app/sections/promotion-grid/item.tsx b/app/sections/promotion-grid/item.tsx index 4e7a20c7..1e5bff48 100644 --- a/app/sections/promotion-grid/item.tsx +++ b/app/sections/promotion-grid/item.tsx @@ -7,9 +7,9 @@ import { import type { VariantProps } from "class-variance-authority"; import { cva } from "class-variance-authority"; import { forwardRef } from "react"; -import { BackgroundImage } from "~/components/BackgroundImage"; -import type { OverlayProps } from "~/components/Overlay"; -import { Overlay, overlayInputs } from "~/components/Overlay"; +import { BackgroundImage } from "~/components/background-image"; +import type { OverlayProps } from "~/components/overlay"; +import { Overlay, overlayInputs } from "~/components/overlay"; let variants = cva( [ diff --git a/app/sections/related-products.tsx b/app/sections/related-products.tsx index de43d39f..2b3adcd1 100644 --- a/app/sections/related-products.tsx +++ b/app/sections/related-products.tsx @@ -5,9 +5,9 @@ import type { ProductCardFragment } from "storefrontapi.generated"; import Heading, { type HeadingProps, headingInputs, -} from "~/components/Heading"; -import { Section, type SectionProps, layoutInputs } from "~/components/Section"; -import { ProductCard } from "~/modules"; +} from "~/components/heading"; +import { Section, type SectionProps, layoutInputs } from "~/components/section"; +import { ProductCard } from "~/modules/product-card"; interface RelatedProductsProps extends Omit, diff --git a/app/sections/single-product/index.tsx b/app/sections/single-product/index.tsx index f89bce82..b94ea71e 100644 --- a/app/sections/single-product/index.tsx +++ b/app/sections/single-product/index.tsx @@ -8,7 +8,7 @@ import type { import { forwardRef, useEffect, useState } from "react"; import type { ProductQuery } from "storefrontapi.generated"; import { PRODUCT_QUERY, VARIANTS_QUERY } from "~/data/queries"; -import { AddToCartButton } from "~/modules"; +import { AddToCartButton } from "~/modules/add-to-cart-button"; import { ProductPlaceholder } from "~/modules/product-form/placeholder"; import { ProductMedia } from "~/modules/product-form/product-media"; import { Quantity } from "~/modules/product-form/quantity"; diff --git a/app/sections/slideshow/arrows.tsx b/app/sections/slideshow/arrows.tsx index 0e9e0a3a..e5cdab11 100644 --- a/app/sections/slideshow/arrows.tsx +++ b/app/sections/slideshow/arrows.tsx @@ -8,7 +8,7 @@ import { IconArrowRight, IconCaretLeft, IconCaretRight, -} from "~/components/Icons"; +} from "~/components/icons"; let variants = cva( [ diff --git a/app/sections/slideshow/slide.tsx b/app/sections/slideshow/slide.tsx index efbe0b65..3e619233 100644 --- a/app/sections/slideshow/slide.tsx +++ b/app/sections/slideshow/slide.tsx @@ -6,18 +6,18 @@ import { import type { VariantProps } from "class-variance-authority"; import { cva } from "class-variance-authority"; import { forwardRef } from "react"; -import { backgroundInputs } from "~/components/BackgroundImage"; -import { overlayInputs } from "~/components/Overlay"; -import type { OverlayAndBackgroundProps } from "~/components/OverlayAndBackground"; -import { OverlayAndBackground } from "~/components/OverlayAndBackground"; -import { layoutInputs } from "~/components/Section"; +import { backgroundInputs } from "~/components/background-image"; +import { overlayInputs } from "~/components/overlay"; +import type { OverlayAndBackgroundProps } from "~/components/overlay-and-background"; +import { OverlayAndBackground } from "~/components/overlay-and-background"; +import { layoutInputs } from "~/components/section"; let variants = cva("w-full h-full flex flex-col [&_.paragraph]:mx-[unset]", { variants: { width: { full: "", stretch: "px-3 md:px-10 lg:px-16", - fixed: "max-w-[var(--page-width,1280px)] mx-auto px-3 md:px-10 lg:px-16", + fixed: "max-w-page mx-auto px-3 md:px-10 lg:px-16", }, verticalPadding: { none: "", diff --git a/app/sections/testimonials/index.tsx b/app/sections/testimonials/index.tsx index baabf17c..92320a6e 100644 --- a/app/sections/testimonials/index.tsx +++ b/app/sections/testimonials/index.tsx @@ -1,7 +1,7 @@ import type { HydrogenComponentSchema } from "@weaverse/hydrogen"; import { forwardRef } from "react"; -import type { SectionProps } from "~/components/Section"; -import { Section, sectionInspector } from "~/components/Section"; +import type { SectionProps } from "~/components/section"; +import { Section, sectionInspector } from "~/components/section"; type TestimonialsProps = SectionProps; diff --git a/app/sections/video-embed/index.tsx b/app/sections/video-embed/index.tsx index 6d27414a..ec51a8d0 100644 --- a/app/sections/video-embed/index.tsx +++ b/app/sections/video-embed/index.tsx @@ -1,7 +1,7 @@ import type { HydrogenComponentSchema } from "@weaverse/hydrogen"; import { forwardRef } from "react"; -import type { SectionProps } from "~/components/Section"; -import { Section, sectionInspector } from "~/components/Section"; +import type { SectionProps } from "~/components/section"; +import { Section, sectionInspector } from "~/components/section"; type VideoEmbedProps = SectionProps; diff --git a/app/modules/predictive-search/types.ts b/app/types/predictive-search.ts similarity index 100% rename from app/modules/predictive-search/types.ts rename to app/types/predictive-search.ts diff --git a/app/weaverse/components.ts b/app/weaverse/components.ts index 6dee639e..1a906e4d 100644 --- a/app/weaverse/components.ts +++ b/app/weaverse/components.ts @@ -1,5 +1,8 @@ import type { HydrogenComponent } from "@weaverse/hydrogen"; -import { sharedComponents } from "~/components"; +import * as Button from "~/components/button"; +import * as Heading from "~/components/heading"; +import * as Paragraph from "~/components/paragraph"; +import * as SubHeading from "~/components/subheading"; import * as Judgeme from "~/modules/product-form/judgeme-review"; import * as AliReview from "~/sections/ali-reviews"; import * as AliReviewList from "~/sections/ali-reviews/review-list"; @@ -50,7 +53,10 @@ import * as VideoEmbed from "~/sections/video-embed"; import * as VideoEmbedItem from "~/sections/video-embed/video"; export let components: HydrogenComponent[] = [ - ...sharedComponents, + SubHeading, + Heading, + Paragraph, + Button, AliReview, AliReviewList, AllProducts, diff --git a/app/weaverse/index.tsx b/app/weaverse/index.tsx index e3682e6b..9b74ad74 100644 --- a/app/weaverse/index.tsx +++ b/app/weaverse/index.tsx @@ -1,5 +1,5 @@ import { WeaverseHydrogenRoot } from "@weaverse/hydrogen"; -import { GenericError } from "~/modules/GenericError"; +import { GenericError } from "~/modules/generic-error"; import { components } from "./components"; export function WeaverseContent() { diff --git a/package-lock.json b/package-lock.json index cbdcfaba..ac8f9b26 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@weaverse/pilot", - "version": "2.8.2", + "version": "3.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@weaverse/pilot", - "version": "2.8.2", + "version": "3.0.0", "dependencies": { "@fontsource/poppins": "5.0.14", "@graphql-codegen/cli": "5.0.2", diff --git a/package.json b/package.json index a46bf02e..d02b56c2 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@weaverse/pilot", "private": true, "sideEffects": false, - "version": "2.9.0", + "version": "3.0.0", "type": "module", "author": "Weaverse", "scripts": { diff --git a/tailwind.config.js b/tailwind.config.js index 63b595cf..c5e421b7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -36,10 +36,27 @@ export default { from: { transform: "translateX(0)" }, to: { transform: "translateX(-100%)" }, }, + underline: { + "0%": { + transform: "scaleX(1)", + transformOrigin: "right", + }, + "50%": { + transform: "scaleX(0)", + transformOrigin: "right", + }, + "51%": { + transformOrigin: "left", + }, + "100%": { + transform: "scaleX(1)", + }, + }, }, animation: { spin: "spin .5s linear infinite", marquee: "marquee var(--animation-speed, 150ms) linear infinite", + underline: "underline 400ms linear", "fade-in": "fade-in 500ms ease-in forwards", "slide-down-and-fade": "slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards", @@ -87,6 +104,12 @@ export default { }, width: { mobileGallery: "calc(100vw - 3rem)", + page: "var(--page-width, 1280px)", + }, + maxWidth: { + page: "var(--page-width, 1280px)", + "prose-narrow": "45ch", + "prose-wide": "80ch", }, fontFamily: { sans: ["Poppins", "ui-sans-serif", "system-ui", "sans-serif"], @@ -117,14 +140,9 @@ export default { letterSpacing: { normal: "var(--body-base-letter-spacing)", }, - maxWidth: { - "prose-narrow": "45ch", - "prose-wide": "80ch", - }, boxShadow: { border: "inset 0px 0px 0px 1px rgb(var(--color-border) / 0.08)", header: "0 2px 5px #0000000f", - "mega-menu": "0px 25px 25px 0px #00000024", }, zIndex: { 1: "1",