@stackframe/stack 2.3.5 → 2.3.7

package/dist/esm/components/oauth-button.js

@@ -0,0 +1,124 @@
+"use client";
+"use client";
+
+// src/components/oauth-button.tsx
+import { FaGithub, FaFacebook, FaApple } from "react-icons/fa";
+import { useStackApp } from "..";
+import { Button } from "../components-core";
+import { useDesign } from "../providers/design-provider";
+import { jsx, jsxs } from "react/jsx-runtime";
+var iconSize = 22;
+function OAuthButton({
+  provider,
+  type
+}) {
+  const { colors } = useDesign();
+  const stackApp = useStackApp();
+  let style;
+  switch (provider) {
+    case "google": {
+      style = {
+        backgroundColor: "#fff",
+        name: "Google",
+        border: "1px solid #ccc",
+        icon: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize, height: iconSize, viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              fill: "#4285F4",
+              d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              fill: "#34A853",
+              d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              fill: "#FBBC05",
+              d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              fill: "#EA4335",
+              d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+            }
+          ),
+          /* @__PURE__ */ jsx("path", { fill: "none", d: "M1 1h22v22H1z" })
+        ] })
+      };
+      break;
+    }
+    case "github": {
+      style = {
+        backgroundColor: "#111",
+        border: "1px solid #444",
+        name: "GitHub",
+        icon: /* @__PURE__ */ jsx(FaGithub, { color: "#fff", size: iconSize })
+      };
+      break;
+    }
+    case "facebook": {
+      style = {
+        backgroundColor: "#1877F2",
+        name: "Facebook",
+        icon: /* @__PURE__ */ jsx(FaFacebook, { color: "#fff", size: iconSize })
+      };
+      break;
+    }
+    case "apple": {
+      style = {
+        backgroundColor: "#000",
+        name: "Apple",
+        icon: /* @__PURE__ */ jsx(FaApple, { color: "#fff", size: iconSize })
+      };
+      break;
+    }
+    case "microsoft": {
+      style = {
+        backgroundColor: "#2f2f2f",
+        name: "Microsoft",
+        icon: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize, height: iconSize, viewBox: "0 0 21 21", children: [
+          /* @__PURE__ */ jsx("title", { children: "MS-SymbolLockup" }),
+          /* @__PURE__ */ jsx("path", { fill: "#f25022", d: "M1 1h9v9H1z" }),
+          /* @__PURE__ */ jsx("path", { fill: "#00a4ef", d: "M1 11h9v9H1z" }),
+          /* @__PURE__ */ jsx("path", { fill: "#7fba00", d: "M11 1h9v9h-9z" }),
+          /* @__PURE__ */ jsx("path", { fill: "#ffb900", d: "M11 11h9v9h-9z" })
+        ] })
+      };
+      break;
+    }
+    default: {
+      style = {
+        backgroundColor: "#000",
+        name: provider,
+        icon: null
+      };
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      color: style.backgroundColor,
+      style: { border: style.border },
+      onClick: () => stackApp.signInWithOAuth(provider),
+      children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", width: "100%" }, children: [
+        style.icon,
+        /* @__PURE__ */ jsxs("span", { style: { flexGrow: 1 }, children: [
+          type === "signup" ? "Sign up with " : "Sign in with ",
+          style.name
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { visibility: "hidden" }, children: style.icon })
+      ] })
+    }
+  );
+}
+export {
+  OAuthButton as default
+};

package/dist/esm/components/oauth-group.js

@@ -0,0 +1,17 @@
+"use client";
+"use client";
+
+// src/components/oauth-group.tsx
+import { useStackApp } from "../lib/hooks";
+import OAuthButton from "./oauth-button";
+import { jsx } from "react/jsx-runtime";
+function OAuthGroup({
+  type
+}) {
+  const stackApp = useStackApp();
+  const project = stackApp.useProject();
+  return /* @__PURE__ */ jsx("div", { style: { gap: "16px", display: "flex", flexDirection: "column", alignItems: "stretch" }, children: project.oauthProviders.filter((p) => p.enabled).map((p) => /* @__PURE__ */ jsx(OAuthButton, { provider: p.id, type }, p.id)) });
+}
+export {
+  OAuthGroup as default
+};

package/dist/esm/components/password-field.js

@@ -0,0 +1,82 @@
+"use client";
+"use client";
+
+// src/components/password-field.tsx
+import { Input } from "../components-core";
+import { forwardRef, useRef, useState } from "react";
+import { HiEye, HiEyeOff } from "react-icons/hi";
+import { useDesign } from "..";
+import styled from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getIconStyle = (colors) => `
+  color: ${colors.light.secondaryColor};
+
+  html[data-theme='dark'] & {
+    color: ${colors.dark.secondaryColor};
+  }
+`;
+var StyledEyeOff = styled(HiEyeOff)`${(props) => getIconStyle(props.colors)}`;
+var StyledEye = styled(HiEye)`${(props) => getIconStyle(props.colors)}`;
+var PasswordField = forwardRef(({ id, name, ...props }, ref) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { colors } = useDesign();
+  const inputRef = useRef(null);
+  const mergeRef = (node) => {
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+    inputRef.current = node;
+  };
+  const onClickReveal = () => {
+    setIsOpen(!isOpen);
+    const currentInput = inputRef.current;
+    if (currentInput) {
+      currentInput.focus({ preventScroll: true });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "flex" }, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        ref: mergeRef,
+        name,
+        type: isOpen ? "text" : "password",
+        autoComplete: "current-password",
+        required: true,
+        style: { flex: 1 },
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        tabIndex: -1,
+        type: "button",
+        style: {
+          position: "absolute",
+          backgroundColor: "transparent",
+          border: "none",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          display: "flex",
+          alignItems: "center",
+          paddingRight: "12px"
+        },
+        onClick: onClickReveal,
+        "aria-label": isOpen ? "Mask password" : "Reveal password",
+        children: isOpen ? /* @__PURE__ */ jsx(StyledEyeOff, { colors }) : /* @__PURE__ */ jsx(StyledEye, { colors })
+      }
+    )
+  ] });
+});
+PasswordField.displayName = "PasswordField";
+var password_field_default = PasswordField;
+export {
+  password_field_default as default
+};

package/dist/esm/components/password-reset-inner.js

@@ -0,0 +1,93 @@
+"use client";
+"use client";
+
+// src/components/password-reset-inner.tsx
+import { useState } from "react";
+import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
+import { useStackApp } from "..";
+import PasswordField from "./password-field";
+import FormWarningText from "./form-warning";
+import RedirectMessageCard from "./redirect-message-card";
+import MessageCard from "./message-card";
+import CardFrame from "./card-frame";
+import { Button, Label, Text } from "../components-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PasswordResetInner({ code, fullPage = false }) {
+  const [password, setPassword] = useState("");
+  const [passwordError, setPasswordError] = useState("");
+  const [passwordRepeat, setPasswordRepeat] = useState("");
+  const [passwordRepeatError, setPasswordRepeatError] = useState("");
+  const [finished, setFinished] = useState(false);
+  const [resetError, setResetError] = useState(false);
+  const stackApp = useStackApp();
+  const onSubmit = async () => {
+    if (!password) {
+      setPasswordError("Please enter your password");
+      return;
+    }
+    if (!passwordRepeat) {
+      setPasswordRepeatError("Please repeat your password");
+      return;
+    }
+    if (password !== passwordRepeat) {
+      setPasswordRepeatError("Passwords do not match");
+      return;
+    }
+    const passwordError2 = getPasswordError(password);
+    if (passwordError2) {
+      setPasswordError(passwordError2.message);
+      return;
+    }
+    const errorCode = await stackApp.resetPassword({ password, code });
+    if (errorCode) {
+      setResetError(true);
+      return;
+    }
+    setFinished(true);
+  };
+  if (finished) {
+    return /* @__PURE__ */ jsx(RedirectMessageCard, { type: "passwordReset", fullPage });
+  }
+  if (resetError) {
+    return /* @__PURE__ */ jsx(MessageCard, { title: "Failed to reset password", fullPage, children: /* @__PURE__ */ jsx(Text, { children: "Failed to reset password. Please request a new password reset link" }) });
+  }
+  return /* @__PURE__ */ jsxs(CardFrame, { fullPage, children: [
+    /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: "1.5rem" }, children: /* @__PURE__ */ jsx(Text, { size: "xl", as: "h2", children: "Reset Your Password" }) }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "stretch" }, children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "password", children: "New Password" }),
+      /* @__PURE__ */ jsx(
+        PasswordField,
+        {
+          id: "password",
+          name: "password",
+          value: password,
+          onChange: (e) => {
+            setPassword(e.target.value);
+            setPasswordError("");
+            setPasswordRepeatError("");
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(FormWarningText, { text: passwordError }),
+      /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", style: { marginTop: "1rem" }, children: "Repeat New Password" }),
+      /* @__PURE__ */ jsx(
+        PasswordField,
+        {
+          id: "repeat-password",
+          name: "repeat-password",
+          value: passwordRepeat,
+          onChange: (e) => {
+            setPasswordRepeat(e.target.value);
+            setPasswordError("");
+            setPasswordRepeatError("");
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(FormWarningText, { text: passwordRepeatError }),
+      /* @__PURE__ */ jsx(Button, { style: { marginTop: "1.5rem" }, onClick: () => onSubmit(), children: "Reset Password" })
+    ] })
+  ] });
+}
+export {
+  PasswordResetInner as default
+};

package/dist/esm/components/redirect-message-card.js

@@ -0,0 +1,83 @@
+"use client";
+"use client";
+
+// src/components/redirect-message-card.tsx
+import { useRouter } from "next/navigation";
+import { useStackApp } from "..";
+import MessageCard from "./message-card";
+import { Text, Button } from "../components-core";
+import { neverResolve } from "@stackframe/stack-shared/dist/utils/promises";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RedirectMessageCard({
+  type,
+  fullPage = false
+}) {
+  const stackApp = useStackApp();
+  const router = useRouter();
+  let title;
+  let primaryUrl;
+  let secondaryUrl = null;
+  let message = null;
+  let primaryButton;
+  let secondaryButton = null;
+  switch (type) {
+    case "signedIn": {
+      title = "You are already signed in";
+      primaryUrl = stackApp.urls.home;
+      secondaryUrl = stackApp.urls.signOut;
+      primaryButton = "Go to Home";
+      secondaryButton = "Sign Out";
+      break;
+    }
+    case "signedOut": {
+      title = "You are not currently signed in.";
+      primaryUrl = stackApp.urls.home;
+      primaryButton = "Go to Home";
+      break;
+    }
+    case "emailSent": {
+      title = "Email sent!";
+      message = "Please check your inbox. Make sure to check your spam folder.";
+      primaryUrl = stackApp.urls.home;
+      primaryButton = "Go to Home";
+      break;
+    }
+    case "passwordReset": {
+      title = "Password reset successfully!";
+      message = "Your password has been reset. You can now sign in with your new password.";
+      primaryUrl = stackApp.urls.signIn;
+      primaryButton = "Go to Sign In";
+      break;
+    }
+    case "emailVerified": {
+      title = "Email verified!";
+      message = "Your have successfully verified your email.";
+      primaryUrl = stackApp.urls.home;
+      primaryButton = "Go to Home";
+      break;
+    }
+  }
+  return /* @__PURE__ */ jsxs(MessageCard, { title, fullPage, children: [
+    message && /* @__PURE__ */ jsx(Text, { children: message }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: "16px", marginTop: 20 }, children: [
+      secondaryButton && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: async () => {
+            router.push(stackApp.urls.signOut.toString());
+            await neverResolve();
+          },
+          children: secondaryButton
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { onClick: async () => {
+        router.push(primaryUrl.toString());
+        await neverResolve();
+      }, children: primaryButton })
+    ] })
+  ] });
+}
+export {
+  RedirectMessageCard as default
+};

package/dist/esm/components/separator-with-text.js

@@ -0,0 +1,16 @@
+"use client";
+"use client";
+
+// src/components/separator-with-text.tsx
+import { Separator, Text } from "../components-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SeparatorWithText({ text }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", marginTop: "1.5rem", marginBottom: "1.5rem" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(Separator, {}) }),
+    /* @__PURE__ */ jsx(Text, { style: { padding: "0 16px" }, variant: "secondary", size: "sm", children: text }),
+    /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(Separator, {}) })
+  ] });
+}
+export {
+  SeparatorWithText as default
+};

package/dist/esm/components/user-avatar.js

@@ -0,0 +1,14 @@
+// src/components/user-avatar.tsx
+import { RxPerson } from "react-icons/rx";
+import { Avatar, AvatarFallback, AvatarImage, Text } from "..";
+import { jsx, jsxs } from "react/jsx-runtime";
+function UserAvatar(props) {
+  const user = props.user;
+  return /* @__PURE__ */ jsxs(Avatar, { style: { height: props.size, width: props.size }, children: [
+    /* @__PURE__ */ jsx(AvatarImage, { src: user?.profileImageUrl || "" }),
+    /* @__PURE__ */ jsx(AvatarFallback, { children: user ? /* @__PURE__ */ jsx(Text, { style: { fontWeight: 500 }, children: (user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx(RxPerson, { size: props.size }) })
+  ] });
+}
+export {
+  UserAvatar as default
+};

package/dist/esm/components/user-button.js

@@ -0,0 +1,133 @@
+"use client";
+"use client";
+
+// src/components/user-button.tsx
+import React, { Suspense } from "react";
+import { useUser, Text, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, useStackApp, Skeleton } from "..";
+import { RxPerson, RxEnter, RxHalf2, RxFilePlus, RxPencil2 } from "react-icons/rx";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { SECONDARY_FONT_COLORS } from "../utils/constants";
+import UserAvatar from "./user-avatar";
+import { useRouter } from "next/navigation";
+import { typedEntries, typedFromEntries } from "@stackframe/stack-shared/dist/utils/objects";
+import styled from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+var icons = typedFromEntries(typedEntries({
+  RxPencil2,
+  RxPerson,
+  RxEnter,
+  RxHalf2,
+  RxFilePlus
+}).map(([key, value]) => {
+  const styledComponent = styled(value)`
+    color: ${SECONDARY_FONT_COLORS.light};
+
+    html[data-theme='dark'] & {
+      color: ${SECONDARY_FONT_COLORS.dark};
+    }
+  `;
+  return [
+    key,
+    React.createElement(styledComponent, { size: 20 })
+  ];
+}));
+function Item(props) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuItem,
+    {
+      onClick: () => runAsynchronously(props.onClick),
+      style: { display: "flex", gap: "0.5rem", alignItems: "center" },
+      children: [
+        props.icon,
+        /* @__PURE__ */ jsx(Text, { children: props.text })
+      ]
+    }
+  );
+}
+function UserButton(props) {
+  return /* @__PURE__ */ jsx(
+    Suspense,
+    {
+      fallback: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(UserButtonInnerInner, { ...props, user: null }) }),
+      children: /* @__PURE__ */ jsx(UserButtonInner, { ...props })
+    }
+  );
+}
+function UserButtonInner(props) {
+  const user = useUser();
+  return /* @__PURE__ */ jsx(UserButtonInnerInner, { ...props, user });
+}
+function UserButtonInnerInner(props) {
+  const user = props.user;
+  const app = useStackApp();
+  const router = useRouter();
+  const textStyles = {
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx(UserAvatar, { user }),
+      user && props.showUserInfo && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
+        /* @__PURE__ */ jsx(Text, { style: textStyles, children: user.displayName }),
+        /* @__PURE__ */ jsx(Text, { style: { ...textStyles, fontWeight: 400 }, variant: "secondary", size: "sm", children: user.primaryEmail })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { style: { zIndex: 1500 }, children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx(UserAvatar, { user }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          user && /* @__PURE__ */ jsx(Text, { children: user.displayName }),
+          user && /* @__PURE__ */ jsx(Text, { variant: "secondary", size: "sm", style: { fontWeight: 400 }, children: user.primaryEmail }),
+          !user && /* @__PURE__ */ jsx(Text, { variant: "secondary", children: "Not signed in" })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      user && /* @__PURE__ */ jsx(
+        Item,
+        {
+          text: "Account settings",
+          onClick: () => runAsynchronously(router.push(app.urls.accountSettings)),
+          icon: icons.RxPerson
+        }
+      ),
+      !user && /* @__PURE__ */ jsx(
+        Item,
+        {
+          text: "Sign in",
+          onClick: () => runAsynchronously(router.push(app.urls.signIn)),
+          icon: icons.RxPerson
+        }
+      ),
+      !user && /* @__PURE__ */ jsx(
+        Item,
+        {
+          text: "Sign up",
+          onClick: () => runAsynchronously(router.push(app.urls.signUp)),
+          icon: icons.RxPencil2
+        }
+      ),
+      user && props.extraItems && props.extraItems.map((item, index) => /* @__PURE__ */ jsx(Item, { ...item }, index)),
+      props.colorModeToggle && /* @__PURE__ */ jsx(
+        Item,
+        {
+          text: "Toggle theme",
+          onClick: props.colorModeToggle,
+          icon: icons.RxHalf2
+        }
+      ),
+      user && /* @__PURE__ */ jsx(
+        Item,
+        {
+          text: "Sign out",
+          onClick: () => user.signOut(),
+          icon: icons.RxEnter
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  UserButton as default
+};

package/dist/esm/components-core/avatar.js

@@ -0,0 +1,56 @@
+// src/components-core/avatar.tsx
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import styled from "styled-components";
+import { useDesign } from "..";
+import { jsx } from "react/jsx-runtime";
+var StyledAvatar = styled(AvatarPrimitive.Root)`
+  position: relative;
+  display: flex;
+  height: 2rem;
+  width: 2rem;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 9999px;
+`;
+var Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(StyledAvatar, { ref, className, ...props }));
+Avatar.displayName = "Avatar";
+var StyledAvatarImage = styled(AvatarPrimitive.Image)`
+  aspect-ratio: 1 / 1;
+  height: 100%;
+  width: 100%;
+`;
+var AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(StyledAvatarImage, { ref, className, ...props }));
+AvatarImage.displayName = "AvatarImage";
+var StyledAvatarFallback = styled(AvatarPrimitive.Fallback)`
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  
+  background-color: ${({ $colors }) => $colors.light.secondaryColor};
+
+  html[data-theme='dark'] & {
+    background-color: ${({ $colors }) => $colors.dark.secondaryColor};
+  }
+`;
+var AvatarFallback = React.forwardRef(({ className, ...props }, ref) => {
+  const { colors } = useDesign();
+  return /* @__PURE__ */ jsx(
+    StyledAvatarFallback,
+    {
+      ref,
+      className,
+      $colors: colors,
+      ...props
+    }
+  );
+});
+AvatarFallback.displayName = "AvatarFallback";
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+};