@instockng/storefront-ui 1.0.19 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instockng/storefront-ui",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "Pre-built UI components for OMS e-commerce sites",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,13 +20,6 @@
     "src",
     "README.md"
   ],
-  "scripts": {
-    "type-check": "tsc --noEmit",
-    "build": "vite build && vite build --config vite.config.css.ts && tsc --project tsconfig.build.json",
-    "prepublishOnly": "npm run build",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ola-wale/oms.git",
@@ -65,8 +58,8 @@
     "@storybook/test": "^8.6.14",
     "@tailwindcss/postcss": "^4.1.14",
     "@tanstack/react-query": "^5.17.19",
-    "@types/react": "npm:types-react@^19.0.0-rc.1",
-    "@types/react-dom": "npm:types-react-dom@^19.0.0-rc.1",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^4.7.0",
     "autoprefixer": "^10.4.21",
     "lucide-react": "^0.536.0",
@@ -79,5 +72,11 @@
     "tailwindcss": "^4.1.14",
     "typescript": "^5.3.3",
     "vite": "^5.4.20"
+  },
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "build": "vite build && vite build --config vite.config.css.ts && tsc --project tsconfig.build.json || true",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
-}
+}

package/src/components/ui/modal.tsx

@@ -46,7 +46,7 @@ export function Modal({
   size = 'md',
   closeOnOverlayClick = true,
   showCloseButton = true,
-}: ModalProps): JSX.Element | null {
+}: ModalProps): React.ReactElement | null {
   const modalRef = useRef<HTMLDivElement>(null);
   const [isAnimating, setIsAnimating] = useState(false);
   const [shouldRender, setShouldRender] = useState(isOpen);

package/src/providers/MetaPixelProvider.tsx

@@ -7,7 +7,6 @@
  */
 
 import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
-import ReactPixel from 'react-facebook-pixel';
 
 interface PurchaseItem {
   id: string; // SKU
@@ -90,10 +89,14 @@ export interface MetaPixelProviderProps {
  */
 export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProviderProps) {
   const [isInitialized, setIsInitialized] = useState(false);
-  const isDevelopment = process.env.NODE_ENV === 'development';
+  const [reactPixel, setReactPixel] = useState<any>(null);
+  const isDevelopment = typeof process !== 'undefined' && process.env.NODE_ENV === 'development';
   const shouldDebug = debug ?? isDevelopment;
 
   useEffect(() => {
+    // Skip if running on server
+    if (typeof window === 'undefined') return;
+
     if (!pixelId) {
       if (shouldDebug) {
         console.log('[Meta Pixel] No pixel ID provided, tracking disabled');
@@ -101,29 +104,37 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
       return;
     }
 
-    // Initialize Meta Pixel
-    const options = {
-      autoConfig: true,
-      debug: shouldDebug,
-    };
+    // Dynamically import react-facebook-pixel only on client
+    import('react-facebook-pixel').then((module) => {
+      const ReactPixel = module.default;
 
-    ReactPixel.init(pixelId, undefined, options);
-    setIsInitialized(true);
+      // Initialize Meta Pixel (client-side only)
+      const options = {
+        autoConfig: true,
+        debug: shouldDebug,
+      };
 
-    if (shouldDebug) {
-      console.log('[Meta Pixel] Initialized with ID:', pixelId);
-    }
+      ReactPixel.init(pixelId, undefined, options);
+      setReactPixel(ReactPixel);
+      setIsInitialized(true);
+
+      if (shouldDebug) {
+        console.log('[Meta Pixel] Initialized with ID:', pixelId);
+      }
+    }).catch((error) => {
+      console.error('[Meta Pixel] Failed to load react-facebook-pixel:', error);
+    });
   }, [pixelId, shouldDebug]);
 
   const track = (event: string, data?: Record<string, unknown>) => {
-    if (!isInitialized) {
+    if (!isInitialized || !reactPixel) {
       if (shouldDebug) {
         console.log('[Meta Pixel] Track (not initialized):', event, data);
       }
       return;
     }
 
-    ReactPixel.track(event, data);
+    reactPixel.track(event, data);
 
     if (shouldDebug) {
       console.log('[Meta Pixel] Track:', event, data);
@@ -131,14 +142,14 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
   };
 
   const trackPageView = () => {
-    if (!isInitialized) {
+    if (!isInitialized || !reactPixel) {
       if (shouldDebug) {
         console.log('[Meta Pixel] PageView (not initialized)');
       }
       return;
     }
 
-    ReactPixel.pageView();
+    reactPixel.pageView();
 
     if (shouldDebug) {
       console.log('[Meta Pixel] PageView');