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>

site/components/wishlist/WishlistButton/WishlistButton.module.css

@@ -0,0 +1,33 @@
+.root {
+  transition-duration: 0.2s;
+  transition-timing-function: ease;
+  transition-property: color, background-color, opacity;
+  @apply p-3 text-accent-9 flex items-center
+  justify-center font-semibold cursor-pointer
+  bg-accent-0 text-sm;
+}
+
+.root:focus {
+  @apply outline-none;
+}
+
+.icon {
+  transition-duration: 0.2s;
+  transition-timing-function: ease;
+  transition-property: transform, fill;
+  color: currentColor;
+}
+
+.icon.loading {
+  fill: var(--pink-light);
+}
+
+.icon.inWishlist {
+  fill: var(--pink);
+}
+
+@screen lg {
+  .root {
+    @apply p-4;
+  }
+}

site/components/wishlist/WishlistButton/WishlistButton.tsx

@@ -0,0 +1,84 @@
+import React, { FC, useState } from 'react'
+import cn from 'classnames'
+import { useUI } from '@components/ui'
+import { Heart } from '@components/icons'
+import useAddItem from '@framework/wishlist/use-add-item'
+import useCustomer from '@framework/customer/use-customer'
+import useWishlist from '@framework/wishlist/use-wishlist'
+import useRemoveItem from '@framework/wishlist/use-remove-item'
+import s from './WishlistButton.module.css'
+import type { Product, ProductVariant } from '@commerce/types/product'
+
+type Props = {
+  productId: Product['id']
+  variant: ProductVariant
+} & React.ButtonHTMLAttributes<HTMLButtonElement>
+
+const WishlistButton: FC<Props> = ({
+  productId,
+  variant,
+  className,
+  ...props
+}) => {
+  const { data } = useWishlist()
+  const addItem = useAddItem()
+  const removeItem = useRemoveItem()
+  const { data: customer } = useCustomer()
+  const { openModal, setModalView } = useUI()
+  const [loading, setLoading] = useState(false)
+
+  // @ts-ignore Wishlist is not always enabled
+  const itemInWishlist = data?.items?.find(
+    // @ts-ignore Wishlist is not always enabled
+    (item) =>
+      item.product_id === productId &&
+      item.variant_id === variant.id
+  )
+
+  const handleWishlistChange = async (e: any) => {
+    e.preventDefault()
+
+    if (loading) return
+
+    // A login is required before adding an item to the wishlist
+    if (!customer) {
+      setModalView('LOGIN_VIEW')
+      return openModal()
+    }
+
+    setLoading(true)
+
+    try {
+      if (itemInWishlist) {
+        await removeItem({ id: itemInWishlist.id! })
+      } else {
+        await addItem({
+          productId,
+          variantId: variant?.id!,
+        })
+      }
+
+      setLoading(false)
+    } catch (err) {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <button
+      aria-label="Add to wishlist"
+      className={cn(s.root, className)}
+      onClick={handleWishlistChange}
+      {...props}
+    >
+      <Heart
+        className={cn(s.icon, {
+          [s.loading]: loading,
+          [s.inWishlist]: itemInWishlist,
+        })}
+      />
+    </button>
+  )
+}
+
+export default WishlistButton

site/components/wishlist/WishlistButton/index.ts

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

site/components/wishlist/WishlistCard/WishlistCard.module.css

@@ -0,0 +1,21 @@
+.root {
+  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accent-2 transition duration-100 ease-in-out;
+
+  &:nth-child(3n + 1) {
+    & .productBg {
+      @apply bg-violet;
+    }
+  }
+
+  &:nth-child(3n + 2) {
+    & .productBg {
+      @apply bg-pink;
+    }
+  }
+
+  &:nth-child(3n + 3) {
+    & .productBg {
+      @apply bg-blue;
+    }
+  }
+}

site/components/wishlist/WishlistCard/WishlistCard.tsx

@@ -0,0 +1,110 @@
+import { FC, useState } from 'react'
+import cn from 'classnames'
+import Link from 'next/link'
+import Image from 'next/image'
+import s from './WishlistCard.module.css'
+import { Trash } from '@components/icons'
+import { Button, Text } from '@components/ui'
+
+import { useUI } from '@components/ui/context'
+import type { Product } from '@commerce/types/product'
+import usePrice from '@framework/product/use-price'
+import useAddItem from '@framework/cart/use-add-item'
+import useRemoveItem from '@framework/wishlist/use-remove-item'
+import type { Wishlist } from '@commerce/types/wishlist'
+
+interface Props {
+  item: Wishlist
+}
+
+const placeholderImg = '/product-img-placeholder.svg'
+
+const WishlistCard: FC<Props> = ({ item }) => {
+  const product: Product = item.product
+  const { price } = usePrice({
+    amount: product.price?.value,
+    baseAmount: product.price?.retailPrice,
+    currencyCode: product.price?.currencyCode!,
+  })
+  // @ts-ignore Wishlist is not always enabled
+  const removeItem = useRemoveItem({ wishlist: { includeProducts: true } })
+  const [loading, setLoading] = useState(false)
+  const [removing, setRemoving] = useState(false)
+
+  // TODO: fix this missing argument issue
+  /* @ts-ignore */
+  const addItem = useAddItem()
+  const { openSidebar } = useUI()
+
+  const handleRemove = async () => {
+    setRemoving(true)
+
+    try {
+      // If this action succeeds then there's no need to do `setRemoving(true)`
+      // because the component will be removed from the view
+      await removeItem({ id: item.id! })
+    } catch (error) {
+      setRemoving(false)
+    }
+  }
+  const addToCart = async () => {
+    setLoading(true)
+    try {
+      await addItem({
+        productId: String(product.id),
+        variantId: String(product.variants[0].id),
+      })
+      openSidebar()
+      setLoading(false)
+    } catch (err) {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className={cn(s.root, { 'opacity-75 pointer-events-none': removing })}>
+      <div className={`col-span-3 ${s.productBg}`}>
+        <div>
+          <Image
+            src={product.images[0]?.url || placeholderImg}
+            width={400}
+            height={400}
+            alt={product.images[0]?.alt || 'Product Image'}
+          />
+        </div>
+      </div>
+
+      <div className="col-span-7">
+        <h3 className="text-2xl mb-2">
+          <Link href={`/product${product.path}`}>
+            <a>{product.name}</a>
+          </Link>
+        </h3>
+        <div className="mb-4">
+          <Text html={product.description} />
+        </div>
+        <Button
+          aria-label="Add to Cart"
+          type="button"
+          className={
+            'py-1 px-3 border border-secondary rounded-md shadow-sm hover:bg-primary-hover'
+          }
+          onClick={addToCart}
+          loading={loading}
+        >
+          Add to Cart
+        </Button>
+      </div>
+      <div className="col-span-2 flex flex-col justify-between">
+        <div className="flex justify-end font-bold">{price}</div>
+        <div className="flex justify-end">
+          <button onClick={handleRemove}>
+            <Trash />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WishlistCard

site/components/wishlist/WishlistCard/index.ts

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

site/components/wishlist/index.ts

@@ -0,0 +1,2 @@
+export { default as WishlistCard } from './WishlistCard'
+export { default as WishlistButton } from './WishlistButton'