@sanvika/ui 0.1.5 → 0.2.0

package/src/context/ThemeContext.jsx

@@ -0,0 +1,91 @@
+"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.
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem("theme");
+      const resolved = saved ?? "dark"; // First visit = dark
+      setTheme(resolved);
+      document.documentElement.setAttribute("data-theme", resolved);
+
+      // Listen for OS-level theme changes only if user has not set a preference
+      const mq = window.matchMedia("(prefers-color-scheme: dark)");
+      const onSystemChange = (e) => {
+        if (!localStorage.getItem("theme")) {
+          const sys = e.matches ? "dark" : "light";
+          setTheme(sys);
+        }
+      };
+      mq.addEventListener("change", onSystemChange);
+      setMounted(true);
+      return () => mq.removeEventListener("change", onSystemChange);
+    } catch {
+      setTheme("dark");
+      document.documentElement.setAttribute("data-theme", "dark");
+      setMounted(true);
+    }
+  }, []);
+
+  // 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 };

package/src/index.js

@@ -0,0 +1,33 @@
+// src/index.js
+// @sanvika/ui — main barrel export
+// Import this in your project: import { Button, Modal, Navbar, ... } from "@sanvika/ui"
+
+// ─── Layout ──────────────────────────────────────────────────────────────────
+export { default as Navbar } from "./components/layout/Navbar.jsx";
+export { default as SubNavbar } from "./components/layout/SubNavbar.jsx";
+export { default as Footer } from "./components/layout/Footer.jsx";
+
+// ─── Buttons ─────────────────────────────────────────────────────────────────
+export { default as Button } from "./components/buttons/Button.jsx";
+export { default as FavoriteHeartButton } from "./components/buttons/FavoriteHeartButton.jsx";
+export { default as ScrollButton } from "./components/buttons/ScrollButton.jsx";
+export { default as ThreeDotButton } from "./components/buttons/ThreeDotButton.jsx";
+
+// ─── Common ──────────────────────────────────────────────────────────────────
+export { default as Container } from "./components/common/Container.jsx";
+export { default as Section } from "./components/common/Section.jsx";
+
+// ─── Modals ──────────────────────────────────────────────────────────────────
+export { default as Modal } from "./components/modals/Modal.jsx";
+
+// ─── ProgressBar ─────────────────────────────────────────────────────────────
+export { default as ProgressBar } from "./components/progressBar/ProgressBar.jsx";
+
+// ─── Icons (re-exported from icons barrel) ───────────────────────────────────
+export * from "./components/icons/index.js";
+
+// ─── Theme Context ────────────────────────────────────────────────────────────
+export { ThemeProvider, useTheme } from "./context/ThemeContext.jsx";
+
+// ─── Page Layout ─────────────────────────────────────────────────────────────
+export { default as Layout } from "./layouts/Layout.jsx";

package/src/layouts/Layout.jsx

@@ -0,0 +1,24 @@
+// src/layouts/Layout.jsx
+import Navbar from "../components/layout/Navbar";
+import Footer from "../components/layout/Footer";
+import styles from "../styles/components/layouts/Layout.module.css";
+
+/**
+ * Root page layout — wraps every page with Navbar + Footer.
+ * The navbar is fixed; content area has a top margin to compensate.
+ */
+const Layout = ({ children }) => {
+  return (
+    <div className={styles.wrapper}>
+      <Navbar />
+      <div className={styles.content}>
+        <main className={styles.main}>{children}</main>
+      </div>
+      <div className={styles.footerWrapper}>
+        <Footer />
+      </div>
+    </div>
+  );
+};
+
+export default Layout;

package/src/server/index.js

@@ -0,0 +1,159 @@
+// @sanvika/ui/server v0.2.0
+// HTTP client for ui.sanvikaproduction.com — cloud-driven Navbar configs and Theme presets.
+// Env vars: UI_URL, UI_CLIENT_SECRET (or pass via constructor).
+
+const DEFAULT_TIMEOUT_MS = 8000;
+
+function _readEnv(key) {
+  try {
+    return (typeof process !== "undefined" && process.env?.[key]) || null;
+  } catch {
+    return null;
+  }
+}
+
+export class SanvikaUI {
+  #url;
+  #secret;
+
+  constructor({ url, secret } = {}) {
+    const finalUrl = url || _readEnv("UI_URL");
+    const finalSecret = secret || _readEnv("UI_CLIENT_SECRET");
+    if (!finalUrl || !finalSecret) {
+      throw new Error("@sanvika/ui/server: UI_URL and UI_CLIENT_SECRET are required");
+    }
+    this.#url = finalUrl.replace(/\/$/, "");
+    this.#secret = finalSecret;
+  }
+
+  get baseUrl() {
+    return this.#url;
+  }
+
+  async #request(path, { method = "POST", body, query } = {}) {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), DEFAULT_TIMEOUT_MS);
+
+    const qs = query ? "?" + new URLSearchParams(query).toString() : "";
+    const init = {
+      method,
+      headers: { "x-client-secret": this.#secret },
+      signal: controller.signal,
+    };
+    if (body !== undefined) {
+      init.headers["Content-Type"] = "application/json";
+      init.body = JSON.stringify(body);
+    }
+
+    try {
+      const res = await fetch(`${this.#url}${path}${qs}`, init);
+      const json = await res.json().catch(() => ({}));
+      if (!res.ok || !json.success) {
+        return { success: false, status: res.status, error: json?.error || `HTTP_${res.status}` };
+      }
+      return { success: true, ...json };
+    } catch (err) {
+      return { success: false, error: err.name === "AbortError" ? "TIMEOUT" : err.message };
+    } finally {
+      clearTimeout(timer);
+    }
+  }
+
+  /** Fetch latest published navbar config (default name = "default"). */
+  async getNavbarConfig({ name = "default", version } = {}) {
+    const query = {};
+    if (version !== undefined) query.version = String(version);
+    return this.#request(`/api/v1/navbar/${encodeURIComponent(name)}`, {
+      method: "GET",
+      query: Object.keys(query).length ? query : undefined,
+    });
+  }
+
+  /** Save (creates new version) a navbar config. */
+  async saveNavbarConfig({ name = "default", items, cta, logoUrl, activeThemePreset, status = "published" } = {}) {
+    if (!Array.isArray(items)) throw new Error("saveNavbarConfig: items[] is required");
+    return this.#request("/api/v1/navbar", {
+      body: { name, items, cta, logoUrl, activeThemePreset, status },
+    });
+  }
+
+  /** List latest navbar configs across names. */
+  async listNavbarConfigs() {
+    return this.#request("/api/v1/navbar", { method: "GET" });
+  }
+
+  /** Soft-delete all versions of a navbar config name. */
+  async deleteNavbarConfig(name) {
+    if (!name) throw new Error("deleteNavbarConfig: name is required");
+    return this.#request(`/api/v1/navbar/${encodeURIComponent(name)}`, { method: "DELETE" });
+  }
+
+  /** Fetch a single theme preset by name. */
+  async getThemePreset({ name } = {}) {
+    if (!name) throw new Error("getThemePreset: name is required");
+    return this.#request(`/api/v1/theme/${encodeURIComponent(name)}`, { method: "GET" });
+  }
+
+  /** Upsert a theme preset by name. */
+  async saveThemePreset({ name, mode = "light", palette = {}, fontFamily, radius, extras, status = "published" } = {}) {
+    if (!name) throw new Error("saveThemePreset: name is required");
+    return this.#request("/api/v1/theme", {
+      body: { name, mode, palette, fontFamily, radius, extras, status },
+    });
+  }
+
+  /** List theme presets. */
+  async listThemePresets() {
+    return this.#request("/api/v1/theme", { method: "GET" });
+  }
+
+  /** Soft-delete a theme preset. */
+  async deleteThemePreset(name) {
+    if (!name) throw new Error("deleteThemePreset: name is required");
+    return this.#request(`/api/v1/theme/${encodeURIComponent(name)}`, { method: "DELETE" });
+  }
+}
+
+export function createUiClient(opts = {}) {
+  return new SanvikaUI(opts);
+}
+
+let _instance = null;
+function _getInstance() {
+  if (!_instance) _instance = new SanvikaUI();
+  return _instance;
+}
+
+export async function getNavbarConfig(opts = {}) {
+  return _getInstance().getNavbarConfig(opts);
+}
+
+export async function saveNavbarConfig(input) {
+  return _getInstance().saveNavbarConfig(input);
+}
+
+export async function listNavbarConfigs() {
+  return _getInstance().listNavbarConfigs();
+}
+
+export async function deleteNavbarConfig(name) {
+  return _getInstance().deleteNavbarConfig(name);
+}
+
+export async function getThemePreset(opts) {
+  return _getInstance().getThemePreset(opts);
+}
+
+export async function saveThemePreset(input) {
+  return _getInstance().saveThemePreset(input);
+}
+
+export async function listThemePresets() {
+  return _getInstance().listThemePresets();
+}
+
+export async function deleteThemePreset(name) {
+  return _getInstance().deleteThemePreset(name);
+}
+
+export default createUiClient;

package/README.md

@@ -1,36 +0,0 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.