jac-client 0.2.8__py3-none-any.whl → 0.2.11__py3-none-any.whl

jac_client/examples/all-in-one/utils/formatters.jac

@@ -1,6 +1,5 @@
 # Utility functions for formatting
 # Demonstrates: def:pub exports, string methods
-
 cl {
     # Format number as currency - demonstrates string methods
     def:pub formatCurrency(amount: float) -> str {
@@ -12,11 +11,9 @@ cl {
     # Format ISO date string to readable format
     def:pub formatDate(dateStr: str) -> str {
         date = Reflect.construct(Date, [dateStr]);
-        return date.toLocaleDateString("en-US", {
-            "month": "short",
-            "day": "numeric",
-            "year": "numeric"
-        });
+        return date.toLocaleDateString(
+            "en-US", {"month": "short", "day": "numeric", "year": "numeric"}
+        );
     }
 
     # Capitalize first letter of string
@@ -39,12 +36,12 @@ cl {
     def:pub formatCompact(num: float) -> str {
         if num >= 1000000 {
             divided = num / 1000000;
-            rounded = (Math.round(divided * 10) / 10);
+            rounded = Math.round(divided * 10) / 10;
             return (rounded.toString().concat("M"));
         }
         if num >= 1000 {
             divided = num / 1000;
-            rounded = (Math.round(divided * 10) / 10);
+            rounded = Math.round(divided * 10) / 10;
             return rounded.toString().concat("K");
         }
         return Math.round(num).toString();

jac_client/examples/asset-serving/css-with-image/main.jac

@@ -0,0 +1,92 @@
+# Pages
+cl import ".styles.css";
+
+cl {
+    def:pub app -> any {
+        has count: int = 0;
+
+        can with count entry {
+            console.log("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 { count = 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/main.jac

@@ -0,0 +1,56 @@
+# Pages
+cl {
+    def:pub app -> any {
+        has count: int = 0;
+
+        can with count entry {
+            console.log("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 { count = 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/main.jac

@@ -0,0 +1,109 @@
+# Pages
+# Import image using the @jac-client/assets alias
+cl import from "@jac-client/assets/burger.png" {
+    default as burgerImage
+}
+
+cl {
+    def:pub app -> any {
+        has count: int = 0;
+
+        can with count entry {
+            console.log("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 { count = 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>
+                                climportfrom'@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/main.jac

@@ -0,0 +1,23 @@
+# Pages
+cl {
+    def:pub app -> any {
+        has count: int = 0;
+
+        can with count entry {
+            console.log("Count: ", count);
+        }
+
+        return
+            <div>
+                <h1>
+                    Hello, World!
+                </h1>
+                <p>
+                    Count: {count}
+                </p>
+                <button onClick={lambda e: any  -> None { count = count + 1;}}>
+                    Increment
+                </button>
+            </div>;
+    }
+}

jac_client/examples/basic-auth/main.jac

@@ -0,0 +1,363 @@
+# Simple Authentication App with Jac Client Utils
+cl import from '@jac/runtime' {
+    jacSignup,
+    jacLogin,
+    jacLogout,
+    jacIsLoggedIn
+}
+
+cl {
+    def:pub app -> any {
+        has isLoggedIn: bool = False,
+            isSignup: bool = False,
+            username: str = "",
+            password: str = "",
+            error: str = "",
+            loading: bool = False;
+
+        # Check login status on mount
+        can with entry {
+            isLoggedIn = jacIsLoggedIn();
+        }
+
+        # Handle login
+        async def handleLogin -> None {
+            error = "";
+            if not username.trim() or not password {
+                error = "Please fill in all fields";
+                return;
+            }
+            loading = True;
+            success = await jacLogin(username, password);
+            loading = False;
+            if success {
+                isLoggedIn = True;
+                username = "";
+                password = "";
+            } else {
+                error = "Invalid username or password";
+            }
+        }
+
+        # Handle signup
+        async def handleSignup -> None {
+            error = "";
+            if not username.trim() or not password {
+                error = "Please fill in all fields";
+                return;
+            }
+            if password.length < 6 {
+                error = "Password must be at least 6 characters";
+                return;
+            }
+            loading = True;
+            result = await jacSignup(username, password);
+            loading = False;
+            if result["success"] {
+                isLoggedIn = True;
+                username = "";
+                password = "";
+            } else {
+                error = result["error"] if result["error"] else "Signup failed";
+            }
+        }
+
+        # Handle logout
+        def handleLogout -> None {
+            jacLogout();
+            isLoggedIn = False;
+            username = "";
+            password = "";
+            error = "";
+        }
+
+        # 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 { username = 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 { password = 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 { isSignup = not isSignup;error = "";username = "";password = "";}}
+                            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>;
+    }
+}