Merge branch 'master' of github.com:okbel/e-comm-example into image-component

components/product/ProductSlider/ProductSlider.module.css

@@ -1,22 +1,76 @@
 .root {
-  @apply relative w-full h-full;
+  @apply relative w-full h-full relative;
   overflow-y: hidden;
+}
 
-  & > div {
-    overflow: visible !important;
+.leftControl,
+.rightControl {
+  @apply text-white text-xl absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
+}
+
+.leftControl {
+  @apply left-6;
+}
+
+.rightControl {
+  @apply right-6;
+}
+
+.control {
+  @apply opacity-0 transition duration-150;
+}
+
+.root:hover .control {
+  @apply opacity-100;
+}
+
+.positionIndicatorsContainer {
+  @apply hidden;
+  @screen sm {
+    @apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
   }
 }
 
-.rootPanel {
-  @apply absolute flex flex-row inset-0 z-20 m-20;
+.positionIndicator {
+  @apply rounded-full p-2;
+
+  /* :hover .dot {
+    @apply bg-hover-2;
+  }
+
+  :focus .dot {
+    @apply outline-none;
+  } */
 }
 
-.leftPanel {
-  @apply flex-1;
-  cursor: url('/cursor-left.png'), auto;
+.dot {
+  @apply bg-hover-1 transition w-3 h-3 rounded-full;
 }
 
-.rightPanel {
-  @apply flex-1;
-  cursor: url('/cursor-right.png'), auto;
+.positionIndicator:hover .dot {
+  @apply bg-hover-2;
 }
+
+.positionIndicator:focus {
+  @apply outline-none;
+}
+
+.positionIndicator:focus .dot {
+  @apply shadow-outline-blue;
+}
+
+.positionIndicatorActive .dot {
+  @apply bg-white;
+}
+
+.positionIndicatorActive:hover .dot {
+  @apply bg-white;
+}
+/* sx={{
+  width: '10px',
+  height: '10px',
+  bg: currentSlide === idx ? 'primary' : 'gray',
+  borderRadius: 'full',
+  mx: 2,
+  '&:focus': { outline: 'none' },
+}} */

components/product/ProductSlider/ProductSlider.tsx

@@ -1,36 +1,71 @@
-import React, { FC, useState } from 'react'
-import SwipeableViews from 'react-swipeable-views'
+import { useKeenSlider } from 'keen-slider/react'
+import React, { Children, FC, isValidElement, useState } from 'react'
+import { HiChevronLeft, HiChevronRight } from 'react-icons/hi'
+import cn from 'classnames'
+
 import s from './ProductSlider.module.css'
-interface Props {
-  children?: any
-}
 
-const ProductSlider: FC<Props> = ({ children }) => {
-  const [idx, setIdx] = useState(0)
-  const count = React.Children.count(children)
+const ProductSlider: FC = ({ children }) => {
+  const [currentSlide, setCurrentSlide] = useState(0)
+  const [isMounted, setIsMounted] = useState(false)
 
-  const goBack = () => {
-    idx !== 0 ? setIdx(idx - 1) : setIdx(count - 1)
-  }
-
-  const goNext = () => {
-    idx + 1 === count ? setIdx(0) : setIdx(idx + 1)
-  }
+  const [ref, slider] = useKeenSlider<HTMLDivElement>({
+    loop: true,
+    slidesPerView: 1,
+    mounted: () => setIsMounted(true),
+    slideChanged(s) {
+      setCurrentSlide(s.details().relativeSlide)
+    },
+  })
 
   return (
     <div className={s.root}>
-      <SwipeableViews
-        index={idx}
-        onChangeIndex={setIdx}
-        containerStyle={{ overflow: 'visible' }}
-        slideStyle={{ overflow: 'visible' }}
+      <button className={cn(s.leftControl, s.control)} onClick={slider?.prev}>
+        <HiChevronLeft />
+      </button>
+      <button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
+        <HiChevronRight />
+      </button>
+      <div
+        ref={ref}
+        className="keen-slider h-full transition-opacity duration-150"
+        style={{ opacity: isMounted ? 1 : 0 }}
       >
-        {children}
-      </SwipeableViews>
-      <div className={s.rootPanel}>
-        <div className={s.leftPanel} onClick={goBack}></div>
-        <div className={s.rightPanel} onClick={goNext}></div>
+        {Children.map(children, (child) => {
+          // Add the keen-slider__slide className to children
+          if (isValidElement(child)) {
+            return {
+              ...child,
+              props: {
+                ...child.props,
+                className: `${
+                  child.props.className ? `${child.props.className} ` : ''
+                }keen-slider__slide`,
+              },
+            }
+          }
+          return child
+        })}
       </div>
+      {slider && (
+        <div className={cn(s.positionIndicatorsContainer)}>
+          {[...Array(slider.details().size).keys()].map((idx) => {
+            return (
+              <button
+                key={idx}
+                className={cn(s.positionIndicator, {
+                  [s.positionIndicatorActive]: currentSlide === idx,
+                })}
+                onClick={() => {
+                  slider.moveToSlideRelative(idx)
+                }}
+              >
+                <div className={s.dot} />
+              </button>
+            )
+          })}
+        </div>
+      )}
     </div>
   )
 }

components/product/ProductView/ProductView.module.css

@@ -1,8 +1,8 @@
 .root {
-  @apply relative grid items-start gap-8 grid-cols-1;
+  @apply relative grid items-start gap-8 grid-cols-1 overflow-x-hidden;
 
   @screen lg {
-    @apply grid-cols-12 pt-10;
+    @apply grid-cols-12;
   }
 }
 
@@ -17,24 +17,18 @@
   }
 
   @screen lg {
-    @apply mx-0 col-span-7;
+    @apply mx-0 col-span-6;
     min-height: 100%;
     height: 100%;
   }
 }
 
 .squareBg {
-  @apply absolute inset-0 bg-violet z-0;
-  max-height: 250px;
-
-  @screen md {
-    @apply inset-20;
-    max-height: 500px;
-  }
+  @apply absolute inset-0 bg-violet z-0 h-full;
 }
 
 .nameBox {
-  @apply absolute top-6 left-10 z-10;
+  @apply absolute top-6 left-6 z-20;
 
   & .name {
     @apply px-6 py-2 bg-primary text-primary font-bold;
@@ -46,20 +40,19 @@
     @apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
   }
 
-  @screen md {
+  @screen lg {
     & .name,
     & .price {
-      @apply bg-violet-light text-white;
+      @apply bg-hover-1 text-white;
     }
   }
 }
 
 .sidebar {
-  @apply flex flex-col col-span-1;
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-12 w-full;
 
   @screen lg {
-    @apply col-span-5;
-    padding-top: 5rem;
+    @apply col-span-5 pl-12 pt-20;
   }
 }
 
@@ -68,20 +61,18 @@
 }
 
 .img {
-  @apply w-full h-full object-cover;
-
-  @screen md {
-    height: 100%;
-    margin-top: -2.75rem;
-  }
-
-  @screen lg {
-    height: 100%;
-    margin-top: -8%;
-  }
+  @apply w-full h-auto max-h-full object-cover;
 }
 
 .button {
   min-width: 300px;
   text-align: center;
 }
+
+.wishlistButton {
+  @apply absolute z-30 top-6 right-0 bg-primary text-base w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
+
+  @screen lg {
+    @apply right-12 text-white bg-violet;
+  }
+}

components/product/ProductView/ProductView.tsx

@@ -2,14 +2,16 @@ import { FC, useState, useEffect } from 'react'
 import cn from 'classnames'
 import Image from 'next/image'
 import { NextSeo } from 'next-seo'
-import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
-import useAddItem from '@lib/bigcommerce/cart/use-add-item'
-import { isDesktop } from '@lib/browser'
+
+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 useAddItem from '@lib/bigcommerce/cart/use-add-item'
+import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 import { getProductOptions } from '../helpers'
-import s from './ProductView.module.css'
 
 interface Props {
   className?: string
@@ -22,17 +24,12 @@ const ProductView: FC<Props> = ({ product, className }) => {
   const { openSidebar } = useUI()
   const options = getProductOptions(product)
   const [loading, setLoading] = useState(false)
-  const [validMedia, setValidMedia] = useState(false)
 
   const [choices, setChoices] = useState<Record<string, any>>({
     size: null,
     color: null,
   })
 
-  useEffect(() => {
-    setValidMedia(isDesktop())
-  }, [])
-
   const addToCart = async () => {
     setLoading(true)
     try {
@@ -48,7 +45,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
   }
 
   return (
-    <Container>
+    <Container className="max-w-none w-full" clean>
       <NextSeo
         title={product.name}
         description={product.description}
@@ -91,12 +88,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
               ))}
             </ProductSlider>
           </div>
-
-          {!validMedia && (
-            <div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
-              <img src="/slider-arrows.png" />
-            </div>
-          )}
         </div>
 
         <div className={s.sidebar}>
@@ -146,6 +137,11 @@ const ProductView: FC<Props> = ({ product, className }) => {
             </div>
           </section>
         </div>
+
+        {/* TODO make it work */}
+        <div className={s.wishlistButton}>
+          <Heart />
+        </div>
       </div>
     </Container>
   )

components/product/Swatch/Swatch.module.css

@@ -1,6 +1,6 @@
 .root {
   @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
-  items-center justify-center cursor-pointer transition duration-100 ease-in-out
+  items-center justify-center cursor-pointer transition duration-150 ease-in-out
   p-0 shadow-none border-gray-200 border box-border;
 
   & > span {
@@ -13,7 +13,7 @@
 }
 
 .color {
-  @apply text-black transition duration-100 ease-in-out;
+  @apply text-black transition duration-150 ease-in-out;
 
   &:hover {
     @apply text-black;