stream_weaver 0.3.0

data/examples/opal/scenarios/s3_sibling_tabs.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+# S3: Sibling Coordination via Shared State
+# React equivalent: lift state to parent, thread props down to both siblings
+# StreamWeaver: state[:key] is already global — no lifting needed
+
+app "S3 — Sibling Coordination" do
+  tabs :active_tab do
+    tab "Config" do
+      text_field :theme_name, label: "Theme Name"
+      text_field :app_name,   label: "App Name"
+      button("Light theme") { state[:dark] = false }
+      button("Dark theme")  { state[:dark] = true  }
+    end
+
+    tab "Preview" do
+      bg = state[:dark] ? "#1a1a2e" : "#ffffff"
+      fg = state[:dark] ? "#e0e0e0" : "#1a1a1a"
+      div(style: "background:#{bg};color:#{fg};padding:24px;border-radius:8px") do
+        header2 state[:app_name] || "My App"
+        text "Theme: #{state[:theme_name] || "(none set)"}"
+        text "Mode: #{state[:dark] ? "Dark" : "Light"}"
+      end
+    end
+  end
+end

data/examples/opal/scenarios/s4_shopping_cart.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+# S4: Shopping Cart with Derived Total
+# React equivalent: Context API (or Redux/Zustand) to share cart across component trees
+# StreamWeaver: state[:cart] is already visible everywhere — no Context needed
+
+app "S4 — Shopping Cart" do
+  products = [
+    { name: "Widget",    price: 9.99  },
+    { name: "Gadget",    price: 24.99 },
+    { name: "Doohickey", price: 4.99  },
+  ]
+
+  products.each do |p|
+    card do
+      header3 p[:name]
+      text "$#{p[:price]}"
+      button("Add to cart") { state[:cart] = (state[:cart] || []) + [p] }
+    end
+  end
+
+  div(style: "height:16px")
+
+  cart = state[:cart] || []
+  card do
+    header3 "Cart (#{cart.size} items)"
+    if cart.empty?
+      text "Nothing added yet"
+    else
+      cart.each { |item| text "• #{item[:name]} — $#{item[:price]}" }
+      text "Total: $#{"%.2f" % cart.sum { |i| i[:price] }}"
+      button("Clear") { state[:cart] = [] }
+    end
+  end
+end

data/examples/opal/scenarios/s5_watch.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+# S5: Watch — Side Effect on State Change
+# React equivalent: useEffect with [username] dependency array
+# StreamWeaver: watch(:key) { |val| } — fires exactly when that key changes
+
+TAKEN = %w[alice bob admin root test ruby opal streamweaver].freeze
+
+app "S5 — Watch: Username Availability" do
+  watch(:username) do |name|
+    n = name.to_s.strip.downcase
+    state[:status] = if n.empty?
+      nil
+    elsif n.length < 3
+      :too_short
+    elsif TAKEN.include?(n)
+      :taken
+    else
+      :available
+    end
+  end
+
+  card do
+    header3 "Choose a username"
+    text_field :username, placeholder: "e.g. forrest42"
+
+    case state[:status]
+    when :too_short  then badge "Too short (min 3 chars)", color: :yellow
+    when :taken      then badge "Already taken", color: :red
+    when :available  then badge "Available!", color: :green
+    end
+  end
+
+  div(style: "height:12px")
+
+  card do
+    header3 "How it works"
+    md "**watch(:username)** fires every time `:username` changes — like `useEffect(() => { check(username) }, [username])` in React. No polling, no diffing. The watch block runs once per distinct value, sets `:status`, and the render reflects it immediately."
+  end
+end

data/examples/opal/scenarios/s6_on_start.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+# S6: on_start — Async Fetch on Mount
+# React equivalent: useEffect(() => { fetch('/api/items').then(...) }, [])
+# StreamWeaver: on_start { } — fires exactly once after first render
+
+app "S6 — on_start: Async Fetch on Mount" do
+  on_start do
+    after(0.8) do
+      state[:items] = ["Dashboard Report", "Weekly Summary", "Q2 Forecast", "Team Updates", "Release Notes"]
+    end
+  end
+
+  if state[:items]
+    badge "Loaded via on_start", color: :green
+    div(style: "height:8px")
+    state[:items].each { |item| text "• #{item}" }
+  else
+    text "Loading..."
+  end
+end

data/examples/opal/scenarios/s7_wizard.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+# S7: Multi-Step Wizard / State Machine
+# React equivalent: useReducer — dispatch events to a pure transition function
+# StreamWeaver: case/when is the reducer — Ruby already has this
+
+app "S7 — Multi-Step Wizard" do
+  case (state[:step] || :info)
+  when :info
+    header3 "Step 1 of 3 — Your Info"
+    text_field :name,  label: "Full Name"
+    text_field :email, label: "Email"
+    button("Next →") { state[:step] = :payment }
+
+  when :payment
+    header3 "Step 2 of 3 — Payment"
+    text_field :card, label: "Card Number"
+    button("← Back") { state[:step] = :info    }
+    button("Next →") { state[:step] = :confirm }
+
+  when :confirm
+    header3 "Step 3 of 3 — Review"
+    text "Name: #{state[:name]}"
+    text "Email: #{state[:email]}"
+    text "Card: #{state[:card]}"
+    button("← Back")   { state[:step] = :payment }
+    button("Submit ✓") { state[:step] = :done    }
+
+  when :done
+    badge "Submitted!", color: :green
+    text "Welcome, #{state[:name]}."
+    button("Start over") { state[:step] = :info }
+  end
+end

data/examples/opal/scenarios/s8_loan_calculator.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+# S8: Loan Calculator — Interdependent Derived Fields
+# React equivalent: useMemo with [principal, rate, term] dependency array
+# StreamWeaver: inline computation — no memoization annotation needed
+
+app "S8 — Loan Calculator" do
+  text_field :principal, label: "Loan Amount ($)",  type: :number
+  text_field :rate,      label: "Annual Rate (%)",  type: :number
+  text_field :term,      label: "Term (months)",    type: :number
+
+  p       = state[:principal].to_f
+  r       = state[:rate].to_f / 100.0 / 12.0
+  n       = state[:term].to_f
+  payment = (r > 0 && n > 0) ? (p * r * (1 + r)**n) / ((1 + r)**n - 1) : 0.0
+
+  div(style: "height:16px")
+  card do
+    header3 "Monthly Payment"
+    text "$#{"%.2f" % payment}"
+  end
+end

data/examples/opal/scenarios/s9_dashboard.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+# S9: Dashboard — Multiple Widgets Sharing One Symbol
+# React equivalent: Context API + multiple connected components
+# StreamWeaver: state[:symbol] is just there — every widget reads it directly
+
+app "S9 — Dashboard: Multiple Widgets, Shared Symbol" do
+  prices  = { "AAPL" => 189.30, "MSFT" => 378.85, "GOOG" => 140.53 }
+  volumes = { "AAPL" => "54.2M", "MSFT" => "22.1M", "GOOG" => "28.7M" }
+  pes     = { "AAPL" => 29.4,    "MSFT" => 35.2,    "GOOG" => 26.1   }
+
+  sym = state[:symbol] || "AAPL"
+
+  # Symbol selector — buttons (safe across all Opal adapters)
+  text "Select symbol:"
+  %w[AAPL MSFT GOOG].each do |s|
+    button(s) { state[:symbol] = s }
+  end
+
+  div(style: "height:16px")
+
+  # Try columns layout
+  columns widths: ["33%", "33%", "34%"] do
+    column { card { header3 "Price";  text "$#{prices[sym]}"  } }
+    column { card { header3 "Volume"; text volumes[sym]        } }
+    column { card { header3 "P/E";    text pes[sym].to_s       } }
+  end
+end

data/examples/operations_dashboard_demo.rb

@@ -0,0 +1,167 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# Example: Operations Dashboard
+# Demonstrates app_shell layout with sidebar, expandable cards, and dashboard components
+# Run with: ./exe/streamweaver examples/operations_dashboard_demo.rb
+
+app "Operations Dashboard", theme: :dark, layout: :fluid do
+  app_shell sidebar_width: "340px" do
+    main do
+      # Header
+      app_header "Operations Dashboard", variant: :primary do
+        pulse_indicator color: :green, label: "All Systems Operational"
+      end
+
+      # Section header
+      hstack justify: :between, align: :center do
+        text "TEAMS"
+        hstack spacing: :sm do
+          button "Grid", variant: :secondary
+          button "List", variant: :secondary
+        end
+      end
+
+      # Team cards grid
+      grid cols: 2, gap: :lg do
+        # Engineering card
+        expandable_card key: :engineering_expanded,
+                        title: "Engineering",
+                        subtitle: "Product Development",
+                        badge_text: "5 activities",
+                        status: :red,
+                        initially_expanded: true do
+          hstack spacing: :xl, justify: :start do
+            stat_display value: 1, label: "RESEARCH", color: :blue
+            stat_display value: 2, label: "TASKS", color: :purple
+          end
+
+          card variant: :outlined do
+            text "Sprint velocity below target - 3 blockers identified"
+          end
+
+          vstack spacing: :none do
+            activity_item time: "15:00", title: "Architecture review",
+                          summary: "Evaluate microservices migration approach",
+                          type: :research
+
+            activity_item time: "14:30", title: "CI pipeline fixed",
+                          summary: "Flaky tests resolved, builds stable",
+                          type: :task
+          end
+        end
+
+        # Design card
+        expandable_card key: :design_expanded,
+                        title: "Design",
+                        subtitle: "UX & Visual",
+                        badge_text: "4 activities",
+                        status: :green do
+          hstack spacing: :xl, justify: :start do
+            stat_display value: 1, label: "RESEARCH", color: :blue
+            stat_display value: 1, label: "TASKS", color: :purple
+          end
+
+          card variant: :outlined do
+            text "Design system v2 on track - components finalized"
+          end
+
+          vstack spacing: :none do
+            activity_item time: "15:00", title: "User research synthesis",
+                          summary: "Interview findings compiled, patterns identified",
+                          type: :research
+
+            activity_item time: "15:05", title: "Accessibility review needed",
+                          summary: "WCAG compliance check for new components",
+                          type: :escalation
+          end
+        end
+
+        # Operations card
+        expandable_card key: :ops_expanded,
+                        title: "Operations",
+                        subtitle: "Infrastructure & SRE",
+                        badge_text: "4 activities",
+                        status: :yellow do
+          hstack spacing: :xl, justify: :start do
+            stat_display value: 1, label: "RESEARCH", color: :blue
+            stat_display value: 1, label: "TASKS", color: :purple
+          end
+
+          card variant: :outlined do
+            text "Monitoring upgrade in progress - 70% complete"
+          end
+        end
+
+        # Product card
+        expandable_card key: :product_expanded,
+                        title: "Product",
+                        subtitle: "Strategy & Roadmap",
+                        badge_text: "4 activities",
+                        status: :green do
+          hstack spacing: :xl, justify: :start do
+            stat_display value: 1, label: "RESEARCH", color: :blue
+            stat_display value: 1, label: "TASKS", color: :purple
+          end
+
+          card variant: :outlined do
+            text "Q2 roadmap finalized - stakeholder alignment complete"
+          end
+        end
+      end
+
+      # Summary stats
+      header2 "THIS WEEK"
+      hstack spacing: :xl do
+        card do
+          stat_display value: 24, label: "ACTIVITIES", color: :blue, size: :lg
+        end
+        card do
+          stat_display value: 7, label: "RESEARCH", color: :blue, size: :lg
+        end
+        card do
+          stat_display value: 12, label: "TASKS", color: :purple, size: :lg
+        end
+        card do
+          stat_display value: 5, label: "ESCALATIONS", color: :red, size: :lg
+        end
+      end
+    end
+
+    sidebar header: "Blockers" do
+      badge "5", variant: :danger
+
+      vstack spacing: :md do
+        priority_item priority: :critical,
+                      title: "Database capacity limit",
+                      description: "Primary DB at 92% storage. Need immediate expansion or archival.",
+                      meta_left: "ops",
+                      meta_right: "Expand storage"
+
+        priority_item priority: :urgent,
+                      title: "Third-party API outage",
+                      description: "Payment provider experiencing degraded performance.",
+                      meta_left: "backend",
+                      meta_right: "Monitor status"
+
+        priority_item priority: :high,
+                      title: "Security patch required",
+                      description: "CVE-2024-1234 affects auth library. Update needed.",
+                      meta_left: "security",
+                      meta_right: "Apply patch"
+
+        priority_item priority: :high,
+                      title: "Mobile app store review",
+                      description: "iOS submission rejected - privacy manifest missing.",
+                      meta_left: "mobile",
+                      meta_right: "Update manifest"
+
+        priority_item priority: :high,
+                      title: "Customer escalation",
+                      description: "Enterprise client reporting data sync delays.",
+                      meta_left: "support",
+                      meta_right: "Investigate"
+      end
+    end
+  end
+end