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

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

@@ -0,0 +1,100 @@
+// Style objects for the counter app
+const countDisplay = {
+    fontSize: "3.75rem",
+    fontWeight: "bold",
+    transition: "color 0.3s ease"
+};
+
+const button = {
+    color: "#ffffff",
+    fontWeight: "bold",
+    padding: "0.75rem 1.5rem",
+    borderRadius: "0.5rem",
+    boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+    transition: "all 0.2s ease",
+    fontSize: "1.25rem",
+    border: "none",
+    cursor: "pointer"
+};
+
+export default {
+    container: {
+        minHeight: "100vh",
+        background: "linear-gradient(to bottom right, #dbeafe, #e0e7ff)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "1rem"
+    },
+    card: {
+        backgroundColor: "#ffffff",
+        borderRadius: "1rem",
+        boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        padding: "2rem",
+        maxWidth: "28rem",
+        width: "100%"
+    },
+    title: {
+        fontSize: "1.875rem",
+        fontWeight: "bold",
+        color: "#1f2937",
+        textAlign: "center",
+        marginBottom: "1.5rem"
+    },
+    divider: {
+        height: "1px",
+        background: "linear-gradient(to right, transparent, #d1d5db, transparent)",
+        marginBottom: "1.5rem"
+    },
+    counterSection: {
+        textAlign: "center",
+        marginBottom: "2rem"
+    },
+    label: {
+        fontSize: "0.875rem",
+        fontWeight: "600",
+        color: "#4b5563",
+        marginBottom: "0.5rem",
+        textTransform: "uppercase",
+        letterSpacing: "0.05em"
+    },
+    countDisplay: countDisplay,
+    countDisplayZero: {
+        ...countDisplay,
+        color: "#1f2937"
+    },
+    countDisplayPositive: {
+        ...countDisplay,
+        color: "#16a34a"
+    },
+    countDisplayNegative: {
+        ...countDisplay,
+        color: "#dc2626"
+    },
+    buttonGroup: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "1rem",
+        marginBottom: "1.5rem"
+    },
+    button: button,
+    buttonDecrement: {
+        ...button,
+        backgroundColor: "#ef4444"
+    },
+    buttonReset: {
+        ...button,
+        backgroundColor: "#6b7280"
+    },
+    buttonIncrement: {
+        ...button,
+        backgroundColor: "#22c55e"
+    },
+    hint: {
+        textAlign: "center",
+        fontSize: "0.875rem",
+        color: "#6b7280",
+        fontStyle: "italic"
+    }
+};

jac_client/examples/css-styling/js-styling/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/material-ui/.babelrc

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

jac_client/examples/css-styling/material-ui/README.md

@@ -0,0 +1,16 @@
+# my-test-app
+
+## 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/material-ui/app.jac

@@ -0,0 +1,82 @@
+cl import from react {useState, useEffect}
+cl import from '@mui/material/Button' { default as Button }
+cl import from '@mui/material/Card' { default as Card }
+cl import from '@mui/material/CardContent' { default as CardContent }
+cl import from '@mui/material/CardActions' { default as CardActions }
+cl import from '@mui/material/Typography' { default as Typography }
+cl import from '@mui/material/IconButton' { default as IconButton }
+cl import from '@mui/material/Box' { default as Box }
+cl import from '@mui/material/Divider' { default as Divider }
+cl import from '@mui/icons-material/Add' { default as AddIcon }
+cl import from '@mui/icons-material/Remove' { default as RemoveIcon }
+cl import from '@mui/icons-material/Refresh' { default as RefreshIcon }
+
+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 <Box sx={{"display": "flex", "justifyContent": "center", "alignItems": "center", "minHeight": "100vh", "backgroundColor": "#f5f5f5"}}>
+            <Card sx={{"minWidth": 400, "boxShadow": 3}}>
+                <CardContent>
+                    <Typography variant="h4" component="div" gutterBottom sx={{"textAlign": "center", "color": "primary.main"}}>
+                        Counter Application
+                    </Typography>
+                    <Divider sx={{"my": 2}} />
+                    <Box sx={{"display": "flex", "flexDirection": "column", "alignItems": "center", "py": 3}}>
+                        <Typography variant="h6" color="text.secondary" gutterBottom>
+                            Current Count
+                        </Typography>
+                        <Typography variant="h1" component="div" sx={{"fontWeight": "bold", "color": "success.main" if count > 0 else "error.main" if count < 0 else "text.primary"}}>
+                            {count}
+                        </Typography>
+                    </Box>
+                </CardContent>
+                <Divider />
+                <CardActions sx={{"display": "flex", "justifyContent": "space-around", "p": 2}}>
+                    <IconButton
+                        color="error"
+                        size="large"
+                        onClick={handleDecrement}
+                        sx={{"border": "2px solid", "borderColor": "error.main"}}>
+                        <RemoveIcon />
+                    </IconButton>
+                    <IconButton
+                        color="primary"
+                        size="large"
+                        onClick={handleReset}
+                        sx={{"border": "2px solid", "borderColor": "primary.main"}}>
+                        <RefreshIcon />
+                    </IconButton>
+                    <IconButton
+                        color="success"
+                        size="large"
+                        onClick={handleIncrement}
+                        sx={{"border": "2px solid", "borderColor": "success.main"}}>
+                        <AddIcon />
+                    </IconButton>
+                </CardActions>
+                <Box sx={{"px": 3, "pb": 2}}>
+                    <Typography variant="caption" color="text.secondary" sx={{"display": "block", "textAlign": "center"}}>
+                        Click the buttons to increment, decrement, or reset the counter
+                    </Typography>
+                </Box>
+            </Card>
+        </Box>;
+    }
+}

jac_client/examples/css-styling/material-ui/package.json

@@ -0,0 +1,32 @@
+{
+  "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": {
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "vite": "^6.4.1"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.5",
+    "@mui/material": "^7.3.5",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^6.30.1"
+  }
+}

jac_client/examples/css-styling/material-ui/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/pure-css/.babelrc

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

jac_client/examples/css-styling/pure-css/README.md

@@ -0,0 +1,16 @@
+# my-test-app
+
+## 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/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"
+  }
+}