@shopify/shop-minis-react 0.4.0 → 0.4.2

package/src/internal/utils/resizeImage.ts

@@ -0,0 +1,108 @@
+import type {
+  ImageQuality,
+  CustomImageQuality,
+} from '../../providers/ImagePickerProvider'
+
+interface ResizeSettings {
+  size: number
+  compression: number
+}
+
+export interface ResizeImageParams {
+  file: File
+  quality: ImageQuality
+  customQuality?: CustomImageQuality
+}
+
+const QUALITY_SETTINGS: {
+  [key in Exclude<ImageQuality, 'original'>]: ResizeSettings
+} = {
+  low: {
+    size: 1080,
+    compression: 0.7,
+  },
+  medium: {
+    size: 1600,
+    compression: 0.85,
+  },
+  high: {
+    size: 2048,
+    compression: 0.92,
+  },
+} as const
+
+export function resizeImage({
+  file,
+  quality,
+  customQuality,
+}: ResizeImageParams): Promise<File> {
+  if (quality === 'original') {
+    return Promise.resolve(file)
+  }
+
+  const defaultSettings = QUALITY_SETTINGS[quality]
+  const settings: ResizeSettings = customQuality
+    ? {
+        size: customQuality.size ?? defaultSettings.size,
+        compression: customQuality.compression ?? defaultSettings.compression,
+      }
+    : defaultSettings
+  const maxSize = settings.size
+
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    const url = URL.createObjectURL(file)
+
+    img.onerror = () => {
+      URL.revokeObjectURL(url)
+      reject(new Error('Failed to load image'))
+    }
+
+    img.onload = () => {
+      URL.revokeObjectURL(url)
+
+      const canvas = document.createElement('canvas')
+      let width = img.width
+      let height = img.height
+
+      // Resize image dimensions maintaining aspect ratio
+      if (width > height) {
+        if (width > maxSize) {
+          height *= maxSize / width
+          width = maxSize
+        }
+      } else if (height > maxSize) {
+        width *= maxSize / height
+        height = maxSize
+      }
+
+      canvas.width = width
+      canvas.height = height
+
+      const ctx = canvas.getContext('2d')
+      if (!ctx) {
+        reject(new Error('Failed to get canvas context'))
+        return
+      }
+      ctx.drawImage(img, 0, 0, width, height)
+
+      canvas.toBlob(
+        blob => {
+          if (!blob) {
+            reject(new Error('Failed to create blob'))
+            return
+          }
+          const resizedFile = new File([blob], file.name, {
+            type: 'image/jpeg',
+            lastModified: Date.now(),
+          })
+          resolve(resizedFile)
+        },
+        'image/jpeg',
+        settings.compression
+      )
+    }
+
+    img.src = url
+  })
+}

package/src/providers/ImagePickerProvider.test.tsx

@@ -34,6 +34,37 @@ describe('ImagePickerProvider', () => {
     mockRequestPermission.mockResolvedValue({granted: true})
     // Clear interaction reporting mock
     mockReportInteraction.mockClear()
+
+    // Mock URL.createObjectURL and URL.revokeObjectURL for jsdom
+    global.URL.createObjectURL = vi.fn(() => 'blob:mock-url')
+    global.URL.revokeObjectURL = vi.fn()
+
+    // Mock Image constructor for resizing
+    global.Image = class MockImage {
+      width = 1920
+      height = 1080
+      onload = null as any
+      onerror = null as any
+      src = ''
+
+      constructor() {
+        setTimeout(() => {
+          if (this.onload) {
+            this.onload()
+          }
+        }, 0)
+      }
+    } as any
+
+    // Mock canvas methods
+    HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
+      drawImage: vi.fn(),
+    })) as any
+
+    HTMLCanvasElement.prototype.toBlob = vi.fn(callback => {
+      const blob = new Blob(['mock'], {type: 'image/jpeg'})
+      callback(blob)
+    }) as any
   })
 
   afterEach(() => {
@@ -334,7 +365,7 @@ describe('ImagePickerProvider', () => {
           <button
             type="button"
             onClick={() =>
-              openCamera('front').catch(() => {
+              openCamera({cameraFacing: 'front'}).catch(() => {
                 // Ignore errors from cleanup
               })
             }

package/src/providers/ImagePickerProvider.tsx

@@ -9,12 +9,29 @@ import React, {
 
 import {useRequestPermissions} from '../hooks/util/useRequestPermissions'
 import {useReportInteraction} from '../internal/useReportInteraction'
+import {resizeImage} from '../internal/utils/resizeImage'
 
+export type ImageQuality = 'low' | 'medium' | 'high' | 'original'
 export type CameraFacing = 'front' | 'back'
+export interface CustomImageQuality {
+  size?: number
+  compression?: number
+}
+
+export interface OpenCameraParams {
+  cameraFacing?: CameraFacing
+  quality?: ImageQuality
+  customQuality?: CustomImageQuality
+}
+
+export interface OpenGalleryParams {
+  quality?: ImageQuality
+  customQuality?: CustomImageQuality
+}
 
 interface ImagePickerContextValue {
-  openCamera: (cameraFacing?: CameraFacing) => Promise<File>
-  openGallery: () => Promise<File>
+  openCamera: (params?: OpenCameraParams) => Promise<File>
+  openGallery: (params?: OpenGalleryParams) => Promise<File>
 }
 
 const ImagePickerContext = createContext<ImagePickerContextValue | null>(null)
@@ -44,7 +61,8 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
     handler: () => void
   } | null>(null)
   const activeOperationRef = useRef<'gallery' | 'camera' | null>(null)
-
+  const qualityRef = useRef<ImageQuality>('medium')
+  const customQualityRef = useRef<CustomImageQuality>(undefined)
   const {requestPermission} = useRequestPermissions()
   const {reportInteraction} = useReportInteraction()
 
@@ -77,26 +95,41 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
       resolveRef.current = null
       rejectRef.current = null
       activeOperationRef.current = null
+      qualityRef.current = 'medium'
+      customQualityRef.current = undefined
     }
   }, [reportInteraction])
 
   const handleFileChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const file = event.target.files?.[0]
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const {target} = event
+      const file = target.files?.[0]
 
       if (file && resolveRef.current) {
-        // Report success based on the active operation
-        if (activeOperationRef.current === 'gallery') {
-          reportInteraction({
-            interactionType: 'image_picker_success',
-          })
-        } else if (activeOperationRef.current === 'camera') {
-          reportInteraction({
-            interactionType: 'camera_success',
+        try {
+          const resizedFile = await resizeImage({
+            file,
+            quality: qualityRef.current,
+            customQuality: customQualityRef.current,
           })
-        }
 
-        resolveRef.current(file)
+          if (activeOperationRef.current === 'gallery') {
+            reportInteraction({
+              interactionType: 'image_picker_success',
+            })
+          } else if (activeOperationRef.current === 'camera') {
+            reportInteraction({
+              interactionType: 'camera_success',
+            })
+          }
+
+          resolveRef.current(resizedFile)
+        } catch (error) {
+          console.warn('Image resize failed, using original:', error)
+          if (resolveRef.current) {
+            resolveRef.current(file)
+          }
+        }
 
         resolveRef.current = null
         rejectRef.current = null
@@ -105,80 +138,90 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
         cleanupCancelHandler()
       }
 
-      event.target.value = ''
+      target.value = ''
     },
     [cleanupCancelHandler, reportInteraction]
   )
 
-  const openGallery = useCallback(() => {
-    return new Promise<File>((resolve, reject) => {
-      rejectPendingPromise()
-      cleanupCancelHandler()
-
-      resolveRef.current = resolve
-      rejectRef.current = reject
-      activeOperationRef.current = 'gallery'
-
-      const input = galleryInputRef.current
+  const openGallery = useCallback(
+    ({quality = 'medium', customQuality}: OpenGalleryParams = {}) => {
+      return new Promise<File>((resolve, reject) => {
+        rejectPendingPromise()
+        cleanupCancelHandler()
 
-      if (!input) {
-        const error = new Error('Gallery input not found')
-        reportInteraction({
-          interactionType: 'image_picker_error',
-          interactionValue: error.message,
-        })
-        reject(error)
-        resolveRef.current = null
-        rejectRef.current = null
-        activeOperationRef.current = null
-        return
-      }
+        qualityRef.current = quality
+        customQualityRef.current = customQuality
+        resolveRef.current = resolve
+        rejectRef.current = reject
+        activeOperationRef.current = 'gallery'
+        const input = galleryInputRef.current
 
-      const handleCancel = () => {
-        if (rejectRef.current) {
-          const error = new Error('User cancelled file selection')
+        if (!input) {
+          const error = new Error('Gallery input not found')
           reportInteraction({
             interactionType: 'image_picker_error',
             interactionValue: error.message,
           })
-          rejectRef.current(error)
+          reject(error)
           resolveRef.current = null
           rejectRef.current = null
           activeOperationRef.current = null
+          return
         }
-        cleanupCancelHandler()
-      }
 
-      input.addEventListener('cancel', handleCancel)
-      activeCancelHandlerRef.current = {input, handler: handleCancel}
+        const handleCancel = () => {
+          if (rejectRef.current) {
+            const error = new Error('User cancelled file selection')
+            reportInteraction({
+              interactionType: 'image_picker_error',
+              interactionValue: error.message,
+            })
+            rejectRef.current(error)
+            resolveRef.current = null
+            rejectRef.current = null
+            activeOperationRef.current = null
+          }
+          cleanupCancelHandler()
+        }
 
-      reportInteraction({
-        interactionType: 'image_picker_open',
-      })
+        input.addEventListener('cancel', handleCancel)
+        activeCancelHandlerRef.current = {input, handler: handleCancel}
 
-      requestPermission({permission: 'CAMERA'})
-        .then(() => {
-          // This will show both Camera and Gallery
-          input.click()
-        })
-        .catch(() => {
-          // Show only Gallery
-          input.click()
+        reportInteraction({
+          interactionType: 'image_picker_open',
         })
-    })
-  }, [
-    rejectPendingPromise,
-    cleanupCancelHandler,
-    requestPermission,
-    reportInteraction,
-  ])
+
+        requestPermission({permission: 'CAMERA'})
+          .then(() => {
+            // This will show both Camera and Gallery
+            input.click()
+          })
+          .catch(() => {
+            // Show only Gallery
+            input.click()
+          })
+      })
+    },
+    [
+      rejectPendingPromise,
+      cleanupCancelHandler,
+      requestPermission,
+      reportInteraction,
+    ]
+  )
 
   const openCamera = useCallback(
-    (cameraFacing: CameraFacing = 'back') => {
+    ({
+      cameraFacing = 'back',
+      quality = 'medium',
+      customQuality,
+    }: OpenCameraParams = {}) => {
       return new Promise<File>((resolve, reject) => {
         rejectPendingPromise()
         cleanupCancelHandler()
 
+        qualityRef.current = quality
+        customQualityRef.current = customQuality
         resolveRef.current = resolve
         rejectRef.current = reject
         activeOperationRef.current = 'camera'

package/dist/components/atoms/pagination.js

@@ -1,10 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Skeleton as e } from "../ui/skeleton.js";
-import { TrackingPixel as i } from "./tracking-pixel.js";
-function c({ loadingComponent: r, fetchMore: n }) {
-  return /* @__PURE__ */ o(i, { onImpression: n, children: r ?? /* @__PURE__ */ o(e, { className: "h-10 w-full p-8" }) });
-}
-export {
-  c as Pagination
-};
-//# sourceMappingURL=pagination.js.map

package/dist/components/atoms/pagination.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pagination.js","sources":["../../../src/components/atoms/pagination.tsx"],"sourcesContent":["import {Skeleton} from '../ui/skeleton'\n\nimport {TrackingPixel} from './tracking-pixel'\n\ninterface Props {\n  loadingComponent?: React.ReactNode\n  isFetchingMore?: boolean\n  fetchMore: () => void\n}\n\nexport function Pagination({loadingComponent, fetchMore}: Props) {\n  const loadingPlaceholder = loadingComponent ?? (\n    <Skeleton className=\"h-10 w-full p-8\" />\n  )\n\n  return (\n    <TrackingPixel onImpression={fetchMore}>{loadingPlaceholder}</TrackingPixel>\n  )\n}\n"],"names":["Pagination","loadingComponent","fetchMore","jsx","TrackingPixel","Skeleton"],"mappings":";;;AAUO,SAASA,EAAW,EAAC,kBAAAC,GAAkB,WAAAC,KAAmB;AAK/D,SACG,gBAAAC,EAAAC,GAAA,EAAc,cAAcF,GAAY,UALhBD,KACxB,gBAAAE,EAAAE,GAAA,EAAS,WAAU,mBAAkB,GAIsB;AAEhE;"}

package/dist/components/atoms/tracking-pixel.js

@@ -1,32 +0,0 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useCallback as n } from "react";
-import { InView as c } from "../../shop-minis-react/node_modules/.pnpm/react-intersection-observer@9.13.1_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-intersection-observer/dist/index.js";
-const x = ({
-  children: o,
-  onImpression: r,
-  triggerOnce: i = !1,
-  threshold: t,
-  className: a
-}) => {
-  const e = n(
-    (f) => {
-      f && r?.();
-    },
-    [r]
-  );
-  return /* @__PURE__ */ m(
-    c,
-    {
-      as: "div",
-      onChange: e,
-      triggerOnce: i,
-      className: a,
-      threshold: t,
-      children: o
-    }
-  );
-};
-export {
-  x as TrackingPixel
-};
-//# sourceMappingURL=tracking-pixel.js.map

package/dist/components/atoms/tracking-pixel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tracking-pixel.js","sources":["../../../src/components/atoms/tracking-pixel.tsx"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {InView} from 'react-intersection-observer'\n\ninterface Props {\n  children: React.ReactNode\n  onImpression?: () => void\n  triggerOnce?: boolean\n  threshold?: number\n  className?: string\n}\n\nexport const TrackingPixel = ({\n  children,\n  onImpression,\n  triggerOnce = false,\n  threshold,\n  className,\n}: Props) => {\n  const onChange = useCallback(\n    (inView: boolean) => {\n      if (inView) {\n        onImpression?.()\n      }\n    },\n    [onImpression]\n  )\n\n  return (\n    <InView\n      as=\"div\"\n      onChange={onChange}\n      triggerOnce={triggerOnce}\n      className={className}\n      threshold={threshold}\n    >\n      {children}\n    </InView>\n  )\n}\n"],"names":["TrackingPixel","children","onImpression","triggerOnce","threshold","className","onChange","useCallback","inView","jsx","InView"],"mappings":";;;AAYO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,WAAAC;AACF,MAAa;AACX,QAAMC,IAAWC;AAAA,IACf,CAACC,MAAoB;AACnB,MAAIA,KACaN,IAAA;AAAA,IAEnB;AAAA,IACA,CAACA,CAAY;AAAA,EACf;AAGE,SAAA,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,UAAAJ;AAAA,MACA,aAAAH;AAAA,MACA,WAAAE;AAAA,MACA,WAAAD;AAAA,MAEC,UAAAH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/shop-minis-react/node_modules/.pnpm/react-intersection-observer@9.13.1_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-intersection-observer/dist/index.js

@@ -1,135 +0,0 @@
-import * as b from "react";
-var V = Object.defineProperty, w = (e, t, i) => t in e ? V(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, u = (e, t, i) => w(e, typeof t != "symbol" ? t + "" : t, i), p = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new WeakMap(), f = 0, _ = void 0;
-function I(e) {
-  return e ? (l.has(e) || (f += 1, l.set(e, f.toString())), l.get(e)) : "0";
-}
-function y(e) {
-  return Object.keys(e).sort().filter(
-    (t) => e[t] !== void 0
-  ).map((t) => `${t}_${t === "root" ? I(e.root) : e[t]}`).toString();
-}
-function m(e) {
-  const t = y(e);
-  let i = p.get(t);
-  if (!i) {
-    const r = /* @__PURE__ */ new Map();
-    let d;
-    const n = new IntersectionObserver((o) => {
-      o.forEach((s) => {
-        var h;
-        const c = s.isIntersecting && d.some((a) => s.intersectionRatio >= a);
-        e.trackVisibility && typeof s.isVisible > "u" && (s.isVisible = c), (h = r.get(s.target)) == null || h.forEach((a) => {
-          a(c, s);
-        });
-      });
-    }, e);
-    d = n.thresholds || (Array.isArray(e.threshold) ? e.threshold : [e.threshold || 0]), i = {
-      id: t,
-      observer: n,
-      elements: r
-    }, p.set(t, i);
-  }
-  return i;
-}
-function M(e, t, i = {}, r = _) {
-  if (typeof window.IntersectionObserver > "u" && r !== void 0) {
-    const h = e.getBoundingClientRect();
-    return t(r, {
-      isIntersecting: r,
-      target: e,
-      intersectionRatio: typeof i.threshold == "number" ? i.threshold : 0,
-      time: 0,
-      boundingClientRect: h,
-      intersectionRect: h,
-      rootBounds: h
-    }), () => {
-    };
-  }
-  const { id: d, observer: n, elements: o } = m(i), s = o.get(e) || [];
-  return o.has(e) || o.set(e, s), s.push(t), n.observe(e), function() {
-    s.splice(s.indexOf(t), 1), s.length === 0 && (o.delete(e), n.unobserve(e)), o.size === 0 && (n.disconnect(), p.delete(d));
-  };
-}
-function O(e) {
-  return typeof e.children != "function";
-}
-var R = class extends b.Component {
-  constructor(e) {
-    super(e), u(this, "node", null), u(this, "_unobserveCb", null), u(this, "handleNode", (t) => {
-      this.node && (this.unobserve(), !t && !this.props.triggerOnce && !this.props.skip && this.setState({ inView: !!this.props.initialInView, entry: void 0 })), this.node = t || null, this.observeNode();
-    }), u(this, "handleChange", (t, i) => {
-      t && this.props.triggerOnce && this.unobserve(), O(this.props) || this.setState({ inView: t, entry: i }), this.props.onChange && this.props.onChange(t, i);
-    }), this.state = {
-      inView: !!e.initialInView,
-      entry: void 0
-    };
-  }
-  componentDidMount() {
-    this.unobserve(), this.observeNode();
-  }
-  componentDidUpdate(e) {
-    (e.rootMargin !== this.props.rootMargin || e.root !== this.props.root || e.threshold !== this.props.threshold || e.skip !== this.props.skip || e.trackVisibility !== this.props.trackVisibility || e.delay !== this.props.delay) && (this.unobserve(), this.observeNode());
-  }
-  componentWillUnmount() {
-    this.unobserve();
-  }
-  observeNode() {
-    if (!this.node || this.props.skip) return;
-    const {
-      threshold: e,
-      root: t,
-      rootMargin: i,
-      trackVisibility: r,
-      delay: d,
-      fallbackInView: n
-    } = this.props;
-    this._unobserveCb = M(
-      this.node,
-      this.handleChange,
-      {
-        threshold: e,
-        root: t,
-        rootMargin: i,
-        // @ts-ignore
-        trackVisibility: r,
-        // @ts-ignore
-        delay: d
-      },
-      n
-    );
-  }
-  unobserve() {
-    this._unobserveCb && (this._unobserveCb(), this._unobserveCb = null);
-  }
-  render() {
-    const { children: e } = this.props;
-    if (typeof e == "function") {
-      const { inView: g, entry: C } = this.state;
-      return e({ inView: g, entry: C, ref: this.handleNode });
-    }
-    const {
-      as: t,
-      triggerOnce: i,
-      threshold: r,
-      root: d,
-      rootMargin: n,
-      onChange: o,
-      skip: s,
-      trackVisibility: h,
-      delay: c,
-      initialInView: a,
-      fallbackInView: N,
-      ...v
-    } = this.props;
-    return b.createElement(
-      t || "div",
-      { ref: this.handleNode, ...v },
-      e
-    );
-  }
-};
-export {
-  R as InView,
-  M as observe
-};
-//# sourceMappingURL=index.js.map

package/dist/shop-minis-react/node_modules/.pnpm/react-intersection-observer@9.13.1_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-intersection-observer/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../../node_modules/.pnpm/react-intersection-observer@9.13.1_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-intersection-observer/dist/index.mjs"],"sourcesContent":["\"use client\";\nvar __defProp = Object.defineProperty;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== \"symbol\" ? key + \"\" : key, value);\n\n// src/InView.tsx\nimport * as React from \"react\";\n\n// src/observe.ts\nvar observerMap = /* @__PURE__ */ new Map();\nvar RootIds = /* @__PURE__ */ new WeakMap();\nvar rootId = 0;\nvar unsupportedValue = void 0;\nfunction defaultFallbackInView(inView) {\n  unsupportedValue = inView;\n}\nfunction getRootId(root) {\n  if (!root) return \"0\";\n  if (RootIds.has(root)) return RootIds.get(root);\n  rootId += 1;\n  RootIds.set(root, rootId.toString());\n  return RootIds.get(root);\n}\nfunction optionsToId(options) {\n  return Object.keys(options).sort().filter(\n    (key) => options[key] !== void 0\n  ).map((key) => {\n    return `${key}_${key === \"root\" ? getRootId(options.root) : options[key]}`;\n  }).toString();\n}\nfunction createObserver(options) {\n  const id = optionsToId(options);\n  let instance = observerMap.get(id);\n  if (!instance) {\n    const elements = /* @__PURE__ */ new Map();\n    let thresholds;\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        var _a;\n        const inView = entry.isIntersecting && thresholds.some((threshold) => entry.intersectionRatio >= threshold);\n        if (options.trackVisibility && typeof entry.isVisible === \"undefined\") {\n          entry.isVisible = inView;\n        }\n        (_a = elements.get(entry.target)) == null ? void 0 : _a.forEach((callback) => {\n          callback(inView, entry);\n        });\n      });\n    }, options);\n    thresholds = observer.thresholds || (Array.isArray(options.threshold) ? options.threshold : [options.threshold || 0]);\n    instance = {\n      id,\n      observer,\n      elements\n    };\n    observerMap.set(id, instance);\n  }\n  return instance;\n}\nfunction observe(element, callback, options = {}, fallbackInView = unsupportedValue) {\n  if (typeof window.IntersectionObserver === \"undefined\" && fallbackInView !== void 0) {\n    const bounds = element.getBoundingClientRect();\n    callback(fallbackInView, {\n      isIntersecting: fallbackInView,\n      target: element,\n      intersectionRatio: typeof options.threshold === \"number\" ? options.threshold : 0,\n      time: 0,\n      boundingClientRect: bounds,\n      intersectionRect: bounds,\n      rootBounds: bounds\n    });\n    return () => {\n    };\n  }\n  const { id, observer, elements } = createObserver(options);\n  const callbacks = elements.get(element) || [];\n  if (!elements.has(element)) {\n    elements.set(element, callbacks);\n  }\n  callbacks.push(callback);\n  observer.observe(element);\n  return function unobserve() {\n    callbacks.splice(callbacks.indexOf(callback), 1);\n    if (callbacks.length === 0) {\n      elements.delete(element);\n      observer.unobserve(element);\n    }\n    if (elements.size === 0) {\n      observer.disconnect();\n      observerMap.delete(id);\n    }\n  };\n}\n\n// src/InView.tsx\nfunction isPlainChildren(props) {\n  return typeof props.children !== \"function\";\n}\nvar InView = class extends React.Component {\n  constructor(props) {\n    super(props);\n    __publicField(this, \"node\", null);\n    __publicField(this, \"_unobserveCb\", null);\n    __publicField(this, \"handleNode\", (node) => {\n      if (this.node) {\n        this.unobserve();\n        if (!node && !this.props.triggerOnce && !this.props.skip) {\n          this.setState({ inView: !!this.props.initialInView, entry: void 0 });\n        }\n      }\n      this.node = node ? node : null;\n      this.observeNode();\n    });\n    __publicField(this, \"handleChange\", (inView, entry) => {\n      if (inView && this.props.triggerOnce) {\n        this.unobserve();\n      }\n      if (!isPlainChildren(this.props)) {\n        this.setState({ inView, entry });\n      }\n      if (this.props.onChange) {\n        this.props.onChange(inView, entry);\n      }\n    });\n    this.state = {\n      inView: !!props.initialInView,\n      entry: void 0\n    };\n  }\n  componentDidMount() {\n    this.unobserve();\n    this.observeNode();\n  }\n  componentDidUpdate(prevProps) {\n    if (prevProps.rootMargin !== this.props.rootMargin || prevProps.root !== this.props.root || prevProps.threshold !== this.props.threshold || prevProps.skip !== this.props.skip || prevProps.trackVisibility !== this.props.trackVisibility || prevProps.delay !== this.props.delay) {\n      this.unobserve();\n      this.observeNode();\n    }\n  }\n  componentWillUnmount() {\n    this.unobserve();\n  }\n  observeNode() {\n    if (!this.node || this.props.skip) return;\n    const {\n      threshold,\n      root,\n      rootMargin,\n      trackVisibility,\n      delay,\n      fallbackInView\n    } = this.props;\n    this._unobserveCb = observe(\n      this.node,\n      this.handleChange,\n      {\n        threshold,\n        root,\n        rootMargin,\n        // @ts-ignore\n        trackVisibility,\n        // @ts-ignore\n        delay\n      },\n      fallbackInView\n    );\n  }\n  unobserve() {\n    if (this._unobserveCb) {\n      this._unobserveCb();\n      this._unobserveCb = null;\n    }\n  }\n  render() {\n    const { children } = this.props;\n    if (typeof children === \"function\") {\n      const { inView, entry } = this.state;\n      return children({ inView, entry, ref: this.handleNode });\n    }\n    const {\n      as,\n      triggerOnce,\n      threshold,\n      root,\n      rootMargin,\n      onChange,\n      skip,\n      trackVisibility,\n      delay,\n      initialInView,\n      fallbackInView,\n      ...props\n    } = this.props;\n    return React.createElement(\n      as || \"div\",\n      { ref: this.handleNode, ...props },\n      children\n    );\n  }\n};\n\n// src/useInView.tsx\nimport * as React2 from \"react\";\nfunction useInView({\n  threshold,\n  delay,\n  trackVisibility,\n  rootMargin,\n  root,\n  triggerOnce,\n  skip,\n  initialInView,\n  fallbackInView,\n  onChange\n} = {}) {\n  var _a;\n  const [ref, setRef] = React2.useState(null);\n  const callback = React2.useRef();\n  const [state, setState] = React2.useState({\n    inView: !!initialInView,\n    entry: void 0\n  });\n  callback.current = onChange;\n  React2.useEffect(\n    () => {\n      if (skip || !ref) return;\n      let unobserve;\n      unobserve = observe(\n        ref,\n        (inView, entry) => {\n          setState({\n            inView,\n            entry\n          });\n          if (callback.current) callback.current(inView, entry);\n          if (entry.isIntersecting && triggerOnce && unobserve) {\n            unobserve();\n            unobserve = void 0;\n          }\n        },\n        {\n          root,\n          rootMargin,\n          threshold,\n          // @ts-ignore\n          trackVisibility,\n          // @ts-ignore\n          delay\n        },\n        fallbackInView\n      );\n      return () => {\n        if (unobserve) {\n          unobserve();\n        }\n      };\n    },\n    // We break the rule here, because we aren't including the actual `threshold` variable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      // If the threshold is an array, convert it to a string, so it won't change between renders.\n      Array.isArray(threshold) ? threshold.toString() : threshold,\n      ref,\n      root,\n      rootMargin,\n      triggerOnce,\n      skip,\n      trackVisibility,\n      fallbackInView,\n      delay\n    ]\n  );\n  const entryTarget = (_a = state.entry) == null ? void 0 : _a.target;\n  const previousEntryTarget = React2.useRef();\n  if (!ref && entryTarget && !triggerOnce && !skip && previousEntryTarget.current !== entryTarget) {\n    previousEntryTarget.current = entryTarget;\n    setState({\n      inView: !!initialInView,\n      entry: void 0\n    });\n  }\n  const result = [setRef, state.inView, state.entry];\n  result.ref = result[0];\n  result.inView = result[1];\n  result.entry = result[2];\n  return result;\n}\nexport {\n  InView,\n  defaultFallbackInView,\n  observe,\n  useInView\n};\n//# sourceMappingURL=index.mjs.map"],"names":["__defProp","__defNormalProp","obj","key","value","__publicField","observerMap","RootIds","rootId","unsupportedValue","getRootId","root","optionsToId","options","createObserver","id","instance","elements","thresholds","observer","entries","entry","_a","inView","threshold","callback","observe","element","fallbackInView","bounds","callbacks","isPlainChildren","props","InView","React","node","prevProps","rootMargin","trackVisibility","delay","children","as","triggerOnce","onChange","skip","initialInView"],"mappings":"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","x_google_ignoreList":[0]}

package/src/components/atoms/pagination.tsx

@@ -1,19 +0,0 @@
-import {Skeleton} from '../ui/skeleton'
-
-import {TrackingPixel} from './tracking-pixel'
-
-interface Props {
-  loadingComponent?: React.ReactNode
-  isFetchingMore?: boolean
-  fetchMore: () => void
-}
-
-export function Pagination({loadingComponent, fetchMore}: Props) {
-  const loadingPlaceholder = loadingComponent ?? (
-    <Skeleton className="h-10 w-full p-8" />
-  )
-
-  return (
-    <TrackingPixel onImpression={fetchMore}>{loadingPlaceholder}</TrackingPixel>
-  )
-}

package/src/components/atoms/tracking-pixel.tsx

@@ -1,40 +0,0 @@
-import {useCallback} from 'react'
-
-import {InView} from 'react-intersection-observer'
-
-interface Props {
-  children: React.ReactNode
-  onImpression?: () => void
-  triggerOnce?: boolean
-  threshold?: number
-  className?: string
-}
-
-export const TrackingPixel = ({
-  children,
-  onImpression,
-  triggerOnce = false,
-  threshold,
-  className,
-}: Props) => {
-  const onChange = useCallback(
-    (inView: boolean) => {
-      if (inView) {
-        onImpression?.()
-      }
-    },
-    [onImpression]
-  )
-
-  return (
-    <InView
-      as="div"
-      onChange={onChange}
-      triggerOnce={triggerOnce}
-      className={className}
-      threshold={threshold}
-    >
-      {children}
-    </InView>
-  )
-}