Demonstrate cart functionality

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}

cart/components/Cart.tsx

@@ -0,0 +1,92 @@
+import React, { Component } from "react";
+import Button from "@panter/core/components/Button";
+
+class Cart extends Component {
+  state = {
+    items: [
+      {
+        name: "Short coat",
+        price: 229.49,
+        quantity: 1,
+        image: "product-1.jpeg",
+        size: "44"
+      }
+    ]
+  };
+
+  incrementQuantity = index => {
+    const item = this.state.items[index];
+    const updatedItem = { ...item, quantity: item.quantity + 1 };
+    this.setState({ items: [updatedItem] });
+  };
+
+  decrementQuantity = index => {
+    const item = this.state.items[index];
+    const updatedItem = { ...item, quantity: item.quantity - 1 };
+    this.setState({ items: [updatedItem] });
+  };
+
+  render() {
+    const { items } = this.state;
+
+    return (
+      <div>
+        <table cellPadding="0" cellSpacing="0">
+          <thead>
+            <tr>
+              <th>Image</th>
+              <th>Product</th>
+              <th>Size</th>
+              <th>Price</th>
+              <th>Quantity</th>
+              <th>Total</th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.map(({ image, name, size, price, quantity }, index) => (
+              <tr key={index}>
+                <td width="300">
+                  <img src={`/static/images/${image}`} width="200" />
+                </td>
+                <td>{name}</td>
+                <td>{size}</td>
+                <td>{price}</td>
+                <td>
+                  {quantity}
+                  <button onClick={() => this.incrementQuantity(index)}>
+                    +
+                  </button>
+                  <button onClick={() => this.decrementQuantity(index)}>
+                    -
+                  </button>
+                </td>
+                <td>{price * quantity}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        <Button>Go to checkout</Button>
+
+        <style jsx>{`
+          div {
+            text-align: center;
+          }
+          table {
+            width: 100%;
+            text-align: left;
+          }
+          td {
+            padding-top: 12px;
+          }
+          th {
+            padding-bottom: 12px;
+            border-bottom: 1px solid gray;
+          }
+        `}</style>
+      </div>
+    );
+  }
+}
+
+export default Cart;

cart/components/Title.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+const Title = ({ children }) => {
+  return (
+    <h1>
+      {children}
+      <style jsx>{`
+        h1 {
+          text-align: center;
+          padding-bottom: 24px;
+        }
+      `}</style>
+    </h1>
+  );
+};
+
+export default Title;

cart/next.config.js

@@ -8,8 +8,8 @@ const withTypescript = require("@zeit/next-typescript");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 
 // Update these to match your package scope name.
-const internalNodeModulesRegExp = /@tomaswitek(?!.*node_modules)/;
-const externalNodeModulesRegExp = /node_modules(?!\/@tomaswitek(?!.*node_modules))/;
+const internalNodeModulesRegExp = /@panter(?!.*node_modules)/;
+const externalNodeModulesRegExp = /node_modules(?!\/@panter(?!.*node_modules))/;
 
 module.exports = withBundleAnalyzer(
   withTypescript(

cart/package.json

@@ -5,7 +5,8 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@tomaswitek/core": "1.0.0",
+    "@panter/core": "1.0.0",
+    "@types/styled-jsx": "^2.2.3",
     "decimal.js": "^10.0.0",
     "next": "^5.1.0",
     "react": "^16.3.1",

cart/pages/index.tsx

@@ -1,17 +1,14 @@
 import React from "react";
-import { Components } from "@tomaswitek/core";
-
-const { Header, Footer } = Components;
-// FYI you can also use separate import
-//import Header from "@tomaswitek/core/components/Header";
+import Layout from "@panter/core/components/Layout";
+import Title from "../components/Title";
+import Cart from "../components/Cart";
 
 const index = () => {
   return (
-    <div>
-      <Header />
-      Cart App
-      <Footer />
-    </div>
+    <Layout>
+      <Title>Your Cart</Title>
+      <Cart />
+    </Layout>
   );
 };
 

core/components/Button.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const Button = ({ children }) => {
+  return (
+    <span>
+      {children}
+      <style jsx>{`
+        span {
+          padding: 12px;
+          background: #67b88f;
+          color: white;
+          text-transform: uppercase;
+          cursor: pointer;
+        }
+      `}</style>
+    </span>
+  );
+};
+
+export default Button;

core/components/Header.tsx

@@ -1,7 +1,62 @@
 import React from "react";
+import Logo from "./Logo";
 
-const Header = () => {
-  return <div>Header</div>;
-};
+const Header = () => (
+  <div>
+    <Logo />
+    <ul>
+      <li>
+        <a>Sale</a>
+      </li>
+      <li>
+        <a>Female</a>
+      </li>
+      <li>
+        <a>Male</a>
+      </li>
+      <li>
+        <a>Home & Living</a>
+      </li>
+      <li>
+        <a>Children</a>
+      </li>
+      <li>
+        <a>Beauty</a>
+      </li>
+      <li>
+        <a>Delicatessa</a>
+      </li>
+      <li>
+        <a>Wine & drinks</a>
+      </li>
+      <li>
+        <a>Gifts</a>
+      </li>
+    </ul>
+
+    <style jsx>{`
+      div {
+        background: black;
+        color: white;
+        padding: 24px;
+      }
+      ul {
+        display: flex;
+        padding: 0;
+        margin: 24px 0 0 0;
+        justify-content: center;
+      }
+      li {
+        list-style: none;
+        text-transform: uppercase;
+        padding: 10px;
+      }
+      li:hover {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    `}</style>
+  </div>
+);
 
 export default Header;

core/components/Layout.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import Header from "./Header";
+
+const Layout = ({ children }) => {
+  return (
+    <div>
+      <Header />
+      <div className="layout">{children}</div>
+      <style jsx global>{`
+        body {
+          margin: 0;
+          padding: 0;
+        }
+      `}</style>
+
+      <style jsx>{`
+        .layout {
+          padding: 24px 48px;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Layout;

core/components/Logo.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const Logo = () => {
+  return (
+    <div>
+      Shop
+      <style jsx>{`
+        div {
+          color: white;
+          text-transform: uppercase;
+          font-weight: bold;
+          font-size: 40px;
+          text-align: center;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Logo;

core/components/index.ts

@@ -1,4 +1,4 @@
-import Header from "./Header";
-import Footer from "./Footer";
+import Layout from "./Layout";
+import Button from "./Button";
 
-export default { Header, Footer };
+export default { Layout, Button };

core/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@tomaswitek/core",
+  "name": "@panter/core",
   "version": "1.0.0",
   "main": "index.js",
   "license": "MIT"

yarn.lock

@@ -26,6 +26,12 @@
   dependencies:
     csstype "^2.2.0"
 
+"@types/styled-jsx@^2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@types/styled-jsx/-/styled-jsx-2.2.3.tgz#c97ed7ad8d7b4e6ffbe84e2d4c24a49eb1b9fe54"
+  dependencies:
+    "@types/react" "*"
+
 "@zeit/[email protected]":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@zeit/check-updates/-/check-updates-1.1.1.tgz#1bee858fd3f9b8633b0fc23dff53cb17343331c0"