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

jac_client/examples/css-styling/material-ui/app.jac

@@ -0,0 +1,122 @@
+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,27 @@
+
+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,64 @@
+# 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,111 @@
+.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,27 @@
+
+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,64 @@
+# 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"
+  }
+}