@tapcart/mobile-components 0.7.23 → 0.7.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ export declare function useClickOutside(ref: React.RefObject<HTMLElement>, callback: () => void): void;
3
+ //# sourceMappingURL=use-click-outside.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,16 @@
1
+ "use client";
2
+ import React from 'react';
3
+ export function useClickOutside(ref, callback) {
4
+ React.useEffect(() => {
5
+ const handleClickOutside = (event) => {
6
+ if (ref.current && !ref.current.contains(event.target)) {
7
+ callback();
8
+ }
9
+ };
10
+ document.addEventListener('mousedown', handleClickOutside);
11
+ return () => {
12
+ document.removeEventListener('mousedown', handleClickOutside);
13
+ };
14
+ }, [ref, callback]);
15
+ }
16
+ ;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ declare const useClickOutside: (ref: React.RefObject<HTMLElement>, callback: () => void) => void;
3
+ export default useClickOutside;
4
+ //# sourceMappingURL=use-outside-click.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,16 @@
1
+ "use client";
2
+ import React from 'react';
3
+ const useClickOutside = (ref, callback) => {
4
+ React.useEffect(() => {
5
+ const handleClickOutside = (event) => {
6
+ if (ref.current && !ref.current.contains(event.target)) {
7
+ callback();
8
+ }
9
+ };
10
+ document.addEventListener('mousedown', handleClickOutside);
11
+ return () => {
12
+ document.removeEventListener('mousedown', handleClickOutside);
13
+ };
14
+ }, [ref, callback]);
15
+ };
16
+ export default useClickOutside;
@@ -1 +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"}
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,uBAiC3B,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}
@@ -7,27 +7,24 @@ const constructURL = (apiURL) => {
7
7
  };
8
8
  const useRecommendations = ({ queryVariables, apiURL }) => {
9
9
  const searchParams = useSearchParams();
10
- const recommendation = searchParams.get('recommendation');
11
- const shouldFetch = recommendation && recommendation.trim().length > 0;
12
- //To remove when pageState data is available to block tempaltes
10
+ const recommendation = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get('recommendation')) || "*";
11
+ const isBestSeller = recommendation === "*";
13
12
  const fetcher = (body) => fetch(constructURL(apiURL), {
14
13
  method: "POST",
15
14
  body: JSON.stringify(body),
16
15
  }).then((res) => res.json());
17
- const { data, error, isLoading } = useSWR(shouldFetch
18
- ? {
19
- appId: queryVariables.appId,
20
- query: recommendation,
21
- language: queryVariables.language,
22
- }
23
- : null, fetcher, {
16
+ const { data, error, isLoading } = useSWR({
17
+ appId: queryVariables.appId,
18
+ query: recommendation,
19
+ language: queryVariables.language,
20
+ }, fetcher, {
24
21
  revalidateOnFocus: false,
25
22
  revalidateOnReconnect: false,
26
23
  });
27
24
  return {
28
25
  products: data === null || data === void 0 ? void 0 : data.products,
29
26
  collections: data === null || data === void 0 ? void 0 : data.collections,
30
- searches: data === null || data === void 0 ? void 0 : data.searches,
27
+ searches: isBestSeller ? [] : data === null || data === void 0 ? void 0 : data.searches,
31
28
  isLoading: isLoading,
32
29
  error: error
33
30
  };
@@ -0,0 +1,8 @@
1
+ import React from "react";
2
+ declare const useTap: (tapThreshold?: number) => {
3
+ onTap: (handler: (event: any) => void) => (event: any) => void;
4
+ isPressed: boolean;
5
+ ref: React.MutableRefObject<null>;
6
+ };
7
+ export { useTap };
8
+ //# sourceMappingURL=use-tap.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-tap.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-tap.ts"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAuFvE,QAAA,MAAM,MAAM;6BAuBkC,GAAG,KAAK,IAAI,aACvC,GAAG;;;CAerB,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
@@ -0,0 +1,100 @@
1
+ "use client";
2
+ import { useState, useEffect, useCallback, useRef } from "react";
3
+ // Shared manager for all instances of the hook
4
+ const tapManager = (() => {
5
+ const elements = new Map();
6
+ let isListening = false;
7
+ const startListening = () => {
8
+ if (isListening)
9
+ return;
10
+ const handleTouchStart = (e) => {
11
+ const touch = e.touches[0];
12
+ elements.forEach((data, el) => {
13
+ if (el.contains(touch.target)) {
14
+ data.touchStarted = true;
15
+ data.touchMoved = false;
16
+ data.startPosition = { x: touch.clientX, y: touch.clientY };
17
+ // Don't set isPressed here, wait to determine if it's a tap or drag
18
+ }
19
+ });
20
+ };
21
+ const handleTouchMove = (e) => {
22
+ const touch = e.touches[0];
23
+ elements.forEach((data, el) => {
24
+ if (data.touchStarted) {
25
+ const deltaX = Math.abs(touch.clientX - data.startPosition.x);
26
+ const deltaY = Math.abs(touch.clientY - data.startPosition.y);
27
+ if (deltaX > data.tapThreshold || deltaY > data.tapThreshold) {
28
+ data.touchMoved = true;
29
+ data.setIsPressed(false);
30
+ }
31
+ }
32
+ });
33
+ };
34
+ const handleTouchEnd = () => {
35
+ elements.forEach((data) => {
36
+ if (data.touchStarted) {
37
+ data.touchStarted = false;
38
+ if (!data.touchMoved) {
39
+ // It's a tap, set isPressed briefly
40
+ data.setIsPressed(true);
41
+ setTimeout(() => data.setIsPressed(false), 100);
42
+ }
43
+ }
44
+ });
45
+ };
46
+ document.addEventListener("touchstart", (e) => handleTouchStart(e), { passive: true });
47
+ document.addEventListener("touchmove", (e) => handleTouchMove(e), { passive: true });
48
+ document.addEventListener("touchend", () => handleTouchEnd(), {
49
+ passive: true,
50
+ });
51
+ isListening = true;
52
+ };
53
+ return {
54
+ register: (el, data) => {
55
+ elements.set(el, data);
56
+ startListening();
57
+ },
58
+ unregister: (el) => {
59
+ elements.delete(el);
60
+ },
61
+ elements,
62
+ };
63
+ })();
64
+ const useTap = (tapThreshold = 10) => {
65
+ const [isPressed, setIsPressed] = useState(false);
66
+ const elementRef = useRef(null);
67
+ useEffect(() => {
68
+ const element = elementRef.current;
69
+ if (!element)
70
+ return;
71
+ const data = {
72
+ touchStarted: false,
73
+ touchMoved: false,
74
+ startPosition: { x: 0, y: 0 },
75
+ setIsPressed,
76
+ tapThreshold,
77
+ };
78
+ tapManager.register(element, data);
79
+ return () => {
80
+ tapManager.unregister(element);
81
+ };
82
+ }, [tapThreshold]);
83
+ const onTap = useCallback((handler) => {
84
+ return (event) => {
85
+ const data = tapManager.elements.get(elementRef.current);
86
+ if (!data)
87
+ return;
88
+ if (event.type === "touchend" && !data.touchMoved) {
89
+ handler(event);
90
+ }
91
+ else if (event.type === "click" && !data.touchStarted) {
92
+ handler(event);
93
+ setIsPressed(true);
94
+ setTimeout(() => setIsPressed(false), 100);
95
+ }
96
+ };
97
+ }, []);
98
+ return { onTap, isPressed, ref: elementRef };
99
+ };
100
+ export { useTap };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tapcart/mobile-components",
3
- "version": "0.7.23",
3
+ "version": "0.7.24",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "style": "dist/styles.css",
@@ -11,18 +11,6 @@
11
11
  "license": "SEE LICENSE IN LICENSE.md",
12
12
  "author": "Tapcart Inc.",
13
13
  "homepage": "https://tapcart.com",
14
- "scripts": {
15
- "lint": "eslint \"**/*.ts*\"",
16
- "ui:add": "pnpm dlx shadcn-ui@latest add",
17
- "build:styles": "postcss styles/globals.css -o dist/styles.css",
18
- "build:ts": "tsc -p tsconfig.json && tsc-alias",
19
- "build": "pnpm run build:ts && pnpm run build:styles",
20
- "dev:ts": "tsc -w -p tsconfig.json",
21
- "dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
22
- "dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\"",
23
- "test": "jest",
24
- "test:watch": "jest --watch"
25
- },
26
14
  "peerDependencies": {
27
15
  "react": "^17.0.2 || ^18.0.0",
28
16
  "react-dom": "^17.0.2 || ^18.0.0"
@@ -32,19 +20,19 @@
32
20
  "@types/lodash": "4.17.5",
33
21
  "@types/react": "^18.2.0",
34
22
  "@types/react-dom": "^18.2.0",
35
- "app-studio-types": "workspace:*",
36
23
  "autoprefixer": "^10.4.14",
37
24
  "chokidar-cli": "^3.0.0",
38
25
  "concurrently": "^8.2.2",
39
26
  "eslint": "^7.32.0",
40
- "eslint-config-custom": "workspace:*",
41
27
  "jest": "^29.7.0",
42
28
  "postcss": "^8.4.24",
43
29
  "tailwindcss": "^3.3.2",
44
30
  "ts-jest": "^29.2.5",
45
31
  "tsc-alias": "^1.8.10",
46
- "tsconfig": "workspace:*",
47
- "typescript": "^4.5.2"
32
+ "typescript": "^4.5.2",
33
+ "app-studio-types": "0.0.5",
34
+ "eslint-config-custom": "0.0.0",
35
+ "tsconfig": "0.0.0"
48
36
  },
49
37
  "dependencies": {
50
38
  "@radix-ui/react-accordion": "^1.1.2",
@@ -81,5 +69,17 @@
81
69
  "tailwind-merge": "^1.13.2",
82
70
  "tailwindcss-animate": "^1.0.6",
83
71
  "vaul": "0.9.1"
72
+ },
73
+ "scripts": {
74
+ "lint": "eslint \"**/*.ts*\"",
75
+ "ui:add": "pnpm dlx shadcn-ui@latest add",
76
+ "build:styles": "postcss styles/globals.css -o dist/styles.css",
77
+ "build:ts": "tsc -p tsconfig.json && tsc-alias",
78
+ "build": "pnpm run build:ts && pnpm run build:styles",
79
+ "dev:ts": "tsc -w -p tsconfig.json",
80
+ "dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
81
+ "dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\"",
82
+ "test": "jest",
83
+ "test:watch": "jest --watch"
84
84
  }
85
- }
85
+ }