From 0ef6449aff38e1c2545ffe497fe9e0a95557d221 Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Thu, 1 Oct 2020 20:40:40 -0500 Subject: [PATCH] Apply prettier over all files --- .prettierignore | 3 +- README.md | 2 +- assets/font.css | 252 +++++++++--------- assets/global.css | 8 +- .../cart/CartSidebarView/CartSidebarView.tsx | 18 +- components/cart/CartSidebarView/index.ts | 2 +- components/cart/index.ts | 2 +- components/core/Avatar/Avatar.tsx | 18 +- components/core/Avatar/index.ts | 2 +- .../core/Featurebar/Featurebar.module.css | 2 +- components/core/Featurebar/Featurebar.tsx | 20 +- components/core/Featurebar/index.ts | 2 +- components/core/Footer/Footer.tsx | 20 +- components/core/Footer/index.ts | 2 +- components/core/Layout/Layout.tsx | 28 +- components/core/Layout/index.ts | 2 +- components/core/Navbar/Navbar.tsx | 22 +- components/core/Navbar/index.ts | 2 +- components/core/Searchbar/Searchbar.tsx | 18 +- components/core/Searchbar/index.ts | 2 +- components/core/UserNav/UserNav.tsx | 24 +- components/core/UserNav/index.ts | 2 +- components/core/index.ts | 14 +- components/icon/Bag.tsx | 8 +- components/icon/Cross.tsx | 8 +- components/icon/Heart.tsx | 8 +- components/icon/Trash.tsx | 8 +- components/icon/index.ts | 8 +- .../product/ProductCard/ProductCard.tsx | 20 +- components/product/ProductCard/index.ts | 2 +- .../product/ProductGrid/ProductGrid.tsx | 22 +- components/product/ProductGrid/index.ts | 2 +- .../product/ProductView/ProductView.tsx | 26 +- components/product/ProductView/index.ts | 2 +- components/product/Swatch/Swatch.tsx | 34 +-- components/product/Swatch/index.ts | 2 +- components/product/index.ts | 8 +- components/product/types.ts | 4 +- components/ui/Button/Button.tsx | 28 +- components/ui/Button/index.ts | 2 +- components/ui/ClickOutside/ClickOutside.tsx | 34 +-- components/ui/ClickOutside/index.ts | 2 +- components/ui/Container/Container.tsx | 24 +- components/ui/Container/index.ts | 2 +- components/ui/Logo/Logo.tsx | 4 +- components/ui/Logo/index.ts | 2 +- components/ui/Sidebar/Sidebar.tsx | 18 +- components/ui/Sidebar/index.ts | 2 +- components/ui/_BLANK/Featurebar.tsx | 18 +- components/ui/_BLANK/index.ts | 2 +- components/ui/context.tsx | 42 +-- components/ui/index.ts | 8 +- components/ui/types.ts | 2 +- lib/bigcommerce/api/fragments/product.ts | 4 +- lib/bigcommerce/api/index.ts | 50 ++-- .../api/operations/get-all-product-paths.ts | 34 +-- .../api/operations/get-all-products.ts | 51 ++-- lib/bigcommerce/api/operations/get-product.ts | 48 ++-- lib/bigcommerce/api/utils/fetch-api.ts | 16 +- lib/bigcommerce/api/utils/types.ts | 8 +- lib/bigcommerce/cart.tsx | 8 +- lib/bigcommerce/index.tsx | 24 +- lib/cart.js | 84 +++--- lib/commerce/api/index.ts | 10 +- lib/commerce/cart.tsx | 30 +-- lib/commerce/index.tsx | 24 +- pages/_app.tsx | 8 +- pages/_document.tsx | 4 +- pages/index.tsx | 16 +- pages/product/[slug].tsx | 28 +- postcss.config.js | 12 +- tailwind.config.js | 22 +- 72 files changed, 648 insertions(+), 652 deletions(-) diff --git a/.prettierignore b/.prettierignore index 1380c2e74..105738ca9 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,3 @@ node_modules -.next \ No newline at end of file +.next +public \ No newline at end of file diff --git a/README.md b/README.md index e942c01d6..f6863fdbe 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# e-comm-example \ No newline at end of file +# e-comm-example diff --git a/assets/font.css b/assets/font.css index b9e1847f7..c4b605c34 100644 --- a/assets/font.css +++ b/assets/font.css @@ -1,99 +1,99 @@ /* latin */ @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; @@ -104,525 +104,525 @@ in most cases, they are not downloaded at all */ /* latin-ext */ @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-latin-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* cyrillic */ @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-cyrillic.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* cyrillic-ext */ @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: swap; font-weight: 100; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: swap; font-weight: 200; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: swap; font-weight: 300; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: swap; font-weight: 400; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: swap; font-weight: 500; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: swap; font-weight: 600; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: swap; font-weight: 700; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: swap; font-weight: 800; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: swap; font-weight: 900; font-display: block; src: url(https://assets.vercel.com/raw/upload/v1587418127/fonts/2/inter-var-cyrillic-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* greek */ @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0370-03FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0370-03FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0370-03FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0370-03FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0370-03FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0370-03FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0370-03FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0370-03FF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418276/fonts/2/inter-var-greek.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0370-03FF; } /* greek-ext */ @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+1F00-1FFF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+1F00-1FFF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+1F00-1FFF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+1F00-1FFF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+1F00-1FFF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+1F00-1FFF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+1F00-1FFF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+1F00-1FFF; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-greek-ext.woff2) - format("woff2"); + format('woff2'); unicode-range: U+1F00-1FFF; } /* vietnamese */ @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } @font-face { - font-family: "Inter"; + font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://assets.vercel.com/raw/upload/v1587418275/fonts/2/inter-var-vietnamese.woff2) - format("woff2"); + format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } diff --git a/assets/global.css b/assets/global.css index 9d50fcd5e..f3579ae09 100644 --- a/assets/global.css +++ b/assets/global.css @@ -1,4 +1,4 @@ -@import "./font.css"; +@import './font.css'; @tailwind base; @tailwind components; @@ -61,8 +61,8 @@ --geist-marketing-radius: 8px; /* Fonts */ - --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", - "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', + 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; --font-mono: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; @@ -164,7 +164,7 @@ html { height: 100%; box-sizing: border-box; touch-action: manipulation; - font-feature-settings: "case" 1, "rlig" 1, "calt" 0; + font-feature-settings: 'case' 1, 'rlig' 1, 'calt' 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index 6de81cf61..53969dfc6 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -1,11 +1,11 @@ -import React, { FunctionComponent } from "react"; -import { UserNav } from "@components/core"; -import { Button } from "@components/ui"; -import { Trash, Cross } from "@components/icon"; -import { useUI } from "@components/ui/context"; +import React, { FunctionComponent } from 'react' +import { UserNav } from '@components/core' +import { Button } from '@components/ui' +import { Trash, Cross } from '@components/icon' +import { useUI } from '@components/ui/context' const CartSidebarView: FunctionComponent = () => { - const { closeSidebar } = useUI(); + const { closeSidebar } = useUI() return ( <>
@@ -57,7 +57,7 @@ const CartSidebarView: FunctionComponent = () => { - ); -}; + ) +} -export default CartSidebarView; +export default CartSidebarView diff --git a/components/cart/CartSidebarView/index.ts b/components/cart/CartSidebarView/index.ts index 5978c0194..0262e448e 100644 --- a/components/cart/CartSidebarView/index.ts +++ b/components/cart/CartSidebarView/index.ts @@ -1 +1 @@ -export { default } from "./CartSidebarView"; +export { default } from './CartSidebarView' diff --git a/components/cart/index.ts b/components/cart/index.ts index bc42bb259..0aff7cdfb 100644 --- a/components/cart/index.ts +++ b/components/cart/index.ts @@ -1 +1 @@ -export { default as CartSidebarView } from "./CartSidebarView"; +export { default as CartSidebarView } from './CartSidebarView' diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx index 8e7e57c5d..c9cd9a029 100644 --- a/components/core/Avatar/Avatar.tsx +++ b/components/core/Avatar/Avatar.tsx @@ -1,14 +1,14 @@ -import cn from "classnames"; -import React, { FunctionComponent } from "react"; -import s from "./Avatar.module.css"; +import cn from 'classnames' +import React, { FunctionComponent } from 'react' +import s from './Avatar.module.css' interface Props { - className?: string; - children?: any; + className?: string + children?: any } const Avatar: FunctionComponent = ({ className }) => { - const rootClassName = cn(s.root, className); + const rootClassName = cn(s.root, className) return (
= ({ className }) => { alt="" >
- ); -}; + ) +} -export default Avatar; +export default Avatar diff --git a/components/core/Avatar/index.ts b/components/core/Avatar/index.ts index 279f4682f..a4600ec77 100644 --- a/components/core/Avatar/index.ts +++ b/components/core/Avatar/index.ts @@ -1 +1 @@ -export { default } from "./Avatar"; +export { default } from './Avatar' diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css index 806d4a40c..54d8108bf 100644 --- a/components/core/Featurebar/Featurebar.module.css +++ b/components/core/Featurebar/Featurebar.module.css @@ -13,7 +13,7 @@ } .separator:before { - content: ""; + content: ''; } .description { diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx index 56e3d9e22..714a9fceb 100644 --- a/components/core/Featurebar/Featurebar.tsx +++ b/components/core/Featurebar/Featurebar.tsx @@ -1,11 +1,11 @@ -import cn from "classnames"; -import { FunctionComponent } from "react"; -import s from "./Featurebar.module.css"; +import cn from 'classnames' +import { FunctionComponent } from 'react' +import s from './Featurebar.module.css' interface Props { - className?: string; - title: string; - description: string; + className?: string + title: string + description: string } const Featurebar: FunctionComponent = ({ @@ -13,14 +13,14 @@ const Featurebar: FunctionComponent = ({ description, className, }) => { - const rootClassName = cn(s.root, className); + const rootClassName = cn(s.root, className) return (
{title} {description}
- ); -}; + ) +} -export default Featurebar; +export default Featurebar diff --git a/components/core/Featurebar/index.ts b/components/core/Featurebar/index.ts index 158415285..44f51698d 100644 --- a/components/core/Featurebar/index.ts +++ b/components/core/Featurebar/index.ts @@ -1 +1 @@ -export { default } from "./Featurebar"; +export { default } from './Featurebar' diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx index ef662e61b..977cbd787 100644 --- a/components/core/Footer/Footer.tsx +++ b/components/core/Footer/Footer.tsx @@ -1,20 +1,20 @@ -import cn from "classnames"; -import React, { FunctionComponent } from "react"; -import s from "./Footer.module.css"; -import { Container } from "@components/ui"; +import cn from 'classnames' +import React, { FunctionComponent } from 'react' +import s from './Footer.module.css' +import { Container } from '@components/ui' interface Props { - className?: string; - children?: any; + className?: string + children?: any } const Footer: FunctionComponent = ({ className }) => { - const rootClassName = cn(s.root, className); + const rootClassName = cn(s.root, className) return (
- ); -}; + ) +} -export default Footer; +export default Footer diff --git a/components/core/Footer/index.ts b/components/core/Footer/index.ts index 3738288b0..5d06e9b71 100644 --- a/components/core/Footer/index.ts +++ b/components/core/Footer/index.ts @@ -1 +1 @@ -export { default } from "./Footer"; +export { default } from './Footer' diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index fafc3b39a..f25244ec7 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -1,19 +1,19 @@ -import cn from "classnames"; -import React, { FunctionComponent } from "react"; -import s from "./Layout.module.css"; -import { Navbar, Featurebar } from "@components/core"; -import { Container, Sidebar } from "@components/ui"; -import { CartSidebarView } from "@components/cart"; -import { useUI } from "@components/ui/context"; +import cn from 'classnames' +import React, { FunctionComponent } from 'react' +import s from './Layout.module.css' +import { Navbar, Featurebar } from '@components/core' +import { Container, Sidebar } from '@components/ui' +import { CartSidebarView } from '@components/cart' +import { useUI } from '@components/ui/context' interface Props { - className?: string; - children?: any; + className?: string + children?: any } const Layout: FunctionComponent = ({ className, children }) => { - const rootClassName = cn(s.root, className); - const { displaySidebar } = useUI(); + const rootClassName = cn(s.root, className) + const { displaySidebar } = useUI() return (
= ({ className, children }) => { )}
- ); -}; + ) +} -export default Layout; +export default Layout diff --git a/components/core/Layout/index.ts b/components/core/Layout/index.ts index d4dca0dc6..0e2737eee 100644 --- a/components/core/Layout/index.ts +++ b/components/core/Layout/index.ts @@ -1 +1 @@ -export { default } from "./Layout"; +export { default } from './Layout' diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx index 4a8c2dd7b..4ef0f700b 100644 --- a/components/core/Navbar/Navbar.tsx +++ b/components/core/Navbar/Navbar.tsx @@ -1,15 +1,15 @@ -import cn from "classnames"; -import React, { FunctionComponent } from "react"; -import s from "./Navbar.module.css"; -import { Logo, Container } from "@components/ui"; -import { Searchbar } from "@components/core"; -import { UserNav } from "@components/core"; +import cn from 'classnames' +import React, { FunctionComponent } from 'react' +import s from './Navbar.module.css' +import { Logo, Container } from '@components/ui' +import { Searchbar } from '@components/core' +import { UserNav } from '@components/core' interface Props { - className?: string; + className?: string } const Navbar: FunctionComponent = ({ className }) => { - const rootClassName = cn(s.root, className); + const rootClassName = cn(s.root, className) return ( @@ -23,7 +23,7 @@ const Navbar: FunctionComponent = ({ className }) => { - ); -}; + ) +} -export default Navbar; +export default Navbar diff --git a/components/core/Navbar/index.ts b/components/core/Navbar/index.ts index 8d95d6656..e6400ae40 100644 --- a/components/core/Navbar/index.ts +++ b/components/core/Navbar/index.ts @@ -1 +1 @@ -export { default } from "./Navbar"; +export { default } from './Navbar' diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx index 5b43ef09a..06068c905 100644 --- a/components/core/Searchbar/Searchbar.tsx +++ b/components/core/Searchbar/Searchbar.tsx @@ -1,14 +1,14 @@ -import cn from "classnames"; -import React, { FunctionComponent } from "react"; -import s from "./Searchbar.module.css"; +import cn from 'classnames' +import React, { FunctionComponent } from 'react' +import s from './Searchbar.module.css' interface Props { - className?: string; - children?: any; + className?: string + children?: any } const Searchbar: FunctionComponent = ({ className }) => { - const rootClassName = cn(s.root, className); + const rootClassName = cn(s.root, className) return (
@@ -26,7 +26,7 @@ const Searchbar: FunctionComponent = ({ className }) => {
- ); -}; + ) +} -export default Searchbar; +export default Searchbar diff --git a/components/core/Searchbar/index.ts b/components/core/Searchbar/index.ts index 94891f2fa..e6c0e36c8 100644 --- a/components/core/Searchbar/index.ts +++ b/components/core/Searchbar/index.ts @@ -1 +1 @@ -export { default } from "./Searchbar"; +export { default } from './Searchbar' diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx index 71ba1cc9e..60ce8544a 100644 --- a/components/core/UserNav/UserNav.tsx +++ b/components/core/UserNav/UserNav.tsx @@ -1,17 +1,17 @@ -import cn from "classnames"; -import React, { FunctionComponent } from "react"; -import s from "./UserNav.module.css"; -import { Avatar } from "@components/core"; -import { Heart, Bag } from "@components/icon"; -import { useUI } from "@components/ui/context"; +import cn from 'classnames' +import React, { FunctionComponent } from 'react' +import s from './UserNav.module.css' +import { Avatar } from '@components/core' +import { Heart, Bag } from '@components/icon' +import { useUI } from '@components/ui/context' interface Props { - className?: string; + className?: string } const UserNav: FunctionComponent = ({ className }) => { - const rootClassName = cn(s.root, className); - const { openSidebar } = useUI(); + const rootClassName = cn(s.root, className) + const { openSidebar } = useUI() return ( - ); -}; + ) +} -export default UserNav; +export default UserNav diff --git a/components/core/UserNav/index.ts b/components/core/UserNav/index.ts index 68149bc0c..9e35ac018 100644 --- a/components/core/UserNav/index.ts +++ b/components/core/UserNav/index.ts @@ -1 +1 @@ -export { default } from "./UserNav"; +export { default } from './UserNav' diff --git a/components/core/index.ts b/components/core/index.ts index 57d076f79..e6672f4e5 100644 --- a/components/core/index.ts +++ b/components/core/index.ts @@ -1,7 +1,7 @@ -export { default as Avatar } from "./Avatar"; -export { default as Featurebar } from "./Featurebar"; -export { default as Footer } from "./Footer"; -export { default as Layout } from "./Layout"; -export { default as Navbar } from "./Navbar"; -export { default as Searchbar } from "./Searchbar"; -export { default as UserNav } from "./UserNav"; +export { default as Avatar } from './Avatar' +export { default as Featurebar } from './Featurebar' +export { default as Footer } from './Footer' +export { default as Layout } from './Layout' +export { default as Navbar } from './Navbar' +export { default as Searchbar } from './Searchbar' +export { default as UserNav } from './UserNav' diff --git a/components/icon/Bag.tsx b/components/icon/Bag.tsx index 6893fbac8..da8a9fe0e 100644 --- a/components/icon/Bag.tsx +++ b/components/icon/Bag.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react' const Bag = ({ ...props }) => { return ( @@ -32,7 +32,7 @@ const Bag = ({ ...props }) => { strokeLinejoin="round" /> - ); -}; + ) +} -export default Bag; +export default Bag diff --git a/components/icon/Cross.tsx b/components/icon/Cross.tsx index f47f3db16..4536dc2a1 100644 --- a/components/icon/Cross.tsx +++ b/components/icon/Cross.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react' const Cross = ({ ...props }) => { return ( @@ -10,7 +10,7 @@ const Cross = ({ ...props }) => { d="M6 18L18 6M6 6l12 12" /> - ); -}; + ) +} -export default Cross; +export default Cross diff --git a/components/icon/Heart.tsx b/components/icon/Heart.tsx index 051f57b01..3f2ff1302 100644 --- a/components/icon/Heart.tsx +++ b/components/icon/Heart.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react' const Heart = ({ ...props }) => { return ( @@ -18,7 +18,7 @@ const Heart = ({ ...props }) => { strokeLinejoin="round" /> - ); -}; + ) +} -export default Heart; +export default Heart diff --git a/components/icon/Trash.tsx b/components/icon/Trash.tsx index e1b6c8ce7..d843749ae 100644 --- a/components/icon/Trash.tsx +++ b/components/icon/Trash.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react' const Trash = ({ ...props }) => { return ( @@ -39,7 +39,7 @@ const Trash = ({ ...props }) => { strokeLinejoin="round" /> - ); -}; + ) +} -export default Trash; +export default Trash diff --git a/components/icon/index.ts b/components/icon/index.ts index 2dc7ced7c..2afd43898 100644 --- a/components/icon/index.ts +++ b/components/icon/index.ts @@ -1,4 +1,4 @@ -export { default as Bag } from "./Bag"; -export { default as Heart } from "./Heart"; -export { default as Trash } from "./Trash"; -export { default as Cross } from "./Cross"; +export { default as Bag } from './Bag' +export { default as Heart } from './Heart' +export { default as Trash } from './Trash' +export { default as Cross } from './Cross' diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index ae31d90cc..0bc361ed2 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -1,14 +1,14 @@ -import cn from "classnames"; -import s from "./ProductCard.module.css"; -import React, { FunctionComponent } from "react"; -import { Heart } from "@components/icon"; +import cn from 'classnames' +import s from './ProductCard.module.css' +import React, { FunctionComponent } from 'react' +import { Heart } from '@components/icon' interface Props { - className?: string; - children?: any; + className?: string + children?: any } const ProductCard: FunctionComponent = ({ className }) => { - const rootClassName = cn(s.root, className); + const rootClassName = cn(s.root, className) return (
@@ -26,7 +26,7 @@ const ProductCard: FunctionComponent = ({ className }) => {
- ); -}; + ) +} -export default ProductCard; +export default ProductCard diff --git a/components/product/ProductCard/index.ts b/components/product/ProductCard/index.ts index a8adb3f08..4559faa14 100644 --- a/components/product/ProductCard/index.ts +++ b/components/product/ProductCard/index.ts @@ -1 +1 @@ -export { default } from "./ProductCard"; +export { default } from './ProductCard' diff --git a/components/product/ProductGrid/ProductGrid.tsx b/components/product/ProductGrid/ProductGrid.tsx index f185022e8..af3d6748c 100644 --- a/components/product/ProductGrid/ProductGrid.tsx +++ b/components/product/ProductGrid/ProductGrid.tsx @@ -1,15 +1,15 @@ -import cn from "classnames"; -import React, { FunctionComponent } from "react"; -import s from "./ProductGrid.module.css"; -import ProductCard from "@components/ProductCard"; +import cn from 'classnames' +import React, { FunctionComponent } from 'react' +import s from './ProductGrid.module.css' +import ProductCard from '@components/ProductCard' interface Props { - className?: string; - children?: any; - products: [any]; + className?: string + children?: any + products: [any] } const ProductView: FunctionComponent = ({ products, className }) => { - const rootClassName = cn(s.root, className); + const rootClassName = cn(s.root, className) return (
@@ -19,7 +19,7 @@ const ProductView: FunctionComponent = ({ products, className }) => {
- ); -}; + ) +} -export default ProductView; +export default ProductView diff --git a/components/product/ProductGrid/index.ts b/components/product/ProductGrid/index.ts index aa0f8fa43..eab5466a8 100644 --- a/components/product/ProductGrid/index.ts +++ b/components/product/ProductGrid/index.ts @@ -1 +1 @@ -export { default } from "./ProductGrid"; +export { default } from './ProductGrid' diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index 64db792ca..f012b705b 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -1,18 +1,18 @@ -import cn from "classnames"; -import React, { FunctionComponent } from "react"; -import s from "./ProductView.module.css"; -import { Button } from "@components/ui"; -import { Swatch } from "@components/product"; +import cn from 'classnames' +import React, { FunctionComponent } from 'react' +import s from './ProductView.module.css' +import { Button } from '@components/ui' +import { Swatch } from '@components/product' interface Props { - className?: string; - children?: any; - productData: ProductData; + className?: string + children?: any + productData: ProductData } const ProductView: FunctionComponent = ({ productData, className }) => { - const rootClassName = cn(s.root, className); - console.log(productData); + const rootClassName = cn(s.root, className) + console.log(productData) return (
@@ -53,7 +53,7 @@ const ProductView: FunctionComponent = ({ productData, className }) => {
- ); -}; + ) +} -export default ProductView; +export default ProductView diff --git a/components/product/ProductView/index.ts b/components/product/ProductView/index.ts index 0885bc92e..9ac144801 100644 --- a/components/product/ProductView/index.ts +++ b/components/product/ProductView/index.ts @@ -1 +1 @@ -export { default } from "./ProductView"; +export { default } from './ProductView' diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx index 654c68dd4..02f9a2ef2 100644 --- a/components/product/Swatch/Swatch.tsx +++ b/components/product/Swatch/Swatch.tsx @@ -1,14 +1,14 @@ -import cn from "classnames"; -import React, { FunctionComponent } from "react"; -import s from "./Swatch.module.css"; -import { Colors } from "@components/ui/types"; +import cn from 'classnames' +import React, { FunctionComponent } from 'react' +import s from './Swatch.module.css' +import { Colors } from '@components/ui/types' interface Props { - className?: string; - children?: any; - active?: boolean; - color?: Colors; - size?: string; + className?: string + children?: any + active?: boolean + color?: Colors + size?: string } const Swatch: FunctionComponent = ({ @@ -22,14 +22,14 @@ const Swatch: FunctionComponent = ({ { [s.active]: active, [s.size]: size, - [s.colorPink]: color === "pink", - [s.colorWhite]: color === "white", - [s.colorBlack]: color === "black", - [s.colorViolet]: color === "violet", + [s.colorPink]: color === 'pink', + [s.colorWhite]: color === 'white', + [s.colorBlack]: color === 'black', + [s.colorViolet]: color === 'violet', }, className - ); - return {size ? size : null}; -}; + ) + return {size ? size : null} +} -export default Swatch; +export default Swatch diff --git a/components/product/Swatch/index.ts b/components/product/Swatch/index.ts index b79dc0ff5..c8a795498 100644 --- a/components/product/Swatch/index.ts +++ b/components/product/Swatch/index.ts @@ -1 +1 @@ -export { default } from "./Swatch"; +export { default } from './Swatch' diff --git a/components/product/index.ts b/components/product/index.ts index ce920ba5d..1cef2a360 100644 --- a/components/product/index.ts +++ b/components/product/index.ts @@ -1,4 +1,4 @@ -export { default as Swatch } from "./Swatch"; -export { default as ProductView } from "./ProductView"; -export { default as ProductCard } from "./ProductCard"; -export { default as ProductGrid } from "./ProductGrid"; +export { default as Swatch } from './Swatch' +export { default as ProductView } from './ProductView' +export { default as ProductCard } from './ProductCard' +export { default as ProductGrid } from './ProductGrid' diff --git a/components/product/types.ts b/components/product/types.ts index 3a1477069..8ef292685 100644 --- a/components/product/types.ts +++ b/components/product/types.ts @@ -1,5 +1,5 @@ -import { Colors } from "@components/ui/types"; -export { Product } from "@lib/bigcommerce"; +import { Colors } from '@components/ui/types' +export { Product } from '@lib/bigcommerce' // export type ProductData = { // title: string; diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx index 20103eae7..362ade2ae 100644 --- a/components/ui/Button/Button.tsx +++ b/components/ui/Button/Button.tsx @@ -1,43 +1,43 @@ -import cn from "classnames"; -import React, { ButtonHTMLAttributes } from "react"; -import s from "./Button.module.css"; +import cn from 'classnames' +import React, { ButtonHTMLAttributes } from 'react' +import s from './Button.module.css' interface Props extends ButtonHTMLAttributes { - href?: string; - className?: string; - variant?: "filled" | "outlined" | "flat" | "none"; - active?: boolean; - type?: "submit" | "reset" | "button"; + href?: string + className?: string + variant?: 'filled' | 'outlined' | 'flat' | 'none' + active?: boolean + type?: 'submit' | 'reset' | 'button' } export default class Button extends React.Component { public render() { const { className, - variant = "filled", + variant = 'filled', children, disabled = false, href, active, ...rest - } = this.props; + } = this.props let Component: React.ComponentType< React.AnchorHTMLAttributes< HTMLAnchorElement | HTMLButtonElement | HTMLDivElement > & React.ClassAttributes - > = "a" as any; + > = 'a' as any // Catch for buttons / span / stc. const rootClassName = cn( s.root, { - [s.filled]: variant === "filled", + [s.filled]: variant === 'filled', }, className - ); + ) return ( { > {children} - ); + ) } } diff --git a/components/ui/Button/index.ts b/components/ui/Button/index.ts index c4719be7c..3389ecb83 100644 --- a/components/ui/Button/index.ts +++ b/components/ui/Button/index.ts @@ -1 +1 @@ -export { default } from "./Button"; +export { default } from './Button' diff --git a/components/ui/ClickOutside/ClickOutside.tsx b/components/ui/ClickOutside/ClickOutside.tsx index 632718831..6986150a6 100644 --- a/components/ui/ClickOutside/ClickOutside.tsx +++ b/components/ui/ClickOutside/ClickOutside.tsx @@ -3,47 +3,47 @@ import React, { MutableRefObject, useEffect, useRef, -} from "react"; +} from 'react' -import { Component } from "react"; -import PropTypes from "prop-types"; +import { Component } from 'react' +import PropTypes from 'prop-types' export interface ClickOutsideProps { - onClickOutside: (e?: MouseEvent) => void; - children: React.ReactNode | any; - render: () => void; + onClickOutside: (e?: MouseEvent) => void + children: React.ReactNode | any + render: () => void } export default class ClickOutside extends Component { - public domNode: Element | null = null; + public domNode: Element | null = null handleRef = (element) => { - this.domNode = element; - }; + this.domNode = element + } public componentDidMount() { - document.addEventListener("click", this.handleClick, true); + document.addEventListener('click', this.handleClick, true) } public componentWillUnmount() { - document.removeEventListener("mousedown", this.handleClick, true); - document.removeEventListener("touchstart", this.handleClick, true); + document.removeEventListener('mousedown', this.handleClick, true) + document.removeEventListener('touchstart', this.handleClick, true) } public handleClick = (event) => { function hasParent(element, root) { - return root && root.contains(element); + return root && root.contains(element) } if (!hasParent(event.target, this.domNode)) { - if (typeof this.props.onClickOutside === "function") { - this.props.onClickOutside(event); + if (typeof this.props.onClickOutside === 'function') { + this.props.onClickOutside(event) } } - }; + } render() { - return null; + return null // return this.props.render({ // innerRef: this.handleRef, // }); diff --git a/components/ui/ClickOutside/index.ts b/components/ui/ClickOutside/index.ts index c0ce145a8..cfdac4296 100644 --- a/components/ui/ClickOutside/index.ts +++ b/components/ui/ClickOutside/index.ts @@ -1 +1 @@ -export { default } from "./ClickOutside"; +export { default } from './ClickOutside' diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx index 9a8a05dd5..f1789ef20 100644 --- a/components/ui/Container/Container.tsx +++ b/components/ui/Container/Container.tsx @@ -1,25 +1,25 @@ -import cn from "classnames"; -import { FunctionComponent } from "react"; -import s from "./Container.module.css"; +import cn from 'classnames' +import { FunctionComponent } from 'react' +import s from './Container.module.css' interface Props { - className?: string; - children?: any; - el?: HTMLElement; + className?: string + children?: any + el?: HTMLElement } const Container: FunctionComponent = ({ children, className, - el = "div", + el = 'div', }) => { - const rootClassName = cn(s.root, className); + const rootClassName = cn(s.root, className) let Component: React.ComponentType> = el as any; + >> = el as any - return {children}; -}; + return {children} +} -export default Container; +export default Container diff --git a/components/ui/Container/index.ts b/components/ui/Container/index.ts index c81c92aeb..9dbd596a8 100644 --- a/components/ui/Container/index.ts +++ b/components/ui/Container/index.ts @@ -1 +1 @@ -export { default } from "./Container"; +export { default } from './Container' diff --git a/components/ui/Logo/Logo.tsx b/components/ui/Logo/Logo.tsx index 96880c05b..16c819a3d 100644 --- a/components/ui/Logo/Logo.tsx +++ b/components/ui/Logo/Logo.tsx @@ -35,6 +35,6 @@ const Logo = () => ( strokeWidth="0.30634" /> -); +) -export default Logo; +export default Logo diff --git a/components/ui/Logo/index.ts b/components/ui/Logo/index.ts index f252704a4..93dce23b4 100644 --- a/components/ui/Logo/index.ts +++ b/components/ui/Logo/index.ts @@ -1 +1 @@ -export { default } from "./Logo"; +export { default } from './Logo' diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx index 081198e3f..bf70e7fa5 100644 --- a/components/ui/Sidebar/Sidebar.tsx +++ b/components/ui/Sidebar/Sidebar.tsx @@ -1,14 +1,14 @@ -import cn from "classnames"; -import React, { FunctionComponent } from "react"; -import s from "./Sidebar.module.css"; +import cn from 'classnames' +import React, { FunctionComponent } from 'react' +import s from './Sidebar.module.css' interface Props { - className?: string; - children?: any; + className?: string + children?: any } const Sidebar: FunctionComponent = ({ className, children }) => { - const rootClassName = cn(s.root, className); + const rootClassName = cn(s.root, className) return (
@@ -23,7 +23,7 @@ const Sidebar: FunctionComponent = ({ className, children }) => {
- ); -}; + ) +} -export default Sidebar; +export default Sidebar diff --git a/components/ui/Sidebar/index.ts b/components/ui/Sidebar/index.ts index 123c2e4a1..877187ca3 100644 --- a/components/ui/Sidebar/index.ts +++ b/components/ui/Sidebar/index.ts @@ -1 +1 @@ -export { default } from "./Sidebar"; +export { default } from './Sidebar' diff --git a/components/ui/_BLANK/Featurebar.tsx b/components/ui/_BLANK/Featurebar.tsx index 3f1f9cd27..0195dd8f4 100644 --- a/components/ui/_BLANK/Featurebar.tsx +++ b/components/ui/_BLANK/Featurebar.tsx @@ -1,15 +1,15 @@ -import cn from "classnames"; -import { FunctionComponent } from "react"; -import s from "./Featurebar.module.css"; +import cn from 'classnames' +import { FunctionComponent } from 'react' +import s from './Featurebar.module.css' interface Props { - className?: string; - children?: any; + className?: string + children?: any } const Featurebar: FunctionComponent = ({ children, className }) => { - const rootClassName = cn(s.root, className); - return
{children}
; -}; + const rootClassName = cn(s.root, className) + return
{children}
+} -export default Featurebar; +export default Featurebar diff --git a/components/ui/_BLANK/index.ts b/components/ui/_BLANK/index.ts index 158415285..44f51698d 100644 --- a/components/ui/_BLANK/index.ts +++ b/components/ui/_BLANK/index.ts @@ -1 +1 @@ -export { default } from "./Featurebar"; +export { default } from './Featurebar' diff --git a/components/ui/context.tsx b/components/ui/context.tsx index 44dc1b587..0acf64ad7 100644 --- a/components/ui/context.tsx +++ b/components/ui/context.tsx @@ -1,56 +1,56 @@ -import React, { FunctionComponent } from "react"; +import React, { FunctionComponent } from 'react' export interface UIState { - displaySidebar: boolean; - openSidebar: () => {}; - closeSidebar: () => {}; + displaySidebar: boolean + openSidebar: () => {} + closeSidebar: () => {} } const initialState = { displaySidebar: false, openSidebar: null, closeSidebar: null, -}; +} -export const UIContext = React.createContext(initialState); -UIContext.displayName = "UIContext"; +export const UIContext = React.createContext(initialState) +UIContext.displayName = 'UIContext' export const UIProvider: FunctionComponent = (props) => { - const [state, dispatch] = React.useReducer(uiReducer, initialState); + const [state, dispatch] = React.useReducer(uiReducer, initialState) - const openSidebar = () => dispatch("OPEN_SIDEBAR"); - const closeSidebar = () => dispatch("CLOSE_SIDEBAR"); + const openSidebar = () => dispatch('OPEN_SIDEBAR') + const closeSidebar = () => dispatch('CLOSE_SIDEBAR') const value = { ...state, openSidebar, closeSidebar, - }; + } - return ; -}; + return +} export const useUI = () => { - const context = React.useContext(UIContext); + const context = React.useContext(UIContext) if (context === undefined) { - throw new Error(`useUI must be used within a UIProvider`); + throw new Error(`useUI must be used within a UIProvider`) } - return context; -}; + return context +} function uiReducer(state, action) { switch (action) { - case "OPEN_SIDEBAR": { + case 'OPEN_SIDEBAR': { return { ...state, displaySidebar: true, - }; + } } - case "CLOSE_SIDEBAR": { + case 'CLOSE_SIDEBAR': { return { ...state, displaySidebar: false, - }; + } } } } diff --git a/components/ui/index.ts b/components/ui/index.ts index 531a3bd28..6367c84a8 100644 --- a/components/ui/index.ts +++ b/components/ui/index.ts @@ -1,4 +1,4 @@ -export { default as Button } from "./Button"; -export { default as Container } from "./Container"; -export { default as Sidebar } from "./Sidebar"; -export { default as Logo } from "./Logo"; +export { default as Button } from './Button' +export { default as Container } from './Container' +export { default as Sidebar } from './Sidebar' +export { default as Logo } from './Logo' diff --git a/components/ui/types.ts b/components/ui/types.ts index 0ed566938..8b2c535b2 100644 --- a/components/ui/types.ts +++ b/components/ui/types.ts @@ -1 +1 @@ -export type Colors = "violet" | "black" | "pink" | "white"; +export type Colors = 'violet' | 'black' | 'pink' | 'white' diff --git a/lib/bigcommerce/api/fragments/product.ts b/lib/bigcommerce/api/fragments/product.ts index 48c0df36d..94753c948 100644 --- a/lib/bigcommerce/api/fragments/product.ts +++ b/lib/bigcommerce/api/fragments/product.ts @@ -5,7 +5,7 @@ export const responsiveImageFragment = /* GraphQL */ ` urlLarge: url(width: $imgLargeWidth, height: $imgLargeHeight) urlXL: url(width: $imgXLWidth, height: $imgXLHeight) } -`; +` export const productInfoFragment = /* GraphQL */ ` fragment productInfo on Product { @@ -63,4 +63,4 @@ export const productInfoFragment = /* GraphQL */ ` } ${responsiveImageFragment} -`; +` diff --git a/lib/bigcommerce/api/index.ts b/lib/bigcommerce/api/index.ts index 0cf0568c7..44d09d9a9 100644 --- a/lib/bigcommerce/api/index.ts +++ b/lib/bigcommerce/api/index.ts @@ -1,17 +1,17 @@ -import { CommerceAPIConfig } from 'lib/commerce/api'; -import { GetAllProductsQueryVariables } from '../schema'; -import fetchAPI from './utils/fetch-api'; +import { CommerceAPIConfig } from 'lib/commerce/api' +import { GetAllProductsQueryVariables } from '../schema' +import fetchAPI from './utils/fetch-api' export interface Images { - small?: ImageOptions; - medium?: ImageOptions; - large?: ImageOptions; - xl?: ImageOptions; + small?: ImageOptions + medium?: ImageOptions + large?: ImageOptions + xl?: ImageOptions } export interface ImageOptions { - width: number; - height?: number; + width: number + height?: number } export type ProductImageVariables = Pick< @@ -24,39 +24,39 @@ export type ProductImageVariables = Pick< | 'imgLargeHeight' | 'imgXLWidth' | 'imgXLHeight' ->; +> export interface BigcommerceConfigOptions extends CommerceAPIConfig { - images?: Images; + images?: Images } export interface BigcommerceConfig extends BigcommerceConfigOptions { - readonly imageVariables?: ProductImageVariables; + readonly imageVariables?: ProductImageVariables } -const API_URL = process.env.BIGCOMMERCE_STOREFRONT_API_URL; -const API_TOKEN = process.env.BIGCOMMERCE_STOREFRONT_API_TOKEN; +const API_URL = process.env.BIGCOMMERCE_STOREFRONT_API_URL +const API_TOKEN = process.env.BIGCOMMERCE_STOREFRONT_API_TOKEN if (!API_URL) { throw new Error( `The environment variable BIGCOMMERCE_STOREFRONT_API_URL is missing and it's required to access your store` - ); + ) } if (!API_TOKEN) { throw new Error( `The environment variable BIGCOMMERCE_STOREFRONT_API_TOKEN is missing and it's required to access your store` - ); + ) } export class Config { - private config: BigcommerceConfig; + private config: BigcommerceConfig constructor(config: BigcommerceConfigOptions) { this.config = { ...config, get imageVariables() { - const { images } = this; + const { images } = this return images ? { imgSmallWidth: images.small?.width, @@ -68,17 +68,17 @@ export class Config { imgXLWidth: images.xl?.height, imgXLHeight: images.xl?.height, } - : undefined; + : undefined }, - }; + } } getConfig() { - return this.config; + return this.config } setConfig(newConfig: Partial) { - Object.assign(this.config, newConfig); + Object.assign(this.config, newConfig) } } @@ -86,12 +86,12 @@ const config = new Config({ commerceUrl: API_URL, apiToken: API_TOKEN, fetch: fetchAPI, -}); +}) export function getConfig() { - return config.getConfig(); + return config.getConfig() } export function setConfig(newConfig: Partial) { - return config.setConfig(newConfig); + return config.setConfig(newConfig) } diff --git a/lib/bigcommerce/api/operations/get-all-product-paths.ts b/lib/bigcommerce/api/operations/get-all-product-paths.ts index 6fea2401b..ebb196eb2 100644 --- a/lib/bigcommerce/api/operations/get-all-product-paths.ts +++ b/lib/bigcommerce/api/operations/get-all-product-paths.ts @@ -1,6 +1,6 @@ -import type { GetAllProductPathsQuery } from 'lib/bigcommerce/schema'; -import type { RecursivePartial, RecursiveRequired } from '../utils/types'; -import { BigcommerceConfig, getConfig } from '..'; +import type { GetAllProductPathsQuery } from 'lib/bigcommerce/schema' +import type { RecursivePartial, RecursiveRequired } from '../utils/types' +import { BigcommerceConfig, getConfig } from '..' export const getAllProductPathsQuery = /* GraphQL */ ` query getAllProductPaths { @@ -14,41 +14,41 @@ export const getAllProductPathsQuery = /* GraphQL */ ` } } } -`; +` export interface GetAllProductPathsResult { products: T extends GetAllProductPathsQuery ? NonNullable - : unknown; + : unknown } async function getAllProductPaths(opts?: { - query?: string; - config?: BigcommerceConfig; -}): Promise>; + query?: string + config?: BigcommerceConfig +}): Promise> async function getAllProductPaths(opts: { - query: string; - config?: BigcommerceConfig; -}): Promise>; + query: string + config?: BigcommerceConfig +}): Promise> async function getAllProductPaths({ query = getAllProductPathsQuery, config = getConfig(), }: { - query?: string; - config?: BigcommerceConfig; + query?: string + config?: BigcommerceConfig } = {}): Promise> { // RecursivePartial forces the method to check for every prop in the data, which is // required in case there's a custom `query` const data = await config.fetch>( query - ); - const products = data.site?.products?.edges; + ) + const products = data.site?.products?.edges return { products: (products as RecursiveRequired) ?? [], - }; + } } -export default getAllProductPaths; +export default getAllProductPaths diff --git a/lib/bigcommerce/api/operations/get-all-products.ts b/lib/bigcommerce/api/operations/get-all-products.ts index cf761db87..a43a92747 100644 --- a/lib/bigcommerce/api/operations/get-all-products.ts +++ b/lib/bigcommerce/api/operations/get-all-products.ts @@ -1,15 +1,10 @@ import type { GetAllProductsQuery, GetAllProductsQueryVariables, -} from 'lib/bigcommerce/schema'; -import type { RecursivePartial, RecursiveRequired } from '../utils/types'; -import { productInfoFragment } from '../fragments/product'; -import { - BigcommerceConfig, - getConfig, - Images, - ProductImageVariables, -} from '..'; +} from 'lib/bigcommerce/schema' +import type { RecursivePartial, RecursiveRequired } from '../utils/types' +import { productInfoFragment } from '../fragments/product' +import { BigcommerceConfig, getConfig, Images, ProductImageVariables } from '..' export const getAllProductsQuery = /* GraphQL */ ` query getAllProducts( @@ -40,53 +35,53 @@ export const getAllProductsQuery = /* GraphQL */ ` } ${productInfoFragment} -`; +` export interface GetAllProductsResult { products: T extends GetAllProductsQuery ? NonNullable - : unknown; + : unknown } export type ProductVariables = Images & - Omit; + Omit async function getAllProducts(opts?: { - query?: string; - variables?: ProductVariables; - config?: BigcommerceConfig; -}): Promise>; + query?: string + variables?: ProductVariables + config?: BigcommerceConfig +}): Promise> async function getAllProducts(opts: { - query: string; - variables?: V; - config?: BigcommerceConfig; -}): Promise>; + query: string + variables?: V + config?: BigcommerceConfig +}): Promise> async function getAllProducts({ query = getAllProductsQuery, variables: vars, config = getConfig(), }: { - query?: string; - variables?: ProductVariables; - config?: BigcommerceConfig; + query?: string + variables?: ProductVariables + config?: BigcommerceConfig } = {}): Promise> { const variables: GetAllProductsQueryVariables = { ...config.imageVariables, ...vars, - }; + } // RecursivePartial forces the method to check for every prop in the data, which is // required in case there's a custom `query` const data = await config.fetch>( query, { variables } - ); - const products = data.site?.products?.edges; + ) + const products = data.site?.products?.edges return { products: (products as RecursiveRequired) ?? [], - }; + } } -export default getAllProducts; +export default getAllProducts diff --git a/lib/bigcommerce/api/operations/get-product.ts b/lib/bigcommerce/api/operations/get-product.ts index bbd705242..ae601d7c0 100644 --- a/lib/bigcommerce/api/operations/get-product.ts +++ b/lib/bigcommerce/api/operations/get-product.ts @@ -1,10 +1,10 @@ import type { GetProductQuery, GetProductQueryVariables, -} from 'lib/bigcommerce/schema'; -import type { RecursivePartial, RecursiveRequired } from '../utils/types'; -import { productInfoFragment } from '../fragments/product'; -import { BigcommerceConfig, getConfig, Images } from '..'; +} from 'lib/bigcommerce/schema' +import type { RecursivePartial, RecursiveRequired } from '../utils/types' +import { productInfoFragment } from '../fragments/product' +import { BigcommerceConfig, getConfig, Images } from '..' export const getProductQuery = /* GraphQL */ ` query getProduct( @@ -31,55 +31,55 @@ export const getProductQuery = /* GraphQL */ ` } ${productInfoFragment} -`; +` export interface GetProductResult { product?: T extends GetProductQuery ? Extract - : unknown; + : unknown } export type ProductVariables = Images & - ({ path: string; slug?: never } | { path?: never; slug: string }); + ({ path: string; slug?: never } | { path?: never; slug: string }) async function getProduct(opts: { - query?: string; - variables: ProductVariables; - config?: BigcommerceConfig; -}): Promise>; + query?: string + variables: ProductVariables + config?: BigcommerceConfig +}): Promise> async function getProduct(opts: { - query: string; - variables: V; - config?: BigcommerceConfig; -}): Promise>; + query: string + variables: V + config?: BigcommerceConfig +}): Promise> async function getProduct({ query = getProductQuery, variables: { slug, ...vars }, config = getConfig(), }: { - query?: string; - variables: ProductVariables; - config?: BigcommerceConfig; + query?: string + variables: ProductVariables + config?: BigcommerceConfig }): Promise> { const variables: GetProductQueryVariables = { ...config.imageVariables, ...vars, path: slug ? `/${slug}/` : vars.path!, - }; + } const data = await config.fetch>(query, { variables, - }); - const product = data.site?.route?.node; + }) + const product = data.site?.route?.node if (product?.__typename === 'Product') { return { product: product as RecursiveRequired, - }; + } } - return {}; + return {} } -export default getProduct; +export default getProduct diff --git a/lib/bigcommerce/api/utils/fetch-api.ts b/lib/bigcommerce/api/utils/fetch-api.ts index 86553a833..9b12700ab 100644 --- a/lib/bigcommerce/api/utils/fetch-api.ts +++ b/lib/bigcommerce/api/utils/fetch-api.ts @@ -1,11 +1,11 @@ -import { CommerceAPIFetchOptions } from 'lib/commerce/api'; -import { getConfig } from '..'; +import { CommerceAPIFetchOptions } from 'lib/commerce/api' +import { getConfig } from '..' export default async function fetchAPI( query: string, { variables, preview }: CommerceAPIFetchOptions = {} ): Promise { - const config = getConfig(); + const config = getConfig() const res = await fetch(config.commerceUrl + (preview ? '/preview' : ''), { method: 'POST', headers: { @@ -16,12 +16,12 @@ export default async function fetchAPI( query, variables, }), - }); + }) - const json = await res.json(); + const json = await res.json() if (json.errors) { - console.error(json.errors); - throw new Error('Failed to fetch API'); + console.error(json.errors) + throw new Error('Failed to fetch API') } - return json.data; + return json.data } diff --git a/lib/bigcommerce/api/utils/types.ts b/lib/bigcommerce/api/utils/types.ts index 74f310f68..56f9c1728 100644 --- a/lib/bigcommerce/api/utils/types.ts +++ b/lib/bigcommerce/api/utils/types.ts @@ -1,7 +1,7 @@ export type RecursivePartial = { - [P in keyof T]?: RecursivePartial; -}; + [P in keyof T]?: RecursivePartial +} export type RecursiveRequired = { - [P in keyof T]-?: RecursiveRequired; -}; + [P in keyof T]-?: RecursiveRequired +} diff --git a/lib/bigcommerce/cart.tsx b/lib/bigcommerce/cart.tsx index cbe5438c8..18c072bc8 100644 --- a/lib/bigcommerce/cart.tsx +++ b/lib/bigcommerce/cart.tsx @@ -1,14 +1,14 @@ import { CartProvider as CommerceCartProvider, useCart as useCommerceCart, -} from 'lib/commerce/cart'; +} from 'lib/commerce/cart' -export type Cart = any; +export type Cart = any export function CartProvider({ children }) { - return {children}; + return {children} } export function useCart() { - return useCommerceCart(); + return useCommerceCart() } diff --git a/lib/bigcommerce/index.tsx b/lib/bigcommerce/index.tsx index 4e10e09eb..0289f15d3 100644 --- a/lib/bigcommerce/index.tsx +++ b/lib/bigcommerce/index.tsx @@ -2,38 +2,38 @@ import { CommerceProvider as CoreCommerceProvider, Connector, useCommerce as useCoreCommerce, -} from 'lib/commerce'; +} from 'lib/commerce' async function getText(res: Response) { try { - return (await res.text()) || res.statusText; + return (await res.text()) || res.statusText } catch (error) { - return res.statusText; + return res.statusText } } async function getError(res: Response) { if (res.headers.get('Content-Type')?.includes('application/json')) { - const data = await res.json(); - return data.errors[0]; + const data = await res.json() + return data.errors[0] } - return { message: await getText(res) }; + return { message: await getText(res) } } async function fetcher(url: string, query: string) { - const res = await fetch(url); + const res = await fetch(url) if (res.ok) { - return res.json(); + return res.json() } - throw await getError(res); + throw await getError(res) } export const bigcommerce: Connector = { locale: 'en-us', fetcher, -}; +} // TODO: The connector should be extendable when a developer is using it export function CommerceProvider({ children }) { @@ -41,7 +41,7 @@ export function CommerceProvider({ children }) { {children} - ); + ) } -export const useCommerce = () => useCoreCommerce(); +export const useCommerce = () => useCoreCommerce() diff --git a/lib/cart.js b/lib/cart.js index 56ca447b1..5ac35a182 100644 --- a/lib/cart.js +++ b/lib/cart.js @@ -1,105 +1,105 @@ -import { useState, useCallback } from "react"; -import useSWR, { mutate } from "swr"; +import { useState, useCallback } from 'react' +import useSWR, { mutate } from 'swr' async function getText(res) { try { - return (await res.text()) || res.statusText; + return (await res.text()) || res.statusText } catch (error) { - return res.statusText; + return res.statusText } } async function getError(res) { - if (res.headers.get("Content-Type")?.includes("application/json")) { - const data = await res.json(); - return data.errors[0]; + if (res.headers.get('Content-Type')?.includes('application/json')) { + const data = await res.json() + return data.errors[0] } - return { message: await getText(res) }; + return { message: await getText(res) } } async function fetcher(url) { - const res = await fetch(url); + const res = await fetch(url) if (res.status === 200) { - return res.json(); + return res.json() } - throw await getError(res); + throw await getError(res) } export function useCart() { - return useSWR("/api/cart", fetcher); + return useSWR('/api/cart', fetcher) } export function useAddToCart() { const [{ addingToCart, error }, setStatus] = useState({ addingToCart: false, - }); + }) const addToCart = useCallback(async ({ product }) => { - setStatus({ addingToCart: true }); + setStatus({ addingToCart: true }) - const res = await fetch("/api/cart", { - method: "POST", + const res = await fetch('/api/cart', { + method: 'POST', headers: { - "Content-Type": "application/json", + 'Content-Type': 'application/json', }, body: JSON.stringify({ product }), - }); + }) // Product added as expected if (res.status === 200) { - setStatus({ addingToCart: false }); - return mutate("/api/cart"); + setStatus({ addingToCart: false }) + return mutate('/api/cart') } - const error = await getError(res); + const error = await getError(res) - console.error("Adding product to cart failed with:", res.status, error); - setStatus({ addingToCart: false, error }); - }, []); + console.error('Adding product to cart failed with:', res.status, error) + setStatus({ addingToCart: false, error }) + }, []) - return { addToCart, addingToCart, error }; + return { addToCart, addingToCart, error } } export function useUpdateCart() { const [{ updatingCart, error }, setStatus] = useState({ updatingCart: false, - }); + }) const updateCart = useCallback(async ({ product, item }) => { - setStatus({ updatingCart: true }); + setStatus({ updatingCart: true }) const res = await fetch( `/api/cart?itemId=${item.id}`, product.quantity < 1 - ? { method: "DELETE" } + ? { method: 'DELETE' } : { - method: "PUT", + method: 'PUT', headers: { - "Content-Type": "application/json", + 'Content-Type': 'application/json', }, body: JSON.stringify({ product }), } - ); + ) // Product updated as expected if (res.status === 200) { - setStatus({ updatingCart: false }); - return mutate("/api/cart"); + setStatus({ updatingCart: false }) + return mutate('/api/cart') } - const error = await getError(res); + const error = await getError(res) - console.error("Update to cart failed with:", res.status, error); - setStatus({ updatingCart: false, error }); - }, []); + console.error('Update to cart failed with:', res.status, error) + setStatus({ updatingCart: false, error }) + }, []) - return { updateCart, updatingCart, error }; + return { updateCart, updatingCart, error } } export function useRemoveFromCart() { - const { updateCart, updatingCart, error } = useUpdateCart(); + const { updateCart, updatingCart, error } = useUpdateCart() const removeFromCart = async ({ item }) => { - updateCart({ item, product: { quantity: 0 } }); - }; + updateCart({ item, product: { quantity: 0 } }) + } - return { removeFromCart, removingFromCart: updatingCart, error }; + return { removeFromCart, removingFromCart: updatingCart, error } } diff --git a/lib/commerce/api/index.ts b/lib/commerce/api/index.ts index 1cf50bc9a..49df4ccd0 100644 --- a/lib/commerce/api/index.ts +++ b/lib/commerce/api/index.ts @@ -1,15 +1,15 @@ export interface CommerceAPIConfig { - commerceUrl: string; - apiToken: string; + commerceUrl: string + apiToken: string fetch( query: string, queryData?: CommerceAPIFetchOptions - ): Promise; + ): Promise } export interface CommerceAPIFetchOptions { - variables?: V; - preview?: boolean; + variables?: V + preview?: boolean } // TODO: define interfaces for all the available operations diff --git a/lib/commerce/cart.tsx b/lib/commerce/cart.tsx index 509737fda..3577e1ae5 100644 --- a/lib/commerce/cart.tsx +++ b/lib/commerce/cart.tsx @@ -1,37 +1,37 @@ -import { createContext, useContext } from 'react'; -import useSWR, { responseInterface } from 'swr'; -import { useCommerce } from '.'; +import { createContext, useContext } from 'react' +import useSWR, { responseInterface } from 'swr' +import { useCommerce } from '.' -export type Cart = any; +export type Cart = any export type CartResponse = responseInterface & { - isEmpty: boolean; -}; + isEmpty: boolean +} -const CartContext = createContext>(null); +const CartContext = createContext>(null) function getCartCookie() { // TODO: Figure how the cart should be persisted - return null; + return null } export function CartProvider({ children }) { - const { hooks, fetcher } = useCommerce(); - const { useCart } = hooks; - const cartId = getCartCookie(); + const { hooks, fetcher } = useCommerce() + const { useCart } = hooks + const cartId = getCartCookie() const response = useSWR( () => (cartId ? [useCart.url, useCart.query, useCart.resolver] : null), fetcher - ); - const isEmpty = true; + ) + const isEmpty = true return ( {children} - ); + ) } export function useCart() { - return useContext(CartContext) as CartResponse; + return useContext(CartContext) as CartResponse } diff --git a/lib/commerce/index.tsx b/lib/commerce/index.tsx index 267d7dfd8..2552286a8 100644 --- a/lib/commerce/index.tsx +++ b/lib/commerce/index.tsx @@ -1,29 +1,29 @@ -import { createContext, ReactNode, useContext } from 'react'; +import { createContext, ReactNode, useContext } from 'react' -const Commerce = createContext(null); +const Commerce = createContext(null) export type CommerceProps = { - children?: ReactNode; - connector: Connector; -}; + children?: ReactNode + connector: Connector +} export type Connector = { - fetcher: Fetcher; - locale: string; -}; + fetcher: Fetcher + locale: string +} -export type Fetcher = (...args: any) => T | Promise; +export type Fetcher = (...args: any) => T | Promise export function CommerceProvider({ children, connector }: CommerceProps) { if (!connector) { throw new Error( 'CommerceProvider requires a valid headless commerce connector' - ); + ) } - return {children}; + return {children} } export function useCommerce() { - return useContext(Commerce) as T; + return useContext(Commerce) as T } diff --git a/pages/_app.tsx b/pages/_app.tsx index bca14e53a..d15b79d43 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,6 @@ -import "@assets/global.css"; -import React from "react"; -import { UIProvider } from "@components/ui/context"; +import '@assets/global.css' +import React from 'react' +import { UIProvider } from '@components/ui/context' export default function MyApp({ Component, pageProps }) { return ( @@ -9,5 +9,5 @@ export default function MyApp({ Component, pageProps }) { - ); + ) } diff --git a/pages/_document.tsx b/pages/_document.tsx index 693a1c1ae..215662cd7 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,4 +1,4 @@ -import Document_, { Html, Head, Main, NextScript } from "next/document"; +import Document_, { Html, Head, Main, NextScript } from 'next/document' export default class Document extends Document_ { render() { @@ -13,6 +13,6 @@ export default class Document extends Document_ { */} - ); + ) } } diff --git a/pages/index.tsx b/pages/index.tsx index b0ffda896..6e5a6b5f5 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,22 +1,22 @@ -import { GetStaticPropsContext, InferGetStaticPropsType } from "next"; -import getAllProducts from "lib/bigcommerce/api/operations/get-all-products"; -import { Layout } from "@components/core"; -import { ProductGrid } from "@components/product"; +import { GetStaticPropsContext, InferGetStaticPropsType } from 'next' +import getAllProducts from 'lib/bigcommerce/api/operations/get-all-products' +import { Layout } from '@components/core' +import { ProductGrid } from '@components/product' export async function getStaticProps({ preview }: GetStaticPropsContext) { - const { products } = await getAllProducts(); + const { products } = await getAllProducts() return { props: { products }, - }; + } } export default function Home({ products, }: InferGetStaticPropsType) { - console.log("PRODUCTS", products); + console.log('PRODUCTS', products) return ( - ); + ) } diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx index 012c43368..e362daa1f 100644 --- a/pages/product/[slug].tsx +++ b/pages/product/[slug].tsx @@ -1,14 +1,14 @@ -import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'; -import { useRouter } from 'next/router'; -import getProduct from 'lib/bigcommerce/api/operations/get-product'; -import { Layout } from '@components/core'; -import { ProductView } from '@components/product'; -import getAllProductPaths from '@lib/bigcommerce/api/operations/get-all-product-paths'; +import { GetStaticPropsContext, InferGetStaticPropsType } from 'next' +import { useRouter } from 'next/router' +import getProduct from 'lib/bigcommerce/api/operations/get-product' +import { Layout } from '@components/core' +import { ProductView } from '@components/product' +import getAllProductPaths from '@lib/bigcommerce/api/operations/get-all-product-paths' export async function getStaticProps({ params, }: GetStaticPropsContext<{ slug: string }>) { - const { product } = await getProduct({ variables: { slug: params!.slug } }); + const { product } = await getProduct({ variables: { slug: params!.slug } }) const productData = { title: 'T-Shirt', description: ` @@ -22,34 +22,34 @@ export async function getStaticProps({ price: '$50', colors: ['black', 'white', 'pink'], sizes: ['s', 'm', 'l', 'xl', 'xxl'], - }; + } return { props: { product, productData, }, revalidate: 200, - }; + } } export async function getStaticPaths() { - const { products } = await getAllProductPaths(); + const { products } = await getAllProductPaths() return { paths: products.map((product) => ({ params: { slug: product!.node.path }, })), fallback: 'unstable_blocking', - }; + } } export default function Home({ product, productData, }: InferGetStaticPropsType) { - console.log('PRODUCT', product); + console.log('PRODUCT', product) - const router = useRouter(); + const router = useRouter() return ( @@ -59,5 +59,5 @@ export default function Home({ )} - ); + ) } diff --git a/postcss.config.js b/postcss.config.js index 5bacd33fd..6f2d25c4e 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,18 +1,18 @@ module.exports = { plugins: [ - "tailwindcss", - "postcss-flexbugs-fixes", + 'tailwindcss', + 'postcss-flexbugs-fixes', [ - "postcss-preset-env", + 'postcss-preset-env', { autoprefixer: { - flexbox: "no-2009", + flexbox: 'no-2009', }, stage: 3, features: { - "custom-properties": false, + 'custom-properties': false, }, }, ], ], -}; +} diff --git a/tailwind.config.js b/tailwind.config.js index dfb08c05e..882b19d63 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,25 +3,25 @@ module.exports = { removeDeprecatedGapUtilities: true, }, purge: [ - "./components/**/*.{js,ts,jsx,tsx}", - "./pages/**/*.{js,ts,jsx,tsx}", - "./ui/**/*.{js,ts,jsx,tsx}", + './components/**/*.{js,ts,jsx,tsx}', + './pages/**/*.{js,ts,jsx,tsx}', + './ui/**/*.{js,ts,jsx,tsx}', ], theme: { extend: { colors: { - "accent-1": "#FAFAFA", - "accent-4": "#888", - violet: "#7928CA", - pink: "#FF0080", - cyan: "#50E3C2", - blue: "#0070F3", + 'accent-1': '#FAFAFA', + 'accent-4': '#888', + violet: '#7928CA', + pink: '#FF0080', + cyan: '#50E3C2', + blue: '#0070F3', }, }, }, variants: {}, - plugins: [require("@tailwindcss/ui")], + plugins: [require('@tailwindcss/ui')], experimental: { applyComplexClasses: true, }, -}; +}