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

jac_client/examples/little-x/src/submit-button.jac

@@ -0,0 +1,16 @@
+cl def:pub SubmitButton -> any {
+    return <button
+        type="submit"
+        style={{
+            "width": "100%",
+            "padding": "10px",
+            "backgroundColor": "#1da1f2",
+            "color": "white",
+            "border": "none",
+            "borderRadius": "4px",
+            "cursor": "pointer"
+        }}
+    >
+        Sign Up
+    </button>;
+}

jac_client/examples/nested-folders/nested-advance/src/ButtonRoot.jac

@@ -0,0 +1,11 @@
+# Root Level Button
+cl import from antd { Button }
+
+cl def:pub ButtonRoot -> any {
+    return <Button
+        type="primary"
+        size="large"
+    >
+        Root Level Button
+    </Button>;
+}

jac_client/examples/nested-folders/nested-advance/src/app.jac

@@ -0,0 +1,35 @@
+# Nested Folder Levels Example
+cl import from .ButtonRoot { ButtonRoot }
+cl import from .level1.ButtonSecondL { ButtonSecondL }
+cl import from .level1.level2.ButtonThirdL { ButtonThirdL }
+cl import from .level1.Card { Card }
+
+cl def:pub app -> any {
+    return <div
+        style={{padding: "20px"}}
+    >
+        <h1>
+            Nested Folder Levels Demo
+        </h1>
+        <div
+            style={{margin: "10px 0"}}
+        >
+            <ButtonRoot />
+        </div>
+        <div
+            style={{margin: "10px 0"}}
+        >
+            <ButtonSecondL />
+        </div>
+        <div
+            style={{margin: "10px 0"}}
+        >
+            <ButtonThirdL />
+        </div>
+        <div
+            style={{margin: "10px 0"}}
+        >
+            <Card />
+        </div>
+    </div>;
+}

jac_client/examples/nested-folders/nested-advance/src/level1/ButtonSecondL.jac

@@ -0,0 +1,19 @@
+# Second Level Button (level1/)
+cl import from antd { Button }
+cl import from ..ButtonRoot { ButtonRoot }
+
+cl def:pub ButtonSecondL -> any {
+    return <div>
+        <Button
+            type="default"
+            size="large"
+        >
+            Second Level Button (imports from root)
+        </Button>
+        <div
+            style={{marginTop: "10px"}}
+        >
+            <ButtonRoot />
+        </div>
+    </div>;
+}

jac_client/examples/nested-folders/nested-advance/src/level1/Card.jac

@@ -0,0 +1,43 @@
+# Card Component on Second Level
+# Imports from both above (root) and below (level2)
+cl import from ..ButtonRoot {
+    ButtonRoot
+}
+cl import from .level2.ButtonThirdL { ButtonThirdL }
+
+cl def:pub Card -> any {
+    return <div
+        style={{
+            border: "2px solid #007bff",
+            borderRadius: "8px",
+            padding: "20px",
+            margin: "10px 0",
+            backgroundColor: "#f8f9fa"
+        }}
+    >
+        <h3>
+            Card Component (Second Level)
+        </h3>
+        <p>
+            This card imports from:
+        </p>
+        <ul>
+            <li>
+                Root level: ButtonRoot (using ..)
+            </li>
+            <li>
+                Third level: ButtonThirdL (using .level2)
+            </li>
+        </ul>
+        <div
+            style={{marginTop: "15px"}}
+        >
+            <ButtonRoot />
+        </div>
+        <div
+            style={{marginTop: "10px"}}
+        >
+            <ButtonThirdL />
+        </div>
+    </div>;
+}

jac_client/examples/nested-folders/nested-advance/src/level1/level2/ButtonThirdL.jac

@@ -0,0 +1,25 @@
+# Third Level Button (level1/level2/)
+cl import from antd { Button }
+cl import from ...ButtonRoot { ButtonRoot }
+cl import from ..ButtonSecondL { ButtonSecondL }
+
+cl def:pub ButtonThirdL -> any {
+    return <div>
+        <Button
+            type="dashed"
+            size="large"
+        >
+            Third Level Button (imports from root and second level)
+        </Button>
+        <div
+            style={{marginTop: "10px"}}
+        >
+            <ButtonRoot />
+        </div>
+        <div
+            style={{marginTop: "10px"}}
+        >
+            <ButtonSecondL />
+        </div>
+    </div>;
+}

jac_client/examples/nested-folders/nested-basic/src/app.jac

@@ -0,0 +1,13 @@
+cl import from .components.button { CustomButton }
+cl import from .button { CustomButtonRoot }
+
+cl def RelativeImport -> any {
+    return <div>
+        <CustomButton />
+        <CustomButtonRoot />
+    </div>;
+}
+
+cl def:pub app -> any {
+    return <RelativeImport />;
+}

jac_client/examples/nested-folders/nested-basic/src/button.jac

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

jac_client/examples/nested-folders/nested-basic/src/components/button.jac

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

jac_client/examples/ts-support/src/app.jac

@@ -0,0 +1,35 @@
+
+# Pages
+cl import from react { useState, useEffect }
+cl import from ".components/Button.tsx" { Button }
+
+cl {
+    def:pub app -> any {
+        [count, setCount] = useState(0);
+        useEffect(lambda   -> None{ console.log("Count: ", count);} , [count]);
+        return <div
+            style={{padding: "2rem", fontFamily: "Arial, sans-serif"}}
+        >
+            <h1>
+                Hello, World!
+            </h1>
+            <p>
+                Count: {count}
+            </p>
+            <div
+                style={{display: "flex", gap: "1rem", marginTop: "1rem"}}
+            >
+                <Button
+                    label="Increment"
+                    onClick={lambda   -> None{ setCount(count + 1);} }
+                    variant="primary"
+                />
+                <Button
+                    label="Reset"
+                    onClick={lambda   -> None{ setCount(0);} }
+                    variant="secondary"
+                />
+            </div>
+        </div>;
+    }
+}

jac_client/examples/with-router/src/app.jac

@@ -0,0 +1,323 @@
+# React Router HashRouter Example
+cl import from react { useState, useEffect }
+cl import from "@jac-client/utils" {
+    Router,
+    Routes,
+    Route,
+    Link,
+    useNavigate,
+    useLocation,
+    useParams
+}
+
+cl {
+    # Home Page Component
+    def Home -> any {
+        location = useLocation();
+        navigate = useNavigate();
+
+        def goToAbout(e: any) -> None {
+            navigate("/about");
+        }
+
+        return <div>
+            <h1>
+                🏠 Home Page
+            </h1>
+            <p>
+                Welcome to the home page!
+            </p>
+            <p>
+                This example uses React Router's
+                <strong>
+                    HashRouter
+                </strong>
+                #  for client-side routing.
+            </p>
+            <p>
+                Current path:
+                <code>
+                    {location.pathname}
+                </code>
+            </p>
+            <button
+                onClick={goToAbout}
+            >
+                Go to About →
+            </button>
+        </div>;
+    }
+
+    # About Page Component
+    def About -> any {
+        location = useLocation();
+
+        return <div>
+            <h1>
+                ℹ️ About Page
+            </h1>
+            <p>
+                This is the about page.
+            </p>
+            <p>
+                Learn more about our application here.
+            </p>
+            <p>
+                Current path:
+                <code>
+                    {location.pathname}
+                </code>
+            </p>
+            <div
+                style={{"marginTop": "1rem"}}
+            >
+                <Link to="/about/team">
+                    View Team →
+                </Link>
+            </div>
+        </div>;
+    }
+
+    # Team Page Component (nested route example)
+    def Team -> any {
+        return <div>
+            <h1>
+                👥 Our Team
+            </h1>
+            <p>
+                Meet the amazing team behind this project!
+            </p>
+            <Link to="/about">
+                ← Back to About
+            </Link>
+        </div>;
+    }
+
+    # User Profile Component (with URL parameters)
+    def UserProfile -> any {
+        params = useParams();
+        userId = params.id if params.id else "Unknown";
+
+        return <div>
+            <h1>
+                👤 User Profile
+            </h1>
+            <p>
+                Viewing profile for user:
+                <strong>
+                    {userId}
+                </strong>
+            </p>
+            <p>
+                This demonstrates URL parameters using
+                <code>
+                    /user/:id
+                </code>
+            </p>
+            <Link to="/">
+                ← Back to Home
+            </Link>
+        </div>;
+    }
+
+    # Contact Page Component
+    def Contact -> any {
+        [submitted, setSubmitted] = useState(False);
+
+        def handleSubmit(e: any) -> None {
+            e.preventDefault();
+            setSubmitted(True);
+        }
+
+        def resetForm(e: any) -> None {
+            setSubmitted(False);
+        }
+
+        if submitted {
+            return <div>
+                <h1>
+                    📧 Contact Page
+                </h1>
+                <div
+                    style={{"color": "green"}}
+                >
+                    <p>
+                        ✓ Thank you! Your message has been sent.
+                    </p>
+                    <button
+                        onClick={resetForm}
+                    >
+                        Send another
+                    </button>
+                </div>
+            </div>;
+        }
+
+        return <div>
+            <h1>
+                📧 Contact Page
+            </h1>
+            <p>
+                Get in touch with us!
+            </p>
+            <form
+                onSubmit={handleSubmit}
+            >
+                <input
+                    type="text"
+                    placeholder="Your name"
+                    style={{"margin": "0.5rem 0", "display": "block"}}
+                />
+                <input
+                    type="text"
+                    placeholder="Your username"
+                    style={{"margin": "0.5rem 0", "display": "block"}}
+                />
+                <textarea
+                    placeholder="Your message"
+                    style={{"margin": "0.5rem 0", "display": "block"}}
+                ></textarea>
+                <button type="submit">
+                    Send Message
+                </button>
+            </form>
+        </div>;
+    }
+
+    # 404 Not Found Component
+    def NotFound -> any {
+        location = useLocation();
+        navigate = useNavigate();
+
+        def goHome(e: any) -> None {
+            navigate("/");
+        }
+
+        return <div
+            style={{"textAlign": "center", "padding": "2rem"}}
+        >
+            <h1>
+                🔍 404 - Page Not Found
+            </h1>
+            <p>
+                The page
+                <code>
+                    {location.pathname}
+                </code>
+                does not exist.
+            </p>
+            <button
+                onClick={goHome}
+            >
+                Go Home
+            </button>
+        </div>;
+    }
+
+    # Navigation Component with active link styling
+    def Navigation -> any {
+        location = useLocation();
+
+        def linkStyle(path: str) -> dict {
+            isActive = location.pathname == path;
+            return {
+                "padding": "0.5rem 1rem",
+                "textDecoration": "none",
+                "color": "#0066cc" if isActive else "#333",
+                "fontWeight": "bold" if isActive else "normal",
+                "backgroundColor": "#e3f2fd" if isActive else "transparent",
+                "borderRadius": "4px",
+                "display": "inline-block"
+            };
+        }
+
+        return <nav
+            style={{
+                "padding": "1rem",
+                "backgroundColor": "#f5f5f5",
+                "marginBottom": "2rem",
+                "boxShadow": "0 2px 4px rgba(0,0,0,0.1)"
+            }}
+        >
+            <div
+                style={{
+                    "maxWidth": "1200px",
+                    "margin": "0 auto",
+                    "display": "flex",
+                    "gap": "1rem",
+                    "alignItems": "center"
+                }}
+            >
+                <Link
+                    to="/"
+                    style={linkStyle("/")}
+                >
+                    Home
+                </Link>
+                <Link
+                    to="/about"
+                    style={linkStyle("/about")}
+                >
+                    About
+                </Link>
+                <Link
+                    to="/contact"
+                    style={linkStyle("/contact")}
+                >
+                    Contact
+                </Link>
+                <Link
+                    to="/user/123"
+                    style={linkStyle("/user/123")}
+                >
+                    Profile Demo
+                </Link>
+            </div>
+        </nav>;
+    }
+
+    # Main App Component with React Router HashRouter
+    def:pub app -> any {
+        return <Router>
+            <div
+                style={{"fontFamily": "system-ui, -apple-system, sans-serif"}}
+            >
+                <Navigation />
+                <div
+                    style={{
+                        "maxWidth": "1200px",
+                        "margin": "0 auto",
+                        "padding": "0 1rem"
+                    }}
+                >
+                    <Routes>
+                        <Route
+                            path="/"
+                            element={<Home />}
+                        />
+                        <Route
+                            path="/about"
+                            element={<About />}
+                        />
+                        <Route
+                            path="/about/team"
+                            element={<Team />}
+                        />
+                        <Route
+                            path="/contact"
+                            element={<Contact />}
+                        />
+                        <Route
+                            path="/user/:id"
+                            element={<UserProfile />}
+                        />
+                        <Route
+                            path="*"
+                            element={<NotFound />}
+                        />
+                    </Routes>
+                </div>
+            </div>
+        </Router>;
+    }
+}