Merge branch 'master' of https://github.com/okbel/e-comm-example

README.md

@@ -1 +1 @@
-# Commerce Example
+# Next.js Commerce

assets/base.css

@@ -98,3 +98,37 @@ body {
 a {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

components/cart/CartItem/CartItem.module.css

@@ -10,8 +10,9 @@
 
 .productImage {
   position: absolute;
-  top: 0;
-  left: -10px;
-  top: 15px;
   transform: scale(1.9);
+  width: 100%;
+  height: 100%;
+  left: 30% !important;
+  top: 30% !important;
 }

components/cart/CartItem/CartItem.tsx

@@ -1,10 +1,11 @@
-import { ChangeEvent, useEffect, useState } from 'react'
+import s from './CartItem.module.css'
 import Image from 'next/image'
+import Link from 'next/link'
+import { ChangeEvent, useEffect, useState } from 'react'
 import { Trash, Plus, Minus } from '@components/icon'
 import usePrice from '@lib/bigcommerce/use-price'
 import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
 import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
-import s from './CartItem.module.css'
 
 const CartItem = ({
   item,
@@ -55,18 +56,26 @@ const CartItem = ({
   }, [item.quantity])
 
   return (
-    <li className="flex flex-row space-x-8 py-6">
+    <li className="flex flex-row space-x-8 py-8">
-      <div className="w-12 h-12 bg-violet relative overflow-hidden">
+      <div className="w-16 h-16 bg-violet relative overflow-hidden">
         <Image
+          className={s.productImage}
           src={item.image_url}
-          width={60}
+          width={150}
-          height={60}
+          height={150}
+          alt="Product Image"
           // The cart item image is already optimized and very small in size
           unoptimized
         />
       </div>
-      <div className="flex-1 flex flex-col justify-between text-base">
+      <div className="flex-1 flex flex-col text-base">
-        <span className="font-bold mb-3">{item.name}</span>
+        {/** TODO: Replace this. No `path` found at Cart */}
+        <Link href={`/product/${item.url.split('/')[3]}`}>
+          <span className="font-bold mb-5 text-lg cursor-pointer">
+            {item.name}
+          </span>
+        </Link>
+
         <div className="flex items-center">
           <button type="button" onClick={() => increaseQuantity(-1)}>
             <Minus width={18} height={18} />

components/core/EnhancedImage/EnhancedImage.tsx

@@ -0,0 +1,42 @@
+import { FC } from 'react'
+import { useInView } from 'react-intersection-observer'
+import Image from 'next/image'
+
+type Props = Omit<
+  JSX.IntrinsicElements['img'],
+  'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading'
+> & {
+  src: string
+  quality?: string
+  priority?: boolean
+  loading?: readonly ['lazy', 'eager', undefined]
+  unoptimized?: boolean
+} & (
+    | {
+        width: number | string
+        height: number | string
+        unsized?: false
+      }
+    | {
+        width?: number | string
+        height?: number | string
+        unsized: true
+      }
+  )
+
+const EnhancedImage: FC<Props & JSX.IntrinsicElements['img']> = ({
+  ...props
+}) => {
+  const [ref, inView] = useInView({
+    triggerOnce: true,
+    rootMargin: '220px 0px',
+  })
+
+  return (
+    <div ref={ref}>
+      <Image {...props} />
+    </div>
+  )
+}
+
+export default EnhancedImage

components/core/EnhancedImage/index.ts

@@ -0,0 +1 @@
+export { default } from './EnhancedImage'

components/core/Footer/Footer.tsx

@@ -38,21 +38,21 @@ const Footer: FC<Props> = ({ className, pages }) => {
             <ul className="flex flex-initial flex-col md:flex-1">
               <li className="py-3 md:py-0 md:pb-4">
                 <Link href="/">
-                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
+                  <a className="text-accent-3 hover:text-white transition ease-in-out duration-150">
                     Home
                   </a>
                 </Link>
               </li>
               <li className="py-3 md:py-0 md:pb-4">
                 <Link href="/">
-                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
+                  <a className="text-accent-3 hover:text-white transition ease-in-out duration-150">
                     Careers
                   </a>
                 </Link>
               </li>
               <li className="py-3 md:py-0 md:pb-4">
                 <Link href="/blog">
-                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
+                  <a className="text-accent-3 hover:text-white transition ease-in-out duration-150">
                     Blog
                   </a>
                 </Link>
@@ -60,7 +60,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
               {sitePages.map((page) => (
                 <li key={page.url} className="py-3 md:py-0 md:pb-4">
                   <Link href={page.url!}>
-                    <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
+                    <a className="text-accent-3 hover:text-white transition ease-in-out duration-150">
                       {page.name}
                     </a>
                   </Link>
@@ -73,7 +73,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
               {legalPages.map((page) => (
                 <li key={page.url} className="py-3 md:py-0 md:pb-4">
                   <Link href={page.url!}>
-                    <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
+                    <a className="text-accent-3 hover:text-white transition ease-in-out duration-150">
                       {page.name}
                     </a>
                   </Link>
@@ -92,9 +92,9 @@ const Footer: FC<Props> = ({ className, pages }) => {
           <div>
             <span>&copy; 2020 ACME, Inc. All rights reserved.</span>
           </div>
-          <div className="flex items-center text-accents-4">
+          <div className="flex items-center">
-            <span>Crafted by</span>
+            <span className="text-accent-3">Crafted by</span>
-            <a href="https://vercel.com">
+            <a href="https://vercel.com" aria-label="Vercel.com Link">
               <img
                 src="/vercel.png"
                 alt="Vercel.com Logo"

components/core/I18nWidget/I18nWidget.tsx

@@ -8,8 +8,8 @@ const I18nWidget: FC = () => {
   return (
     <nav className={s.root}>
       <Menu>
-        <Menu.Button className={s.button}>
+        <Menu.Button className={s.button} aria-label="Language selector">
-          <img className="" src="/flag-us.png" />
+          <img className="" src="/flag-us.png" alt="US Flag" />
           <span>English</span>
           <span className="">
             <DoubleChevron />

components/core/Navbar/Navbar.tsx

@@ -15,7 +15,7 @@ const Navbar: FC<Props> = ({ className }) => {
       <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
         <div className="flex flex-1 items-center">
           <Link href="/">
-            <a className="cursor-pointer">
+            <a className="cursor-pointer" aria-label="Logo">
               <Logo />
             </a>
           </Link>
@@ -42,7 +42,7 @@ const Navbar: FC<Props> = ({ className }) => {
       </div>
 
       <div className="flex pb-4 lg:px-6 lg:hidden">
-        <Searchbar />
+        <Searchbar id="mobileSearch" />
       </div>
     </div>
   )

components/core/Searchbar/Searchbar.tsx

@@ -5,9 +5,10 @@ import { useRouter } from 'next/router'
 
 interface Props {
   className?: string
+  id?: string
 }
 
-const Searchbar: FC<Props> = ({ className }) => {
+const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
   const router = useRouter()
 
   useEffect(() => {
@@ -21,27 +22,30 @@ const Searchbar: FC<Props> = ({ className }) => {
         className
       )}
     >
-      <input
+      <label htmlFor={id}>
-        className={s.input}
+        <input
-        placeholder="Search for products..."
+          id={id}
-        defaultValue={router.query.q}
+          className={s.input}
-        onKeyUp={(e) => {
+          placeholder="Search for products..."
-          e.preventDefault()
+          defaultValue={router.query.q}
+          onKeyUp={(e) => {
+            e.preventDefault()
 
-          if (e.key === 'Enter') {
+            if (e.key === 'Enter') {
-            const q = e.currentTarget.value
+              const q = e.currentTarget.value
 
-            router.push(
+              router.push(
-              {
+                {
-                pathname: `/search`,
+                  pathname: `/search`,
-                query: q ? { q } : {},
+                  query: q ? { q } : {},
-              },
+                },
-              undefined,
+                undefined,
-              { shallow: true }
+                { shallow: true }
-            )
+              )
-          }
+            }
-        }}
+          }}
-      />
+        />
+      </label>
       <div className={s.iconContainer}>
         <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
           <path

components/core/Toggle/Toggle.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { Switch } from '@headlessui/react'
-import { HiSun, HiMoon } from 'react-icons/hi'
+import { Moon, Sun } from '@components/icon'
 interface Props {
   className?: string
   checked: boolean
@@ -35,7 +35,7 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
                 : 'opacity-100 ease-in duration-150'
             } absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
           >
-            <HiSun className="h-3 w-3 text-gray-400" />
+            <Sun className="h-3 w-3 text-accent-3" />
           </span>
           <span
             className={`${
@@ -44,7 +44,7 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
                 : 'opacity-0 ease-out duration-150'
             } opacity-0 ease-out duration-150 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
           >
-            <HiMoon className="h-3 w-3 text-yellow-400" />
+            <Moon className="h-3 w-3 text-yellow-400" />
           </span>
         </span>
       </span>

components/core/UserNav/UserNav.tsx

@@ -42,7 +42,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
             <Menu>
               {({ open }) => (
                 <>
-                  <Menu.Button className={s.avatarButton}>
+                  <Menu.Button className={s.avatarButton} aria-label="Menu">
                     <Avatar />
                   </Menu.Button>
                   <DropdownMenu open={open} />

components/core/index.ts

@@ -9,3 +9,4 @@ export { default as Toggle } from './Toggle'
 export { default as Head } from './Head'
 export { default as HTMLContent } from './HTMLContent'
 export { default as I18nWidget } from './I18nWidget'
+export { default as EnhancedImage } from './EnhancedImage'

components/product/ProductCard/ProductCard.tsx

@@ -1,10 +1,10 @@
-import { FC, ReactNode, Component } from 'react'
+import React, { FC, ReactNode, Component } from 'react'
 import cn from 'classnames'
-import Image from 'next/image'
-import Link from 'next/link'
-import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
-import { Heart } from '@components/icon'
 import s from './ProductCard.module.css'
+import Link from 'next/link'
+import { Heart } from '@components/icon'
+import { EnhancedImage } from '@components/core'
+import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
 
 interface Props {
   className?: string
@@ -24,7 +24,7 @@ const ProductCard: FC<Props> = ({
   imgHeight,
   priority,
 }) => {
-  const src = p.images.edges?.[0]?.node.urlOriginal!
+  const src = p.images.edges?.[0]?.node.urlLarge!
 
   if (variant === 'slim') {
     return (
@@ -34,8 +34,9 @@ const ProductCard: FC<Props> = ({
             {p.name}
           </span>
         </div>
-        <Image
+        <EnhancedImage
-          src={src}
+          src={p.images.edges?.[0]?.node.urlSmall!}
+          alt={p.name}
           width={imgWidth}
           height={imgHeight}
           priority={priority}
@@ -63,7 +64,8 @@ const ProductCard: FC<Props> = ({
           </div>
         </div>
         <div className={cn(s.imageContainer)}>
-          <Image
+          <EnhancedImage
+            alt={p.name}
             className={cn('w-full object-cover', s['product-image'])}
             src={src}
             width={imgWidth}

components/product/ProductSlider/ProductSlider.tsx

@@ -19,10 +19,15 @@ const ProductSlider: FC = ({ children }) => {
 
   return (
     <div className={s.root}>
-      <button className={cn(s.leftControl, s.control)} onClick={slider?.prev} />
+      <button
+        className={cn(s.leftControl, s.control)}
+        onClick={slider?.prev}
+        aria-label="Previous Product Image"
+      />
       <button
         className={cn(s.rightControl, s.control)}
         onClick={slider?.next}
+        aria-label="Next Product Image"
       />
       <div
         ref={ref}
@@ -50,6 +55,7 @@ const ProductSlider: FC = ({ children }) => {
           {[...Array(slider.details().size).keys()].map((idx) => {
             return (
               <button
+                aria-label="Position indicator"
                 key={idx}
                 className={cn(s.positionIndicator, {
                   [s.positionIndicatorActive]: currentSlide === idx,

components/product/ProductView/ProductView.module.css

@@ -53,10 +53,10 @@
 }
 
 .sidebar {
-  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full;
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full h-full;
 
   @screen lg {
-    @apply col-span-6 pt-20;
+    @apply col-span-6 py-24 justify-between;
   }
 }
 

components/product/ProductView/ProductView.tsx

@@ -6,8 +6,9 @@ import { NextSeo } from 'next-seo'
 import s from './ProductView.module.css'
 import { Heart } from '@components/icon'
 import { useUI } from '@components/ui/context'
-import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
+import { Button, Container } from '@components/ui'
+import { HTMLContent } from '@components/core'
 
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
@@ -79,6 +80,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
               {product.images.edges?.map((image, i) => (
                 <div key={image?.node.urlXL} className={s.imageContainer}>
                   <Image
+                    alt={product.name}
                     className={s.img}
                     src={image?.node.urlXL!}
                     width={1050}
@@ -110,7 +112,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
                         label={v.label}
                         onClick={() => {
                           setChoices((choices) => {
-                            console.log(choices)
                             return {
                               ...choices,
                               [opt.displayName]: v.label,
@@ -123,21 +124,22 @@ const ProductView: FC<Props> = ({ product, className }) => {
                 </div>
               </div>
             ))}
-            <div className="pb-12">
+
-              <div
+            <div className="pb-14 break-words w-full max-w-xl">
-                className="pb-14 break-words w-full"
+              <HTMLContent html={product.description} />
-                dangerouslySetInnerHTML={{ __html: product.description }}
-              />
-              <Button
-                type="button"
-                className={s.button}
-                onClick={addToCart}
-                loading={loading}
-              >
-                Add to Cart
-              </Button>
             </div>
           </section>
+          <div>
+            <Button
+              aria-label="Add to Cart"
+              type="button"
+              className={s.button}
+              onClick={addToCart}
+              loading={loading}
+            >
+              Add to Cart
+            </Button>
+          </div>
         </div>
 
         {/* TODO make it work */}

components/product/Swatch/Swatch.tsx

@@ -39,6 +39,7 @@ const Swatch: FC<Props & ButtonProps> = ({
     <Button
       className={rootClassName}
       style={color ? { backgroundColor: color } : {}}
+      aria-label="Variant Swatch"
       {...props}
     >
       {variant === 'color' && active && (

components/product/helpers.ts

@@ -1,7 +1,6 @@
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 
 export function getProductOptions(product: ProductNode) {
-  // console.log(product)
   const options = product.productOptions.edges?.map(({ node }: any) => ({
     displayName: node.displayName.toLowerCase(),
     values: node.values.edges?.map(({ node }: any) => node),

components/ui/Hero/Hero.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react'
 import { Container } from '@components/ui'
 import { RightArrow } from '@components/icon'
 import s from './Hero.module.css'
-
+import Link from 'next/link'
 interface Props {
   className?: string
   headline: string
@@ -21,10 +21,12 @@ const Hero: FC<Props> = ({ headline, description }) => {
             <p className="mt-5 text-xl leading-7 text-accent-2 text-white">
               {description}
             </p>
-            <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
+            <Link href="/blog">
-              <span>Read it here</span>
+              <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
-              <RightArrow width="20" heigh="20" className="ml-1" />
+                Read it here
-            </a>
+                <RightArrow width="20" heigh="20" className="ml-1" />
+              </a>
+            </Link>
           </div>
         </div>
       </Container>

components/ui/Text/Text.module.css

@@ -9,3 +9,7 @@
 .pageHeading {
   @apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide;
 }
+
+.sectionHeading {
+  @apply pt-1 pb-4 text-base leading-7 text-base tracking-wide uppercase border-b border-accents-2;
+}

components/ui/Text/Text.tsx

@@ -13,7 +13,7 @@ interface Props {
   children: React.ReactNode | any
 }
 
-type Variant = 'heading' | 'body' | 'pageHeading'
+type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading'
 
 const Text: FunctionComponent<Props> = ({
   style,
@@ -27,6 +27,7 @@ const Text: FunctionComponent<Props> = ({
     body: 'p',
     heading: 'h1',
     pageHeading: 'h1',
+    sectionHeading: 'h2',
   }
 
   const Component:
@@ -43,6 +44,7 @@ const Text: FunctionComponent<Props> = ({
           [s.body]: variant === 'body',
           [s.heading]: variant === 'heading',
           [s.pageHeading]: variant === 'pageHeading',
+          [s.sectionHeading]: variant === 'sectionHeading',
         },
         className
       )}

package.json

@@ -22,12 +22,10 @@
     "@headlessui/react": "^0.2.0",
     "@react-aria/overlays": "^3.4.0",
     "@tailwindcss/ui": "^0.6.2",
-    "animate.css": "^4.1.1",
     "bowser": "^2.11.0",
-    "bunyan": "^1.8.14",
-    "bunyan-prettystream": "^0.1.3",
     "classnames": "^2.2.6",
     "cookie": "^0.4.1",
+    "intersection-observer": "^0.11.0",
     "js-cookie": "^2.2.1",
     "keen-slider": "^5.2.4",
     "lodash.debounce": "^4.0.8",
@@ -35,16 +33,13 @@
     "next": "^9.5.6-canary.14",
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
-    "nextjs-progressbar": "^0.0.6",
     "postcss-import": "^13.0.0",
     "postcss-nesting": "^7.0.1",
     "react": "^16.14.0",
     "react-aria": "^3.0.0",
     "react-dom": "^16.14.0",
-    "react-icons": "^3.11.0",
+    "react-intersection-observer": "^8.29.1",
     "react-merge-refs": "^1.1.0",
-    "react-swipeable-views": "^0.13.9",
-    "react-swipeable-views-utils": "^0.14.0-alpha.0",
     "react-ticker": "^1.2.2",
     "swr": "^0.3.3",
     "tailwindcss": "^1.9"
@@ -65,6 +60,8 @@
     "@types/node": "^14.11.2",
     "@types/react": "^16.9.49",
     "@types/react-swipeable-views": "^0.13.0",
+    "bunyan": "^1.8.14",
+    "bunyan-prettystream": "^0.1.3",
     "graphql": "^15.3.0",
     "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-preset-env": "^6.7.0",

pages/_app.tsx

@@ -1,9 +1,6 @@
 import '@assets/main.css'
 import 'keen-slider/keen-slider.min.css'
 
-// To be removed
-import 'animate.css'
-
 import { FC } from 'react'
 import type { AppProps } from 'next/app'
 

pages/blog.tsx

@@ -34,7 +34,7 @@ export default function Blog({}: InferGetStaticPropsType<
                 <img
                   className="h-12 w-12 rounded-full"
                   src="https://vercel.com/api/www/avatar/61182a9f6bda512b4d9263c9c8a60aabe0402f4c?s=204"
-                  alt=""
+                  alt="Avatar"
                 />
               </div>
               <div className="ml-4">
@@ -51,7 +51,7 @@ export default function Blog({}: InferGetStaticPropsType<
       </div>
       <Container>
         <div className="-mt-96 mx-auto">
-          <img src="/jacket.png" />
+          <img src="/jacket.png" alt="Jacket" />
         </div>
         {/** Replace by HTML Content */}
         <div className="text-lg leading-7 font-medium py-6 text-justify max-w-6xl mx-auto">

pages/cart.tsx

@@ -36,6 +36,7 @@ export default function Cart({}: InferGetStaticPropsType<
 
   const error = null
   const success = null
+
   return (
     <div className="grid lg:grid-cols-12">
       <div className="lg:col-span-8">
@@ -72,9 +73,8 @@ export default function Cart({}: InferGetStaticPropsType<
           </div>
         ) : (
           <div className="px-4 sm:px-6 flex-1">
-            <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
+            <Text variant="pageHeading">My Cart</Text>
-              My Cart
+            <Text variant="sectionHeading">Review your Order</Text>
-            </h2>
             <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-2 border-t border-accents-2">
               {items.map((item) => (
                 <CartItem
@@ -84,21 +84,21 @@ export default function Cart({}: InferGetStaticPropsType<
                 />
               ))}
             </ul>
-            <hr className="mb-6" />
+            <hr className="my-6" />
             <Text>
               Before you leave, take a look at these items. We picked them just
               for you
             </Text>
-            <div className="flex py-6 space-x-2">
+            <div className="flex py-6 space-x-6">
               {[1, 2, 3, 4, 5, 6].map((x) => (
-                <div className="border border-accents-3 w-full h-24 bg-accents-2 bg-opacity-50" />
+                <div className="border border-accents-3 w-full h-24 bg-accents-2 bg-opacity-50 transform cursor-pointer hover:scale-110 duration-75" />
               ))}
             </div>
           </div>
         )}
       </div>
       <div className="lg:col-span-4">
-        <div className="flex-shrink-0 px-4 py-12 sm:px-6">
+        <div className="flex-shrink-0 px-4 py-24 sm:px-6">
           <div className="border-t border-accents-2">
             <ul className="py-3">
               <li className="flex justify-between py-1">
@@ -122,7 +122,7 @@ export default function Cart({}: InferGetStaticPropsType<
           <div className="flex flex-row justify-end">
             <div className="w-full lg:w-72">
               <Button href="/checkout" Component="a" width="100%">
-                Proceed to Checkout
+                Confirm Purchase
               </Button>
             </div>
           </div>

pages/search.tsx

@@ -111,12 +111,12 @@ export default function Search({
           </ul>
         </div>
         <div className="col-span-8">
-          <div className="mb-12 animate__animated animate__fadeIn">
+          <div className="mb-12 transition ease-in duration-75">
             {data ? (
               <>
                 <span
-                  className={cn('animate__animated', {
+                  className={cn('animated', {
-                    animate__fadeIn: data.found,
+                    fadeIn: data.found,
                     hidden: !data.found,
                   })}
                 >
@@ -124,8 +124,8 @@ export default function Search({
                   <strong>{q}</strong>"
                 </span>
                 <span
-                  className={cn('animate__animated', {
+                  className={cn('animated', {
-                    animate__fadeIn: !data.found,
+                    fadeIn: !data.found,
                     hidden: data.found,
                   })}
                 >
@@ -145,7 +145,7 @@ export default function Search({
                 <ProductCard
                   variant="simple"
                   key={node.path}
-                  className="animate__animated animate__fadeIn"
+                  className="animated fadeIn"
                   product={node}
                   imgWidth={480}
                   imgHeight={480}
@@ -157,7 +157,7 @@ export default function Search({
               {rangeMap(12, (i) => (
                 <Skeleton
                   key={i}
-                  className="w-full animate__animated animate__fadeIn"
+                  className="w-full animated fadeIn"
                   height={325}
                 />
               ))}

tailwind.config.js

@@ -3,7 +3,12 @@ module.exports = {
     removeDeprecatedGapUtilities: true,
     purgeLayersByDefault: true,
   },
-  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  purge: {
+    content: [
+      './pages/**/*.{js,ts,jsx,tsx}',
+      './components/**/*.{js,ts,jsx,tsx}',
+    ],
+  },
   theme: {
     extend: {
       maxWidth: {

yarn.lock

@@ -1060,13 +1060,6 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-transform-typescript" "^7.10.4"
 
-"@babel/runtime@7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0.tgz#adeb78fedfc855aa05bc041640f3f6f98e85424c"
-  integrity sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==
-  dependencies:
-    regenerator-runtime "^0.12.0"
-
 "@babel/runtime@7.11.2":
   version "7.11.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
@@ -1074,7 +1067,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.6.2", "@babel/runtime@^7.8.4":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
   integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
@@ -2594,11 +2587,6 @@ ally.js@1.4.1:
     css.escape "^1.5.0"
     platform "1.3.3"
 
-animate.css@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
-  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
-
 anser@1.4.9:
   version "1.4.9"
   resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.9.tgz#1f85423a5dcf8da4631a341665ff675b96845760"
@@ -4761,6 +4749,11 @@ inquirer@^7.3.3:
     strip-ansi "^6.0.0"
     through "^2.3.6"
 
+intersection-observer@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.11.0.tgz#f4ea067070326f68393ee161cc0a2ca4c0040c6f"
+  integrity sha512-KZArj2QVnmdud9zTpKf279m2bbGfG+4/kn16UU0NL3pTVl52ZHiJ9IRNSsnn6jaHrL9EGLFM5eWjTx2fz/+zoQ==
+
 intl-messageformat-parser@1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz#b43d45a97468cadbe44331d74bb1e8dea44fc075"
@@ -5142,11 +5135,6 @@ keen-slider@^5.2.4:
   resolved "https://registry.yarnpkg.com/keen-slider/-/keen-slider-5.2.4.tgz#9e2a889c63c02a651c81caa438f3691e9a3bc0a8"
   integrity sha512-z39afyASW63B+1FzWGzBkvXAnzJl3gAD8M+32TmhJAPJqjckCaKYm7YBjpSba04AoVMQw8y9U1LVcUucVVIQkQ==
 
-keycode@^2.1.7:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
-  integrity sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=
-
 keyv@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
@@ -5765,13 +5753,6 @@ next@^9.5.6-canary.14:
   optionalDependencies:
     sharp "0.26.2"
 
-nextjs-progressbar@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/nextjs-progressbar/-/nextjs-progressbar-0.0.6.tgz#d1841df42f2342807dc6f7ad1034ddb8ec8541d4"
-  integrity sha512-9sxNpUSHOnmRV8/3yEZ9NV5c/ip2CpQ7jim3EOOZp49qIHrgNxmy/kzoulNjt50AlA7pAu/8rwgC2WpzmSMrdg==
-  dependencies:
-    nprogress "^0.2.0"
-
 no-case@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.3.tgz#c21b434c1ffe48b39087e86cfb4d2582e9df18f8"
@@ -5896,11 +5877,6 @@ npmlog@^4.0.1, npmlog@^4.1.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
-nprogress@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
-  integrity sha1-y480xTIT2JVyP8urkH6UIq28r7E=
-
 nullthrows@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
@@ -6656,7 +6632,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@15.7.2, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.2:
+prop-types@15.7.2, prop-types@^15.6.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6785,21 +6761,10 @@ react-dom@^16.14.0:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
-react-event-listener@^0.6.0:
+react-intersection-observer@^8.29.1:
-  version "0.6.6"
+  version "8.29.1"
-  resolved "https://registry.yarnpkg.com/react-event-listener/-/react-event-listener-0.6.6.tgz#758f7b991cad9086dd39fd29fad72127e1d8962a"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.29.1.tgz#8c6f494ca81b39aee9f509f12d29443fc66a2256"
-  integrity sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==
+  integrity sha512-JLxJ4V0L73ailfvbYQ2/lfAyirtud1WsRsYnzHyVLMfQff1AIG1lWdC5XaGSK4yb9jZHVbbNsrVIO3PJm03koQ==
-  dependencies:
-    "@babel/runtime" "^7.2.0"
-    prop-types "^15.6.0"
-    warning "^4.0.1"
-
-react-icons@^3.11.0:
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254"
-  integrity sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q==
-  dependencies:
-    camelcase "^5.0.0"
 
 react-is@16.13.1, react-is@^16.8.1:
   version "16.13.1"
@@ -6816,57 +6781,6 @@ react-refresh@0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
-react-swipeable-views-core@^0.13.7:
-  version "0.13.7"
-  resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.13.7.tgz#c082b553f26e83fd20fc17f934200eb717023c8a"
-  integrity sha512-ekn9oDYfBt0oqJSGGwLEhKvn+QaqMGTy//9dURTLf+vp7W5j6GvmKryYdnwJCDITaPFI2hujXV4CH9krhvaE5w==
-  dependencies:
-    "@babel/runtime" "7.0.0"
-    warning "^4.0.1"
-
-react-swipeable-views-core@^0.14.0-alpha.0:
-  version "0.14.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.14.0-alpha.0.tgz#1c40dd1c328c97048a8f2cb9de504ee611ae21dd"
-  integrity sha512-TQm58RJv01EseBfaeY0kZUIBmhs1NyKXwhJL52iN/UlzbQSiaIE2kk+mSGicUriBK0H7UlScgLeJR91AJ7SVcA==
-  dependencies:
-    "@babel/runtime" "7.0.0"
-    warning "^4.0.1"
-
-react-swipeable-views-utils@^0.13.9:
-  version "0.13.9"
-  resolved "https://registry.yarnpkg.com/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.9.tgz#a66e98f2f4502d8b00182901f80d13b2f903e10f"
-  integrity sha512-QLGxRKrbJCbWz94vkWLzb1Daaa2Y/TZKmsNKQ6WSNrS+chrlfZ3z9tqZ7YUJlW6pRWp3QZdLSY3UE3cN0TXXmw==
-  dependencies:
-    "@babel/runtime" "7.0.0"
-    keycode "^2.1.7"
-    prop-types "^15.6.0"
-    react-event-listener "^0.6.0"
-    react-swipeable-views-core "^0.13.7"
-    shallow-equal "^1.2.1"
-
-react-swipeable-views-utils@^0.14.0-alpha.0:
-  version "0.14.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/react-swipeable-views-utils/-/react-swipeable-views-utils-0.14.0-alpha.0.tgz#1bc91cf89d13417a0ca8edc11b4a2c55c4a889b9"
-  integrity sha512-Ya9Xtr4uE1CYxyrPwtcImzcZFcOr3PP51kRgIOTx3Dx9SF31OtF0t2CgXuypTYTs7G4StRE3NzWlvSBiMZSVtQ==
-  dependencies:
-    "@babel/runtime" "7.0.0"
-    keycode "^2.1.7"
-    prop-types "^15.6.0"
-    react-event-listener "^0.6.0"
-    react-swipeable-views-core "^0.14.0-alpha.0"
-    shallow-equal "^1.2.1"
-
-react-swipeable-views@^0.13.9:
-  version "0.13.9"
-  resolved "https://registry.yarnpkg.com/react-swipeable-views/-/react-swipeable-views-0.13.9.tgz#d6a6c508bf5288ad55509f9c65916db5df0f2cec"
-  integrity sha512-WXC2FKYvZ9QdJ31v9LjEJEl1bA7E4AcaloTkbW0uU0dYf5uvv4aOpiyxubvOkVl1a5L2UAHmKSif4TmJ9usrSg==
-  dependencies:
-    "@babel/runtime" "7.0.0"
-    prop-types "^15.5.4"
-    react-swipeable-views-core "^0.13.7"
-    react-swipeable-views-utils "^0.13.9"
-    warning "^4.0.1"
-
 react-ticker@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/react-ticker/-/react-ticker-1.2.2.tgz#12cda5ff8266c6fe90ffcd8c58e12ba1596ddf24"
@@ -6971,11 +6885,6 @@ regenerate@^1.4.0:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.1.tgz#cad92ad8e6b591773485fbe05a485caf4f457e6f"
   integrity sha512-j2+C8+NtXQgEKWk49MMP5P/u2GhnahTtVkRIHr5R5lVRlbKvmQ+oS+A5aLKWp2ma5VkT8sh6v+v4hbH0YHR66A==
 
-regenerator-runtime@^0.12.0:
-  version "0.12.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
-  integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
-
 regenerator-runtime@^0.13.4:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
@@ -7343,11 +7252,6 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-shallow-equal@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
-  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
-
 sharp@0.26.2:
   version "0.26.2"
   resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.26.2.tgz#3d5777d246ae32890afe82a783c1cbb98456a88c"
@@ -8100,13 +8004,6 @@ vue-template-compiler@^2.6.12:
     de-indent "^1.0.2"
     he "^1.1.0"
 
-warning@^4.0.1:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
-  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
-  dependencies:
-    loose-envify "^1.0.0"
-
 watchpack@2.0.0-beta.13:
   version "2.0.0-beta.13"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.0.0-beta.13.tgz#9d9b0c094b8402139333e04eb6194643c8384f55"