-
+
+
-
-
);
}
diff --git a/src/ui/components/ThemeToggle.tsx b/src/ui/components/ThemeToggle.tsx
new file mode 100644
index 0000000..db62de6
--- /dev/null
+++ b/src/ui/components/ThemeToggle.tsx
@@ -0,0 +1,44 @@
+import { Moon, Sun, SunMoon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { applyTheme, getStoredTheme, storeTheme, type Theme } from "@/ui/theme/theme";
+
+const NEXT_THEME: Record = {
+ system: "light",
+ light: "dark",
+ dark: "system",
+};
+
+const THEME_ICON: Record = {
+ system: SunMoon,
+ light: Sun,
+ dark: Moon,
+};
+
+const THEME_LABEL: Record = {
+ system: "System",
+ light: "Light",
+ dark: "Dark",
+};
+
+export function ThemeToggle() {
+ const [theme, setTheme] = useState(() => getStoredTheme());
+
+ useEffect(() => {
+ applyTheme(theme);
+ storeTheme(theme);
+ }, [theme]);
+
+ const Icon = THEME_ICON[theme];
+
+ return (
+
+ );
+}
diff --git a/src/ui/components/WelcomeModal/WelcomeModal.tsx b/src/ui/components/WelcomeModal/WelcomeModal.tsx
index b424288..d2665cd 100644
--- a/src/ui/components/WelcomeModal/WelcomeModal.tsx
+++ b/src/ui/components/WelcomeModal/WelcomeModal.tsx
@@ -75,7 +75,7 @@ const WelcomeModalComponent = (
<>
@@ -83,7 +83,7 @@ const WelcomeModalComponent = (
aria-invalid={!!field.state.meta.errors?.length}
aria-describedby={`${field.name}-error`}
id={field.name}
- value={field.state.value}
+ value={field.state.value ?? ""}
onChange={(e) => {
const { data: safeValue } =
WelcomeSurveyDataSchema.shape.skill.safeParse(e.target.value);
@@ -105,7 +105,10 @@ const WelcomeModalComponent = (
{field.state.meta.isTouched && field.state.meta.errors?.[0] && (
-
-
+
-
@@ -59,37 +60,47 @@ export function ProductCardFooter({
-
+
- {product.displayName()}
+ {productName}
-
-
+
+ Lore video for {productName}.
+
{profile !== "beginner" && (
)}
diff --git a/src/ui/components/cart/ProductCard/ProductCardHeader.tsx b/src/ui/components/cart/ProductCard/ProductCardHeader.tsx
index 8c761db..84d3f76 100644
--- a/src/ui/components/cart/ProductCard/ProductCardHeader.tsx
+++ b/src/ui/components/cart/ProductCard/ProductCardHeader.tsx
@@ -12,11 +12,11 @@ export function ProductCardHeader({ product }: ProductCardHeaderProps) {
return (
-
+
Maintainable Frontend Architecture with React
-
+
This site is a hands-on demo showing how to apply{" "} - Object Calisthenics in a front-end app. - You'll see how keeping objects small, simple, and focused makes your React code - easier to understand and maintain. + Object Calisthenics in a front-end + app. You'll see how keeping objects small, simple, and focused makes your React + code easier to understand and maintain.
-+
Take a few moments to explore the interactive experience, then dive into the code to see these principles in action.
@@ -44,7 +44,7 @@ function App() {
+
+
{field.state.meta.errors[0]}
)} diff --git a/src/ui/components/__spec__/ThemeToggle.spec.tsx b/src/ui/components/__spec__/ThemeToggle.spec.tsx new file mode 100644 index 0000000..3bcd7d9 --- /dev/null +++ b/src/ui/components/__spec__/ThemeToggle.spec.tsx @@ -0,0 +1,38 @@ +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { beforeEach, describe, expect, it } from "vitest"; +import { ThemeToggle } from "@/ui/components/ThemeToggle"; + +describe("ThemeToggle", () => { + beforeEach(() => { + localStorage.clear(); + document.documentElement.classList.remove("dark"); + }); + + it("should start on system and cycle through light and dark on each click", async () => { + const user = userEvent.setup(); + render(
+
+ {label}
+
+
+ {value}
+
+
+ );
+}
diff --git a/src/ui/components/cart/ProductCard/ProductCard.tsx b/src/ui/components/cart/ProductCard/ProductCard.tsx
index 97d2ec3..30d90bf 100644
--- a/src/ui/components/cart/ProductCard/ProductCard.tsx
+++ b/src/ui/components/cart/ProductCard/ProductCard.tsx
@@ -12,12 +12,18 @@ interface ProductCardProps {
product: Product;
profile: KnowledgeProfile;
onAddToCart: (product: Product) => void;
+ priorityImage?: boolean;
}
-export function ProductCard({ product, profile, onAddToCart }: ProductCardProps) {
+export function ProductCard({
+ product,
+ profile,
+ onAddToCart,
+ priorityImage = false,
+}: ProductCardProps) {
return (
- +
+
+
- {formattedPrice}
+
- {product.displayName()} -
-
+
+ {formattedPrice}
+
);
diff --git a/src/ui/components/cart/ProductCard/ProductCardImage.tsx b/src/ui/components/cart/ProductCard/ProductCardImage.tsx
index 74089d8..165d886 100644
--- a/src/ui/components/cart/ProductCard/ProductCardImage.tsx
+++ b/src/ui/components/cart/ProductCard/ProductCardImage.tsx
@@ -2,15 +2,23 @@ import type { Product } from "@/domain/cart/value-objects/Product/Product";
interface ProductCardImageProps {
product: Product;
+ /** The first cards above the fold should load eagerly instead of competing with the LCP image. */
+ priority?: boolean;
}
-export const ProductCardImage = ({ product }: ProductCardImageProps) => {
+export const ProductCardImage = ({
+ product,
+ priority = false,
+}: ProductCardImageProps) => {
return (
- {product.displayName()}
+
+
})
diff --git a/src/ui/components/cart/ShoppingCart.tsx b/src/ui/components/cart/ShoppingCart.tsx
index ce71f68..5e58885 100644
--- a/src/ui/components/cart/ShoppingCart.tsx
+++ b/src/ui/components/cart/ShoppingCart.tsx
@@ -9,6 +9,7 @@ import { PRODUCT_CATALOG } from "@/data/products";
import { Cart } from "@/domain/cart/Cart";
import { goldSilverCopperFormatter } from "@/domain/currency/GoldSilverCopperFormatter";
import { Skill } from "@/domain/welcomeSurvey/value-objects/Skill";
+import { CartSummaryRow } from "@/ui/components/cart/CartSummaryRow";
import { ShoppingCartItem } from "@/ui/components/cart/ShoppingCartItem";
import { WelcomeModal } from "@/ui/components/WelcomeModal/WelcomeModal";
import type { WelcomeModalHandle } from "@/ui/components/WelcomeModal/WelcomeModal.types";
@@ -30,6 +31,8 @@ interface ShoppingCartProps {
welcomeModalHandle: RefObject;
}
+const EAGER_IMAGE_COUNT = 3;
+
export const ShoppingCart: FC = ({ welcomeModalHandle }) => {
const [showCart, setShowCart] = useState(false);
const cart = useImmutableInstance(new Cart());
@@ -38,8 +41,8 @@ export const ShoppingCart: FC = ({ welcomeModalHandle }) => {
return (
-
-
Azeroth's Finest Wares
+
+
- Azeroth's Finest Wares
+
{/* Product List */}
-
-
{/* Cart */}
- Mystical Inventory
+
+
- Mystical Inventory
- {PRODUCT_CATALOG.all().map((product) => (
-
+
-
+ {PRODUCT_CATALOG.all().map((product, index) => (
+
-
+
+
))}
-
-
-
-
);
diff --git a/src/ui/components/cart/ShoppingCartItem.tsx b/src/ui/components/cart/ShoppingCartItem.tsx
index c8810f8..5ca5a4b 100644
--- a/src/ui/components/cart/ShoppingCartItem.tsx
+++ b/src/ui/components/cart/ShoppingCartItem.tsx
@@ -21,7 +21,7 @@ export function ShoppingCartItem({
onRemoveItem,
}: ShoppingCartItemProps) {
return (
-
-
+
+
+
+
+
Your Inventory
@@ -115,10 +126,10 @@ export const ShoppingCart: FC = ({ welcomeModalHandle }) => {
-
+
{cart.isEmpty() ? (
= ({ welcomeModalHandle }) => {
}}
>
@@ -147,148 +158,62 @@ export const ShoppingCart: FC = ({ welcomeModalHandle }) => {
) : (
<>
-
+
-
- {cart.listItems().map((item) => (
- cart.increaseQuantity(item.id())}
- onDecreaseQuantity={() => cart.decreaseQuantity(item.id())}
- onRemoveItem={() => cart.removeItem(item.id())}
- />
- ))}
-
+ {cart.listItems().map((item) => (
+ cart.increaseQuantity(item.id())}
+ onDecreaseQuantity={() => cart.decreaseQuantity(item.id())}
+ onRemoveItem={() => cart.removeItem(item.id())}
+ />
+ ))}
-
+
-
- Subtotal:
-
-
- {goldSilverCopperFormatter.format(cart.calculateSubtotal())}
-
-
-
-
-
- Shipping:
-
-
- {cart.calculateShipping().isZero() ? (
-
- Free
-
- ) : (
-
- {goldSilverCopperFormatter.format(cart.calculateShipping())}
-
- )}
-
-
-
-
-
- Tax:
-
-
- {goldSilverCopperFormatter.format(cart.calculateTax())}
-
-
-
-
+
+
+ Free
+
+ ) : (
+ goldSilverCopperFormatter.format(cart.calculateShipping())
+ )
+ }
+ />
+
- Total:
-
-
- {goldSilverCopperFormatter.format(cart.calculateTotal())}
-
-
-
+
{!cart.remainingForFreeShipping().isZero() && (
= ({ welcomeModalHandle }) => {
opacity: { duration: 0.4 },
height: { duration: 0.5, ease: [0.4, 0.0, 0.2, 1] },
}}
- key="shipping-notification"
layout
>
-
+
Add{" "}
{goldSilverCopperFormatter.format(
cart.remainingForFreeShipping(),
)}{" "}
more to earn free delivery by griffin!
-
+
)}
@@ -328,7 +248,7 @@ export const ShoppingCart: FC = ({ welcomeModalHandle }) => {
)}
-
+
-
+
+
+
{cart.isEmpty() ? (
= ({ welcomeModalHandle }) => {
}}
>
@@ -147,148 +158,62 @@ export const ShoppingCart: FC = ({ welcomeModalHandle }) => {
) : (
<>
-
-
- Subtotal:
-
-
-
- Shipping:
-
-
-
- Tax:
-
-
+
- Total:
-
+
{!cart.remainingForFreeShipping().isZero() && (
= ({ welcomeModalHandle }) => {
opacity: { duration: 0.4 },
height: { duration: 0.5, ease: [0.4, 0.0, 0.2, 1] },
}}
- key="shipping-notification"
layout
>
-
+
Add{" "}
{goldSilverCopperFormatter.format(
cart.remainingForFreeShipping(),
)}{" "}
more to earn free delivery by griffin!
-
+
)}
@@ -328,7 +248,7 @@ export const ShoppingCart: FC = ({ welcomeModalHandle }) => {
)}
-
+
-
+
Your Inventory
@@ -115,10 +126,10 @@ export const ShoppingCart: FC = ({ welcomeModalHandle }) => {
-
+
-
- {cart.listItems().map((item) => (
- cart.increaseQuantity(item.id())}
- onDecreaseQuantity={() => cart.decreaseQuantity(item.id())}
- onRemoveItem={() => cart.removeItem(item.id())}
- />
- ))}
-
+ {cart.listItems().map((item) => (
+ cart.increaseQuantity(item.id())}
+ onDecreaseQuantity={() => cart.decreaseQuantity(item.id())}
+ onRemoveItem={() => cart.removeItem(item.id())}
+ />
+ ))}
-
+
-
- {goldSilverCopperFormatter.format(cart.calculateSubtotal())}
-
-
-
-
- {cart.calculateShipping().isZero() ? (
-
- Free
-
- ) : (
-
- {goldSilverCopperFormatter.format(cart.calculateShipping())}
-
- )}
-
-
-
-
- {goldSilverCopperFormatter.format(cart.calculateTax())}
-
-
-
+
+ Free
+
+ ) : (
+ goldSilverCopperFormatter.format(cart.calculateShipping())
+ )
+ }
+ />
+
-
- {goldSilverCopperFormatter.format(cart.calculateTotal())}
-
-
-
-
+
})
-
) {
- return ) {
- return ) {
- return ) {
- return ) {
- return (
- & {
- side?: "top" | "right" | "bottom" | "left";
-}) {
- return (
-
-
- {children}
-
-
-
-
- );
-}
-
-function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- );
-}
-
-function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- );
-}
-
-function SheetTitle({
- className,
- ...props
-}: React.ComponentProps) {
- return (
- ) {
- return (
- {
+ return value === "light" || value === "dark";
+}
+
+export function getStoredTheme(): Theme {
+ if (typeof localStorage === "undefined") return "system";
+
+ try {
+ const stored = localStorage.getItem(STORAGE_KEY);
+ return isStoredTheme(stored) ? stored : "system";
+ } catch {
+ return "system";
+ }
+}
+
+export function prefersDark(): boolean {
+ return (
+ typeof window !== "undefined" &&
+ window.matchMedia("(prefers-color-scheme: dark)").matches
+ );
+}
+
+export function applyTheme(theme: Theme): void {
+ if (typeof document === "undefined") return;
+
+ const isDark = theme === "dark" || (theme === "system" && prefersDark());
+ document.documentElement.classList.toggle("dark", isDark);
+}
+
+export function storeTheme(theme: Theme): void {
+ if (typeof localStorage === "undefined") return;
+
+ try {
+ if (theme === "system") {
+ localStorage.removeItem(STORAGE_KEY);
+ } else {
+ localStorage.setItem(STORAGE_KEY, theme);
+ }
+ } catch {
+ // Storage can be unavailable (private browsing, quota); the toggle still works for
+ // the current session via applyTheme, it just won't persist.
+ }
+}
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 30c4c82..4770c31 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -7,6 +7,22 @@ import { afterEach, vi } from "vitest";
Element.prototype.scrollIntoView = vi.fn();
window.scrollTo = vi.fn() as unknown as typeof window.scrollTo;
+// jsdom doesn't implement matchMedia either, and the theme toggle and reduced-motion
+// checks both depend on it.
+Object.defineProperty(window, "matchMedia", {
+ writable: true,
+ value: vi.fn().mockImplementation((query: string) => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: vi.fn(),
+ removeListener: vi.fn(),
+ addEventListener: vi.fn(),
+ removeEventListener: vi.fn(),
+ dispatchEvent: vi.fn(),
+ })),
+});
+
afterEach(() => {
cleanup();
});
{item.name()}
+{item.name()}
-
-
+
);
}
diff --git a/src/ui/components/cart/__spec__/ShoppingCart.spec.tsx b/src/ui/components/cart/__spec__/ShoppingCart.spec.tsx
index a101e93..0d37640 100644
--- a/src/ui/components/cart/__spec__/ShoppingCart.spec.tsx
+++ b/src/ui/components/cart/__spec__/ShoppingCart.spec.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import type { RefObject } from "react";
import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -47,8 +47,12 @@ describe("ShoppingCart", () => {
await user.click(addToCartButtons()[0] as HTMLElement);
expect(screen.queryByText("Your inventory is empty")).not.toBeInTheDocument();
+ const cartPanel = screen.getByRole("complementary");
expect(
- screen.getByRole("heading", { level: 4, name: firstProduct?.displayName() }),
+ within(cartPanel).getByRole("heading", {
+ level: 3,
+ name: firstProduct?.displayName(),
+ }),
).toBeInTheDocument();
});
diff --git a/src/ui/primitives/input.tsx b/src/ui/primitives/input.tsx
deleted file mode 100644
index cb0e803..0000000
--- a/src/ui/primitives/input.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
- return (
-
- );
-}
-
-export { Input };
diff --git a/src/ui/primitives/modal.tsx b/src/ui/primitives/modal.tsx
index 9c783f7..ac24243 100644
--- a/src/ui/primitives/modal.tsx
+++ b/src/ui/primitives/modal.tsx
@@ -61,7 +61,7 @@ function ModalContent({
{showCloseButton && (
+
{goldSilverCopperFormatter.format(item.totalPrice())}
@@ -63,7 +65,7 @@ export function ShoppingCartItem({
onClick={onDecreaseQuantity}
variant="ghost"
size="icon"
- className="h-9 w-9 p-0 rounded-r-none hover:bg-gray-100"
+ className="h-9 w-9 p-0 rounded-r-none hover:bg-accent"
aria-label={`Decrease quantity of ${item.name()}`}
disabled={item.quantity().isAtMost(CartItem.MIN_QUANTITY)}
data-umami-event={ANALYTICS_CONFIG.events.decreaseQuantity}
@@ -86,7 +88,7 @@ export function ShoppingCartItem({
onClick={onIncreaseQuantity}
variant="ghost"
size="icon"
- className="h-9 w-9 p-0 rounded-l-none hover:bg-gray-100"
+ className="h-9 w-9 p-0 rounded-l-none hover:bg-accent"
aria-label={`Increase quantity of ${item.name()}`}
disabled={item.quantity().isAtLeast(CartItem.MAX_QUANTITY)}
data-umami-event={ANALYTICS_CONFIG.events.increaseQuantity}
@@ -100,7 +102,7 @@ export function ShoppingCartItem({
onClick={onRemoveItem}
variant="ghost"
size="icon"
- className="h-9 w-9 text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors"
+ className="h-9 w-9 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
aria-label={`Remove ${item.name()} from cart`}
data-umami-event={ANALYTICS_CONFIG.events.removeItem}
>
@@ -112,6 +114,6 @@ export function ShoppingCartItem({