add Store to the documentation

Author: bholmesdev

www/astro.config.mjs

@@ -10,6 +10,10 @@ export default defineConfig({
 				discord: "https://wtw.dev/chat",
 			},
 			sidebar: [
+				{
+					label: "💾 Store",
+					link: "/store",
+				},
 				{
 					label: "🔎 Query",
 					link: "/query",
@@ -18,18 +22,17 @@ export default defineConfig({
 					label: "🔎 Scope",
 					link: "/scope",
 				},
-            
 				{
 					label: "🌊 Stream",
 					link: "/stream",
-                  badge: { text: 'Deprecated', variant: 'caution' },
+					badge: { text: "Deprecated", variant: "caution" },
 				},
 				{
 					label: "🧘‍♂️ Form",
 					autogenerate: { directory: "form" },
-                  collapsed: true,
-                  badge: { text: 'Deprecated', variant: 'caution' },
-				}
+					collapsed: true,
+					badge: { text: "Deprecated", variant: "caution" },
+				},
 			],
 			customCss: [
 				"@fontsource/atkinson-hyperlegible/400.css",

www/src/content/docs/store.md

@@ -0,0 +1,143 @@
+---
+title: Simple store 💾
+description: A reactive store that combines the simplicity of signals with the power of "selectors" you'd find in Zustand or Redux.
+---
+
+A reactive store that combines the simplicity of signals with the power of "selectors" you'd find in Zustand or Redux.
+
+```tsx
+import { store } from "@simplestack/store";
+
+const documentStore = store({
+    title: "Untitled",
+    description: "Description",
+});
+
+const title = documentStore.select("title");
+const description = documentStore.select("description");
+
+title.set("New title");
+console.log(title.get()); // "New title"
+description.set("New description");
+console.log(description.get()); // "New description"
+```
+
+## Installation
+
+Install the dependency from npm:
+
+```bash
+npm i @simplestack/store
+```
+
+Then, import the store and use it in your component:
+
+```tsx
+import { store } from "@simplestack/store";
+```
+
+## Usage
+
+Here's an overview of how stores are created, and how you can operate on parts of a store using `.select()`:
+
+```tsx
+import { store } from "@simplestack/store";
+import { useStoreValue } from "@simplestack/store/react";
+
+// Define your store with an initial state
+const documentStore = store({
+  title: "Untitled",
+  authors: ["Ada", "Ben"],
+  meta: {
+    pages: 3,
+    tags: ["draft", "internal"],
+  },
+});
+
+// Select parts of a store to listen to individually
+const titleStore = documentStore.select("title");
+const tagsStore = documentStore.select("meta").select("tags");
+
+function Document() {
+  // Update your UI with the store's current state
+  const { title, tags } = useStoreValue(documentStore);
+  return (
+    <div>
+      {title} {tags.join(", ")}
+    </div>
+  );
+}
+
+function Title() {
+  // And scope updates with selected stores for fine-grained control
+  const title = useStoreValue(titleStore);
+  return (
+    <input value={title} onChange={(e) => titleStore.set(e.target.value)} />
+  );
+}
+```
+
+## API
+
+### store(initial)
+
+Creates a store with `get`, `set`, `subscribe`, and (for objects and arrays) `select`.
+
+- Parameters: `initial: number | string | boolean | null | undefined | object`
+- Returns: `Store<T>` where `T` is inferred from `initial` or supplied via generics
+
+```ts
+import { store } from "@simplestack/store";
+
+const counter = store(0);
+counter.set((n) => n + 1);
+console.log(counter.get()); // 1
+
+// Select parts of a store for objects and arrays
+const doc = store({ title: "x" });
+const title = doc.select("title");
+```
+
+### React
+
+#### useStoreValue(store)
+
+React hook to subscribe to a store and get its current value.
+
+- Parameters: `store: Store<T> | undefined`
+- Returns: `T | undefined`
+
+```tsx
+import { store } from "@simplestack/store";
+import { useStoreValue } from "@simplestack/store/react";
+
+const counterStore = store(0);
+
+function Counter() {
+  const counter = useStoreValue(counterStore);
+  return (
+    <button onClick={() => counterStore.set((n) => n + 1)}>{counter}</button>
+  );
+}
+```
+
+## Type Reference
+
+These types are exported for TypeScript users.
+
+- StateObject: `Record<string | number | symbol, any>`
+- StatePrimitive: `string | number | boolean | null | undefined`
+- Setter<T>: `T | ((state: T) => T)`
+- Store<T>:
+  - `get(): T`
+  - `set(setter: Setter<T>): void`
+  - `subscribe(callback: (state: T) => void): () => void`
+  - `select(key: K): Store<SelectValue<T, K>>`: present only when `T` is an object or array
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit an issue or pull request.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.