Restructure examples (#568)

* rename kitchen sink, pull out react example

* split out the rest of the examples

* align versions

* chore: rename examples

* chore: normalize gitignore

* chore: update package versions

* chore: move framework examples to `framework` namespace

* docs: add README to examples

Co-authored-by: Austin Crim <crim.austin@principal.com>

8 files changed, 205 insertions, 0 deletions

diff --git a/examples/with-nanostores/src/components/AdminsPreact.jsx b/examples/with-nanostores/src/components/AdminsPreact.jsx
new file mode 100644
index 000000000..93fecd878
--- /dev/null
+++ b/examples/with-nanostores/src/components/AdminsPreact.jsx
@@ -0,0 +1,29 @@
+import { h, Fragment } from 'preact';
+import { useStore } from 'nanostores/preact';
+
+import { admins } from '../store/admins.js';
+import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
+
+const AdminsPreact = () => {
+  const list = useStore(admins);
+  const count = useStore(counter);
+
+  return (
+    <>
+      <h1>Preact</h1>
+      <ul>
+        {list.map((user) => (
+          <li key={user.name}>{JSON.stringify(user, null, 2)}</li>
+        ))}
+      </ul>
+      <div>
+        <h3>Counter</h3>
+        <p>{count}</p>
+        <button onClick={decreaseCounter}>-1</button>
+        <button onClick={increaseCounter}>+1</button>
+      </div>
+    </>
+  );
+};
+
+export default AdminsPreact;
diff --git a/examples/with-nanostores/src/components/AdminsReact.jsx b/examples/with-nanostores/src/components/AdminsReact.jsx
new file mode 100644
index 000000000..a03df1f47
--- /dev/null
+++ b/examples/with-nanostores/src/components/AdminsReact.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { useStore } from 'nanostores/react';
+
+import { admins } from '../store/admins.js';
+import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
+
+const AdminsReact = () => {
+  const list = useStore(admins);
+  const count = useStore(counter);
+  return (
+    <>
+      <h1>React</h1>
+      <ul>
+        {list.map((user) => (
+          <li key={user.name}>{JSON.stringify(user, null, 2)}</li>
+        ))}
+      </ul>
+      <div>
+        <h3>Counter</h3>
+        <p>{count}</p>
+        <button onClick={decreaseCounter}>-1</button>
+        <button onClick={increaseCounter}>+1</button>
+      </div>
+      <br />
+    </>
+  );
+};
+
+export default AdminsReact;
diff --git a/examples/with-nanostores/src/components/AdminsSvelte.svelte b/examples/with-nanostores/src/components/AdminsSvelte.svelte
new file mode 100644
index 000000000..a98444b4f
--- /dev/null
+++ b/examples/with-nanostores/src/components/AdminsSvelte.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { getValue } from 'nanostores'
+
+  import { users } from '../store/users.js';
+  import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
+
+  const list = getValue(users).filter(user => user.isAdmin);
+</script>
+
+<h1>Svelte</h1>
+<ul>
+  {#each list as user}
+    <li>{JSON.stringify(user, null, 2)}</li>
+  {/each}
+</ul>
+<div>
+  <h3>Counter</h3>
+  <p>{$counter}</p>
+  <button on:click={decreaseCounter}>-1</button>
+  <button on:click={increaseCounter}>+1</button>
+</div>
+<br />
+<!-- Just to get rid of a warning -->
+<slot />
diff --git a/examples/with-nanostores/src/components/AdminsVue.vue b/examples/with-nanostores/src/components/AdminsVue.vue
new file mode 100644
index 000000000..68dcd2065
--- /dev/null
+++ b/examples/with-nanostores/src/components/AdminsVue.vue
@@ -0,0 +1,30 @@
+<template>
+  <h1>Vue</h1>
+  <ul>
+    <li v-for="user in list" :key="user.name">
+      {{JSON.stringify(user, null, 2)}}
+    </li>
+  </ul>
+  <div>
+    <h3>Counter</h3>
+    <p>{{count}}</p>
+    <button @click="decreaseCounter">-1</button>
+    <button @click="increaseCounter">+1</button>
+  </div>
+  <br />
+</template>
+
+<script>
+  import { useStore } from 'nanostores/vue'
+
+  import { admins } from '../store/admins.js'
+  import { counter, increaseCounter, decreaseCounter } from '../store/counter.js'
+
+  export default {
+    setup() {
+      const list = useStore(admins)
+      const count = useStore(counter)
+      return { list, count, increaseCounter, decreaseCounter }
+    }
+  }
+</script>
diff --git a/examples/with-nanostores/src/pages/index.astro b/examples/with-nanostores/src/pages/index.astro
new file mode 100644
index 000000000..3d7e1d4d6
--- /dev/null
+++ b/examples/with-nanostores/src/pages/index.astro
@@ -0,0 +1,44 @@
+---
+import AdminsReact from '../components/AdminsReact.jsx';
+import AdminsSvelte from '../components/AdminsSvelte.svelte';
+import AdminsVue from '../components/AdminsVue.vue';
+import AdminsPreact from '../components/AdminsPreact.jsx';
+---
+
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Astro</title>
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+
+    <link rel="stylesheet" href="/style/global.css">
+    <link rel="stylesheet" href="/style/home.css">
+
+    <style>
+        header {
+            display: flex;
+            flex-direction: column;
+            gap: 1em;
+            max-width: min(100%, 68ch);
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <header>
+            <div>
+                <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
+                <h1>Welcome to <a href="https://astro.build/">Astro</a> -
+                <a href="https://github.com/nanostores/nanostores">nanostores</a></h1>
+            </div>
+        </header>
+        <AdminsReact:load />
+        <AdminsSvelte:load />
+        <AdminsVue:load />
+        <AdminsPreact:load />
+    </main>
+</body>
+</html>
diff --git a/examples/with-nanostores/src/store/admins.js b/examples/with-nanostores/src/store/admins.js
new file mode 100644
index 000000000..91215470b
--- /dev/null
+++ b/examples/with-nanostores/src/store/admins.js
@@ -0,0 +1,7 @@
+import { createDerived } from 'nanostores';
+
+import { users } from './users.js';
+
+const admins = createDerived(users, (list) => list.filter((user) => user.isAdmin));
+
+export { admins };
diff --git a/examples/with-nanostores/src/store/counter.js b/examples/with-nanostores/src/store/counter.js
new file mode 100644
index 000000000..a57d8e2c3
--- /dev/null
+++ b/examples/with-nanostores/src/store/counter.js
@@ -0,0 +1,15 @@
+import { createStore, getValue } from 'nanostores';
+
+const counter = createStore(() => {
+  counter.set(0);
+});
+
+function increaseCounter() {
+  counter.set(getValue(counter) + 1);
+}
+
+function decreaseCounter() {
+  counter.set(getValue(counter) - 1);
+}
+
+export { counter, increaseCounter, decreaseCounter };
diff --git a/examples/with-nanostores/src/store/users.js b/examples/with-nanostores/src/store/users.js
new file mode 100644
index 000000000..719f75cd1
--- /dev/null
+++ b/examples/with-nanostores/src/store/users.js
@@ -0,0 +1,27 @@
+import { createStore, getValue } from 'nanostores';
+
+const users = createStore(() => {
+  users.set([
+    {
+      name: 'Imanadmin',
+      age: 2,
+      isAdmin: true,
+    },
+    {
+      name: 'Imnotadmin',
+      age: 35,
+      isAdmin: false,
+    },
+    {
+      name: 'Wowsomuchadmin',
+      age: 3634,
+      isAdmin: true,
+    },
+  ]);
+});
+
+const addUser = function addUser(user) {
+  users.set([...getValue(users), user]);
+};
+
+export { users, addUser };