@neevjs/client 0.0.1

package/dist/index.mjs

@@ -0,0 +1,656 @@
+// src/core/AuthClient.ts
+var AuthClient = class {
+  client;
+  userData = null;
+  constructor(client) {
+    this.client = client;
+  }
+  async login(email, password) {
+    const res = await this.client.request("/auth/login", {
+      method: "POST",
+      body: JSON.stringify({ email, password })
+    });
+    localStorage.setItem("neev_token", res.data.token);
+    this.userData = res.data.user;
+  }
+  async register(email, password, name) {
+    const res = await this.client.request("/auth/register", {
+      method: "POST",
+      body: JSON.stringify({ email, password, name })
+    });
+    localStorage.setItem("neev_token", res.data.token);
+    this.userData = res.data.user;
+  }
+  logout() {
+    localStorage.removeItem("neev_token");
+    this.userData = null;
+  }
+  async user() {
+    if (!this.isAuthenticated()) return null;
+    if (this.userData) return this.userData;
+    const res = await this.client.request("/auth/me");
+    this.userData = res.data;
+    return this.userData;
+  }
+  isAuthenticated() {
+    return !!localStorage.getItem("neev_token");
+  }
+  getToken() {
+    return localStorage.getItem("neev_token");
+  }
+};
+
+// src/core/createClient.ts
+function createClient(config = {}) {
+  const plugins = [];
+  const baseURL = config.baseURL ?? "";
+  async function request(url, options = {}) {
+    let req = { url, options };
+    for (const plugin of plugins) {
+      if (plugin.onRequest) {
+        req = await plugin.onRequest(req);
+      }
+    }
+    const headers = {
+      "Content-Type": "application/json",
+      ...req.options.headers ?? {}
+    };
+    let response;
+    try {
+      response = await fetch(baseURL + req.url, {
+        method: req.options.method ?? "GET",
+        body: req.options.body,
+        headers
+      });
+      let finalResponse = response;
+      for (const plugin of plugins) {
+        if (plugin.onResponse) {
+          finalResponse = await plugin.onResponse(finalResponse);
+        }
+      }
+      if (!finalResponse.ok) {
+        const errorBody = await finalResponse.json().catch(() => ({ error: "Unknown error" }));
+        throw new Error(
+          typeof errorBody.error === "string" ? errorBody.error : `HTTP ${finalResponse.status}`
+        );
+      }
+      return finalResponse.json();
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      for (const plugin of plugins) {
+        plugin.onError?.(error);
+      }
+      throw error;
+    }
+  }
+  function use(plugin) {
+    plugins.push(plugin);
+    plugin.setup?.(client);
+  }
+  const client = {
+    request,
+    use,
+    auth: null
+    // set below after client is defined
+  };
+  client.auth = new AuthClient(client);
+  return client;
+}
+
+// src/core/NeevProvider.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var NeevContext = createContext(null);
+function NeevProvider({ client, children }) {
+  return /* @__PURE__ */ jsx(NeevContext.Provider, { value: client, children });
+}
+function useNeevClient() {
+  const client = useContext(NeevContext);
+  if (!client) {
+    throw new Error(
+      "[NeevJS] useNeevClient must be used inside <NeevProvider>. Make sure you have wrapped your app with <NeevProvider client={client}>."
+    );
+  }
+  return client;
+}
+
+// src/hooks/useModel.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var cache = /* @__PURE__ */ new Map();
+function useModel(name) {
+  const client = useNeevClient();
+  const url = `/${name}`;
+  const [data, setData] = useState(() => cache.get(url) ?? []);
+  const [loading, setLoading] = useState(!cache.has(url));
+  const [error, setError] = useState(null);
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const fetchData = useCallback(async () => {
+    if (mountedRef.current) setLoading(true);
+    try {
+      const res = await client.request(url);
+      const rows = Array.isArray(res) ? res : res.data ?? [];
+      cache.set(url, rows);
+      if (mountedRef.current) {
+        setData(rows);
+        setError(null);
+      }
+    } catch (err) {
+      if (mountedRef.current) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      }
+    } finally {
+      if (mountedRef.current) setLoading(false);
+    }
+  }, [client, url]);
+  useEffect(() => {
+    void fetchData();
+  }, [fetchData]);
+  const create = useCallback(async (payload) => {
+    await client.request(url, {
+      method: "POST",
+      body: JSON.stringify(payload)
+    });
+    cache.delete(url);
+    await fetchData();
+  }, [client, url, fetchData]);
+  const update = useCallback(async (id, payload) => {
+    await client.request(`${url}/${id}`, {
+      method: "PUT",
+      body: JSON.stringify(payload)
+    });
+    cache.delete(url);
+    await fetchData();
+  }, [client, url, fetchData]);
+  const remove = useCallback(async (id) => {
+    await client.request(`${url}/${id}`, {
+      method: "DELETE"
+    });
+    cache.delete(url);
+    await fetchData();
+  }, [client, url, fetchData]);
+  return { data, loading, error, create, update, remove, refresh: fetchData };
+}
+
+// src/hooks/useAuth.ts
+function useAuth() {
+  const client = useNeevClient();
+  const auth = client.auth;
+  return {
+    login: (email, password) => auth.login(email, password),
+    register: (email, password, name) => auth.register(email, password, name),
+    logout: () => auth.logout(),
+    user: () => auth.user(),
+    isAuthenticated: () => auth.isAuthenticated()
+  };
+}
+
+// src/hooks/useSyncStatus.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+var syncState = {
+  pendingCount: 0,
+  listeners: /* @__PURE__ */ new Set(),
+  notify() {
+    this.listeners.forEach((fn) => fn());
+  }
+};
+function useSyncStatus() {
+  const [isOffline, setIsOffline] = useState2(!navigator.onLine);
+  const [pending, setPending] = useState2(syncState.pendingCount);
+  const [syncing, setSyncing] = useState2(false);
+  useEffect2(() => {
+    function onOnline() {
+      setIsOffline(false);
+      setSyncing(true);
+      setTimeout(() => setSyncing(false), 2e3);
+    }
+    function onOffline() {
+      setIsOffline(true);
+    }
+    function onSyncUpdate() {
+      setPending(syncState.pendingCount);
+    }
+    window.addEventListener("online", onOnline);
+    window.addEventListener("offline", onOffline);
+    syncState.listeners.add(onSyncUpdate);
+    return () => {
+      window.removeEventListener("online", onOnline);
+      window.removeEventListener("offline", onOffline);
+      syncState.listeners.delete(onSyncUpdate);
+    };
+  }, []);
+  return { isOffline, pending, syncing };
+}
+
+// src/components/Table.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Table({
+  model,
+  columns,
+  onEdit,
+  onDelete,
+  emptyMessage = "No records found."
+}) {
+  const { data, loading, error } = useModel(model);
+  if (loading) {
+    return /* @__PURE__ */ jsx2("div", { className: "neev-table-loading", children: /* @__PURE__ */ jsx2("p", { children: "Loading..." }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx2("div", { className: "neev-table-error", children: /* @__PURE__ */ jsxs("p", { children: [
+      "Error: ",
+      error.message
+    ] }) });
+  }
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx2("div", { className: "neev-table-empty", children: /* @__PURE__ */ jsx2("p", { children: emptyMessage }) });
+  }
+  const resolvedColumns = columns ?? Object.keys(data[0]).map((key) => ({
+    key,
+    label: key.charAt(0).toUpperCase() + key.slice(1)
+  }));
+  return /* @__PURE__ */ jsx2("div", { className: "neev-table-wrapper", style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs("table", { className: "neev-table", style: { width: "100%", borderCollapse: "collapse" }, children: [
+    /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      resolvedColumns.map((col) => /* @__PURE__ */ jsx2(
+        "th",
+        {
+          style: {
+            textAlign: "left",
+            padding: "10px 12px",
+            borderBottom: "2px solid #e5e7eb",
+            fontWeight: 600,
+            color: "#374151",
+            background: "#f9fafb"
+          },
+          children: col.label ?? col.key
+        },
+        col.key
+      )),
+      (onEdit || onDelete) && /* @__PURE__ */ jsx2(
+        "th",
+        {
+          style: {
+            textAlign: "left",
+            padding: "10px 12px",
+            borderBottom: "2px solid #e5e7eb",
+            fontWeight: 600,
+            color: "#374151",
+            background: "#f9fafb"
+          },
+          children: "Actions"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx2("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        style: { borderBottom: "1px solid #e5e7eb" },
+        children: [
+          resolvedColumns.map((col) => /* @__PURE__ */ jsx2(
+            "td",
+            {
+              style: { padding: "10px 12px", color: "#1f2937", verticalAlign: "middle" },
+              children: col.render ? col.render(row[col.key], row) : String(row[col.key] ?? "")
+            },
+            col.key
+          )),
+          (onEdit || onDelete) && /* @__PURE__ */ jsxs("td", { style: { padding: "10px 12px", verticalAlign: "middle" }, children: [
+            onEdit && /* @__PURE__ */ jsx2(
+              "button",
+              {
+                onClick: () => onEdit(row),
+                style: {
+                  marginRight: 8,
+                  padding: "4px 10px",
+                  fontSize: 13,
+                  cursor: "pointer",
+                  background: "#3b82f6",
+                  color: "#fff",
+                  border: "none",
+                  borderRadius: 4
+                },
+                children: "Edit"
+              }
+            ),
+            onDelete && /* @__PURE__ */ jsx2(
+              "button",
+              {
+                onClick: () => onDelete(row),
+                style: {
+                  padding: "4px 10px",
+                  fontSize: 13,
+                  cursor: "pointer",
+                  background: "#ef4444",
+                  color: "#fff",
+                  border: "none",
+                  borderRadius: 4
+                },
+                children: "Delete"
+              }
+            )
+          ] })
+        ]
+      },
+      String(row.id ?? rowIndex)
+    )) })
+  ] }) });
+}
+
+// src/components/Form.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Form({
+  model,
+  fields,
+  initialValues = {},
+  editId,
+  onSuccess,
+  onError,
+  submitLabel = "Submit",
+  children
+}) {
+  const { create, update } = useModel(model);
+  const [submitting, setSubmitting] = useState3(false);
+  const [formError, setFormError] = useState3(null);
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setSubmitting(true);
+    setFormError(null);
+    const formData = new FormData(e.currentTarget);
+    const payload = Object.fromEntries(formData.entries());
+    try {
+      if (editId !== void 0) {
+        await update(editId, payload);
+      } else {
+        await create(payload);
+      }
+      onSuccess?.();
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setFormError(error.message);
+      onError?.(error);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  const inputStyle = {
+    display: "block",
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: 14,
+    border: "1px solid #d1d5db",
+    borderRadius: 6,
+    outline: "none",
+    boxSizing: "border-box",
+    marginTop: 4
+  };
+  const labelStyle = {
+    display: "block",
+    fontSize: 13,
+    fontWeight: 500,
+    color: "#374151",
+    marginBottom: 12
+  };
+  return /* @__PURE__ */ jsxs2("form", { onSubmit: (e) => void handleSubmit(e), style: { width: "100%" }, children: [
+    formError && /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          padding: "8px 12px",
+          marginBottom: 12,
+          background: "#fee2e2",
+          color: "#dc2626",
+          borderRadius: 6,
+          fontSize: 13
+        },
+        children: formError
+      }
+    ),
+    fields?.map((field) => /* @__PURE__ */ jsxs2("label", { style: labelStyle, children: [
+      field.label ?? field.name,
+      field.required && /* @__PURE__ */ jsx3("span", { style: { color: "#ef4444", marginLeft: 2 }, children: "*" }),
+      field.type === "textarea" ? /* @__PURE__ */ jsx3(
+        "textarea",
+        {
+          name: field.name,
+          placeholder: field.placeholder,
+          required: field.required,
+          defaultValue: String(initialValues[field.name] ?? ""),
+          style: { ...inputStyle, minHeight: 80, resize: "vertical" }
+        }
+      ) : field.type === "select" ? /* @__PURE__ */ jsxs2(
+        "select",
+        {
+          name: field.name,
+          required: field.required,
+          defaultValue: String(initialValues[field.name] ?? ""),
+          style: inputStyle,
+          children: [
+            /* @__PURE__ */ jsx3("option", { value: "", children: "Select..." }),
+            field.options?.map((opt) => /* @__PURE__ */ jsx3("option", { value: opt.value, children: opt.label }, opt.value))
+          ]
+        }
+      ) : /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: field.type ?? "text",
+          name: field.name,
+          placeholder: field.placeholder,
+          required: field.required,
+          defaultValue: String(initialValues[field.name] ?? ""),
+          style: inputStyle
+        }
+      )
+    ] }, field.name)),
+    children,
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "submit",
+        disabled: submitting,
+        style: {
+          marginTop: 8,
+          padding: "9px 20px",
+          background: submitting ? "#9ca3af" : "#111827",
+          color: "#fff",
+          border: "none",
+          borderRadius: 6,
+          fontSize: 14,
+          fontWeight: 600,
+          cursor: submitting ? "not-allowed" : "pointer",
+          width: "100%"
+        },
+        children: submitting ? "Saving..." : submitLabel
+      }
+    )
+  ] });
+}
+
+// src/components/Protected.tsx
+import { useEffect as useEffect3, useState as useState4 } from "react";
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+function Protected({ children, fallback, role }) {
+  const { isAuthenticated, user } = useAuth();
+  const [checking, setChecking] = useState4(true);
+  const [allowed, setAllowed] = useState4(false);
+  useEffect3(() => {
+    async function check() {
+      if (!isAuthenticated()) {
+        setAllowed(false);
+        setChecking(false);
+        return;
+      }
+      if (role) {
+        const u = await user();
+        setAllowed(u?.role === role);
+      } else {
+        setAllowed(true);
+      }
+      setChecking(false);
+    }
+    void check();
+  }, [isAuthenticated, role, user]);
+  if (checking) return /* @__PURE__ */ jsx4(Fragment, {});
+  if (!allowed) {
+    return /* @__PURE__ */ jsx4(Fragment, { children: fallback ?? /* @__PURE__ */ jsx4("div", { style: { padding: 24, textAlign: "center", color: "#6b7280" }, children: /* @__PURE__ */ jsx4("p", { children: "You are not authorized to view this page." }) }) });
+  }
+  return /* @__PURE__ */ jsx4(Fragment, { children });
+}
+
+// src/plugins/AuthPlugin.ts
+var AuthPlugin = {
+  name: "auth",
+  onRequest(req) {
+    const token = localStorage.getItem("neev_token");
+    return {
+      ...req,
+      options: {
+        ...req.options,
+        headers: {
+          ...req.options.headers ?? {},
+          ...token ? { Authorization: `Bearer ${token}` } : {}
+        }
+      }
+    };
+  }
+};
+
+// src/plugins/LoggerPlugin.ts
+var LoggerPlugin = {
+  name: "logger",
+  onRequest(req) {
+    console.log(`[NeevJS] \u2192 ${req.options.method ?? "GET"} ${req.url}`);
+    return req;
+  },
+  onResponse(res) {
+    console.log(`[NeevJS] \u2190 ${res.status} ${res.url}`);
+    return res;
+  },
+  onError(err) {
+    console.error("[NeevJS] \u2717 Error:", err.message);
+  }
+};
+
+// src/plugins/CachePlugin.ts
+function createCachePlugin(options = {}) {
+  const ttl = options.ttl ?? 6e4;
+  const store = /* @__PURE__ */ new Map();
+  return {
+    name: "cache",
+    onRequest(req) {
+      const method = (req.options.method ?? "GET").toUpperCase();
+      if (method !== "GET") return req;
+      const entry = store.get(req.url);
+      if (entry && Date.now() < entry.expiresAt) {
+        const cached = new Response(JSON.stringify(entry.data), {
+          status: 200,
+          headers: { "Content-Type": "application/json", "X-Neev-Cache": "HIT" }
+        });
+        return { ...req, _cachedResponse: cached };
+      }
+      return req;
+    },
+    async onResponse(res) {
+      if (res.headers.get("X-Neev-Cache") === "HIT") return res;
+      const url = res.url;
+      if (!url) return res;
+      try {
+        const clone = res.clone();
+        const data = await clone.json();
+        store.set(url, { data, expiresAt: Date.now() + ttl });
+      } catch {
+      }
+      return res;
+    },
+    onError() {
+    }
+  };
+}
+var CachePlugin = createCachePlugin();
+
+// src/plugins/OfflinePlugin.ts
+var QUEUE_STORAGE_KEY = "neev_offline_queue";
+function generateId() {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+function loadQueue() {
+  try {
+    const raw = localStorage.getItem(QUEUE_STORAGE_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+function saveQueue(queue) {
+  localStorage.setItem(QUEUE_STORAGE_KEY, JSON.stringify(queue));
+  syncState.pendingCount = queue.length;
+  syncState.notify();
+}
+function createOfflinePlugin() {
+  let client;
+  async function processQueue() {
+    if (!navigator.onLine) return;
+    const queue = loadQueue();
+    if (queue.length === 0) return;
+    const remaining = [];
+    for (const action of queue) {
+      try {
+        await client.request(action.url, action.options);
+      } catch {
+        remaining.push({ ...action, retries: action.retries + 1 });
+      }
+    }
+    saveQueue(remaining);
+  }
+  window.addEventListener("online", () => {
+    void processQueue();
+  });
+  return {
+    name: "offline",
+    setup(c) {
+      client = c;
+    },
+    onRequest(req) {
+      const method = (req.options.method ?? "GET").toUpperCase();
+      const isMutation = method !== "GET";
+      if (!navigator.onLine && isMutation) {
+        const queue = loadQueue();
+        const action = {
+          id: generateId(),
+          url: req.url,
+          options: req.options,
+          timestamp: Date.now(),
+          retries: 0
+        };
+        queue.push(action);
+        saveQueue(queue);
+        throw new Error("[NeevJS] Offline \u2014 action queued for sync when back online.");
+      }
+      return req;
+    }
+  };
+}
+var OfflinePlugin = createOfflinePlugin();
+export {
+  AuthClient,
+  AuthPlugin,
+  CachePlugin,
+  Form,
+  LoggerPlugin,
+  NeevContext,
+  NeevProvider,
+  OfflinePlugin,
+  Protected,
+  Table,
+  createCachePlugin,
+  createClient,
+  createOfflinePlugin,
+  useAuth,
+  useModel,
+  useNeevClient,
+  useSyncStatus
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@neevjs/client",
+  "version": "0.0.1",
+  "description": "NeevJS core React framework — plugin-driven, offline-first, built for business apps",
+  "keywords": [
+    "react",
+    "framework",
+    "crud",
+    "business",
+    "offline-first",
+    "plugin",
+    "neevjs"
+  ],
+  "author": "Rahul Raj Kushwaha <rahulkraj.dev@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rahulkraj/neevjs"
+  },
+  "source": "src/index.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@neevjs/shared": "0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.3"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "clean": "rm -rf dist"
+  }
+}