crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update to Next.js 13 (#870)

Browse Source
This commit is contained in:
Catalin Pinte
2022-12-21 17:51:55 +02:00
committed by GitHub
parent 6d783eae35
commit 4efa502666
60 changed files with 895 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
site/components/cart/CartItem/CartItem.module.css
View File

@@ -17,13 +17,7 @@
}
.productImage {
position: absolute;
transform: scale(1.9);
width: 100%;
height: 100%;
left: 30% !important;
top: 30% !important;
z-index: 1;
@apply w-full h-full object-cover;
}
.productName {

37
site/components/cart/CartItem/CartItem.tsx
View File

@@ -1,4 +1,4 @@
import { ChangeEvent, FocusEventHandler, useEffect, useState } from 'react'
import { ChangeEvent, useEffect, useState } from 'react'
import cn from 'clsx'
import Image from 'next/image'
import Link from 'next/link'
@@ -84,31 +84,26 @@ const CartItem = ({
{...rest}
>
<div className="flex flex-row space-x-4 py-4">
<div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer z-0">
<div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer">
<Link href={`/product/${item.path}`}>
<a>
<Image
onClick={() => closeSidebarIfPresent()}
className={s.productImage}
width={150}
height={150}
src={item.variant.image?.url || placeholderImg}
alt={item.variant.image?.alt || 'Product Image'}
unoptimized
/>
</a>
<Image
onClick={() => closeSidebarIfPresent()}
className={s.productImage}
width={64}
height={64}
src={item.variant.image?.url || placeholderImg}
alt={item.variant.image?.alt || 'Product Image'}
/>
</Link>
</div>
<div className="flex-1 flex flex-col text-base">
<Link href={`/product/${item.path}`}>
<a>
<span
className={s.productName}
onClick={() => closeSidebarIfPresent()}
>
{item.name}
</span>
</a>
<span
className={s.productName}
onClick={() => closeSidebarIfPresent()}
>
{item.name}
</span>
</Link>
{options && options.length > 0 && (
<div className="flex items-center pb-1">

8
site/components/cart/CartSidebarView/CartSidebarView.tsx
View File

@@ -74,11 +74,9 @@ const CartSidebarView: FC = () => {
<>
<div className="px-4 sm:px-6 flex-1">
<Link href="/cart">
<a>
<Text variant="sectionHeading" onClick={handleClose}>
My Cart
</Text>
</a>
<Text variant="sectionHeading" onClick={handleClose}>
My Cart
</Text>
</Link>
<ul className={s.lineItemsList}>
{data!.lineItems.map((item: any) => (

4
site/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
View File

@@ -55,9 +55,7 @@ const CheckoutSidebarView: FC = () => {
>
<div className="px-4 sm:px-6 flex-1">
<Link href="/cart">
<a>
<Text variant="sectionHeading">Checkout</Text>
</a>
<Text variant="sectionHeading">Checkout</Text>
</Link>
<PaymentWidget

24
site/components/common/Footer/Footer.tsx
View File

@@ -32,23 +32,25 @@ const Footer: FC<Props> = ({ className, pages }) => {
<Container>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accent-2 py-12 text-primary bg-primary transition-colors duration-150">
<div className="col-span-1 lg:col-span-2">
<Link href="/">
<a className="flex flex-initial items-center font-bold md:mr-24">
<span className="rounded-full border border-accent-6 mr-2">
<Logo />
</span>
<span>ACME</span>
</a>
<Link
href="/"
className="flex flex-initial items-center font-bold md:mr-24"
>
<span className="rounded-full border border-accent-6 mr-2">
<Logo />
</span>
<span>ACME</span>
</Link>
</div>
<div className="col-span-1 lg:col-span-7">
<div className="grid md:grid-rows-4 md:grid-cols-3 md:grid-flow-col">
{[...links, ...sitePages].map((page) => (
<span key={page.url} className="py-3 md:py-0 md:pb-4">
<Link href={page.url!}>
<a className="text-accent-9 hover:text-accent-6 transition ease-in-out duration-150">
{page.name}
</a>
<Link
href={page.url!}
className="text-accent-9 hover:text-accent-6 transition ease-in-out duration-150"
>
{page.name}
</Link>
</span>
))}

17
site/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
View File

@@ -24,29 +24,21 @@ const HomeAllProductsGrid: FC<Props> = ({
<div className={s.aside}>
<ul className="mb-10">
<li className="py-1 text-base font-bold tracking-wide">
<Link href={getCategoryPath('')}>
<a>All Categories</a>
</Link>
<Link href={getCategoryPath('')}>All Categories</Link>
</li>
{categories?.map((cat: any) => (
<li key={cat.path} className="py-1 text-accent-8 text-base">
<Link href={getCategoryPath(cat.path)}>
<a>{cat.name}</a>
</Link>
<Link href={getCategoryPath(cat.path)}>{cat.name}</Link>
</li>
))}
</ul>
<ul className="">
<li className="py-1 text-base font-bold tracking-wide">
<Link href={getDesignerPath('')}>
<a>All Designers</a>
</Link>
<Link href={getDesignerPath('')}>All Designers</Link>
</li>
{brands?.map(({ path, name }) => (
<li key={path} className="py-1 text-accent-8 text-base">
<Link href={getDesignerPath(path)}>
<a>{name}</a>
</Link>
<Link href={getDesignerPath(path)}>{name}</Link>
</li>
))}
</ul>
@@ -60,6 +52,7 @@ const HomeAllProductsGrid: FC<Props> = ({
product={product}
variant="simple"
imgProps={{
alt: product.name,
width: 480,
height: 480,
}}

14
site/components/common/I18nWidget/I18nWidget.tsx
View File

@@ -81,13 +81,13 @@ const I18nWidget: FC = () => {
<ul>
{options.map((locale) => (
<li key={locale}>
<Link href={currentPath} locale={locale}>
<a
className={cn(s.item)}
onClick={() => setDisplay(false)}
>
{LOCALES_MAP[locale].name}
</a>
<Link
href={currentPath}
locale={locale}
className={cn(s.item)}
onClick={() => setDisplay(false)}
>
{LOCALES_MAP[locale].name}
</Link>
</li>
))}

14
site/components/common/Navbar/Navbar.tsx
View File

@@ -19,18 +19,16 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
<Container clean className="mx-auto max-w-8xl px-6">
<div className={s.nav}>
<div className="flex items-center flex-1">
<Link href="/">
<a className={s.logo} aria-label="Logo">
<Logo />
</a>
<Link href="/" className={s.logo} aria-label="Logo">
<Logo />
</Link>
<nav className={s.navMenu}>
<Link href="/search">
<a className={s.link}>All</a>
<Link href="/search" className={s.link}>
All
</Link>
{links?.map((l) => (
<Link href={l.href} key={l.href}>
<a className={s.link}>{l.label}</a>
<Link href={l.href} key={l.href} className={s.link}>
{l.label}
</Link>
))}
</nav>

8
site/components/common/UserNav/MenuSidebarView/MenuSidebarView.tsx
View File

@@ -17,9 +17,7 @@ export default function MenuSidebarView({
<nav>
<ul>
<li className={s.item} onClick={() => closeSidebar()}>
<Link href="/search">
<a>All</a>
</Link>
<Link href="/search">All</Link>
</li>
{links.map((l: any) => (
<li
@@ -27,9 +25,7 @@ export default function MenuSidebarView({
className={s.item}
onClick={() => closeSidebar()}
>
<Link href={l.href}>
<a>{l.label}</a>
</Link>
<Link href={l.href}>{l.label}</Link>
</li>
))}
</ul>

2
site/components/common/UserNav/UserNav.tsx
View File

@@ -59,7 +59,7 @@ const UserNav: React.FC<{
)}
{process.env.COMMERCE_WISHLIST_ENABLED && (
<li className={s.item}>
<Link href="/wishlist">
<Link href="/wishlist" legacyBehavior>
<a onClick={closeSidebarIfPresent} aria-label="Wishlist">
<Heart />
</a>

11
site/components/product/ProductCard/ProductCard.module.css
View File

@@ -7,7 +7,7 @@
.root:hover {
& .productImage {
transform: scale(1.2625);
transform: scale(1.1);
}
& .header .name span,
@@ -69,16 +69,11 @@
}
.imageContainer {
@apply flex items-center justify-center overflow-hidden;
}
.imageContainer > div {
min-width: 100%;
@apply flex items-center justify-center overflow-hidden w-full h-full;
}
.imageContainer .productImage {
@apply transform transition-transform duration-500
object-cover scale-120;
@apply transform transition-transform duration-500 object-cover w-auto h-full;
}
.root .wishlistButton {

175
site/components/product/ProductCard/ProductCard.tsx
View File

@@ -38,99 +38,92 @@ const ProductCard: FC<Props> = ({
)
return (
<Link href={`/product/${product.slug}`}>
<a className={rootClassName} aria-label={product.name}>
{variant === 'slim' && (
<>
<div className={s.header}>
<span>{product.name}</span>
</div>
{product?.images && (
<div>
<Image
quality="85"
src={product.images[0]?.url || placeholderImg}
alt={product.name || 'Product Image'}
height={320}
width={320}
layout="fixed"
{...imgProps}
/>
</div>
)}
</>
)}
{variant === 'simple' && (
<>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0]}
/>
)}
{!noNameTag && (
<div className={s.header}>
<h3 className={s.name}>
<span>{product.name}</span>
</h3>
<div className={s.price}>
{`${price} ${product.price?.currencyCode}`}
</div>
</div>
)}
<div className={s.imageContainer}>
{product?.images && (
<div>
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
</div>
)}
</div>
</>
)}
{variant === 'default' && (
<>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0] as any}
/>
)}
<ProductTag
name={product.name}
price={`${price} ${product.price?.currencyCode}`}
<Link
href={`/product/${product.slug}`}
className={rootClassName}
aria-label={product.name}
>
{variant === 'slim' && (
<>
<div className={s.header}>
<span>{product.name}</span>
</div>
{product?.images && (
<Image
quality="85"
src={product.images[0]?.url || placeholderImg}
alt={product.name || 'Product Image'}
height={320}
width={320}
{...imgProps}
/>
<div className={s.imageContainer}>
{product?.images && (
<div>
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
</div>
)}
)}
</>
)}
{variant === 'simple' && (
<>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0]}
/>
)}
{!noNameTag && (
<div className={s.header}>
<h3 className={s.name}>
<span>{product.name}</span>
</h3>
<div className={s.price}>
{`${price} ${product.price?.currencyCode}`}
</div>
</div>
</>
)}
</a>
)}
<div className={s.imageContainer}>
{product?.images && (
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
{...imgProps}
/>
)}
</div>
</>
)}
{variant === 'default' && (
<>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0] as any}
/>
)}
<ProductTag
name={product.name}
price={`${price} ${product.price?.currencyCode}`}
/>
<div className={s.imageContainer}>
{product?.images && (
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
{...imgProps}
/>
)}
</div>
</>
)}
</Link>
)
}

2
site/components/product/ProductSidebar/ProductSidebar.module.css
View File

@@ -50,7 +50,7 @@
}
.sliderContainer .img {
@apply w-full h-auto max-h-full object-cover;
@apply w-auto h-full max-h-full object-cover;
}
.button {

9
site/components/product/ProductSlider/ProductSlider.module.css
View File

@@ -19,11 +19,11 @@
}
.thumb.selected {
@apply bg-white;
@apply bg-white/30;
}
.thumb img {
height: 85% !important;
@apply h-full w-full object-cover transition duration-500;
}
.album {
@@ -44,10 +44,9 @@
}
@screen md {
.thumb:hover {
transform: scale(1.02);
.thumb:hover img {
@apply scale-110;
}
.album {
height: 182px;
}

8
site/components/product/ProductView/ProductView.module.css
View File

@@ -17,15 +17,11 @@
}
.imageContainer {
@apply text-center h-full relative;
}
.imageContainer > span {
height: 100% !important;
@apply flex items-center justify-center w-full h-full relative;
}
.sliderContainer .img {
@apply w-full h-full max-h-full object-cover;
@apply object-cover h-full;
}
.button {

1
site/components/product/ProductView/ProductView.tsx
View File

@@ -80,6 +80,7 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
variant="simple"
className="animated fadeIn"
imgProps={{
alt: p.name,
width: 300,
height: 300,
}}

11
site/components/search.tsx
View File

@@ -125,6 +125,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
>
<Link
href={{ pathname: getCategoryPath('', brand), query }}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'categories')}
@@ -151,6 +152,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
pathname: getCategoryPath(cat.path, brand),
query,
}}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'categories')}
@@ -226,6 +228,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
pathname: getDesignerPath('', category),
query,
}}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'brands')}
@@ -252,6 +255,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
pathname: getDesignerPath(path, category),
query,
}}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'brands')}
@@ -326,6 +330,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
imgProps={{
width: 480,
height: 480,
alt: product.name,
}}
/>
))}
@@ -390,7 +395,10 @@ export default function Search({ categories, brands }: SearchPropsType) {
}
)}
>
<Link href={{ pathname, query: filterQuery({ q }) }}>
<Link
href={{ pathname, query: filterQuery({ q }) }}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'sort')}
className={
@@ -416,6 +424,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
pathname,
query: filterQuery({ q, sort: key }),
}}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'sort')}

11
site/components/ui/Hero/Hero.tsx
View File

@@ -17,11 +17,12 @@ const Hero: FC<HeroProps> = ({ headline, description }) => {
<h2 className={s.title}>{headline}</h2>
<div className={s.description}>
<p>{description}</p>
<Link href="/">
<a className="flex items-center text-accent-0 pt-3 font-bold hover:underline cursor-pointer w-max-content">
Read it here
<ArrowRight width="20" heigh="20" className="ml-1" />
</a>
<Link
href="/"
className="flex items-center text-accent-0 pt-3 font-bold hover:underline cursor-pointer w-max-content"
>
Read it here
<ArrowRight width="20" heigh="20" className="ml-1" />
</Link>
</div>
</div>

4
site/components/ui/Link/Link.tsx
View File

@@ -6,8 +6,8 @@ const Link: React.FC<
}
> = ({ href, children, ...props }) => {
return (
<NextLink href={href}>
<a {...props}>{children}</a>
<NextLink href={href} {...props}>
{children}
</NextLink>
)
}

4
site/components/wishlist/WishlistCard/WishlistCard.tsx
View File

@@ -73,9 +73,7 @@ const WishlistCard: React.FC<{
<div className={s.description}>
<div className="flex-1 mb-6">
<h3 className="text-2xl mb-2 -mt-1">
<Link href={`/product${product.path}`}>
<a>{product.name}</a>
</Link>
<Link href={`/product${product.path}`}>{product.name}</Link>
</h3>
<div className="mb-4">
<Text html={product.description} />