(null);
+
+ function handleSave(e: React.FormEvent) {
+ const text = todoInputRef.current?.value || "";
+ e.preventDefault();
+ if (!text.trim()) {
+ alert("Please enter a todo.");
+ return;
+ }
+ onSave({ text, important });
+
+ setImportant(false);
+ }
+
+ function handleCancel() {
+ setImportant(false);
+ onCancel();
+ }
+
+ return (
+
+ );
+}
diff --git a/examples/endgame/src/components/TodoList.ts b/examples/endgame/src/components/TodoList.ts
new file mode 100644
index 0000000..81102e3
--- /dev/null
+++ b/examples/endgame/src/components/TodoList.ts
@@ -0,0 +1,10 @@
+export interface Todo {
+ id: string;
+ text?: string;
+ done?: boolean;
+ isImportant?: boolean;
+}
+
+export interface TodoList {
+ todos?: Todo[];
+}
diff --git a/examples/endgame/src/components/WelcomeScreen.tsx b/examples/endgame/src/components/WelcomeScreen.tsx
new file mode 100644
index 0000000..5a008aa
--- /dev/null
+++ b/examples/endgame/src/components/WelcomeScreen.tsx
@@ -0,0 +1,14 @@
+
+interface WelcomeScreenProps {
+
+}
+
+export default function WelcomeScreen({ onLogin, onRegister }: { onLogin: () => void; onRegister: () => void }) {
+ return (
+
+
Welcome!
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/examples/endgame/src/components/molecules/LoadingButton.stories.tsx b/examples/endgame/src/components/molecules/LoadingButton.stories.tsx
new file mode 100644
index 0000000..df45b81
--- /dev/null
+++ b/examples/endgame/src/components/molecules/LoadingButton.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import LoadingButton from "./LoadingButton";
+
+const meta = {
+ component: LoadingButton,
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ color: "black",
+ },
+};
+
+export const Blue: Story = {
+ args: {
+ color: "Blue",
+ },
+};
diff --git a/examples/endgame/src/components/molecules/LoadingButton.test.tsx b/examples/endgame/src/components/molecules/LoadingButton.test.tsx
new file mode 100644
index 0000000..0fd89b4
--- /dev/null
+++ b/examples/endgame/src/components/molecules/LoadingButton.test.tsx
@@ -0,0 +1,53 @@
+import "@testing-library/jest-dom/vitest";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import LoadingButton from "./LoadingButton";
+import userEvent from "@testing-library/user-event";
+
+describe("LoadingButton", () => {
+ describe("Story default", () => {
+ it("should render a button with `Loading` content", () => {
+ render(Loading);
+ expect(screen.getByTestId("1")).toHaveTextContent("Loading");
+ });
+
+ it("displays Text, if not loading", () => {
+ render(Send);
+ expect(screen.getByTestId("2")).toHaveTextContent("Send");
+ expect(screen.getByTestId("2")).not.toBeDisabled();
+ });
+
+ it("displays 'Loading...' and is disabled, if loading=true", () => {
+ render(
+
+ Send
+
+ );
+ expect(screen.getByTestId("3")).toHaveTextContent("loading");
+ expect(screen.getByTestId("3")).toBeDisabled();
+ });
+
+ it("invokes onClick, if not loading", async () => {
+ const user = userEvent.setup();
+ const handleClick = vi.fn();
+ render(Send);
+
+ await user.click(screen.getByTestId("4"));
+
+ expect(handleClick).toHaveBeenCalledTimes(1);
+ });
+
+ it("NOT invokes onClick, if loading=true", async () => {
+ const user = userEvent.setup();
+ const handleClick = vi.fn();
+ render(
+
+ Send
+
+ );
+
+ await user.click(screen.getByTestId("5"));
+ expect(handleClick).not.toHaveBeenCalled();
+ });
+ });
+});
diff --git a/examples/endgame/src/components/molecules/LoadingButton.tsx b/examples/endgame/src/components/molecules/LoadingButton.tsx
new file mode 100644
index 0000000..9459ae5
--- /dev/null
+++ b/examples/endgame/src/components/molecules/LoadingButton.tsx
@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+
+interface LoadingButtonProps {
+ color?: string;
+ loading?: boolean;
+ children?: ReactNode;
+ onBtnClick?: () => void;
+ testId?: string;
+}
+
+export default function LoadingButton({
+ color = "white",
+ loading = false,
+ children = <>,
+ onBtnClick = () => {},
+ testId,
+}: LoadingButtonProps) {
+ return (
+
+ );
+}
diff --git a/examples/endgame/src/components/useAuth.ts b/examples/endgame/src/components/useAuth.ts
new file mode 100644
index 0000000..33f651e
--- /dev/null
+++ b/examples/endgame/src/components/useAuth.ts
@@ -0,0 +1,52 @@
+import { useState, useEffect, useMemo, useCallback } from "react";
+
+export function useAuth() {
+ const [userToken, setUserToken] = useState("");
+ const [userName, setUserName] = useState("");
+ const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+ useEffect(() => {
+ // read existing user token from cookie
+
+ return () => {
+ // cleanup resources!!!
+ };
+ });
+
+ const login = useCallback(
+ async (username: string) => {
+ const userToken = await delay(username === "mike" ? "token:mike" : "");
+ setUserToken(userToken);
+ setIsAuthenticated(Boolean(userToken));
+ setUserName(username);
+ },
+ [userToken, userName]
+ );
+
+ const logout = useCallback(async () => {
+ const userToken = await delay("");
+ setUserToken(userToken);
+ setIsAuthenticated(Boolean(userToken));
+ setUserName("");
+ return userToken;
+ }, [userToken, userName]);
+
+ return useMemo(
+ () => ({
+ userName,
+ isAuthenticated,
+ userToken,
+ login,
+ logout,
+ }),
+ [userName, isAuthenticated, userToken, login, logout]
+ );
+}
+
+async function delay(userToken: string): Promise {
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(userToken);
+ }, 1000);
+ });
+}
diff --git a/examples/endgame/src/index.css b/examples/endgame/src/index.css
new file mode 100644
index 0000000..a1f04a3
--- /dev/null
+++ b/examples/endgame/src/index.css
@@ -0,0 +1,69 @@
+#root {
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: black;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ width: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/examples/endgame/src/main.tsx b/examples/endgame/src/main.tsx
new file mode 100644
index 0000000..c780aae
--- /dev/null
+++ b/examples/endgame/src/main.tsx
@@ -0,0 +1,25 @@
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import { AuthProvider } from "./components/AuthProvider.tsx";
+import { StoreProvider } from "./components/ApiProvider.tsx";
+import { BrowserRouter, Link, Route, Routes } from "react-router";
+import About from "./pages/About.tsx";
+import App from "./pages/App.tsx";
+import Login from "./pages/Login.tsx";
+import AddTodo from "./pages/AddTodo.tsx";
+
+createRoot(document.getElementById("root")!).render(
+
+
+
+ About
+
+ } />
+ } />
+ } />
+ } />
+
+
+
+
+);
diff --git a/examples/endgame/src/pages/About.tsx b/examples/endgame/src/pages/About.tsx
new file mode 100644
index 0000000..53af4fe
--- /dev/null
+++ b/examples/endgame/src/pages/About.tsx
@@ -0,0 +1,10 @@
+import { Link } from "react-router";
+
+export default function About() {
+ return (
+ <>
+ About
+ Home
+
+ );
+}
diff --git a/examples/endgame/src/pages/AddTodo.tsx b/examples/endgame/src/pages/AddTodo.tsx
new file mode 100644
index 0000000..2f5b991
--- /dev/null
+++ b/examples/endgame/src/pages/AddTodo.tsx
@@ -0,0 +1,22 @@
+import { Navigate, useNavigate } from "react-router";
+import { useStore } from "../components/ApiProvider";
+import TodoInput from "../components/TodoInput";
+import { useAuthContext } from "../components/AuthProvider";
+
+export default function AddTodo() {
+ const auth = useAuthContext();
+ const store = useStore();
+ const navigateTo = useNavigate();
+
+ if (!auth?.isAuthenticated) return ;
+
+ return (
+ {
+ await store?.addTodo({ ...newTodo, isImportant: newTodo.important });
+ navigateTo("/");
+ }}
+ onCancel={() => navigateTo("/")}
+ />
+ );
+}
diff --git a/examples/endgame/src/pages/App.css b/examples/endgame/src/pages/App.css
new file mode 100644
index 0000000..027945e
--- /dev/null
+++ b/examples/endgame/src/pages/App.css
@@ -0,0 +1,6 @@
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/examples/endgame/src/pages/App.tsx b/examples/endgame/src/pages/App.tsx
new file mode 100644
index 0000000..5235bc7
--- /dev/null
+++ b/examples/endgame/src/pages/App.tsx
@@ -0,0 +1,46 @@
+import "./App.css";
+import Layout from "../components/Layout";
+import { useAuthContext } from "../components/AuthProvider";
+import ToDoList from "../components/MyToDoList";
+import { useStore } from "../components/ApiProvider";
+import { Link, Navigate, useNavigate } from "react-router";
+import { useEffect } from "react";
+
+export default function App() {
+ const auth = useAuthContext();
+ const store = useStore();
+ const navigateTo = useNavigate();
+
+ if (!auth?.isAuthenticated) return ;
+
+ useEffect(() => {
+ const ac = new AbortController();
+ store?.readTodos(ac);
+ return () => {
+ ac.abort("... unmount");
+ };
+ }, []);
+
+ if (store?.isLoading) return Fetching from API ...
;
+ if (store?.error)
+ return (
+ <>
+ {store?.error}
+ Home
+
+ );
+
+ return (
+ auth.logout()}
+ >
+
+ {}}
+ onItemRemoved={async (todo) => await store?.removeTodo(todo)}
+ />
+
+ );
+}
diff --git a/examples/endgame/src/pages/Login.tsx b/examples/endgame/src/pages/Login.tsx
new file mode 100644
index 0000000..06f99de
--- /dev/null
+++ b/examples/endgame/src/pages/Login.tsx
@@ -0,0 +1,16 @@
+import { Navigate } from "react-router";
+import LoginSignupScreen from "../components/LoginScreen";
+import { useAuthContext } from "../components/AuthProvider";
+
+export default function Login() {
+ const auth = useAuthContext();
+ if (auth?.isAuthenticated) return ;
+
+ return (
+ {
+ auth?.login(username);
+ }}
+ />
+ );
+}
diff --git a/examples/endgame/src/vite-env.d.ts b/examples/endgame/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/examples/endgame/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/examples/endgame/tsconfig.app.json b/examples/endgame/tsconfig.app.json
new file mode 100644
index 0000000..227a6c6
--- /dev/null
+++ b/examples/endgame/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2022",
+ "useDefineForClassFields": true,
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/examples/endgame/tsconfig.json b/examples/endgame/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/examples/endgame/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/examples/endgame/tsconfig.node.json b/examples/endgame/tsconfig.node.json
new file mode 100644
index 0000000..f85a399
--- /dev/null
+++ b/examples/endgame/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2023",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/examples/endgame/vite.config.ts b/examples/endgame/vite.config.ts
new file mode 100644
index 0000000..7dfa331
--- /dev/null
+++ b/examples/endgame/vite.config.ts
@@ -0,0 +1,55 @@
+///
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vite.dev/config/
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+const dirname =
+ typeof __dirname !== "undefined"
+ ? __dirname
+ : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+ plugins: [react()],
+ test: {
+ projects: [
+ {
+ extends: true,
+ plugins: [react()],
+ test: {
+ setupFiles: "./setupTests.ts",
+ environment: "jsdom",
+ css: true,
+ include: ["src/**/*.{test,spec}.{ts,tsx}"],
+ },
+ },
+ {
+ extends: true,
+ plugins: [
+ // The plugin will run tests for the stories defined in your Storybook config
+ // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+ storybookTest({
+ configDir: path.join(dirname, ".storybook"),
+ }),
+ ],
+ test: {
+ name: "storybook",
+ browser: {
+ enabled: true,
+ headless: true,
+ provider: "playwright",
+ instances: [
+ {
+ browser: "chromium",
+ },
+ ],
+ },
+ setupFiles: [".storybook/vitest.setup.ts"],
+ },
+ },
+ ],
+ },
+});
diff --git a/examples/endgame/vitest.shims.d.ts b/examples/endgame/vitest.shims.d.ts
new file mode 100644
index 0000000..f923d47
--- /dev/null
+++ b/examples/endgame/vitest.shims.d.ts
@@ -0,0 +1 @@
+///
\ No newline at end of file