Apply prettier over all files

.prettierignore

@@ -1,2 +1,3 @@
 node_modules
-.next
+.next
+public

README.md

@@ -1 +1 @@
-# e-comm-example
+# e-comm-example

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;
 }

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",
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    '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;

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -1,11 +1,11 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react'
-import { UserNav } from "@components/core";
+import { UserNav } from '@components/core'
-import { Button } from "@components/ui";
+import { Button } from '@components/ui'
-import { Trash, Cross } from "@components/icon";
+import { Trash, Cross } from '@components/icon'
-import { useUI } from "@components/ui/context";
+import { useUI } from '@components/ui/context'
 
 const CartSidebarView: FunctionComponent = () => {
-  const { closeSidebar } = useUI();
+  const { closeSidebar } = useUI()
   return (
     <>
       <header className="px-4 py-6 sm:px-6 border-b border-gray-200">
@@ -57,7 +57,7 @@ const CartSidebarView: FunctionComponent = () => {
         <Button>Proceed to Checkout</Button>
       </div>
     </>
-  );
+  )
-};
+}
 
-export default CartSidebarView;
+export default CartSidebarView

components/cart/CartSidebarView/index.ts

@@ -1 +1 @@
-export { default } from "./CartSidebarView";
+export { default } from './CartSidebarView'

components/cart/index.ts

@@ -1 +1 @@
-export { default as CartSidebarView } from "./CartSidebarView";
+export { default as CartSidebarView } from './CartSidebarView'

components/core/Avatar/Avatar.tsx

@@ -1,14 +1,14 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react'
-import s from "./Avatar.module.css";
+import s from './Avatar.module.css'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
 }
 
 const Avatar: FunctionComponent<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
       <img
@@ -17,7 +17,7 @@ const Avatar: FunctionComponent<Props> = ({ className }) => {
         alt=""
       ></img>
     </div>
-  );
+  )
-};
+}
 
-export default Avatar;
+export default Avatar

components/core/Avatar/index.ts

@@ -1 +1 @@
-export { default } from "./Avatar";
+export { default } from './Avatar'

components/core/Featurebar/Featurebar.module.css

@@ -13,7 +13,7 @@
 }
 
 .separator:before {
-  content: "";
+  content: '';
 }
 
 .description {

components/core/Featurebar/Featurebar.tsx

@@ -1,11 +1,11 @@
-import cn from "classnames";
+import cn from 'classnames'
-import { FunctionComponent } from "react";
+import { FunctionComponent } from 'react'
-import s from "./Featurebar.module.css";
+import s from './Featurebar.module.css'
 
 interface Props {
-  className?: string;
+  className?: string
-  title: string;
+  title: string
-  description: string;
+  description: string
 }
 
 const Featurebar: FunctionComponent<Props> = ({
@@ -13,14 +13,14 @@ const Featurebar: FunctionComponent<Props> = ({
   description,
   className,
 }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
       <span className={s.title}>{title}</span>
       <span className={s.separator} />
       <span className={s.description}>{description}</span>
     </div>
-  );
+  )
-};
+}
 
-export default Featurebar;
+export default Featurebar

components/core/Featurebar/index.ts

@@ -1 +1 @@
-export { default } from "./Featurebar";
+export { default } from './Featurebar'

components/core/Footer/Footer.tsx

@@ -1,20 +1,20 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react'
-import s from "./Footer.module.css";
+import s from './Footer.module.css'
-import { Container } from "@components/ui";
+import { Container } from '@components/ui'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
 }
 
 const Footer: FunctionComponent<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <footer className={rootClassName}>
       <Container className={s.container}></Container>
     </footer>
-  );
+  )
-};
+}
 
-export default Footer;
+export default Footer

components/core/Footer/index.ts

@@ -1 +1 @@
-export { default } from "./Footer";
+export { default } from './Footer'

components/core/Layout/Layout.tsx

@@ -1,19 +1,19 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react'
-import s from "./Layout.module.css";
+import s from './Layout.module.css'
-import { Navbar, Featurebar } from "@components/core";
+import { Navbar, Featurebar } from '@components/core'
-import { Container, Sidebar } from "@components/ui";
+import { Container, Sidebar } from '@components/ui'
-import { CartSidebarView } from "@components/cart";
+import { CartSidebarView } from '@components/cart'
-import { useUI } from "@components/ui/context";
+import { useUI } from '@components/ui/context'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
 }
 
 const Layout: FunctionComponent<Props> = ({ className, children }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
-  const { displaySidebar } = useUI();
+  const { displaySidebar } = useUI()
   return (
     <div className={rootClassName}>
       <Featurebar
@@ -30,7 +30,7 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
         </Sidebar>
       )}
     </div>
-  );
+  )
-};
+}
 
-export default Layout;
+export default Layout

components/core/Layout/index.ts

@@ -1 +1 @@
-export { default } from "./Layout";
+export { default } from './Layout'

components/core/Navbar/Navbar.tsx

@@ -1,15 +1,15 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react'
-import s from "./Navbar.module.css";
+import s from './Navbar.module.css'
-import { Logo, Container } from "@components/ui";
+import { Logo, Container } from '@components/ui'
-import { Searchbar } from "@components/core";
+import { Searchbar } from '@components/core'
-import { UserNav } from "@components/core";
+import { UserNav } from '@components/core'
 interface Props {
-  className?: string;
+  className?: string
 }
 
 const Navbar: FunctionComponent<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <Container className={rootClassName}>
       <Logo />
@@ -23,7 +23,7 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
       </div>
       <UserNav />
     </Container>
-  );
+  )
-};
+}
 
-export default Navbar;
+export default Navbar

components/core/Navbar/index.ts

@@ -1 +1 @@
-export { default } from "./Navbar";
+export { default } from './Navbar'

components/core/Searchbar/Searchbar.tsx

@@ -1,14 +1,14 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react'
-import s from "./Searchbar.module.css";
+import s from './Searchbar.module.css'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
 }
 
 const Searchbar: FunctionComponent<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
       <div className="flex-1 flex justify-between px-2">
@@ -26,7 +26,7 @@ const Searchbar: FunctionComponent<Props> = ({ className }) => {
         </div>
       </div>
     </div>
-  );
+  )
-};
+}
 
-export default Searchbar;
+export default Searchbar

components/core/Searchbar/index.ts

@@ -1 +1 @@
-export { default } from "./Searchbar";
+export { default } from './Searchbar'

components/core/UserNav/UserNav.tsx

@@ -1,17 +1,17 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react'
-import s from "./UserNav.module.css";
+import s from './UserNav.module.css'
-import { Avatar } from "@components/core";
+import { Avatar } from '@components/core'
-import { Heart, Bag } from "@components/icon";
+import { Heart, Bag } from '@components/icon'
-import { useUI } from "@components/ui/context";
+import { useUI } from '@components/ui/context'
 
 interface Props {
-  className?: string;
+  className?: string
 }
 
 const UserNav: FunctionComponent<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
-  const { openSidebar } = useUI();
+  const { openSidebar } = useUI()
 
   return (
     <nav className={rootClassName}>
@@ -30,7 +30,7 @@ const UserNav: FunctionComponent<Props> = ({ className }) => {
         </li>
       </ul>
     </nav>
-  );
+  )
-};
+}
 
-export default UserNav;
+export default UserNav

components/core/UserNav/index.ts

@@ -1 +1 @@
-export { default } from "./UserNav";
+export { default } from './UserNav'

components/core/index.ts

@@ -1,7 +1,7 @@
-export { default as Avatar } from "./Avatar";
+export { default as Avatar } from './Avatar'
-export { default as Featurebar } from "./Featurebar";
+export { default as Featurebar } from './Featurebar'
-export { default as Footer } from "./Footer";
+export { default as Footer } from './Footer'
-export { default as Layout } from "./Layout";
+export { default as Layout } from './Layout'
-export { default as Navbar } from "./Navbar";
+export { default as Navbar } from './Navbar'
-export { default as Searchbar } from "./Searchbar";
+export { default as Searchbar } from './Searchbar'
-export { default as UserNav } from "./UserNav";
+export { default as UserNav } from './UserNav'

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"
       />
     </svg>
-  );
+  )
-};
+}
 
-export default Bag;
+export default Bag

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"
       />
     </svg>
-  );
+  )
-};
+}
 
-export default Cross;
+export default Cross

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"
       />
     </svg>
-  );
+  )
-};
+}
 
-export default Heart;
+export default Heart

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"
       />
     </svg>
-  );
+  )
-};
+}
 
-export default Trash;
+export default Trash

components/icon/index.ts

@@ -1,4 +1,4 @@
-export { default as Bag } from "./Bag";
+export { default as Bag } from './Bag'
-export { default as Heart } from "./Heart";
+export { default as Heart } from './Heart'
-export { default as Trash } from "./Trash";
+export { default as Trash } from './Trash'
-export { default as Cross } from "./Cross";
+export { default as Cross } from './Cross'

components/product/ProductCard/ProductCard.tsx

@@ -1,14 +1,14 @@
-import cn from "classnames";
+import cn from 'classnames'
-import s from "./ProductCard.module.css";
+import s from './ProductCard.module.css'
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react'
-import { Heart } from "@components/icon";
+import { Heart } from '@components/icon'
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
 }
 
 const ProductCard: FunctionComponent<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
       <div className="absolute">
@@ -26,7 +26,7 @@ const ProductCard: FunctionComponent<Props> = ({ className }) => {
         <div className="bg-violet h-full"></div>
       </div>
     </div>
-  );
+  )
-};
+}
 
-export default ProductCard;
+export default ProductCard

components/product/ProductCard/index.ts

@@ -1 +1 @@
-export { default } from "./ProductCard";
+export { default } from './ProductCard'

components/product/ProductGrid/ProductGrid.tsx

@@ -1,15 +1,15 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react'
-import s from "./ProductGrid.module.css";
+import s from './ProductGrid.module.css'
-import ProductCard from "@components/ProductCard";
+import ProductCard from '@components/ProductCard'
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
-  products: [any];
+  products: [any]
 }
 
 const ProductView: FunctionComponent<Props> = ({ products, className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
       <div className="row-span-2 lg:col-span-2 bg-violet h-full"></div>
@@ -19,7 +19,7 @@ const ProductView: FunctionComponent<Props> = ({ products, className }) => {
       <div className="row-span-2 lg:col-span-2 bg-blue h-full"></div>
       <div className="row-span-1 lg:col-span-1 bg-cyan"></div>
     </div>
-  );
+  )
-};
+}
 
-export default ProductView;
+export default ProductView

components/product/ProductGrid/index.ts

@@ -1 +1 @@
-export { default } from "./ProductGrid";
+export { default } from './ProductGrid'

components/product/ProductView/ProductView.tsx

@@ -1,18 +1,18 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react'
-import s from "./ProductView.module.css";
+import s from './ProductView.module.css'
-import { Button } from "@components/ui";
+import { Button } from '@components/ui'
-import { Swatch } from "@components/product";
+import { Swatch } from '@components/product'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
-  productData: ProductData;
+  productData: ProductData
 }
 
 const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
-  console.log(productData);
+  console.log(productData)
   return (
     <div className={rootClassName}>
       <div className="absolute">
@@ -53,7 +53,7 @@ const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
         </section>
       </div>
     </div>
-  );
+  )
-};
+}
 
-export default ProductView;
+export default ProductView

components/product/ProductView/index.ts

@@ -1 +1 @@
-export { default } from "./ProductView";
+export { default } from './ProductView'

components/product/Swatch/Swatch.tsx

@@ -1,14 +1,14 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react'
-import s from "./Swatch.module.css";
+import s from './Swatch.module.css'
-import { Colors } from "@components/ui/types";
+import { Colors } from '@components/ui/types'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
-  active?: boolean;
+  active?: boolean
-  color?: Colors;
+  color?: Colors
-  size?: string;
+  size?: string
 }
 
 const Swatch: FunctionComponent<Props> = ({
@@ -22,14 +22,14 @@ const Swatch: FunctionComponent<Props> = ({
     {
       [s.active]: active,
       [s.size]: size,
-      [s.colorPink]: color === "pink",
+      [s.colorPink]: color === 'pink',
-      [s.colorWhite]: color === "white",
+      [s.colorWhite]: color === 'white',
-      [s.colorBlack]: color === "black",
+      [s.colorBlack]: color === 'black',
-      [s.colorViolet]: color === "violet",
+      [s.colorViolet]: color === 'violet',
     },
     className
-  );
+  )
-  return <span className={rootClassName}>{size ? size : null}</span>;
+  return <span className={rootClassName}>{size ? size : null}</span>
-};
+}
 
-export default Swatch;
+export default Swatch

components/product/Swatch/index.ts

@@ -1 +1 @@
-export { default } from "./Swatch";
+export { default } from './Swatch'

components/product/index.ts

@@ -1,4 +1,4 @@
-export { default as Swatch } from "./Swatch";
+export { default as Swatch } from './Swatch'
-export { default as ProductView } from "./ProductView";
+export { default as ProductView } from './ProductView'
-export { default as ProductCard } from "./ProductCard";
+export { default as ProductCard } from './ProductCard'
-export { default as ProductGrid } from "./ProductGrid";
+export { default as ProductGrid } from './ProductGrid'

components/product/types.ts

@@ -1,5 +1,5 @@
-import { Colors } from "@components/ui/types";
+import { Colors } from '@components/ui/types'
-export { Product } from "@lib/bigcommerce";
+export { Product } from '@lib/bigcommerce'
 
 // export type ProductData = {
 //   title: string;

components/ui/Button/Button.tsx

@@ -1,43 +1,43 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { ButtonHTMLAttributes } from "react";
+import React, { ButtonHTMLAttributes } from 'react'
-import s from "./Button.module.css";
+import s from './Button.module.css'
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  href?: string;
+  href?: string
-  className?: string;
+  className?: string
-  variant?: "filled" | "outlined" | "flat" | "none";
+  variant?: 'filled' | 'outlined' | 'flat' | 'none'
-  active?: boolean;
+  active?: boolean
-  type?: "submit" | "reset" | "button";
+  type?: 'submit' | 'reset' | 'button'
 }
 
 export default class Button extends React.Component<Props> {
   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<HTMLButtonElement | HTMLAnchorElement>
-    > = "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 (
       <Component
@@ -49,6 +49,6 @@ export default class Button extends React.Component<Props> {
       >
         {children}
       </Component>
-    );
+    )
   }
 }

components/ui/Button/index.ts

@@ -1 +1 @@
-export { default } from "./Button";
+export { default } from './Button'

components/ui/ClickOutside/ClickOutside.tsx

@@ -3,47 +3,47 @@ import React, {
   MutableRefObject,
   useEffect,
   useRef,
-} from "react";
+} from 'react'
 
-import { Component } from "react";
+import { Component } from 'react'
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types'
 
 export interface ClickOutsideProps {
-  onClickOutside: (e?: MouseEvent) => void;
+  onClickOutside: (e?: MouseEvent) => void
-  children: React.ReactNode | any;
+  children: React.ReactNode | any
-  render: () => void;
+  render: () => void
 }
 
 export default class ClickOutside extends Component<ClickOutsideProps> {
-  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('mousedown', this.handleClick, true)
-    document.removeEventListener("touchstart", 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") {
+      if (typeof this.props.onClickOutside === 'function') {
-        this.props.onClickOutside(event);
+        this.props.onClickOutside(event)
       }
     }
-  };
+  }
 
   render() {
-    return null;
+    return null
     // return this.props.render({
     //   innerRef: this.handleRef,
     // });

components/ui/ClickOutside/index.ts

@@ -1 +1 @@
-export { default } from "./ClickOutside";
+export { default } from './ClickOutside'

components/ui/Container/Container.tsx

@@ -1,25 +1,25 @@
-import cn from "classnames";
+import cn from 'classnames'
-import { FunctionComponent } from "react";
+import { FunctionComponent } from 'react'
-import s from "./Container.module.css";
+import s from './Container.module.css'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
-  el?: HTMLElement;
+  el?: HTMLElement
 }
 
 const Container: FunctionComponent<Props> = ({
   children,
   className,
-  el = "div",
+  el = 'div',
 }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement
-  >> = el as any;
+  >> = el as any
 
-  return <Component className={rootClassName}>{children}</Component>;
+  return <Component className={rootClassName}>{children}</Component>
-};
+}
 
-export default Container;
+export default Container

components/ui/Container/index.ts

@@ -1 +1 @@
-export { default } from "./Container";
+export { default } from './Container'

components/ui/Logo/Logo.tsx

@@ -35,6 +35,6 @@ const Logo = () => (
       strokeWidth="0.30634"
     />
   </svg>
-);
+)
 
-export default Logo;
+export default Logo

components/ui/Logo/index.ts

@@ -1 +1 @@
-export { default } from "./Logo";
+export { default } from './Logo'

components/ui/Sidebar/Sidebar.tsx

@@ -1,14 +1,14 @@
-import cn from "classnames";
+import cn from 'classnames'
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react'
-import s from "./Sidebar.module.css";
+import s from './Sidebar.module.css'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
 }
 
 const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
       <div className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25">
@@ -23,7 +23,7 @@ const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
         </div>
       </div>
     </div>
-  );
+  )
-};
+}
 
-export default Sidebar;
+export default Sidebar

components/ui/Sidebar/index.ts

@@ -1 +1 @@
-export { default } from "./Sidebar";
+export { default } from './Sidebar'

components/ui/_BLANK/Featurebar.tsx

@@ -1,15 +1,15 @@
-import cn from "classnames";
+import cn from 'classnames'
-import { FunctionComponent } from "react";
+import { FunctionComponent } from 'react'
-import s from "./Featurebar.module.css";
+import s from './Featurebar.module.css'
 
 interface Props {
-  className?: string;
+  className?: string
-  children?: any;
+  children?: any
 }
 
 const Featurebar: FunctionComponent<Props> = ({ children, className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
-  return <div className={rootClassName}>{children}</div>;
+  return <div className={rootClassName}>{children}</div>
-};
+}
 
-export default Featurebar;
+export default Featurebar

components/ui/_BLANK/index.ts

@@ -1 +1 @@
-export { default } from "./Featurebar";
+export { default } from './Featurebar'

components/ui/context.tsx

@@ -1,56 +1,56 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react'
 
 export interface UIState {
-  displaySidebar: boolean;
+  displaySidebar: boolean
-  openSidebar: () => {};
+  openSidebar: () => {}
-  closeSidebar: () => {};
+  closeSidebar: () => {}
 }
 
 const initialState = {
   displaySidebar: false,
   openSidebar: null,
   closeSidebar: null,
-};
+}
 
-export const UIContext = React.createContext(initialState);
+export const UIContext = React.createContext(initialState)
-UIContext.displayName = "UIContext";
+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 openSidebar = () => dispatch('OPEN_SIDEBAR')
-  const closeSidebar = () => dispatch("CLOSE_SIDEBAR");
+  const closeSidebar = () => dispatch('CLOSE_SIDEBAR')
 
   const value = {
     ...state,
     openSidebar,
     closeSidebar,
-  };
+  }
 
-  return <UIContext.Provider value={value} {...props} />;
+  return <UIContext.Provider value={value} {...props} />
-};
+}
 
 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,
-      };
+      }
     }
   }
 }

components/ui/index.ts

@@ -1,4 +1,4 @@
-export { default as Button } from "./Button";
+export { default as Button } from './Button'
-export { default as Container } from "./Container";
+export { default as Container } from './Container'
-export { default as Sidebar } from "./Sidebar";
+export { default as Sidebar } from './Sidebar'
-export { default as Logo } from "./Logo";
+export { default as Logo } from './Logo'

components/ui/types.ts

@@ -1 +1 @@
-export type Colors = "violet" | "black" | "pink" | "white";
+export type Colors = 'violet' | 'black' | 'pink' | 'white'

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}
-`;
+`

lib/bigcommerce/api/index.ts

@@ -1,17 +1,17 @@
-import { CommerceAPIConfig } from 'lib/commerce/api';
+import { CommerceAPIConfig } from 'lib/commerce/api'
-import { GetAllProductsQueryVariables } from '../schema';
+import { GetAllProductsQueryVariables } from '../schema'
-import fetchAPI from './utils/fetch-api';
+import fetchAPI from './utils/fetch-api'
 
 export interface Images {
-  small?: ImageOptions;
+  small?: ImageOptions
-  medium?: ImageOptions;
+  medium?: ImageOptions
-  large?: ImageOptions;
+  large?: ImageOptions
-  xl?: ImageOptions;
+  xl?: ImageOptions
 }
 
 export interface ImageOptions {
-  width: number;
+  width: number
-  height?: 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_URL = process.env.BIGCOMMERCE_STOREFRONT_API_URL
-const API_TOKEN = process.env.BIGCOMMERCE_STOREFRONT_API_TOKEN;
+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<BigcommerceConfig>) {
-    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<BigcommerceConfig>) {
-  return config.setConfig(newConfig);
+  return config.setConfig(newConfig)
 }

lib/bigcommerce/api/operations/get-all-product-paths.ts

@@ -1,6 +1,6 @@
-import type { GetAllProductPathsQuery } from 'lib/bigcommerce/schema';
+import type { GetAllProductPathsQuery } from 'lib/bigcommerce/schema'
-import type { RecursivePartial, RecursiveRequired } from '../utils/types';
+import type { RecursivePartial, RecursiveRequired } from '../utils/types'
-import { BigcommerceConfig, getConfig } from '..';
+import { BigcommerceConfig, getConfig } from '..'
 
 export const getAllProductPathsQuery = /* GraphQL */ `
   query getAllProductPaths {
@@ -14,41 +14,41 @@ export const getAllProductPathsQuery = /* GraphQL */ `
       }
     }
   }
-`;
+`
 
 export interface GetAllProductPathsResult<T> {
   products: T extends GetAllProductPathsQuery
     ? NonNullable<T['site']['products']['edges']>
-    : unknown;
+    : unknown
 }
 
 async function getAllProductPaths(opts?: {
-  query?: string;
+  query?: string
-  config?: BigcommerceConfig;
+  config?: BigcommerceConfig
-}): Promise<GetAllProductPathsResult<GetAllProductPathsQuery>>;
+}): Promise<GetAllProductPathsResult<GetAllProductPathsQuery>>
 
 async function getAllProductPaths<T, V = any>(opts: {
-  query: string;
+  query: string
-  config?: BigcommerceConfig;
+  config?: BigcommerceConfig
-}): Promise<GetAllProductPathsResult<T>>;
+}): Promise<GetAllProductPathsResult<T>>
 
 async function getAllProductPaths({
   query = getAllProductPathsQuery,
   config = getConfig(),
 }: {
-  query?: string;
+  query?: string
-  config?: BigcommerceConfig;
+  config?: BigcommerceConfig
 } = {}): Promise<GetAllProductPathsResult<GetAllProductPathsQuery>> {
   // 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<RecursivePartial<GetAllProductPathsQuery>>(
     query
-  );
+  )
-  const products = data.site?.products?.edges;
+  const products = data.site?.products?.edges
 
   return {
     products: (products as RecursiveRequired<typeof products>) ?? [],
-  };
+  }
 }
 
-export default getAllProductPaths;
+export default getAllProductPaths

lib/bigcommerce/api/operations/get-all-products.ts

@@ -1,15 +1,10 @@
 import type {
   GetAllProductsQuery,
   GetAllProductsQueryVariables,
-} from 'lib/bigcommerce/schema';
+} from 'lib/bigcommerce/schema'
-import type { RecursivePartial, RecursiveRequired } from '../utils/types';
+import type { RecursivePartial, RecursiveRequired } from '../utils/types'
-import { productInfoFragment } from '../fragments/product';
+import { productInfoFragment } from '../fragments/product'
-import {
+import { BigcommerceConfig, getConfig, Images, ProductImageVariables } from '..'
-  BigcommerceConfig,
-  getConfig,
-  Images,
-  ProductImageVariables,
-} from '..';
 
 export const getAllProductsQuery = /* GraphQL */ `
   query getAllProducts(
@@ -40,53 +35,53 @@ export const getAllProductsQuery = /* GraphQL */ `
   }
 
   ${productInfoFragment}
-`;
+`
 
 export interface GetAllProductsResult<T> {
   products: T extends GetAllProductsQuery
     ? NonNullable<T['site']['products']['edges']>
-    : unknown;
+    : unknown
 }
 
 export type ProductVariables = Images &
-  Omit<GetAllProductsQueryVariables, keyof ProductImageVariables>;
+  Omit<GetAllProductsQueryVariables, keyof ProductImageVariables>
 
 async function getAllProducts(opts?: {
-  query?: string;
+  query?: string
-  variables?: ProductVariables;
+  variables?: ProductVariables
-  config?: BigcommerceConfig;
+  config?: BigcommerceConfig
-}): Promise<GetAllProductsResult<GetAllProductsQuery>>;
+}): Promise<GetAllProductsResult<GetAllProductsQuery>>
 
 async function getAllProducts<T, V = any>(opts: {
-  query: string;
+  query: string
-  variables?: V;
+  variables?: V
-  config?: BigcommerceConfig;
+  config?: BigcommerceConfig
-}): Promise<GetAllProductsResult<T>>;
+}): Promise<GetAllProductsResult<T>>
 
 async function getAllProducts({
   query = getAllProductsQuery,
   variables: vars,
   config = getConfig(),
 }: {
-  query?: string;
+  query?: string
-  variables?: ProductVariables;
+  variables?: ProductVariables
-  config?: BigcommerceConfig;
+  config?: BigcommerceConfig
 } = {}): Promise<GetAllProductsResult<GetAllProductsQuery>> {
   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<RecursivePartial<GetAllProductsQuery>>(
     query,
     { variables }
-  );
+  )
-  const products = data.site?.products?.edges;
+  const products = data.site?.products?.edges
 
   return {
     products: (products as RecursiveRequired<typeof products>) ?? [],
-  };
+  }
 }
 
-export default getAllProducts;
+export default getAllProducts

lib/bigcommerce/api/operations/get-product.ts

@@ -1,10 +1,10 @@
 import type {
   GetProductQuery,
   GetProductQueryVariables,
-} from 'lib/bigcommerce/schema';
+} from 'lib/bigcommerce/schema'
-import type { RecursivePartial, RecursiveRequired } from '../utils/types';
+import type { RecursivePartial, RecursiveRequired } from '../utils/types'
-import { productInfoFragment } from '../fragments/product';
+import { productInfoFragment } from '../fragments/product'
-import { BigcommerceConfig, getConfig, Images } from '..';
+import { BigcommerceConfig, getConfig, Images } from '..'
 
 export const getProductQuery = /* GraphQL */ `
   query getProduct(
@@ -31,55 +31,55 @@ export const getProductQuery = /* GraphQL */ `
   }
 
   ${productInfoFragment}
-`;
+`
 
 export interface GetProductResult<T> {
   product?: T extends GetProductQuery
     ? Extract<T['site']['route']['node'], { __typename: 'Product' }>
-    : 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;
+  query?: string
-  variables: ProductVariables;
+  variables: ProductVariables
-  config?: BigcommerceConfig;
+  config?: BigcommerceConfig
-}): Promise<GetProductResult<GetProductQuery>>;
+}): Promise<GetProductResult<GetProductQuery>>
 
 async function getProduct<T, V = any>(opts: {
-  query: string;
+  query: string
-  variables: V;
+  variables: V
-  config?: BigcommerceConfig;
+  config?: BigcommerceConfig
-}): Promise<GetProductResult<T>>;
+}): Promise<GetProductResult<T>>
 
 async function getProduct({
   query = getProductQuery,
   variables: { slug, ...vars },
   config = getConfig(),
 }: {
-  query?: string;
+  query?: string
-  variables: ProductVariables;
+  variables: ProductVariables
-  config?: BigcommerceConfig;
+  config?: BigcommerceConfig
 }): Promise<GetProductResult<GetProductQuery>> {
   const variables: GetProductQueryVariables = {
     ...config.imageVariables,
     ...vars,
     path: slug ? `/${slug}/` : vars.path!,
-  };
+  }
   const data = await config.fetch<RecursivePartial<GetProductQuery>>(query, {
     variables,
-  });
+  })
-  const product = data.site?.route?.node;
+  const product = data.site?.route?.node
 
   if (product?.__typename === 'Product') {
     return {
       product: product as RecursiveRequired<typeof product>,
-    };
+    }
   }
 
-  return {};
+  return {}
 }
 
-export default getProduct;
+export default getProduct

lib/bigcommerce/api/utils/fetch-api.ts

@@ -1,11 +1,11 @@
-import { CommerceAPIFetchOptions } from 'lib/commerce/api';
+import { CommerceAPIFetchOptions } from 'lib/commerce/api'
-import { getConfig } from '..';
+import { getConfig } from '..'
 
 export default async function fetchAPI<Q, V = any>(
   query: string,
   { variables, preview }: CommerceAPIFetchOptions<V> = {}
 ): Promise<Q> {
-  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<Q, V = any>(
       query,
       variables,
     }),
-  });
+  })
 
-  const json = await res.json();
+  const json = await res.json()
   if (json.errors) {
-    console.error(json.errors);
+    console.error(json.errors)
-    throw new Error('Failed to fetch API');
+    throw new Error('Failed to fetch API')
   }
-  return json.data;
+  return json.data
 }

lib/bigcommerce/api/utils/types.ts

@@ -1,7 +1,7 @@
 export type RecursivePartial<T> = {
-  [P in keyof T]?: RecursivePartial<T[P]>;
+  [P in keyof T]?: RecursivePartial<T[P]>
-};
+}
 
 export type RecursiveRequired<T> = {
-  [P in keyof T]-?: RecursiveRequired<T[P]>;
+  [P in keyof T]-?: RecursiveRequired<T[P]>
-};
+}

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 <CommerceCartProvider>{children}</CommerceCartProvider>;
+  return <CommerceCartProvider>{children}</CommerceCartProvider>
 }
 
 export function useCart() {
-  return useCommerceCart<Cart>();
+  return useCommerceCart<Cart>()
 }

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();
+    const data = await res.json()
-    return data.errors[0];
+    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 }) {
     <CoreCommerceProvider connector={bigcommerce}>
       {children}
     </CoreCommerceProvider>
-  );
+  )
 }
 
-export const useCommerce = () => useCoreCommerce();
+export const useCommerce = () => useCoreCommerce()

lib/cart.js

@@ -1,105 +1,105 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback } from 'react'
-import useSWR, { mutate } from "swr";
+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")) {
+  if (res.headers.get('Content-Type')?.includes('application/json')) {
-    const data = await res.json();
+    const data = await res.json()
-    return data.errors[0];
+    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", {
+    const res = await fetch('/api/cart', {
-      method: "POST",
+      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 });
+      setStatus({ addingToCart: false })
-      return mutate("/api/cart");
+      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);
+    console.error('Adding product to cart failed with:', res.status, error)
-    setStatus({ addingToCart: false, 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 });
+      setStatus({ updatingCart: false })
-      return mutate("/api/cart");
+      return mutate('/api/cart')
     }
 
-    const error = await getError(res);
+    const error = await getError(res)
 
-    console.error("Update to cart failed with:", res.status, error);
+    console.error('Update to cart failed with:', res.status, error)
-    setStatus({ updatingCart: false, 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 }
 }

lib/commerce/api/index.ts

@@ -1,15 +1,15 @@
 export interface CommerceAPIConfig {
-  commerceUrl: string;
+  commerceUrl: string
-  apiToken: string;
+  apiToken: string
   fetch<Q, V = any>(
     query: string,
     queryData?: CommerceAPIFetchOptions<V>
-  ): Promise<Q>;
+  ): Promise<Q>
 }
 
 export interface CommerceAPIFetchOptions<V> {
-  variables?: V;
+  variables?: V
-  preview?: boolean;
+  preview?: boolean
 }
 
 // TODO: define interfaces for all the available operations

lib/commerce/cart.tsx

@@ -1,37 +1,37 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext } from 'react'
-import useSWR, { responseInterface } from 'swr';
+import useSWR, { responseInterface } from 'swr'
-import { useCommerce } from '.';
+import { useCommerce } from '.'
 
-export type Cart = any;
+export type Cart = any
 
 export type CartResponse<C extends Cart> = responseInterface<C, Error> & {
-  isEmpty: boolean;
+  isEmpty: boolean
-};
+}
 
-const CartContext = createContext<CartResponse<Cart>>(null);
+const CartContext = createContext<CartResponse<Cart>>(null)
 
 function getCartCookie() {
   // TODO: Figure how the cart should be persisted
-  return null;
+  return null
 }
 
 export function CartProvider({ children }) {
-  const { hooks, fetcher } = useCommerce<Cart>();
+  const { hooks, fetcher } = useCommerce<Cart>()
-  const { useCart } = hooks;
+  const { useCart } = hooks
-  const cartId = getCartCookie();
+  const cartId = getCartCookie()
   const response = useSWR(
     () => (cartId ? [useCart.url, useCart.query, useCart.resolver] : null),
     fetcher
-  );
+  )
-  const isEmpty = true;
+  const isEmpty = true
 
   return (
     <CartContext.Provider value={{ ...response, isEmpty }}>
       {children}
     </CartContext.Provider>
-  );
+  )
 }
 
 export function useCart<C extends Cart>() {
-  return useContext(CartContext) as CartResponse<C>;
+  return useContext(CartContext) as CartResponse<C>
 }

lib/commerce/index.tsx

@@ -1,29 +1,29 @@
-import { createContext, ReactNode, useContext } from 'react';
+import { createContext, ReactNode, useContext } from 'react'
 
-const Commerce = createContext<Connector>(null);
+const Commerce = createContext<Connector>(null)
 
 export type CommerceProps = {
-  children?: ReactNode;
+  children?: ReactNode
-  connector: Connector;
+  connector: Connector
-};
+}
 
 export type Connector = {
-  fetcher: Fetcher<any>;
+  fetcher: Fetcher<any>
-  locale: string;
+  locale: string
-};
+}
 
-export type Fetcher<T> = (...args: any) => T | Promise<T>;
+export type Fetcher<T> = (...args: any) => T | Promise<T>
 
 export function CommerceProvider({ children, connector }: CommerceProps) {
   if (!connector) {
     throw new Error(
       'CommerceProvider requires a valid headless commerce connector'
-    );
+    )
   }
 
-  return <Commerce.Provider value={connector}>{children}</Commerce.Provider>;
+  return <Commerce.Provider value={connector}>{children}</Commerce.Provider>
 }
 
 export function useCommerce<T extends Connector>() {
-  return useContext(Commerce) as T;
+  return useContext(Commerce) as T
 }

pages/_app.tsx

@@ -1,6 +1,6 @@
-import "@assets/global.css";
+import '@assets/global.css'
-import React from "react";
+import React from 'react'
-import { UIProvider } from "@components/ui/context";
+import { UIProvider } from '@components/ui/context'
 
 export default function MyApp({ Component, pageProps }) {
   return (
@@ -9,5 +9,5 @@ export default function MyApp({ Component, pageProps }) {
         <Component {...pageProps} />
       </UIProvider>
     </>
-  );
+  )
 }

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_ {
            */}
         </body>
       </Html>
-    );
+    )
   }
 }

pages/index.tsx

@@ -1,22 +1,22 @@
-import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
+import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
-import getAllProducts from "lib/bigcommerce/api/operations/get-all-products";
+import getAllProducts from 'lib/bigcommerce/api/operations/get-all-products'
-import { Layout } from "@components/core";
+import { Layout } from '@components/core'
-import { ProductGrid } from "@components/product";
+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<typeof getStaticProps>) {
-  console.log("PRODUCTS", products);
+  console.log('PRODUCTS', products)
   return (
     <Layout>
       <ProductGrid products={products} />
     </Layout>
-  );
+  )
 }

pages/product/[slug].tsx

@@ -1,14 +1,14 @@
-import { GetStaticPropsContext, InferGetStaticPropsType } from 'next';
+import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/router'
-import getProduct from 'lib/bigcommerce/api/operations/get-product';
+import getProduct from 'lib/bigcommerce/api/operations/get-product'
-import { Layout } from '@components/core';
+import { Layout } from '@components/core'
-import { ProductView } from '@components/product';
+import { ProductView } from '@components/product'
-import getAllProductPaths from '@lib/bigcommerce/api/operations/get-all-product-paths';
+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<typeof getStaticProps>) {
-  console.log('PRODUCT', product);
+  console.log('PRODUCT', product)
 
-  const router = useRouter();
+  const router = useRouter()
 
   return (
     <Layout>
@@ -59,5 +59,5 @@ export default function Home({
         <ProductView productData={productData} />
       )}
     </Layout>
-  );
+  )
 }

postcss.config.js

@@ -1,18 +1,18 @@
 module.exports = {
   plugins: [
-    "tailwindcss",
+    'tailwindcss',
-    "postcss-flexbugs-fixes",
+    '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,
         },
       },
     ],
   ],
-};
+}

tailwind.config.js

@@ -3,25 +3,25 @@ module.exports = {
     removeDeprecatedGapUtilities: true,
   },
   purge: [
-    "./components/**/*.{js,ts,jsx,tsx}",
+    './components/**/*.{js,ts,jsx,tsx}',
-    "./pages/**/*.{js,ts,jsx,tsx}",
+    './pages/**/*.{js,ts,jsx,tsx}',
-    "./ui/**/*.{js,ts,jsx,tsx}",
+    './ui/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     extend: {
       colors: {
-        "accent-1": "#FAFAFA",
+        'accent-1': '#FAFAFA',
-        "accent-4": "#888",
+        'accent-4': '#888',
-        violet: "#7928CA",
+        violet: '#7928CA',
-        pink: "#FF0080",
+        pink: '#FF0080',
-        cyan: "#50E3C2",
+        cyan: '#50E3C2',
-        blue: "#0070F3",
+        blue: '#0070F3',
       },
     },
   },
   variants: {},
-  plugins: [require("@tailwindcss/ui")],
+  plugins: [require('@tailwindcss/ui')],
   experimental: {
     applyComplexClasses: true,
   },
-};
+}