feat(qwik): add missing examples (#118)

* feat(qwik): add slot fallback example

* feat(qwik): add form input examples

* feat(qwik): add webapp features examples

* docs(qwik): update qwik progress

* docs(qwik): update qwik progress

README.md

@@ -297,7 +297,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/qwik.svg" />
             <b>Qwik</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/64" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
 * [x] Reactivity
    * [x] Declare state
@@ -313,20 +313,20 @@ How do we solve this ? Developers love having framework overview by examples. It
 * [x] Lifecycle
    * [x] On mount
    * [x] On unmount
-* [ ] Component composition
+* [x] Component composition
    * [x] Props
    * [x] Emit to parent
    * [x] Slot
-   * [ ] Slot fallback
-* [ ] Form input
-   * [ ] Input text
-   * [ ] Checkbox
-   * [ ] Radio
-   * [ ] Select
-* [ ] Webapp features
-   * [ ] Fetch data
-   * [ ] Router link
-   * [ ] Routing
+   * [x] Slot fallback
+* [x] Form input
+   * [x] Input text
+   * [x] Checkbox
+   * [x] Radio
+   * [x] Select
+* [x] Webapp features
+   * [x] Fetch data
+   * [x] Router link
+   * [x] Routing
 
 </details>
 

content/4-component-composition/4-slot-fallback/qwik/App.tsx

@@ -0,0 +1,10 @@
+import FunnyButton from './FunnyButton';
+
+export default function App() {
+	return (
+		<>
+			<FunnyButton />
+			<FunnyButton>Click me !</FunnyButton>
+		</>
+	);
+}

content/4-component-composition/4-slot-fallback/qwik/FunnyButton.tsx

@@ -0,0 +1,39 @@
+import { component$, Slot, useStylesScoped$ } from '@builder.io/qwik';
+
+/**
+ * Fallback content as described in the docs is not working
+ * with no immediate plans on adding support again.
+ * https://github.com/BuilderIO/qwik/issues/1106
+ *
+ * The recommended workaround is something like this, using CSS
+ */
+const FunnyButton = component$(() => {
+	useStylesScoped$(`
+      button {
+        background: rgba(0, 0, 0, 0.4);
+        color: #fff;
+        padding: 10px 20px;
+        font-size: 30px;
+        border: 2px solid #fff;
+        margin: 8px;
+        transform: scale(0.9);
+        box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
+        transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
+        outline: 0;
+      }
+
+      .slot:not(:empty) + .fallback {
+        display: none;
+      }
+  `);
+	return (
+		<button>
+			<span class="slot">
+				<Slot />
+			</span>
+			<span class="fallback">No content found</span>
+		</button>
+	);
+});
+
+export default FunnyButton;

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

@@ -0,0 +1,18 @@
+import { component$, useStore, $ } from '@builder.io/qwik';
+
+const InputHello = component$(() => {
+	const store = useStore({ text: '' });
+
+	const handleChange = $((event: InputEvent) => {
+		store.text = (event.target as HTMLInputElement).value;
+	});
+
+	return (
+		<>
+			<p>{store.text}</p>
+			<input value={store.text} onInput$={handleChange} />
+		</>
+	);
+});
+
+export default InputHello;

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { component$, useStore, $ } from '@builder.io/qwik';
+
+export const colors = [
+	{ id: 1, text: 'red' },
+	{ id: 2, text: 'blue' },
+	{ id: 3, text: 'green' },
+	{ id: 4, text: 'gray', isDisabled: true },
+];
+
+const ColorSelect = component$(() => {
+	const store = useStore({ selectedColorId: 2 });
+
+	const handleChange = $((event: Event) => {
+		store.selectedColorId = Number((event.target as HTMLInputElement).value);
+	});
+
+	return (
+		<select value={store.selectedColorId} onChange$={handleChange}>
+			{colors.map((color) => (
+				<option value={color.id} disabled={color.isDisabled}>
+					{color.text}
+				</option>
+			))}
+		</select>
+	);
+});
+
+export default ColorSelect;

content/7-webapp-features/1-fetch-data/qwik/App.tsx

@@ -0,0 +1,41 @@
+import { component$, useResource$, Resource } from '@builder.io/qwik';
+
+type UsersResponse = {
+	results: {
+		picture: {
+			thumbnail: string;
+		};
+		name: {
+			first: string;
+			last: string;
+		};
+	}[];
+};
+
+export async function fetchUsers() {
+	return (await fetch('https://randomuser.me/api/?results=3')).json();
+}
+
+export const App = component$(() => {
+	const data = useResource$<UsersResponse>(fetchUsers);
+
+	return (
+		<Resource
+			value={data}
+			onPending={() => <p>Fetching users...</p>}
+			onRejected={() => <p>An error occurred while fetching users</p>}
+			onResolved={({ results: users }) => (
+				<ul>
+					{users.map((user) => (
+						<li>
+							<img src={user.picture.thumbnail} alt="user" />
+							<p>
+								{user.name.first} {user.name.last}
+							</p>
+						</li>
+					))}
+				</ul>
+			)}
+		/>
+	);
+});

content/7-webapp-features/1-fetch-data/solid/App.jsx

@@ -14,7 +14,7 @@ export default function App() {
 				<p>Fetching users...</p>
 			</Match>
 			<Match when={data.error}>
-				<p>An error occurred while fetchint users</p>
+				<p>An error occurred while fetching users</p>
 			</Match>
 			<Match when={users()}>
 				<ul>

content/7-webapp-features/2-router-link/qwik/qwik-city.md

@@ -0,0 +1,21 @@
+With [qwik-city](https://qwik.builder.io/qwikcity/overview/)
+
+```jsx
+import { component$ } from '@builder.io/qwik';
+import { Link } from '@builder.io/qwik-city';
+
+const Home = component$(() => {
+  return (
+    <ul>
+      <li>
+        <Link href="/">Home</Link>
+      </li>
+      <li>
+        <Link href="/about">About us</Link>
+      </li>
+    </ul>
+  );
+})
+
+export default Home;
+```

content/7-webapp-features/3-routing/qwik/qwik-city.md

@@ -0,0 +1,11 @@
+With [qwik-city](https://qwik.builder.io/qwikcity/overview/)
+
+```
+|-- routes/
+    |-- index.tsx // index page "/"
+    |-- about/
+        |-- index.tsx // about page "/about"
+    |-- layout.tsx // global app layout
+    |-- [rest]/
+        |-- index.tsx // dynamic parameter, can be used as catch-all to show 404 page
+```

package.json

@@ -36,7 +36,7 @@
     "@astrojs/tailwind": "^1.0.0",
     "@babel/eslint-parser": "^7.18.9",
     "@babel/plugin-proposal-decorators": "^7.18.10",
-    "@builder.io/qwik": "0.0.100",
+    "@builder.io/qwik": "0.10.0",
     "@matschik/lz-string": "^0.0.2",
     "@tailwindcss/typography": "^0.5.4",
     "@types/mdast": "^3.0.10",