@crestbase/web-shared-ui 1.0.0 → 1.0.2

package/dist/utils/googleMapsLoader.d.ts

@@ -0,0 +1,40 @@
+declare global {
+    interface Window {
+        google?: {
+            maps?: {
+                places?: {
+                    Autocomplete: new (input: HTMLInputElement, options?: Record<string, unknown>) => {
+                        addListener: (event: string, callback: () => void) => void;
+                        getPlace: () => {
+                            geometry?: {
+                                location: {
+                                    lat: () => number;
+                                    lng: () => number;
+                                };
+                            };
+                            formatted_address?: string;
+                            name?: string;
+                        };
+                    };
+                };
+            };
+        };
+    }
+}
+declare class GoogleMapsLoader {
+    private state;
+    private scriptId;
+    load(callback?: () => void): void;
+    isLoaded(): boolean;
+    isLoading(): boolean;
+    private isGoogleMapsAvailable;
+    private loadScript;
+    private getApiKey;
+    private markAsLoaded;
+}
+export declare const googleMapsLoader: GoogleMapsLoader;
+export declare const useGoogleMaps: (callback?: () => void) => {
+    isLoaded: boolean;
+    isLoading: boolean;
+};
+export {};

package/dist/utils/googleMapsLoader.js

@@ -0,0 +1,108 @@
+// Global Google Maps API loader utility for shared UI
+// Prevents multiple script inclusions and manages loading state
+import React from "react";
+class GoogleMapsLoader {
+    constructor() {
+        this.state = {
+            isLoaded: false,
+            isLoading: false,
+            callbacks: [],
+        };
+        this.scriptId = "google-maps-script";
+    }
+    load(callback) {
+        if (this.state.isLoaded) {
+            callback?.();
+            return;
+        }
+        if (callback) {
+            this.state.callbacks.push(callback);
+        }
+        if (this.state.isLoading) {
+            return;
+        }
+        if (this.isGoogleMapsAvailable()) {
+            this.markAsLoaded();
+            return;
+        }
+        const existingScript = document.getElementById(this.scriptId);
+        if (existingScript) {
+            this.state.isLoading = true;
+            return;
+        }
+        this.state.isLoading = true;
+        this.loadScript();
+    }
+    isLoaded() {
+        return this.state.isLoaded || this.isGoogleMapsAvailable();
+    }
+    isLoading() {
+        return this.state.isLoading;
+    }
+    isGoogleMapsAvailable() {
+        return typeof window !== "undefined" && !!(window.google && window.google.maps);
+    }
+    loadScript() {
+        const script = document.createElement("script");
+        script.id = this.scriptId;
+        const apiKey = this.getApiKey();
+        script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`;
+        script.async = true;
+        script.defer = true;
+        script.onload = () => {
+            this.markAsLoaded();
+        };
+        script.onerror = () => {
+            console.error("Failed to load Google Maps API");
+            this.state.isLoading = false;
+        };
+        document.head.appendChild(script);
+    }
+    getApiKey() {
+        try {
+            const fromProcess = typeof process !== "undefined" ? process?.env?.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY : undefined;
+            const fromWindow = typeof window !== "undefined" ? window?.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY : undefined;
+            const key = fromProcess || fromWindow || "";
+            if (!key) {
+                console.warn("Google Maps API key is missing. Set NEXT_PUBLIC_GOOGLE_MAPS_API_KEY.");
+            }
+            return key;
+        }
+        catch {
+            return "";
+        }
+    }
+    markAsLoaded() {
+        this.state.isLoaded = true;
+        this.state.isLoading = false;
+        this.state.callbacks.forEach((callback) => {
+            try {
+                callback();
+            }
+            catch (error) {
+                console.error("Error executing Google Maps callback:", error);
+            }
+        });
+        this.state.callbacks = [];
+    }
+}
+export const googleMapsLoader = new GoogleMapsLoader();
+export const useGoogleMaps = (callback) => {
+    const [isLoaded, setIsLoaded] = React.useState(googleMapsLoader.isLoaded());
+    const [isLoading, setIsLoading] = React.useState(googleMapsLoader.isLoading());
+    React.useEffect(() => {
+        if (googleMapsLoader.isLoaded()) {
+            setIsLoaded(true);
+            setIsLoading(false);
+            callback?.();
+            return;
+        }
+        setIsLoading(true);
+        googleMapsLoader.load(() => {
+            setIsLoaded(true);
+            setIsLoading(false);
+            callback?.();
+        });
+    }, [callback]);
+    return { isLoaded, isLoading };
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export declare function formatNumberWithCommas(value: string | number): string;
+export declare function getCleanNumber(value: string | number): string;
+export { isImageFile, isVideoFile, isVideoFileGeneric, validateImageRequirement, separateFilesByType, getFileType, validateFileCollection, } from "./fileValidation";

package/dist/utils/index.js

@@ -0,0 +1,13 @@
+export function formatNumberWithCommas(value) {
+    const str = String(value ?? "").replace(/[^\d.]/g, "");
+    if (!str)
+        return "";
+    const [intPart, decimalPart] = str.split(".");
+    const withCommas = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return decimalPart ? `${withCommas}.${decimalPart}` : withCommas;
+}
+export function getCleanNumber(value) {
+    return String(value ?? "").replace(/[^\d.]/g, "");
+}
+// File validation utils
+export { isImageFile, isVideoFile, isVideoFileGeneric, validateImageRequirement, separateFilesByType, getFileType, validateFileCollection, } from "./fileValidation";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crestbase/web-shared-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Shared UI components for Crestbase web app and admin",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,9 +9,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "prepublishOnly": "yarn build",
+    "build": "rm -rf dist && tsc && tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify && node scripts/strip-preflight.js",
+    "dev:ts": "tsc --watch --preserveWatchOutput",
+    "dev:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch",
+    "dev": "sh -c 'npm run dev:ts & npm run dev:css'",
+    "prepublishOnly": "npm run build",
     "lint": "eslint src --ext .ts,.tsx"
   },
   "keywords": [
@@ -24,17 +26,25 @@
   "author": "EmmanuelChika <Developer.mycrestbase@gmail.com>",
   "license": "MIT",
   "peerDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "zustand": "^4 || ^5",
+    "lucide-react": ">=0.470.0 <1"
   },
+  "dependencies": {},
   "devDependencies": {
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
-    "@typescript-eslint/eslint-plugin": "^8.46.2",
-    "@typescript-eslint/parser": "^8.46.2",
     "eslint": "^9.38.0",
-    "typescript": "^5.9.3"
-  }
+    "typescript": "^5.9.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "zustand": "^5.0.6",
+    "lucide-react": "^0.525.0",
+    "tailwindcss": "4.1.16",
+    "@tailwindcss/cli": "4.1.16"
+  },
+  "sideEffects": [
+    "dist/styles.css"
+  ]
 }

package/dist/components/button/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM,+CAEX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/button/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":";AAEA,MAAM,MAAM,GAAG,GAAG,EAAE;IAClB,OAAO,mCAAiB,CAAC;AAC3B,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC"}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0DAA0D;AAC1D,cAAc,cAAc,CAAC"}