Add UI Design

This adds some color and layout to our shop, using ChakraUI. Issue: #8
electricmonk · Apr 12, 2022 · 4beec1a · 4beec1a
1 parent cec614e
commit 4beec1a
Show file tree

Hide file tree

Showing 12 changed files with 2,333 additions and 147 deletions.
diff --git a/packages/client/index.html b/packages/client/index.html
@@ -5,7 +5,5 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="./dist/bundle.js"></script>
-
   </body>
 </html>
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -29,11 +29,19 @@
   },
   "dependencies": {
     "@ts-react-tdd/server": "1.0.0",
+    "@chakra-ui/icons": "^1.1.7",
+    "@chakra-ui/react": "^1.8.8",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "framer-motion": "^6",
     "axios": "^0.26.0",
     "js-cookie": "^3.0.1",
     "nanoid": "^3.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.2"
+  },
+  "prettier": {
+    "printWidth": 120
   }
 }
diff --git a/packages/client/src/components/App.tsx b/packages/client/src/components/App.tsx
@@ -1,37 +1,36 @@
-import React, {useEffect, useState} from "react";
-import {Route, Routes} from "react-router-dom";
-import {Shop} from "./Shop";
+import React, { useEffect, useState } from "react";
+import { Route, Routes } from "react-router-dom";
+import { Shop } from "./Shop";
 import Cookies from "js-cookie";
-import {CartAdapter} from "../adapters/cart";
-import {Cart} from "./Cart";
-import {ProductCatalog} from "../adapters/productCatalog";
-import {OrderSummary} from "./OrderSummary";
-import {OrderAdapter} from "../adapters/order";
+import { CartAdapter } from "../adapters/cart";
+import { Cart } from "./Cart";
+import { ProductCatalog } from "../adapters/productCatalog";
+import { OrderSummary } from "./OrderSummary";
+import { OrderAdapter } from "../adapters/order";
 
 interface AppProps {
-    cartAdapter: CartAdapter,
-    catalog: ProductCatalog,
-    orderAdapter: OrderAdapter
-};
-
-export const App: React.FC<AppProps> = ({cartAdapter, catalog, orderAdapter}) => {
+  cartAdapter: CartAdapter;
+  catalog: ProductCatalog;
+  orderAdapter: OrderAdapter;
+}
 
-    const [cartId, setCartId] = useState<string | null>(null);
-    useEffect(() => {
-        setCartId(new Date().getTime().toString());
-    }, []);
+export const App: React.FC<AppProps> = ({ cartAdapter, catalog, orderAdapter }) => {
+  const [cartId, setCartId] = useState<string | null>(null);
+  useEffect(() => {
+    setCartId(new Date().getTime().toString());
+  }, []);
 
-    useEffect(() => {
-        if (cartId) {
-            Cookies.set("cartId", cartId);
-        }
-    }, [cartId]);
+  useEffect(() => {
+    if (cartId) {
+      Cookies.set("cartId", cartId);
+    }
+  }, [cartId]);
 
-    return <Routes>
-        <Route path="/" element={<Shop cartAdapter={cartAdapter} cartId={cartId!}
-                                       productCatalog={catalog}/>}/>
-        <Route path="/cart" element={<Cart cartAdapter={cartAdapter} cartId={cartId!}/>}/>
-        <Route path="/order-summary/:orderId" element={<OrderSummary orderAdapter={orderAdapter}/>}/>
+  return (
+    <Routes>
+      <Route path="/" element={<Shop cartAdapter={cartAdapter} cartId={cartId!} productCatalog={catalog} />} />
+      <Route path="/cart" element={<Cart cartAdapter={cartAdapter} cartId={cartId!} />} />
+      <Route path="/order-summary/:orderId" element={<OrderSummary orderAdapter={orderAdapter} />} />
     </Routes>
-}
-
+  );
+};
diff --git a/packages/client/src/components/Cart.tsx b/packages/client/src/components/Cart.tsx
@@ -1,22 +1,26 @@
-import {CartAdapter} from "../adapters/cart";
+import { CartAdapter } from "../adapters/cart";
 import React from "react";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 interface CartProps {
-    cartAdapter: CartAdapter;
-    cartId: string;
-
+  cartAdapter: CartAdapter;
+  cartId: string;
 }
 
-export const Cart: React.FC<CartProps> = ({cartId, cartAdapter}) => {
-    const navigate = useNavigate();
+export const Cart: React.FC<CartProps> = ({ cartId, cartAdapter }) => {
+  const navigate = useNavigate();
 
-    const checkout = async () => {
-         const orderId = await cartAdapter.checkout(cartId)
-        navigate("/order-summary/" + orderId)
-    }
+  const checkout = async () => {
+    const orderId = await cartAdapter.checkout(cartId);
+    navigate("/order-summary/" + orderId);
+  };
 
-    return <section>
-        <button aria-label="Checkout" role="button" onClick={checkout}>Checkout</button>
+  return (
+    <section>
+      <button aria-label="Checkout" role="button" onClick={checkout}>
+        Checkout
+      </button>
     </section>
-}
+  );
+};
+
diff --git a/packages/client/src/components/ProductItem.tsx b/packages/client/src/components/ProductItem.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { StarIcon } from "@chakra-ui/icons";
+import { Badge, Box, Image } from "@chakra-ui/react";
+
+interface ProductItemProps {
+  title: string;
+  imageUrl: string;
+}
+
+export const ProductItem: React.FC<ProductItemProps> = ({ title, imageUrl }) => {
+  const property = {
+    //imageUrl: "https://bit.ly/2Z4KKcF",
+    imageAlt: "Rear view of modern home with pool",
+    beds: 3,
+    baths: 2,
+    //title: "Modern home in city center in the heart of historic Los Angeles",
+    formattedPrice: "$1,900.00",
+    reviewCount: 34,
+    rating: 4,
+  };
+
+  return (
+    <Box maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden" padding={10} width={250}>
+      <Image maxHeight={250} src={imageUrl} alt={title} />
+
+      <Box p="6">
+        <Box display="flex" alignItems="baseline">
+          <Badge borderRadius="full" px="2" colorScheme="teal">
+            New
+          </Badge>
+          <Box
+            color="gray.500"
+            fontWeight="semibold"
+            letterSpacing="wide"
+            fontSize="xs"
+            textTransform="uppercase"
+            ml="2"
+          >
+            {property.beds} beds &bull; {property.baths} baths
+          </Box>
+        </Box>
+
+        <Box mt="1" fontWeight="semibold" as="h4" lineHeight="tight" isTruncated>
+          {title}
+        </Box>
+        <Box>
+          {property.formattedPrice}
+          <Box as="span" color="gray.600" fontSize="sm">
+            / wk
+          </Box>
+        </Box>
+
+        <Box display="flex" mt="2" alignItems="center">
+          {Array(5)
+            .fill("")
+            .map((_, i) => (
+              <StarIcon key={i} color={i < property.rating ? "teal.500" : "gray.300"} />
+            ))}
+          <Box as="span" ml="2" color="gray.600" fontSize="sm">
+            {property.reviewCount} reviews
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
diff --git a/packages/client/src/components/Shop.tsx b/packages/client/src/components/Shop.tsx
@@ -1,47 +1,55 @@
-import React, {useEffect, useState} from "react";
-import {CartAdapter} from "../adapters/cart";
-import { ProductCatalog} from "../adapters/productCatalog";
-import {useNavigate} from "react-router-dom";
-import {Product} from "@ts-react-tdd/server/src/types";
+import React, { useEffect, useState } from "react";
+import { CartAdapter } from "../adapters/cart";
+import { ProductCatalog } from "../adapters/productCatalog";
+import { useNavigate } from "react-router-dom";
+import { Product } from "@ts-react-tdd/server/src/types";
+import { ProductItem } from "./ProductItem";
+import { Button, Grid, GridItem } from "@chakra-ui/react";
 
 interface ShopProps {
-    cartAdapter: CartAdapter;
-    productCatalog: ProductCatalog
-    cartId: string;
+  cartAdapter: CartAdapter;
+  productCatalog: ProductCatalog;
+  cartId: string;
 }
 
-export const Shop: React.FC<ShopProps> = ({cartAdapter, cartId, productCatalog}) => {
-    const [itemCount, setItemCount] = useState<number>(0);
-    const [products, setProducts] = useState<Product[]>([])
-    const addItem = async (productId: Product["id"]) => {
-        await cartAdapter.addItem(cartId, productId);
-        setItemCount(await cartAdapter.getCount(cartId));
-    };
-
-    const navigate = useNavigate();
-
-    useEffect(() => {
-        cartAdapter.getCount(cartId).then(setItemCount);
-        productCatalog.findAllProducts().then(setProducts)
-    }, []);
-
-    const viewCart = () => {
-        navigate('/cart');
-    }
-
-    return (
-        <section>
-            <p aria-label={`${itemCount} items in cart`}>{itemCount} items in cart</p>
-            {itemCount && <button aria-label="View cart" role="button" onClick={viewCart}>View cart</button>}
-
-            {products.map(({title, id}) => <div key={id} aria-label={title}>
-                <h3>{title}</h3>
-                <button onClick={() => addItem(id)} aria-label="Add to cart" role="button">
-                    Add
-                </button>
-            </div>)}
-
-
-        </section>
-    );
+export const Shop: React.FC<ShopProps> = ({ cartAdapter, cartId, productCatalog }) => {
+  const [itemCount, setItemCount] = useState<number>(0);
+  const [products, setProducts] = useState<Product[]>([]);
+  const addItem = async (productId: Product["id"]) => {
+    await cartAdapter.addItem(cartId, productId);
+    setItemCount(await cartAdapter.getCount(cartId));
+  };
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    cartAdapter.getCount(cartId).then(setItemCount);
+    productCatalog.findAllProducts().then(setProducts);
+  }, []);
+
+  const viewCart = () => {
+    navigate("/cart");
+  };
+
+  return (
+    <section>
+      <p aria-label={`${itemCount} items in cart`}>{itemCount} items in cart</p>
+      {itemCount && (
+        <button aria-label="View cart" role="button" onClick={viewCart}>
+          View cart
+        </button>
+      )}
+
+      <Grid h="200px" templateColumns="repeat(5, 1fr)" gap={6}>
+        {products.slice(0, 10).map(({ title, id, image }, index) => (
+          <GridItem key={id} aria-label={title}>
+            <ProductItem title={title} key={id} imageUrl={image!} />
+            <Button onClick={() => addItem(id)} aria-label="Add to cart" role="button">
+              Add
+            </Button>
+          </GridItem>
+        ))}
+      </Grid>
+    </section>
+  );
 };
diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx
@@ -1,13 +1,21 @@
 import ReactDom from "react-dom";
-import {App} from "./components/App";
-import {BrowserRouter} from "react-router-dom";
-import {HTTPShopBackend} from "./adapters/HTTPShopBackend";
+import { App } from "./components/App";
+import { BrowserRouter } from "react-router-dom";
+import { HTTPShopBackend } from "./adapters/HTTPShopBackend";
+import { ChakraProvider } from "@chakra-ui/react";
 
 const config = {
-    apiUrl: process.env.API_URL!,
+  apiUrl: process.env.API_URL!,
 };
 
 const backend = new HTTPShopBackend(config.apiUrl);
 
 const root = document.querySelector("#root");
-ReactDom.render(<BrowserRouter><App cartAdapter={backend} catalog={backend} orderAdapter={backend} /></BrowserRouter>, root);
+ReactDom.render(
+  <BrowserRouter>
+    <ChakraProvider>
+      <App cartAdapter={backend} catalog={backend} orderAdapter={backend} />
+    </ChakraProvider>
+  </BrowserRouter>,
+  root
+);
diff --git a/packages/client/test/fast/purchase.flow.spec.tsx b/packages/client/test/fast/purchase.flow.spec.tsx
@@ -1,32 +1,33 @@
-import {fireEvent, render, within} from "@testing-library/react";
-import {App} from "../../src/components/App";
-import {MemoryRouter} from "react-router-dom";
-import {InMemoryShopBackend} from "../../src/adapters/inMemoryShopBackend";
-import {aProduct} from "@ts-react-tdd/server/src/types";
-
-
+import { fireEvent, render, within } from "@testing-library/react";
+import { App } from "../../src/components/App";
+import { MemoryRouter } from "react-router-dom";
+import { InMemoryShopBackend } from "../../src/adapters/inMemoryShopBackend";
+import { aProduct } from "@ts-react-tdd/server/src/types";
 
 test("a user can purchase a product, see the confirmation page and get a confirmation email", async () => {
+  const moogOne = aProduct({ title: "Moog One" });
+  const cartAdapter = new InMemoryShopBackend([moogOne]);
 
-    const moogOne = aProduct({title: "Moog One"});
-    const cartAdapter = new InMemoryShopBackend([moogOne]);
-
-    const app = render(<MemoryRouter><App cartAdapter={cartAdapter} catalog={cartAdapter} orderAdapter={cartAdapter}/></MemoryRouter>);
-    app.getByText("0 items in cart");
+  const app = render(
+    <MemoryRouter>
+      <App cartAdapter={cartAdapter} catalog={cartAdapter} orderAdapter={cartAdapter} />
+    </MemoryRouter>
+  );
+  app.getByText("0 items in cart");
 
-    const product = await app.findByLabelText(moogOne.title)
-    const add = within(product).getByText("Add");
-    fireEvent.click(add);
+  const product = await app.findByLabelText(moogOne.title);
+  const add = within(product).getByText("Add");
+  fireEvent.click(add);
 
-    await app.findByText("1 items in cart");
+  await app.findByText("1 items in cart");
 
-    const viewCart = await app.findByText("View cart");
-    fireEvent.click(viewCart);
+  const viewCart = await app.findByText("View cart");
+  fireEvent.click(viewCart);
 
-    const checkout = await app.findByText("Checkout");
-    fireEvent.click(checkout);
+  const checkout = await app.findByText("Checkout");
+  fireEvent.click(checkout);
 
-    expect(await app.findByText("Thank You")).toBeTruthy();
-    expect(await app.findByText(moogOne.title)).toBeTruthy();
+  expect(await app.findByText("Thank You")).toBeTruthy();
+  expect(await app.findByText(moogOne.title)).toBeTruthy();
+});
 
-})