Merge pull request #898 from garden-co/chore/example-projects-ci

Rename chat-clerk to clerk in yaml file

.github/workflows/build-examples.yaml

@@ -11,7 +11,8 @@ jobs:
       matrix:
         example: [
           "chat",
-          "chat-clerk",
+          "clerk",
+          "passkey",
           "inspector",
           "music-player",
           "password-manager",

e2e/BinaryCoStream/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @jazz-e2e/binarycostream
 
+## 0.0.111
+
+### Patch Changes
+
+- Updated dependencies [e4f110f]
+  - cojson@0.8.34
+  - jazz-react@0.8.34
+  - jazz-tools@0.8.34
+
+## 0.0.110
+
+### Patch Changes
+
+- jazz-react@0.8.33
+
+## 0.0.109
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.108
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - jazz-react@0.8.31
+  - jazz-tools@0.8.31
+
+## 0.0.107
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - jazz-react@0.8.30
+  - jazz-tools@0.8.30
+
+## 0.0.106
+
+### Patch Changes
+
+- Updated dependencies [dcc9c2e]
+- Updated dependencies [699553f]
+  - cojson@0.8.29
+  - jazz-react@0.8.29
+  - jazz-tools@0.8.29
+
 ## 0.0.105
 
 ### Patch Changes

e2e/BinaryCoStream/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jazz-e2e/filestream",
   "private": true,
-  "version": "0.0.105",
+  "version": "0.0.111",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,11 +13,11 @@
     "test:ui": "playwright test --ui"
   },
   "dependencies": {
-    "cojson": "workspace:0.8.28",
+    "cojson": "workspace:0.8.34",
     "hash-slash": "workspace:0.2.1",
     "is-ci": "^3.0.1",
-    "jazz-react": "workspace:0.8.28",
-    "jazz-tools": "workspace:0.8.28",
+    "jazz-react": "workspace:0.8.34",
+    "jazz-tools": "workspace:0.8.34",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

e2e/CoValues/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @jazz-e2e/covalues
 
+## 0.0.110
+
+### Patch Changes
+
+- Updated dependencies [e4f110f]
+  - cojson@0.8.34
+  - jazz-react@0.8.34
+  - jazz-tools@0.8.34
+
+## 0.0.109
+
+### Patch Changes
+
+- jazz-react@0.8.33
+
+## 0.0.108
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.107
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - jazz-react@0.8.31
+  - jazz-tools@0.8.31
+
+## 0.0.106
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - jazz-react@0.8.30
+  - jazz-tools@0.8.30
+
+## 0.0.105
+
+### Patch Changes
+
+- Updated dependencies [dcc9c2e]
+- Updated dependencies [699553f]
+  - cojson@0.8.29
+  - jazz-react@0.8.29
+  - jazz-tools@0.8.29
+
 ## 0.0.104
 
 ### Patch Changes

e2e/CoValues/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jazz-e2e/covalues",
   "private": true,
-  "version": "0.0.104",
+  "version": "0.0.110",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/book-shelf/CHANGELOG.md

@@ -1,5 +1,53 @@
 # jazz-example-book-shelf
 
+## 0.1.26
+
+### Patch Changes
+
+- jazz-react@0.8.34
+- jazz-tools@0.8.34
+- jazz-browser-media-images@0.8.34
+
+## 0.1.25
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.33
+- jazz-react@0.8.33
+
+## 0.1.24
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+  - jazz-browser-media-images@0.8.32
+
+## 0.1.23
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+- jazz-browser-media-images@0.8.31
+
+## 0.1.22
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+- jazz-browser-media-images@0.8.30
+
+## 0.1.21
+
+### Patch Changes
+
+- jazz-react@0.8.29
+- jazz-tools@0.8.29
+- jazz-browser-media-images@0.8.29
+
 ## 0.1.20
 
 ### Patch Changes

examples/book-shelf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-example-book-shelf",
-  "version": "0.1.20",
+  "version": "0.1.26",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.8.28",
-    "jazz-react": "workspace:0.8.28",
-    "jazz-tools": "workspace:0.8.28",
+    "jazz-browser-media-images": "workspace:0.8.34",
+    "jazz-react": "workspace:0.8.34",
+    "jazz-tools": "workspace:0.8.34",
     "next": "14.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

examples/chat-clerk/.gitignore

@@ -1,26 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-sync-db/

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/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 Chat Example</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/app.tsx"></script>
-  </body>
-</html>

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.104",
-  "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.28",
-    "hash-slash": "workspace:0.2.1",
-    "jazz-react": "workspace:0.8.28",
-    "jazz-react-auth-clerk": "workspace:0.8.28",
-    "jazz-tools": "workspace:0.8.28",
-    "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/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

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/main.tsx

@@ -1,46 +0,0 @@
-import { createJazzReactApp } from "jazz-react";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { App } from "./app.tsx";
-
-import { ClerkProvider, SignInButton, useClerk } from "@clerk/clerk-react";
-import { useJazzClerkAuth } from "jazz-react-auth-clerk";
-
-const Jazz = createJazzReactApp();
-export const { useAccount, useCoState } = Jazz;
-
-function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const clerk = useClerk();
-  const [auth, state] = useJazzClerkAuth(clerk);
-
-  return (
-    <>
-      {state.errors.map((error) => (
-        <div key={error}>{error}</div>
-      ))}
-      {auth ? (
-        <Jazz.Provider
-          auth={auth}
-          peer="wss://cloud.jazz.tools/?key=chat-example-jazz-clerk@gcmp.io"
-        >
-          {children}
-        </Jazz.Provider>
-      ) : (
-        <SignInButton />
-      )}
-    </>
-  );
-}
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <ClerkProvider
-      publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
-      afterSignOutUrl="/"
-    >
-      <JazzAndAuth>
-        <App />
-      </JazzAndAuth>
-    </ClerkProvider>
-  </StrictMode>,
-);

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/tsconfig.json

@@ -1,29 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2023", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

examples/chat-clerk/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

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/CHANGELOG.md

@@ -1,5 +1,59 @@
 # chat-rn-clerk
 
+## 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

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.20",
+  "version": "1.0.26",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,41 @@
 # chat-rn
 
+## 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

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.19",
+  "version": "1.0.24",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,54 @@
 # chat-vue
 
+## 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

examples/chat-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-vue",
-  "version": "0.0.11",
+  "version": "0.0.17",
   "private": true,
   "type": "module",
   "scripts": {

examples/chat/CHANGELOG.md

@@ -1,5 +1,59 @@
 # jazz-example-chat
 
+## 0.0.112
+
+### Patch Changes
+
+- Updated dependencies [e4f110f]
+  - cojson@0.8.34
+  - jazz-react@0.8.34
+  - jazz-tools@0.8.34
+
+## 0.0.111
+
+### Patch Changes
+
+- jazz-react@0.8.33
+
+## 0.0.110
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.109
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - jazz-react@0.8.31
+  - jazz-tools@0.8.31
+
+## 0.0.108
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - jazz-react@0.8.30
+  - jazz-tools@0.8.30
+
+## 0.0.107
+
+### Patch Changes
+
+- Updated dependencies [dcc9c2e]
+- Updated dependencies [699553f]
+  - cojson@0.8.29
+  - jazz-react@0.8.29
+  - jazz-tools@0.8.29
+
 ## 0.0.106
 
 ### Patch Changes

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.106",
+  "version": "0.0.112",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,10 +18,10 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.28",
+    "cojson": "workspace:0.8.34",
     "hash-slash": "workspace:0.2.1",
-    "jazz-react": "workspace:0.8.28",
-    "jazz-tools": "workspace:0.8.28",
+    "jazz-react": "workspace:0.8.34",
+    "jazz-tools": "workspace:0.8.34",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/clerk/CHANGELOG.md

@@ -0,0 +1,94 @@
+# minimal-auth-clerk
+
+## 0.0.11
+
+### Patch Changes
+
+- 9ca25d1: Rename passkey and clerk examples
+- Updated dependencies [9ca25d1]
+  - jazz-react-auth-clerk@0.8.34
+  - jazz-react@0.8.34
+  - jazz-tools@0.8.34
+
+## 0.0.10
+
+### Patch Changes
+
+- jazz-react@0.8.33
+- jazz-react-auth-clerk@0.8.33
+
+## 0.0.9
+
+### Patch Changes
+
+- Updated dependencies [1a4bda0]
+- Updated dependencies [df42b2b]
+  - jazz-react-auth-clerk@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.8
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-react-auth-clerk@0.8.31
+- jazz-tools@0.8.31
+
+## 0.0.7
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-react-auth-clerk@0.8.30
+- jazz-tools@0.8.30
+
+## 0.0.6
+
+### Patch Changes
+
+- jazz-react@0.8.29
+- jazz-react-auth-clerk@0.8.29
+- jazz-tools@0.8.29
+
+## 0.0.5
+
+### Patch Changes
+
+- jazz-react@0.8.28
+- jazz-react-auth-clerk@0.8.28
+- jazz-tools@0.8.28
+
+## 0.0.4
+
+### Patch Changes
+
+- jazz-react@0.8.27
+- jazz-react-auth-clerk@0.8.27
+- jazz-tools@0.8.27
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies [59d37df]
+  - jazz-react@0.8.26
+  - jazz-react-auth-clerk@0.8.26
+
+## 0.0.2
+
+### Patch Changes
+
+- jazz-react@0.8.24
+- jazz-react-auth-clerk@0.8.24
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies [d348c2d]
+- Updated dependencies [6902b5b]
+- Updated dependencies [1a0cd3d]
+  - jazz-tools@0.8.23
+  - jazz-react@0.8.23
+  - jazz-react-auth-clerk@0.8.23

examples/clerk/README.md

@@ -1,3 +1,3 @@
 # Minimal Jazz Auth Clerk Example
 
-This is a minimal example of how to use Clerk authentication with Jazz.
+This is a minimal example of how to use Clerk authentication with Jazz.

examples/clerk/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "minimal-auth-clerk",
+  "name": "clerk",
   "private": true,
-  "version": "0.0.5",
+  "version": "0.0.11",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -14,7 +14,7 @@
     "@clerk/clerk-react": "^5.4.1",
     "jazz-tools": "workspace:*",
     "jazz-react": "workspace:*",
-    "jazz-react-auth-clerk": "workspace:0.8.28",
+    "jazz-react-auth-clerk": "workspace:0.8.34",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

examples/inspector/CHANGELOG.md

@@ -1,5 +1,47 @@
 # jazz-example-inspector
 
+## 0.0.81
+
+### Patch Changes
+
+- Updated dependencies [e4f110f]
+  - cojson@0.8.34
+  - cojson-transport-ws@0.8.34
+
+## 0.0.80
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - cojson-transport-ws@0.8.32
+
+## 0.0.79
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - cojson-transport-ws@0.8.31
+
+## 0.0.78
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - cojson-transport-ws@0.8.30
+
+## 0.0.77
+
+### Patch Changes
+
+- Updated dependencies [dcc9c2e]
+- Updated dependencies [699553f]
+  - cojson-transport-ws@0.8.29
+  - cojson@0.8.29
+
 ## 0.0.76
 
 ### Patch Changes

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector",
   "private": true,
-  "version": "0.0.76",
+  "version": "0.0.81",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.28",
-    "cojson-transport-ws": "workspace:0.8.28",
+    "cojson": "workspace:0.8.34",
+    "cojson-transport-ws": "workspace:0.8.34",
     "hash-slash": "workspace:0.2.1",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",

examples/minimal-auth-clerk/.env

@@ -1 +0,0 @@
-VITE_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ

examples/minimal-auth-clerk/CHANGELOG.md

@@ -1,43 +0,0 @@
-# minimal-auth-clerk
-
-## 0.0.5
-
-### Patch Changes
-
-- jazz-react@0.8.28
-- jazz-react-auth-clerk@0.8.28
-- jazz-tools@0.8.28
-
-## 0.0.4
-
-### Patch Changes
-
-- jazz-react@0.8.27
-- jazz-react-auth-clerk@0.8.27
-- jazz-tools@0.8.27
-
-## 0.0.3
-
-### Patch Changes
-
-- Updated dependencies [59d37df]
-  - jazz-react@0.8.26
-  - jazz-react-auth-clerk@0.8.26
-
-## 0.0.2
-
-### Patch Changes
-
-- jazz-react@0.8.24
-- jazz-react-auth-clerk@0.8.24
-
-## 0.0.1
-
-### Patch Changes
-
-- Updated dependencies [d348c2d]
-- Updated dependencies [6902b5b]
-- Updated dependencies [1a0cd3d]
-  - jazz-tools@0.8.23
-  - jazz-react@0.8.23
-  - jazz-react-auth-clerk@0.8.23

examples/minimal-auth-passkey/CHANGELOG.md

@@ -1,28 +0,0 @@
-# minimal-auth-passkey
-
-## 0.0.4
-
-### Patch Changes
-
-- jazz-react@0.8.28
-- jazz-tools@0.8.28
-
-## 0.0.3
-
-### Patch Changes
-
-- jazz-react@0.8.27
-- jazz-tools@0.8.27
-
-## 0.0.2
-
-### Patch Changes
-
-- Updated dependencies [59d37df]
-  - jazz-react@0.8.26
-
-## 0.0.1
-
-### Patch Changes
-
-- jazz-react@0.8.24

examples/minimal-auth-passkey/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

examples/music-player/CHANGELOG.md

@@ -1,5 +1,47 @@
 # jazz-example-musicplayer
 
+## 0.0.32
+
+### Patch Changes
+
+- jazz-react@0.8.34
+- jazz-tools@0.8.34
+
+## 0.0.31
+
+### Patch Changes
+
+- jazz-react@0.8.33
+
+## 0.0.30
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.29
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+
+## 0.0.28
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+
+## 0.0.27
+
+### Patch Changes
+
+- jazz-react@0.8.29
+- jazz-tools@0.8.29
+
 ## 0.0.26
 
 ### Patch Changes

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.26",
+  "version": "0.0.32",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,8 +18,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.8.28",
-    "jazz-tools": "workspace:0.8.28",
+    "jazz-react": "workspace:0.8.34",
+    "jazz-tools": "workspace:0.8.34",
     "lucide-react": "^0.274.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/onboarding/CHANGELOG.md

@@ -1,5 +1,53 @@
 # jazz-example-onboarding
 
+## 0.0.13
+
+### Patch Changes
+
+- jazz-react@0.8.34
+- jazz-tools@0.8.34
+- jazz-browser-media-images@0.8.34
+
+## 0.0.12
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.33
+- jazz-react@0.8.33
+
+## 0.0.11
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+  - jazz-browser-media-images@0.8.32
+
+## 0.0.10
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+- jazz-browser-media-images@0.8.31
+
+## 0.0.9
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+- jazz-browser-media-images@0.8.30
+
+## 0.0.8
+
+### Patch Changes
+
+- jazz-react@0.8.29
+- jazz-tools@0.8.29
+- jazz-browser-media-images@0.8.29
+
 ## 0.0.7
 
 ### Patch Changes

examples/onboarding/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-onboarding",
   "private": true,
-  "version": "0.0.7",
+  "version": "0.0.13",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/passkey/CHANGELOG.md

@@ -0,0 +1,71 @@
+# minimal-auth-passkey
+
+## 0.0.10
+
+### Patch Changes
+
+- 9ca25d1: Rename passkey and clerk examples
+  - jazz-react@0.8.34
+  - jazz-tools@0.8.34
+
+## 0.0.9
+
+### Patch Changes
+
+- jazz-react@0.8.33
+
+## 0.0.8
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.7
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+
+## 0.0.6
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+
+## 0.0.5
+
+### Patch Changes
+
+- jazz-react@0.8.29
+- jazz-tools@0.8.29
+
+## 0.0.4
+
+### Patch Changes
+
+- jazz-react@0.8.28
+- jazz-tools@0.8.28
+
+## 0.0.3
+
+### Patch Changes
+
+- jazz-react@0.8.27
+- jazz-tools@0.8.27
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [59d37df]
+  - jazz-react@0.8.26
+
+## 0.0.1
+
+### Patch Changes
+
+- jazz-react@0.8.24

examples/passkey/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "minimal-auth-passkey",
+  "name": "passkey",
   "private": true,
-  "version": "0.0.4",
+  "version": "0.0.10",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/password-manager/CHANGELOG.md

@@ -1,5 +1,47 @@
 # jazz-password-manager
 
+## 0.0.31
+
+### Patch Changes
+
+- jazz-react@0.8.34
+- jazz-tools@0.8.34
+
+## 0.0.30
+
+### Patch Changes
+
+- jazz-react@0.8.33
+
+## 0.0.29
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.28
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+
+## 0.0.27
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+
+## 0.0.26
+
+### Patch Changes
+
+- jazz-react@0.8.29
+- jazz-tools@0.8.29
+
 ## 0.0.25
 
 ### Patch Changes

examples/password-manager/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-password-manager",
   "private": true,
-  "version": "0.0.25",
+  "version": "0.0.31",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,8 +12,8 @@
     "clean-install": "rm -rf node_modules pnpm-lock.yaml && pnpm install"
   },
   "dependencies": {
-    "jazz-react": "workspace:0.8.28",
-    "jazz-tools": "workspace:0.8.28",
+    "jazz-react": "workspace:0.8.34",
+    "jazz-tools": "workspace:0.8.34",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.41.5",

examples/pets/CHANGELOG.md

@@ -1,5 +1,53 @@
 # jazz-example-pets
 
+## 0.0.129
+
+### Patch Changes
+
+- jazz-react@0.8.34
+- jazz-tools@0.8.34
+- jazz-browser-media-images@0.8.34
+
+## 0.0.128
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.33
+- jazz-react@0.8.33
+
+## 0.0.127
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+  - jazz-browser-media-images@0.8.32
+
+## 0.0.126
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+- jazz-browser-media-images@0.8.31
+
+## 0.0.125
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+- jazz-browser-media-images@0.8.30
+
+## 0.0.124
+
+### Patch Changes
+
+- jazz-react@0.8.29
+- jazz-tools@0.8.29
+- jazz-browser-media-images@0.8.29
+
 ## 0.0.123
 
 ### Patch Changes

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.123",
+  "version": "0.0.129",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,9 +19,9 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.8.28",
-    "jazz-react": "workspace:0.8.28",
-    "jazz-tools": "workspace:0.8.28",
+    "jazz-browser-media-images": "workspace:0.8.34",
+    "jazz-react": "workspace:0.8.34",
+    "jazz-tools": "workspace:0.8.34",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
@@ -41,7 +41,7 @@
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
     "is-ci": "^3.0.1",
-    "jazz-run": "workspace:0.8.28",
+    "jazz-run": "workspace:0.8.34",
     "postcss": "^8.4.27",
     "tailwindcss": "3.3.2",
     "typescript": "^5.3.3",

examples/todo-vue/CHANGELOG.md

@@ -1,5 +1,54 @@
 # todo-vue
 
+## 0.0.15
+
+### Patch Changes
+
+- jazz-browser@0.8.34
+- jazz-tools@0.8.34
+- jazz-vue@0.8.22
+
+## 0.0.14
+
+### Patch Changes
+
+- Updated dependencies [3cb27e1]
+  - jazz-browser@0.8.33
+  - jazz-vue@0.8.21
+
+## 0.0.13
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-browser@0.8.32
+  - jazz-vue@0.8.20
+
+## 0.0.12
+
+### Patch Changes
+
+- jazz-browser@0.8.31
+- jazz-tools@0.8.31
+- jazz-vue@0.8.19
+
+## 0.0.11
+
+### Patch Changes
+
+- jazz-browser@0.8.30
+- jazz-tools@0.8.30
+- jazz-vue@0.8.18
+
+## 0.0.10
+
+### Patch Changes
+
+- jazz-browser@0.8.29
+- jazz-tools@0.8.29
+- jazz-vue@0.8.17
+
 ## 0.0.9
 
 ### Patch Changes

examples/todo-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "todo-vue",
-  "version": "0.0.9",
+  "version": "0.0.15",
   "private": true,
   "type": "module",
   "scripts": {

examples/todo/CHANGELOG.md

@@ -1,5 +1,47 @@
 # jazz-example-todo
 
+## 0.0.128
+
+### Patch Changes
+
+- jazz-react@0.8.34
+- jazz-tools@0.8.34
+
+## 0.0.127
+
+### Patch Changes
+
+- jazz-react@0.8.33
+
+## 0.0.126
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.125
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+
+## 0.0.124
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+
+## 0.0.123
+
+### Patch Changes
+
+- jazz-react@0.8.29
+- jazz-tools@0.8.29
+
 ## 0.0.122
 
 ### Patch Changes

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.122",
+  "version": "0.0.128",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.8.28",
-    "jazz-tools": "workspace:0.8.28",
+    "jazz-react": "workspace:0.8.34",
+    "jazz-tools": "workspace:0.8.34",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

homepage/design-system/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@evilmartians/harmony": "^1.0.0",
     "@headlessui/react": "^2.2.0",
+    "@icons-pack/react-simple-icons": "^9.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.436.0",
@@ -19,6 +20,7 @@
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
+    "resend": "^4.0.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7"
   },

homepage/design-system/src/app/components/atoms/Button.tsx

@@ -1,5 +1,7 @@
 import { clsx } from "clsx";
+import { LucideIcon } from "lucide-react";
 import Link from "next/link";
+import { Spinner } from "./Spinner";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
@@ -7,6 +9,19 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   size?: "sm" | "md" | "lg";
   href?: string;
   newTab?: boolean;
+  icon?: LucideIcon;
+  loading?: boolean;
+  loadingText?: string;
+}
+
+function ButtonIcon({ icon: Icon, loading }: ButtonProps) {
+  if (!Icon) return null;
+
+  const className = "size-5";
+
+  if (loading) return <Spinner className={className} />;
+
+  return <Icon strokeWidth={1.5} className={className} />;
 }
 
 export function Button(props: ButtonProps) {
@@ -18,6 +33,7 @@ export function Button(props: ButtonProps) {
     href,
     disabled,
     newTab,
+    loadingText,
   } = props;
 
   const sizeClasses = {
@@ -37,6 +53,7 @@ export function Button(props: ButtonProps) {
   const classNames = clsx(
     className,
     "inline-flex items-center justify-center gap-2 rounded-lg text-center transition-colors",
+    "disabled:pointer-events-none disabled:opacity-70",
     sizeClasses[size],
     variantClasses[variant],
     disabled && "opacity-50 cursor-not-allowed pointer-events-none",
@@ -49,14 +66,21 @@ export function Button(props: ButtonProps) {
         target={newTab ? "_blank" : undefined}
         className={classNames}
       >
+        <ButtonIcon {...props} />
         {children}
       </Link>
     );
   }
 
   return (
-    <button {...props} className={classNames}>
-      {children}
+    <button
+      {...props}
+      disabled={props.disabled || props.loading}
+      className={classNames}
+    >
+      <ButtonIcon {...props} />
+
+      {props.loading && props.loadingText ? props.loadingText : children}
     </button>
   );
 }

homepage/design-system/src/app/components/atoms/Card.tsx

@@ -0,0 +1,12 @@
+import { clsx } from "clsx";
+
+export function Card({
+  children,
+  className,
+}: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={clsx(className, "border rounded-xl shadow-sm")}>
+      {children}
+    </div>
+  );
+}

homepage/design-system/src/app/components/atoms/GridCard.tsx

@@ -1,16 +1,16 @@
 import clsx from "clsx";
 import { ReactNode } from "react";
+import { Card } from "../atoms/Card";
 
 export function GridCard(props: { children: ReactNode; className?: string }) {
   return (
-    <div
+    <Card
       className={clsx(
         "col-span-2 p-4 [&>h4]:mt-0 [&>h3]:mt-0 [&>:last-child]:mb-0",
-        "border rounded-xl shadow-sm",
         props.className,
       )}
     >
       {props.children}
-    </div>
+    </Card>
   );
 }

homepage/design-system/src/app/components/atoms/Spinner.tsx

@@ -0,0 +1,26 @@
+import clsx from "clsx";
+
+export function Spinner({ className }: { className?: string }) {
+  return (
+    <svg
+      className={clsx(className, "animate-spin")}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+}

homepage/design-system/src/app/components/molecules/FeatureCard.tsx

@@ -0,0 +1,36 @@
+import clsx from "clsx";
+import { LucideIcon } from "lucide-react";
+import { Card } from "../atoms/Card";
+import { Prose } from "./Prose";
+
+export function FeatureCard({
+  label,
+  icon: Icon,
+  explanation,
+  children,
+  className,
+}: {
+  label: React.ReactNode;
+  icon?: LucideIcon;
+  explanation?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <Card className={clsx(className, "p-4")}>
+      {Icon && (
+        <Icon
+          className="size-8 text-blue p-1.5 rounded-lg bg-blue-50 dark:text-blue-500 dark:bg-stone-900 mb-2.5 md:size-10"
+          strokeWidth={1.5}
+          strokeLinecap="butt"
+          size={80}
+        />
+      )}
+      <div className="text-stone-900 font-medium md:text-base dark:text-stone-100 mb-2">
+        {label}
+      </div>
+      {explanation && <Prose>{explanation}</Prose>}
+      {children}
+    </Card>
+  );
+}

homepage/design-system/src/app/components/molecules/GappedGrid.tsx

@@ -6,15 +6,23 @@ export function GappedGrid({
   children,
   className,
   title,
+  cols = 3,
 }: {
   children: ReactNode;
   className?: string;
   title?: string;
+  cols?: 3 | 4;
 }) {
+  const colsClassName =
+    cols === 3
+      ? "grid-cols-2 md:grid-cols-4 lg:grid-cols-6"
+      : "sm:grid-cols-2 lg:grid-cols-4";
+
   return (
     <div
       className={clsx(
-        "grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 lg:gap-8",
+        "grid gap-4 lg:gap-8",
+        colsClassName,
         "items-stretch",
         className,
       )}

homepage/design-system/src/app/components/molecules/LabelledFeatureIcon.tsx

@@ -1,37 +0,0 @@
-import clsx from "clsx";
-import { LucideIcon } from "lucide-react";
-import { Prose } from "./Prose";
-
-export function LabelledFeatureIcon({
-  label,
-  icon: Icon,
-  explanation,
-  className,
-}: {
-  label: string;
-  icon: LucideIcon;
-  explanation: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <div
-      className={clsx(
-        className,
-        "text-base",
-        "rounded-xl",
-        "border p-4 shadow-sm",
-      )}
-    >
-      <Icon
-        className="size-8 text-blue p-1.5 rounded-lg bg-blue-50 dark:text-blue-500 dark:bg-stone-900 mb-2.5 md:size-10"
-        strokeWidth={1.5}
-        strokeLinecap="butt"
-        size={80}
-      />
-      <div className="text-stone-900 font-medium md:text-base dark:text-stone-100 mb-2">
-        {label}
-      </div>
-      <Prose>{explanation}</Prose>
-    </div>
-  );
-}

homepage/design-system/src/app/components/molecules/ThemeToggle.tsx

@@ -19,7 +19,7 @@ export function ThemeToggle({ className }: { className?: string }) {
       type="button"
       className={clsx(
         className,
-        "md:p-2 md:rounded-full md:border",
+        "md:p-1.5 md:rounded-full md:border",
         "text-stone-400 hover:text-stone-900 dark:text-stone-400 dark:hover:text-white",
         "md:hover:bg-stone-200 md:dark:hover:bg-stone-900",
         "transition-colors",
@@ -29,13 +29,13 @@ export function ThemeToggle({ className }: { className?: string }) {
     >
       <MoonIcon
         size={24}
-        strokeWidth={1.5}
-        className="size-5 md:size-6 stroke-stone-900 dark:hidden"
+        strokeWidth={2}
+        className="size-5 stroke-stone-900 dark:hidden"
       />
       <SunIcon
         size={24}
-        strokeWidth={1.5}
-        className="size-5 md:size-6 hidden stroke-white dark:block"
+        strokeWidth={2}
+        className="size-5 hidden stroke-white dark:block"
       />
     </button>
   );

homepage/design-system/src/app/components/organisms/Footer.tsx

@@ -5,6 +5,8 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ReactNode } from "react";
 import { ThemeToggle } from "../molecules/ThemeToggle";
+import { NewsletterForm } from "./NewsletterForm";
+import { SocialLinks, SocialLinksProps } from "./SocialLinks";
 
 type FooterSection = {
   title: string;
@@ -19,6 +21,7 @@ type FooterProps = {
   logo: ReactNode;
   companyName: string;
   sections: FooterSection[];
+  socials: SocialLinksProps;
 };
 
 function Copyright({
@@ -35,38 +38,54 @@ function Copyright({
   );
 }
 
-export function Footer({ logo, companyName, sections }: FooterProps) {
+export function Footer({ logo, companyName, sections, socials }: FooterProps) {
   return (
-    <footer className="w-full border-t bg-stone-100 mt-12 md:mt-20 dark:bg-stone-925">
-      <div className="container py-8 md:py-16 grid gap-y-8 grid-cols-12">
-        <div className="flex flex-col justify-between col-span-full md:col-span-4">
-          {logo}
-
-          <Copyright className="hidden md:block" companyName={companyName} />
-        </div>
-
-        {sections.map((section, index) => (
-          <div
-            key={index}
-            className="flex flex-col gap-2 text-sm col-span-4 sm:col-span-4 md:col-span-2"
-          >
-            <h2 className="font-medium">{section.title}</h2>
-            {section.links.map((link, linkIndex) => (
-              <FooterLink key={linkIndex} href={link.href} newTab={link.newTab}>
-                {link.label}
-              </FooterLink>
-            ))}
+    <footer className="w-full py-8 mt-12 md:mt-20">
+      <div className="container grid gap-8 md:gap-12">
+        <div className="grid grid-cols-12 gap-y-3 sm:items-center pb-8 border-b">
+          <div className="col-span-full sm:col-span-6 md:col-span-8">
+            {logo}
           </div>
-        ))}
-
-        <div className="hidden md:flex justify-end items-end md:col-span-2">
-          <ThemeToggle />
+          <p className="col-span-full sm:col-span-6 md:col-span-4 text-sm sm:text-base">
+            Playful software for serious problems.
+          </p>
         </div>
+        <div className="grid gap-y-8 grid-cols-12">
+          <div className="flex flex-col gap-4 col-span-full md:col-span-8">
+            <p className="font-medium text-stone-900 dark:text-white">
+              Stay up to date
+            </p>
+            <NewsletterForm />
+          </div>
 
-        <Copyright
-          className="col-span-full md:hidden"
-          companyName={companyName}
-        />
+          {sections.map((section, index) => (
+            <div
+              key={index}
+              className="flex flex-col gap-2 text-sm col-span-6 md:col-span-2"
+            >
+              <h2 className="font-medium">{section.title}</h2>
+              {section.links.map((link, linkIndex) => (
+                <FooterLink
+                  key={linkIndex}
+                  href={link.href}
+                  newTab={link.newTab}
+                >
+                  {link.label}
+                </FooterLink>
+              ))}
+            </div>
+          ))}
+
+          <Copyright
+            className="order-last col-span-full self-center md:col-span-10 md:order-none"
+            companyName={companyName}
+          />
+
+          <div className="col-span-full flex items-center justify-between gap-6 md:col-span-2">
+            <SocialLinks {...socials}></SocialLinks>
+            <ThemeToggle className="hidden md:block" />
+          </div>
+        </div>
       </div>
     </footer>
   );

homepage/design-system/src/app/components/organisms/Nav.tsx

@@ -14,6 +14,7 @@ import { usePathname } from "next/navigation";
 import { ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { BreadCrumb } from "../molecules/Breadcrumb";
 import { ThemeToggle } from "../molecules/ThemeToggle";
+import { SocialLinks, SocialLinksProps } from "./SocialLinks";
 
 type NavItemProps = {
   href: string;
@@ -30,6 +31,7 @@ type NavProps = {
   items: NavItemProps[];
   docNav?: ReactNode;
   cta?: ReactNode;
+  socials?: SocialLinksProps;
 };
 
 function NavItem({
@@ -110,7 +112,7 @@ function NavItem({
   );
 }
 
-export function MobileNav({ mainLogo, items, docNav, cta }: NavProps) {
+export function MobileNav({ mainLogo, items, docNav, cta, socials }: NavProps) {
   const [menuOpen, setMenuOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
   const searchRef = useRef<HTMLInputElement>(null);
@@ -170,13 +172,8 @@ export function MobileNav({ mainLogo, items, docNav, cta }: NavProps) {
             >
               {mainLogo}
             </NavLinkLogo>
-            {items
-              .filter((item) => "icon" in item)
-              .map((item, i) => (
-                <NavLinkLogo key={i} href={item.href} newTab={item.newTab}>
-                  {item.icon}
-                </NavLinkLogo>
-              ))}
+
+            <SocialLinks className="px-2 gap-2" {...socials} />
           </div>
 
           {pathname.startsWith("/docs") && docNav && (
@@ -310,6 +307,8 @@ export function Nav(props: NavProps) {
             />
           ))}
 
+          <SocialLinks {...props.socials} />
+
           {cta}
         </PopoverGroup>
       </div>

homepage/design-system/src/app/components/organisms/NewsletterForm.tsx

@@ -1,30 +1,37 @@
 "use client";
 
-import { subscribe } from "@/app/actions/resend";
-import { Button } from "gcmp-design-system/src/app/components/atoms/Button";
-import { Input } from "gcmp-design-system/src/app/components/molecules/Input";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MailIcon } from "lucide-react";
 import { useState } from "react";
 import { ErrorResponse } from "resend";
+import { subscribe } from "../../../actions/resend";
+import { Button } from "../atoms/Button";
+import { Input } from "../molecules/Input";
 
 export function NewsletterForm() {
   const [email, setEmail] = useState("");
-  const [subscribed, setSubscribed] = useState(false);
+  // const [subscribed, setSubscribed] = useState(false);
   const [error, setError] = useState<ErrorResponse | undefined>();
 
+  const [state, setState] = useState<"ready" | "loading" | "success" | "error">(
+    "ready",
+  );
+
   const submit = async (e: React.FormEvent) => {
     e.preventDefault();
 
+    setState("loading");
+
     const res = await subscribe(email);
 
     if (res.error) {
       setError(res.error);
+      setState("error");
     } else {
-      setSubscribed(true);
+      setState("success");
     }
   };
 
-  if (subscribed) {
+  if (state === "success") {
     return (
       <div className="flex gap-3 items-center">
         <CheckIcon className="text-green-500" size={16} />
@@ -33,12 +40,12 @@ export function NewsletterForm() {
     );
   }
 
-  if (error) {
+  if (state === "error" && error?.message) {
     return <p className="text-red-700">Error: {error.message}</p>;
   }
 
   return (
-    <form action="" onSubmit={submit} className="flex gap-x-4 w-120 max-w-xl">
+    <form action="" onSubmit={submit} className="flex gap-x-4 w-120 max-w-md">
       <Input
         id="email-address"
         name="email"
@@ -51,7 +58,13 @@ export function NewsletterForm() {
         className="flex-1 label:sr-only"
         label="Email address"
       />
-      <Button type="submit" variant="secondary">
+      <Button
+        type="submit"
+        variant="secondary"
+        loadingText="Subscribing..."
+        loading={state === "loading"}
+        icon={MailIcon}
+      >
         Subscribe
       </Button>
     </form>

homepage/design-system/src/app/components/organisms/SocialLinks.tsx

@@ -0,0 +1,51 @@
+import { SiDiscord, SiGithub, SiX } from "@icons-pack/react-simple-icons";
+import { clsx } from "clsx";
+
+export interface SocialLinksProps {
+  github?: string;
+  x?: string;
+  discord?: string;
+}
+
+const socials = [
+  {
+    name: "Github",
+    icon: SiGithub,
+    key: "github",
+    size: 20,
+  },
+  {
+    name: "Discord",
+    icon: SiDiscord,
+    key: "discord",
+    size: 23,
+  },
+  {
+    name: "X",
+    icon: SiX,
+    key: "x",
+    size: 18,
+  },
+];
+
+export function SocialLinks(props: SocialLinksProps & { className?: string }) {
+  return (
+    <div className={clsx(props.className, "inline-flex gap-6 items-center")}>
+      {socials.map(
+        (social) =>
+          props[social.key as keyof SocialLinksProps] && (
+            <a
+              key={social.key}
+              href={props[social.key as keyof SocialLinksProps]}
+              target="_blank"
+              rel="noreferrer"
+              className="flex hover:text-stone-900 hover:dark:text-white"
+            >
+              <social.icon size={social.size} />
+              <span className="sr-only">{social.name}</span>
+            </a>
+          ),
+      )}
+    </div>
+  );
+}

homepage/design-system/src/app/page.tsx

@@ -1,4 +1,5 @@
 import { Prose } from "@components/molecules/Prose";
+import { NewsletterForm } from "@components/organisms/NewsletterForm";
 
 export default function Home() {
   return (
@@ -63,6 +64,12 @@ export default function Home() {
           </Prose>
         </div>
       </div>
+
+      <h2>Newsletter Subscription Form</h2>
+
+      <div className="p-3 border">
+        <NewsletterForm />
+      </div>
     </main>
   );
 }