ProductGrid

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -38,7 +38,7 @@ const CartSidebarView: FunctionComponent = () => {
                 <span>-</span>
                 <input
                   className="w-6 border-gray-300 border mx-3 rounded text-center text-sm"
-                  value="1"
+                  defaultValue="1"
                 />
                 <span>+</span>
               </div>

components/core/Layout/Layout.tsx

@@ -13,7 +13,7 @@ interface Props {
 
 const Layout: FunctionComponent<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className);
-  const { displaySidebar, closeSidebar } = useUI();
+  const { displaySidebar } = useUI();
   return (
     <div className={rootClassName}>
       <Featurebar
@@ -25,7 +25,7 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
         <main className="h-screen">{children}</main>
       </Container>
       {displaySidebar && (
-        <Sidebar closeSidebar={closeSidebar}>
+        <Sidebar>
           <CartSidebarView />
         </Sidebar>
       )}

components/icon/Cross.tsx

@@ -4,9 +4,9 @@ const Cross = ({ ...props }) => {
   return (
     <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
       <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
         d="M6 18L18 6M6 6l12 12"
       />
     </svg>

components/product/ProductCard/ProductCard.module.css

@@ -0,0 +1,3 @@
+.root {
+  @apply flex flex-row px-2;
+}

components/product/ProductCard/ProductCard.tsx

@@ -0,0 +1,29 @@
+import cn from "classnames";
+import s from "./ProductCard.module.css";
+import React, { FunctionComponent } from "react";
+
+interface Props {
+  className?: string;
+  children?: any;
+}
+
+const ProductCard: FunctionComponent<Props> = ({ className }) => {
+  const rootClassName = cn(s.root, className);
+  return (
+    <div className={rootClassName}>
+      <div className="absolute">
+        <h1 className="px-8 py-2 bg-violet text-white font-bold text-3xl">
+          {/* {productData.title} */}
+        </h1>
+        <div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
+          {/* {productData.price} */}
+        </div>
+      </div>
+      <div className="flex-1 h-full p-24">
+        <div className="bg-violet h-full"></div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductCard;

components/product/ProductCard/index.ts

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

components/product/ProductGrid/ProductGrid.module.css

@@ -0,0 +1,4 @@
+.root {
+  @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-4 w-full h-96;
+  min-height: calc((100vh - 80px - 56px) * 2);
+}

components/product/ProductGrid/ProductGrid.tsx

@@ -0,0 +1,25 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+import s from "./ProductGrid.module.css";
+
+interface Props {
+  className?: string;
+  children?: any;
+  products: [any];
+}
+
+const ProductView: FunctionComponent<Props> = ({ products, 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>
+      <div className="row-span-1 lg:col-span-1 bg-black h-full"></div>
+      <div className="row-span-1 lg:col-span-1 bg-pink"></div>
+      <div className="row-span-1 lg:col-span-1 bg-black h-full"></div>
+      <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;

components/product/ProductGrid/index.ts

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

components/product/ProductView/ProductView.tsx

@@ -3,14 +3,6 @@ import React, { FunctionComponent } from "react";
 import s from "./ProductView.module.css";
 import { Button } from "@components/ui";
 import { Swatch } from "@components/product";
-import { Colors } from "@components/types";
-interface ProductData {
-  title: string;
-  price: string;
-  description: string;
-  colors: [Colors];
-  sizes: [string];
-}
 
 interface Props {
   className?: string;

components/product/Swatch/Swatch.tsx

@@ -1,7 +1,7 @@
 import cn from "classnames";
 import React, { FunctionComponent } from "react";
 import s from "./Swatch.module.css";
-import { Colors } from "@components/types";
+import { Colors } from "@components/ui/types";
 
 interface Props {
   className?: string;

components/product/index.ts

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

components/product/types.ts

@@ -0,0 +1,10 @@
+import { Colors } from "@components/ui/types";
+export { Product } from "@lib/bigcommerce";
+
+// export type ProductData = {
+//   title: string;
+//   price: string;
+//   description: string;
+//   colors: [Colors];
+//   sizes: [string];
+// };

components/ui/ClickOutside/ClickOutside.tsx

@@ -4,35 +4,48 @@ import React, {
   useEffect,
   useRef,
 } from "react";
-import { findDOMNode } from "react-dom";
+
+import { Component } from "react";
+import PropTypes from "prop-types";
 
 export interface ClickOutsideProps {
   onClickOutside: (e?: MouseEvent) => void;
   children: React.ReactNode | any;
+  render: () => void;
 }
 
-const ClickOutside: FunctionComponent<ClickOutsideProps> = ({
-  children,
-  onClickOutside,
-}) => {
-  let node = useRef(null);
+export default class ClickOutside extends Component<ClickOutsideProps> {
+  public domNode: Element | null = null;
 
-  const handleClick = (e: MouseEvent) => {
-    console.log("eeee");
-    if (!e || !node.current.contains(e.target as HTMLInputElement)) {
-      console.log("eeee");
-      // onClickOutside && onClickOutside(e);
+  handleRef = (element) => {
+    this.domNode = element;
+  };
+
+  public componentDidMount() {
+    document.addEventListener("click", this.handleClick, true);
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener("mousedown", this.handleClick, true);
+    document.removeEventListener("touchstart", this.handleClick, true);
+  }
+
+  public handleClick = (event) => {
+    function hasParent(element, root) {
+      return root && root.contains(element);
+    }
+
+    if (!hasParent(event.target, this.domNode)) {
+      if (typeof this.props.onClickOutside === "function") {
+        this.props.onClickOutside(event);
+      }
     }
   };
 
-  useEffect(() => {
-    document.addEventListener("click", handleClick, true);
-    return () => {
-      document.removeEventListener("click", handleClick);
-    };
-  });
-
-  return children;
-};
-
-export default ClickOutside;
+  render() {
+    return null;
+    // return this.props.render({
+    //   innerRef: this.handleRef,
+    // });
+  }
+}

components/ui/Sidebar/Sidebar.tsx

@@ -5,21 +5,13 @@ import s from "./Sidebar.module.css";
 interface Props {
   className?: string;
   children?: any;
-  closeSidebar: () => void;
 }
 
-const Sidebar: FunctionComponent<Props> = ({
-  className,
-  children,
-  closeSidebar,
-}) => {
+const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className);
   return (
     <div className={rootClassName}>
-      <div
-        className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25"
-        onClick={closeSidebar}
-      >
+      <div className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25">
         <div className="absolute inset-0 overflow-hidden">
           <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 ">
             <div className="w-screen max-w-2xl">

components/ui/index.ts

@@ -2,4 +2,3 @@ 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 ClickOutside } from "./ClickOutside";

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

@@ -1,9 +1,9 @@
 import {
   GetAllProductsQuery,
   GetAllProductsQueryVariables,
-} from 'lib/bigcommerce/schema';
-import { getConfig, Images, ProductImageVariables } from '..';
-import { RecursivePartial } from '../types';
+} from "lib/bigcommerce/schema";
+import { getConfig, Images, ProductImageVariables } from "..";
+import { RecursivePartial } from "../types";
 
 export const getAllProductsQuery = /* GraphQL */ `
   query getAllProducts(
@@ -104,7 +104,7 @@ export const getAllProductsQuery = /* GraphQL */ `
 
 export interface GetAllProductsResult<T> {
   products: T extends GetAllProductsQuery
-    ? T['site']['products']['edges']
+    ? T["site"]["products"]["edges"]
     : unknown;
 }
 

pages/index.tsx

@@ -1,10 +1,10 @@
-import { GetStaticPropsContext, InferGetStaticPropsType } from 'next';
-import getAllProducts from 'lib/bigcommerce/api/operations/get-all-products';
-import { Layout } from '@components/core';
+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();
-
   return {
     props: { products },
   };
@@ -13,15 +13,10 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
 export default function Home({
   products,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  console.log('PRODUCTS', products);
-
+  console.log("PRODUCTS", products);
   return (
     <Layout>
-      <div className="h-full grid grid-cols-1 h-full lg:grid-cols-3 lg:grid-rows-2">
-        <div className="lg:row-span-2 lg:col-span-2 bg-violet h-full"></div>
-        <div className="lg:row-span-1 lg:col-span-1 bg-black h-full"></div>
-        <div className="lg:row-span-1 lg:col-span-1 bg-pink"></div>
-      </div>
+      <ProductGrid products={products} />
     </Layout>
   );
 }

tailwind.config.js

@@ -15,6 +15,7 @@ module.exports = {
         violet: "#7928CA",
         pink: "#FF0080",
         cyan: "#50E3C2",
+        blue: "#0070F3",
       },
     },
   },

tsconfig.json

@@ -15,8 +15,9 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "paths": {
-      "@components/*": ["components/*"],
-      "@assets/*": ["assets/*"]
+      "@lib/*": ["lib/*"],
+      "@assets/*": ["assets/*"],
+      "@components/*": ["components/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],