test: fix failing test

docs: add the 0.9.8 changelog

.changeset/config.json

@@ -6,18 +6,23 @@
   "linked": [
     [
       "cojson",
-      "jazz-tools",
-      "jazz-browser",
-      "jazz-browser-media-images",
-      "jazz-browser-auth-clerk",
-      "jazz-react-auth-clerk",
-      "jazz-react",
-      "jazz-react-native",
-      "jazz-nodejs",
-      "jazz-run",
-      "cojson-transport-ws",
+      "cojson-storage",
       "cojson-storage-indexeddb",
-      "cojson-storage-sqlite"
+      "cojson-storage-sqlite",
+      "cojson-transport-ws",
+      "jazz-browser",
+      "jazz-browser-auth-clerk",
+      "jazz-browser-media-images",
+      "jazz-nodejs",
+      "jazz-react",
+      "jazz-react-auth-clerk",
+      "jazz-react-native",
+      "jazz-react-native-auth-clerk",
+      "jazz-react-native-media-images",
+      "jazz-run",
+      "jazz-svelte",
+      "jazz-tools",
+      "jazz-vue"
     ]
   ],
   "access": "public",

.changeset/famous-knives-cover.md

@@ -0,0 +1,7 @@
+---
+"chat-rn-clerk": patch
+"jazz-react-native": patch
+"jazz-example-chat": patch
+---
+
+Fix image handling in react-native

.changeset/silver-sheep-perform.md

@@ -0,0 +1,5 @@
+---
+"cojson": patch
+---
+
+Optimize queue management

.github/workflows/build-examples.yaml

@@ -11,11 +11,13 @@ jobs:
       matrix:
         example: [
           "chat",
-          "chat-clerk",
+          "clerk",
+          "passkey",
           "inspector",
           "music-player",
           "password-manager",
           "pets",
+          "reactions",
           "todo",
           "onboarding",
         ]

.github/workflows/build-starters.yaml

@@ -0,0 +1,52 @@
+name: Build Starters
+
+on:
+  push:
+    branches: [ "main" ]
+
+jobs:
+  build-starters:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        starter: [
+          "react-demo-auth-tailwind",
+        ]
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        submodules: true
+
+    - name: Enable corepack
+      run: corepack enable
+
+    - name: Install Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version-file: '.node-version'
+        cache: 'pnpm'
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - uses: actions/cache@v3
+      name: Setup pnpm cache
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+
+    - name: Pnpm Build
+      run: |
+        pnpm install
+        pnpm turbo build;
+      working-directory: ./starters/${{ matrix.starter }}

.github/workflows/playwright.yml

@@ -13,7 +13,7 @@ jobs:
     continue-on-error: true
     strategy:
       matrix:
-        project: ["e2e/BinaryCoStream", "e2e/CoValues", "examples/chat", "examples/music-player", "examples/pets", "examples/onboarding"]
+        project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/pets", "examples/onboarding", "starters/react-demo-auth-tailwind"]
 
     steps:
       - uses: actions/checkout@v3
@@ -41,20 +41,16 @@ jobs:
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
-      
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
       - name: Pnpm Build
         run: pnpm turbo build
         working-directory: ./${{ matrix.project }}
-      
-      - name: Build jazz-run
-        run: pnpm exec turbo build && chmod +x dist/index.js;
-        working-directory: ./packages/jazz-run
 
       - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps
+        run: pnpm exec playwright install
         working-directory: ./${{ matrix.project }}
 
       - name: Run Playwright tests

.github/workflows/release.yml

@@ -4,6 +4,13 @@ on:
   push:
     branches:
       - main
+  workflow_dispatch:
+    inputs:
+      debug_enabled:
+        type: boolean
+        description: "Run tmate session for debugging"
+        required: false
+        default: false
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
@@ -48,4 +55,11 @@ jobs:
           publish: pnpm release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      # Enable tmate debugging only if the workflow is manually triggered, debug_enabled is true, and the workflow failed
+      - name: Setup tmate session for debugging
+        if: ${{ failure() && github.event_name == 'workflow_dispatch' && inputs.debug_enabled }}
+        uses: mxschmitt/action-tmate@v3
+        with:
+          timeout-minutes: 15

.github/workflows/unit-test.yml

@@ -41,7 +41,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Pnpm Build
-        run: pnpm turbo build
+        run: pnpm turbo build --filter="./packages/*"
 
       - name: Unit Tests
         run: pnpm test:ci

.gitignore

@@ -5,6 +5,7 @@ docsTmp
 .DS_Store
 .turbo
 coverage
+.direnv
 
 # Next.js
 **/.next
@@ -15,4 +16,6 @@ coverage
 # Playwright
 test-results
 
-.husky
+.husky
+
+.vscode/settings.json

.node-version

@@ -1 +1 @@
-20
+22

.nvmrc

@@ -0,0 +1 @@
+22

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "editor.defaultFormatter": "biomejs.biome"
-}

CODE_OF_CONDUCT.md

@@ -59,7 +59,7 @@ representative at an online or offline event.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to [the community leaders responsible for enforcement](mailto:hello@gcmp.io).
+reported to [the community leaders responsible for enforcement](mailto:hello@garden.co).
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

CONTRIBUTING.md

@@ -6,7 +6,7 @@ Thank you for considering contributing to Jazz! Jazz is an open-source framework
 
 ### 1. Reporting Bugs
 
-If you find a bug, please [open an issue with as much detail as possible](https://github.com/gardencmp/jazz/issues). Include:
+If you find a bug, please [open an issue with as much detail as possible](https://github.com/garden-co/jazz/issues). Include:
 
 - A clear and descriptive title.
 - Steps to reproduce the issue.
@@ -40,7 +40,7 @@ You'll need Node.js 20.x or 22.x installed (we're working on support for 23.x),
 
 1. **Clone the repository**:
    ```bash
-   git clone https://github.com/gardencmp/jazz.git
+   git clone https://github.com/garden-co/jazz.git
    ```
 
 2. **Install dependencies**:

README.md

@@ -15,6 +15,6 @@ For community and support, please join our [Discord](https://discord.gg/utDMjHYg
 - Homepage: [jazz.tools](https://jazz.tools)
 - Docs: [jazz.tools/docs](https://jazz.tools/docs)
 - Community & support: [Discord](https://discord.gg/utDMjHYg42)
-- Updates: [X](https://x.com/jazz_tools) & [Email](https://gcmp.io/news)
+- Updates: [X](https://x.com/jazz_tools) & [Email](https://garden.co/news)
 
 Copyright 2024 — Garden Computing, Inc.

biome.json

@@ -7,7 +7,13 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["jazz-tools.json", "**/ios/**", "**/android/**"]
+    "ignore": [
+      "jazz-tools.json",
+      "**/ios/**",
+      "**/android/**",
+      "packages/jazz-svelte/**",
+      "examples/*svelte*/**"
+    ]
   },
   "formatter": {
     "enabled": true,
@@ -19,7 +25,53 @@
   "linter": {
     "enabled": false,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "correctness": {
+        "useImportExtensions": {
+          "level": "error",
+          "options": {
+            "suggestedExtensions": {
+              "ts": {
+                "module": "js",
+                "component": "jsx"
+              }
+            }
+          }
+        }
+      }
     }
-  }
+  },
+  "overrides": [
+    {
+      "include": ["packages/**/src/**"],
+      "linter": {
+        "enabled": true,
+        "rules": {
+          "recommended": false
+        }
+      }
+    },
+    {
+      "include": ["packages/**/src/tests/**", "packages/**/src/test/**"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "useImportExtensions": "off"
+          }
+        }
+      }
+    },
+    {
+      "include": ["packages/cojson-storage-indexeddb/**"],
+      "linter": {
+        "enabled": true,
+        "rules": {
+          "recommended": true,
+          "suspicious": {
+            "noExplicitAny": "info"
+          }
+        }
+      }
+    }
+  ]
 }

e2e/BinaryCoStream/index.html

@@ -1,14 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/jazz-logo.png" />
-    <link rel="stylesheet" href="/src/index.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Jazz BinaryCoStream Tests</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/app.tsx"></script>
-  </body>
-</html>

e2e/BinaryCoStream/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "@jazz-e2e/binarycostream",
-  "private": true,
-  "version": "0.0.100",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "format-and-lint": "biome check .",
-    "format-and-lint:fix": "biome check . --write",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "test": "playwright test",
-    "test:ui": "playwright test --ui"
-  },
-  "dependencies": {
-    "cojson": "workspace:0.8.21",
-    "hash-slash": "workspace:0.2.1",
-    "is-ci": "^3.0.1",
-    "jazz-react": "workspace:0.8.22",
-    "jazz-tools": "workspace:0.8.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.46.1",
-    "@types/node": "^22.5.1",
-    "@types/react": "^18.2.19",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10"
-  }
-}

e2e/BinaryCoStream/src/DownloaderPeer.tsx

@@ -1,46 +0,0 @@
-import { Account, BinaryCoStream, ID } from "jazz-tools";
-import { useEffect } from "react";
-import { useAccount, useCoState } from "./jazz";
-import { waitForCoValue } from "./lib/waitForCoValue";
-import { UploadedFile } from "./schema";
-
-async function getUploadedFile(me: Account, uploadedFileId: ID<UploadedFile>) {
-  const uploadedFile = await waitForCoValue(
-    UploadedFile,
-    uploadedFileId,
-    me,
-    Boolean,
-    {},
-  );
-
-  uploadedFile.coMapDownloaded = true;
-
-  await BinaryCoStream.loadAsBlob(uploadedFile._refs.file.id, me);
-
-  return uploadedFile;
-}
-
-export function DownloaderPeer(props: { testCoMapId: ID<UploadedFile> }) {
-  const account = useAccount();
-  const testCoMap = useCoState(UploadedFile, props.testCoMapId, {});
-
-  useEffect(() => {
-    getUploadedFile(account.me, props.testCoMapId).then((value) => {
-      value.syncCompleted = true;
-    });
-  }, []);
-
-  return (
-    <>
-      <h1>Downloader Peer</h1>
-      <div>Fetching: {props.testCoMapId}</div>
-      <div data-testid="result">
-        Covalue: {Boolean(testCoMap?.id) ? "Downloaded" : "Not Downloaded"}
-      </div>
-      <div data-testid="result">
-        File:{" "}
-        {Boolean(testCoMap?.syncCompleted) ? "Downloaded" : "Not Downloaded"}
-      </div>
-    </>
-  );
-}

e2e/BinaryCoStream/src/app.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { DownloaderPeer } from "./DownloaderPeer";
-import { UploaderPeer } from "./UploaderPeer";
-import { AuthAndJazz } from "./jazz";
-import { getValueId } from "./lib/searchParams";
-
-function Main() {
-  const valueId = getValueId();
-
-  if (valueId) {
-    return <DownloaderPeer testCoMapId={valueId} />;
-  }
-
-  return <UploaderPeer />;
-}
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <AuthAndJazz>
-      <Main />
-    </AuthAndJazz>
-  </React.StrictMode>,
-);

e2e/BinaryCoStream/src/jazz.tsx

@@ -1,39 +0,0 @@
-import { createJazzReactApp, useDemoAuth } from "jazz-react";
-import { useEffect, useRef } from "react";
-import { getValueId } from "./lib/searchParams";
-
-const key = getValueId()
-  ? `downloader-e2e@jazz.tools`
-  : `uploader-e2e@jazz.tools`;
-
-const localSync = new URLSearchParams(location.search).has("localSync");
-
-const Jazz = createJazzReactApp();
-
-export const { useAccount, useCoState } = Jazz;
-
-export function AuthAndJazz({ children }: { children: React.ReactNode }) {
-  const [auth, state] = useDemoAuth();
-
-  const signedUp = useRef(false);
-
-  useEffect(() => {
-    if (state.state === "ready" && !signedUp.current) {
-      state.signUp("Mister X");
-      signedUp.current = true;
-    }
-  }, [state.state]);
-
-  return (
-    <Jazz.Provider
-      auth={auth}
-      peer={
-        localSync
-          ? `ws://localhost:4200?key=${key}`
-          : `wss://cloud.jazz.tools/?key=${key}`
-      }
-    >
-      {children}
-    </Jazz.Provider>
-  );
-}

e2e/BinaryCoStream/src/lib/waitForCoValue.ts

@@ -1,39 +0,0 @@
-import {
-  Account,
-  CoValue,
-  CoValueClass,
-  DepthsIn,
-  ID,
-  subscribeToCoValue,
-} from "jazz-tools";
-
-export function waitForCoValue<T extends CoValue>(
-  coMap: CoValueClass<T>,
-  valueId: ID<T>,
-  account: Account,
-  predicate: (value: T) => boolean,
-  depth: DepthsIn<T>,
-) {
-  return new Promise<T>((resolve) => {
-    function subscribe() {
-      const unsubscribe = subscribeToCoValue(
-        coMap,
-        valueId,
-        account,
-        depth,
-        (value) => {
-          if (predicate(value)) {
-            resolve(value);
-            unsubscribe();
-          }
-        },
-        () => {
-          unsubscribe();
-          setTimeout(subscribe, 100);
-        },
-      );
-    }
-
-    subscribe();
-  });
-}

e2e/CoValues/CHANGELOG.md

@@ -1,154 +0,0 @@
-# @jazz-e2e/covalues
-
-## 0.0.99
-
-### Patch Changes
-
-- Updated dependencies [59cc64d]
-  - jazz-react@0.8.22
-
-## 0.0.98
-
-### Patch Changes
-
-- Updated dependencies [0f30eea]
-- Updated dependencies [149ca97]
-  - cojson@0.8.21
-  - jazz-tools@0.8.21
-  - jazz-react@0.8.21
-
-## 0.0.97
-
-### Patch Changes
-
-- Updated dependencies [dd9b13f]
-- Updated dependencies [a69ed0b]
-- Updated dependencies [3ef3ff3]
-- Updated dependencies [c6931b8]
-  - jazz-react@0.8.20
-
-## 0.0.96
-
-### Patch Changes
-
-- Updated dependencies [9c2aadb]
-  - cojson@0.8.19
-  - jazz-react@0.8.19
-  - jazz-tools@0.8.19
-
-## 0.0.95
-
-### Patch Changes
-
-- Updated dependencies [d4319d8]
-  - cojson@0.8.18
-  - jazz-react@0.8.18
-  - jazz-tools@0.8.18
-
-## 0.0.94
-
-### Patch Changes
-
-- Updated dependencies [d433cf4]
-  - cojson@0.8.17
-  - jazz-react@0.8.17
-  - jazz-tools@0.8.17
-
-## 0.0.93
-
-### Patch Changes
-
-- Updated dependencies [2af107c]
-- Updated dependencies [b934fab]
-  - jazz-react@0.8.16
-  - cojson@0.8.16
-  - jazz-tools@0.8.16
-
-## 0.0.92
-
-### Patch Changes
-
-- Updated dependencies [cce679b]
-  - jazz-tools@0.8.15
-  - jazz-react@0.8.15
-
-## 0.0.91
-
-### Patch Changes
-
-- Updated dependencies [36273b3]
-  - jazz-tools@0.8.14
-  - jazz-react@0.8.14
-
-## 0.0.90
-
-### Patch Changes
-
-- Updated dependencies [fd011d7]
-  - jazz-tools@0.8.13
-  - jazz-react@0.8.13
-
-## 0.0.89
-
-### Patch Changes
-
-- Updated dependencies [6ed75eb]
-- Updated dependencies [3cc6aee]
-  - cojson@0.8.12
-  - jazz-react@0.8.12
-  - jazz-tools@0.8.12
-
-## 0.0.88
-
-### Patch Changes
-
-- Updated dependencies [1ed4ab5]
-  - cojson@0.8.11
-  - jazz-react@0.8.11
-  - jazz-tools@0.8.11
-
-## 0.0.87
-
-### Patch Changes
-
-- jazz-react@0.8.7
-
-## 0.0.86
-
-### Patch Changes
-
-- jazz-react@0.8.6
-
-## 0.0.85
-
-### Patch Changes
-
-- Updated dependencies [c3f4e6b]
-- Updated dependencies [d9152ed]
-  - jazz-tools@0.8.5
-  - cojson@0.8.5
-  - jazz-react@0.8.5
-
-## 0.0.84
-
-### Patch Changes
-
-- Updated dependencies
-  - hash-slash@0.2.1
-
-## 0.0.83
-
-### Patch Changes
-
-- Updated dependencies
-  - cojson@0.8.3
-  - jazz-react@0.8.3
-  - jazz-tools@0.8.3
-
-## 0.0.82
-
-### Patch Changes
-
-- Updated dependencies [a075f90]
-  - jazz-tools@0.8.2
-  - jazz-react@0.8.2

e2e/CoValues/src/app.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
-import { AuthAndJazz } from "./jazz";
-import { ResumeSyncState } from "./pages/ResumeSyncState";
-import { TestInput } from "./pages/TestInput";
-
-const router = createBrowserRouter([
-  {
-    path: "/test-input",
-    element: <TestInput />,
-  },
-  {
-    path: "/resume-sync",
-    element: <ResumeSyncState />,
-  },
-  {
-    path: "/",
-    element: <TestInput />,
-  },
-]);
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <AuthAndJazz>
-      <RouterProvider router={router} />
-    </AuthAndJazz>
-  </React.StrictMode>,
-);

e2e/CoValues/src/jazz.tsx

@@ -1,43 +0,0 @@
-import { createJazzReactApp, useDemoAuth } from "jazz-react";
-import { useEffect, useRef } from "react";
-
-const key = `test-comap@jazz.tools`;
-
-const url = new URL(window.location.href);
-const peer =
-  (url.searchParams.get("peer") as `ws://${string}`) ??
-  `wss://cloud.jazz.tools/`;
-
-const Jazz = createJazzReactApp();
-
-export const { useAccount, useCoState } = Jazz;
-
-function getUserInfo() {
-  return url.searchParams.get("userName") ?? "Mister X";
-}
-
-export function AuthAndJazz({ children }: { children: React.ReactNode }) {
-  const [auth, state] = useDemoAuth();
-
-  const signedUp = useRef(false);
-
-  useEffect(() => {
-    if (state.state === "ready" && !signedUp.current) {
-      const userName = getUserInfo();
-
-      if (state.existingUsers.includes(userName)) {
-        state.logInAs(userName);
-      } else {
-        state.signUp(userName);
-      }
-
-      signedUp.current = true;
-    }
-  }, [state.state]);
-
-  return (
-    <Jazz.Provider auth={auth} peer={`${peer}?key=${key}`}>
-      {children}
-    </Jazz.Provider>
-  );
-}

e2e/CoValues/vite.config.ts

@@ -1,10 +0,0 @@
-import react from "@vitejs/plugin-react-swc";
-import { defineConfig } from "vite";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  build: {
-    minify: false,
-  },
-});

examples/book-shelf/.gitignore

@@ -1,36 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts

examples/book-shelf/CHANGELOG.md

@@ -1,130 +0,0 @@
-# jazz-example-book-shelf
-
-## 0.1.15
-
-### Patch Changes
-
-- Updated dependencies [59cc64d]
-  - jazz-react@0.8.22
-  - jazz-browser-media-images@0.8.22
-
-## 0.1.14
-
-### Patch Changes
-
-- Updated dependencies [149ca97]
-  - jazz-tools@0.8.21
-  - jazz-react@0.8.21
-  - jazz-browser-media-images@0.8.21
-
-## 0.1.13
-
-### Patch Changes
-
-- Updated dependencies [dd9b13f]
-- Updated dependencies [a69ed0b]
-- Updated dependencies [3ef3ff3]
-- Updated dependencies [c6931b8]
-  - jazz-react@0.8.20
-  - jazz-browser-media-images@0.8.20
-
-## 0.1.12
-
-### Patch Changes
-
-- jazz-react@0.8.19
-- jazz-tools@0.8.19
-- jazz-browser-media-images@0.8.19
-
-## 0.1.11
-
-### Patch Changes
-
-- jazz-react@0.8.18
-- jazz-tools@0.8.18
-- jazz-browser-media-images@0.8.18
-
-## 0.1.10
-
-### Patch Changes
-
-- jazz-react@0.8.17
-- jazz-tools@0.8.17
-- jazz-browser-media-images@0.8.17
-
-## 0.1.9
-
-### Patch Changes
-
-- Updated dependencies [2af107c]
-  - jazz-react@0.8.16
-  - jazz-browser-media-images@0.8.16
-  - jazz-tools@0.8.16
-
-## 0.1.8
-
-### Patch Changes
-
-- Updated dependencies [cce679b]
-  - jazz-tools@0.8.15
-  - jazz-browser-media-images@0.8.15
-  - jazz-react@0.8.15
-
-## 0.1.7
-
-### Patch Changes
-
-- Updated dependencies [36273b3]
-  - jazz-tools@0.8.14
-  - jazz-browser-media-images@0.8.14
-  - jazz-react@0.8.14
-
-## 0.1.6
-
-### Patch Changes
-
-- Updated dependencies [fd011d7]
-  - jazz-tools@0.8.13
-  - jazz-browser-media-images@0.8.13
-  - jazz-react@0.8.13
-
-## 0.1.5
-
-### Patch Changes
-
-- Updated dependencies [3cc6aee]
-  - jazz-react@0.8.12
-  - jazz-tools@0.8.12
-  - jazz-browser-media-images@0.8.12
-
-## 0.1.4
-
-### Patch Changes
-
-- jazz-react@0.8.11
-- jazz-tools@0.8.11
-- jazz-browser-media-images@0.8.11
-
-## 0.1.3
-
-### Patch Changes
-
-- jazz-browser-media-images@0.8.7
-- jazz-react@0.8.7
-
-## 0.1.2
-
-### Patch Changes
-
-- jazz-browser-media-images@0.8.6
-- jazz-react@0.8.6
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [c3f4e6b]
-- Updated dependencies [d9152ed]
-  - jazz-tools@0.8.5
-  - jazz-browser-media-images@0.8.5
-  - jazz-react@0.8.5

examples/book-shelf/Dockerfile

@@ -1,4 +0,0 @@
-FROM caddy:2.7.3-alpine
-LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
-
-COPY ./dist /usr/share/caddy/

examples/book-shelf/README.md

@@ -1,43 +0,0 @@
-# Jazz Book Shelf Example
-
-Live version: [https://books-demo.jazz.tools](https://books-demo.jazz.tools)
-
-## Installing & running the example locally
-
-(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
-
-Start by checking out `jazz`
-
-Install dependencies:
-
-```bash
-pnpm install
-```
-
-Go to the `examples/book-shelf` directory.
-
-```bash
-cd examples/book-shelf
-```
-
-Install dependencies:
-
-```bash
-pnpm install
-```
-
-Start the dev server:
-
-```bash
-pnpm dev
-```
-
-## Questions / problems / feedback
-
-If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
-
-## Configuration: sync server
-
-By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
-
-You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/components/JazzAndAuth.tsx](./src/2_main.tsx).

examples/book-shelf/job-template.nomad

@@ -1,56 +0,0 @@
-job "example-bookShelf$BRANCH_SUFFIX" {
-  region     = "global"
-  datacenters = ["*"]
-
-  group "static" {
-    count = 4
-
-    network {
-      port "http" {
-        to = 80
-      }
-    }
-
-    constraint {
-      attribute = "${node.class}"
-      operator  = "="
-      value     = "cloud"
-    }
-
-    spread {
-      attribute = "${node.datacenter}"
-      weight    = 100
-    }
-
-    constraint {
-      distinct_hosts = true
-    }
-
-    task "server" {
-      driver = "docker"
-
-      config {
-        image = "$DOCKER_TAG"
-        ports = ["http"]
-
-        auth = {
-          username = "$DOCKER_USER"
-          password = "$DOCKER_PASSWORD"
-        }
-      }
-
-      service {
-        tags = ["public"]
-        name = "example-bookShelf$BRANCH_SUFFIX"
-        port = "http"
-        provider = "consul"
-      }
-
-      resources {
-        cpu    = 50 # MHz
-        memory = 50 # MB
-      }
-    }
-  }
-}
-# deploy bump 4

examples/book-shelf/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/book-shelf/next.config.mjs

@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default nextConfig;

examples/book-shelf/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "jazz-example-book-shelf",
-  "version": "0.1.15",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "format-and-lint": "biome check .",
-    "format-and-lint:fix": "biome check . --write",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.8.22",
-    "jazz-react": "workspace:0.8.22",
-    "jazz-tools": "workspace:0.8.21",
-    "next": "14.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/node": "^22.5.1",
-    "@types/react": "^18.2.19",
-    "@types/react-dom": "^18.2.7",
-    "postcss": "^8.4.27",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3"
-  }
-}

examples/book-shelf/postcss.config.mjs

@@ -1,8 +0,0 @@
-/** @type {import('postcss-load-config').Config} */
-const config = {
-  plugins: {
-    tailwindcss: {},
-  },
-};
-
-export default config;

examples/book-shelf/src/app/add/page.tsx

@@ -1,139 +0,0 @@
-"use client";
-
-import { Button } from "@/components/Button";
-import { Container } from "@/components/Container";
-import { useAccount } from "@/components/JazzAndAuth";
-import RatingInput from "@/components/RatingInput";
-import { BookReview, ListOfBookReviews } from "@/schema";
-import { createImage } from "jazz-browser-media-images";
-import { Group, ImageDefinition } from "jazz-tools";
-import { useRouter } from "next/navigation";
-import { ChangeEvent, useState } from "react";
-
-export default function AddBookReview() {
-  const { me } = useAccount();
-
-  const [title, setTitle] = useState("");
-  const [author, setAuthor] = useState("");
-  const [review, setReview] = useState("");
-  const [rating, setRating] = useState(0);
-  const [dateRead, setDateRead] = useState(
-    new Date().toISOString().split("T")[0],
-  );
-  const [coverImage, setCoverImage] = useState<ImageDefinition | undefined>();
-
-  const router = useRouter();
-
-  const onDateChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const date = new Date(event.currentTarget.value)
-      .toISOString()
-      .split("T")[0];
-    setDateRead(date);
-  };
-
-  const onImageChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const file = event.currentTarget.files?.[0];
-    const group = Group.create({ owner: me });
-    group.addMember("everyone", "reader");
-
-    if (file) {
-      createImage(file, { owner: group }).then((image) => {
-        setCoverImage(image);
-      });
-    }
-  };
-
-  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!me?.profile) return;
-
-    const bookReview = BookReview.create(
-      {
-        title,
-        author,
-        review,
-        rating,
-        dateRead: new Date(dateRead),
-        cover: coverImage,
-      },
-      {
-        owner: me.profile._owner,
-      },
-    );
-
-    if (!me.profile.bookReviews) {
-      me.profile.bookReviews = ListOfBookReviews.create([], {
-        owner: me.profile._owner,
-      });
-    }
-
-    me.profile.bookReviews.push(bookReview);
-    router.push("/");
-  };
-
-  return (
-    <Container className="grid max-w-lg gap-8 py-8">
-      <h1 className="text-lg font-semibold text-black">Add book review</h1>
-      <form action="" className="grid gap-4" onSubmit={onSubmit}>
-        <label className="grid gap-1 text-sm text-gray-600">
-          Cover
-          <input type="file" onChange={onImageChange} />
-        </label>
-
-        <label className="grid gap-1 text-sm text-gray-600">
-          Title
-          <input
-            className="rounded border border-gray-300 px-2 py-1 shadow-sm"
-            type="text"
-            value={title}
-            required
-            onChange={(e) => setTitle(e.target.value)}
-          ></input>
-        </label>
-
-        <label className="grid gap-1 text-sm text-gray-600">
-          Author
-          <input
-            className="rounded border border-gray-300 px-2 py-1 shadow-sm"
-            type="text"
-            value={author}
-            required
-            onChange={(e) => setAuthor(e.target.value)}
-          ></input>
-        </label>
-
-        <label className="grid gap-1 text-sm text-gray-600">
-          Date read
-          <input
-            className="rounded border border-gray-300 px-2 py-1 shadow-sm"
-            type="date"
-            value={dateRead}
-            required
-            onChange={onDateChange}
-          />
-        </label>
-
-        <div className="grid gap-1 text-sm text-gray-600">
-          Rating
-          <RatingInput
-            value={rating}
-            onChange={(rating) => setRating(rating)}
-          />
-        </div>
-
-        <label className="grid gap-1 text-sm text-gray-600">
-          Review
-          <textarea
-            className="rounded border border-gray-300 px-2 py-1 shadow-sm"
-            value={review}
-            onChange={(e) => setReview(e.target.value)}
-          ></textarea>
-        </label>
-        <Button variant="primary" type="submit">
-          Add
-        </Button>
-      </form>
-    </Container>
-  );
-}

examples/book-shelf/src/app/book/[slug]/page.tsx

@@ -1,172 +0,0 @@
-"use client";
-
-import { BookCover } from "@/components/BookCover";
-import { Container } from "@/components/Container";
-import { useCoState } from "@/components/JazzAndAuth";
-import Rating from "@/components/Rating";
-import RatingInput from "@/components/RatingInput";
-import { BookReview } from "@/schema";
-import clsx from "clsx";
-import { Group, ID } from "jazz-tools";
-
-const BookReviewTitle = ({
-  bookReview,
-  readOnly,
-}: {
-  bookReview: BookReview;
-  readOnly: boolean;
-}) => {
-  const className = "font-serif text-2xl font-bold lg:text-4xl";
-
-  if (readOnly) {
-    return <h1 className={className}>{bookReview.title}</h1>;
-  }
-
-  return (
-    <input
-      value={bookReview.title}
-      placeholder="Book title"
-      className={clsx(
-        className,
-        "w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm",
-      )}
-      onChange={(e) => (bookReview.title = e.target.value)}
-    ></input>
-  );
-};
-
-const BookReviewAuthor = ({
-  bookReview,
-  readOnly,
-}: {
-  bookReview: BookReview;
-  readOnly: boolean;
-}) => {
-  const className = "text-gray-700";
-
-  if (readOnly) {
-    return <p className={className}>by {bookReview.author}</p>;
-  }
-
-  return (
-    <input
-      value={bookReview.author}
-      placeholder="Author"
-      className={clsx(
-        className,
-        "w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm",
-      )}
-      onChange={(e) => (bookReview.author = e.target.value)}
-    ></input>
-  );
-};
-
-const BookReviewDateRead = ({
-  bookReview,
-  readOnly,
-}: {
-  bookReview: BookReview;
-  readOnly: boolean;
-}) => {
-  const className = "text-gray-700 max-w-[10rem]";
-
-  if (readOnly) {
-    return (
-      bookReview.dateRead && (
-        <p className={className}>{bookReview.dateRead.toLocaleDateString()}</p>
-      )
-    );
-  }
-
-  return (
-    <input
-      type="date"
-      value={bookReview.dateRead?.toISOString().split("T")[0]}
-      placeholder="Date read"
-      className={clsx(
-        className,
-        "w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm",
-      )}
-      onChange={(e) => {
-        const date = new Date(e.target.value);
-        bookReview.dateRead = date;
-      }}
-    ></input>
-  );
-};
-
-const BookReviewReview = ({
-  bookReview,
-  readOnly,
-}: {
-  bookReview: BookReview;
-  readOnly: boolean;
-}) => {
-  const className = "text-sm leading-relaxed text-gray-600";
-
-  if (readOnly) {
-    if (bookReview.review) {
-      return <p className={className}>{bookReview.review}</p>;
-    }
-  }
-
-  return (
-    <textarea
-      value={bookReview.review}
-      placeholder="Write your review here..."
-      className={clsx(
-        className,
-        "w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm",
-      )}
-      onChange={(e) => (bookReview.review = e.target.value)}
-    ></textarea>
-  );
-};
-
-const BookReviewRating = ({
-  bookReview,
-  readOnly,
-}: {
-  bookReview: BookReview;
-  readOnly: boolean;
-}) => {
-  const className = "text-2xl sm:mx-0";
-
-  if (readOnly) {
-    return <Rating className={className} rating={bookReview.rating} />;
-  }
-
-  return (
-    <RatingInput
-      className={clsx(className, "p-2")}
-      onChange={(rating) => (bookReview.rating = rating)}
-      value={bookReview.rating}
-    />
-  );
-};
-
-export default function Page({ params }: { params: { slug: string } }) {
-  const bookReview = useCoState(BookReview, params.slug as ID<BookReview>);
-
-  if (!bookReview) return <></>;
-
-  const readOnly = !(bookReview._owner.castAs(Group).myRole() === "admin");
-
-  return (
-    <Container className="grid gap-12 py-8">
-      <div className="flex flex-col gap-6 sm:flex-row md:gap-10">
-        <div className="w-[180px]">
-          <BookCover bookReview={bookReview} readOnly={readOnly} />
-        </div>
-
-        <div className="-mx-2 grid max-w-lg flex-1 gap-3 sm:mx-0">
-          <BookReviewTitle bookReview={bookReview} readOnly={readOnly} />
-          <BookReviewAuthor bookReview={bookReview} readOnly={readOnly} />
-          <BookReviewDateRead bookReview={bookReview} readOnly={readOnly} />
-          <BookReviewRating bookReview={bookReview} readOnly={readOnly} />
-          <BookReviewReview bookReview={bookReview} readOnly={readOnly} />
-        </div>
-      </div>
-    </Container>
-  );
-}

examples/book-shelf/src/app/globals.css

@@ -1,13 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :focus {
-    @apply outline-none;
-  }
-
-  :focus-visible {
-    @apply ring-2 ring-purple-600/75 dark:ring-2 dark:ring-white/75;
-  }
-}

examples/book-shelf/src/app/layout.tsx

@@ -1,39 +0,0 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-import { JazzAndAuth } from "@/components/JazzAndAuth";
-import { Nav } from "@/components/Nav";
-import clsx from "clsx";
-import { Fraunces } from "next/font/google";
-
-const fraunces = Fraunces({
-  subsets: ["latin"],
-  display: "swap",
-  variable: "--font-fraunces",
-});
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
-  title: "Jazz Book Shelf",
-  description: "Jazz Book Shelf",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={clsx(inter.className, fraunces.variable)}>
-        <JazzAndAuth>
-          <header>
-            <Nav />
-          </header>
-          <main>{children}</main>
-        </JazzAndAuth>
-      </body>
-    </html>
-  );
-}

examples/book-shelf/src/app/page.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { Container } from "@/components/Container";
-import { useAccount } from "@/components/JazzAndAuth";
-import UserProfile from "@/components/UserProfile";
-import { JazzAccount } from "@/schema";
-import { ID } from "jazz-tools";
-
-export default function Home() {
-  const { me } = useAccount();
-
-  return (
-    <Container className="grid gap-12 py-8">
-      <UserProfile id={me?.id as ID<JazzAccount>} />
-
-      <label className="flex flex-wrap items-center gap-3">
-        Share your profile:
-        <input
-          type="text"
-          className="w-full rounded border p-1"
-          value={`${window.location.origin}/user/${me?.id}`}
-          readOnly
-        />
-      </label>
-    </Container>
-  );
-}

examples/book-shelf/src/app/user/[slug]/page.tsx

@@ -1,14 +0,0 @@
-import { Container } from "@/components/Container";
-import UserProfile from "@/components/UserProfile";
-import { JazzAccount } from "@/schema";
-import { ID } from "jazz-tools";
-
-export default function Page({ params }: { params: { slug: string } }) {
-  const { slug } = params;
-
-  return (
-    <Container className="py-8">
-      <UserProfile id={slug as ID<JazzAccount>} />
-    </Container>
-  );
-}

examples/book-shelf/src/components/BookCover.tsx

@@ -1,134 +0,0 @@
-import { Button } from "@/components/Button";
-import { useAccount } from "@/components/JazzAndAuth";
-import PlusIcon from "@/components/icons/PlusIcon";
-import { BookReview } from "@/schema";
-import clsx from "clsx";
-import { createImage } from "jazz-browser-media-images";
-import { ProgressiveImg } from "jazz-react";
-import { Group, ImageDefinition } from "jazz-tools";
-import { ChangeEvent, useRef, useState } from "react";
-
-const BookCoverContainer = ({
-  children,
-  className = "",
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) => {
-  return (
-    <div className={clsx("h-[240px] lg:h-[260px]", className)}>{children}</div>
-  );
-};
-
-const MockCover = ({ bookReview }: { bookReview: BookReview }) => {
-  return (
-    <div className="flex h-full flex-col items-center justify-center gap-3 rounded-l-sm rounded-r-md bg-gray-100 px-3 text-center shadow-lg">
-      <p className="font-medium">{bookReview.title}</p>
-      <p className="text-xs">{bookReview.author}</p>
-    </div>
-  );
-};
-
-export function BookCoverReadOnly({
-  bookReview,
-  className,
-}: {
-  bookReview: BookReview;
-  className?: string;
-}) {
-  if (bookReview.cover) {
-    return (
-      <BookCoverContainer className={className}>
-        <ProgressiveImg image={bookReview.cover}>
-          {({ src }) => (
-            <img
-              className="max-h-full max-w-full rounded-l-sm rounded-r-md shadow-lg"
-              src={src}
-            />
-          )}
-        </ProgressiveImg>
-      </BookCoverContainer>
-    );
-  }
-
-  return (
-    <BookCoverContainer className={className}>
-      <MockCover bookReview={bookReview} />
-    </BookCoverContainer>
-  );
-}
-
-export function BookCoverInput({ bookReview }: { bookReview: BookReview }) {
-  const { me } = useAccount();
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const onImageChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (!me?.profile) return;
-
-    const file = event.currentTarget.files?.[0];
-
-    if (file) {
-      createImage(file, { owner: me.profile._owner }).then((image) => {
-        bookReview.cover = image;
-      });
-    }
-  };
-
-  const onUploadClick = () => {
-    inputRef.current?.click();
-  };
-
-  const remove = () => {
-    bookReview.cover = null;
-  };
-
-  if (bookReview.cover) {
-    return (
-      <div className="group relative inline-block">
-        <BookCoverReadOnly
-          className="transition-opacity group-hover:opacity-40"
-          bookReview={bookReview}
-        />
-        <div className="absolute left-0 top-0 hidden h-full w-full items-center justify-center rounded-l-sm rounded-r-md group-hover:flex">
-          <Button
-            variant="tertiary"
-            type="button"
-            className="shadow"
-            onClick={remove}
-          >
-            Remove
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <BookCoverContainer className="flex w-[180px] flex-col justify-center rounded-l-sm rounded-r-md bg-gray-100 p-3 shadow-lg">
-      <button
-        className="flex h-full w-full flex-col items-center justify-center gap-3 text-gray-500 transition-colors hover:text-gray-600"
-        type="button"
-        onClick={onUploadClick}
-      >
-        <PlusIcon className="h-10 w-10" />
-        Upload book cover
-      </button>
-      <label className="sr-only">
-        Cover
-        <input ref={inputRef} type="file" onChange={onImageChange} />
-      </label>
-    </BookCoverContainer>
-  );
-}
-
-export function BookCover({
-  bookReview,
-  readOnly,
-}: {
-  bookReview: BookReview;
-  readOnly?: boolean;
-}) {
-  if (readOnly) return <BookCoverReadOnly bookReview={bookReview} />;
-
-  return <BookCoverInput bookReview={bookReview} />;
-}

examples/book-shelf/src/components/BookReviewHeader.tsx

@@ -1,30 +0,0 @@
-import { BookCover } from "@/components/BookCover";
-import Rating from "@/components/Rating";
-import RatingInput from "@/components/RatingInput";
-import { BookReview } from "@/schema";
-import { Group } from "jazz-tools";
-
-export function BookReviewHeader({ bookReview }: { bookReview: BookReview }) {
-  const { title, author, rating, review, dateRead } = bookReview;
-
-  return (
-    <div className="grid gap-5">
-      <div>
-        <h1 className="mb-1 font-serif text-2xl font-bold md:mb-3 lg:text-4xl">
-          {title}
-        </h1>
-
-        <p className="text-gray-500">by {author}</p>
-      </div>
-
-      {bookReview._owner.castAs(Group).myRole() === "admin" ? (
-        <RatingInput
-          onChange={(rating) => (bookReview.rating = rating)}
-          value={rating}
-        />
-      ) : (
-        <Rating className="mx-auto text-2xl sm:mx-0" rating={rating} />
-      )}
-    </div>
-  );
-}

examples/book-shelf/src/components/BookReviewThumbnail.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import { BookCover, BookCoverReadOnly } from "@/components/BookCover";
-import { useCoState } from "@/components/JazzAndAuth";
-import StarIcon from "@/components/icons/StarIcon";
-import { ID } from "jazz-tools";
-import Link from "next/link";
-import { BookReview } from "../schema";
-
-export function BookReviewThumbnail({ id }: { id: ID<BookReview> }) {
-  const bookReview = useCoState(BookReview, id);
-
-  if (!bookReview) return <></>;
-
-  return (
-    <div className="inline-flex shrink-0 gap-4 rounded border p-4 sm:block sm:space-y-6 sm:border-0 sm:p-0 md:w-[200px]">
-      <Link href={`/book/${bookReview.id}`} className="sm:block sm:flex-1">
-        <BookCoverReadOnly bookReview={bookReview} />
-      </Link>
-
-      <div className="flex-1">
-        <Link href={`/book/${bookReview.id}`}>
-          <h2 className="mb-1 text-sm font-medium">{bookReview.title}</h2>
-        </Link>
-        <div className="mb-2 flex flex-col gap-2 text-sm text-gray-500 sm:flex-row sm:items-center">
-          <p>{bookReview.author}</p>
-          <div className="flex items-center gap-0.5 text-xs font-semibold leading-none">
-            <StarIcon className="-mt-px text-base text-yellow-400" />
-            {bookReview.rating}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

examples/book-shelf/src/components/Button.tsx

@@ -1,65 +0,0 @@
-import clsx from "clsx";
-import Link from "next/link";
-import type { ComponentProps } from "react";
-
-interface Props {
-  variant?: "primary" | "secondary" | "tertiary";
-  className?: string;
-  size?: "sm" | "md" | "lg";
-}
-
-interface AnchorProps
-  extends Props,
-    React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  href: string;
-}
-
-type ButtonProps = ComponentProps<"button"> & Props;
-
-export function Button(props: AnchorProps | ButtonProps) {
-  const {
-    className: customClassName = "",
-    variant = "primary",
-    children,
-    size = "md",
-  } = props;
-
-  const variantClassNames = {
-    base: "inline-flex gap-2 items-center justify-center rounded-full overflow-hidden transition-colors",
-    primary:
-      "bg-purple-300 font-medium text-purple-950 px-4 py-2 rounded-full hover:bg-purple-200",
-    secondary:
-      "rounded-full bg-slate-100 font-medium text-slate-600 hover:bg-slate-200",
-    tertiary: "rounded-full bg-white text-purple-950 font-medium",
-  };
-
-  const sizeClassNames = {
-    sm: "py-1.5 px-3 text-sm",
-    md: "py-2 px-5",
-    lg: "py-2 md:py-2.5 px-6 md:text-lg",
-  };
-
-  const className = clsx(
-    customClassName,
-    variantClassNames.base,
-    variantClassNames[variant],
-    sizeClassNames[size],
-  );
-
-  if (!!(props as AnchorProps).href) {
-    const anchorProps = props as AnchorProps;
-    return (
-      <Link href={anchorProps.href} className={className}>
-        {children}
-      </Link>
-    );
-  }
-
-  const buttonProps = props as ButtonProps;
-
-  return (
-    <button {...buttonProps} className={className}>
-      {children}
-    </button>
-  );
-}

examples/book-shelf/src/components/Container.tsx

@@ -1,13 +0,0 @@
-import clsx from "clsx";
-
-export function Container({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <div className={clsx("mx-auto max-w-4xl px-4", className)}>{children}</div>
-  );
-}

examples/book-shelf/src/components/JazzAndAuth.tsx

@@ -1,29 +0,0 @@
-"use client";
-
-import { JazzAccount } from "@/schema";
-import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
-
-const Jazz = createJazzReactApp({
-  AccountSchema: JazzAccount,
-});
-
-export const { useAccount, useCoState } = Jazz;
-
-export function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const [auth, authState] = useDemoAuth();
-
-  return (
-    <>
-      <Jazz.Provider
-        auth={auth}
-        // replace `you@example.com` with your email as a temporary API key
-        peer="wss://cloud.jazz.tools/?key=you@example.com"
-      >
-        {children}
-      </Jazz.Provider>
-      {authState.state !== "signedIn" && (
-        <DemoAuthBasicUI appName="Jazz Book Shelf" state={authState} />
-      )}
-    </>
-  );
-}

examples/book-shelf/src/components/Nav.tsx

@@ -1,26 +0,0 @@
-"use client";
-
-import { Button } from "@/components/Button";
-import { Container } from "@/components/Container";
-import { useAccount } from "@/components/JazzAndAuth";
-import Link from "next/link";
-
-export function Nav() {
-  const { me, logOut } = useAccount();
-
-  return (
-    <nav className="border-b py-3">
-      <Container className="flex items-center justify-between gap-12 text-sm">
-        <Link href="/" className="font-serif text-lg font-semibold">
-          Jazz Book Shelf
-        </Link>
-        <div className="flex items-center gap-4 text-sm">
-          <p>{me?.profile?.name}</p>
-          <Button variant="secondary" onClick={logOut}>
-            Log out
-          </Button>
-        </div>
-      </Container>
-    </nav>
-  );
-}

examples/book-shelf/src/components/Rating.tsx

@@ -1,21 +0,0 @@
-import StarIcon from "@/components/icons/StarIcon";
-import StarOutlineIcon from "@/components/icons/StarOutlineIcon";
-
-export default function Rating({
-  rating,
-  className = "",
-}: {
-  rating?: number;
-  className?: string;
-}) {
-  const max = 5;
-  const outline = max - (rating || 0);
-  return (
-    <div className={`inline-flex gap-0.5 text-yellow-400 ${className}`}>
-      {rating ? [...Array(rating)].map((x, i) => <StarIcon key={i} />) : <></>}
-      {[...Array(outline)].map((x, i) => (
-        <StarOutlineIcon key={i} />
-      ))}
-    </div>
-  );
-}

examples/book-shelf/src/components/RatingInput.tsx

@@ -1,47 +0,0 @@
-"use client";
-
-import StarIcon from "@/components/icons/StarIcon";
-import StarOutlineIcon from "@/components/icons/StarOutlineIcon";
-import clsx from "clsx";
-
-interface RatingInputProps {
-  value?: number;
-  onChange: (value: number) => void;
-  className?: string;
-}
-
-export default function RatingInput({
-  value = 0,
-  onChange,
-  className,
-}: RatingInputProps) {
-  const handleChange = (newRating: number) => {
-    onChange(newRating > 5 ? 5 : newRating);
-  };
-
-  return (
-    <div className={clsx(className, "flex gap-0.5 text-2xl text-yellow-400")}>
-      {[...Array(5)].map((_, i) => {
-        return i < value ? (
-          <button
-            type="button"
-            className="focus:outline-none"
-            onClick={() => handleChange(i + 1)}
-            key={i}
-          >
-            <StarIcon />
-          </button>
-        ) : (
-          <button
-            type="button"
-            className="focus:outline-none"
-            onClick={() => handleChange(i + 1)}
-            key={i}
-          >
-            <StarOutlineIcon />
-          </button>
-        );
-      })}
-    </div>
-  );
-}

examples/book-shelf/src/components/UserProfile.tsx

@@ -1,39 +0,0 @@
-"use client";
-
-import { BookReviewThumbnail } from "@/components/BookReviewThumbnail";
-import { Button } from "@/components/Button";
-import { useCoState } from "@/components/JazzAndAuth";
-import { JazzAccount, JazzProfile, ListOfBookReviews } from "@/schema";
-import { Group, ID } from "jazz-tools";
-
-export default function UserProfile({ id }: { id: ID<JazzAccount> }) {
-  const user = useCoState(JazzAccount, id);
-  const profile = useCoState(JazzProfile, user?.profile?.id);
-
-  const bookReviews = useCoState(
-    ListOfBookReviews,
-    user?.profile?._refs.bookReviews?.id,
-    [{}],
-  );
-
-  return (
-    <div className="grid gap-4">
-      <div className="flex items-center justify-between">
-        <h1 className="font-serif text-lg font-medium sm:text-2xl">
-          {profile?.name}&apos;s book shelf
-        </h1>
-        {profile?._owner.castAs(Group).myRole() === "admin" && (
-          <Button href="/add" variant="primary">
-            Add book
-          </Button>
-        )}
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-4">
-        {bookReviews?.map((bookReview) => (
-          <BookReviewThumbnail key={bookReview.id} id={bookReview.id} />
-        ))}
-      </div>
-    </div>
-  );
-}

examples/book-shelf/src/components/icons/PlusIcon.tsx

@@ -1,20 +0,0 @@
-export default function PlusIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className={className}
-      width="1em"
-      height="1em"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M12 4.5v15m7.5-7.5h-15"
-      />
-    </svg>
-  );
-}

examples/book-shelf/src/components/icons/StarIcon.tsx

@@ -1,18 +0,0 @@
-export default function StarIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      className={className}
-      width="1em"
-      height="1em"
-    >
-      <path
-        fillRule="evenodd"
-        d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
-}

examples/book-shelf/src/components/icons/StarOutlineIcon.tsx

@@ -1,20 +0,0 @@
-export default function StarOutlineIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className={className}
-      width="1em"
-      height="1em"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
-      />
-    </svg>
-  );
-}

examples/book-shelf/src/schema.ts

@@ -1,37 +0,0 @@
-import {
-  Account,
-  CoList,
-  CoMap,
-  Encoders,
-  ImageDefinition,
-  Profile,
-  co,
-} from "jazz-tools";
-
-export class BookReview extends CoMap {
-  title = co.string;
-  author = co.string;
-  rating = co.number;
-  dateRead? = co.encoded(Encoders.Date);
-  review? = co.string;
-  cover? = co.ref(ImageDefinition, { optional: true });
-}
-
-export class ListOfBookReviews extends CoList.Of(co.ref(BookReview)) {}
-
-/** The profile is an app-specific per-user public `CoMap`
- *  where you can store top-level objects for that user */
-export class JazzProfile extends Profile {
-  bookReviews = co.ref(ListOfBookReviews);
-}
-
-export class JazzAccount extends Account {
-  profile = co.ref(JazzProfile);
-
-  /** The account migration is run on account creation and on every log-in.
-   *  You can use it to set up the account root and any other initial CoValues you need.
-   */
-  migrate(this: JazzAccount, creationProps?: { name: string }) {
-    super.migrate(creationProps);
-  }
-}

examples/book-shelf/tailwind.config.ts

@@ -1,25 +0,0 @@
-import type { Config } from "tailwindcss";
-const colors = require("tailwindcss/colors");
-
-const config: Config = {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        serif: ["var(--font-fraunces)"],
-      },
-      colors: {
-        purple: {
-          ...colors.purple,
-          950: "#211f5a",
-        },
-      },
-    },
-  },
-  plugins: [],
-};
-export default config;

examples/book-shelf/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2023", "DOM", "DOM.Iterable"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}

examples/chat-clerk/Dockerfile

@@ -1,4 +0,0 @@
-FROM caddy:2.7.3-alpine
-LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
-
-COPY ./dist /usr/share/caddy/

examples/chat-clerk/README.md

@@ -1,42 +0,0 @@
-# Jazz Chat Example (with Clerk auth)
-
-Live version: [https://chat-clerk-demo.jazz.tools](https://chat-clerk-demo.jazz.tools)
-
-## Installing & running the example locally
-
-(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
-
-Start by checking out `jazz`
-
-```bash
-git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/chat-clerk
-pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/chat-clerk # or any other directory
-tar -xf /tmp/jazz-example-chat-* --strip-components 1 -C ~/jazz-examples/chat-clerk
-cd ~/jazz-examples/chat-clerk
-```
-
-This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
-
-Install dependencies:
-
-```bash
-pnpm install
-```
-
-Start the dev server:
-
-```bash
-pnpm dev
-```
-
-## Questions / problems / feedback
-
-If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
-
-## Configuration: sync server
-
-By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
-
-You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/chat-clerk/job-template.nomad

@@ -1,56 +0,0 @@
-job "chat$BRANCH_SUFFIX" {
-  region     = "global"
-  datacenters = ["*"]
-
-  group "static" {
-    count = 4
-
-    network {
-      port "http" {
-        to = 80
-      }
-    }
-
-    constraint {
-      attribute = "${node.class}"
-      operator  = "="
-      value     = "cloud"
-    }
-
-    spread {
-      attribute = "${node.datacenter}"
-      weight    = 100
-    }
-
-    constraint {
-      distinct_hosts = true
-    }
-
-    task "server" {
-      driver = "docker"
-
-      config {
-        image = "$DOCKER_TAG"
-        ports = ["http"]
-
-        auth = {
-          username = "$DOCKER_USER"
-          password = "$DOCKER_PASSWORD"
-        }
-      }
-
-      service {
-        tags = ["public"]
-        name = "chat$BRANCH_SUFFIX"
-        port = "http"
-        provider = "consul"
-      }
-
-      resources {
-        cpu    = 50 # MHz
-        memory = 50 # MB
-      }
-    }
-  }
-}
-# deploy bump 4

examples/chat-clerk/package.json

@@ -1,47 +0,0 @@
-{
-  "name": "jazz-example-chat-clerk",
-  "private": true,
-  "version": "0.0.99",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "format-and-lint": "biome check .",
-    "format-and-lint:fix": "biome check . --write",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@clerk/clerk-react": "^5.4.1",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-toast": "^1.1.4",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.21",
-    "hash-slash": "workspace:0.2.1",
-    "jazz-react": "workspace:0.8.22",
-    "jazz-react-auth-clerk": "workspace:0.8.22",
-    "jazz-tools": "workspace:0.8.21",
-    "lucide-react": "^0.274.0",
-    "qrcode": "^1.5.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router": "^6.16.0",
-    "react-router-dom": "^6.16.0",
-    "react-use": "^17.4.0",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7",
-    "uniqolor": "^1.1.0"
-  },
-  "devDependencies": {
-    "@types/qrcode": "^1.5.1",
-    "@types/react": "^18.2.19",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.27",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10"
-  }
-}

examples/chat-clerk/src/app.tsx

@@ -1,31 +0,0 @@
-import { useIframeHashRouter } from "hash-slash";
-import { Group, ID } from "jazz-tools";
-import { ChatScreen } from "./chatScreen.tsx";
-import { useAccount } from "./main.tsx";
-import { Chat } from "./schema.ts";
-import { AppContainer, TopBar } from "./ui.tsx";
-
-export function App() {
-  const { me, logOut } = useAccount();
-  const router = useIframeHashRouter();
-
-  const createChat = () => {
-    if (!me) return;
-    const group = Group.create({ owner: me });
-    group.addMember("everyone", "writer");
-    const chat = Chat.create([], { owner: group });
-    router.navigate("/#/chat/" + chat.id);
-  };
-
-  return (
-    <AppContainer>
-      <TopBar>
-        {me?.profile?.name} · <button onClick={logOut}>Log out</button>
-      </TopBar>
-      {router.route({
-        "/": () => createChat() as never,
-        "/chat/:id": (id) => <ChatScreen chatID={id as ID<Chat>} />,
-      })}
-    </AppContainer>
-  );
-}

examples/chat-clerk/src/chatScreen.tsx

@@ -1,43 +0,0 @@
-import { ID } from "jazz-tools";
-import { useCoState } from "./main.tsx";
-import { Chat, Message } from "./schema.ts";
-import {
-  BubbleBody,
-  BubbleContainer,
-  BubbleInfo,
-  ChatContainer,
-  ChatInput,
-  EmptyChatMessage,
-} from "./ui.tsx";
-
-export function ChatScreen(props: { chatID: ID<Chat> }) {
-  const chat = useCoState(Chat, props.chatID, [{}]);
-
-  return chat ? (
-    <ChatContainer>
-      {chat.length > 0 ? (
-        chat.map((msg) => <ChatBubble msg={msg} key={msg.id} />)
-      ) : (
-        <EmptyChatMessage />
-      )}
-      <ChatInput
-        onSubmit={(text) => {
-          chat.push(Message.create({ text }, { owner: chat._owner }));
-        }}
-      />
-    </ChatContainer>
-  ) : (
-    <div>Loading...</div>
-  );
-}
-
-function ChatBubble(props: { msg: Message }) {
-  const lastEdit = props.msg._edits.text;
-
-  return (
-    <BubbleContainer fromMe={lastEdit.by?.isMe}>
-      <BubbleBody>{props.msg.text}</BubbleBody>
-      <BubbleInfo by={lastEdit.by?.profile?.name} madeAt={lastEdit.madeAt} />
-    </BubbleContainer>
-  );
-}

examples/chat-clerk/src/index.css

@@ -1,78 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
-
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 20 14.3% 4.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
-
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 24 5.7% 82.9%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    margin: 0;
-    padding: 0;
-  }
-}

examples/chat-clerk/src/schema.ts

@@ -1,7 +0,0 @@
-import { CoList, CoMap, co } from "jazz-tools";
-
-export class Message extends CoMap {
-  text = co.string;
-}
-
-export class Chat extends CoList.Of(co.ref(Message)) {}

examples/chat-clerk/src/ui.tsx

@@ -1,63 +0,0 @@
-export function AppContainer(props: { children: React.ReactNode }) {
-  return (
-    <div className="flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white">
-      {props.children}
-    </div>
-  );
-}
-
-export function TopBar(props: { children: React.ReactNode }) {
-  return (
-    <div className="mb-5 px-2 py-1 text-sm self-end">{props.children}</div>
-  );
-}
-
-export function ChatContainer(props: { children: React.ReactNode }) {
-  return (
-    <div className="w-full max-w-xl h-full flex flex-col items-stretch">
-      {props.children}
-    </div>
-  );
-}
-
-export function EmptyChatMessage() {
-  return <div className="m-auto text-sm">(Empty chat)</div>;
-}
-
-export function BubbleContainer(props: {
-  children: React.ReactNode;
-  fromMe: boolean | undefined;
-}) {
-  const align = props.fromMe ? "items-end" : "items-start";
-  return <div className={`${align} flex flex-col`}>{props.children}</div>;
-}
-
-export function BubbleBody(props: { children: React.ReactNode }) {
-  return (
-    <div className="rounded-xl bg-stone-100 dark:bg-stone-700 dark:text-white py-2 px-4 mt-2 min-w-[5rem]">
-      {props.children}
-    </div>
-  );
-}
-
-export function BubbleInfo(props: { by: string | undefined; madeAt: Date }) {
-  return (
-    <div className="text-xs text-neutral-500 ml-2">
-      {props.by} {props.madeAt.toLocaleTimeString()}
-    </div>
-  );
-}
-
-export function ChatInput(props: { onSubmit: (text: string) => void }) {
-  return (
-    <input
-      className="rounded p-2 border mt-auto dark:bg-black dark:text-white border-stone-300 dark:border-stone-700"
-      placeholder="Type a message and press Enter"
-      onKeyDown={({ key, currentTarget: input }) => {
-        if (key !== "Enter" || !input.value) return;
-        props.onSubmit(input.value);
-        input.value = "";
-      }}
-    />
-  );
-}

examples/chat-clerk/tailwind.config.js

@@ -1,75 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
-  ],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
-};

examples/chat-clerk/vite.config.ts

@@ -1,16 +0,0 @@
-import path from "path";
-import react from "@vitejs/plugin-react-swc";
-import { defineConfig } from "vite";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-  build: {
-    minify: false,
-  },
-});

examples/chat-rn-clerk/.env

@@ -1 +1 @@
-EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ
+EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,5 +1,328 @@
 # chat-rn-clerk
 
+## 1.0.50
+
+### Patch Changes
+
+- Updated dependencies [8eb9247]
+  - jazz-tools@0.9.9
+  - jazz-react-native@0.9.9
+  - jazz-react-native-auth-clerk@0.9.9
+  - jazz-react-native-media-images@0.9.9
+
+## 1.0.49
+
+### Patch Changes
+
+- Updated dependencies [d1d773b]
+  - jazz-tools@0.9.8
+  - jazz-react-native@0.9.8
+  - jazz-react-native-auth-clerk@0.9.8
+  - jazz-react-native-media-images@0.9.8
+
+## 1.0.48
+
+### Patch Changes
+
+- Updated dependencies [8a390d2]
+  - jazz-react-native@0.9.6
+  - jazz-react-native-auth-clerk@0.9.6
+
+## 1.0.47
+
+### Patch Changes
+
+- Updated dependencies [c871912]
+  - jazz-react-native@0.9.5
+  - jazz-react-native-auth-clerk@0.9.5
+
+## 1.0.46
+
+### Patch Changes
+
+- jazz-react-native@0.9.4
+- jazz-react-native-auth-clerk@0.9.4
+
+## 1.0.45
+
+### Patch Changes
+
+- Updated dependencies [7cd691f]
+  - jazz-react-native@0.9.3
+  - jazz-react-native-auth-clerk@0.9.3
+
+## 1.0.44
+
+### Patch Changes
+
+- Updated dependencies [80fd3e9]
+  - jazz-react-native@0.9.2
+  - jazz-react-native-auth-clerk@0.9.2
+
+## 1.0.43
+
+### Patch Changes
+
+- Updated dependencies [1b71969]
+  - jazz-tools@0.9.1
+  - jazz-react-native@0.9.1
+  - jazz-react-native-auth-clerk@0.9.1
+  - jazz-react-native-media-images@0.9.1
+
+## 1.0.42
+
+### Patch Changes
+
+- Updated dependencies [1da4d55]
+- Updated dependencies [8eda792]
+- Updated dependencies [1e5e3a1]
+  - jazz-react-native@0.9.0
+  - jazz-tools@0.9.0
+  - jazz-react-native-auth-clerk@0.9.0
+  - jazz-react-native-media-images@0.9.0
+
+## 1.0.41
+
+### Patch Changes
+
+- Updated dependencies [dc62b95]
+- Updated dependencies [1de26f8]
+  - jazz-tools@0.8.51
+  - jazz-react-native@0.8.51
+  - jazz-react-native-auth-clerk@0.8.51
+  - jazz-react-native-media-images@0.8.51
+
+## 1.0.40
+
+### Patch Changes
+
+- jazz-react-native@0.8.50
+- jazz-react-native-auth-clerk@0.8.50
+- jazz-tools@0.8.50
+- jazz-react-native-media-images@0.8.50
+
+## 1.0.39
+
+### Patch Changes
+
+- jazz-react-native@0.8.49
+- jazz-react-native-auth-clerk@0.8.49
+- jazz-tools@0.8.49
+- jazz-react-native-media-images@0.8.49
+
+## 1.0.38
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-react-native@0.8.48
+  - jazz-react-native-auth-clerk@0.8.48
+  - jazz-react-native-media-images@0.8.48
+
+## 1.0.37
+
+### Patch Changes
+
+- Updated dependencies [33ef9c4]
+  - jazz-react-native@0.8.47
+  - jazz-react-native-auth-clerk@0.8.47
+
+## 1.0.36
+
+### Patch Changes
+
+- Updated dependencies [ab4ffbd]
+  - jazz-react-native@0.8.46
+  - jazz-react-native-auth-clerk@0.8.46
+
+## 1.0.35
+
+### Patch Changes
+
+- Updated dependencies [7701307]
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-react-native@0.8.45
+  - jazz-tools@0.8.45
+  - jazz-react-native-auth-clerk@0.8.45
+  - jazz-react-native-media-images@0.8.45
+
+## 1.0.34
+
+### Patch Changes
+
+- jazz-react-native@0.8.44
+- jazz-react-native-auth-clerk@0.8.44
+- jazz-tools@0.8.44
+- jazz-react-native-media-images@0.8.44
+
+## 1.0.33
+
+### Patch Changes
+
+- cdc7f9f: Fixing react-native examples
+- Updated dependencies [cdc7f9f]
+  - jazz-react-native-auth-clerk@0.8.43
+
+## 1.0.32
+
+### Patch Changes
+
+- jazz-react-native@0.8.41
+- jazz-react-native-auth-clerk@0.8.41
+- jazz-tools@0.8.41
+- jazz-react-native-media-images@0.8.41
+
+## 1.0.31
+
+### Patch Changes
+
+- Updated dependencies [0c6b0f3]
+- Updated dependencies [249eecb]
+  - jazz-react-native@0.8.39
+  - jazz-tools@0.8.39
+  - jazz-react-native-auth-clerk@0.8.39
+  - jazz-react-native-media-images@0.8.39
+
+## 1.0.30
+
+### Patch Changes
+
+- jazz-react-native@0.8.38
+- jazz-react-native-auth-clerk@0.8.38
+- jazz-tools@0.8.38
+- jazz-react-native-media-images@0.8.38
+
+## 1.0.29
+
+### Patch Changes
+
+- jazz-react-native@0.8.37
+- jazz-react-native-auth-clerk@0.8.37
+- jazz-tools@0.8.37
+- jazz-react-native-media-images@0.8.28
+
+## 1.0.28
+
+### Patch Changes
+
+- c84764a: feat: added jazz-react-native-auth-clerk package
+- Updated dependencies [c84764a]
+- Updated dependencies [441fe27]
+  - jazz-react-native-auth-clerk@0.8.36
+  - jazz-react-native@0.8.36
+  - jazz-tools@0.8.36
+  - jazz-react-native-media-images@0.8.27
+
+## 1.0.27
+
+### Patch Changes
+
+- Updated dependencies [8b87117]
+  - jazz-tools@0.8.35
+  - jazz-react-auth-clerk@0.8.35
+  - jazz-react-native@0.8.35
+  - jazz-react-native-media-images@0.8.26
+
+## 1.0.26
+
+### Patch Changes
+
+- Updated dependencies [9ca25d1]
+  - jazz-react-auth-clerk@0.8.34
+  - jazz-react-native@0.8.34
+  - jazz-tools@0.8.34
+  - jazz-react-native-media-images@0.8.25
+
+## 1.0.25
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.33
+
+## 1.0.24
+
+### Patch Changes
+
+- Updated dependencies [1a4bda0]
+- Updated dependencies [df42b2b]
+  - jazz-react-auth-clerk@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react-native@0.8.32
+  - jazz-react-native-media-images@0.8.24
+
+## 1.0.23
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.31
+- jazz-react-native@0.8.31
+- jazz-tools@0.8.31
+- jazz-react-native-media-images@0.8.23
+
+## 1.0.22
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.30
+- jazz-react-native@0.8.30
+- jazz-tools@0.8.30
+- jazz-react-native-media-images@0.8.22
+
+## 1.0.21
+
+### Patch Changes
+
+- jazz-react-native@0.8.29
+- jazz-react-auth-clerk@0.8.29
+- jazz-tools@0.8.29
+- jazz-react-native-media-images@0.8.21
+
+## 1.0.20
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.28
+- jazz-react-native@0.8.28
+- jazz-tools@0.8.28
+- jazz-react-native-media-images@0.8.20
+
+## 1.0.19
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.27
+- jazz-react-native@0.8.27
+- jazz-tools@0.8.27
+- jazz-react-native-media-images@0.8.19
+
+## 1.0.18
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.26
+
+## 1.0.17
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.24
+
+## 1.0.16
+
+### Patch Changes
+
+- Updated dependencies [d348c2d]
+- Updated dependencies [6902b5b]
+- Updated dependencies [1a0cd3d]
+  - jazz-tools@0.8.23
+  - jazz-react-auth-clerk@0.8.23
+  - jazz-react-native@0.8.23
+  - jazz-react-native-media-images@0.8.18
+
 ## 1.0.15
 
 ### Patch Changes

examples/chat-rn-clerk/app.json

@@ -35,7 +35,15 @@
           }
         }
       ],
-      "expo-secure-store"
+      "expo-secure-store",
+      "expo-font",
+      "expo-router",
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "The app accesses your photos to let you share them with your friends."
+        }
+      ]
     ],
     "extra": {
       "eas": {

examples/chat-rn-clerk/app/_layout.tsx

@@ -1,3 +1,4 @@
+import "../global.css";
 import { ClerkLoaded, ClerkProvider } from "@clerk/clerk-expo";
 import { useFonts } from "expo-font";
 import { Slot } from "expo-router";

examples/chat-rn-clerk/app/chat/[chatId].tsx

@@ -1,9 +1,12 @@
-import { useAccount, useCoState } from "@/src/jazz";
 import { Chat, Message } from "@/src/schema";
-import { useFocusEffect, useNavigation } from "@react-navigation/native";
+import { useNavigation } from "@react-navigation/native";
 import clsx from "clsx";
 import * as Clipboard from "expo-clipboard";
+import * as ImagePicker from "expo-image-picker";
 import { useLocalSearchParams } from "expo-router";
+import { useAccount, useCoState } from "jazz-react-native";
+import { ProgressiveImg } from "jazz-react-native";
+import { createImage } from "jazz-react-native-media-images";
 import { Group, ID } from "jazz-tools";
 import { useEffect, useLayoutEffect, useState } from "react";
 import React, {
@@ -16,6 +19,8 @@ import React, {
   KeyboardAvoidingView,
   TextInput,
   Button,
+  Image,
+  ActivityIndicator,
 } from "react-native";
 
 export default function Conversation() {
@@ -25,6 +30,7 @@ export default function Conversation() {
   const [message, setMessage] = useState("");
   const loadedChat = useCoState(Chat, chat?.id, [{}]);
   const navigation = useNavigation();
+  const [isUploading, setIsUploading] = useState(false);
 
   useEffect(() => {
     if (chat) return;
@@ -81,6 +87,32 @@ export default function Conversation() {
     }
   };
 
+  const handleImageUpload = async () => {
+    try {
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        base64: true,
+        quality: 0.7,
+      });
+
+      if (!result.canceled && result.assets[0].base64 && chat) {
+        setIsUploading(true);
+        const base64Uri = `data:image/jpeg;base64,${result.assets[0].base64}`;
+
+        const image = await createImage(base64Uri, {
+          owner: chat._owner,
+          maxSize: 2048,
+        });
+
+        chat.push(Message.create({ text: "", image }, { owner: chat._owner }));
+      }
+    } catch (error) {
+      Alert.alert("Error", "Failed to upload image");
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
   const renderMessageItem = ({ item }: { item: Message }) => {
     const isMe = item._edits.text.by?.isMe;
     return (
@@ -106,14 +138,27 @@ export default function Conversation() {
             isMe ? "flex-row" : "flex-row",
           )}
         >
-          <Text
-            className={clsx(
-              !isMe ? "text-black" : "text-gray-200",
-              `text-md max-w-[85%]`,
-            )}
-          >
-            {item.text}
-          </Text>
+          {item.image && (
+            <ProgressiveImg image={item.image} maxWidth={1024}>
+              {({ src, res, originalSize }) => (
+                <Image
+                  source={{ uri: src }}
+                  className="w-48 h-48 rounded-lg mb-2"
+                  resizeMode="cover"
+                />
+              )}
+            </ProgressiveImg>
+          )}
+          {item.text && (
+            <Text
+              className={clsx(
+                !isMe ? "text-black" : "text-gray-200",
+                `text-md max-w-[85%]`,
+              )}
+            >
+              {item.text}
+            </Text>
+          )}
           <Text
             className={clsx(
               "text-[10px] text-right ml-2",
@@ -147,6 +192,17 @@ export default function Conversation() {
         className="p-3 bg-white border-t border-gray-300"
       >
         <SafeAreaView className="flex-row items-center gap-2">
+          <TouchableOpacity
+            onPress={handleImageUpload}
+            disabled={isUploading}
+            className="h-10 w-10 items-center justify-center"
+          >
+            {isUploading ? (
+              <ActivityIndicator size="small" color="#0000ff" />
+            ) : (
+              <Text className="text-2xl">🖼️</Text>
+            )}
+          </TouchableOpacity>
           <TextInput
             className="flex-1 rounded-full h-10 px-4 bg-gray-100 border border-gray-300 focus:border-blue-500 focus:bg-white"
             value={message}

examples/chat-rn-clerk/app/chat/index.tsx

@@ -11,7 +11,7 @@ import React, {
 } from "react-native";
 
 import { useUser } from "@clerk/clerk-expo";
-import { useAccount } from "../../src/jazz";
+import { useAccount } from "jazz-react-native";
 import { Chat } from "../../src/schema";
 
 export default function ChatScreen() {

examples/chat-rn-clerk/babel.config.js

@@ -1,7 +1,9 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ["babel-preset-expo"],
-    plugins: ["nativewind/babel"],
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
   };
 };

examples/chat-rn-clerk/cache.ts

@@ -4,7 +4,7 @@ import { Platform } from "react-native";
 export interface TokenCache {
   getToken: (key: string) => Promise<string | undefined | null>;
   saveToken: (key: string, token: string) => Promise<void>;
-  clearToken?: (key: string) => void;
+  clearToken: (key: string) => void;
 }
 
 const createTokenCache = (): TokenCache => {
@@ -27,6 +27,9 @@ const createTokenCache = (): TokenCache => {
     saveToken: (key: string, token: string) => {
       return SecureStore.setItemAsync(key, token);
     },
+    clearToken: (key: string) => {
+      return SecureStore.deleteItemAsync(key);
+    },
   };
 };
 

examples/chat-rn-clerk/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/chat-rn-clerk/metro.config.js

@@ -1,5 +1,6 @@
 // Learn more https://docs.expo.dev/guides/monorepos
 const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
 const { FileStore } = require("metro-cache");
 const path = require("path");
 
@@ -19,7 +20,10 @@ config.resolver.nodeModulesPaths = [
 ];
 config.resolver.sourceExts = ["mjs", "js", "json", "ts", "tsx"];
 config.resolver.unstable_enablePackageExports = true;
-config.resolver.requireCycleIgnorePatterns = [/(^|\/|\\)node_modules($|\/|\\)/];
+config.resolver.requireCycleIgnorePatterns = [
+  /(^|\/|\\)node_modules($|\/|\\)/,
+  /(^|\/|\\)packages($|\/|\\)/,
+];
 
 // Use turborepo to restore the cache when possible
 config.cacheStores = [
@@ -28,4 +32,5 @@ config.cacheStores = [
   }),
 ];
 
-module.exports = config;
+// module.exports = config;
+module.exports = withNativeWind(config, { input: "./global.css" });

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.15",
+  "version": "1.0.50",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",
@@ -17,62 +17,63 @@
   },
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
-    "@bam.tech/react-native-image-resizer": "^3.0.10",
+    "@bam.tech/react-native-image-resizer": "^3.0.11",
     "@clerk/clerk-expo": "^2.2.21",
     "@expo/vector-icons": "^14.0.2",
-    "@react-native-community/netinfo": "^11.3.1",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/native-stack": "^6.11.0",
+    "@op-engineering/op-sqlite": "^11.2.12",
+    "@react-native-community/netinfo": "^11.4.1",
+    "@react-navigation/native": "^7.0.13",
+    "@react-navigation/native-stack": "^7.1.14",
     "base-64": "^1.0.0",
     "buffer": "^6.0.3",
     "clsx": "^2.0.0",
-    "expo": "~51.0.37",
-    "expo-build-properties": "~0.12.5",
-    "expo-clipboard": "~6.0.3",
-    "expo-constants": "~16.0.2",
-    "expo-crypto": "~13.0.2",
-    "expo-dev-client": "~4.0.28",
-    "expo-file-system": "^17.0.1",
-    "expo-font": "~12.0.4",
-    "expo-linking": "~6.3.1",
-    "expo-router": "~3.5.23",
-    "expo-secure-store": "~13.0.2",
-    "expo-splash-screen": "~0.27.5",
-    "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.7",
-    "expo-web-browser": "~13.0.3",
-    "jazz-react-auth-clerk": "workspace:*",
+    "expo": "^52.0.0",
+    "expo-build-properties": "~0.13.1",
+    "expo-clipboard": "~7.0.0",
+    "expo-constants": "~17.0.3",
+    "expo-crypto": "~14.0.1",
+    "expo-dev-client": "~5.0.5",
+    "expo-file-system": "^18.0.4",
+    "expo-font": "~13.0.1",
+    "expo-image-picker": "~16.0.4",
+    "expo-linking": "~7.0.3",
+    "expo-router": "~4.0.11",
+    "expo-secure-store": "~14.0.0",
+    "expo-splash-screen": "~0.29.16",
+    "expo-status-bar": "~2.0.0",
+    "expo-system-ui": "~4.0.5",
+    "expo-web-browser": "~14.0.1",
     "jazz-react-native": "workspace:*",
+    "jazz-react-native-auth-clerk": "workspace:*",
     "jazz-react-native-media-images": "workspace:*",
     "jazz-tools": "workspace:*",
-    "nativewind": "^2.0.11",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-native": "~0.74.5",
+    "nativewind": "^4.1.21",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-native": "~0.76.3",
     "react-native-fetch-api": "^3.0.0",
-    "react-native-gesture-handler": "~2.16.1",
+    "react-native-gesture-handler": "~2.20.2",
     "react-native-get-random-values": "^1.11.0",
-    "react-native-mmkv": "3.0.1",
     "react-native-polyfill-globals": "^3.1.0",
     "react-native-quick-base64": "^2.1.2",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
+    "react-native-reanimated": "~3.16.3",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "4.1.0",
     "react-native-url-polyfill": "^2.0.0",
-    "react-native-web": "~0.19.10",
+    "react-native-web": "~0.19.13",
     "text-encoding": "^0.7.0",
     "web-streams-polyfill": "^3.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@types/jest": "^29.5.3",
-    "@types/react": "^18.2.19",
+    "@types/react": "^18.3.12",
     "@types/react-test-renderer": "^18.0.7",
     "jest": "^29.2.1",
-    "jest-expo": "~51.0.3",
+    "jest-expo": "~52.0.2",
     "react-test-renderer": "18.2.0",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3"
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2"
   },
   "private": true
 }

examples/chat-rn-clerk/src/auth-context.tsx

@@ -1,15 +1,14 @@
 import { useClerk, useUser } from "@clerk/clerk-expo";
-import { useJazzClerkAuth } from "jazz-react-auth-clerk";
+import { JazzProvider, setupKvStore } from "jazz-react-native";
+import { useJazzClerkAuth } from "jazz-react-native-auth-clerk";
 import React, {
-  useContext,
   createContext,
+  PropsWithChildren,
+  useContext,
   useEffect,
   useState,
-  PropsWithChildren,
 } from "react";
 import { Text, View } from "react-native";
-import { Jazz } from "./jazz";
-
 const AuthContext = createContext<{
   isAuthenticated: boolean;
   isLoading: boolean;
@@ -22,10 +21,12 @@ export function useAuth() {
   return useContext(AuthContext);
 }
 
+const kvStore = setupKvStore();
+
 export function JazzAndAuth({ children }: PropsWithChildren) {
   const { isSignedIn, isLoaded: isClerkLoaded } = useUser();
   const clerk = useClerk();
-  const [auth, state] = useJazzClerkAuth(clerk);
+  const [auth, state] = useJazzClerkAuth(clerk, kvStore);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
 
   useEffect(() => {
@@ -46,14 +47,14 @@ export function JazzAndAuth({ children }: PropsWithChildren) {
             <Text style={{ color: "red" }}>{error}</Text>
           </View>
         ))}
-      {auth ? (
-        <Jazz.Provider
+      {auth && clerk.user ? (
+        <JazzProvider
           auth={auth}
-          peer="wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@gcmp.io"
-          storage={undefined}
+          storage="sqlite"
+          peer="wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@garden.co"
         >
           {children}
-        </Jazz.Provider>
+        </JazzProvider>
       ) : (
         children
       )}

examples/chat-rn-clerk/src/jazz.tsx

@@ -1,4 +0,0 @@
-import { createJazzRNApp } from "jazz-react-native";
-
-export const Jazz = createJazzRNApp();
-export const { useAccount, useCoState, useAcceptInvite } = Jazz;

examples/chat-rn-clerk/src/schema.ts

@@ -1,7 +1,8 @@
-import { CoList, CoMap, co } from "jazz-tools";
+import { CoList, CoMap, ImageDefinition, co } from "jazz-tools";
 
 export class Message extends CoMap {
   text = co.string;
+  image = co.optional.ref(ImageDefinition);
 }
 
 export class Chat extends CoList.Of(co.ref(Message)) {}

examples/chat-rn-clerk/tailwind.config.js

@@ -1,10 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  // NOTE: Update this to include the paths to all of your component files.
   content: [
     "./app/**/*.{js,jsx,ts,tsx}",
     "./components/**/*.{js,jsx,ts,tsx}",
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
+  presets: [require("nativewind/preset")],
   theme: {
     extend: {},
   },

examples/chat-rn-clerk/tsconfig.json

@@ -7,5 +7,5 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx"]
+  "include": ["**/*.ts", "**/*.tsx", "nativewind-env.d.ts"]
 }

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,244 @@
 # chat-rn
 
+## 1.0.47
+
+### Patch Changes
+
+- Updated dependencies [8eb9247]
+  - jazz-tools@0.9.9
+  - jazz-react-native@0.9.9
+
+## 1.0.46
+
+### Patch Changes
+
+- Updated dependencies [d1d773b]
+  - jazz-tools@0.9.8
+  - jazz-react-native@0.9.8
+
+## 1.0.45
+
+### Patch Changes
+
+- Updated dependencies [8a390d2]
+  - jazz-react-native@0.9.6
+
+## 1.0.44
+
+### Patch Changes
+
+- Updated dependencies [c871912]
+  - jazz-react-native@0.9.5
+
+## 1.0.43
+
+### Patch Changes
+
+- jazz-react-native@0.9.4
+
+## 1.0.42
+
+### Patch Changes
+
+- Updated dependencies [7cd691f]
+  - jazz-react-native@0.9.3
+
+## 1.0.41
+
+### Patch Changes
+
+- Updated dependencies [80fd3e9]
+  - jazz-react-native@0.9.2
+
+## 1.0.40
+
+### Patch Changes
+
+- Updated dependencies [1b71969]
+  - jazz-tools@0.9.1
+  - jazz-react-native@0.9.1
+
+## 1.0.39
+
+### Patch Changes
+
+- Updated dependencies [1da4d55]
+- Updated dependencies [8eda792]
+- Updated dependencies [1e5e3a1]
+  - jazz-react-native@0.9.0
+  - jazz-tools@0.9.0
+
+## 1.0.38
+
+### Patch Changes
+
+- Updated dependencies [dc62b95]
+- Updated dependencies [1de26f8]
+  - jazz-tools@0.8.51
+  - jazz-react-native@0.8.51
+
+## 1.0.37
+
+### Patch Changes
+
+- jazz-react-native@0.8.50
+- jazz-tools@0.8.50
+
+## 1.0.36
+
+### Patch Changes
+
+- jazz-react-native@0.8.49
+- jazz-tools@0.8.49
+
+## 1.0.35
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-react-native@0.8.48
+
+## 1.0.34
+
+### Patch Changes
+
+- Updated dependencies [33ef9c4]
+  - jazz-react-native@0.8.47
+
+## 1.0.33
+
+### Patch Changes
+
+- Updated dependencies [ab4ffbd]
+  - jazz-react-native@0.8.46
+
+## 1.0.32
+
+### Patch Changes
+
+- Updated dependencies [7701307]
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-react-native@0.8.45
+  - jazz-tools@0.8.45
+
+## 1.0.31
+
+### Patch Changes
+
+- jazz-react-native@0.8.44
+- jazz-tools@0.8.44
+
+## 1.0.30
+
+### Patch Changes
+
+- jazz-react-native@0.8.41
+- jazz-tools@0.8.41
+
+## 1.0.29
+
+### Patch Changes
+
+- Updated dependencies [0c6b0f3]
+- Updated dependencies [249eecb]
+  - jazz-react-native@0.8.39
+  - jazz-tools@0.8.39
+
+## 1.0.28
+
+### Patch Changes
+
+- jazz-react-native@0.8.38
+- jazz-tools@0.8.38
+
+## 1.0.27
+
+### Patch Changes
+
+- jazz-react-native@0.8.37
+- jazz-tools@0.8.37
+
+## 1.0.26
+
+### Patch Changes
+
+- Updated dependencies [c84764a]
+- Updated dependencies [441fe27]
+  - jazz-react-native@0.8.36
+  - jazz-tools@0.8.36
+
+## 1.0.25
+
+### Patch Changes
+
+- Updated dependencies [8b87117]
+  - jazz-tools@0.8.35
+  - jazz-react-native@0.8.35
+
+## 1.0.24
+
+### Patch Changes
+
+- jazz-react-native@0.8.34
+- jazz-tools@0.8.34
+
+## 1.0.23
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react-native@0.8.32
+
+## 1.0.22
+
+### Patch Changes
+
+- jazz-react-native@0.8.31
+- jazz-tools@0.8.31
+
+## 1.0.21
+
+### Patch Changes
+
+- jazz-react-native@0.8.30
+- jazz-tools@0.8.30
+
+## 1.0.20
+
+### Patch Changes
+
+- jazz-react-native@0.8.29
+- jazz-tools@0.8.29
+
+## 1.0.19
+
+### Patch Changes
+
+- jazz-react-native@0.8.28
+- jazz-tools@0.8.28
+
+## 1.0.18
+
+### Patch Changes
+
+- jazz-react-native@0.8.27
+- jazz-tools@0.8.27
+
+## 1.0.17
+
+### Patch Changes
+
+- Updated dependencies [d348c2d]
+- Updated dependencies [6902b5b]
+- Updated dependencies [1a0cd3d]
+  - jazz-tools@0.8.23
+  - jazz-react-native@0.8.23
+
 ## 1.0.16
 
 ### Patch Changes

examples/chat-rn/babel.config.js

@@ -1,7 +1,9 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ["babel-preset-expo"],
-    plugins: ["nativewind/babel"],
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
   };
 };

examples/chat-rn/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/chat-rn/metro.config.js

@@ -1,5 +1,6 @@
 // Learn more https://docs.expo.dev/guides/monorepos
 const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
 const { FileStore } = require("metro-cache");
 const path = require("path");
 
@@ -7,7 +8,7 @@ const path = require("path");
 const projectRoot = __dirname;
 const workspaceRoot = path.resolve(projectRoot, "../..");
 
-const config = getDefaultConfig(projectRoot);
+const config = getDefaultConfig(projectRoot, { isCSSEnabled: true });
 
 // Since we are using pnpm, we have to setup the monorepo manually for Metro
 // #1 - Watch all files in the monorepo
@@ -19,7 +20,10 @@ config.resolver.nodeModulesPaths = [
 ];
 config.resolver.sourceExts = ["mjs", "js", "json", "ts", "tsx"];
 config.resolver.unstable_enablePackageExports = true;
-config.resolver.requireCycleIgnorePatterns = [/(^|\/|\\)node_modules($|\/|\\)/];
+config.resolver.requireCycleIgnorePatterns = [
+  /(^|\/|\\)node_modules($|\/|\\)/,
+  /(^|\/|\\)packages($|\/|\\)/,
+];
 
 // Use turborepo to restore the cache when possible
 config.cacheStores = [
@@ -28,4 +32,5 @@ config.cacheStores = [
   }),
 ];
 
-module.exports = config;
+// module.exports = config;
+module.exports = withNativeWind(config, { input: "./global.css" });

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.16",
+  "version": "1.0.47",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",
@@ -13,41 +13,41 @@
   },
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
-    "@react-native-community/netinfo": "^11.3.1",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/native-stack": "^6.11.0",
+    "@op-engineering/op-sqlite": "^11.2.12",
+    "@react-native-community/netinfo": "^11.4.1",
+    "@react-navigation/native": "^7.0.13",
+    "@react-navigation/native-stack": "^7.1.14",
     "base-64": "^1.0.0",
     "clsx": "^2.0.0",
-    "expo": "~51.0.37",
-    "expo-build-properties": "~0.12.5",
-    "expo-clipboard": "~6.0.3",
-    "expo-constants": "~16.0.2",
-    "expo-crypto": "~13.0.2",
-    "expo-dev-client": "~4.0.28",
-    "expo-linking": "~6.3.1",
-    "expo-secure-store": "~13.0.2",
-    "expo-status-bar": "~1.12.1",
-    "expo-web-browser": "~13.0.3",
+    "expo": "^52.0.0",
+    "expo-build-properties": "~0.13.1",
+    "expo-clipboard": "~7.0.0",
+    "expo-constants": "~17.0.3",
+    "expo-crypto": "~14.0.1",
+    "expo-dev-client": "~5.0.5",
+    "expo-linking": "~7.0.3",
+    "expo-secure-store": "~14.0.0",
+    "expo-status-bar": "~2.0.0",
+    "expo-web-browser": "~14.0.1",
     "jazz-react-native": "workspace:*",
     "jazz-tools": "workspace:*",
-    "nativewind": "^2.0.11",
-    "react": "^18.2.0",
-    "react-native": "~0.74.5",
+    "nativewind": "^4.1.21",
+    "react": "^18.3.1",
+    "react-native": "~0.76.3",
     "react-native-fetch-api": "^3.0.0",
     "react-native-get-random-values": "^1.11.0",
-    "react-native-mmkv": "3.0.1",
     "react-native-polyfill-globals": "^3.1.0",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "4.1.0",
     "react-native-url-polyfill": "^2.0.0",
     "text-encoding": "^0.7.0",
     "web-streams-polyfill": "^3.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@types/react": "^18.2.19",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3"
+    "@types/react": "^18.3.12",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2"
   },
   "private": true
 }

examples/chat-rn/src/App.tsx

@@ -1,3 +1,5 @@
+import "../global.css";
+
 import {
   NavigationContainer,
   useNavigationContainerRef,
@@ -7,9 +9,8 @@ import * as Linking from "expo-linking";
 import React, { StrictMode, useEffect, useState } from "react";
 import HandleInviteScreen from "./invite";
 
-import { DemoAuthBasicUI, useDemoAuth } from "jazz-react-native";
+import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react-native";
 import ChatScreen from "./chat";
-import { Jazz } from "./jazz";
 
 const Stack = createNativeStackNavigator();
 
@@ -32,7 +33,6 @@ function App() {
     "ChatScreen" | "HandleInviteScreen"
   >("ChatScreen");
   const navigationRef = useNavigationContainerRef();
-
   useEffect(() => {
     Linking.getInitialURL().then((url) => {
       if (url) {
@@ -49,10 +49,10 @@ function App() {
 
   return (
     <StrictMode>
-      <Jazz.Provider
+      <JazzProvider
         auth={auth}
-        peer="wss://cloud.jazz.tools/?key=chat-rn-example-jazz@gcmp.io"
-        storage={undefined}
+        storage="sqlite"
+        peer="wss://cloud.jazz.tools/?key=chat-rn-example-jazz@garden.co"
       >
         <NavigationContainer linking={linking} ref={navigationRef}>
           <Stack.Navigator initialRouteName={initialRoute}>
@@ -68,7 +68,7 @@ function App() {
             />
           </Stack.Navigator>
         </NavigationContainer>
-      </Jazz.Provider>
+      </JazzProvider>
       {state.state !== "signedIn" ? (
         <DemoAuthBasicUI appName="Jazz Chat" state={state} />
       ) : null}

examples/chat-rn/src/chat.tsx

@@ -14,50 +14,40 @@ import React, {
   Alert,
 } from "react-native";
 
-import { useAccount, useCoState } from "./jazz";
+import { useAccount, useCoState } from "jazz-react-native";
 import { Chat, Message } from "./schema";
 
 export default function ChatScreen({ navigation }: { navigation: any }) {
   const { me, logOut } = useAccount();
-  const [chat, setChat] = useState<Chat>();
+  const [chatId, setChatId] = useState<ID<Chat>>();
+  const loadedChat = useCoState(Chat, chatId, [{}]);
   const [message, setMessage] = useState("");
-  const loadedChat = useCoState(Chat, chat?.id, [{}]);
 
   useEffect(() => {
     navigation.setOptions({
       headerRight: () => <Button onPress={logOut} title="Logout" />,
       headerLeft: () =>
-        chat ? (
+        loadedChat ? (
           <Button
             onPress={() => {
-              if (chat?.id) {
+              if (loadedChat?.id) {
                 Clipboard.setStringAsync(
-                  `https://chat.jazz.tools/#/chat/${chat.id}`,
+                  `https://chat.jazz.tools/#/chat/${loadedChat.id}`,
                 );
-                Alert.alert("Copied to clipboard", `Chat ID: ${chat.id}`);
+                Alert.alert("Copied to clipboard", `Chat ID: ${loadedChat.id}`);
               }
             }}
             title="Share"
           />
         ) : null,
     });
-  }, [navigation, chat]);
+  }, [navigation, loadedChat]);
 
   const createChat = () => {
     const group = Group.create({ owner: me });
     group.addMember("everyone", "writer");
     const chat = Chat.create([], { owner: group });
-    setChat(chat);
-  };
-
-  const loadChat = async (chatId: ID<Chat>) => {
-    try {
-      const chat = await Chat.load(chatId, me, []);
-      setChat(chat);
-    } catch (error) {
-      console.log("Error loading chat", error);
-      Alert.alert("Error", `Error loading chat: ${error}`);
-    }
+    setChatId(chat.id);
   };
 
   const joinChat = () => {
@@ -73,7 +63,7 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
           text: "Join",
           onPress: (chatId) => {
             if (chatId) {
-              loadChat(chatId as ID<Chat>);
+              setChatId(chatId as ID<Chat>);
             } else {
               Alert.alert("Error", "Chat ID cannot be empty.");
             }
@@ -85,9 +75,11 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
   };
 
   const sendMessage = () => {
-    if (!chat) return;
+    if (!loadedChat) return;
     if (message.trim()) {
-      chat.push(Message.create({ text: message }, { owner: chat._owner }));
+      loadedChat.push(
+        Message.create({ text: message }, { owner: loadedChat?._owner }),
+      );
       setMessage("");
     }
   };
@@ -137,7 +129,7 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
 
   return (
     <View className="flex flex-col h-full">
-      {!chat ? (
+      {!loadedChat ? (
         <View className="flex flex-col h-full items-center justify-center">
           <TouchableOpacity
             onPress={createChat}

examples/chat-rn/src/invite.tsx

@@ -1,13 +1,7 @@
+import { useAcceptInvite } from "jazz-react-native";
 import React, { Text } from "react-native";
-import { useAcceptInvite } from "./jazz";
 import { Chat } from "./schema";
 
-type ChatScreenParams = {
-  valueHint?: string;
-  valueID?: string;
-  inviteSecret?: string;
-};
-
 export default function HandleInviteScreen({
   navigation,
 }: {

examples/chat-rn/src/jazz.tsx

@@ -1,4 +0,0 @@
-import { createJazzRNApp } from "jazz-react-native";
-
-export const Jazz = createJazzRNApp();
-export const { useAccount, useCoState, useAcceptInvite } = Jazz;

examples/chat-rn/tailwind.config.js

@@ -1,10 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  // NOTE: Update this to include the paths to all of your component files.
   content: [
     "./app/**/*.{js,jsx,ts,tsx}",
     "./components/**/*.{js,jsx,ts,tsx}",
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
+  presets: [require("nativewind/preset")],
   theme: {
     extend: {},
   },

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,243 @@
 # chat-vue
 
+## 0.0.34
+
+### Patch Changes
+
+- Updated dependencies [8eb9247]
+  - jazz-tools@0.9.9
+  - jazz-browser@0.9.9
+  - jazz-vue@0.9.9
+
+## 0.0.33
+
+### Patch Changes
+
+- Updated dependencies [d1d773b]
+  - jazz-tools@0.9.8
+  - jazz-browser@0.9.8
+  - jazz-vue@0.9.8
+
+## 0.0.32
+
+### Patch Changes
+
+- Updated dependencies [1b71969]
+- Updated dependencies [5d98189]
+  - jazz-browser@0.9.1
+  - jazz-tools@0.9.1
+  - jazz-vue@0.9.1
+
+## 0.0.31
+
+### Patch Changes
+
+- Updated dependencies [9dd8d95]
+- Updated dependencies [8eda792]
+  - jazz-vue@0.9.0
+  - jazz-tools@0.9.0
+  - jazz-browser@0.9.0
+
+## 0.0.30
+
+### Patch Changes
+
+- Updated dependencies [dc62b95]
+- Updated dependencies [1de26f8]
+  - jazz-tools@0.8.51
+  - jazz-browser@0.8.51
+  - jazz-vue@0.8.51
+
+## 0.0.29
+
+### Patch Changes
+
+- jazz-browser@0.8.50
+- jazz-tools@0.8.50
+- jazz-vue@0.8.50
+
+## 0.0.28
+
+### Patch Changes
+
+- jazz-browser@0.8.49
+- jazz-tools@0.8.49
+- jazz-vue@0.8.49
+
+## 0.0.27
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-browser@0.8.48
+  - jazz-vue@0.8.48
+
+## 0.0.26
+
+### Patch Changes
+
+- Updated dependencies [6f0bd7f]
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-browser@0.8.45
+  - jazz-tools@0.8.45
+  - jazz-vue@0.8.45
+
+## 0.0.25
+
+### Patch Changes
+
+- jazz-browser@0.8.44
+- jazz-tools@0.8.44
+- jazz-vue@0.8.44
+
+## 0.0.24
+
+### Patch Changes
+
+- Updated dependencies [ac216b9]
+  - jazz-browser@0.8.41
+  - jazz-tools@0.8.41
+  - jazz-vue@0.8.41
+
+## 0.0.23
+
+### Patch Changes
+
+- jazz-browser@0.8.40
+- jazz-vue@0.8.40
+
+## 0.0.22
+
+### Patch Changes
+
+- Updated dependencies [e386f2b]
+- Updated dependencies [249eecb]
+  - jazz-browser@0.8.39
+  - jazz-tools@0.8.39
+  - jazz-vue@0.8.39
+
+## 0.0.21
+
+### Patch Changes
+
+- jazz-browser@0.8.38
+- jazz-tools@0.8.38
+- jazz-vue@0.8.38
+
+## 0.0.20
+
+### Patch Changes
+
+- jazz-browser@0.8.37
+- jazz-tools@0.8.37
+- jazz-vue@0.8.25
+
+## 0.0.19
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-browser@0.8.36
+  - jazz-vue@0.8.24
+
+## 0.0.18
+
+### Patch Changes
+
+- Updated dependencies [8b87117]
+  - jazz-tools@0.8.35
+  - jazz-browser@0.8.35
+  - jazz-vue@0.8.23
+
+## 0.0.17
+
+### Patch Changes
+
+- jazz-browser@0.8.34
+- jazz-tools@0.8.34
+- jazz-vue@0.8.22
+
+## 0.0.16
+
+### Patch Changes
+
+- Updated dependencies [3cb27e1]
+  - jazz-browser@0.8.33
+  - jazz-vue@0.8.21
+
+## 0.0.15
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-browser@0.8.32
+  - jazz-vue@0.8.20
+
+## 0.0.14
+
+### Patch Changes
+
+- jazz-browser@0.8.31
+- jazz-tools@0.8.31
+- jazz-vue@0.8.19
+
+## 0.0.13
+
+### Patch Changes
+
+- jazz-browser@0.8.30
+- jazz-tools@0.8.30
+- jazz-vue@0.8.18
+
+## 0.0.12
+
+### Patch Changes
+
+- jazz-browser@0.8.29
+- jazz-tools@0.8.29
+- jazz-vue@0.8.17
+
+## 0.0.11
+
+### Patch Changes
+
+- jazz-browser@0.8.28
+- jazz-tools@0.8.28
+- jazz-vue@0.8.16
+
+## 0.0.10
+
+### Patch Changes
+
+- jazz-browser@0.8.27
+- jazz-tools@0.8.27
+- jazz-vue@0.8.15
+
+## 0.0.9
+
+### Patch Changes
+
+- jazz-browser@0.8.24
+- jazz-vue@0.8.14
+
+## 0.0.8
+
+### Patch Changes
+
+- Updated dependencies [d348c2d]
+- Updated dependencies [e442bb8]
+- Updated dependencies [6902b5b]
+- Updated dependencies [1a0cd3d]
+  - jazz-tools@0.8.23
+  - jazz-browser@0.8.23
+  - jazz-vue@0.8.13
+
 ## 0.0.7
 
 ### Patch Changes

examples/chat-vue/README.md

@@ -1,39 +1,65 @@
-# chat-vue
+# Chat example with Jazz and Vue
 
-This template should help get you started developing with Vue 3 in Vite.
+## Getting started
 
-## Recommended IDE Setup
+You can either
+1. Clone the jazz repository, and run the app within the monorepo.
+2. Or create a new Jazz project using this example as a template.
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
 
-## Type Support for `.vue` Imports in TS
+### Using the example as a template
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-pnpm install
+Create a new Jazz project, and use this example as a template.
+```bash
+npm create jazz-app@latest --example chat-vue --project-name chat-vue
+```
+or
+```bash
+npx create-jazz-app@latest --example chat-vue --project-name chat-vue
 ```
 
-### Compile and Hot-Reload for Development
+Go to the new project directory.
+```bash
+cd chat-vue
+```
 
-```sh
+Run the dev server.
+```bash
+npm run dev
+```
+
+### Using the monorepo
+
+This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
+
+Clone the jazz repository.
+```bash
+git clone https://github.com/garden-co/jazz.git
+```
+
+Install and build dependencies.
+```bash
+pnpm i && npx turbo build
+```
+
+Go to the example directory.
+```bash
+cd jazz/examples/chat-vue/
+```
+
+Start the dev server.
+```bash
 pnpm dev
 ```
 
-### Type-Check, Compile and Minify for Production
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
 
-```sh
-pnpm build
-```
+## Questions / problems / feedback
 
-### Lint with [ESLint](https://eslint.org/)
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
 
-```sh
-pnpm lint
-```
+## Configuration: sync server
+
+By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of `JazzProvider` in [./src/main.ts](./src/main.ts).

examples/chat-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-vue",
-  "version": "0.0.7",
+  "version": "0.0.34",
   "private": true,
   "type": "module",
   "scripts": {
@@ -25,14 +25,14 @@
     "@vitejs/plugin-vue": "^5.1.4",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.46.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.7.0",
     "eslint-plugin-vue": "^9.28.0",
     "npm-run-all2": "^6.2.3",
     "postcss": "^8.4.27",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10",
     "vite-plugin-vue-devtools": "^7.4.6",
     "vue-tsc": "^2.1.6"
   }

examples/chat-vue/src/App.vue

@@ -9,9 +9,9 @@
 </template>
 
 <script setup lang="ts">
+import { useAccount } from "jazz-vue";
 import AppContainer from "./components/AppContainer.vue";
 import TopBar from "./components/TopBar.vue";
-import { useAccount } from "./main";
 
 const { me, logOut } = useAccount();
 </script>