defining and integrating a small component library

client/src/components/Auth/AuthForm.tsx

@@ -2,6 +2,8 @@ import { useSupabase } from "../../supabase/SupabaseContext";
 import { FormInput, getSession, handleLogin, handleRegister } from "../../util/authHelpers";
 import { AuthFormType } from "../../util/types";
 import { useState } from "react";
+import Button from "../_ui/Button/Button";
+import Page from "../_ui/Page/Page";
 
 const AuthForm: AuthFormType = ({ format }) => {
     const [input, setInput] = useState<FormInput>({ email: "", password: "" });
@@ -10,25 +12,25 @@ const AuthForm: AuthFormType = ({ format }) => {
     const formFunction = format == "login" ? () => handleLogin(supabase, input) : () => handleRegister(supabase, input);
 
     return (
-        <section>
+        <Page>
             <h1>{formText}</h1>
 
             <form>
-                <div>
-                    <label>Email:</label>
-                    <input required type="text" onChange={(e) => setInput({...input, email: e.target.value})} />
+                <div className="form-row">
+                    <label htmlFor="auth-form-email">Email:</label>
+                    <input id="auth-form-email" required type="text" onChange={(e) => setInput({...input, email: e.target.value})} />
                 </div>
-                <div>
-                    <label>Password:</label>
-                    <input required type="text" onChange={(e) => setInput({...input, password: e.target.value})} />
+                <div className="form-row">
+                    <label htmlFor="auth-form-password">Password:</label>
+                    <input id="auth-form-password" required type="password" onChange={(e) => setInput({...input, password: e.target.value})} />
                 </div>
             </form>
 
             <div className="auth-actions">
-                <button onClick={formFunction}>{formText}</button>
-                <button onClick={() => getSession(supabase)}>Session</button>
+                <Button onClick={formFunction}>{formText}</Button>
+                <Button onClick={() => getSession(supabase)}>Session</Button>
             </div>
-        </section>
+        </Page>
     )
 }
 

client/src/components/Home.tsx

@@ -1,18 +1,20 @@
 import { useNavigate } from "react-router-dom"
+import Button from "./_ui/Button/Button";
+import Page from "./_ui/Page/Page";
 
 export default function Home() {
     const navigate = useNavigate();
 
     return (
-        <div>
+        <Page>
             <h1>The finest spice shop on the internet.</h1>
             <p>Or at the very least, what their website could look like.</p>
 
-            <div>
-                <button onClick={() => navigate('/products')}>View our Products</button>
-                <button onClick={() => navigate('/philosophy')}>Our Philosophy</button>
-                <button onClick={() => navigate('/contact')}>Contact Us</button>
-            </div>
+            <div className="button-row">
+                <Button onClick={() => navigate('/products')}>View our Products</Button>
+                <Button onClick={() => navigate('/philosophy')}>Our Philosophy</Button>
+                <Button onClick={() => navigate('/contact')}>Contact Us</Button>
             </div>
+        </Page>
     )
 }

client/src/components/Product/AllProducts.tsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from "react"
 import { v4 } from "uuid";
 import { getAllProducts } from "../../util/apiUtils";
 import { ProductModel } from "../../util/types";
+import Gallery from "../_ui/Gallery/Gallery";
+import Page from "../_ui/Page/Page";
 import ProductCard from "./ProductCard";
 
 export default function AllProducts() {
@@ -16,16 +18,16 @@ export default function AllProducts() {
 
     useEffect(() => {
         setView(
-            <section>
+            <Page>
                 <h1>All Products!</h1>
-                <div className="product-card-list">
+                <Gallery additionalClasses="product-card-list" columns={3}>
                     {
                         productData && productData.map((data: ProductModel) => {
                             return <ProductCard data={data} key={v4()} />
                         })
                     }
-                </div>
-            </section>
+                </Gallery>
+            </Page>
         )
     }, [productData, setProductData]);
 

client/src/components/Product/ProductCard.tsx

@@ -1,17 +1,19 @@
 import { useNavigate } from "react-router-dom";
 import { ProductCardType } from "../../util/types";
+import Button from "../_ui/Button/Button";
+import Card from "../_ui/Card/Card";
 
 const ProductCard: ProductCardType = ({ data }) => {
     const navigate = useNavigate();
 
     return (
-        <div className="product-card">
+        <Card additionalClasses="product-card">
             <h1>{data.name}</h1>
             <p>{data.price}</p>
             <p>{data.description}</p>
 
-            <button onClick={() => navigate(`/products/${data.id}`)}>See More</button>
-        </div>
+            <Button onClick={() => navigate(`/products/${data.id}`)}>See More</Button>
+        </Card>
     )
 }
 

client/src/components/Product/ProductPage.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom"
 import { getByProductId } from "../../util/apiUtils";
 import { ProductModel } from "../../util/types";
+import Page from "../_ui/Page/Page";
 
 export default function ProductPage() {
     const [productData, setProductData] = useState<ProductModel>();
@@ -17,12 +18,12 @@ export default function ProductPage() {
     if (!productData) return <h1>Product not found.</h1>
 
     return (
-        <section className="product-page">
+        <Page additionalClasses="product-page">
             <h1>{productData.name}</h1>
             <p>{productData.price}</p>
             <p>{productData.description}</p>
 
             <button onClick={() => navigate('/products')}>Return to Product Listing</button>
-        </section>
+        </Page>
     )
 }

client/src/components/User/UserProfile.tsx

@@ -1,21 +1,23 @@
 import { useNavigate } from "react-router-dom";
 import { useSupabase } from "../../supabase/SupabaseContext"
+import Button from "../_ui/Button/Button";
+import Page from "../_ui/Page/Page";
 
 export default function UserProfile() {
     const supabase = useSupabase();
     const navigate = useNavigate();
 
     return (
-        <section>
+        <Page>
             <h1>User Profile!</h1>
             <p>Your email is {supabase?.auth.user()?.email || "not found"}</p>
 
             <h2>Options:</h2>
             <div className="user-profile-options">
-                <button onClick={() => navigate('/cart')}>View my Cart</button>
-                <button onClick={() => navigate('/orders')}>View my Order History</button>
-                <button>Manage Account Settings</button>
+                <Button onClick={() => navigate('/cart')}>View my Cart</Button>
+                <Button onClick={() => navigate('/orders')}>View my Order History</Button>
+                <Button onClick={() => {}}>Manage Account Settings</Button>
             </div>
-        </section>
+        </Page>
     )
 }

client/src/components/_ui/Button/Button.tsx

@@ -0,0 +1,13 @@
+import { UIButtonType } from "../../../util/types"
+
+const Button: UIButtonType = ({ onClick, children = "Button", additionalClasses = "" }) => {
+    return (
+        <>
+        <button className={`ui-button-component ${additionalClasses}`} onClick={onClick}>
+            { children }
+        </button>
+        </>
+    )
+}
+
+export default Button;

client/src/components/_ui/Card/Card.tsx

@@ -0,0 +1,11 @@
+import { UICompWithChildren } from "../../../util/types"
+
+const Card: UICompWithChildren = ({ children, additionalClasses = "" }) => {
+    return (
+        <section className={`ui-card-component ${additionalClasses}`}>
+            { children }
+        </section>
+    )
+}
+
+export default Card;

client/src/components/_ui/Gallery/Gallery.tsx

@@ -0,0 +1,13 @@
+import { UIGalleryType } from "../../../util/types"
+
+const Gallery: UIGalleryType = ({ children, columns, additionalClasses = "" }) => {
+    const widthFromCols = Math.ceil(90 / columns);
+
+    return (
+        <section className={`ui-gallery-component item-width-${widthFromCols} ${additionalClasses}`}>
+            { children }
+        </section>
+    )
+}
+
+export default Gallery;

client/src/components/_ui/Page/Page.tsx

@@ -0,0 +1,11 @@
+import { UICompWithChildren } from "../../../util/types";
+
+const Page: UICompWithChildren = ({ children, additionalClasses = "" }) => {
+    return (
+        <section className={`ui-page-component ${additionalClasses}`}>
+            { children }
+        </section>
+    )
+}
+
+export default Page;

client/src/util/types.ts

@@ -1,8 +1,28 @@
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 
 // component types
 export type AuthFormType = FC<{ format: string }>
 export type ProductCardType = FC<{ data: ProductModel }>
+export type UIButtonType = FC<UIButtonParams>
+export type UICompWithChildren = FC<UICompChildrenParams>
+export type UIGalleryType = FC<UIGalleryParams>
+
+// definitions for component params
+interface UIParams {
+    additionalClasses?: string
+}
+
+interface UIButtonParams extends UIParams {
+    onClick: (...params: any) => any
+    children?: string
+}
+
+interface UICompChildrenParams extends UIParams { children: ReactNode }
+
+interface UIGalleryParams extends UIParams {
+    children: ReactNode
+    columns: number
+}
 
 // data models