warqadui 0.0.4 → 0.0.6

package/packages/ui/src/hooks/Fetches/useApis.tsx

@@ -0,0 +1,197 @@
+import { useState, useMemo } from "react";
+import axios from "axios";
+import { useWarqadConfig } from "../../providers/WarqadProvider";
+
+interface FetchProps {
+  url: string;
+  body?: Record<string, any>;
+  v?: 1 | 2;
+  params?: Record<string, any>;
+  delay?: number;
+  form?: {
+    setError: (field: string, error: { message: string }) => void;
+  };
+  multipart?: boolean;
+}
+
+export type FetchFunction = (props: Omit<FetchProps, "body">) => Promise<any>;
+export type PostFunction = (props: FetchProps) => Promise<any>;
+export type PutFunction = (props: FetchProps) => Promise<any>;
+export type DeleteFunction = (props: Omit<FetchProps, "body">) => Promise<any>;
+
+const useApi = () => {
+  const { apiUrl } = useWarqadConfig();
+
+  const api = useMemo(
+    () =>
+      axios.create({
+        baseURL: apiUrl || "/api",
+        withCredentials: true,
+      }),
+    [apiUrl],
+  );
+
+  const [data, setData] = useState<any>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [pdfLoading, setPdfLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const get: FetchFunction = async ({ url, v = 1, params, delay }) => {
+    setIsLoading(true);
+    try {
+      if (delay) await new Promise((r) => setTimeout(r, delay));
+      const response = await api.get(`/v${v}${url}`, { params });
+      setData(response.data);
+      setError(null);
+      return response.data;
+    } catch (err: any) {
+      const msg =
+        err.response?.data?.message || err.message || "Something went wrong";
+      setError(msg);
+      setData(null);
+      throw new Error(msg);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const post: PostFunction = async ({
+    url,
+    v = 1,
+    body,
+    form,
+    multipart = false,
+  }) => {
+    setIsLoading(true);
+    try {
+      let response;
+      if (multipart) {
+        const formData = new FormData();
+        if (body) {
+          Object.keys(body).forEach((key) => {
+            if (key === "files") {
+              const files = body[key];
+              if (Array.isArray(files)) {
+                files.forEach((file: File) => formData.append(key, file));
+              } else {
+                formData.append(key, files);
+              }
+            } else if (
+              Array.isArray(body[key]) ||
+              typeof body[key] === "object"
+            ) {
+              formData.append(key, JSON.stringify(body[key]));
+            } else {
+              formData.append(key, body[key]);
+            }
+          });
+        }
+        response = await api.post(`/v${v}${url}`, formData, {
+          headers: { "Content-Type": "multipart/form-data" },
+        });
+      } else {
+        response = await api.post(`/v${v}${url}`, body);
+      }
+      setData(response.data);
+      return response.data;
+    } catch (err: any) {
+      const msg =
+        err.response?.data?.message || err.message || "Something went wrong";
+      setError(msg);
+      if (form) {
+        if (msg !== "zodError") {
+          form.setError("root", { message: msg });
+        } else {
+          const errors = err?.response?.data?.errors || [];
+          errors.forEach((e: any) => {
+            form.setError(e.field, { message: e.message });
+          });
+        }
+      }
+      throw new Error(msg);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const put: PutFunction = async ({ url, v = 1, body }) => {
+    setIsLoading(true);
+    try {
+      const response = await api.put(`/v${v}${url}`, body);
+      setData(response.data);
+      return response.data;
+    } catch (err: any) {
+      const msg =
+        err.response?.data?.message || err.message || "Something went wrong";
+      setError(msg);
+      throw new Error(msg);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const remove: DeleteFunction = async ({ url, v = 1, params }) => {
+    setIsLoading(true);
+    try {
+      const response = await api.delete(`/v${v}${url}`, { params });
+      setData(response.data);
+      setError(null);
+      return response.data;
+    } catch (err: any) {
+      const msg =
+        err.response?.data?.message || err.message || "Something went wrong";
+      setError(msg);
+      setData(null);
+      throw new Error(msg);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const fetchPdf = async ({
+    url,
+    v = 1,
+    method,
+    body,
+  }: FetchProps & { method: "GET" | "POST" }) => {
+    setPdfLoading(true);
+    try {
+      const response = await api.request({
+        url: `/v${v}${url}`,
+        method,
+        data: body,
+        responseType: "blob",
+      });
+      if (!response.data || response.data.size === 0) {
+        return { ok: false, message: "Received empty PDF file", errors: [] };
+      }
+      setError(null);
+      const pdfObjectUrl = URL.createObjectURL(response.data);
+      return { ok: true, data: pdfObjectUrl };
+    } catch (err: any) {
+      return {
+        ok: false,
+        message:
+          err.response?.data?.message ||
+          err.message ||
+          "Server error, something went wrong",
+      };
+    } finally {
+      setPdfLoading(false);
+    }
+  };
+
+  return {
+    data,
+    error,
+    isLoading,
+    pdfLoading,
+    get,
+    post,
+    put,
+    remove,
+    fetchPdf,
+  };
+};
+
+export default useApi;

package/packages/ui/src/hooks/ThemeContext.tsx

@@ -0,0 +1,56 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  ReactNode,
+} from "react";
+
+interface ThemeContextType {
+  isDarkMode: boolean;
+  toggleTheme: () => void;
+  setTheme: (theme: "light" | "dark") => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    if (typeof window !== "undefined") {
+      const savedTheme = localStorage.getItem("theme");
+      if (savedTheme) {
+        return savedTheme === "dark";
+      }
+      return window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    if (isDarkMode) {
+      root.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+    } else {
+      root.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+    }
+  }, [isDarkMode]);
+
+  const toggleTheme = () => setIsDarkMode((prev) => !prev);
+  const setTheme = (theme: "light" | "dark") => setIsDarkMode(theme === "dark");
+
+  return (
+    <ThemeContext.Provider value={{ isDarkMode, toggleTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};

package/packages/ui/src/hooks/useModal.tsx

@@ -0,0 +1,38 @@
+import { useState, useCallback } from "react";
+import { Modal, ModalProps } from "../components/modal/Modal";
+
+export interface UseModalReturn {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+  openState: (data: any) => void;
+  state: any;
+  Modal: React.FC<ModalProps>;
+}
+
+export const useModal = (initialState = false): UseModalReturn => {
+  const [isOpen, setIsOpen] = useState(initialState);
+  const [state, setState] = useState(null);
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setState(null);
+  }, []);
+  const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
+  const openState = useCallback((data: any) => {
+    setState(data);
+    open();
+  }, []);
+  return {
+    isOpen,
+    open,
+    close,
+    toggle,
+    openState,
+    state,
+    Modal: Modal,
+  };
+};
+
+export default useModal;

package/packages/ui/src/hooks/useTheme.ts

@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+
+const useTheme = () => {
+  // Check local storage or system preference on mount
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    if (typeof window !== "undefined") {
+      const savedTheme = localStorage.getItem("theme");
+      if (savedTheme) {
+        return savedTheme === "dark";
+      }
+      return window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    if (isDarkMode) {
+      root.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+    } else {
+      root.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+    }
+  }, [isDarkMode]);
+
+  const toggleTheme = () => {
+    setIsDarkMode((prev) => !prev);
+  };
+
+  return { isDarkMode, toggleTheme };
+};
+
+export default useTheme;

package/packages/ui/src/index.ts

@@ -0,0 +1,24 @@
+export * from "./components/Button";
+export * from "./components/DashboardLayout";
+export * from "./components/ThemeToggle";
+export * from "./hooks/ThemeContext";
+export * from "./hooks/useTheme";
+export * from "./components/LoadingBox";
+export * from "./components/spins";
+export * from "./components/CodeBlock";
+export * from "./components/Card";
+export * from "./components/modal/Modal";
+export * from "./components/PageHeader";
+export * from "./hooks/useModal";
+export { default as Fields } from "./components/Fields";
+export * from "./components/Fields/Input";
+export * from "./components/Fields/PhoneInput";
+export * from "./components/Fields/select";
+export * from "./components/Fields/textArea";
+export * from "./components/Fields/searchApi";
+export * from "./components/Fields/date";
+export * from "./components/tables";
+
+export * from "./providers/WarqadProvider";
+export { default as useApi } from "./hooks/Fetches/useApis";
+export * from "./utils/pdf";

package/packages/ui/src/providers/WarqadProvider.tsx

@@ -0,0 +1,69 @@
+import React, { createContext, useContext, ReactNode } from "react";
+import { ThemeProvider } from "../hooks/ThemeContext";
+
+export interface ThemeConfig {
+  primaryColor?: string;
+  // System is extendable for later:
+  // borderRadius?: string;
+  // fontSize?: string;
+}
+
+export interface WarqadConfig {
+  apiUrl?: string;
+  theme?: ThemeConfig;
+  // System is extendable for later:
+  // auth?: AuthConfig;
+  // featureFlags?: Record<string, boolean>;
+}
+
+export interface WarqadConfigContextType {
+  config: WarqadConfig;
+}
+
+const WarqadConfigContext = createContext<WarqadConfigContextType | undefined>(
+  undefined,
+);
+
+export const useWarqadConfig = () => {
+  const context = useContext(WarqadConfigContext);
+  if (context === undefined) {
+    throw new Error("useWarqadConfig must be used within a WarqadProvider");
+  }
+  return context.config;
+};
+
+interface WarqadProviderProps {
+  children: ReactNode;
+  config?: WarqadConfig;
+}
+
+export const WarqadProvider = ({
+  children,
+  config = { apiUrl: "/api" },
+}: WarqadProviderProps) => {
+  // Merge default config with provided config
+  const mergedConfig: WarqadConfig = {
+    apiUrl: "/api",
+    ...config,
+    theme: {
+      primaryColor: "#3b82f6", // Default blue-500
+      ...config?.theme,
+    },
+  };
+
+  return (
+    <WarqadConfigContext.Provider value={{ config: mergedConfig }}>
+      <ThemeProvider>
+        <div
+          style={
+            {
+              "--primary-color": mergedConfig.theme?.primaryColor,
+            } as React.CSSProperties
+          }
+        >
+          {children}
+        </div>
+      </ThemeProvider>
+    </WarqadConfigContext.Provider>
+  );
+};

package/packages/ui/src/styles.css

@@ -0,0 +1,26 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    font-family:
+      "Inter",
+      system-ui,
+      -apple-system,
+      sans-serif;
+  }
+
+  body {
+    @apply antialiased text-slate-900 dark:text-slate-50;
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  }
+
+  *,
+  *::before,
+  *::after {
+    @apply transition-colors duration-500 ease-in-out;
+  }
+}

package/packages/ui/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/packages/ui/src/utils/pdf.ts

@@ -0,0 +1,171 @@
+import html2canvas from "html2canvas-pro";
+import { jsPDF } from "jspdf";
+
+export interface PdfOptions {
+  orientation?: "portrait" | "landscape";
+  unit?: "mm" | "cm" | "in" | "px";
+  format?: string | number[];
+  filename?: string;
+  margin?: number;
+  windowWidth?: number;
+  scale?: number;
+  showPageNumbers?: boolean;
+}
+
+/**
+ * Generates a text-based, searchable PDF from a DOM element.
+ *
+ * @param elementId The ID of the element to capture
+ * @param options PDF generation options
+ */
+export const generatePdf = async (
+  elementId: string,
+  options: PdfOptions = {},
+) => {
+  const {
+    orientation = "landscape",
+    unit = "mm",
+    format = "a4",
+    filename = "export.pdf",
+    margin = 10,
+    windowWidth = 1200,
+    scale = 1,
+    showPageNumbers = true,
+  } = options;
+
+  const element = document.getElementById(elementId);
+  if (!element) {
+    console.error(
+      `PDF generation failed: Element with ID "${elementId}" not found.`,
+    );
+    return;
+  }
+
+  try {
+    const pdf = new jsPDF({
+      orientation,
+      unit,
+      format,
+      compress: true,
+    });
+
+    const pageWidth = pdf.internal.pageSize.getWidth();
+    const pageHeight = pdf.internal.pageSize.getHeight();
+
+    // Ensure html2canvas-pro is globally available for jsPDF's internal calls
+    (window as any).html2canvas = html2canvas;
+
+    await pdf.html(element, {
+      callback: function (doc) {
+        if (showPageNumbers) {
+          const pageCount = (doc.internal as any).getNumberOfPages();
+          for (let i = 1; i <= pageCount; i++) {
+            doc.setPage(i);
+            doc.setFontSize(8); // Changed from 10 to 8
+            doc.setTextColor(150);
+            const text = `Page ${i} of ${pageCount}`;
+            const textWidth =
+              (doc.getStringUnitWidth(text) * 8) / doc.internal.scaleFactor; // Changed from 10 to 8
+            doc.text(text, (pageWidth - textWidth) / 2, pageHeight - 5); // Changed from -10 to -5
+          }
+        }
+
+        doc.save(filename);
+
+        // Open in new tab
+        const pdfBlob = doc.output("blob");
+        const url = URL.createObjectURL(pdfBlob);
+        window.open(url, "_blank");
+      },
+      x: margin,
+      y: margin,
+      width: pageWidth - margin * 2,
+      windowWidth: windowWidth,
+      html2canvas: {
+        useCORS: true,
+        scale: Math.max(scale, 2), // Ensure scale is at least 2 for text clarity
+        logging: false,
+        onclone: (clonedDoc: Document) => {
+          const elements = clonedDoc.getElementsByTagName("*");
+          const tempCanvas = clonedDoc.createElement("canvas");
+          tempCanvas.width = 1;
+          tempCanvas.height = 1;
+          const ctx = tempCanvas.getContext("2d");
+
+          // Ensure the target element takes the full window width in the clone
+          const target = clonedDoc.getElementById(elementId);
+          if (target) {
+            target.style.width = `${windowWidth}px`;
+            target.style.maxWidth = "none";
+          }
+
+          const toRgb = (color: string) => {
+            if (
+              !color ||
+              (!color.includes("oklch") && !color.includes("oklab"))
+            )
+              return color;
+            if (!ctx) return "rgb(0,0,0)";
+            try {
+              ctx.fillStyle = color;
+              const result = ctx.fillStyle;
+              // If the browser returns oklch/oklab even from canvas, force black
+              return result.includes("ok") ? "rgb(0,0,0)" : result;
+            } catch (e) {
+              return "rgb(0,0,0)";
+            }
+          };
+
+          // 1. Bake all computed colors as standard RGB into every element
+          for (let i = 0; i < elements.length; i++) {
+            const el = elements[i] as HTMLElement;
+            // Important: Use original window style as clone isn't rendered yet
+            const style = window.getComputedStyle(elements[i]);
+
+            const colorProps = [
+              "color",
+              "backgroundColor",
+              "borderColor",
+              "borderTopColor",
+              "borderBottomColor",
+              "borderLeftColor",
+              "borderRightColor",
+              "fill",
+              "stroke",
+              "outlineColor",
+              "stopColor",
+              "floodColor",
+              "lightingColor",
+            ];
+
+            colorProps.forEach((prop) => {
+              const val = (style as any)[prop];
+              if (val && (val.includes("oklch") || val.includes("oklab"))) {
+                (el.style as any)[prop] = toRgb(val);
+              }
+            });
+          }
+
+          // 2. Aggressively strip oklch/oklab from all style tags to prevent parser crash
+          const styleTags = clonedDoc.getElementsByTagName("style");
+          for (let i = 0; i < styleTags.length; i++) {
+            let cssText = styleTags[i].innerHTML;
+            if (cssText.includes("oklch") || cssText.includes("oklab")) {
+              cssText = cssText.replace(/oklch\([^)]+\)/g, "rgb(0,0,0)");
+              cssText = cssText.replace(/oklab\([^)]+\)/g, "rgb(0,0,0)");
+              styleTags[i].innerHTML = cssText;
+            }
+          }
+
+          // 3. Remove external stylesheets that might contain oklch variables
+          // (Since we baked computed styles into elements, we only need basic layout CSS)
+          // We'll keep them but try to sanitize if they are accessible (though usually not)
+        },
+      } as any,
+      autoPaging: "text",
+    });
+  } catch (error) {
+    console.error("PDF generation failed:", error);
+    throw error;
+  }
+};

package/packages/ui/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: "class",
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["Inter", "system-ui", "-apple-system", "sans-serif"],
+      },
+    },
+  },
+  plugins: [],
+};

package/packages/ui/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "declaration": true,
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noImplicitAny": false,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"]
+}