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

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

@@ -1,183 +0,0 @@
-# JavaScript Styling Example
-
-This example demonstrates styling a Jac application using JavaScript objects for inline styles.
-
-## Overview
-
-JavaScript styling uses JavaScript objects to define styles, which are then applied via the `style` prop. This approach is perfect for:
-- Dynamic styling based on state
-- Programmatic style generation
-- Component-scoped styles without CSS files
-- React-style inline styling
-
-## Project Structure
-
-```
-js-styling/
-├── app.jac          # Main application component
-├── styles.js        # Style objects exported as default
-├── package.json     # Dependencies
-└── vite.config.js   # Vite configuration
-```
-
-## Setup
-
-1. Install dependencies:
-```bash
-npm install
-```
-
-2. Run the application:
-```bash
-jac serve app.jac
-```
-
-## How It Works
-
-### 1. Define Style Objects
-
-In `styles.js`, export a default object with all styles:
-
-```javascript
-const countDisplay = {
-    fontSize: "3.75rem",
-    fontWeight: "bold",
-    transition: "color 0.3s ease"
-};
-
-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%"
-    },
-    countDisplayZero: {
-        ...countDisplay,
-        color: "#1f2937"
-    },
-    countDisplayPositive: {
-        ...countDisplay,
-        color: "#16a34a"
-    },
-    // ... more styles
-};
-```
-
-### 2. Import Styles
-
-In your Jac file:
-
-```jac
-cl import from .styles { default as styles }
-```
-
-### 3. Apply Styles
-
-Use the `style` prop with style objects:
-
-```jac
-return <div style={styles.container}>
-    <div style={styles.card}>
-        <h1 style={styles.title}>Counter Application</h1>
-    </div>
-</div>;
-```
-
-### 4. Dynamic Styles
-
-Select styles based on state:
-
-```jac
-let countStyle = styles.countDisplayZero if count == 0 else (styles.countDisplayPositive if count > 0 else styles.countDisplayNegative);
-
-return <div style={countStyle}>{count}</div>;
-```
-
-## Style Object Format
-
-JavaScript style objects use camelCase property names (React convention):
-
-```javascript
-{
-    backgroundColor: "#ffffff",  // not background-color
-    fontSize: "1.5rem",         // not font-size
-    marginTop: "10px",          // not margin-top
-    zIndex: 1                   // not z-index
-}
-```
-
-## Best Practices
-
-1. **Use object spread**: Share common styles with spread operator
-2. **Organize by component**: Group related styles together
-3. **Use constants**: Define reusable values at the top
-4. **CamelCase properties**: Follow React naming convention
-5. **Extract complex logic**: Move style calculations to functions
-
-## Advantages
-
-- ✅ Dynamic styling based on props/state
-- ✅ No CSS file needed
-- ✅ Type-safe (with TypeScript)
-- ✅ Component-scoped by default
-- ✅ Programmatic style generation
-
-## Limitations
-
-- ❌ No pseudo-classes (hover, focus, etc.)
-- ❌ No media queries
-- ❌ No CSS animations (use JavaScript)
-- ❌ Verbose for complex styles
-- ❌ No CSS preprocessor features
-
-## When to Use
-
-Choose JavaScript Styling when:
-- You need dynamic styles based on state
-- You want programmatic style generation
-- You prefer keeping styles in JavaScript
-- You're building component libraries
-- You need runtime style calculations
-
-## Advanced Patterns
-
-### Style Functions
-
-Create functions that return styles:
-
-```javascript
-export const getButtonStyle = (variant) => ({
-    ...buttonBase,
-    backgroundColor: variant === 'primary' ? '#007bff' : '#6c757d'
-});
-```
-
-### Conditional Styles
-
-Use ternary operators for conditional styles:
-
-```javascript
-export default {
-    button: {
-        backgroundColor: isActive ? '#007bff' : '#6c757d',
-        opacity: isDisabled ? 0.5 : 1,
-    }
-};
-```
-
-## Next Steps
-
-- Explore [Styled Components](../styled-components/) for CSS-in-JS with more features
-- Check out [Emotion](../emotion-example/) for similar CSS-in-JS approach (coming soon)
-- Learn about [CSS Modules](../css-modules/) for scoped CSS (coming soon)

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

@@ -1,28 +0,0 @@
-{
-  "name": "bootstrap-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: bootstrap-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": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-router-dom": "^6.30.1"
-  }
-}

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

@@ -1,100 +0,0 @@
-// 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

@@ -1,27 +0,0 @@
-
-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

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

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

@@ -1,16 +0,0 @@
-# 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/package.json

@@ -1,32 +0,0 @@
-{
-  "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

@@ -1,27 +0,0 @@
-
-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

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

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

@@ -1,16 +0,0 @@
-# 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/package.json

@@ -1,28 +0,0 @@
-{
-  "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

@@ -1,111 +0,0 @@
-.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

@@ -1,27 +0,0 @@
-
-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

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

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

@@ -1,16 +0,0 @@
-# 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/package.json

@@ -1,29 +0,0 @@
-{
-  "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"
-  }
-}