@insforge/react 1.0.4 → 1.0.5-dev.0

package/dist/components.cjs

@@ -232,7 +232,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment9 = REACT_FRAGMENT_TYPE;
+        var Fragment10 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -291,7 +291,7 @@ var require_react_is_development = __commonJS({
         exports$1.ContextProvider = ContextProvider;
         exports$1.Element = Element;
         exports$1.ForwardRef = ForwardRef;
-        exports$1.Fragment = Fragment9;
+        exports$1.Fragment = Fragment10;
         exports$1.Lazy = Lazy;
         exports$1.Memo = Memo;
         exports$1.Portal = Portal;
@@ -2148,6 +2148,8 @@ var theme = {
     sm: "0.875rem",
     // 14px
     base: "1rem",
+    // 16px
+    lg: "1.125rem",
     // 20px
     "2xl": "1.5rem"
     // 24px
@@ -2179,6 +2181,10 @@ var theme = {
     base: "200ms cubic-bezier(0.4, 0, 0.2, 1)"
   },
   sizes: {
+    input: {
+      height: "2.5rem"
+      // 40px
+    },
     button: {
       height: "2.5rem",
       // 40px for submit
@@ -4694,9 +4700,382 @@ var UserButtonMenuItemIcon = styled.div`
     height: 100%;
   }
 `;
-function UserButton({ afterSignOutUrl = "/", mode = "simple" }) {
+var ProfileModalOverlay = styled.div`
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  padding: ${theme.spacing[4]};
+`;
+var ProfileModalContainer = styled.div`
+  background-color: ${theme.colors.bgWhite};
+  border-radius: ${theme.radius.xl};
+  box-shadow: ${theme.shadow.lg};
+  width: 100%;
+  max-width: 400px;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  font-family: ${theme.fontFamily.base};
+`;
+var ProfileModalHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${theme.spacing[4]} ${theme.spacing[6]};
+  border-bottom: 1px solid ${theme.colors.border};
+`;
+var ProfileModalTitle = styled.h2`
+  font-size: ${theme.fontSize.lg};
+  font-weight: ${theme.fontWeight.semibold};
+  color: ${theme.colors.text};
+  margin: 0;
+`;
+var ProfileModalCloseButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: ${theme.radius.md};
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: ${theme.colors.textSecondary};
+  transition: all ${theme.transition.fast};
+
+  &:hover {
+    background-color: ${theme.colors.bgLight};
+    color: ${theme.colors.text};
+  }
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+`;
+var ProfileModalBody = styled.div`
+  padding: ${theme.spacing[6]};
+  overflow-y: auto;
+  flex: 1;
+`;
+var ProfileAvatarSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: ${theme.spacing[6]};
+`;
+var ProfileAvatar = styled.div`
+  width: 5rem;
+  height: 5rem;
+  border-radius: ${theme.radius.full};
+  background-color: ${theme.colors.primary};
+  color: ${theme.colors.bgWhite};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: ${theme.fontWeight.semibold};
+  font-size: ${theme.fontSize["2xl"]};
+  overflow: hidden;
+`;
+var ProfileAvatarImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+var ProfileFieldsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[4]};
+`;
+var ProfileField = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[1]};
+`;
+var ProfileFieldLabel = styled.label`
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.medium};
+  color: ${theme.colors.textSecondary};
+  text-transform: capitalize;
+`;
+var ProfileFieldValue = styled.div`
+  font-size: ${theme.fontSize.base};
+  color: ${theme.colors.text};
+  padding: ${theme.spacing[2]} 0;
+  word-break: break-word;
+`;
+var ProfileFieldInput = styled.input`
+  width: 100%;
+  height: ${theme.sizes.input.height};
+  padding: 0 ${theme.spacing[3]};
+  border: 1px solid ${theme.colors.border};
+  border-radius: ${theme.radius.md};
+  font-size: ${theme.fontSize.base};
+  font-family: ${theme.fontFamily.base};
+  color: ${theme.colors.text};
+  background-color: ${theme.colors.bgWhite};
+  transition: border-color ${theme.transition.fast};
+
+  &:focus {
+    outline: none;
+    border-color: ${theme.colors.borderFocus};
+  }
+
+  &:disabled {
+    background-color: ${theme.colors.bgLight};
+    color: ${theme.colors.textSecondary};
+    cursor: not-allowed;
+  }
+`;
+var ProfileModalFooter = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${theme.spacing[3]};
+  padding: ${theme.spacing[4]} ${theme.spacing[6]};
+  border-top: 1px solid ${theme.colors.border};
+`;
+var ProfileButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${theme.spacing[2]};
+  height: ${theme.sizes.button.height};
+  padding: 0 ${theme.spacing[4]};
+  border-radius: ${theme.radius.md};
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.medium};
+  font-family: ${theme.fontFamily.base};
+  cursor: pointer;
+  transition: all ${theme.transition.fast};
+
+  ${(props) => props.$primary ? `
+    background-color: ${theme.colors.primary};
+    color: ${theme.colors.bgWhite};
+    border: none;
+
+    &:hover:not(:disabled) {
+      background-color: ${theme.colors.primaryHover};
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  ` : `
+    background-color: ${theme.colors.bgWhite};
+    color: ${theme.colors.text};
+    border: 1px solid ${theme.colors.border};
+
+    &:hover:not(:disabled) {
+      background-color: ${theme.colors.bgLight};
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `}
+`;
+var ProfileSpinner = styled.div`
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid transparent;
+  border-top-color: currentColor;
+  border-radius: ${theme.radius.full};
+  animation: spin 0.6s linear infinite;
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+var READ_ONLY_FIELDS = ["id", "email", "avatar_url", "created_at", "updated_at"];
+var HIDDEN_FIELDS = ["id"];
+function formatFieldLabel(key) {
+  return key.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase();
+}
+function UserProfileModal({ onClose, onError }) {
+  const { user, updateUser, isLoaded } = useInsforge();
+  const [isEditing, setIsEditing] = React2.useState(false);
+  const [isSaving, setIsSaving] = React2.useState(false);
+  const [imageError, setImageError] = React2.useState(false);
+  const [formData, setFormData] = React2.useState({});
+  React2.useEffect(() => {
+    if (user) {
+      const initialData = {
+        name: user.name || ""
+      };
+      if (user.profile) {
+        Object.entries(user.profile).forEach(([key, value]) => {
+          if (!HIDDEN_FIELDS.includes(key) && typeof value === "string") {
+            initialData[key] = value;
+          }
+        });
+      }
+      setFormData(initialData);
+    }
+  }, [user]);
+  React2.useEffect(() => {
+    setImageError(false);
+    const avatarUrl = user?.avatarUrl;
+    if (!avatarUrl) {
+      return;
+    }
+    const checkImageUrl = async () => {
+      try {
+        const response = await fetch(avatarUrl, {
+          method: "HEAD",
+          cache: "no-cache"
+        });
+        if (!response.ok) {
+          setImageError(true);
+        }
+      } catch {
+        setImageError(true);
+      }
+    };
+    void checkImageUrl();
+  }, [user?.avatarUrl]);
+  const handleFieldChange = React2.useCallback((key, value) => {
+    setFormData((prev2) => ({
+      ...prev2,
+      [key]: value
+    }));
+  }, []);
+  const handleSave = React2.useCallback(async () => {
+    if (!user) return;
+    setIsSaving(true);
+    try {
+      const { name, ...dynamicFields } = formData;
+      const updateData = {
+        name
+      };
+      if (Object.keys(dynamicFields).length > 0) {
+        updateData.profile = dynamicFields;
+      }
+      const result = await updateUser(updateData);
+      if (result?.error) {
+        onError?.(result.error);
+      } else {
+        setIsEditing(false);
+      }
+    } catch (error) {
+      onError?.(error instanceof Error ? error.message : "Failed to update profile");
+    } finally {
+      setIsSaving(false);
+    }
+  }, [user, formData, updateUser, onError]);
+  const handleCancel = React2.useCallback(() => {
+    if (user) {
+      const resetData = {
+        name: user.name || ""
+      };
+      if (user.profile) {
+        Object.entries(user.profile).forEach(([key, value]) => {
+          if (!HIDDEN_FIELDS.includes(key) && typeof value === "string") {
+            resetData[key] = value;
+          }
+        });
+      }
+      setFormData(resetData);
+    }
+    setIsEditing(false);
+  }, [user]);
+  const handleOverlayClick = React2.useCallback(
+    (e) => {
+      if (e.target === e.currentTarget) {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  React2.useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        if (isEditing) {
+          handleCancel();
+        } else {
+          onClose();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isEditing, handleCancel, onClose]);
+  if (!isLoaded || !user) {
+    return null;
+  }
+  const initials = user.name ? user.name.charAt(0).toUpperCase() : user.email.split("@")[0].slice(0, 2).toUpperCase();
+  const fields = [];
+  fields.push({ key: "email", value: user.email, readOnly: true });
+  fields.push({
+    key: "name",
+    value: isEditing ? formData.name || "" : user.name || "",
+    readOnly: false
+  });
+  if (user.profile) {
+    Object.entries(user.profile).forEach(([key, value]) => {
+      if (!HIDDEN_FIELDS.includes(key) && typeof value === "string") {
+        fields.push({
+          key,
+          value: isEditing ? formData[key] ?? value : value,
+          readOnly: READ_ONLY_FIELDS.includes(key)
+        });
+      }
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ProfileModalOverlay, { onClick: handleOverlayClick, children: /* @__PURE__ */ jsxRuntime.jsxs(ProfileModalContainer, { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ProfileModalHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ProfileModalTitle, { children: "Profile" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ProfileModalCloseButton, { onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ProfileModalBody, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ProfileAvatarSection, { children: /* @__PURE__ */ jsxRuntime.jsx(ProfileAvatar, { children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsxRuntime.jsx(
+        ProfileAvatarImage,
+        {
+          src: user.avatarUrl,
+          alt: user.name || user.email,
+          onError: () => setImageError(true)
+        }
+      ) : initials }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ProfileFieldsContainer, { children: fields.map(({ key, value, readOnly }) => /* @__PURE__ */ jsxRuntime.jsxs(ProfileField, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ProfileFieldLabel, { children: formatFieldLabel(key) }),
+        isEditing && !readOnly ? /* @__PURE__ */ jsxRuntime.jsx(
+          ProfileFieldInput,
+          {
+            type: "text",
+            value: formData[key] ?? value,
+            onChange: (e) => handleFieldChange(key, e.target.value),
+            disabled: isSaving
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(ProfileFieldValue, { children: value || "-" })
+      ] }, key)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ProfileModalFooter, { children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ProfileButton, { onClick: handleCancel, disabled: isSaving, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ProfileButton, { $primary: true, onClick: handleSave, disabled: isSaving, children: [
+        isSaving && /* @__PURE__ */ jsxRuntime.jsx(ProfileSpinner, {}),
+        isSaving ? "Saving..." : "Save"
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(ProfileButton, { $primary: true, onClick: () => setIsEditing(true), children: "Edit Profile" }) })
+  ] }) });
+}
+function UserButton({
+  afterSignOutUrl = "/",
+  mode = "simple",
+  showProfile = true,
+  onProfileError
+}) {
   const { user } = useInsforge();
   const [isOpen, setIsOpen] = React2.useState(false);
+  const [showProfileModal, setShowProfileModal] = React2.useState(false);
   const [imageError, setImageError] = React2.useState(false);
   const [openUpward, setOpenUpward] = React2.useState(false);
   const [horizontalOffset, setHorizontalOffset] = React2.useState(0);
@@ -4794,10 +5173,32 @@ function UserButton({ afterSignOutUrl = "/", mode = "simple" }) {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(UserButtonMenu, { ref: menuRef, $openUpward: openUpward, $horizontalOffset: horizontalOffset, children: /* @__PURE__ */ jsxRuntime.jsx(SignOutButton, { afterSignOutUrl, children: /* @__PURE__ */ jsxRuntime.jsxs(UserButtonMenuItem, { $signout: true, onClick: () => setIsOpen(false), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(UserButtonMenuItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, {}) }),
-      "Sign out"
-    ] }) }) })
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(UserButtonMenu, { ref: menuRef, $openUpward: openUpward, $horizontalOffset: horizontalOffset, children: [
+      showProfile && /* @__PURE__ */ jsxRuntime.jsxs(
+        UserButtonMenuItem,
+        {
+          onClick: () => {
+            setShowProfileModal(true);
+            setIsOpen(false);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(UserButtonMenuItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, {}) }),
+            "Profile"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(SignOutButton, { afterSignOutUrl, children: /* @__PURE__ */ jsxRuntime.jsxs(UserButtonMenuItem, { $signout: true, onClick: () => setIsOpen(false), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(UserButtonMenuItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, {}) }),
+        "Sign out"
+      ] }) })
+    ] }),
+    showProfileModal && /* @__PURE__ */ jsxRuntime.jsx(
+      UserProfileModal,
+      {
+        onClose: () => setShowProfileModal(false),
+        onError: onProfileError
+      }
+    )
   ] });
 }
 function Protect({
@@ -4946,6 +5347,7 @@ exports.SignUpForm = SignUpForm;
 exports.SignedIn = SignedIn;
 exports.SignedOut = SignedOut;
 exports.UserButton = UserButton;
+exports.UserProfileModal = UserProfileModal;
 exports.VerifyEmail = VerifyEmail;
 exports.VerifyEmailStatus = VerifyEmailStatus;
 //# sourceMappingURL=components.cjs.map