cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Apply prettier over all files

Browse Source
This commit is contained in:
Luis Alvarez 2020-10-01 20:40:40 -05:00
parent 2314ad760a
commit 0ef6449aff
72 changed files with 648 additions and 652 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.prettierignore
View File

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

2
README.md
View File

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

252
assets/font.css
View File

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

8
assets/global.css
View File

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

18
components/cart/CartSidebarView/CartSidebarView.tsx
View File

@ -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 (
<>
<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

2
components/cart/CartSidebarView/index.ts
View File

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

2
components/cart/index.ts
View File

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

18
components/core/Avatar/Avatar.tsx
View File

@ -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<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

2
components/core/Avatar/index.ts
View File

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

2
components/core/Featurebar/Featurebar.module.css
View File

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

20
components/core/Featurebar/Featurebar.tsx
View File

@ -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<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

2
components/core/Featurebar/index.ts
View File

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

20
components/core/Footer/Footer.tsx
View File

@ -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<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

2
components/core/Footer/index.ts
View File

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

28
components/core/Layout/Layout.tsx
View File

@ -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<Props> = ({ className, children }) => {
const rootClassName = cn(s.root, className);
const { displaySidebar } = useUI();
const rootClassName = cn(s.root, className)
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

2
components/core/Layout/index.ts
View File

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

22
components/core/Navbar/Navbar.tsx
View File

@ -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<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

2
components/core/Navbar/index.ts
View File

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

18
components/core/Searchbar/Searchbar.tsx
View File

@ -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<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

2
components/core/Searchbar/index.ts
View File

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

24
components/core/UserNav/UserNav.tsx
View File

@ -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<Props> = ({ className }) => {
const rootClassName = cn(s.root, className);
const { openSidebar } = useUI();
const rootClassName = cn(s.root, className)
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

2
components/core/UserNav/index.ts
View File

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

14
components/core/index.ts
View File

@ -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'

8
components/icon/Bag.tsx
View File

@ -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

8
components/icon/Cross.tsx
View File

@ -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

8
components/icon/Heart.tsx
View File

@ -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

8
components/icon/Trash.tsx
View File

@ -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

8
components/icon/index.ts
View File

@ -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'

20
components/product/ProductCard/ProductCard.tsx
View File

@ -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<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

2
components/product/ProductCard/index.ts
View File

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

22
components/product/ProductGrid/ProductGrid.tsx
View File

@ -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<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

2
components/product/ProductGrid/index.ts
View File

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

26
components/product/ProductView/ProductView.tsx
View File

@ -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<Props> = ({ productData, className }) => {
const rootClassName = cn(s.root, className);
console.log(productData);
const rootClassName = cn(s.root, className)
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

2
components/product/ProductView/index.ts
View File

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

34
components/product/Swatch/Swatch.tsx
View File

@ -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<Props> = ({
@ -22,14 +22,14 @@ const Swatch: FunctionComponent<Props> = ({
{
[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 <span className={rootClassName}>{size ? size : null}</span>;
};
)
return <span className={rootClassName}>{size ? size : null}</span>
}
export default Swatch;
export default Swatch

2
components/product/Swatch/index.ts
View File

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

8
components/product/index.ts
View File

@ -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'

4
components/product/types.ts
View File

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

28
components/ui/Button/Button.tsx
View File

@ -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<HTMLButtonElement> {
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<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>
);
)
}
}

2
components/ui/Button/index.ts
View File

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

34
components/ui/ClickOutside/ClickOutside.tsx
View File

@ -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<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("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,
// });

2
components/ui/ClickOutside/index.ts
View File

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

24
components/ui/Container/Container.tsx
View File

@ -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<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

2
components/ui/Container/index.ts
View File

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

4
components/ui/Logo/Logo.tsx
View File

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

2
components/ui/Logo/index.ts
View File

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

18
components/ui/Sidebar/Sidebar.tsx
View File

@ -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<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

2
components/ui/Sidebar/index.ts
View File

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

18
components/ui/_BLANK/Featurebar.tsx
View File

@ -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<Props> = ({ children, className }) => {
const rootClassName = cn(s.root, className);
return <div className={rootClassName}>{children}</div>;
};
const rootClassName = cn(s.root, className)
return <div className={rootClassName}>{children}</div>
}
export default Featurebar;
export default Featurebar

2
components/ui/_BLANK/index.ts
View File

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

42
components/ui/context.tsx
View File

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

8
components/ui/index.ts
View File

@ -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'

2
components/ui/types.ts
View File

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

4
lib/bigcommerce/api/fragments/product.ts
View File

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

50
lib/bigcommerce/api/index.ts
View File

@ -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<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)
}

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

@ -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<T> {
products: T extends GetAllProductPathsQuery
? NonNullable<T['site']['products']['edges']>
: unknown;
: unknown
}
async function getAllProductPaths(opts?: {
query?: string;
config?: BigcommerceConfig;
}): Promise<GetAllProductPathsResult<GetAllProductPathsQuery>>;
query?: string
config?: BigcommerceConfig
}): Promise<GetAllProductPathsResult<GetAllProductPathsQuery>>
async function getAllProductPaths<T, V = any>(opts: {
query: string;
config?: BigcommerceConfig;
}): Promise<GetAllProductPathsResult<T>>;
query: string
config?: BigcommerceConfig
}): Promise<GetAllProductPathsResult<T>>
async function getAllProductPaths({
query = getAllProductPathsQuery,
config = getConfig(),
}: {
query?: string;
config?: BigcommerceConfig;
query?: string
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

51
lib/bigcommerce/api/operations/get-all-products.ts
View File

@ -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<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;
variables?: ProductVariables;
config?: BigcommerceConfig;
}): Promise<GetAllProductsResult<GetAllProductsQuery>>;
query?: string
variables?: ProductVariables
config?: BigcommerceConfig
}): Promise<GetAllProductsResult<GetAllProductsQuery>>
async function getAllProducts<T, V = any>(opts: {
query: string;
variables?: V;
config?: BigcommerceConfig;
}): Promise<GetAllProductsResult<T>>;
query: string
variables?: V
config?: BigcommerceConfig
}): Promise<GetAllProductsResult<T>>
async function getAllProducts({
query = getAllProductsQuery,
variables: vars,
config = getConfig(),
}: {
query?: string;
variables?: ProductVariables;
config?: BigcommerceConfig;
query?: string
variables?: ProductVariables
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

48
lib/bigcommerce/api/operations/get-product.ts
View File

@ -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<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;
variables: ProductVariables;
config?: BigcommerceConfig;
}): Promise<GetProductResult<GetProductQuery>>;
query?: string
variables: ProductVariables
config?: BigcommerceConfig
}): Promise<GetProductResult<GetProductQuery>>
async function getProduct<T, V = any>(opts: {
query: string;
variables: V;
config?: BigcommerceConfig;
}): Promise<GetProductResult<T>>;
query: string
variables: V
config?: BigcommerceConfig
}): Promise<GetProductResult<T>>
async function getProduct({
query = getProductQuery,
variables: { slug, ...vars },
config = getConfig(),
}: {
query?: string;
variables: ProductVariables;
config?: BigcommerceConfig;
query?: string
variables: ProductVariables
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

16
lib/bigcommerce/api/utils/fetch-api.ts
View File

@ -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<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);
throw new Error('Failed to fetch API');
console.error(json.errors)
throw new Error('Failed to fetch API')
}
return json.data;
return json.data
}

8
lib/bigcommerce/api/utils/types.ts
View File

@ -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]>
}

8
lib/bigcommerce/cart.tsx
View File

@ -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>()
}

24
lib/bigcommerce/index.tsx
View File

@ -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 }) {
<CoreCommerceProvider connector={bigcommerce}>
{children}
</CoreCommerceProvider>
);
)
}
export const useCommerce = () => useCoreCommerce();
export const useCommerce = () => useCoreCommerce()

84
lib/cart.js
View File

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

10
lib/commerce/api/index.ts
View File

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

30
lib/commerce/cart.tsx
View File

@ -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<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 { useCart } = hooks;
const cartId = getCartCookie();
const { hooks, fetcher } = useCommerce<Cart>()
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 (
<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>
}

24
lib/commerce/index.tsx
View File

@ -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;
connector: Connector;
};
children?: ReactNode
connector: Connector
}
export type Connector = {
fetcher: Fetcher<any>;
locale: string;
};
fetcher: Fetcher<any>
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
}

8
pages/_app.tsx
View File

@ -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 }) {
<Component {...pageProps} />
</UIProvider>
</>
);
)
}

4
pages/_document.tsx
View File

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

16
pages/index.tsx
View File

@ -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<typeof getStaticProps>) {
console.log("PRODUCTS", products);
console.log('PRODUCTS', products)
return (
<Layout>
<ProductGrid products={products} />
</Layout>
);
)
}

28
pages/product/[slug].tsx
View File

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

12
postcss.config.js
View File

@ -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,
},
},
],
],
};
}

22
tailwind.config.js
View File

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