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

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

@@ -0,0 +1,153 @@
+// 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,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/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,71 @@
+# 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,90 @@
+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,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/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,63 @@
+# 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,29 @@
+
+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"),
+    },
+  },
+});