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

jac_client/examples/all-in-one/src/button.jac

@@ -0,0 +1,7 @@
+cl import from antd { Button }
+
+cl def:pub CustomButtonRoot -> any {
+    return <Button>
+        Root Button
+    </Button>;
+}

jac_client/examples/all-in-one/src/components/button.jac

@@ -0,0 +1,7 @@
+cl import from antd { Button }
+
+cl def:pub CustomButton -> any {
+    return <Button>
+        Nested Button
+    </Button>;
+}

jac_client/examples/asset-serving/css-with-image/src/app.jac

@@ -0,0 +1,88 @@
+# Pages
+cl import from react { useState, useEffect }
+cl import ".styles.css";
+
+cl {
+    def:pub app -> any {
+        [count, setCount] = useState(0);
+        useEffect(lambda   -> None{ console.log("Count: ", count);} , [count]);
+        return <div
+            style={{
+                padding: "20px",
+                textAlign: "center",
+                fontFamily: "Arial, sans-serif"
+            }}
+        >
+            <h1>
+                🍔 Burger Counter App
+            </h1>
+            <img
+                src="/static/assets/burger.png"
+                alt="Delicious Burger"
+                style={{
+                    width: "200px",
+                    height: "auto",
+                    margin: "20px 0",
+                    borderRadius: "10px",
+                    boxShadow: "0 4px 8px rgba(0,0,0,0.2)"
+                }}
+            />
+            <p
+                style={{fontSize: "18px", margin: "20px 0"}}
+            >
+                You've clicked the burger
+                <strong>
+                    {count}
+                </strong>
+                times!
+            </p>
+            <button
+                onClick={lambda  e: any  -> None{ setCount(count + 1);} }
+                style={{
+                    padding: "10px 20px",
+                    fontSize: "16px",
+                    backgroundColor: "#ff6b35",
+                    color: "white",
+                    border: "none",
+                    borderRadius: "5px",
+                    cursor: "pointer",
+                    boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
+                }}
+            >
+                Click the Burger! 🍔
+            </button>
+            <h2
+                style={{marginTop: "40px", marginBottom: "20px"}}
+            >
+                CSS Asset Examples
+            </h2>
+            <div className="container">
+                <h3
+                    style={{color: "white", textShadow: "2px 2px 4px rgba(0,0,0,0.5)"}}
+                >
+                    Background Image Example
+                </h3>
+                <p
+                    style={{color: "white", textShadow: "2px 2px 4px rgba(0,0,0,0.5)"}}
+                >
+                    This container uses the burger image as a background via CSS
+                </p>
+            </div>
+            <div className="card">
+                <h3>
+                    Image in Card
+                </h3>
+                <img
+                    src="/static/assets/burger.png"
+                    alt="Burger in Card"
+                    className="burgerImage"
+                />
+                <p
+                    style={{marginTop: "15px", color: "#666"}}
+                >
+                    This image is displayed within a styled card using CSS classes
+                </p>
+            </div>
+        </div>;
+    }
+}

jac_client/examples/asset-serving/image-asset/src/app.jac

@@ -0,0 +1,55 @@
+# Pages
+cl import from react { useState, useEffect }
+
+cl {
+    def:pub app -> any {
+        [count, setCount] = useState(0);
+        useEffect(lambda   -> None{ console.log("Count: ", count);} , [count]);
+        return <div
+            style={{
+                padding: "20px",
+                textAlign: "center",
+                fontFamily: "Arial, sans-serif"
+            }}
+        >
+            <h1>
+                🍔 Burger Counter App
+            </h1>
+            <img
+                src="/static/assets/burger.png"
+                alt="Delicious Burger"
+                style={{
+                    width: "200px",
+                    height: "auto",
+                    margin: "20px 0",
+                    borderRadius: "10px",
+                    boxShadow: "0 4px 8px rgba(0,0,0,0.2)"
+                }}
+            />
+            <p
+                style={{fontSize: "18px", margin: "20px 0"}}
+            >
+                You've clicked the burger
+                <strong>
+                    {count}
+                </strong>
+                times!
+            </p>
+            <button
+                onClick={lambda  e: any  -> None{ setCount(count + 1);} }
+                style={{
+                    padding: "10px 20px",
+                    fontSize: "16px",
+                    backgroundColor: "#ff6b35",
+                    color: "white",
+                    border: "none",
+                    borderRadius: "5px",
+                    cursor: "pointer",
+                    boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
+                }}
+            >
+                Click the Burger! 🍔
+            </button>
+        </div>;
+    }
+}

jac_client/examples/asset-serving/import-alias/src/app.jac

@@ -0,0 +1,111 @@
+# Pages
+cl import from react { useState, useEffect }
+# Import image using the @jac-client/assets alias
+cl import from "@jac-client/assets/burger.png" {
+    default as burgerImage
+}
+
+cl {
+    def:pub app -> any {
+        [count, setCount] = useState(0);
+        useEffect(lambda   -> None{ console.log("Count: ", count);} , [count]);
+        return <div
+            style={{
+                padding: "20px",
+                textAlign: "center",
+                fontFamily: "Arial, sans-serif"
+            }}
+        >
+            <h1>
+                🍔 Import Alias Example
+            </h1>
+            <p
+                style={{color: "#666", marginBottom: "20px"}}
+            >
+                Using
+                <code>
+                    @jac-client/assets
+                </code>
+                alias to import assets
+            </p>
+            <img
+                src={burgerImage}
+                alt="Delicious Burger"
+                style={{
+                    width: "200px",
+                    height: "auto",
+                    margin: "20px 0",
+                    borderRadius: "10px",
+                    boxShadow: "0 4px 8px rgba(0,0,0,0.2)"
+                }}
+            />
+            <p
+                style={{fontSize: "18px", margin: "20px 0"}}
+            >
+                You've clicked the burger
+                <strong>
+                    {count}
+                </strong>
+                times!
+            </p>
+            <button
+                onClick={lambda  e: any  -> None{ setCount(count + 1);} }
+                style={{
+                    padding: "10px 20px",
+                    fontSize: "16px",
+                    backgroundColor: "#ff6b35",
+                    color: "white",
+                    border: "none",
+                    borderRadius: "5px",
+                    cursor: "pointer",
+                    boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
+                }}
+            >
+                Click the Burger! 🍔
+            </button>
+            <div
+                style={{
+                    marginTop: "30px",
+                    padding: "15px",
+                    backgroundColor: "#f5f5f5",
+                    borderRadius: "5px",
+                    fontSize: "12px",
+                    textAlign: "left",
+                    maxWidth: "600px",
+                    margin: "30px auto"
+                }}
+            >
+                <strong>
+                    How it works:
+                </strong>
+                <ul
+                    style={{marginTop: "10px", paddingLeft: "20px"}}
+                >
+                    <li>
+                        Import using:
+                        <code>
+                            cl import from '@jac-client/assets/burger.png'
+                        </code>
+                    </li>
+                    <li>
+                        Vite processes the import and generates optimized URLs
+                    </li>
+                    <li>
+                        Assets are automatically copied from
+                        <code>
+                            assets/
+                        </code>
+                        to
+                        <code>
+                            compiled/assets/
+                        </code>
+                        during build
+                    </li>
+                    <li>
+                        Automatic hash generation for cache busting
+                    </li>
+                </ul>
+            </div>
+        </div>;
+    }
+}

jac_client/examples/basic/src/app.jac

@@ -0,0 +1,21 @@
+# Pages
+cl import from react { useState, useEffect }
+cl {
+    def:pub app -> any {
+        [count, setCount] = useState(0);
+        useEffect(lambda   -> None{ console.log("Count: ", count);} , [count]);
+        return <div>
+            <h1>
+                Hello, World!
+            </h1>
+            <p>
+                Count: {count}
+            </p>
+            <button
+                onClick={lambda  e: any  -> None{ setCount(count + 1);} }
+            >
+                Increment
+            </button>
+        </div>;
+    }
+}

jac_client/examples/basic-auth/src/app.jac

@@ -0,0 +1,377 @@
+# Simple Authentication App with Jac Client Utils
+cl import from react {
+    useState,
+    useEffect
+}
+cl import from '@jac-client/utils' { jacSignup, jacLogin, jacLogout, jacIsLoggedIn }
+
+cl {
+    def:pub app -> any {
+        [isLoggedIn, setIsLoggedIn] = useState(False);
+        [isSignup, setIsSignup] = useState(False);
+        [username, setUsername] = useState("");
+        [password, setPassword] = useState("");
+        [error, setError] = useState("");
+        [loading, setLoading] = useState(False);
+
+        # Check login status on mount
+        useEffect(lambda   -> None{ setIsLoggedIn(jacIsLoggedIn());} , []);
+
+        # Handle login
+        async def handleLogin -> None {
+            setError("");
+            if not username.trim() or not password {
+                setError("Please fill in all fields");
+                return;
+            }
+            setLoading(True);
+            success = await jacLogin(username, password);
+            setLoading(False);
+            if success {
+                setIsLoggedIn(True);
+                setUsername("");
+                setPassword("");
+            } else {
+                setError("Invalid username or password");
+            }
+        }
+
+        # Handle signup
+        async def handleSignup -> None {
+            setError("");
+            if not username.trim() or not password {
+                setError("Please fill in all fields");
+                return;
+            }
+            if password.length < 6 {
+                setError("Password must be at least 6 characters");
+                return;
+            }
+            setLoading(True);
+            result = await jacSignup(username, password);
+            setLoading(False);
+            if result["success"] {
+                setIsLoggedIn(True);
+                setUsername("");
+                setPassword("");
+            } else {
+                setError(result["error"] if result["error"] else "Signup failed");
+            }
+        }
+
+        # Handle logout
+        def handleLogout -> None {
+            jacLogout();
+            setIsLoggedIn(False);
+            setUsername("");
+            setPassword("");
+            setError("");
+        }
+
+        # Handle form submit
+        async def handleSubmit(e: any) -> None {
+            e.preventDefault();
+            if isSignup {
+                await handleSignup();
+            } else {
+                await handleLogin();
+            }
+        }
+
+        # Logged in view - Dashboard
+        if isLoggedIn {
+            return <div
+                style={{
+                    "minHeight": "100vh",
+                    "background": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+                    "display": "flex",
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "fontFamily": "system-ui, -apple-system, sans-serif"
+                }}
+            >
+                <div
+                    style={{
+                        "background": "#ffffff",
+                        "borderRadius": "16px",
+                        "padding": "48px",
+                        "boxShadow": "0 20px 60px rgba(0,0,0,0.3)",
+                        "maxWidth": "500px",
+                        "width": "90%",
+                        "textAlign": "center"
+                    }}
+                >
+                    <h1
+                        style={{
+                            "fontSize": "2.5rem",
+                            "marginBottom": "16px",
+                            "color": "#1f2937",
+                            "fontWeight": "700"
+                        }}
+                    >
+                        ✅ Welcome!
+                    </h1>
+                    <p
+                        style={{
+                            "fontSize": "1.1rem",
+                            "color": "#6b7280",
+                            "marginBottom": "32px"
+                        }}
+                    >
+                        You are successfully logged in
+                    </p>
+                    <div
+                        style={{
+                            "background": "#f3f4f6",
+                            "padding": "24px",
+                            "borderRadius": "12px",
+                            "marginBottom": "32px"
+                        }}
+                    >
+                        <p
+                            style={{
+                                "fontSize": "0.9rem",
+                                "color": "#6b7280",
+                                "marginBottom": "8px"
+                            }}
+                        >
+                            Logged in as:
+                        </p>
+                        <p
+                            style={{
+                                "fontSize": "1.2rem",
+                                "fontWeight": "600",
+                                "color": "#667eea"
+                            }}
+                        >
+                            User
+                        </p>
+                    </div>
+                    <button
+                        onClick={handleLogout}
+                        style={{
+                            "width": "100%",
+                            "padding": "14px 24px",
+                            "background": "#ef4444",
+                            "color": "#ffffff",
+                            "border": "none",
+                            "borderRadius": "10px",
+                            "fontSize": "16px",
+                            "fontWeight": "600",
+                            "cursor": "pointer",
+                            "transition": "all 0.3s",
+                            "boxShadow": "0 4px 12px rgba(239,68,68,0.3)"
+                        }}
+                    >
+                        Logout
+                    </button>
+                </div>
+            </div>;
+        }
+
+        # Login/Signup view
+        return <div
+            style={{
+                "minHeight": "100vh",
+                "background": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+                "display": "flex",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "fontFamily": "system-ui, -apple-system, sans-serif",
+                "padding": "20px"
+            }}
+        >
+            <div
+                style={{
+                    "background": "#ffffff",
+                    "borderRadius": "16px",
+                    "padding": "48px",
+                    "boxShadow": "0 20px 60px rgba(0,0,0,0.3)",
+                    "maxWidth": "400px",
+                    "width": "100%"
+                }}
+            >
+                # Header
+                <div
+                    style={{"textAlign": "center", "marginBottom": "32px"}}
+                >
+                    <h1
+                        style={{
+                            "fontSize": "2rem",
+                            "fontWeight": "700",
+                            "color": "#1f2937",
+                            "marginBottom": "8px"
+                        }}
+                    >
+                        {("Create Account" if isSignup else "Welcome Back")}
+                    </h1>
+                    <p
+                        style={{"color": "#6b7280", "fontSize": "0.95rem"}}
+                    >
+                        {(
+                            "Sign up to get started"
+                            if isSignup
+                            else "Sign in to continue"
+                        )}
+                    </p>
+                </div>
+                # Form
+                <form
+                    onSubmit={handleSubmit}
+                    style={{"marginBottom": "24px"}}
+                >
+                    <div
+                        style={{"marginBottom": "20px"}}
+                    >
+                        <label
+                            style={{
+                                "display": "block",
+                                "marginBottom": "8px",
+                                "color": "#374151",
+                                "fontSize": "14px",
+                                "fontWeight": "600"
+                            }}
+                        >
+                            Username
+                        </label>
+                        <input
+                            type="text"
+                            value={username}
+                            onChange={lambda  e: any  -> None{ setUsername(
+                                e.target.value
+                            );} }
+                            placeholder="Enter your username"
+                            style={{
+                                "width": "100%",
+                                "padding": "12px 16px",
+                                "border": "2px solid #e5e7eb",
+                                "borderRadius": "10px",
+                                "fontSize": "16px",
+                                "outline": "none",
+                                "transition": "border 0.2s",
+                                "boxSizing": "border-box"
+                            }}
+                        />
+                    </div>
+                    <div
+                        style={{"marginBottom": "24px"}}
+                    >
+                        <label
+                            style={{
+                                "display": "block",
+                                "marginBottom": "8px",
+                                "color": "#374151",
+                                "fontSize": "14px",
+                                "fontWeight": "600"
+                            }}
+                        >
+                            Password
+                        </label>
+                        <input
+                            type="password"
+                            value={password}
+                            onChange={lambda  e: any  -> None{ setPassword(
+                                e.target.value
+                            );} }
+                            placeholder="Enter your password"
+                            style={{
+                                "width": "100%",
+                                "padding": "12px 16px",
+                                "border": "2px solid #e5e7eb",
+                                "borderRadius": "10px",
+                                "fontSize": "16px",
+                                "outline": "none",
+                                "transition": "border 0.2s",
+                                "boxSizing": "border-box"
+                            }}
+                        />
+                    </div>
+                    {(
+                        <div
+                            style={{
+                                "padding": "12px",
+                                "background": "#fee2e2",
+                                "border": "1px solid #fecaca",
+                                "borderRadius": "8px",
+                                "marginBottom": "20px"
+                            }}
+                        >
+                            <p
+                                style={{
+                                    "color": "#dc2626",
+                                    "fontSize": "14px",
+                                    "margin": "0"
+                                }}
+                            >
+                                {error}
+                            </p>
+                        </div>
+                    )
+                    if error
+                    else None}
+                    <button
+                        type="submit"
+                        disabled={loading}
+                        style={{
+                            "width": "100%",
+                            "padding": "14px 24px",
+                            "background": (("#9ca3af" if loading else "#667eea")),
+                            "color": "#ffffff",
+                            "border": "none",
+                            "borderRadius": "10px",
+                            "fontSize": "16px",
+                            "fontWeight": "600",
+                            "cursor": (("not-allowed" if loading else "pointer")),
+                            "transition": "all 0.3s",
+                            "boxShadow": "0 4px 12px rgba(102,126,234,0.4)"
+                        }}
+                    >
+                        {(
+                            (
+                                "Processing..."
+                                if loading
+                                else ("Sign Up" if isSignup else "Sign In")
+                            )
+                        )}
+                    </button>
+                </form>
+                # Toggle between login/signup
+                <div
+                    style={{"textAlign": "center"}}
+                >
+                    <p
+                        style={{
+                            "color": "#6b7280",
+                            "fontSize": "14px",
+                            "marginBottom": "8px"
+                        }}
+                    >
+                        {(
+                            (
+                                "Already have an account?"
+                                if isSignup
+                                else "Don't have an account?"
+                            )
+                        )}
+                    </p>
+                    <button
+                        onClick={lambda   -> None{ setIsSignup(not isSignup);setError(
+                            ""
+                        );setUsername("");setPassword("");} }
+                        style={{
+                            "background": "none",
+                            "border": "none",
+                            "color": "#667eea",
+                            "fontSize": "14px",
+                            "fontWeight": "600",
+                            "cursor": "pointer",
+                            "textDecoration": "underline"
+                        }}
+                    >
+                        {(("Sign In" if isSignup else "Create Account"))}
+                    </button>
+                </div>
+            </div>
+        </div>;
+    }
+}