Monorepo with Turborepo (#651)

* Moved everything * Figuring out how to make imports work * Updated exports * Added missing exports * Added @vercel/commerce-local to `site` * Updated commerce config * Updated exports and commerce config * Updated commerce hoc * Fixed exports in local * Added publish config * Updated imports in site * It's actually working * Don't use debugger in dev for better speeds * Improved DX when editing packages * Set up eslint with husky * Updated prettier config * Added prettier setup to every package * Moved bigcommerce * Moved Bigcommerce to src and package updates * Updated setup of bigcommerce * Moved definitions script * Moved commercejs * Move to src * Fixed types in commercejs * Moved kibocommerce * Moved kibocommerce to src * Added package/tsconfig to kibocommerce * Fixed imports and other things * Moved ordercloud * Moved ordercloud to src * Fixed imports * Added missing prettier files * Moved Saleor * Moved Saleor to src * Fixed imports * Replaced all imports to @commerce * Added prettierignore/rc to all providers * Moved shopify to src * Build shopify in packages * Moved Spree * Moved spree to src * Updated spree * Moved swell * Moved swell to src * Fixed type imports in swell * Moved Vendure to packages * Moved vendure to src * Fixed imports in vendure * Added codegen to saleor * Updated codegen setup for shopify * Added codegen to vendure * Added codegen to kibocommerce * Added all packages to site's deps * Updated codegen setup in bigcommerce * Minor fixes * Updated providers' names in site * Updated packages based on Bel's changes * Updated turbo to latest * Fixed ts complains * Set npm engine in root * New lockfile install * remove engines * Regen lockfile * Switched from npm to yarn * Updated typesVersions in all packages * Moved dep * Updated SWR to the just released 1.2.0 * Removed "isolatedModules" from packages * Updated list of providers and default * Updated swell declaration * Removed next import from kibocommerce * Added COMMERCE_PROVIDER log * Added another log * Updated turbo config * Updated docs * Removed test logs Co-authored-by: Jared Palmer <jared@jaredpalmer.com>
2025-07-23 04:36:49 +00:00 · 2022-02-01 14:14:05 -05:00
parent d0ef346189
commit 0afe686fe9
1326 changed files with 9109 additions and 19494 deletions
--- a/site/components/product/ProductCard/ProductCard.module.css
+++ b/site/components/product/ProductCard/ProductCard.module.css
@@ -0,0 +1,114 @@
+.root {
+  @apply relative max-h-full w-full box-border overflow-hidden
+  bg-no-repeat bg-center bg-cover transition-transform
+  ease-linear cursor-pointer inline-block bg-accent-1;
+  height: 100% !important;
+}
+
+.root:hover {
+  & .productImage {
+    transform: scale(1.2625);
+  }
+
+  & .header .name span,
+  & .header .price,
+  & .wishlistButton {
+    @apply bg-secondary text-secondary;
+  }
+
+  &:nth-child(6n + 1) .header .name span,
+  &:nth-child(6n + 1) .header .price,
+  &:nth-child(6n + 1) .wishlistButton {
+    @apply bg-violet text-white;
+  }
+
+  &:nth-child(6n + 5) .header .name span,
+  &:nth-child(6n + 5) .header .price,
+  &:nth-child(6n + 5) .wishlistButton {
+    @apply bg-blue text-white;
+  }
+
+  &:nth-child(6n + 3) .header .name span,
+  &:nth-child(6n + 3) .header .price,
+  &:nth-child(6n + 3) .wishlistButton {
+    @apply bg-pink text-white;
+  }
+
+  &:nth-child(6n + 6) .header .name span,
+  &:nth-child(6n + 6) .header .price,
+  &:nth-child(6n + 6) .wishlistButton {
+    @apply bg-cyan text-white;
+  }
+}
+
+.header {
+  @apply transition-colors ease-in-out duration-500
+  absolute top-0 left-0 z-20 pr-16;
+}
+
+.header .name {
+  @apply pt-0 max-w-full w-full leading-extra-loose
+  transition-colors ease-in-out duration-500;
+  font-size: 2rem;
+  letter-spacing: 0.4px;
+}
+
+.header .name span {
+  @apply py-4 px-6 bg-primary text-primary font-bold
+  transition-colors ease-in-out duration-500;
+  font-size: inherit;
+  letter-spacing: inherit;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.header .price {
+  @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
+  font-semibold inline-block tracking-wide
+  transition-colors ease-in-out duration-500;
+}
+
+.imageContainer {
+  @apply flex items-center justify-center overflow-hidden;
+}
+
+.imageContainer > div {
+  min-width: 100%;
+}
+
+.imageContainer .productImage {
+  @apply transform transition-transform duration-500
+  object-cover scale-120;
+}
+
+.root .wishlistButton {
+  @apply top-0 right-0 z-30 absolute;
+}
+
+/* Variant Simple */
+.simple .header .name {
+  @apply pt-2 text-lg leading-10 -mt-1;
+}
+
+.simple .header .price {
+  @apply text-sm;
+}
+
+/* Variant Slim */
+.slim {
+  @apply bg-transparent relative overflow-hidden
+  box-border;
+}
+
+.slim .header {
+  @apply absolute inset-0 flex items-center justify-end mr-8 z-20;
+}
+
+.slim span {
+  @apply bg-accent-9 text-accent-0 inline-block p-3
+  font-bold text-xl break-words;
+}
+
+.root:global(.secondary) .header span {
+  @apply bg-accent-0 text-accent-9;
+}
--- a/site/components/product/ProductCard/ProductCard.tsx
+++ b/site/components/product/ProductCard/ProductCard.tsx
@@ -0,0 +1,138 @@
+import { FC } from 'react'
+import cn from 'classnames'
+import Link from 'next/link'
+import type { Product } from '@commerce/types/product'
+import s from './ProductCard.module.css'
+import Image, { ImageProps } from 'next/image'
+import WishlistButton from '@components/wishlist/WishlistButton'
+import usePrice from '@framework/product/use-price'
+import ProductTag from '../ProductTag'
+
+interface Props {
+  className?: string
+  product: Product
+  noNameTag?: boolean
+  imgProps?: Omit<ImageProps, 'src' | 'layout' | 'placeholder' | 'blurDataURL'>
+  variant?: 'default' | 'slim' | 'simple'
+}
+
+const placeholderImg = '/product-img-placeholder.svg'
+
+const ProductCard: FC<Props> = ({
+  product,
+  imgProps,
+  className,
+  noNameTag = false,
+  variant = 'default',
+}) => {
+  const { price } = usePrice({
+    amount: product.price.value,
+    baseAmount: product.price.retailPrice,
+    currencyCode: product.price.currencyCode!,
+  })
+
+  const rootClassName = cn(
+    s.root,
+    { [s.slim]: variant === 'slim', [s.simple]: variant === 'simple' },
+    className
+  )
+
+  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}`}
+            />
+            <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>
+          </>
+        )}
+      </a>
+    </Link>
+  )
+}
+
+export default ProductCard
--- a/site/components/product/ProductCard/index.ts
+++ b/site/components/product/ProductCard/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductCard'
--- a/site/components/product/ProductOptions/ProductOptions.tsx
+++ b/site/components/product/ProductOptions/ProductOptions.tsx
@@ -0,0 +1,52 @@
+import { memo } from 'react'
+import { Swatch } from '@components/product'
+import type { ProductOption } from '@commerce/types/product'
+import { SelectedOptions } from '../helpers'
+
+interface ProductOptionsProps {
+  options: ProductOption[]
+  selectedOptions: SelectedOptions
+  setSelectedOptions: React.Dispatch<React.SetStateAction<SelectedOptions>>
+}
+
+const ProductOptions: React.FC<ProductOptionsProps> = ({
+  options,
+  selectedOptions,
+  setSelectedOptions,
+}) => {
+  return (
+    <div>
+      {options.map((opt) => (
+        <div className="pb-4" key={opt.displayName}>
+          <h2 className="uppercase font-medium text-sm tracking-wide">
+            {opt.displayName}
+          </h2>
+          <div role="listbox" className="flex flex-row py-4">
+            {opt.values.map((v, i: number) => {
+              const active = selectedOptions[opt.displayName.toLowerCase()]
+              return (
+                <Swatch
+                  key={`${opt.id}-${i}`}
+                  active={v.label.toLowerCase() === active}
+                  variant={opt.displayName}
+                  color={v.hexColors ? v.hexColors[0] : ''}
+                  label={v.label}
+                  onClick={() => {
+                    setSelectedOptions((selectedOptions) => {
+                      return {
+                        ...selectedOptions,
+                        [opt.displayName.toLowerCase()]: v.label.toLowerCase(),
+                      }
+                    })
+                  }}
+                />
+              )
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default memo(ProductOptions)
--- a/site/components/product/ProductOptions/index.ts
+++ b/site/components/product/ProductOptions/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductOptions'
--- a/site/components/product/ProductSidebar/ProductSidebar.module.css
+++ b/site/components/product/ProductSidebar/ProductSidebar.module.css
@@ -0,0 +1,84 @@
+.root {
+  @apply relative grid items-start gap-1 grid-cols-1 overflow-x-hidden;
+  min-height: auto;
+}
+
+.main {
+  @apply relative px-0 pb-0 box-border  flex flex-col col-span-1;
+  min-height: 500px;
+}
+
+.header {
+  @apply transition-colors ease-in-out duration-500
+  absolute top-0 left-0 z-20 pr-16;
+}
+
+.header .name {
+  @apply pt-0 max-w-full w-full leading-extra-loose;
+  font-size: 2rem;
+  letter-spacing: 0.4px;
+}
+
+.header .name span {
+  @apply py-4 px-6 bg-primary text-primary font-bold;
+  font-size: inherit;
+  letter-spacing: inherit;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.header .price {
+  @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
+  font-semibold inline-block tracking-wide;
+}
+
+.sidebar {
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 py-6 w-full h-full;
+}
+
+.sliderContainer {
+  @apply flex items-center justify-center overflow-x-hidden bg-violet;
+}
+
+.imageContainer {
+  @apply text-center;
+}
+
+.imageContainer > div,
+.imageContainer > div > div {
+  @apply h-full;
+}
+
+.sliderContainer .img {
+  @apply w-full h-auto max-h-full object-cover;
+}
+
+.button {
+  width: 100%;
+}
+
+.wishlistButton {
+  @apply absolute z-30 top-0 right-0;
+}
+
+.relatedProductsGrid {
+  @apply grid grid-cols-2 py-2 gap-2 md:grid-cols-4 md:gap-7;
+}
+
+@screen lg {
+  .root {
+    @apply grid-cols-12;
+  }
+
+  .main {
+    @apply mx-0 col-span-8;
+  }
+
+  .sidebar {
+    @apply col-span-4 py-6;
+  }
+
+  .imageContainer {
+    max-height: 600px;
+  }
+}
--- a/site/components/product/ProductSidebar/ProductSidebar.tsx
+++ b/site/components/product/ProductSidebar/ProductSidebar.tsx
@@ -0,0 +1,89 @@
+import s from './ProductSidebar.module.css'
+import { useAddItem } from '@framework/cart'
+import { FC, useEffect, useState } from 'react'
+import { ProductOptions } from '@components/product'
+import type { Product } from '@commerce/types/product'
+import { Button, Text, Rating, Collapse, useUI } from '@components/ui'
+import {
+  getProductVariant,
+  selectDefaultOptionFromProduct,
+  SelectedOptions,
+} from '../helpers'
+
+interface ProductSidebarProps {
+  product: Product
+  className?: string
+}
+
+const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
+  const addItem = useAddItem()
+  const { openSidebar } = useUI()
+  const [loading, setLoading] = useState(false)
+  const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>({})
+
+  useEffect(() => {
+    selectDefaultOptionFromProduct(product, setSelectedOptions)
+  }, [product])
+
+  const variant = getProductVariant(product, selectedOptions)
+  const addToCart = async () => {
+    setLoading(true)
+    try {
+      await addItem({
+        productId: String(product.id),
+        variantId: String(variant ? variant.id : product.variants[0]?.id),
+      })
+      openSidebar()
+      setLoading(false)
+    } catch (err) {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className={className}>
+      <ProductOptions
+        options={product.options}
+        selectedOptions={selectedOptions}
+        setSelectedOptions={setSelectedOptions}
+      />
+      <Text
+        className="pb-4 break-words w-full max-w-xl"
+        html={product.descriptionHtml || product.description}
+      />
+      <div className="flex flex-row justify-between items-center">
+        <Rating value={4} />
+        <div className="text-accent-6 pr-1 font-medium text-sm">36 reviews</div>
+      </div>
+      <div>
+        {process.env.COMMERCE_CART_ENABLED && (
+          <Button
+            aria-label="Add to Cart"
+            type="button"
+            className={s.button}
+            onClick={addToCart}
+            loading={loading}
+            disabled={variant?.availableForSale === false}
+          >
+            {variant?.availableForSale === false
+              ? 'Not Available'
+              : 'Add To Cart'}
+          </Button>
+        )}
+      </div>
+      <div className="mt-6">
+        <Collapse title="Care">
+          This is a limited edition production run. Printing starts when the
+          drop ends.
+        </Collapse>
+        <Collapse title="Details">
+          This is a limited edition production run. Printing starts when the
+          drop ends. Reminder: Bad Boys For Life. Shipping may take 10+ days due
+          to COVID-19.
+        </Collapse>
+      </div>
+    </div>
+  )
+}
+
+export default ProductSidebar
--- a/site/components/product/ProductSidebar/index.ts
+++ b/site/components/product/ProductSidebar/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductSidebar'
--- a/site/components/product/ProductSlider/ProductSlider.module.css
+++ b/site/components/product/ProductSlider/ProductSlider.module.css
@@ -0,0 +1,57 @@
+.root {
+  @apply relative w-full h-full select-none;
+  overflow: hidden;
+}
+
+.slider {
+  @apply relative h-full transition-opacity duration-150;
+  opacity: 0;
+}
+
+.slider.show {
+  opacity: 1;
+}
+
+.thumb {
+  @apply overflow-hidden inline-block cursor-pointer h-full;
+  width: 125px;
+  width: calc(100% / 3);
+}
+
+.thumb.selected {
+  @apply bg-white;
+}
+
+.thumb img {
+  height: 85% !important;
+}
+
+.album {
+  width: 100%;
+  height: 100%;
+  @apply bg-violet-dark;
+  box-sizing: content-box;
+  overflow-y: hidden;
+  overflow-x: auto;
+  white-space: nowrap;
+  height: 125px;
+  scrollbar-width: none;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.album::-webkit-scrollbar {
+  display: none;
+}
+
+@screen md {
+  .thumb:hover {
+    transform: scale(1.02);
+  }
+
+  .album {
+    height: 182px;
+  }
+  .thumb {
+    width: 235px;
+  }
+}
--- a/site/components/product/ProductSlider/ProductSlider.tsx
+++ b/site/components/product/ProductSlider/ProductSlider.tsx
@@ -0,0 +1,129 @@
+import { useKeenSlider } from 'keen-slider/react'
+import React, {
+  Children,
+  isValidElement,
+  useState,
+  useRef,
+  useEffect,
+} from 'react'
+import cn from 'classnames'
+import { a } from '@react-spring/web'
+import s from './ProductSlider.module.css'
+import ProductSliderControl from '../ProductSliderControl'
+
+interface ProductSliderProps {
+  children: React.ReactNode[]
+  className?: string
+}
+
+const ProductSlider: React.FC<ProductSliderProps> = ({
+  children,
+  className = '',
+}) => {
+  const [currentSlide, setCurrentSlide] = useState(0)
+  const [isMounted, setIsMounted] = useState(false)
+  const sliderContainerRef = useRef<HTMLDivElement>(null)
+  const thumbsContainerRef = useRef<HTMLDivElement>(null)
+
+  const [ref, slider] = useKeenSlider<HTMLDivElement>({
+    loop: true,
+    slides: { perView: 1 },
+    created: () => setIsMounted(true),
+    slideChanged(s) {
+      const slideNumber = s.track.details.rel
+      setCurrentSlide(slideNumber)
+
+      if (thumbsContainerRef.current) {
+        const $el = document.getElementById(`thumb-${slideNumber}`)
+        if (slideNumber >= 3) {
+          thumbsContainerRef.current.scrollLeft = $el!.offsetLeft
+        } else {
+          thumbsContainerRef.current.scrollLeft = 0
+        }
+      }
+    },
+  })
+
+  // Stop the history navigation gesture on touch devices
+  useEffect(() => {
+    const preventNavigation = (event: TouchEvent) => {
+      // Center point of the touch area
+      const touchXPosition = event.touches[0].pageX
+      // Size of the touch area
+      const touchXRadius = event.touches[0].radiusX || 0
+
+      // We set a threshold (10px) on both sizes of the screen,
+      // if the touch area overlaps with the screen edges
+      // it's likely to trigger the navigation. We prevent the
+      // touchstart event in that case.
+      if (
+        touchXPosition - touchXRadius < 10 ||
+        touchXPosition + touchXRadius > window.innerWidth - 10
+      )
+        event.preventDefault()
+    }
+
+    const slider = sliderContainerRef.current!
+
+    slider.addEventListener('touchstart', preventNavigation)
+
+    return () => {
+      if (slider) {
+        slider.removeEventListener('touchstart', preventNavigation)
+      }
+    }
+  }, [])
+
+  const onPrev = React.useCallback(() => slider.current?.prev(), [slider])
+  const onNext = React.useCallback(() => slider.current?.next(), [slider])
+
+  return (
+    <div className={cn(s.root, className)} ref={sliderContainerRef}>
+      <div
+        ref={ref}
+        className={cn(s.slider, { [s.show]: isMounted }, 'keen-slider')}
+      >
+        {slider && <ProductSliderControl onPrev={onPrev} onNext={onNext} />}
+        {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>
+
+      <a.div className={s.album} ref={thumbsContainerRef}>
+        {slider &&
+          Children.map(children, (child, idx) => {
+            if (isValidElement(child)) {
+              return {
+                ...child,
+                props: {
+                  ...child.props,
+                  className: cn(child.props.className, s.thumb, {
+                    [s.selected]: currentSlide === idx,
+                  }),
+                  id: `thumb-${idx}`,
+                  onClick: () => {
+                    slider.current?.moveToIdx(idx)
+                  },
+                },
+              }
+            }
+            return child
+          })}
+      </a.div>
+    </div>
+  )
+}
+
+export default ProductSlider
--- a/site/components/product/ProductSlider/index.ts
+++ b/site/components/product/ProductSlider/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductSlider'
--- a/site/components/product/ProductSliderControl/ProductSliderControl.module.css
+++ b/site/components/product/ProductSliderControl/ProductSliderControl.module.css
@@ -0,0 +1,29 @@
+.control {
+  @apply bg-violet absolute bottom-10 right-10 flex flex-row
+  border-accent-0 border text-accent-0 z-30 shadow-xl select-none;
+  height: 48px;
+}
+
+.leftControl,
+.rightControl {
+  @apply px-9 cursor-pointer;
+  transition: background-color 0.2s ease;
+}
+
+.leftControl:hover,
+.rightControl:hover {
+  background-color: var(--violet-dark);
+}
+
+.leftControl:focus,
+.rightControl:focus {
+  @apply outline-none;
+}
+
+.rightControl {
+  @apply border-l border-accent-0;
+}
+
+.leftControl {
+  margin-right: -1px;
+}
--- a/site/components/product/ProductSliderControl/ProductSliderControl.tsx
+++ b/site/components/product/ProductSliderControl/ProductSliderControl.tsx
@@ -0,0 +1,30 @@
+import { FC, MouseEventHandler, memo } from 'react'
+import cn from 'classnames'
+import s from './ProductSliderControl.module.css'
+import { ArrowLeft, ArrowRight } from '@components/icons'
+
+interface ProductSliderControl {
+  onPrev: MouseEventHandler<HTMLButtonElement>
+  onNext: MouseEventHandler<HTMLButtonElement>
+}
+
+const ProductSliderControl: FC<ProductSliderControl> = ({ onPrev, onNext }) => (
+  <div className={s.control}>
+    <button
+      className={cn(s.leftControl)}
+      onClick={onPrev}
+      aria-label="Previous Product Image"
+    >
+      <ArrowLeft />
+    </button>
+    <button
+      className={cn(s.rightControl)}
+      onClick={onNext}
+      aria-label="Next Product Image"
+    >
+      <ArrowRight />
+    </button>
+  </div>
+)
+
+export default memo(ProductSliderControl)
--- a/site/components/product/ProductSliderControl/index.ts
+++ b/site/components/product/ProductSliderControl/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductSliderControl'
--- a/site/components/product/ProductTag/ProductTag.module.css
+++ b/site/components/product/ProductTag/ProductTag.module.css
@@ -0,0 +1,30 @@
+.root {
+  @apply transition-colors ease-in-out duration-500
+  absolute top-0 left-0 z-20 pr-16;
+}
+
+.root .name {
+  @apply pt-0 max-w-full w-full leading-extra-loose;
+  font-size: 2rem;
+  letter-spacing: 0.4px;
+  line-height: 2.2em;
+}
+
+.root .name span {
+  @apply py-4 px-6 bg-primary text-primary font-bold;
+  min-height: 70px;
+  font-size: inherit;
+  letter-spacing: inherit;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.root .name span.fontsizing {
+  display: flex;
+  padding-top: 1.5rem;
+}
+
+.root .price {
+  @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
+  font-semibold inline-block tracking-wide;
+}
--- a/site/components/product/ProductTag/ProductTag.tsx
+++ b/site/components/product/ProductTag/ProductTag.tsx
@@ -0,0 +1,36 @@
+import cn from 'classnames'
+import { inherits } from 'util'
+import s from './ProductTag.module.css'
+
+interface ProductTagProps {
+  className?: string
+  name: string
+  price: string
+  fontSize?: number
+}
+
+const ProductTag: React.FC<ProductTagProps> = ({
+  name,
+  price,
+  className = '',
+  fontSize = 32,
+}) => {
+  return (
+    <div className={cn(s.root, className)}>
+      <h3 className={s.name}>
+        <span
+          className={cn({ [s.fontsizing]: fontSize < 32 })}
+          style={{
+            fontSize: `${fontSize}px`,
+            lineHeight: `${fontSize}px`,
+          }}
+        >
+          {name}
+        </span>
+      </h3>
+      <div className={s.price}>{price}</div>
+    </div>
+  )
+}
+
+export default ProductTag
--- a/site/components/product/ProductTag/index.ts
+++ b/site/components/product/ProductTag/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductTag'
--- a/site/components/product/ProductView/ProductView.module.css
+++ b/site/components/product/ProductView/ProductView.module.css
@@ -0,0 +1,59 @@
+.root {
+  @apply relative grid items-start gap-1 grid-cols-1 overflow-x-hidden;
+  min-height: auto;
+}
+
+.main {
+  @apply relative px-0 pb-0 box-border  flex flex-col col-span-1;
+  min-height: 500px;
+}
+
+.sidebar {
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 py-6 w-full h-full;
+}
+
+.sliderContainer {
+  @apply flex items-center justify-center overflow-x-hidden bg-violet;
+}
+
+.imageContainer {
+  @apply text-center h-full relative;
+}
+
+.imageContainer > span {
+  height: 100% !important;
+}
+
+.sliderContainer .img {
+  @apply w-full h-full max-h-full object-cover;
+}
+
+.button {
+  width: 100%;
+}
+
+.wishlistButton {
+  @apply absolute z-30 top-0 right-0;
+}
+
+.relatedProductsGrid {
+  @apply grid grid-cols-2 py-2 gap-2 md:grid-cols-4 md:gap-7;
+}
+
+@screen lg {
+  .root {
+    @apply grid-cols-12;
+  }
+
+  .main {
+    @apply mx-0 col-span-8;
+  }
+
+  .sidebar {
+    @apply col-span-4 py-6;
+  }
+
+  .imageContainer {
+    max-height: 600px;
+  }
+}
--- a/site/components/product/ProductView/ProductView.tsx
+++ b/site/components/product/ProductView/ProductView.tsx
@@ -0,0 +1,113 @@
+import cn from 'classnames'
+import Image from 'next/image'
+import { NextSeo } from 'next-seo'
+import s from './ProductView.module.css'
+import { FC } from 'react'
+import type { Product } from '@commerce/types/product'
+import usePrice from '@framework/product/use-price'
+import { WishlistButton } from '@components/wishlist'
+import { ProductSlider, ProductCard } from '@components/product'
+import { Container, Text } from '@components/ui'
+import ProductSidebar from '../ProductSidebar'
+import ProductTag from '../ProductTag'
+interface ProductViewProps {
+  product: Product
+  relatedProducts: Product[]
+}
+
+const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
+  const { price } = usePrice({
+    amount: product.price.value,
+    baseAmount: product.price.retailPrice,
+    currencyCode: product.price.currencyCode!,
+  })
+
+  return (
+    <>
+      <Container className="max-w-none w-full" clean>
+        <div className={cn(s.root, 'fit')}>
+          <div className={cn(s.main, 'fit')}>
+            <ProductTag
+              name={product.name}
+              price={`${price} ${product.price?.currencyCode}`}
+              fontSize={32}
+            />
+            <div className={s.sliderContainer}>
+              <ProductSlider key={product.id}>
+                {product.images.map((image, i) => (
+                  <div key={image.url} className={s.imageContainer}>
+                    <Image
+                      className={s.img}
+                      src={image.url!}
+                      alt={image.alt || 'Product Image'}
+                      width={600}
+                      height={600}
+                      priority={i === 0}
+                      quality="85"
+                    />
+                  </div>
+                ))}
+              </ProductSlider>
+            </div>
+            {process.env.COMMERCE_WISHLIST_ENABLED && (
+              <WishlistButton
+                className={s.wishlistButton}
+                productId={product.id}
+                variant={product.variants[0]}
+              />
+            )}
+          </div>
+
+          <ProductSidebar
+            key={product.id}
+            product={product}
+            className={s.sidebar}
+          />
+        </div>
+        <hr className="mt-7 border-accent-2" />
+        <section className="py-12 px-6 mb-10">
+          <Text variant="sectionHeading">Related Products</Text>
+          <div className={s.relatedProductsGrid}>
+            {relatedProducts.map((p) => (
+              <div
+                key={p.path}
+                className="animated fadeIn bg-accent-0 border border-accent-2"
+              >
+                <ProductCard
+                  noNameTag
+                  product={p}
+                  key={p.path}
+                  variant="simple"
+                  className="animated fadeIn"
+                  imgProps={{
+                    width: 300,
+                    height: 300,
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+        </section>
+      </Container>
+      <NextSeo
+        title={product.name}
+        description={product.description}
+        openGraph={{
+          type: 'website',
+          title: product.name,
+          description: product.description,
+          images: [
+            {
+              url: product.images[0]?.url!,
+              width: 800,
+              height: 600,
+              alt: product.name,
+            },
+          ],
+        }}
+      />
+    </>
+  )
+}
+
+export default ProductView
--- a/site/components/product/ProductView/index.ts
+++ b/site/components/product/ProductView/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductView'
--- a/site/components/product/Swatch/Swatch.module.css
+++ b/site/components/product/Swatch/Swatch.module.css
@@ -0,0 +1,54 @@
+.swatch {
+  box-sizing: border-box;
+  composes: root from '@components/ui/Button/Button.module.css';
+  @apply h-10 w-10 bg-primary text-primary rounded-full mr-3 inline-flex
+  items-center justify-center cursor-pointer transition duration-150 ease-in-out
+  p-0 shadow-none border-accent-3 border box-border select-none;
+  margin-right: calc(0.75rem - 1px);
+  overflow: hidden;
+  width: 48px;
+  height: 48px;
+}
+
+.swatch::before,
+.swatch::after {
+  box-sizing: border-box;
+}
+
+.swatch:hover {
+  @apply transform scale-110 bg-hover;
+}
+
+.swatch > span {
+  @apply absolute;
+}
+
+.color {
+  @apply text-black transition duration-150 ease-in-out;
+}
+
+.color :hover {
+  @apply text-black;
+}
+
+.color.dark,
+.color.dark:hover {
+  color: white !important;
+}
+
+.active {
+  @apply border-accent-9 border-2;
+  padding-right: 1px;
+  padding-left: 1px;
+}
+
+.textLabel {
+  @apply w-auto px-4;
+  min-width: 3rem;
+}
+
+.active.textLabel {
+  @apply border-accent-9 border-2;
+  padding-right: calc(1rem - 1px);
+  padding-left: calc(1rem - 1px);
+}
--- a/site/components/product/Swatch/Swatch.tsx
+++ b/site/components/product/Swatch/Swatch.tsx
@@ -0,0 +1,62 @@
+import cn from 'classnames'
+import React from 'react'
+import s from './Swatch.module.css'
+import { Check } from '@components/icons'
+import Button, { ButtonProps } from '@components/ui/Button'
+import { isDark } from '@lib/colors'
+interface SwatchProps {
+  active?: boolean
+  children?: any
+  className?: string
+  variant?: 'size' | 'color' | string
+  color?: string
+  label?: string | null
+}
+
+const Swatch: React.FC<Omit<ButtonProps, 'variant'> & SwatchProps> = ({
+  active,
+  className,
+  color = '',
+  label = null,
+  variant = 'size',
+  ...props
+}) => {
+  variant = variant?.toLowerCase()
+
+  if (label) {
+    label = label?.toLowerCase()
+  }
+
+  const swatchClassName = cn(
+    s.swatch,
+    {
+      [s.color]: color,
+      [s.active]: active,
+      [s.size]: variant === 'size',
+      [s.dark]: color ? isDark(color) : false,
+      [s.textLabel]: !color && label && label.length > 3,
+    },
+    className
+  )
+
+  return (
+    <Button
+      role="option"
+      aria-selected={active}
+      aria-label={variant && label ? `${variant} ${label}` : 'Variant Swatch'}
+      className={swatchClassName}
+      {...(label && color && { title: label })}
+      style={color ? { backgroundColor: color } : {}}
+      {...props}
+    >
+      {color && active && (
+        <span>
+          <Check />
+        </span>
+      )}
+      {!color ? label : null}
+    </Button>
+  )
+}
+
+export default React.memo(Swatch)
--- a/site/components/product/Swatch/index.ts
+++ b/site/components/product/Swatch/index.ts
@@ -0,0 +1 @@
+export { default } from './Swatch'
--- a/site/components/product/helpers.ts
+++ b/site/components/product/helpers.ts
@@ -0,0 +1,32 @@
+import type { Product } from '@commerce/types/product'
+export type SelectedOptions = Record<string, string | null>
+import { Dispatch, SetStateAction } from 'react'
+
+export function getProductVariant(product: Product, opts: SelectedOptions) {
+  const variant = product.variants.find((variant) => {
+    return Object.entries(opts).every(([key, value]) =>
+      variant.options.find((option) => {
+        if (
+          option.__typename === 'MultipleChoiceOption' &&
+          option.displayName.toLowerCase() === key.toLowerCase()
+        ) {
+          return option.values.find((v) => v.label.toLowerCase() === value)
+        }
+      })
+    )
+  })
+  return variant
+}
+
+export function selectDefaultOptionFromProduct(
+  product: Product,
+  updater: Dispatch<SetStateAction<SelectedOptions>>
+) {
+  // Selects the default option
+  product.variants[0]?.options?.forEach((v) => {
+    updater((choices) => ({
+      ...choices,
+      [v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(),
+    }))
+  })
+}
--- a/site/components/product/index.ts
+++ b/site/components/product/index.ts
@@ -0,0 +1,5 @@
+export { default as Swatch } from './Swatch'
+export { default as ProductView } from './ProductView'
+export { default as ProductCard } from './ProductCard'
+export { default as ProductSlider } from './ProductSlider'
+export { default as ProductOptions } from './ProductOptions'
				`@@ -0,0 +1 @@`
				`export { default } from './ProductSliderControl'`