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

jac_client/docs/guide-example/step-03-styling.md

@@ -1,12 +1,12 @@
 # Step 3: Styling Components
 
-> **💡 Quick Tip:** Each step has two parts. **Part 1** shows you what to build. **Part 2** explains why it works. Want to just build? Skip all Part 2 sections!
+> ** Quick Tip:** Each step has two parts. **Part 1** shows you what to build. **Part 2** explains why it works. Want to just build? Skip all Part 2 sections!
 
 In this step, you'll learn how to style your components using inline CSS to make them look great!
 
 ---
 
-## 🏗️ Part 1: Building the App
+##  Part 1: Building the App
 
 ### Step 3.1: Style the TodoItem Component
 
@@ -162,11 +162,11 @@ cl {
 
 ---
 
-**⏭️ Want to skip the theory?** Jump to [Step 4: Todo UI](./step-04-todo-ui.md)
+**⏭ Want to skip the theory?** Jump to [Step 4: Todo UI](./step-04-todo-ui.md)
 
 ---
 
-## 💡 Part 2: Understanding the Concepts
+##  Part 2: Understanding the Concepts
 
 ### What are Inline Styles?
 
@@ -223,14 +223,14 @@ text-align       → "textAlign"
 **Examples:**
 
 ```jac
-# ✅ Correct (camelCase)
+#  Correct (camelCase)
 {
     "backgroundColor": "#ffffff",
     "fontSize": "16px",
     "borderRadius": "8px"
 }
 
-# ❌ Wrong (kebab-case won't work)
+#  Wrong (kebab-case won't work)
 {
     "background-color": "#ffffff",  # Error!
     "font-size": "16px"              # Error!
@@ -289,14 +289,14 @@ text-align       → "textAlign"
 All CSS values must be **strings** (in quotes):
 
 ```jac
-# ✅ Correct
+#  Correct
 {
     "padding": "20px",
     "color": "#3b82f6",
     "fontSize": "16px"
 }
 
-# ❌ Wrong (missing quotes)
+#  Wrong (missing quotes)
 {
     "padding": 20px,      # Error!
     "color": #3b82f6,     # Error!
@@ -395,19 +395,19 @@ def app() -> any {
 
 ---
 
-## ✅ What You've Learned
+##  What You've Learned
 
-- ✅ How to write inline styles in Jac
-- ✅ Double curly braces `{{ }}` syntax
-- ✅ camelCase property names
-- ✅ Common CSS properties
-- ✅ Conditional styling with ternary operator
-- ✅ Flexbox basics for layout
-- ✅ Reusing styles with variables
+-  How to write inline styles in Jac
+-  Double curly braces `{{ }}` syntax
+-  camelCase property names
+-  Common CSS properties
+-  Conditional styling with ternary operator
+-  Flexbox basics for layout
+-  Reusing styles with variables
 
 ---
 
-## 🐛 Common Issues
+##  Common Issues
 
 ### Issue: Styles not applying
 
@@ -422,10 +422,10 @@ def app() -> any {
 **Cause**: Missing quotes around property names or values
 
 ```jac
-# ❌ Wrong
+#  Wrong
 {padding: 20px}
 
-# ✅ Correct
+#  Correct
 {"padding": "20px"}
 ```
 
@@ -434,16 +434,16 @@ def app() -> any {
 **Solution**: Convert kebab-case to camelCase
 
 ```jac
-# ❌ Wrong
+#  Wrong
 {"background-color": "#fff"}
 
-# ✅ Correct
+#  Correct
 {"backgroundColor": "#fff"}
 ```
 
 ---
 
-## 🎯 Quick Exercise
+##  Quick Exercise
 
 Try adding a container with centered content:
 
@@ -471,8 +471,8 @@ This creates:
 
 ---
 
-## ➡️ Next Step
+##  Next Step
 
 Great! Your components now look professional. Next, let's build the **complete Todo UI** with all the components working together!
 
-👉 **[Continue to Step 4: Todo UI](./step-04-todo-ui.md)**
+ **[Continue to Step 4: Todo UI](./step-04-todo-ui.md)**

jac_client/docs/guide-example/step-04-todo-ui.md

@@ -1,12 +1,12 @@
 # Step 4: Building the Complete Todo UI
 
-> **💡 Quick Tip:** Each step has two parts. **Part 1** shows you what to build. **Part 2** explains why it works. Want to just build? Skip all Part 2 sections!
+> ** Quick Tip:** Each step has two parts. **Part 1** shows you what to build. **Part 2** explains why it works. Want to just build? Skip all Part 2 sections!
 
 In this step, you'll put all your components together to create the full todo application interface!
 
 ---
 
-## 🏗️ Part 1: Building the App
+##  Part 1: Building the App
 
 ### Step 4.1: Complete App with All Components
 
@@ -205,11 +205,11 @@ cl {
 
 ---
 
-**⏭️ Want to skip the theory?** Jump to [Step 5: Local State](./step-05-local-state.md)
+**⏭ Want to skip the theory?** Jump to [Step 5: Local State](./step-05-local-state.md)
 
 ---
 
-## 💡 Part 2: Understanding the Concepts
+##  Part 2: Understanding the Concepts
 
 ### Component Hierarchy
 
@@ -365,19 +365,19 @@ Using consistent colors makes your app look polished!
 
 ---
 
-## ✅ What You've Learned
+##  What You've Learned
 
-- ✅ Building a complete UI by composing components
-- ✅ Component hierarchy and organization
-- ✅ Container components that render lists
-- ✅ Conditional rendering for empty states
-- ✅ Centered card layout pattern
-- ✅ Consistent spacing and colors
-- ✅ Props flow from parent to child
+-  Building a complete UI by composing components
+-  Component hierarchy and organization
+-  Container components that render lists
+-  Conditional rendering for empty states
+-  Centered card layout pattern
+-  Consistent spacing and colors
+-  Props flow from parent to child
 
 ---
 
-## 🐛 Common Issues
+##  Common Issues
 
 ### Issue: Components overlapping
 
@@ -410,7 +410,7 @@ return <div>Show todos</div>;  # This only runs if hasTodos is true
 
 ---
 
-## 🎯 Quick Exercise
+##  Quick Exercise
 
 Try customizing your app:
 
@@ -448,7 +448,7 @@ def app() -> any {
             "color": "white",
             "marginBottom": "20px"
         }}>
-            <h1 style={{"margin": "0"}}>📝 Todo App</h1>
+            <h1 style={{"margin": "0"}}> Todo App</h1>
             <p style={{"margin": "5px 0 0 0"}}>Stay organized!</p>
         </div>
 
@@ -468,10 +468,10 @@ def app() -> any {
 
 ---
 
-## ➡️ Next Step
+##  Next Step
 
 Excellent! Your UI is complete and looks great. But it's all static - clicking buttons does nothing!
 
 In the next step, we'll add **state** to make your app interactive!
 
-👉 **[Continue to Step 5: Local State](./step-05-local-state.md)**
+ **[Continue to Step 5: Local State](./step-05-local-state.md)**

jac_client/docs/guide-example/step-05-local-state.md

@@ -1,12 +1,12 @@
 # Step 5: Local State
 
-> **💡 Quick Tip:** Each step has two parts. **Part 1** shows you what to build. **Part 2** explains why it works. Want to just build? Skip all Part 2 sections!
+> ** Quick Tip:** Each step has two parts. **Part 1** shows you what to build. **Part 2** explains why it works. Want to just build? Skip all Part 2 sections!
 
 In this step, you'll learn about **state** - the data that makes your app interactive and dynamic!
 
 ---
 
-## 🏗️ Part 1: Building the App
+##  Part 1: Building the App
 
 ### Step 5.1: First, Let's See Why Normal Variables Don't Work
 
@@ -267,11 +267,11 @@ cl {
 
 ---
 
-**⏭️ Want to skip the theory?** Jump to [Step 6: Event Handlers](./step-06-events.md)
+**⏭ Want to skip the theory?** Jump to [Step 6: Event Handlers](./step-06-events.md)
 
 ---
 
-## 💡 Part 2: Understanding the Concepts
+##  Part 2: Understanding the Concepts
 
 ### What is State?
 
@@ -380,7 +380,7 @@ let [name, setName] = useState("");
 let [isOpen, setIsOpen] = useState(false);
 let [todos, setTodos] = useState([]);
 
-# ❌ Bad names
+#  Bad names
 let [count, updateCount] = useState(0);  # Inconsistent
 let [x, y] = useState(0);                 # Not descriptive
 ```
@@ -413,11 +413,11 @@ items = [TodoItem(text=todo["text"]) for todo in todos]
 **Never modify state directly:**
 
 ```jac
-# ❌ WRONG - Never do this!
+#  WRONG - Never do this!
 let [todos, setTodos] = useState([]);
 todos.push(newTodo);  # DON'T modify directly!
 
-# ✅ CORRECT - Create new array
+#  CORRECT - Create new array
 let [todos, setTodos] = useState([]);
 setTodos(todos.concat([newTodo]));  # Create new array
 ```
@@ -446,29 +446,29 @@ The child receives state but **cannot modify** the parent's state directly (we'l
 
 ---
 
-## ✅ What You've Learned
+##  What You've Learned
 
-- ✅ What state is and why we need it
-- ✅ How to use the `useState` hook
-- ✅ Creating multiple state variables
-- ✅ State naming conventions
-- ✅ Using `.map()` to render lists
-- ✅ State is immutable (don't modify directly)
-- ✅ Passing state to child components via props
+-  What state is and why we need it
+-  How to use the `useState` hook
+-  Creating multiple state variables
+-  State naming conventions
+-  Using `.map()` to render lists
+-  State is immutable (don't modify directly)
+-  Passing state to child components via props
 
 ---
 
-## 🐛 Common Issues
+##  Common Issues
 
 ### Issue: UI not updating when state changes
 
 **Check:** Are you modifying state directly?
 
 ```jac
-# ❌ Wrong
+#  Wrong
 todos.push(newTodo);
 
-# ✅ Correct
+#  Correct
 setTodos(todos.concat([newTodo]));
 ```
 
@@ -477,10 +477,10 @@ setTodos(todos.concat([newTodo]));
 **Check:** Did you initialize state as an array?
 
 ```jac
-# ❌ Wrong
+#  Wrong
 let [todos, setTodos] = useState();  # undefined
 
-# ✅ Correct
+#  Correct
 let [todos, setTodos] = useState([]);  # empty array
 ```
 
@@ -494,7 +494,7 @@ cl import from react {useState}
 
 ---
 
-## 🎯 Quick Exercise
+##  Quick Exercise
 
 Try adding more initial todos:
 
@@ -521,10 +521,10 @@ return <div>
 
 ---
 
-## ➡️ Next Step
+##  Next Step
 
 Great! You now have state in your app, but you can't change it yet. Clicking buttons does nothing!
 
 In the next step, we'll add **event handlers** to make your app fully interactive!
 
-👉 **[Continue to Step 6: Event Handlers](./step-06-events.md)**
+ **[Continue to Step 6: Event Handlers](./step-06-events.md)**

jac_client/docs/guide-example/step-06-events.md

@@ -1,12 +1,12 @@
 # Step 6: Event Handlers
 
-> **💡 Quick Tip:** Each step has two parts. **Part 1** shows you what to build. **Part 2** explains why it works. Want to just build? Skip all Part 2 sections!
+> ** Quick Tip:** Each step has two parts. **Part 1** shows you what to build. **Part 2** explains why it works. Want to just build? Skip all Part 2 sections!
 
 In this step, you'll learn how to handle user interactions like clicks, typing, and key presses to make your app fully interactive!
 
 ---
 
-## 🏗️ Part 1: Building the App
+##  Part 1: Building the App
 
 ### Step 6.1: Handle Input Changes (onChange)
 
@@ -458,11 +458,11 @@ cl {
 
 ---
 
-**⏭️ Want to skip the theory?** Jump to [Step 7: Effects](./step-07-effects.md)
+**⏭ Want to skip the theory?** Jump to [Step 7: Effects](./step-07-effects.md)
 
 ---
 
-## 💡 Part 2: Understanding the Concepts
+##  Part 2: Understanding the Concepts
 
 ### What are Event Handlers?
 
@@ -555,10 +555,10 @@ When state updates, React re-renders the component with the new value!
 **`.concat()` - Add items**
 
 ```jac
-# ✅ Correct way to add
+#  Correct way to add
 setTodos(todos.concat([newTodo]));
 
-# ❌ Wrong (modifies original)
+#  Wrong (modifies original)
 todos.push(newTodo);
 setTodos(todos);
 ```
@@ -659,20 +659,20 @@ def removeItem(id: any) -> None {
 
 ---
 
-## ✅ What You've Learned
+##  What You've Learned
 
-- ✅ What event handlers are
-- ✅ Common events (onClick, onChange, onKeyPress)
-- ✅ Event handler syntax with lambda functions
-- ✅ The event object (`e`)
-- ✅ Passing functions as props
-- ✅ Updating state in event handlers
-- ✅ Array methods (concat, map, filter)
-- ✅ Inline vs named functions
+-  What event handlers are
+-  Common events (onClick, onChange, onKeyPress)
+-  Event handler syntax with lambda functions
+-  The event object (`e`)
+-  Passing functions as props
+-  Updating state in event handlers
+-  Array methods (concat, map, filter)
+-  Inline vs named functions
 
 ---
 
-## 🐛 Common Issues
+##  Common Issues
 
 ### Issue: Event handler not firing
 
@@ -687,7 +687,7 @@ def removeItem(id: any) -> None {
 - Is `onChange` calling the state setter?
 
 ```jac
-# ✅ Correct
+#  Correct
 <input
     value={text}
     onChange={lambda e: any -> None {
@@ -695,7 +695,7 @@ def removeItem(id: any) -> None {
     }}
 />
 
-# ❌ Missing onChange
+#  Missing onChange
 <input value={text} />
 ```
 
@@ -704,17 +704,17 @@ def removeItem(id: any) -> None {
 **Check:** Are you creating a new array/object?
 
 ```jac
-# ❌ Wrong (modifying original)
+#  Wrong (modifying original)
 todos.push(newTodo);
 setTodos(todos);
 
-# ✅ Correct (creating new array)
+#  Correct (creating new array)
 setTodos(todos.concat([newTodo]));
 ```
 
 ---
 
-## 🎯 Quick Exercise
+##  Quick Exercise
 
 Try adding a "Clear All" button:
 
@@ -740,11 +740,10 @@ def clearCompleted() -> None {
 
 ---
 
-## ➡️ Next Step
+##  Next Step
 
 Excellent! Your app is now fully interactive with local state. But when you refresh the page, all your todos disappear!
 
 In the next step, we'll use **useEffect** to load data when the app starts!
 
-👉 **[Continue to Step 7: Effects](./step-07-effects.md)**
-
+ **[Continue to Step 7: Effects](./step-07-effects.md)**

jac_client/docs/guide-example/step-07-effects.md

@@ -1,12 +1,12 @@
 # Step 7: Component Lifecycle with `useEffect`
 
-> **💡 Quick Tip:** Each step has two parts. **Part 1** shows you what to build. **Part 2** explains why it works. Want to just build? Skip all Part 2 sections!
+> ** Quick Tip:** Each step has two parts. **Part 1** shows you what to build. **Part 2** explains why it works. Want to just build? Skip all Part 2 sections!
 
 In this step, you'll learn about **useEffect** - a way to run code when your component loads or when data changes!
 
 ---
 
-## 🏗️ Part 1: Building the App
+##  Part 1: Building the App
 
 ### Step 7.1: Understanding the Problem
 
@@ -91,7 +91,7 @@ cl {
 }
 ```
 
-**Try it!** Add some todos, then refresh the page - your todos persist! 🎉
+**Try it!** Add some todos, then refresh the page - your todos persist!
 
 ### Step 7.5: Add Loading State
 
@@ -154,22 +154,22 @@ cl {
 
 ---
 
-**⏭️ Want to skip the theory?** Jump to [Step 8: Walkers](./step-08-walkers.md)
+**⏭ Want to skip the theory?** Jump to [Step 8: Walkers](./step-08-walkers.md)
 
 ---
 
-## 💡 Part 2: Understanding the Concepts
+##  Part 2: Understanding the Concepts
 
 ### What is `useEffect`?
 
 `useEffect` lets you run **side effects** - code that affects things outside your component.
 
 **Common side effects:**
-- 📡 Fetching data from a server
-- 💾 Saving data to localStorage
+-  Fetching data from a server
+-  Saving data to localStorage
 - ⏰ Setting up timers
-- 📊 Logging analytics
-- 🔔 Subscribing to events
+-  Logging analytics
+-  Subscribing to events
 
 **Python analogy:**
 
@@ -368,31 +368,31 @@ useEffect(lambda -> None {
 
 ---
 
-## ✅ What You've Learned
+##  What You've Learned
 
-- ✅ What useEffect is and why we need it
-- ✅ How to run code when component mounts
-- ✅ Dependency arrays control when effects run
-- ✅ Multiple useEffect hooks for organization
-- ✅ Using localStorage to persist data
-- ✅ Adding loading states
-- ✅ Preventing unnecessary saves
+-  What useEffect is and why we need it
+-  How to run code when component mounts
+-  Dependency arrays control when effects run
+-  Multiple useEffect hooks for organization
+-  Using localStorage to persist data
+-  Adding loading states
+-  Preventing unnecessary saves
 
 ---
 
-## 🐛 Common Issues
+##  Common Issues
 
 ### Issue: Effect runs too many times
 
 **Check:** Is your dependency array correct?
 
 ```jac
-# ❌ Wrong - runs on every render
+#  Wrong - runs on every render
 useEffect(lambda -> None {
     console.log(todos);
 });
 
-# ✅ Correct - runs only when todos change
+#  Correct - runs only when todos change
 useEffect(lambda -> None {
     console.log(todos);
 }, [todos]);
@@ -403,12 +403,12 @@ useEffect(lambda -> None {
 **Check:** Did you include all dependencies?
 
 ```jac
-# ❌ Wrong - missing todos dependency
+#  Wrong - missing todos dependency
 useEffect(lambda -> None {
     console.log(todos.length);
 }, []);
 
-# ✅ Correct - includes todos
+#  Correct - includes todos
 useEffect(lambda -> None {
     console.log(todos.length);
 }, [todos]);
@@ -426,12 +426,12 @@ useEffect(lambda -> None {
 **Cause:** Effect updates state, which triggers effect again
 
 ```jac
-# ❌ Wrong - infinite loop!
+#  Wrong - infinite loop!
 useEffect(lambda -> None {
     setTodos([...]);  # This triggers effect again!
 }, [todos]);
 
-# ✅ Correct - run only once
+#  Correct - run only once
 useEffect(lambda -> None {
     setTodos([...]);
 }, []);
@@ -439,7 +439,7 @@ useEffect(lambda -> None {
 
 ---
 
-## 🎯 Quick Exercise
+##  Quick Exercise
 
 Try adding a "last saved" timestamp:
 
@@ -459,11 +459,10 @@ useEffect(lambda -> None {
 
 ---
 
-## ➡️ Next Step
+##  Next Step
 
 Great! Your app now persists data with localStorage. But localStorage is only local to your browser!
 
 In the next step, we'll add **real backend** using **walkers** so your data is stored on a server!
 
-👉 **[Continue to Step 8: Walkers](./step-08-walkers.md)**
-
+ **[Continue to Step 8: Walkers](./step-08-walkers.md)**