Fixes and improvements for some of Qwik examples (#233)

* Fix event click example for Qwik

* Fix computed state example for Qwik

* Fix update state example for Qwik

* Fix declare state example for qwik

* Fix conditional templating example for Qwik

* Simplify input text example for Qwik

* Simplify checkbox example for Qwik

* Simplify select element example for Qwik

* Simplify radio button example for Qwik

content/1-reactivity/1-declare-state/qwik/Name.tsx

@@ -1,7 +1,7 @@
-import { component$, useStore } from "@builder.io/qwik";
+import { component$, useSignal } from "@builder.io/qwik";
 
 export const Name = component$(() => {
-  const store = useStore({ name: "John" });
+  const name = useSignal("John");
 
-  return <h1>Hello {store.name}</h1>;
+  return <h1>Hello {name.value}</h1>;
 });

content/1-reactivity/2-update-state/qwik/Name.tsx

@@ -1,8 +1,11 @@
-import { component$, useStore } from "@builder.io/qwik";
+import { component$, useTask$, useSignal } from "@builder.io/qwik";
 
 export const Name = component$(() => {
-  const store = useStore({ name: "John" });
-  store.name = "Jane";
+  const name = useSignal("John");
 
-  return <h1>Hello {store.name}</h1>;
+  useTask$(() => {
+    name.value = "Jane";
+  });
+
+  return <h1>Hello {name.value}</h1>;
 });

content/1-reactivity/3-computed-state/qwik/DoubleCount.tsx

@@ -1,8 +1,8 @@
-import { component$, useStore } from "@builder.io/qwik";
+import { component$, useSignal, useComputed$ } from "@builder.io/qwik";
 
 export const DoubleCount = component$(() => {
-  const store = useStore({ count: 10 });
-  const doubleCount = store.count * 2;
+  const count = useSignal(10);
+  const doubleCount = useComputed$(() => count.value * 2);
 
-  return <div>{doubleCount}</div>;
+  return <div>{doubleCount.value}</div>;
 });

content/2-templating/4-event-click/qwik/Counter.tsx

@@ -1,15 +1,15 @@
-import { component$, useStore } from "@builder.io/qwik";
+import { component$, useSignal, $ } from "@builder.io/qwik";
 
 export const Counter = component$(() => {
-  const store = useStore({ count: 0 });
+  const count = useSignal(0);
 
-  const incrementCount = () => {
-    store.count++;
-  };
+  const incrementCount = $(() => {
+    count.value++;
+  });
 
   return (
     <>
-      <p>Counter: {store.count}</p>
+      <p>Counter: {count.value}</p>
       <button onClick$={incrementCount}>Increment</button>
     </>
   );

content/2-templating/6-conditional/qwik/TrafficLight.tsx

@@ -1,27 +1,24 @@
-import { $, component$, useStore } from "@builder.io/qwik";
+import { $, component$, useComputed$, useSignal } from "@builder.io/qwik";
 
 export const TRAFFIC_LIGHTS = ["red", "orange", "green"];
 
-export const App = component$(() => {
-  const store = useStore({
-    lightIndex: 0,
-  });
+export const TrafficLight = component$(() => {
+  const lightIndex = useSignal(0);
 
-  const light = TRAFFIC_LIGHTS[store.lightIndex];
+  const light = useComputed$(() => TRAFFIC_LIGHTS[lightIndex.value]);
 
   const nextLight = $(() => {
-    store.lightIndex = (store.lightIndex + 1) % TRAFFIC_LIGHTS.length;
+    lightIndex.value = (lightIndex.value + 1) % TRAFFIC_LIGHTS.length;
   });
 
   return (
     <>
       <button onClick$={nextLight}>Next light</button>
-      <p>Light is: {light}</p>
+      <p>Light is: {light.value}</p>
       <p>
-        You must
-        {light === "red" && <span>STOP</span>}
-        {light === "orange" && <span>SLOW DOWN</span>}
-        {light === "green" && <span>GO</span>}
+        You must {light.value === "red" && <span>STOP</span>}
+        {light.value === "orange" && <span>SLOW DOWN</span>}
+        {light.value === "green" && <span>GO</span>}
       </p>
     </>
   );

content/6-form-input/1-input-text/qwik/InputHello.tsx

@@ -1,16 +1,12 @@
-import { component$, useStore, $ } from "@builder.io/qwik";
+import { component$, useSignal } from "@builder.io/qwik";
 
 const InputHello = component$(() => {
-  const store = useStore({ text: "" });
-
-  const handleChange = $((event: InputEvent) => {
-    store.text = (event.target as HTMLInputElement).value;
-  });
+  const text = useSignal("");
 
   return (
     <>
-      <p>{store.text}</p>
-      <input value={store.text} onInput$={handleChange} />
+      <p>{text.value}</p>
+      <input bind:value={text} />
     </>
   );
 });

content/6-form-input/2-checkbox/qwik/IsAvailable.tsx

@@ -1,20 +1,11 @@
-import { component$, useStore, $ } from "@builder.io/qwik";
+import { component$, useSignal } from "@builder.io/qwik";
 
 const IsAvailable = component$(() => {
-  const store = useStore({ isAvailable: false });
-
-  const handleChange = $(() => {
-    store.isAvailable = !store.isAvailable;
-  });
+  const isAvailable = useSignal(false);
 
   return (
     <>
-      <input
-        id="is-available"
-        type="checkbox"
-        checked={store.isAvailable}
-        onChange$={handleChange}
-      />
+      <input id="is-available" type="checkbox" bind:checked={isAvailable} />
       <label for="is-available">Is available</label>
     </>
   );

content/6-form-input/3-radio/qwik/PickPill.tsx

@@ -1,30 +1,26 @@
-import { component$, useStore, $ } from "@builder.io/qwik";
+import { component$, useSignal } from "@builder.io/qwik";
 
 const PickPill = component$(() => {
-  const store = useStore({ picked: "red" });
-
-  const handleChange = $((event: Event) => {
-    store.picked = (event.target as HTMLInputElement).value;
-  });
+  const pickedColor = useSignal("red");
 
   return (
     <>
-      <div>Picked: {store.picked}</div>
+      <div>Picked: {pickedColor.value}</div>
       <input
         id="blue-pill"
-        checked={store.picked === "blue"}
         type="radio"
+        bind:value={pickedColor}
+        checked={pickedColor.value === "blue"}
         value="blue"
-        onChange$={handleChange}
       />
       <label for="blue-pill">Blue pill</label>
 
       <input
         id="red-pill"
-        checked={store.picked === "red"}
         type="radio"
+        checked={pickedColor.value === "red"}
+        bind:value={pickedColor}
         value="red"
-        onChange$={handleChange}
       />
       <label for="red-pill">Red pill</label>
     </>

content/6-form-input/4-select/qwik/ColorSelect.tsx

@@ -1,4 +1,4 @@
-import { component$, useStore, $ } from "@builder.io/qwik";
+import { component$, useSignal } from "@builder.io/qwik";
 
 export const colors = [
   { id: 1, text: "red" },
@@ -8,16 +8,17 @@ export const colors = [
 ];
 
 const ColorSelect = component$(() => {
-  const store = useStore({ selectedColorId: 2 });
-
-  const handleChange = $((event: Event) => {
-    store.selectedColorId = Number((event.target as HTMLInputElement).value);
-  });
+  const selectedColorId = useSignal("2");
 
   return (
-    <select value={store.selectedColorId} onChange$={handleChange}>
+    <select bind:value={selectedColorId}>
       {colors.map((color) => (
-        <option value={color.id} disabled={color.isDisabled}>
+        <option
+          key={color.id}
+          value={color.id}
+          disabled={color.isDisabled}
+          selected={`${color.id}` === selectedColorId.value}
+        >
           {color.text}
         </option>
       ))}