jazz-tools 0.14.27 → 0.15.0

package/dist/react/index.js

@@ -0,0 +1,700 @@
+"use client";
+
+// src/react/provider.tsx
+import {
+  JazzBrowserContextManager
+} from "jazz-tools/browser";
+import { JazzContext, JazzContextManagerContext } from "jazz-tools/react-core";
+import React, { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+function JazzReactProvider({
+  children,
+  guestMode,
+  sync,
+  storage,
+  AccountSchema,
+  defaultProfileName,
+  onLogOut,
+  logOutReplacement,
+  onAnonymousAccountDiscarded,
+  enableSSR
+}) {
+  const [contextManager] = React.useState(
+    () => new JazzBrowserContextManager({
+      useAnonymousFallback: enableSSR
+    })
+  );
+  const onLogOutRefCallback = useRefCallback(onLogOut);
+  const logOutReplacementRefCallback = useRefCallback(logOutReplacement);
+  const onAnonymousAccountDiscardedRefCallback = useRefCallback(
+    onAnonymousAccountDiscarded
+  );
+  const logoutReplacementActiveRef = useRef(false);
+  logoutReplacementActiveRef.current = Boolean(logOutReplacement);
+  const value = React.useSyncExternalStore(
+    React.useCallback(
+      (callback) => {
+        const props = {
+          AccountSchema,
+          guestMode,
+          sync,
+          storage,
+          defaultProfileName,
+          onLogOut: onLogOutRefCallback,
+          logOutReplacement: logoutReplacementActiveRef.current ? logOutReplacementRefCallback : void 0,
+          onAnonymousAccountDiscarded: onAnonymousAccountDiscardedRefCallback
+        };
+        if (contextManager.propsChanged(props)) {
+          contextManager.createContext(props).catch((error) => {
+            console.error("Error creating Jazz browser context:", error);
+          });
+        }
+        return contextManager.subscribe(callback);
+      },
+      [sync, guestMode].concat(storage)
+    ),
+    () => contextManager.getCurrentValue(),
+    () => contextManager.getCurrentValue()
+  );
+  useEffect(() => {
+    if (process.env.NODE_ENV === "development") return;
+    return () => {
+      contextManager.done();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(JazzContext.Provider, { value, children: /* @__PURE__ */ jsx(JazzContextManagerContext.Provider, { value: contextManager, children: value && children }) });
+}
+function useRefCallback(callback) {
+  const callbackRef = React.useRef(callback);
+  callbackRef.current = callback;
+  return useRef(
+    (...args) => callbackRef.current?.(...args)
+  ).current;
+}
+
+// src/react/hooks.tsx
+import { consumeInviteLinkFromWindowLocation } from "jazz-tools/browser";
+import { useEffect as useEffect2 } from "react";
+import { useJazzContext } from "jazz-tools/react-core";
+import { useCoState, useAuthSecretStorage } from "jazz-tools/react-core";
+import {
+  experimental_useInboxSender,
+  useJazzContext as useJazzContext2,
+  useAccount
+} from "jazz-tools/react-core";
+function useAcceptInvite({
+  invitedObjectSchema,
+  onAccept,
+  forValueHint
+}) {
+  const context = useJazzContext();
+  if (!("me" in context)) {
+    throw new Error(
+      "useAcceptInvite can't be used in a JazzProvider with auth === 'guest'."
+    );
+  }
+  useEffect2(() => {
+    const handleInvite = () => {
+      const result = consumeInviteLinkFromWindowLocation({
+        as: context.me,
+        invitedObjectSchema,
+        forValueHint
+      });
+      result.then((result2) => result2 && onAccept(result2?.valueID)).catch((e) => {
+        console.error("Failed to accept invite", e);
+      });
+    };
+    handleInvite();
+    window.addEventListener("hashchange", handleInvite);
+    return () => window.removeEventListener("hashchange", handleInvite);
+  }, [onAccept]);
+}
+
+// src/react/index.ts
+import { createInviteLink, parseInviteLink } from "jazz-tools/browser";
+
+// src/react/auth/Clerk.tsx
+import { JazzClerkAuth } from "jazz-tools";
+import {
+  InMemoryKVStore,
+  KvStoreContext
+} from "jazz-tools";
+import { LocalStorageKVStore } from "jazz-tools/browser";
+import { useAuthSecretStorage as useAuthSecretStorage2, useJazzContext as useJazzContext3 } from "jazz-tools/react-core";
+import { useEffect as useEffect3, useMemo, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function useJazzClerkAuth(clerk) {
+  const context = useJazzContext3();
+  const authSecretStorage = useAuthSecretStorage2();
+  if ("guest" in context) {
+    throw new Error("Clerk auth is not supported in guest mode");
+  }
+  const authMethod = useMemo(() => {
+    return new JazzClerkAuth(context.authenticate, authSecretStorage);
+  }, []);
+  useEffect3(() => {
+    return authMethod.registerListener(clerk);
+  }, []);
+}
+function RegisterClerkAuth(props) {
+  useJazzClerkAuth(props.clerk);
+  return props.children;
+}
+var JazzReactProviderWithClerk = (props) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  useEffect3(() => {
+    setupKvStore();
+    JazzClerkAuth.initializeAuth(props.clerk).then(() => {
+      setIsLoaded(true);
+    });
+  }, []);
+  if (!isLoaded) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2(JazzReactProvider, { ...props, logOutReplacement: props.clerk.signOut, children: /* @__PURE__ */ jsx2(RegisterClerkAuth, { clerk: props.clerk, children: props.children }) });
+};
+function setupKvStore() {
+  KvStoreContext.getInstance().initialize(
+    typeof window === "undefined" ? new InMemoryKVStore() : new LocalStorageKVStore()
+  );
+}
+
+// src/react/auth/DemoAuth.tsx
+import { useDemoAuth } from "jazz-tools/react-core";
+import { useState as useState2 } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var DemoAuthBasicUI = (props) => {
+  const auth = useDemoAuth();
+  const [username, setUsername] = useState2("");
+  const darkMode = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false;
+  if (auth.state === "signedIn") return props.children ?? null;
+  const { signUp, logIn, existingUsers } = auth;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        minHeight: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        width: "18rem",
+        maxWidth: "calc(100vw - 2rem)",
+        gap: "2rem",
+        margin: "0 auto"
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "h1",
+          {
+            style: {
+              color: darkMode ? "#fff" : "#000",
+              textAlign: "center",
+              fontSize: "1.5rem",
+              fontWeight: "bold"
+            },
+            children: props.appName
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "0.5rem"
+            },
+            onSubmit: (e) => {
+              e.preventDefault();
+              signUp(username);
+            },
+            children: [
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  placeholder: "Display name",
+                  value: username,
+                  onChange: (e) => setUsername(e.target.value),
+                  autoComplete: "webauthn",
+                  style: {
+                    border: darkMode ? "1px solid #444" : "1px solid #ddd",
+                    padding: "11px 8px",
+                    borderRadius: "6px",
+                    background: darkMode ? "#000" : "#fff",
+                    color: darkMode ? "#fff" : "#000"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "submit",
+                  value: "Sign up",
+                  style: {
+                    padding: "13px 5px",
+                    border: "none",
+                    borderRadius: "6px",
+                    cursor: "pointer",
+                    background: darkMode ? "#444" : "#ddd",
+                    color: darkMode ? "#fff" : "#000"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        existingUsers.length > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "0.5rem"
+            },
+            children: [
+              /* @__PURE__ */ jsx3(
+                "p",
+                {
+                  style: {
+                    color: darkMode ? "#e2e2e2" : "#000",
+                    textAlign: "center",
+                    paddingTop: "0.5rem",
+                    borderTop: "1px solid",
+                    borderColor: darkMode ? "#111" : "#e2e2e2"
+                  },
+                  children: "Log in as"
+                }
+              ),
+              existingUsers.map((user) => /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  onClick: () => logIn(user),
+                  type: "button",
+                  "aria-label": `Log in as ${user}`,
+                  style: {
+                    background: darkMode ? "#0d0d0d" : "#eee",
+                    color: darkMode ? "#fff" : "#000",
+                    padding: "0.5rem",
+                    border: "none",
+                    borderRadius: "6px"
+                  },
+                  children: user
+                },
+                user
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/react/auth/PasskeyAuth.tsx
+import { BrowserPasskeyAuth } from "jazz-tools/browser";
+import {
+  useAuthSecretStorage as useAuthSecretStorage3,
+  useIsAuthenticated,
+  useJazzContext as useJazzContext4
+} from "jazz-tools/react-core";
+import { useMemo as useMemo2, useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function usePasskeyAuth({
+  appName,
+  appHostname
+}) {
+  const context = useJazzContext4();
+  const authSecretStorage = useAuthSecretStorage3();
+  if ("guest" in context) {
+    throw new Error("Passkey auth is not supported in guest mode");
+  }
+  const authMethod = useMemo2(() => {
+    return new BrowserPasskeyAuth(
+      context.node.crypto,
+      context.authenticate,
+      authSecretStorage,
+      appName,
+      appHostname
+    );
+  }, [appName, appHostname, authSecretStorage]);
+  const isAuthenticated = useIsAuthenticated();
+  return {
+    state: isAuthenticated ? "signedIn" : "anonymous",
+    logIn: authMethod.logIn,
+    signUp: authMethod.signUp
+  };
+}
+var PasskeyAuthBasicUI = (props) => {
+  const [username, setUsername] = useState3("");
+  const [error, setError] = useState3(null);
+  const auth = usePasskeyAuth({
+    appName: props.appName,
+    appHostname: props.appHostname
+  });
+  if (auth.state === "signedIn") {
+    return props.children ?? null;
+  }
+  const { logIn, signUp } = auth;
+  function handleError(error2) {
+    if (error2.cause instanceof Error) {
+      setError(error2.cause.message);
+    } else {
+      setError(error2.message);
+    }
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        width: "100vw",
+        height: "100vh",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        alignItems: error ? "inherit" : "center"
+      },
+      children: [
+        error && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            style: {
+              color: "red",
+              width: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "end",
+              padding: "1rem"
+            },
+            children: error
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              width: "18rem",
+              display: "flex",
+              flexDirection: "column",
+              gap: "2rem"
+            },
+            children: [
+              /* @__PURE__ */ jsxs2(
+                "form",
+                {
+                  style: {
+                    width: "18rem",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "0.5rem"
+                  },
+                  onSubmit: (e) => {
+                    e.preventDefault();
+                    setError(null);
+                    signUp(username).catch(handleError);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx4(
+                      "input",
+                      {
+                        placeholder: "Display name",
+                        value: username,
+                        onChange: (e) => setUsername(e.target.value),
+                        autoComplete: "webauthn",
+                        style: {
+                          border: "2px solid #000",
+                          padding: "11px 8px",
+                          borderRadius: "6px"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4(
+                      "input",
+                      {
+                        type: "submit",
+                        value: "Sign up",
+                        style: {
+                          background: "#000",
+                          color: "#fff",
+                          padding: "13px 5px",
+                          border: "none",
+                          borderRadius: "6px",
+                          cursor: "pointer"
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  onClick: () => {
+                    setError(null);
+                    logIn().catch(handleError);
+                  },
+                  style: {
+                    background: "#000",
+                    color: "#fff",
+                    padding: "13px 5px",
+                    border: "none",
+                    borderRadius: "6px",
+                    cursor: "pointer"
+                  },
+                  children: "Log in with existing account"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/react/auth/PassphraseAuth.tsx
+import { usePassphraseAuth } from "jazz-tools/react-core";
+import { useState as useState4 } from "react";
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function PassphraseAuthBasicUI(props) {
+  const auth = usePassphraseAuth({
+    wordlist: props.wordlist
+  });
+  const [step, setStep] = useState4("initial");
+  const [loginPassphrase, setLoginPassphrase] = useState4("");
+  const [isCopied, setIsCopied] = useState4(false);
+  if (auth.state === "signedIn") {
+    return props.children ?? null;
+  }
+  const handleCreateAccount = async () => {
+    setStep("create");
+  };
+  const handleLogin = () => {
+    setStep("login");
+  };
+  const handleBack = () => {
+    setStep("initial");
+    setLoginPassphrase("");
+  };
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(auth.passphrase);
+    setIsCopied(true);
+  };
+  const handleLoginSubmit = async () => {
+    await auth.logIn(loginPassphrase);
+    setStep("initial");
+    setLoginPassphrase("");
+  };
+  const handleNext = async () => {
+    await auth.signUp();
+    setStep("initial");
+    setLoginPassphrase("");
+  };
+  return /* @__PURE__ */ jsx5("div", { style: containerStyle, children: /* @__PURE__ */ jsxs3("div", { style: cardStyle, children: [
+    step === "initial" && /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx5("h1", { style: headingStyle, children: props.appName }),
+      /* @__PURE__ */ jsx5("button", { onClick: handleCreateAccount, style: primaryButtonStyle, children: "Create new account" }),
+      /* @__PURE__ */ jsx5("button", { onClick: handleLogin, style: secondaryButtonStyle, children: "Log in" })
+    ] }),
+    step === "create" && /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx5("h1", { style: headingStyle, children: "Your Passphrase" }),
+      /* @__PURE__ */ jsx5(
+        "p",
+        {
+          style: {
+            fontSize: "0.875rem",
+            color: "#4b5563",
+            textAlign: "center",
+            marginBottom: "1rem"
+          },
+          children: "Please copy and store this passphrase somewhere safe. You'll need it to log in."
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "textarea",
+        {
+          readOnly: true,
+          value: auth.passphrase,
+          style: textareaStyle,
+          rows: 5
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            gap: "1rem"
+          },
+          children: [
+            /* @__PURE__ */ jsx5("button", { onClick: handleBack, style: secondaryButtonStyle, children: "Back" }),
+            /* @__PURE__ */ jsx5("button", { onClick: handleCopy, style: primaryButtonStyle, children: isCopied ? "Copied!" : "Copy Passphrase" }),
+            /* @__PURE__ */ jsx5("button", { onClick: handleNext, style: primaryButtonStyle, children: "I have saved it!" })
+          ]
+        }
+      )
+    ] }),
+    step === "login" && /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx5("h1", { style: headingStyle, children: "Log In" }),
+      /* @__PURE__ */ jsx5(
+        "textarea",
+        {
+          value: loginPassphrase,
+          onChange: (e) => setLoginPassphrase(e.target.value),
+          placeholder: "Enter your passphrase",
+          style: textareaStyle,
+          rows: 5
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            gap: "1rem"
+          },
+          children: [
+            /* @__PURE__ */ jsx5("button", { onClick: handleBack, style: secondaryButtonStyle, children: "Back" }),
+            /* @__PURE__ */ jsx5("button", { onClick: handleLoginSubmit, style: primaryButtonStyle, children: "Log In" })
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+var containerStyle = {
+  minHeight: "100vh",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "#f3f4f6"
+};
+var cardStyle = {
+  backgroundColor: "white",
+  padding: "2rem",
+  borderRadius: "0.5rem",
+  boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+  width: "24rem"
+};
+var buttonStyle = {
+  width: "100%",
+  padding: "0.5rem 1rem",
+  borderRadius: "0.25rem",
+  fontWeight: "bold",
+  cursor: "pointer",
+  marginBottom: "1rem"
+};
+var primaryButtonStyle = {
+  ...buttonStyle,
+  backgroundColor: "black",
+  color: "white",
+  border: "none"
+};
+var secondaryButtonStyle = {
+  ...buttonStyle,
+  backgroundColor: "white",
+  color: "black",
+  border: "1px solid black"
+};
+var headingStyle = {
+  color: "black",
+  fontSize: "1.5rem",
+  fontWeight: "bold",
+  textAlign: "center",
+  marginBottom: "1rem"
+};
+var textareaStyle = {
+  width: "100%",
+  padding: "0.5rem",
+  border: "1px solid #d1d5db",
+  borderRadius: "0.25rem",
+  marginBottom: "1rem",
+  boxSizing: "border-box"
+};
+
+// src/react/auth/auth.ts
+import {
+  useIsAuthenticated as useIsAuthenticated2,
+  useDemoAuth as useDemoAuth2,
+  usePassphraseAuth as usePassphraseAuth2
+} from "jazz-tools/react-core";
+
+// src/react/media.tsx
+import { ImageDefinition } from "jazz-tools";
+import { useEffect as useEffect4, useState as useState5 } from "react";
+function useProgressiveImg({
+  image,
+  maxWidth,
+  targetWidth
+}) {
+  const [current, setCurrent] = useState5(void 0);
+  useEffect4(() => {
+    let lastHighestRes;
+    if (!image) return;
+    const unsub = image.subscribe({}, (update) => {
+      const highestRes = ImageDefinition.highestResAvailable(update, {
+        maxWidth,
+        targetWidth
+      });
+      if (highestRes) {
+        if (highestRes.res !== lastHighestRes) {
+          lastHighestRes = highestRes.res;
+          const blob = highestRes.stream.toBlob();
+          if (blob) {
+            const blobURI = URL.createObjectURL(blob);
+            setCurrent({ src: blobURI, res: highestRes.res });
+            return () => {
+              setTimeout(() => URL.revokeObjectURL(blobURI), 200);
+            };
+          }
+        }
+      } else {
+        setCurrent({
+          src: update?.placeholderDataURL,
+          res: "placeholder"
+        });
+      }
+    });
+    return unsub;
+  }, [image?.id, maxWidth]);
+  return {
+    src: current?.src,
+    res: current?.res,
+    originalSize: image?.originalSize
+  };
+}
+function ProgressiveImg({
+  children,
+  image,
+  maxWidth,
+  targetWidth
+}) {
+  const result = useProgressiveImg({ image, maxWidth, targetWidth });
+  return result ? children(result) : null;
+}
+
+// src/react/index.ts
+import { createImage } from "jazz-tools/browser-media-images";
+export {
+  DemoAuthBasicUI,
+  JazzReactProvider,
+  JazzReactProviderWithClerk,
+  PasskeyAuthBasicUI,
+  PassphraseAuthBasicUI,
+  ProgressiveImg,
+  createImage,
+  createInviteLink,
+  experimental_useInboxSender,
+  parseInviteLink,
+  useAcceptInvite,
+  useAccount,
+  useAuthSecretStorage,
+  useCoState,
+  useDemoAuth2 as useDemoAuth,
+  useIsAuthenticated2 as useIsAuthenticated,
+  useJazzContext2 as useJazzContext,
+  usePasskeyAuth,
+  usePassphraseAuth2 as usePassphraseAuth,
+  useProgressiveImg
+};
+//# sourceMappingURL=index.js.map