@tapcart/mobile-components 0.7.22 → 0.7.24

package/dist/components/hooks/use-click-outside.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function useClickOutside(ref: React.RefObject<HTMLElement>, callback: () => void): void;
+//# sourceMappingURL=use-click-outside.d.ts.map

package/dist/components/hooks/use-click-outside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-click-outside.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-click-outside.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,eAAe,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAE,IAAI,CAa5F"}

package/dist/components/hooks/use-click-outside.js

@@ -0,0 +1,16 @@
+"use client";
+import React from 'react';
+export function useClickOutside(ref, callback) {
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                callback();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [ref, callback]);
+}
+;

package/dist/components/hooks/use-outside-click.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const useClickOutside: (ref: React.RefObject<HTMLElement>, callback: () => void) => void;
+export default useClickOutside;
+//# sourceMappingURL=use-outside-click.d.ts.map

package/dist/components/hooks/use-outside-click.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-outside-click.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-outside-click.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,eAAe,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,YAAY,MAAM,IAAI,SAa/E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/hooks/use-outside-click.js

@@ -0,0 +1,16 @@
+"use client";
+import React from 'react';
+const useClickOutside = (ref, callback) => {
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                callback();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [ref, callback]);
+};
+export default useClickOutside;

package/dist/components/hooks/use-recommendations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-recommendations.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-recommendations.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAKtD,UAAU,sBAAsB;IAC9B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAA;CACf;AAED,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,WAAW,EAAE,UAAU,EAAE,CAAA;IACzB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,GAAG,CAAA;CACX;AAOD,QAAA,MAAM,kBAAkB,+BAGrB,sBAAsB,KAAG,uBAsC3B,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"use-recommendations.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-recommendations.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAKtD,UAAU,sBAAsB;IAC9B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAA;CACf;AAED,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,WAAW,EAAE,UAAU,EAAE,CAAA;IACzB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,GAAG,CAAA;CACX;AAOD,QAAA,MAAM,kBAAkB,+BAGrB,sBAAsB,KAAG,uBAiC3B,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/hooks/use-recommendations.js

@@ -7,27 +7,24 @@ const constructURL = (apiURL) => {
 };
 const useRecommendations = ({ queryVariables, apiURL }) => {
     const searchParams = useSearchParams();
-    const recommendation = searchParams.get('recommendation');
-    const shouldFetch = recommendation && recommendation.trim().length > 0;
-    //To remove when pageState data is available to block tempaltes
+    const recommendation = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get('recommendation')) || "*";
+    const isBestSeller = recommendation === "*";
     const fetcher = (body) => fetch(constructURL(apiURL), {
         method: "POST",
         body: JSON.stringify(body),
     }).then((res) => res.json());
-    const { data, error, isLoading } = useSWR(shouldFetch
-        ? {
-            appId: queryVariables.appId,
-            query: recommendation,
-            language: queryVariables.language,
-        }
-        : null, fetcher, {
+    const { data, error, isLoading } = useSWR({
+        appId: queryVariables.appId,
+        query: recommendation,
+        language: queryVariables.language,
+    }, fetcher, {
         revalidateOnFocus: false,
         revalidateOnReconnect: false,
     });
     return {
         products: data === null || data === void 0 ? void 0 : data.products,
         collections: data === null || data === void 0 ? void 0 : data.collections,
-        searches: data === null || data === void 0 ? void 0 : data.searches,
+        searches: isBestSeller ? [] : data === null || data === void 0 ? void 0 : data.searches,
         isLoading: isLoading,
         error: error
     };

package/dist/components/ui/scroll-area.d.ts

@@ -3,6 +3,7 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 type Orientation = "horizontal" | "vertical";
 declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     wrapperClass?: string | undefined;
+    wrapperStyle?: React.CSSProperties | undefined;
     scrollbar: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & {

package/dist/components/ui/scroll-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../components/ui/scroll-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAIlE,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAA;AAE5C,QAAA,MAAM,UAAU;;eAID,OAAO;wCAcpB,CAAA;AAGF,QAAA,MAAM,SAAS;;wCAuBb,CAAA;AAGF,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../components/ui/scroll-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAIlE,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAA;AAE5C,QAAA,MAAM,UAAU;;;eAKD,OAAO;wCA4BrB,CAAA;AAGD,QAAA,MAAM,SAAS;;wCAuBb,CAAA;AAGF,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/ui/scroll-area.js

@@ -15,8 +15,8 @@ import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../lib/utils";
 const ScrollArea = React.forwardRef((_a, ref) => {
-    var { className, wrapperClass, scrollbar = true, children } = _a, props = __rest(_a, ["className", "wrapperClass", "scrollbar", "children"]);
-    return (_jsxs(ScrollAreaPrimitive.Root, Object.assign({ ref: ref, className: cn("relative overflow-hidden", className) }, props, { children: [_jsx(ScrollAreaPrimitive.Viewport, Object.assign({ className: "h-full w-full rounded-[inherit]" }, { children: _jsx("div", Object.assign({ className: cn("flex w-max", wrapperClass) }, { children: children })) })), _jsx(ScrollBar, { className: scrollbar ? "" : "hidden" }), _jsx(ScrollAreaPrimitive.Corner, {})] })));
+    var { className, wrapperClass, wrapperStyle, scrollbar = true, children } = _a, props = __rest(_a, ["className", "wrapperClass", "wrapperStyle", "scrollbar", "children"]);
+    return (_jsxs(ScrollAreaPrimitive.Root, Object.assign({ ref: ref, className: cn("relative overflow-hidden", className) }, props, { children: [_jsx(ScrollAreaPrimitive.Viewport, Object.assign({ className: "h-full w-full rounded-[inherit]" }, { children: _jsx("div", Object.assign({ className: cn("flex w-max", wrapperClass), style: wrapperStyle }, { children: children })) })), _jsx(ScrollBar, { className: scrollbar ? "" : "hidden" }), _jsx(ScrollAreaPrimitive.Corner, {})] })));
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 const ScrollBar = React.forwardRef((_a, ref) => {

package/dist/styles.css

@@ -847,6 +847,9 @@ video {
 .mr-4 {
   margin-right: 1rem;
 }
+.mr-8 {
+  margin-right: 2rem;
+}
 .mt-0 {
   margin-top: 0px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.7.22",
+  "version": "0.7.24",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -30,9 +30,9 @@
     "ts-jest": "^29.2.5",
     "tsc-alias": "^1.8.10",
     "typescript": "^4.5.2",
-    "tsconfig": "0.0.0",
+    "app-studio-types": "0.0.5",
     "eslint-config-custom": "0.0.0",
-    "app-studio-types": "0.0.5"
+    "tsconfig": "0.0.0"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",

package/dist/components/ui/input.d.ts

@@ -1,17 +0,0 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-declare const inputVariants: (props?: ({
-    error?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">, VariantProps<typeof inputVariants> {
-    id: string;
-    label?: string;
-    icon?: string;
-    asChild?: boolean;
-    value: string;
-    placeholder: string;
-    onChange: (_: string) => void;
-}
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-export { Input };
-//# sourceMappingURL=input.d.ts.map

package/dist/components/ui/input.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../components/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa;;mFAalB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,EACnE,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B;AAED,QAAA,MAAM,KAAK,qFAkDV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/input.js

@@ -1,35 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-import { Icon } from "./icon";
-const inputVariants = cva("flex h-14 w-full rounded border border-coreColors-dividingLines bg-coreColors-inputBackground px-4 pt-5 pb-2 placeholder-shown:p-4 text-textColors-primaryColor text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-textColors-secondaryColor focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 focus:border-coreColors-brandColorPrimary peer data-[icon=true]:pr-10", {
-    variants: {
-        error: {
-            true: "border-stateColors-error text-stateColors-error placeholder:text-stateColors-error focus:border-stateColors-error [&+label]:text-stateColors-error",
-            false: "",
-        },
-    },
-    defaultVariants: {
-        error: false,
-    },
-});
-const Input = React.forwardRef((_a, ref) => {
-    var { className, error = false, id, type, label, icon, asChild, value, placeholder, onChange } = _a, props = __rest(_a, ["className", "error", "id", "type", "label", "icon", "asChild", "value", "placeholder", "onChange"]);
-    const Comp = asChild ? Slot : "div";
-    return (_jsxs(Comp, Object.assign({ className: "relative group" }, { children: [_jsx("input", Object.assign({ placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), id: id, type: type, className: cn(inputVariants({ error }), className), "data-icon": !!icon, ref: ref }, props)), label ? (_jsx("label", Object.assign({ htmlFor: id, className: "absolute text-[10px] text-textColors-secondaryColor group-active:text-coreColors-brandColorPrimary top-2 z-10 h-4 origin-[0] start-4 opacity-100 peer-placeholder-shown:opacity-0" }, { children: label }))) : null, icon ? (_jsx(Icon, { name: icon, "data-error": error, size: "sm", className: "absolute w-5 aspect-square fill-current text-textColors-secondaryColor top-[18px] z-10 origin-[0] end-4 peer-pr-8 icon data-[error=true]:text-stateColors-error" })) : null] })));
-});
-Input.displayName = "Input";
-export { Input };

package/dist/components/ui/product-grid.d.ts

@@ -1,15 +0,0 @@
-type Product = any;
-interface PageData {
-    products: Product[];
-    cursorBlob?: string;
-    filtersData: any;
-}
-interface ProductGridItemsProps {
-    initialData: PageData;
-    loadMoreProducts: (params: any) => Promise<PageData>;
-    queryVariables: Record<string, any>;
-    config: Record<string, any>;
-}
-declare function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, }: ProductGridItemsProps): import("react/jsx-runtime").JSX.Element;
-export { ProductGrid };
-//# sourceMappingURL=product-grid.d.ts.map

package/dist/components/ui/product-grid.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"product-grid.d.ts","sourceRoot":"","sources":["../../../components/ui/product-grid.tsx"],"names":[],"mappings":"AAkBA,KAAK,OAAO,GAAG,GAAG,CAAA;AAClB,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,GAAG,CAAA;CACjB;AAED,UAAU,qBAAqB;IAC7B,WAAW,EAAE,QAAQ,CAAA;IACrB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAA;IACpD,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAC5B;AAED,iBAAS,WAAW,CAAC,EACnB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,MAAM,GACP,EAAE,qBAAqB,2CAmCvB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/product-grid.js

@@ -1,22 +0,0 @@
-"use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useInfiniteScroll } from "../hooks/use-infinite-scroll";
-import { ProductCard } from "./product-card";
-const Loader = () => (_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: Array(4)
-        .fill(0)
-        .map((_, index) => (_jsx("div", { className: "aspect-[2/3] animate-pulse bg-neutral-100 dark:bg-neutral-900" }, index))) })));
-function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, }) {
-    const { data, error, isLoadingInitialData, isLoadingMore, isEmpty, isReachingEnd, ref, products, } = useInfiniteScroll({
-        initialData,
-        loadMoreProducts,
-        queryVariables,
-    });
-    if (error)
-        return _jsx("div", { children: "Failed to load data" });
-    if (isLoadingInitialData)
-        return _jsx(Loader, {});
-    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: products.map((product, i) => (_jsx(ProductCard, { 
-                    // @ts-expect-error
-                    product: product, config: config, isLoading: false }, product.handle))) })), isLoadingMore ? _jsx(Loader, {}) : _jsx("div", { ref: ref })] }));
-}
-export { ProductGrid };