@sanvika/ui 0.1.5 → 0.3.0

package/src/components/layout/Footer.jsx

@@ -0,0 +1,53 @@
+// src/components/layout/Footer.jsx
+"use client";
+import styles from "../../styles/components/layouts/Footer.module.css";
+
+/**
+ * Footer — props-driven layout shell for all 50+ Sanvika projects.
+ * 3-row layout: socialSlot | legalSlot | trustSlot.
+ * Each project passes its own social icons, legal links, trust badge via slots.
+ *
+ * @param {React.ReactNode} socialSlot - Social icons row (+ optional extra actions like RefreshButton)
+ * @param {React.ReactNode} legalSlot - Legal links row (About, Contact, Privacy, Terms, etc.)
+ * @param {React.ReactNode} trustSlot - Trust badge row (DUNS badge, copyright, etc.)
+ * @param {string} [className] - Additional CSS class
+ */
+const Footer = ({
+  socialSlot,
+  legalSlot,
+  trustSlot,
+  className = "",
+}) => {
+  return (
+    <footer className={`${styles.footer} ${className}`.trim()}>
+      <div className={styles.footerContent}>
+        {/* Row 1: Social icons + extra actions */}
+        {socialSlot && (
+          <div className={styles.topLine}>
+            <div className={styles.socialIconsContainer}>
+              <div className={styles.socialIcons}>
+                {socialSlot}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Row 2: Legal links */}
+        {legalSlot && (
+          <div className={styles.legalLinks}>
+            {legalSlot}
+          </div>
+        )}
+
+        {/* Row 3: Trust badge */}
+        {trustSlot && (
+          <div className={styles.dunsContainer}>
+            {trustSlot}
+          </div>
+        )}
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

package/src/components/layout/Footer.stories.jsx

@@ -0,0 +1,28 @@
+// src/components/layout/Footer.stories.jsx
+import Footer from "./Footer";
+
+const meta = {
+  title: "Layout/Footer",
+  component: Footer,
+  parameters: { layout: "fullscreen" },
+};
+
+export default meta;
+
+export const Default = {};
+
+export const CustomLinks = {
+  args: {
+    legalLinks: [
+      { href: "/about", label: "About" },
+      { href: "/privacy", label: "Privacy" },
+      { href: "/terms", label: "Terms" },
+    ],
+    trustText: "D-U-N-S® Verified · My Company",
+  },
+};
+
+export const NoSocialLinks = {
+  args: { socialLinks: [] },
+};
+

package/src/components/layout/Navbar.jsx

@@ -0,0 +1,50 @@
+// src/components/layout/Navbar.jsx
+"use client";
+import styles from "../../styles/components/layouts/Navbar.module.css";
+
+/**
+ * Navbar — props-driven layout shell for all 50+ Sanvika projects.
+ * 3-column grid: leftSlot | centerSlot | rightSlot.
+ * Each project passes its own logo, buttons, menus via slot props.
+ *
+ * @param {React.ReactNode} leftSlot - Logo area (left column)
+ * @param {React.ReactNode} centerSlot - Center menu items wrapped in <ul>
+ * @param {React.ReactNode} rightSlot - Right actions (profile, settings)
+ * @param {string} [className] - Additional CSS class
+ * @param {string} [ariaLabel] - Accessible label for <nav>
+ */
+const Navbar = ({
+  leftSlot,
+  centerSlot,
+  rightSlot,
+  className = "",
+  ariaLabel = "Main navigation",
+}) => {
+  return (
+    <nav
+      className={`${styles.navbar} ${className}`.trim()}
+      aria-label={ariaLabel}
+    >
+      {/* Left: Logo area */}
+      <div className={styles.navSectionLeft}>
+        {leftSlot}
+      </div>
+
+      {/* Center: Menu items */}
+      <div className={styles.navSectionCenter}>
+        {centerSlot && (
+          <ul className={styles.menu}>
+            {centerSlot}
+          </ul>
+        )}
+      </div>
+
+      {/* Right: Action buttons */}
+      <div className={styles.navSectionRight}>
+        {rightSlot}
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

package/src/components/layout/Navbar.stories.jsx

@@ -0,0 +1,42 @@
+// src/components/layout/Navbar.stories.jsx
+import Navbar from "./Navbar";
+
+const NAV_LINKS = [
+  { href: "/", label: "Home" },
+  { href: "/about", label: "About" },
+  { href: "/listings", label: "Listings" },
+  { href: "/contact", label: "Contact" },
+];
+
+const meta = {
+  title: "Layout/Navbar",
+  component: Navbar,
+  parameters: { layout: "fullscreen" },
+  argTypes: {
+    logoText: { control: "text" },
+    activePath: { control: "text" },
+  },
+};
+
+export default meta;
+
+export const Default = {
+  args: { navLinks: NAV_LINKS, activePath: "/", logoText: "Sanvika" },
+};
+
+export const ActiveAbout = {
+  args: { navLinks: NAV_LINKS, activePath: "/about", logoText: "Sanvika" },
+};
+
+export const CustomLogo = {
+  args: { navLinks: NAV_LINKS, activePath: "/", logoText: "MyApp" },
+};
+
+export const FewLinks = {
+  args: {
+    navLinks: [{ href: "/", label: "Home" }, { href: "/contact", label: "Contact" }],
+    activePath: "/",
+    logoText: "Sanvika",
+  },
+};
+

package/src/components/layout/SubNavbar.jsx

@@ -0,0 +1,36 @@
+// src/components/layout/SubNavbar.jsx
+"use client";
+import styles from "../../styles/components/layouts/SubNavbar.module.css";
+
+/**
+ * SubNavbar — fixed below Navbar, props-driven layout shell.
+ * Accepts items as children (React nodes) and optional afterContent
+ * for global modals/overlays that should render outside the nav.
+ *
+ * @param {React.ReactNode} children - Menu items (each wrapped in <li>)
+ * @param {React.ReactNode} [afterContent] - Content rendered after nav (modals, overlays)
+ * @param {string} [className] - Additional CSS class
+ * @param {string} [ariaLabel] - Accessible label for <nav>
+ */
+const SubNavbar = ({
+  children,
+  afterContent,
+  className = "",
+  ariaLabel = "Secondary navigation",
+}) => {
+  return (
+    <>
+      <nav
+        className={`${styles.subNavbar} ${className}`.trim()}
+        aria-label={ariaLabel}
+      >
+        <ul className={styles.menu}>
+          {children}
+        </ul>
+      </nav>
+      {afterContent}
+    </>
+  );
+};
+
+export default SubNavbar;

package/src/components/modals/Modal.jsx

@@ -0,0 +1,74 @@
+"use client";
+// src/components/modals/Modal.jsx
+import React, { useEffect, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import styles from "../../styles/components/modals/Modal.module.css";
+
+/**
+ * Modal — pure props-driven portal modal.
+ * Close button is NOT included — pass it in via children.
+ *
+ * @param {boolean} isOpen - controls visibility
+ * @param {function} onClose - called on backdrop click or ESC key
+ * @param {React.ReactNode} children - modal content (include your own close button here)
+ * @param {string} [className]
+ */
+
+// SSR-safe mount detection using useSyncExternalStore (React 18+ recommended)
+const emptySubscribe = () => () => {};
+const useIsMounted = () =>
+  useSyncExternalStore(emptySubscribe, () => true, () => false);
+
+const Modal = ({ isOpen, onClose, children, className }) => {
+  const mounted = useIsMounted();
+
+  // Lock body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "fixed";
+      document.body.style.width = "100%";
+    } else {
+      document.body.style.overflow = "";
+      document.body.style.position = "";
+      document.body.style.width = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+      document.body.style.position = "";
+      document.body.style.width = "";
+    };
+  }, [isOpen]);
+
+  // ESC key closes modal
+  useEffect(() => {
+    const handleEsc = (e) => {
+      if (e.key === "Escape" && isOpen) onClose();
+    };
+    if (isOpen) document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [isOpen, onClose]);
+
+  if (!isOpen || !mounted) return null;
+
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) onClose();
+  };
+
+  return createPortal(
+    <div
+      className={styles.modalOverlay}
+      onClick={handleBackdropClick}
+      role="dialog"
+      aria-modal="true"
+    >
+      <div className={`${styles.modalContent} ${className ?? ""}`}>
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default Modal;
+

package/src/components/modals/Modal.stories.jsx

@@ -0,0 +1,93 @@
+// src/components/modals/Modal.stories.jsx
+"use client";
+import { useState } from "react";
+import Modal from "./Modal";
+
+const meta = {
+  title: "Components/Modal",
+  component: Modal,
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+
+// Interactive wrapper since Modal needs open/close state
+const ModalDemo = ({ buttonLabel = "Open Modal", children }) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        style={{
+          padding: "8px 20px",
+          background: "var(--primary-color, #0984e3)",
+          color: "#fff",
+          border: "none",
+          borderRadius: "6px",
+          cursor: "pointer",
+        }}
+      >
+        {buttonLabel}
+      </button>
+      <Modal isOpen={open} onClose={() => setOpen(false)}>
+        {children}
+        <button
+          onClick={() => setOpen(false)}
+          style={{
+            position: "absolute",
+            top: 12,
+            right: 12,
+            background: "transparent",
+            border: "none",
+            fontSize: 20,
+            cursor: "pointer",
+            color: "var(--secondary-text-color)",
+          }}
+          aria-label="Close modal"
+        >
+          ✖
+        </button>
+      </Modal>
+    </>
+  );
+};
+
+export const Default = {
+  render: () => (
+    <ModalDemo buttonLabel="Open Modal">
+      <h2 style={{ margin: "0 0 12px", color: "var(--heading-color)" }}>Modal Title</h2>
+      <p style={{ color: "var(--text-color)" }}>
+        This is modal content. Click the ✖ button or press ESC to close. Clicking outside also closes.
+      </p>
+    </ModalDemo>
+  ),
+};
+
+export const WithForm = {
+  render: () => (
+    <ModalDemo buttonLabel="Open Form Modal">
+      <h2 style={{ margin: "0 0 16px", color: "var(--heading-color)" }}>Confirm Action</h2>
+      <p style={{ marginBottom: 20, color: "var(--secondary-text-color)" }}>
+        Are you sure you want to delete this item?
+      </p>
+      <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+        <button
+          style={{ padding: "8px 16px", background: "var(--secondary-color)", color: "#fff", border: "none", borderRadius: 6, cursor: "pointer" }}
+        >
+          Cancel
+        </button>
+        <button
+          style={{ padding: "8px 16px", background: "var(--error-color, #dc3545)", color: "#fff", border: "none", borderRadius: 6, cursor: "pointer" }}
+        >
+          Delete
+        </button>
+      </div>
+      <button
+        style={{ position: "absolute", top: 12, right: 12, background: "transparent", border: "none", fontSize: 20, cursor: "pointer", color: "var(--secondary-text-color)" }}
+        aria-label="Close"
+      >
+        ✖
+      </button>
+    </ModalDemo>
+  ),
+};

package/src/components/progressBar/ProgressBar.jsx

@@ -0,0 +1,113 @@
+"use client";
+// src/components/progressBar/ProgressBar.jsx
+import React, { useEffect, useRef, useState } from "react";
+import styles from "../../styles/components/progressBar/ProgressBar.module.css";
+
+/**
+ * ProgressBar — animated, pure props-driven progress indicator.
+ *
+ * @param {number} [progress=0] - 0 to 100
+ * @param {number} [height=6] - bar height in px
+ * @param {string} [color] - CSS color or var() for the filled bar
+ * @param {string} [backgroundColor] - CSS color or var() for the track
+ * @param {boolean} [animate=true] - smooth animation
+ * @param {number} [speed=300] - animation base duration in ms
+ * @param {boolean} [showLabel=false] - show percentage label
+ * @param {"top"|"bottom"} [labelPosition="top"]
+ * @param {function} [onComplete] - called when progress reaches 100
+ * @param {string} [className]
+ * @param {object} [style]
+ */
+const ProgressBar = ({
+  progress = 0,
+  height = 6,
+  color = "var(--primary-color, #007bff)",
+  backgroundColor = "var(--progress-bg, rgba(0, 0, 0, 0.1))",
+  animate = true,
+  speed = 300,
+  showLabel = false,
+  labelPosition = "top",
+  onComplete = null,
+  className = "",
+  style = {},
+}) => {
+  const [animatedProgress, setAnimatedProgress] = useState(0);
+  const rafIdRef = useRef(null);
+  const startRef = useRef(0);
+  const endRef = useRef(progress);
+  const startTimeRef = useRef(null);
+  const completedRef = useRef(false);
+
+  const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+
+  useEffect(() => {
+    if (!animate) return;
+    startRef.current = animatedProgress;
+  }, [animatedProgress, animate]);
+
+  useEffect(() => {
+    if (!animate) return; // non-animated: use progress directly via clampedProgress below
+    if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
+    endRef.current = progress;
+    startTimeRef.current = null;
+    if (startRef.current === endRef.current) return;
+
+    const delta = Math.abs(endRef.current - startRef.current);
+    const duration = Math.max(speed, Math.min(1500, 20 * delta));
+
+    const step = (ts) => {
+      if (startTimeRef.current === null) startTimeRef.current = ts;
+      const elapsed = ts - startTimeRef.current;
+      const t = Math.max(0, Math.min(1, elapsed / duration));
+      const eased = easeOutCubic(t);
+      const next = startRef.current + (endRef.current - startRef.current) * eased;
+      setAnimatedProgress(next);
+      if (t < 1) {
+        rafIdRef.current = requestAnimationFrame(step);
+      } else {
+        setAnimatedProgress(endRef.current);
+        if (endRef.current >= 100 && onComplete && !completedRef.current) {
+          completedRef.current = true;
+          onComplete();
+        }
+      }
+    };
+    rafIdRef.current = requestAnimationFrame(step);
+    return () => {
+      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
+    };
+  }, [progress, animate, speed, onComplete]);
+
+  // When not animated, use progress directly; when animated, use animatedProgress
+  const clampedProgress = Math.max(0, Math.min(100, animate ? animatedProgress : progress));
+  const label = `${Math.round(clampedProgress)}%`;
+
+  return (
+    <div
+      className={`${styles.wrapper} ${className}`}
+      style={style}
+      role="progressbar"
+      aria-valuenow={Math.round(clampedProgress)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+    >
+      {showLabel && labelPosition === "top" && (
+        <span className={styles.label}>{label}</span>
+      )}
+      <div
+        className={styles.track}
+        style={{ height, backgroundColor }}
+      >
+        <div
+          className={styles.bar}
+          style={{ width: `${clampedProgress}%`, background: color }}
+        />
+      </div>
+      {showLabel && labelPosition === "bottom" && (
+        <span className={styles.label}>{label}</span>
+      )}
+    </div>
+  );
+};
+
+export default ProgressBar;

package/src/components/progressBar/ProgressBar.stories.jsx

@@ -0,0 +1,67 @@
+// src/components/progressBar/ProgressBar.stories.jsx
+"use client";
+import { useState } from "react";
+import ProgressBar from "./ProgressBar";
+
+const meta = {
+  title: "Components/ProgressBar",
+  component: ProgressBar,
+  parameters: { layout: "padded" },
+  argTypes: {
+    progress: { control: { type: "range", min: 0, max: 100, step: 1 } },
+    height: { control: { type: "range", min: 2, max: 24, step: 1 } },
+    animate: { control: "boolean" },
+    showLabel: { control: "boolean" },
+    labelPosition: { control: "select", options: ["top", "bottom"] },
+  },
+};
+
+export default meta;
+
+export const Default = {
+  args: { progress: 60, height: 6, animate: true },
+};
+
+export const WithLabel = {
+  args: { progress: 75, height: 8, showLabel: true, labelPosition: "top" },
+};
+
+export const Thick = {
+  args: { progress: 45, height: 16, showLabel: true },
+};
+
+export const Complete = {
+  args: { progress: 100, height: 6, showLabel: true },
+};
+
+export const NoAnimation = {
+  args: { progress: 50, animate: false, height: 6 },
+};
+
+// Interactive story with increment button
+const ProgressBarInteractive = () => {
+  const [val, setVal] = useState(0);
+  return (
+    <div style={{ width: 360, display: "flex", flexDirection: "column", gap: 16 }}>
+      <ProgressBar progress={val} height={8} showLabel animate />
+      <div style={{ display: "flex", gap: 8 }}>
+        <button
+          onClick={() => setVal((v) => Math.min(100, v + 10))}
+          style={{ padding: "6px 16px", background: "var(--primary-color, #007bff)", color: "#fff", border: "none", borderRadius: 6, cursor: "pointer" }}
+        >
+          +10
+        </button>
+        <button
+          onClick={() => setVal(0)}
+          style={{ padding: "6px 16px", background: "var(--secondary-color, #6c757d)", color: "#fff", border: "none", borderRadius: 6, cursor: "pointer" }}
+        >
+          Reset
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export const Interactive = {
+  render: () => <ProgressBarInteractive />,
+};

package/src/context/ThemeContext.jsx

@@ -0,0 +1,100 @@
+"use client";
+// src/context/ThemeContext.jsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback,
+} from "react";
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const [mounted, setMounted] = useState(false);
+  const [theme, setTheme] = useState("light"); // SSR fallback
+
+  // Step 1: On mount, load theme from localStorage. Default = dark.
+  // Defer state updates so this effect is not classified as synchronous setState-in-effect (react-hooks/set-state-in-effect).
+  useEffect(() => {
+    let cancelled = false;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const onSystemChange = (e) => {
+      if (!localStorage.getItem("theme")) {
+        const sys = e.matches ? "dark" : "light";
+        setTheme(sys);
+      }
+    };
+
+    queueMicrotask(() => {
+      if (cancelled) return;
+      try {
+        const saved = localStorage.getItem("theme");
+        const resolved = saved ?? "dark"; // First visit = dark
+        setTheme(resolved);
+        document.documentElement.setAttribute("data-theme", resolved);
+        mq.addEventListener("change", onSystemChange);
+        setMounted(true);
+      } catch {
+        if (cancelled) return;
+        setTheme("dark");
+        document.documentElement.setAttribute("data-theme", "dark");
+        setMounted(true);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+      mq.removeEventListener("change", onSystemChange);
+    };
+  }, []);
+
+  // Step 2: Apply theme with smooth transition class
+  const applyTheme = useCallback((next) => {
+    const root = document.documentElement;
+    root.classList.add("theme-transition");
+    root.setAttribute("data-theme", next);
+    localStorage.setItem("theme", next);
+    const t = setTimeout(() => root.classList.remove("theme-transition"), 300);
+    return () => clearTimeout(t);
+  }, []);
+
+  // Step 3: Apply whenever theme state changes (after mount)
+  useEffect(() => {
+    if (mounted) applyTheme(theme);
+  }, [theme, mounted, applyTheme]);
+
+  // Step 4: Toggle
+  const toggleTheme = useCallback(() => {
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  }, []);
+
+  // Step 5: Explicit setter (for admin/testing)
+  const setThemeExplicitly = useCallback((next) => {
+    if (next !== "light" && next !== "dark") return;
+    setTheme(next);
+  }, []);
+
+  // React 19 direct context syntax
+  return (
+    <ThemeContext
+      value={{
+        theme,
+        toggleTheme,
+        setTheme: setThemeExplicitly,
+        isDarkMode: theme === "dark",
+        isThemeReady: mounted,
+      }}
+    >
+      {children}
+    </ThemeContext>
+  );
+};
+
+export const useTheme = () => {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used inside ThemeProvider");
+  return ctx;
+};
+
+export { ThemeContext };