Merge branch 'master' of https://github.com/okbel/e-comm-example

components/cart/CartItem/CartItem.tsx

@@ -53,8 +53,6 @@ const CartItem = ({
     }
   }, [item.quantity])
 
-  console.log(item)
-
   return (
     <li className="flex flex-row space-x-8 py-6">
       <div className="w-12 h-12 bg-violet relative overflow-hidden">

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -27,9 +27,6 @@ const CartSidebarView: FC = () => {
 
   const items = data?.line_items.physical_items ?? []
 
-  console.log('CART', data, isEmpty)
-
-  // This should come from the API via hook I guess
   const error = null
   const success = null
 
@@ -95,7 +92,7 @@ const CartSidebarView: FC = () => {
             <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
               My Cart
             </h2>
-            <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 border-t border-gray-200">
+            <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-3 border-t border-accents-3">
               {items.map((item) => (
                 <CartItem
                   key={item.id}
@@ -107,7 +104,7 @@ const CartSidebarView: FC = () => {
           </div>
 
           <div className="flex-shrink-0 px-4  py-5 sm:px-6">
-            <div className="border-t border-gray-200">
+            <div className="border-t border-accents-3">
               <ul className="py-3">
                 <li className="flex justify-between py-1">
                   <span>Subtotal</span>
@@ -122,7 +119,7 @@ const CartSidebarView: FC = () => {
                   <span>FREE</span>
                 </li>
               </ul>
-              <div className="flex justify-between border-t border-gray-300 py-3 font-bold mb-10">
+              <div className="flex justify-between border-t border-accents-3 py-3 font-bold mb-10">
                 <span>Total</span>
                 <span>{total}</span>
               </div>

components/core/Head/Head.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react'
+import NextHead from 'next/head'
+import { DefaultSeo } from 'next-seo'
+import config from '@config/seo.json'
+
+const Head: FC = () => {
+  return (
+    <>
+      <DefaultSeo {...config} />
+      <NextHead>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="manifest" href="/site.webmanifest" key="site-manifest" />
+      </NextHead>
+    </>
+  )
+}
+
+export default Head

components/core/Head/index.ts

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

components/core/Layout/Layout.tsx

@@ -1,58 +1,40 @@
 import { FC } from 'react'
 import cn from 'classnames'
-import { ThemeProvider } from 'next-themes'
-import { SSRProvider, OverlayProvider } from 'react-aria'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import { CommerceProvider } from '@lib/bigcommerce'
 import { Navbar, Featurebar, Footer } from '@components/core'
 import { Container, Sidebar } from '@components/ui'
 import { CartSidebarView } from '@components/cart'
-import { UIProvider, useUI } from '@components/ui/context'
+import { useUI } from '@components/ui/context'
 import s from './Layout.module.css'
 
-interface LayoutProps {
+interface Props {
   pageProps: {
     pages?: Page[]
   }
 }
 
-interface Props {
+const Layout: FC<Props> = ({ children, pageProps }) => {
-  pages?: Page[]
-}
-
-const CoreLayout: FC<Props> = ({ children, pages }) => {
   const { displaySidebar, closeSidebar } = useUI()
 
   return (
-    <div className={cn(s.root)}>
+    <CommerceProvider locale="en-us">
-      <Featurebar
+      <div className={cn(s.root)}>
-        title="Free Standard Shipping on orders over $99.99"
+        <Featurebar
-        description="Due to COVID-19, some orders may experience processing and delivery delays."
+          title="Free Standard Shipping on orders over $99.99"
-      />
+          description="Due to COVID-19, some orders may experience processing and delivery delays."
-      <Container>
+        />
-        <Navbar />
+        <Container>
-      </Container>
+          <Navbar />
-      <main className="fit">{children}</main>
+        </Container>
-      <Footer pages={pages} />
+        <main className="fit">{children}</main>
-      <Sidebar show={displaySidebar} close={closeSidebar}>
+        <Footer pages={pageProps.pages} />
-        <CartSidebarView />
+        <Sidebar show={displaySidebar} close={closeSidebar}>
-      </Sidebar>
+          <CartSidebarView />
-    </div>
+        </Sidebar>
+      </div>
+    </CommerceProvider>
   )
 }
 
-const Layout: FC<LayoutProps> = ({ children, pageProps }) => (
-  <ThemeProvider>
-    <SSRProvider>
-      <OverlayProvider>
-        <CommerceProvider locale="en-us">
-          <UIProvider>
-            <CoreLayout pages={pageProps.pages}>{children}</CoreLayout>
-          </UIProvider>
-        </CommerceProvider>
-      </OverlayProvider>
-    </SSRProvider>
-  </ThemeProvider>
-)
-
 export default Layout

components/core/index.ts

@@ -6,3 +6,4 @@ export { default as Navbar } from './Navbar'
 export { default as Searchbar } from './Searchbar'
 export { default as UserNav } from './UserNav'
 export { default as Toggle } from './Toggle'
+export { default as Head } from './Head'

components/product/ProductCard/ProductCard.module.css

@@ -6,31 +6,31 @@
       @apply scale-75;
     }
 
-    & .productTitle,
+    & .productTitle > span,
     & .productPrice,
     & .wishlistButton {
       @apply bg-secondary text-secondary;
     }
 
-    &:nth-child(6n + 1) .productTitle,
+    &:nth-child(6n + 1) .productTitle > span,
     &:nth-child(6n + 1) .productPrice,
     &:nth-child(6n + 1) .wishlistButton {
       @apply bg-violet text-white;
     }
 
-    &:nth-child(6n + 5) .productTitle,
+    &:nth-child(6n + 5) .productTitle > span,
     &:nth-child(6n + 5) .productPrice,
     &:nth-child(6n + 5) .wishlistButton {
       @apply bg-blue text-white;
     }
 
-    &:nth-child(6n + 3) .productTitle,
+    &:nth-child(6n + 3) .productTitle > span,
     &:nth-child(6n + 3) .productPrice,
     &:nth-child(6n + 3) .wishlistButton {
       @apply bg-pink text-white;
     }
 
-    &:nth-child(6n + 6) .productTitle,
+    &:nth-child(6n + 6) .productTitle > span,
     &:nth-child(6n + 6) .productPrice,
     &:nth-child(6n + 6) .wishlistButton {
       @apply bg-cyan text-white;
@@ -66,29 +66,13 @@
 }
 
 .productTitle {
-  /* @apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex; */
+  line-height: 51px;
-  /* max-width: calc(100% - 50px); */
+  width: 200px;
-  line-height: 1.3;
-  padding: 2px 0;
-  border-left: 20px solid #c0c;
-  width: 400px;
-  margin: 20px auto;
 
-  & h2 {
+  & span {
-    background-color: #c0c;
+    @apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold;
-    padding: 4px 0;
+    box-decoration-break: clone;
-    color: #fff;
+    -webkit-box-decoration-break: clone;
-    display: inline;
-    margin: 0;
-
-    & .strong {
-      position: relative;
-      left: -10px;
-    }
-  }
-
-  @screen lg {
-    @apply text-2xl;
   }
 }
 

components/product/ProductCard/ProductCard.tsx

@@ -46,17 +46,11 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
         </div>
         <div className={s.squareBg} />
         <div className="flex flex-row justify-between box-border w-full z-10 relative">
-          <div className="flex flex-col flex-1 overflow-hidden">
+          <div className="">
-            <div className="flex-1">
+            <div className={s.productTitle}>
-              <span className={s.productTitle}>
+              <span>{p.name}</span>
-                <h2>
-                  <strong>{p.name}</strong>
-                </h2>
-              </span>
-            </div>
-            <div className="flex-0">
-              <div className={s.productPrice}>${p.prices.price.value}</div>
             </div>
+            <span className={s.productPrice}>${p.prices.price.value}</span>
           </div>
           <div className={s.wishlistButton}>
             <Heart />

components/ui/context.tsx

@@ -1,4 +1,6 @@
 import React, { FC } from 'react'
+import { ThemeProvider } from 'next-themes'
+import { SSRProvider, OverlayProvider } from 'react-aria'
 
 export interface State {
   displaySidebar: boolean
@@ -63,3 +65,13 @@ function uiReducer(state: State, action: Action) {
     }
   }
 }
+
+export const ManagedUIContext: FC = ({ children }) => (
+  <UIProvider>
+    <ThemeProvider>
+      <SSRProvider>
+        <OverlayProvider>{children}</OverlayProvider>
+      </SSRProvider>
+    </ThemeProvider>
+  </UIProvider>
+)

config.json

@@ -1,18 +0,0 @@
-{
-  "seo": {
-    "title": "ACME Storefront | Powered by Next.js Commerce",
-    "titleTemplate": "%s - ACME Storefront",
-    "description": "Next.js Commerce -> https://www.nextjs.org/commerce",
-    "openGraph": {
-      "type": "website",
-      "locale": "en_IE",
-      "url": "https://nextjs.org/commerce",
-      "site_name": "Next.js Commerce"
-    },
-    "twitter": {
-      "handle": "@nextjs",
-      "site": "@nextjs",
-      "cardType": "summary_large_image"
-    }
-  }
-}

config/seo.json

@@ -0,0 +1,16 @@
+{
+  "title": "ACME Storefront | Powered by Next.js Commerce",
+  "titleTemplate": "%s - ACME Storefront",
+  "description": "Next.js Commerce -> https://www.nextjs.org/commerce",
+  "openGraph": {
+    "type": "website",
+    "locale": "en_IE",
+    "url": "https://nextjs.org/commerce",
+    "site_name": "Next.js Commerce"
+  },
+  "twitter": {
+    "handle": "@nextjs",
+    "site": "@nextjs",
+    "cardType": "summary_large_image"
+  }
+}

pages/_app.tsx

@@ -3,11 +3,10 @@ import '@assets/tailwind.css'
 import '@assets/utils.css'
 import 'animate.css'
 import { FC } from 'react'
-import { DefaultSeo } from 'next-seo'
 import type { AppProps } from 'next/app'
-import Head from 'next/head'
 
-import config from '../config.json'
+import { ManagedUIContext } from '@components/ui/context'
+import { Head } from '@components/core'
 
 const Noop: FC = ({ children }) => <>{children}</>
 
@@ -16,14 +15,12 @@ export default function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <>
-      <Head>
+      <Head />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <ManagedUIContext>
-        <link rel="manifest" href="/site.webmanifest" key="site-manifest" />
+        <Layout pageProps={pageProps}>
-      </Head>
+          <Component {...pageProps} />
-      <DefaultSeo {...config.seo} />
+        </Layout>
-      <Layout pageProps={pageProps}>
+      </ManagedUIContext>
-        <Component {...pageProps} />
-      </Layout>
     </>
   )
 }

tsconfig.json

@@ -18,7 +18,8 @@
       "@lib/*": ["lib/*"],
       "@assets/*": ["assets/*"],
       "@components/*": ["components/*"],
-      "@utils/*": ["utils/*"]
+      "@utils/*": ["utils/*"],
+      "@config/*": ["config/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],