@sanvika/auth 1.0.3 → 1.0.5

package/SanvikaAccountButton.js

@@ -1,295 +0,0 @@
-"use client";
-// ============================================================
-// SanvikaAccountButton — Drop-in navbar button for all Sanvika apps
-//
-// States:
-//   loading       → skeleton placeholder (no flash)
-//   guest         → "Account" button → redirects to Sanvika SSO
-//   logged-in     → user image + firstName → dropdown (Dashboard + Logout)
-//
-// Requirements:
-//   1. Wrap your root layout with <SanvikaAuthProvider ...>
-//   2. Drop <SanvikaAccountButton /> anywhere in your navbar
-//   No other setup needed.
-//
-// Props:
-//   text              — button label when guest (default: "Account")
-//   hideTextOnMobile  — hides text on small screens (default: false)
-//   onLoginClick      — optional override for login click (default: redirectToSSO)
-//   onProfileClick    — optional override for profile click (default: dashboardPath)
-//   onboardingPath    — where to redirect if user.status === "onboarding" (default: null)
-//   className         — extra CSS class for outer wrapper
-// ============================================================
-
-import { useEffect, useRef, useState } from "react";
-import { useSanvikaAuth } from "./SanvikaAuthProvider.js";
-import { DEFAULT_AVATAR_SVG } from "./constants.js";
-import styles from "./SanvikaAccountButton.module.css";
-
-// ─── SVG Icons ─────────────────────────────────────────────────────────────
-
-function UserIcon({ size = 18 }) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-      <circle cx="12" cy="7" r="4" />
-    </svg>
-  );
-}
-
-function ChevronIcon({ open }) {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2.5"
-      strokeLinecap="round"
-      style={{
-        transform: open ? "rotate(180deg)" : "rotate(0deg)",
-        transition: "transform 0.2s",
-      }}
-    >
-      <polyline points="6 9 12 15 18 9" />
-    </svg>
-  );
-}
-
-function DashboardIcon() {
-  return (
-    <svg
-      width="15"
-      height="15"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-    >
-      <rect x="3" y="3" width="7" height="7" />
-      <rect x="14" y="3" width="7" height="7" />
-      <rect x="3" y="14" width="7" height="7" />
-      <rect x="14" y="14" width="7" height="7" />
-    </svg>
-  );
-}
-
-function LogoutIcon() {
-  return (
-    <svg
-      width="15"
-      height="15"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-    >
-      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-      <polyline points="16 17 21 12 16 7" />
-      <line x1="21" y1="12" x2="9" y2="12" />
-    </svg>
-  );
-}
-
-// ─── Main Component ────────────────────────────────────────────────────────
-
-export default function SanvikaAccountButton({
-  text = "Account",
-  hideTextOnMobile = false,
-  onLoginClick,
-  onProfileClick,
-  onboardingPath = null,
-  className = "",
-}) {
-  const {
-    user,
-    loading,
-    isLoggedIn,
-    logout,
-    redirectToLogin,
-    dashboardPath,
-    updateUser,
-  } = useSanvikaAuth();
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [imgError, setImgError] = useState(false);
-  const [prevImage, setPrevImage] = useState(user?.image);
-  const wrapperRef = useRef(null);
-
-  // Derived state — reset imgError when image changes
-  if (user?.image !== prevImage) {
-    setPrevImage(user?.image);
-    setImgError(false);
-  }
-
-  // Listen for profileUpdated event → refresh user in context
-  useEffect(() => {
-    if (!user) return;
-    let disposed = false;
-    const handleProfileUpdated = async () => {
-      if (disposed) return;
-      try {
-        const stored = localStorage.getItem("sanvika_user");
-        if (stored) updateUser(JSON.parse(stored));
-      } catch {
-        /* ignore */
-      }
-    };
-    window.addEventListener("profileUpdated", handleProfileUpdated);
-    return () => {
-      disposed = true;
-      window.removeEventListener("profileUpdated", handleProfileUpdated);
-    };
-  }, [user, updateUser]);
-
-  // Close dropdown on outside click
-  useEffect(() => {
-    if (!dropdownOpen) return;
-    function handleOutside(e) {
-      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
-        setDropdownOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleOutside);
-    return () => document.removeEventListener("mousedown", handleOutside);
-  }, [dropdownOpen]);
-
-  // ── Loading skeleton ─────────────────────────────────────────────────
-  if (loading) {
-    return <div className={styles.skeleton} aria-hidden="true" />;
-  }
-
-  // ── Guest state ──────────────────────────────────────────────────────
-  if (!isLoggedIn) {
-    return (
-      <button
-        className={`${styles.guestBtn} ${className}`}
-        onClick={() => {
-          if (onLoginClick) {
-            onLoginClick();
-          } else {
-            redirectToLogin(window.location.pathname);
-          }
-        }}
-        aria-label="Login or Sign Up"
-      >
-        <span className={styles.iconWrap}>
-          <UserIcon size={18} />
-        </span>
-        <span
-          className={
-            hideTextOnMobile ? styles.hideTextOnMobile : styles.textWrap
-          }
-        >
-          {text}
-        </span>
-      </button>
-    );
-  }
-
-  // ── Logged-in state ──────────────────────────────────────────────────
-  const displayName = user.firstName || user.mobile?.slice(-4) || "Me";
-  const imageSrc = !imgError && user.image ? user.image : DEFAULT_AVATAR_SVG;
-
-  // Profile click — onboarding check
-  const handleProfileClick = () => {
-    if (onProfileClick) return onProfileClick();
-    if (onboardingPath && user.status === "onboarding") {
-      window.location.href = onboardingPath;
-    } else {
-      window.location.href = dashboardPath;
-    }
-  };
-
-  return (
-    <div ref={wrapperRef} className={`${styles.wrapper} ${className}`}>
-      {/* Avatar + Name button */}
-      <button
-        className={styles.profileBtn}
-        onClick={() => setDropdownOpen((o) => !o)}
-        onDoubleClick={handleProfileClick}
-        aria-label="Account menu"
-        aria-expanded={dropdownOpen}
-      >
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
-          src={imageSrc}
-          alt={displayName}
-          className={styles.avatar}
-          onError={() => setImgError(true)}
-        />
-        <span
-          className={
-            hideTextOnMobile ? styles.hideTextOnMobile : styles.textWrap
-          }
-        >
-          {displayName}
-        </span>
-        <ChevronIcon open={dropdownOpen} />
-      </button>
-
-      {/* Dropdown */}
-      {dropdownOpen && (
-        <div className={styles.dropdown} role="menu">
-          {/* User info header */}
-          <div className={styles.dropdownHeader}>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={imageSrc}
-              alt={displayName}
-              className={styles.dropdownAvatar}
-              onError={() => setImgError(true)}
-            />
-            <div>
-              <div className={styles.dropdownName}>
-                {[user.firstName, user.lastName].filter(Boolean).join(" ")}
-              </div>
-              <div className={styles.dropdownMobile}>+91 {user.mobile}</div>
-            </div>
-          </div>
-          <div className={styles.divider} />
-
-          {/* Dashboard link */}
-          <a
-            href={
-              onboardingPath && user.status === "onboarding"
-                ? onboardingPath
-                : dashboardPath
-            }
-            className={styles.dropdownItem}
-            role="menuitem"
-            onClick={() => setDropdownOpen(false)}
-          >
-            <DashboardIcon />
-            <span>Dashboard</span>
-          </a>
-
-          {/* Logout */}
-          <button
-            className={`${styles.dropdownItem} ${styles.logoutItem}`}
-            role="menuitem"
-            onClick={async () => {
-              setDropdownOpen(false);
-              await logout();
-              window.location.href = "/";
-            }}
-          >
-            <LogoutIcon />
-            <span>Logout</span>
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}

package/SanvikaAccountButton.module.css

@@ -1,418 +0,0 @@
-/* ============================================================
-   SanvikaAccountButton — Component Styles
-   
-   DESIGN DECISION:
-   - Guest button (Login/Account): Sanvika brand colors HARDCODED
-     → Always purple, regardless of host project's theme
-     → CSS var with fallback: var(--sanvika-brand-color, #4f46e5)
-   - Profile button + Dropdown: host project theme vars + fallbacks
-     → var(--card-bg, #fff) — adapts if host has theme system
-   
-   clamp() for fluid sizing, 44px touch targets, CSS Modules only.
-   ============================================================ */
-
-/* ── Shimmer keyframe ───────────────────────────────────────── */
-@keyframes shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-/* ── Loading Skeleton ───────────────────────────────────────── */
-.skeleton {
-  width: clamp(72px, 20vw, 96px);
-  height: clamp(34px, 8vw, 40px);
-  border-radius: 8px;
-  background: linear-gradient(
-    90deg,
-    var(--skeleton-base-color, #d0d0d0) 25%,
-    var(--skeleton-highlight-color, #f0f0f0) 50%,
-    var(--skeleton-base-color, #d0d0d0) 75%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 1.4s infinite;
-  display: inline-block;
-}
-
-/* ── Wrapper (logged-in state relative anchor) ──────────────── */
-.wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-/* ── Guest Button ───────────────────────────────────────────── */
-/* Sanvika brand identity — always purple, self-contained */
-.guestBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: clamp(6px, 2vw, 8px) clamp(10px, 3vw, 16px);
-  min-height: 44px; /* Touch target rule */
-  min-width: 44px;
-  background: var(--sanvika-brand-color, #4f46e5);
-  color: #ffffff;
-  border: none;
-  border-radius: 8px;
-  font-size: clamp(13px, 3vw, 14px);
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    background-color 0.3s ease,
-    color 0.3s ease;
-  white-space: nowrap;
-}
-
-.guestBtn:hover {
-  background: var(--sanvika-brand-hover, #4338ca);
-}
-
-.iconWrap {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-/* ── Profile Button (logged-in) ─────────────────────────────── */
-/* Adapts to host project theme via vars + fallbacks */
-.profileBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  padding: 5px 10px 5px 5px;
-  min-height: 44px; /* Touch target rule */
-  background: var(--muted-bg, #f5f5f5);
-  border: 1px solid var(--border-color-light, #e5e7eb);
-  border-radius: 99px;
-  font-size: clamp(13px, 3vw, 14px);
-  font-weight: 600;
-  cursor: pointer;
-  color: var(--text-color, #1a1a1a);
-  transition:
-    background-color 0.3s ease,
-    border-color 0.3s ease,
-    color 0.3s ease;
-  white-space: nowrap;
-}
-
-.profileBtn:hover {
-  background: var(--hover-color, #ebebeb);
-}
-
-/* ── Avatar (nav button) ────────────────────────────────────── */
-.avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid var(--sanvika-brand-color, #4f46e5);
-  flex-shrink: 0;
-}
-
-/* ── Text spans ─────────────────────────────────────────────── */
-.textWrap {
-  display: inline;
-}
-
-.hideTextOnMobile {
-  display: none;
-}
-
-@media (min-width: 500px) {
-  .hideTextOnMobile {
-    display: inline;
-  }
-}
-
-/* ── Dropdown ───────────────────────────────────────────────── */
-/* Adapts to host project theme */
-.dropdown {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  min-width: clamp(200px, 60vw, 240px);
-  background: var(--card-bg, #ffffff);
-  border: 1px solid var(--border-color-light, #e5e7eb);
-  border-radius: 12px;
-  box-shadow: 0 8px 24px var(--shadow-color, rgba(0, 0, 0, 0.12));
-  z-index: 9999;
-  overflow: hidden;
-  transition:
-    background-color 0.3s ease,
-    border-color 0.3s ease;
-}
-
-.dropdownHeader {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 14px 16px;
-  background: var(--section-bg, #fafafa);
-  transition: background-color 0.3s ease;
-}
-
-.dropdownAvatar {
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid var(--sanvika-brand-color, #4f46e5);
-  flex-shrink: 0;
-}
-
-.dropdownName {
-  font-size: clamp(13px, 3vw, 14px);
-  font-weight: 700;
-  color: var(--text-color, #1a1a1a);
-  line-height: 1.3;
-  transition: color 0.3s ease;
-}
-
-.dropdownMobile {
-  font-size: clamp(11px, 2.5vw, 12px);
-  color: var(--secondary-text-color, #888888);
-  margin-top: 2px;
-  transition: color 0.3s ease;
-}
-
-.divider {
-  height: 1px;
-  background: var(--muted-border, #f0f0f0);
-  transition: background-color 0.3s ease;
-}
-
-/* ── Dropdown Items ─────────────────────────────────────────── */
-.dropdownItem {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 11px 16px;
-  min-height: 44px; /* Touch target rule */
-  background: none;
-  border: none;
-  font-size: clamp(13px, 3vw, 14px);
-  color: var(--text-color, #333333);
-  cursor: pointer;
-  text-decoration: none;
-  text-align: left;
-  transition:
-    background-color 0.3s ease,
-    color 0.3s ease;
-}
-
-.dropdownItem:hover {
-  background: var(--hover-color, #f7f7f7);
-}
-
-.logoutItem {
-  color: var(--error-color, #c0392b);
-}
-
-.logoutItem:hover {
-  background: var(--error-bg, #fff5f5);
-}
-
-/* ── Shimmer keyframe ───────────────────────────────────────── */
-@keyframes shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-/* ── Loading Skeleton ───────────────────────────────────────── */
-.skeleton {
-  width: clamp(72px, 20vw, 96px);
-  height: clamp(34px, 8vw, 40px);
-  border-radius: 8px;
-  background: linear-gradient(
-    90deg,
-    var(--skeleton-base-color) 25%,
-    var(--skeleton-highlight-color) 50%,
-    var(--skeleton-base-color) 75%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 1.4s infinite;
-  display: inline-block;
-}
-
-/* ── Wrapper (logged-in state relative anchor) ──────────────── */
-.wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-/* ── Guest Button ───────────────────────────────────────────── */
-.guestBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: clamp(6px, 2vw, 8px) clamp(10px, 3vw, 16px);
-  min-height: 44px; /* Touch target rule */
-  min-width: 44px;
-  background: var(--sanvika-brand-color);
-  color: var(--btn-primary-text);
-  border: none;
-  border-radius: 8px;
-  font-size: clamp(13px, 3vw, 14px);
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    background-color 0.3s ease,
-    color 0.3s ease;
-  white-space: nowrap;
-}
-
-.guestBtn:hover {
-  background: var(--sanvika-brand-hover);
-}
-
-.iconWrap {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-/* ── Profile Button (logged-in) ─────────────────────────────── */
-.profileBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  padding: 5px 10px 5px 5px;
-  min-height: 44px; /* Touch target rule */
-  background: var(--muted-bg);
-  border: 1px solid var(--border-color-light);
-  border-radius: 99px;
-  font-size: clamp(13px, 3vw, 14px);
-  font-weight: 600;
-  cursor: pointer;
-  color: var(--text-color);
-  transition:
-    background-color 0.3s ease,
-    border-color 0.3s ease,
-    color 0.3s ease;
-  white-space: nowrap;
-}
-
-.profileBtn:hover {
-  background: var(--hover-color);
-}
-
-/* ── Avatar (nav button) ────────────────────────────────────── */
-.avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid var(--sanvika-brand-color);
-  flex-shrink: 0;
-}
-
-/* ── Text spans ─────────────────────────────────────────────── */
-.textWrap {
-  display: inline;
-}
-
-.hideTextOnMobile {
-  display: none;
-}
-
-/* clamp-based show — 500px+ par text dikhao */
-@media (min-width: 500px) {
-  .hideTextOnMobile {
-    display: inline;
-  }
-}
-
-/* ── Dropdown ───────────────────────────────────────────────── */
-.dropdown {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  min-width: clamp(200px, 60vw, 240px);
-  background: var(--card-bg);
-  border: 1px solid var(--border-color-light);
-  border-radius: 12px;
-  box-shadow: 0 8px 24px var(--shadow-color);
-  z-index: 9999;
-  overflow: hidden;
-  transition:
-    background-color 0.3s ease,
-    border-color 0.3s ease;
-}
-
-.dropdownHeader {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 14px 16px;
-  background: var(--section-bg);
-  transition: background-color 0.3s ease;
-}
-
-.dropdownAvatar {
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid var(--sanvika-brand-color);
-  flex-shrink: 0;
-}
-
-.dropdownName {
-  font-size: clamp(13px, 3vw, 14px);
-  font-weight: 700;
-  color: var(--text-color);
-  line-height: 1.3;
-  transition: color 0.3s ease;
-}
-
-.dropdownMobile {
-  font-size: clamp(11px, 2.5vw, 12px);
-  color: var(--secondary-text-color);
-  margin-top: 2px;
-  transition: color 0.3s ease;
-}
-
-.divider {
-  height: 1px;
-  background: var(--muted-border);
-  transition: background-color 0.3s ease;
-}
-
-/* ── Dropdown Items ─────────────────────────────────────────── */
-.dropdownItem {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 11px 16px;
-  min-height: 44px; /* Touch target rule */
-  background: none;
-  border: none;
-  font-size: clamp(13px, 3vw, 14px);
-  color: var(--text-color);
-  cursor: pointer;
-  text-decoration: none;
-  text-align: left;
-  transition:
-    background-color 0.3s ease,
-    color 0.3s ease;
-}
-
-.dropdownItem:hover {
-  background: var(--hover-color);
-}
-
-.logoutItem {
-  color: var(--error-color);
-}
-
-.logoutItem:hover {
-  background: var(--error-bg);
-}