jac-client 0.2.0__py3-none-any.whl → 0.2.1__py3-none-any.whl

jac_client/examples/css-styling/pure-css/app.jac

@@ -0,0 +1,63 @@
+# Pages
+cl import from react {useState, useEffect}
+cl import ".styles.css";
+
+cl {
+    def app() -> any {
+        let [count, setCount] = useState(0);
+
+        useEffect(lambda -> None {
+            console.log("Count changed: ", count);
+        }, [count]);
+
+        let handleIncrement = lambda e: any -> None {
+            setCount(count + 1);
+        };
+
+        let handleDecrement = lambda e: any -> None {
+            setCount(count - 1);
+        };
+
+        let handleReset = lambda e: any -> None {
+            setCount(0);
+        };
+
+        let countClass = "countDisplay " + ("positive" if count > 0 else "negative" if count < 0 else "zero");
+
+        return <div className="container">
+            <div className="card">
+                <h1 className="title">Counter Application</h1>
+                <div className="divider"></div>
+
+                <div className="counterSection">
+                    <div className="label">Current Count</div>
+                    <div className={countClass}>{count}</div>
+                </div>
+
+                <div className="divider"></div>
+
+                <div className="buttonGroup">
+                    <button
+                        className="btn btnDecrement"
+                        onClick={handleDecrement}>
+                        -
+                    </button>
+                    <button
+                        className="btn btnReset"
+                        onClick={handleReset}>
+                        ↻
+                    </button>
+                    <button
+                        className="btn btnIncrement"
+                        onClick={handleIncrement}>
+                        +
+                    </button>
+                </div>
+
+                <div className="hint">
+                    Click the buttons to increment, decrement, or reset the counter
+                </div>
+            </div>
+        </div>;
+    }
+}

jac_client/examples/css-styling/pure-css/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "my-test-app",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "build": "npm run compile && vite build",
+    "dev": "vite dev",
+    "preview": "vite preview",
+    "compile": "babel src --out-dir build --extensions \".jsx,.js\" --out-file-extension .js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "Jac application: my-test-app",
+  "type": "module",
+  "devDependencies": {
+    "vite": "^6.4.1",
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^6.30.1"
+  }
+}

jac_client/examples/css-styling/pure-css/styles.css

@@ -0,0 +1,112 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.card {
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    padding: 40px;
+    min-width: 400px;
+    text-align: center;
+}
+
+.title {
+    font-size: 2rem;
+    color: #667eea;
+    margin: 0 0 10px 0;
+    font-weight: 600;
+}
+
+.divider {
+    height: 2px;
+    background: linear-gradient(90deg, transparent, #667eea, transparent);
+    margin: 20px 0;
+}
+
+.counterSection {
+    padding: 30px 0;
+}
+
+.label {
+    font-size: 1.2rem;
+    color: #666;
+    margin-bottom: 10px;
+}
+
+.countDisplay {
+    font-size: 5rem;
+    font-weight: bold;
+    margin: 20px 0;
+    transition: color 0.3s ease;
+}
+
+.positive {
+    color: #4caf50;
+}
+
+.negative {
+    color: #f44336;
+}
+
+.zero {
+    color: #333;
+}
+
+.buttonGroup {
+    display: flex;
+    justify-content: space-around;
+    gap: 15px;
+    margin-top: 30px;
+}
+
+.btn {
+    border: none;
+    border-radius: 50%;
+    width: 70px;
+    height: 70px;
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+.btnDecrement {
+    background: linear-gradient(135deg, #f44336, #e91e63);
+    color: white;
+}
+
+.btnReset {
+    background: linear-gradient(135deg, #2196f3, #00bcd4);
+    color: white;
+}
+
+.btnIncrement {
+    background: linear-gradient(135deg, #4caf50, #8bc34a);
+    color: white;
+}
+
+.hint {
+    margin-top: 20px;
+    font-size: 0.9rem;
+    color: #999;
+}
+

jac_client/examples/css-styling/pure-css/vite.config.js

@@ -0,0 +1,28 @@
+
+import { defineConfig } from "vite";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  root: ".", // base folder
+  build: {
+    rollupOptions: {
+      input: "build/main.js", // your compiled entry file
+      output: {
+        entryFileNames: "client.[hash].js", // name of the final js file
+        assetFileNames: "[name].[ext]",
+      },
+    },
+    outDir: "dist", // final bundled output
+    emptyOutDir: true,
+  },
+  publicDir: false,
+  resolve: {
+    alias: {
+      "@jac-client/utils": path.resolve(__dirname, "src/client_runtime.js"),
+    },
+  },
+});
+

jac_client/examples/css-styling/sass-example/.babelrc

@@ -0,0 +1,9 @@
+
+{
+    "presets": [[
+        "@babel/preset-env",
+        {
+            "modules": false
+        }
+    ], "@babel/preset-react"]
+}

jac_client/examples/css-styling/sass-example/README.md

@@ -0,0 +1,16 @@
+# sass-example
+
+## Running Jac Code
+
+make sure node modules are installed:
+```bash
+npm install
+```
+
+To run your Jac code, use the Jac CLI:
+
+```bash
+jac serve app.jac
+```
+
+Happy coding with Jac!

jac_client/examples/css-styling/sass-example/app.jac

@@ -0,0 +1,63 @@
+# Pages
+cl import from react {useState, useEffect}
+cl import ".styles.scss";
+
+cl {
+    def app() -> any {
+        let [count, setCount] = useState(0);
+
+        useEffect(lambda -> None {
+            console.log("Count changed: ", count);
+        }, [count]);
+
+        let handleIncrement = lambda e: any -> None {
+            setCount(count + 1);
+        };
+
+        let handleDecrement = lambda e: any -> None {
+            setCount(count - 1);
+        };
+
+        let handleReset = lambda e: any -> None {
+            setCount(0);
+        };
+
+        let countClass = "countDisplay " + ("positive" if count > 0 else "negative" if count < 0 else "zero");
+
+        return <div className="container">
+            <div className="card">
+                <h1 className="title">Counter Application</h1>
+                <div className="divider"></div>
+
+                <div className="counterSection">
+                    <div className="label">Current Count</div>
+                    <div className={countClass}>{count}</div>
+                </div>
+
+                <div className="divider"></div>
+
+                <div className="buttonGroup">
+                    <button
+                        className="btn btnDecrement"
+                        onClick={handleDecrement}>
+                        -
+                    </button>
+                    <button
+                        className="btn btnReset"
+                        onClick={handleReset}>
+                        ↻
+                    </button>
+                    <button
+                        className="btn btnIncrement"
+                        onClick={handleIncrement}>
+                        +
+                    </button>
+                </div>
+
+                <div className="hint">
+                    Click the buttons to increment, decrement, or reset the counter
+                </div>
+            </div>
+        </div>;
+    }
+}

jac_client/examples/css-styling/sass-example/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "sass-example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "build": "npm run compile && vite build",
+    "dev": "vite dev",
+    "preview": "vite preview",
+    "compile": "babel src --out-dir build --extensions \".jsx,.js\" --out-file-extension .js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "Jac application: sass-example",
+  "type": "module",
+  "devDependencies": {
+    "vite": "^6.4.1",
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "sass": "^1.77.8"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^6.30.1"
+  }
+}

jac_client/examples/css-styling/sass-example/styles.scss

@@ -0,0 +1,158 @@
+// Sass Variables
+$primary-gradient-start: #dbeafe;
+$primary-gradient-end: #e0e7ff;
+$white: #ffffff;
+$gray-800: #1f2937;
+$gray-600: #4b5563;
+$gray-500: #6b7280;
+$green-600: #16a34a;
+$red-500: #ef4444;
+$red-600: #dc2626;
+
+// Mixins
+@mixin flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@mixin button-base {
+    color: $white;
+    font-weight: bold;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    transition: all 0.2s ease;
+    font-size: 1.25rem;
+    border: none;
+    cursor: pointer;
+
+    &:hover {
+        transform: scale(1.05);
+    }
+
+    &:active {
+        transform: scale(0.95);
+    }
+}
+
+@mixin gradient-divider {
+    height: 1px;
+    background: linear-gradient(to right, transparent, $gray-500, transparent);
+    margin-bottom: 1.5rem;
+}
+
+// Container
+.container {
+    min-height: 100vh;
+    background: linear-gradient(to bottom right, $primary-gradient-start, $primary-gradient-end);
+    @include flex-center;
+    padding: 1rem;
+}
+
+// Card
+.card {
+    background-color: $white;
+    border-radius: 1rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    padding: 2rem;
+    max-width: 28rem;
+    width: 100%;
+}
+
+// Title
+.title {
+    font-size: 1.875rem;
+    font-weight: bold;
+    color: $gray-800;
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+// Divider
+.divider {
+    @include gradient-divider;
+}
+
+// Counter Section
+.counterSection {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: $gray-600;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+// Count Display with dynamic colors
+.countDisplay {
+    font-size: 3.75rem;
+    font-weight: bold;
+    transition: color 0.3s ease;
+
+    &.zero {
+        color: $gray-800;
+    }
+
+    &.positive {
+        color: $green-600;
+    }
+
+    &.negative {
+        color: $red-600;
+    }
+}
+
+// Button Group
+.buttonGroup {
+    @include flex-center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+// Buttons
+.btn {
+    @include button-base;
+
+    &Decrement {
+        background-color: $red-500;
+
+        &:hover {
+            background-color: darken($red-500, 10%);
+        }
+    }
+
+    &Reset {
+        background-color: $gray-500;
+
+        &:hover {
+            background-color: darken($gray-500, 10%);
+        }
+    }
+
+    &Increment {
+        background-color: $green-600;
+
+        &:hover {
+            background-color: darken($green-600, 10%);
+        }
+    }
+}
+
+// Hint
+.hint {
+    text-align: center;
+    font-size: 0.875rem;
+    color: $gray-500;
+    font-style: italic;
+}
+
+
+
+
+

jac_client/examples/css-styling/sass-example/vite.config.js

@@ -0,0 +1,28 @@
+
+import { defineConfig } from "vite";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  root: ".", // base folder
+  build: {
+    rollupOptions: {
+      input: "build/main.js", // your compiled entry file
+      output: {
+        entryFileNames: "client.[hash].js", // name of the final js file
+        assetFileNames: "[name].[ext]",
+      },
+    },
+    outDir: "dist", // final bundled output
+    emptyOutDir: true,
+  },
+  publicDir: false,
+  resolve: {
+    alias: {
+      "@jac-client/utils": path.resolve(__dirname, "src/client_runtime.js"),
+    },
+  },
+});
+

jac_client/examples/css-styling/styled-components/.babelrc

@@ -0,0 +1,9 @@
+
+{
+    "presets": [[
+        "@babel/preset-env",
+        {
+            "modules": false
+        }
+    ], "@babel/preset-react"]
+}

jac_client/examples/css-styling/styled-components/README.md

@@ -0,0 +1,16 @@
+# styled-components
+
+## Running Jac Code
+
+make sure node modules are installed:
+```bash
+npm install
+```
+
+To run your Jac code, use the Jac CLI:
+
+```bash
+jac serve app.jac
+```
+
+Happy coding with Jac!

jac_client/examples/css-styling/styled-components/app.jac

@@ -0,0 +1,66 @@
+# Pages
+cl import from react {useState, useEffect}
+cl import from .styled {
+    Container,
+    Card,
+    Title,
+    Divider,
+    CounterSection,
+    Label,
+    CountDisplay,
+    ButtonGroup,
+    Button,
+    Hint
+}
+
+cl {
+    def app() -> any {
+        let [count, setCount] = useState(0);
+
+        useEffect(lambda -> None {
+            console.log("Count changed: ", count);
+        }, [count]);
+
+        let handleIncrement = lambda e: any -> None {
+            setCount(count + 1);
+        };
+
+        let handleDecrement = lambda e: any -> None {
+            setCount(count - 1);
+        };
+
+        let handleReset = lambda e: any -> None {
+            setCount(0);
+        };
+
+        return <Container>
+            <Card>
+                <Title>Counter Application</Title>
+                <Divider></Divider>
+
+                <CounterSection>
+                    <Label>Current Count</Label>
+                    <CountDisplay count={count}>{count}</CountDisplay>
+                </CounterSection>
+
+                <Divider></Divider>
+
+                <ButtonGroup>
+                    <Button bgColor="#ef4444" onClick={handleDecrement}>
+                        -
+                    </Button>
+                    <Button bgColor="#6b7280" onClick={handleReset}>
+                        ↻
+                    </Button>
+                    <Button bgColor="#22c55e" onClick={handleIncrement}>
+                        +
+                    </Button>
+                </ButtonGroup>
+
+                <Hint>
+                    Click the buttons to increment, decrement, or reset the counter
+                </Hint>
+            </Card>
+        </Container>;
+    }
+}

jac_client/examples/css-styling/styled-components/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "styled-components",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "build": "npm run compile && vite build",
+    "dev": "vite dev",
+    "preview": "vite preview",
+    "compile": "babel src --out-dir build --extensions \".jsx,.js\" --out-file-extension .js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "Jac application: styled-components",
+  "type": "module",
+  "devDependencies": {
+    "vite": "^6.4.1",
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^6.30.1",
+    "styled-components": "^6.1.13"
+  }
+}