jac-client 0.2.2__py3-none-any.whl → 0.2.4__py3-none-any.whl

jac_client/examples/full-stack-with-auth/app.jac

@@ -1,722 +0,0 @@
-# Full Stack Todo App with Auth and React Router
-cl import from react {
-    useState,
-    useEffect
-}
-cl import from "@jac-client/utils" {
-    Router,
-    Routes,
-    Route,
-    Link,
-    Navigate,
-    useNavigate,
-    useLocation,
-    jacSignup,
-    jacLogin,
-    jacLogout,
-    jacIsLoggedIn
-}
-
-# Backend - Todo Node
-node Todo {
-    has text: str;
-    has done: bool = False;
-}
-
-# Backend - Walkers
-walker create_todo {
-    has text: str;
-
-    can create with `root entry {
-        new_todo = here ++> Todo(text=self.text);
-        report new_todo ;
-    }
-}
-
-walker read_todos {
-    can read with `root entry {
-        visit [-->(`?Todo)];
-    }
-
-    can report_todos with Todo entry {
-        report here ;
-    }
-}
-
-walker toggle_todo {
-    can toggle with Todo entry {
-        here.done = not here.done;
-        report here ;
-    }
-}
-
-# Frontend Components
-cl {
-    # Navigation
-    def Navigation()  -> any {
-        let isLoggedIn = jacIsLoggedIn();
-        let navigate = useNavigate();
-
-        def handleLogout(e: any) -> None {
-            e.preventDefault();
-            jacLogout();
-            navigate("/login");
-        }
-
-        if isLoggedIn {
-            return <nav
-                style={{
-                    "padding": "12px 24px",
-                    "background": "#3b82f6",
-                    "color": "#ffffff",
-                    "display": "flex",
-                    "justifyContent": "space-between"
-                }}
-            >
-                <div
-                    style={{"fontWeight": "600"}}
-                >
-                    Todo App
-                </div>
-                <div
-                    style={{"display": "flex", "gap": "16px"}}
-                >
-                    <Link
-                        to="/todos"
-                        style={{"color": "#ffffff", "textDecoration": "none"}}
-                    >
-                        Todos
-                    </Link>
-                    <button
-                        onClick={handleLogout}
-                        style={{
-                            "background": "none",
-                            "color": "#ffffff",
-                            "border": "1px solid #ffffff",
-                            "padding": "2px 10px",
-                            "borderRadius": "4px",
-                            "cursor": "pointer"
-                        }}
-                    >
-                        Logout
-                    </button>
-                </div>
-            </nav>;
-        }
-
-        return <nav
-            style={{
-                "padding": "12px 24px",
-                "background": "#3b82f6",
-                "color": "#ffffff",
-                "display": "flex",
-                "justifyContent": "space-between"
-            }}
-        >
-            <div
-                style={{"fontWeight": "600"}}
-            >
-                Todo App
-            </div>
-            <div
-                style={{"display": "flex", "gap": "16px"}}
-            >
-                <Link
-                    to="/login"
-                    style={{"color": "#ffffff", "textDecoration": "none"}}
-                >
-                    Login
-                </Link>
-                <Link
-                    to="/signup"
-                    style={{"color": "#ffffff", "textDecoration": "none"}}
-                >
-                    Sign Up
-                </Link>
-            </div>
-        </nav>;
-    }
-
-    # Login Page
-    def LoginPage()  -> any {
-        let [username, setUsername] = useState("");
-        let [password, setPassword] = useState("");
-        let [error, setError] = useState("");
-        let navigate = useNavigate();
-
-        async def handleLogin(e: any) -> None {
-            e.preventDefault();
-            setError("");
-            if not username or not password {
-                setError("Please fill in all fields");
-                return;
-            }
-            success = await jacLogin(username, password);
-            if success {
-                navigate("/todos");
-            } else {
-                setError("Invalid credentials");
-            }
-        }
-
-        def handleUsernameChange(e: any) -> None {
-            setUsername(e.target.value);
-        }
-
-        def handlePasswordChange(e: any) -> None {
-            setPassword(e.target.value);
-        }
-
-        let errorDisplay = None;
-        if error {
-            errorDisplay = <div
-                style={{"color": "#dc2626", "fontSize": "14px", "marginBottom": "10px"}}
-            >
-                {error}
-            </div>;
-        }
-
-        return <div
-            style={{
-                "minHeight": "calc(100vh - 48px)",
-                "display": "flex",
-                "alignItems": "center",
-                "justifyContent": "center",
-                "background": "#f5f5f5"
-            }}
-        >
-            <div
-                style={{
-                    "background": "#ffffff",
-                    "padding": "30px",
-                    "borderRadius": "8px",
-                    "width": "280px",
-                    "boxShadow": "0 2px 4px rgba(0,0,0,0.1)"
-                }}
-            >
-                <h2
-                    style={{"marginBottom": "20px"}}
-                >
-                    Login
-                </h2>
-                <form
-                    onSubmit={handleLogin}
-                >
-                    <input
-                        type="text"
-                        value={username}
-                        onChange={handleUsernameChange}
-                        placeholder="Username"
-                        style={{
-                            "width": "100%",
-                            "padding": "8px",
-                            "marginBottom": "10px",
-                            "border": "1px solid #ddd",
-                            "borderRadius": "4px",
-                            "boxSizing": "border-box"
-                        }}
-                    />
-                    <input
-                        type="password"
-                        value={password}
-                        onChange={handlePasswordChange}
-                        placeholder="Password"
-                        style={{
-                            "width": "100%",
-                            "padding": "8px",
-                            "marginBottom": "10px",
-                            "border": "1px solid #ddd",
-                            "borderRadius": "4px",
-                            "boxSizing": "border-box"
-                        }}
-                    />
-                    {errorDisplay}
-                    <button
-                        type="submit"
-                        style={{
-                            "width": "100%",
-                            "padding": "8px",
-                            "background": "#3b82f6",
-                            "color": "#ffffff",
-                            "border": "none",
-                            "borderRadius": "4px",
-                            "cursor": "pointer",
-                            "fontWeight": "600"
-                        }}
-                    >
-                        Login
-                    </button>
-                </form>
-                <p
-                    style={{
-                        "textAlign": "center",
-                        "marginTop": "12px",
-                        "fontSize": "14px"
-                    }}
-                >
-                    Need an account?
-                    <Link to="/signup">
-                        Sign up
-                    </Link>
-                </p>
-            </div>
-        </div>;
-    }
-
-    # Signup Page
-    def SignupPage()  -> any {
-        let [username, setUsername] = useState("");
-        let [password, setPassword] = useState("");
-        let [error, setError] = useState("");
-        let navigate = useNavigate();
-
-        async def handleSignup(e: any) -> None {
-            e.preventDefault();
-            setError("");
-            if not username or not password {
-                setError("Please fill in all fields");
-                return;
-            }
-            result = await jacSignup(username, password);
-            if result["success"] {
-                navigate("/todos");
-            } else {
-                setError(result["error"] if result["error"] else "Signup failed");
-            }
-        }
-
-        def handleUsernameChange(e: any) -> None {
-            setUsername(e.target.value);
-        }
-
-        def handlePasswordChange(e: any) -> None {
-            setPassword(e.target.value);
-        }
-
-        let errorDisplay = None;
-        if error {
-            errorDisplay = <div
-                style={{"color": "#dc2626", "fontSize": "14px", "marginBottom": "10px"}}
-            >
-                {error}
-            </div>;
-        }
-
-        return <div
-            style={{
-                "minHeight": "calc(100vh - 48px)",
-                "display": "flex",
-                "alignItems": "center",
-                "justifyContent": "center",
-                "background": "#f5f5f5"
-            }}
-        >
-            <div
-                style={{
-                    "background": "#ffffff",
-                    "padding": "30px",
-                    "borderRadius": "8px",
-                    "width": "280px",
-                    "boxShadow": "0 2px 4px rgba(0,0,0,0.1)"
-                }}
-            >
-                <h2
-                    style={{"marginBottom": "20px"}}
-                >
-                    Sign Up
-                </h2>
-                <form
-                    onSubmit={handleSignup}
-                >
-                    <input
-                        type="text"
-                        value={username}
-                        onChange={handleUsernameChange}
-                        placeholder="Username"
-                        style={{
-                            "width": "100%",
-                            "padding": "8px",
-                            "marginBottom": "10px",
-                            "border": "1px solid #ddd",
-                            "borderRadius": "4px",
-                            "boxSizing": "border-box"
-                        }}
-                    />
-                    <input
-                        type="password"
-                        value={password}
-                        onChange={handlePasswordChange}
-                        placeholder="Password"
-                        style={{
-                            "width": "100%",
-                            "padding": "8px",
-                            "marginBottom": "10px",
-                            "border": "1px solid #ddd",
-                            "borderRadius": "4px",
-                            "boxSizing": "border-box"
-                        }}
-                    />
-                    {errorDisplay}
-                    <button
-                        type="submit"
-                        style={{
-                            "width": "100%",
-                            "padding": "8px",
-                            "background": "#3b82f6",
-                            "color": "#ffffff",
-                            "border": "none",
-                            "borderRadius": "4px",
-                            "cursor": "pointer",
-                            "fontWeight": "600"
-                        }}
-                    >
-                        Sign Up
-                    </button>
-                </form>
-                <p
-                    style={{
-                        "textAlign": "center",
-                        "marginTop": "12px",
-                        "fontSize": "14px"
-                    }}
-                >
-                    Have an account?
-                    <Link to="/login">
-                        Login
-                    </Link>
-                </p>
-            </div>
-        </div>;
-    }
-
-    # TodoInput Component
-    def TodoInput(props: any) -> any {
-        let input = props.input;
-        let setInput = props.setInput;
-        let addTodo = props.addTodo;
-
-        return <div
-            style={{"display": "flex", "gap": "8px", "marginBottom": "16px"}}
-        >
-            <input
-                type="text"
-                value={input}
-                onChange={lambda  e: any  -> None{ setInput(e.target.value);} }
-                onKeyPress={lambda  e: any  -> None{ if e.key == "Enter" {
-                    addTodo();
-                }} }
-                placeholder="What needs to be done?"
-                style={{
-                    "flex": "1",
-                    "padding": "8px",
-                    "border": "1px solid #ddd",
-                    "borderRadius": "4px"
-                }}
-            />
-            <button
-                onClick={addTodo}
-                style={{
-                    "padding": "8px 16px",
-                    "background": "#3b82f6",
-                    "color": "#ffffff",
-                    "border": "none",
-                    "borderRadius": "4px",
-                    "cursor": "pointer",
-                    "fontWeight": "600"
-                }}
-            >
-                Add
-            </button>
-        </div>;
-    }
-
-    # TodoFilters Component
-    def TodoFilters(props: any) -> any {
-        let filter = props.filter;
-        let setFilter = props.setFilter;
-
-        return <div
-            style={{"display": "flex", "gap": "8px", "marginBottom": "16px"}}
-        >
-            <button
-                onClick={lambda   -> None{ setFilter("all");} }
-                style={{
-                    "padding": "6px 12px",
-                    "background": ("#3b82f6" if filter == "all" else "#e5e7eb"),
-                    "color": ("#ffffff" if filter == "all" else "#000000"),
-                    "border": "none",
-                    "borderRadius": "4px",
-                    "cursor": "pointer",
-                    "fontSize": "14px"
-                }}
-            >
-                All
-            </button>
-            <button
-                onClick={lambda   -> None{ setFilter("active");} }
-                style={{
-                    "padding": "6px 12px",
-                    "background": ("#3b82f6" if filter == "active" else "#e5e7eb"),
-                    "color": ("#ffffff" if filter == "active" else "#000000"),
-                    "border": "none",
-                    "borderRadius": "4px",
-                    "cursor": "pointer",
-                    "fontSize": "14px"
-                }}
-            >
-                Active
-            </button>
-            <button
-                onClick={lambda   -> None{ setFilter("completed");} }
-                style={{
-                    "padding": "6px 12px",
-                    "background": ("#3b82f6" if filter == "completed" else "#e5e7eb"),
-                    "color": ("#ffffff" if filter == "completed" else "#000000"),
-                    "border": "none",
-                    "borderRadius": "4px",
-                    "cursor": "pointer",
-                    "fontSize": "14px"
-                }}
-            >
-                Completed
-            </button>
-        </div>;
-    }
-
-    # TodoItem Component
-    def TodoItem(props: any) -> any {
-        let todo = props.todo;
-        let toggleTodo = props.toggleTodo;
-        let deleteTodo = props.deleteTodo;
-
-        return <div
-            key={todo._jac_id}
-            style={{
-                "display": "flex",
-                "alignItems": "center",
-                "gap": "10px",
-                "padding": "10px",
-                "borderBottom": "1px solid #e5e7eb"
-            }}
-        >
-            <input
-                type="checkbox"
-                checked={todo.done}
-                onChange={lambda   -> None{ toggleTodo(todo._jac_id);} }
-                style={{"cursor": "pointer"}}
-            />
-            <span
-                style={{
-                    "flex": "1",
-                    "textDecoration": ("line-through" if todo.done else "none"),
-                    "color": ("#999" if todo.done else "#000")
-                }}
-            >
-                {todo.text}
-            </span>
-            <button
-                onClick={lambda   -> None{ deleteTodo(todo._jac_id);} }
-                style={{
-                    "padding": "4px 8px",
-                    "background": "#ef4444",
-                    "color": "#ffffff",
-                    "border": "none",
-                    "borderRadius": "4px",
-                    "cursor": "pointer",
-                    "fontSize": "12px"
-                }}
-            >
-                Delete
-            </button>
-        </div>;
-    }
-
-    # TodoList Component
-    def TodoList(props: any) -> any {
-        let filteredTodos = props.filteredTodos;
-        let toggleTodo = props.toggleTodo;
-        let deleteTodo = props.deleteTodo;
-
-        if filteredTodos.length == 0 {
-            return <div
-                style={{"padding": "20px", "textAlign": "center", "color": "#999"}}
-            >
-                No todos yet. Add one above!
-            </div>;
-        }
-
-        return <div>
-            {filteredTodos.map(
-                lambda  todo: any  -> any{ return <TodoItem
-                    key={todo._jac_id}
-                    todo={todo}
-                    toggleTodo={toggleTodo}
-                    deleteTodo={deleteTodo}
-                />; }
-            )}
-        </div>;
-    }
-
-    # Todos Page (Protected)
-    def TodosPage()  -> any {
-        # Check if user is logged in, redirect if not
-        if not jacIsLoggedIn() {
-            return <Navigate to="/login" />;
-        }
-
-        let [todos, setTodos] = useState([]);
-        let [input, setInput] = useState("");
-        let [filter, setFilter] = useState("all");
-
-        # Load todos on mount
-        useEffect(
-            lambda   -> None{ async def loadTodos()  -> None {
-                result = root spawn read_todos();
-                setTodos(result.reports if result.reports else []);
-            } loadTodos();} ,
-            []
-        );
-
-        # Add todo
-        async def addTodo()  -> None {
-            if not input.trim() {
-                return;
-            }
-            result = root spawn create_todo(text=input.trim());
-            setTodos(todos.concat([result.reports[0][0]]));
-            setInput("");
-        }
-
-        # Toggle todo
-        async def toggleTodo(id: any) -> None {
-            id spawn toggle_todo();
-            setTodos(
-                todos.map(
-                    lambda  todo: any  -> any{ if todo._jac_id == id {
-                        return {
-                            "_jac_id": todo._jac_id,
-                            "text": todo.text,
-                            "done": not todo.done
-                        };
-                    }return todo; }
-                )
-            );
-        }
-
-        # Delete todo
-        async def deleteTodo(id: any) -> None {
-            #id spawn delete_todo();
-            setTodos(
-                todos.filter(lambda  todo: any  -> bool{ return todo._jac_id != id; } )
-            );
-        }
-
-        # Filter todos
-        def getFilteredTodos()  -> list {
-            if filter == "active" {
-                return todos.filter(
-                    lambda  todo: any  -> bool{ return not todo.done; }
-                );
-            } elif filter == "completed" {
-                return todos.filter(lambda  todo: any  -> bool{ return todo.done; } );
-            }
-            return todos;
-        }
-
-        filteredTodos = getFilteredTodos();
-        activeCount = todos.filter(
-            lambda  todo: any  -> bool{ return not todo.done; }
-        ).length;
-
-        return <div
-            style={{
-                "maxWidth": "600px",
-                "margin": "20px auto",
-                "padding": "20px",
-                "background": "#ffffff",
-                "borderRadius": "8px",
-                "boxShadow": "0 2px 4px rgba(0,0,0,0.1)"
-            }}
-        >
-            <h1
-                style={{"marginBottom": "20px"}}
-            >
-                My Todos
-            </h1>
-            <TodoInput
-                input={input}
-                setInput={setInput}
-                addTodo={addTodo}
-            />
-            <TodoFilters
-                filter={filter}
-                setFilter={setFilter}
-            />
-            <TodoList
-                filteredTodos={filteredTodos}
-                toggleTodo={toggleTodo}
-                deleteTodo={deleteTodo}
-            />
-            {(
-                <div
-                    style={{
-                        "marginTop": "16px",
-                        "padding": "10px",
-                        "background": "#f9fafb",
-                        "borderRadius": "4px",
-                        "fontSize": "14px",
-                        "color": "#666"
-                    }}
-                >
-                    {activeCount} {"item" if activeCount == 1 else "items"} left
-                </div>
-            )
-            if todos.length > 0
-            else None}
-        </div>;
-    }
-
-    # Home/Landing Page - auto-redirect
-    def HomePage()  -> any {
-        if jacIsLoggedIn() {
-            return <Navigate to="/todos" />;
-        }
-        return <Navigate to="/login" />;
-    }
-
-    # Main App with React Router
-    def app()  -> any {
-        return <Router>
-            <div
-                style={{"fontFamily": "system-ui, sans-serif"}}
-            >
-                <Navigation />
-                <Routes>
-                    <Route
-                        path="/"
-                        element={<HomePage />}
-                    />
-                    <Route
-                        path="/login"
-                        element={<LoginPage />}
-                    />
-                    <Route
-                        path="/signup"
-                        element={<SignupPage />}
-                    />
-                    <Route
-                        path="/todos"
-                        element={<TodosPage />}
-                    />
-                </Routes>
-            </div>
-        </Router>;
-    }
-}
-# Add todo input
-
-# Filter buttons
-
-# Todo list
-
-# Stats