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

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"
+  }
+}

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

@@ -0,0 +1,91 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+    min-height: 100vh;
+    background: linear-gradient(to bottom right, #dbeafe, #e0e7ff);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+`;
+
+export const Card = styled.div`
+    background-color: #ffffff;
+    border-radius: 1rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    padding: 2rem;
+    max-width: 28rem;
+    width: 100%;
+`;
+
+export const Title = styled.h1`
+    font-size: 1.875rem;
+    font-weight: bold;
+    color: #1f2937;
+    text-align: center;
+    margin-bottom: 1.5rem;
+`;
+
+export const Divider = styled.div`
+    height: 1px;
+    background: linear-gradient(to right, transparent, #d1d5db, transparent);
+    margin-bottom: 1.5rem;
+`;
+
+export const CounterSection = styled.div`
+    text-align: center;
+    margin-bottom: 2rem;
+`;
+
+export const Label = styled.div`
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #4b5563;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+`;
+
+export const CountDisplay = styled.div`
+    font-size: 3.75rem;
+    font-weight: bold;
+    transition: color 0.3s ease;
+    color: ${props => props.count === 0 ? "#1f2937" : (props.count > 0 ? "#16a34a" : "#dc2626")};
+`;
+
+export const ButtonGroup = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+`;
+
+export const Button = styled.button`
+    color: #ffffff;
+    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;
+    background-color: ${props => props.bgColor};
+
+    &:hover {
+        transform: scale(1.05);
+    }
+
+    &:active {
+        transform: scale(0.95);
+    }
+`;
+
+export const Hint = styled.div`
+    text-align: center;
+    font-size: 0.875rem;
+    color: #6b7280;
+    font-style: italic;
+`;
+

jac_client/examples/css-styling/styled-components/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/tailwind-example/.babelrc

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

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

@@ -0,0 +1,16 @@
+# tailwind-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/tailwind-example/app.jac

@@ -0,0 +1,64 @@
+# Pages
+cl import from react {useState, useEffect}
+cl import ".global.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 countColorClass = "text-gray-800" if count == 0 else ("text-green-600" if count > 0 else "text-red-600");
+
+        return <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
+            <div className="bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full">
+                <h1 className="text-3xl font-bold text-gray-800 text-center mb-6">Counter Application</h1>
+                <div className="h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent mb-6"></div>
+
+                <div className="text-center mb-8">
+                    <div className="text-sm font-semibold text-gray-600 mb-2 uppercase tracking-wide">Current Count</div>
+                    <div className={"text-6xl font-bold " + countColorClass + " transition-colors duration-300"}>
+                        {count}
+                    </div>
+                </div>
+
+                <div className="h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent mb-6"></div>
+
+                <div className="flex justify-center items-center gap-4 mb-6">
+                    <button
+                        className="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition-all duration-200 transform hover:scale-105 active:scale-95 text-xl"
+                        onClick={handleDecrement}>
+                        -
+                    </button>
+                    <button
+                        className="bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition-all duration-200 transform hover:scale-105 active:scale-95 text-xl"
+                        onClick={handleReset}>
+                        ↻
+                    </button>
+                    <button
+                        className="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition-all duration-200 transform hover:scale-105 active:scale-95 text-xl"
+                        onClick={handleIncrement}>
+                        +
+                    </button>
+                </div>
+
+                <div className="text-center text-sm text-gray-500 italic">
+                    Click the buttons to increment, decrement, or reset the counter
+                </div>
+            </div>
+        </div>;
+    }
+}

jac_client/examples/css-styling/tailwind-example/global.css

@@ -0,0 +1 @@
+@import "tailwindcss";

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

@@ -0,0 +1,30 @@
+{
+  "name": "tailwind-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: tailwind-example",
+  "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": {
+    "@tailwindcss/vite": "^4.1.17",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^6.30.1",
+    "tailwindcss": "^4.1.17"
+  }
+}

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

@@ -0,0 +1,30 @@
+
+import { defineConfig } from "vite";
+import tailwindcss from '@tailwindcss/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,
+  },
+  plugins: [    tailwindcss(),  ],
+  publicDir: false,
+  resolve: {
+    alias: {
+      "@jac-client/utils": path.resolve(__dirname, "src/client_runtime.js"),
+    },
+  },
+});
+

jac_client/examples/full-stack-with-auth/.babelrc

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

jac_client/examples/full-stack-with-auth/README.md

@@ -0,0 +1,16 @@
+# full-stack-with-auth
+
+## 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!