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/checkout/PaymentMethodView/PaymentMethodView.module.css

@@ -0,0 +1,17 @@
+.fieldset {
+  @apply flex flex-col my-3;
+}
+
+.fieldset .label {
+  @apply text-accent-7 uppercase text-xs font-medium mb-2;
+}
+
+.fieldset .input,
+.fieldset .select {
+  @apply p-2 border border-accent-2 w-full text-sm font-normal;
+}
+
+.fieldset .input:focus,
+.fieldset .select:focus {
+  @apply outline-none shadow-outline-normal;
+}

site/components/checkout/PaymentMethodView/PaymentMethodView.tsx

@@ -0,0 +1,130 @@
+import { FC } from 'react'
+import cn from 'classnames'
+
+import useAddCard from '@framework/customer/card/use-add-item'
+import { Button, Text } from '@components/ui'
+import { useUI } from '@components/ui/context'
+import SidebarLayout from '@components/common/SidebarLayout'
+
+import s from './PaymentMethodView.module.css'
+
+interface Form extends HTMLFormElement {
+  cardHolder: HTMLInputElement
+  cardNumber: HTMLInputElement
+  cardExpireDate: HTMLInputElement
+  cardCvc: HTMLInputElement
+  firstName: HTMLInputElement
+  lastName: HTMLInputElement
+  company: HTMLInputElement
+  streetNumber: HTMLInputElement
+  zipCode: HTMLInputElement
+  city: HTMLInputElement
+  country: HTMLSelectElement
+}
+
+const PaymentMethodView: FC = () => {
+  const { setSidebarView } = useUI()
+  const addCard = useAddCard()
+
+  async function handleSubmit(event: React.ChangeEvent<Form>) {
+    event.preventDefault()
+
+    await addCard({
+      cardHolder: event.target.cardHolder.value,
+      cardNumber: event.target.cardNumber.value,
+      cardExpireDate: event.target.cardExpireDate.value,
+      cardCvc: event.target.cardCvc.value,
+      firstName: event.target.firstName.value,
+      lastName: event.target.lastName.value,
+      company: event.target.company.value,
+      streetNumber: event.target.streetNumber.value,
+      zipCode: event.target.zipCode.value,
+      city: event.target.city.value,
+      country: event.target.country.value,
+    })
+
+    setSidebarView('CHECKOUT_VIEW')
+  }
+
+  return (
+    <form className="h-full" onSubmit={handleSubmit}>
+      <SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
+        <div className="px-4 sm:px-6 flex-1">
+          <Text variant="sectionHeading"> Payment Method</Text>
+          <div>
+            <div className={s.fieldset}>
+              <label className={s.label}>Cardholder Name</label>
+              <input name="cardHolder" className={s.input} />
+            </div>
+            <div className="grid gap-3 grid-flow-row grid-cols-12">
+              <div className={cn(s.fieldset, 'col-span-7')}>
+                <label className={s.label}>Card Number</label>
+                <input name="cardNumber" className={s.input} />
+              </div>
+              <div className={cn(s.fieldset, 'col-span-3')}>
+                <label className={s.label}>Expires</label>
+                <input
+                  name="cardExpireDate"
+                  className={s.input}
+                  placeholder="MM/YY"
+                />
+              </div>
+              <div className={cn(s.fieldset, 'col-span-2')}>
+                <label className={s.label}>CVC</label>
+                <input name="cardCvc" className={s.input} />
+              </div>
+            </div>
+            <hr className="border-accent-2 my-6" />
+            <div className="grid gap-3 grid-flow-row grid-cols-12">
+              <div className={cn(s.fieldset, 'col-span-6')}>
+                <label className={s.label}>First Name</label>
+                <input name="firstName" className={s.input} />
+              </div>
+              <div className={cn(s.fieldset, 'col-span-6')}>
+                <label className={s.label}>Last Name</label>
+                <input name="lastName" className={s.input} />
+              </div>
+            </div>
+            <div className={s.fieldset}>
+              <label className={s.label}>Company (Optional)</label>
+              <input name="company" className={s.input} />
+            </div>
+            <div className={s.fieldset}>
+              <label className={s.label}>Street and House Number</label>
+              <input name="streetNumber" className={s.input} />
+            </div>
+            <div className={s.fieldset}>
+              <label className={s.label}>
+                Apartment, Suite, Etc. (Optional)
+              </label>
+              <input className={s.input} name="apartment" />
+            </div>
+            <div className="grid gap-3 grid-flow-row grid-cols-12">
+              <div className={cn(s.fieldset, 'col-span-6')}>
+                <label className={s.label}>Postal Code</label>
+                <input name="zipCode" className={s.input} />
+              </div>
+              <div className={cn(s.fieldset, 'col-span-6')}>
+                <label className={s.label}>City</label>
+                <input name="city" className={s.input} />
+              </div>
+            </div>
+            <div className={s.fieldset}>
+              <label className={s.label}>Country/Region</label>
+              <select name="country" className={s.select}>
+                <option>Hong Kong</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
+          <Button type="submit" width="100%" variant="ghost">
+            Continue
+          </Button>
+        </div>
+      </SidebarLayout>
+    </form>
+  )
+}
+
+export default PaymentMethodView

site/components/checkout/PaymentMethodView/index.ts

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