@tapcart/mobile-components 0.7.33 → 0.7.34
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.
- package/dist/components/contexts/translation-context.d.ts.map +1 -1
- package/dist/components/contexts/translation-context.js +7 -4
- package/dist/components/hooks/use-click-outside.d.ts +3 -0
- package/dist/components/hooks/use-click-outside.d.ts.map +1 -0
- package/dist/components/hooks/use-click-outside.js +16 -0
- package/dist/components/hooks/use-outside-click.d.ts +4 -0
- package/dist/components/hooks/use-outside-click.d.ts.map +1 -0
- package/dist/components/hooks/use-outside-click.js +16 -0
- package/dist/components/hooks/use-recommendations.js +1 -1
- package/dist/components/hooks/use-tap.d.ts +8 -0
- package/dist/components/hooks/use-tap.d.ts.map +1 -0
- package/dist/components/hooks/use-tap.js +100 -0
- package/package.json +18 -18
- package/dist/components/hooks/use-debug-dependencies.d.ts +0 -10
- package/dist/components/hooks/use-debug-dependencies.d.ts.map +0 -1
- package/dist/components/hooks/use-debug-dependencies.js +0 -18
- package/dist/components/hooks/use-layout.d.ts +0 -13
- package/dist/components/hooks/use-layout.d.ts.map +0 -1
- package/dist/components/hooks/use-layout.js +0 -23
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"translation-context.d.ts","sourceRoot":"","sources":["../../../components/contexts/translation-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,KAAK,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAI5C,eAAO,MAAM,mBAAmB;kBAIhB,cAAc;cAClB,MAAM,SAAS;6CAK1B,CAAA;AAED,eAAO,MAAM,cAAc,sBAAuC,CAAA;AAElE,eAAO,MAAM,kBAAkB;UAIvB,MAAM;kBACE,OAAO,MAAM,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"translation-context.d.ts","sourceRoot":"","sources":["../../../components/contexts/translation-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,KAAK,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAI5C,eAAO,MAAM,mBAAmB;kBAIhB,cAAc;cAClB,MAAM,SAAS;6CAK1B,CAAA;AAED,eAAO,MAAM,cAAc,sBAAuC,CAAA;AAElE,eAAO,MAAM,kBAAkB;UAIvB,MAAM;kBACE,OAAO,MAAM,EAAE,MAAM,CAAC;wBASrC,CAAA"}
|
|
@@ -5,8 +5,11 @@ const TranslationContext = createContext({});
|
|
|
5
5
|
export const TranslationProvider = ({ translations, children, }) => (_jsx(TranslationContext.Provider, Object.assign({ value: translations }, { children: children })));
|
|
6
6
|
export const useTranslation = () => useContext(TranslationContext);
|
|
7
7
|
export const getTextTranslation = ({ text, translations, }) => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
if (text) {
|
|
9
|
+
const key = text.trim().toLowerCase();
|
|
10
|
+
if (!(key in translations))
|
|
11
|
+
return undefined;
|
|
12
|
+
return translations[key];
|
|
13
|
+
}
|
|
14
|
+
return undefined;
|
|
12
15
|
};
|
|
@@ -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 @@
|
|
|
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;
|
|
@@ -8,7 +8,7 @@ const constructURL = (apiURL) => {
|
|
|
8
8
|
const useRecommendations = ({ queryVariables, apiURL }) => {
|
|
9
9
|
var _a;
|
|
10
10
|
const searchParams = useSearchParams();
|
|
11
|
-
const recommendation = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get('recommendation')) || "
|
|
11
|
+
const recommendation = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get('recommendation')) || "";
|
|
12
12
|
const fetcher = (body) => fetch(constructURL(apiURL), {
|
|
13
13
|
method: "POST",
|
|
14
14
|
body: JSON.stringify(body),
|
|
@@ -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.
|
|
3
|
+
"version": "0.7.34",
|
|
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,21 +20,21 @@
|
|
|
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
|
"jest-environment-jsdom": "^29.7.0",
|
|
43
29
|
"postcss": "^8.4.24",
|
|
44
30
|
"tailwindcss": "^3.3.2",
|
|
45
31
|
"ts-jest": "^29.2.5",
|
|
46
32
|
"tsc-alias": "^1.8.10",
|
|
47
|
-
"tsconfig": "workspace:*",
|
|
48
33
|
"typescript": "^4.5.2",
|
|
49
|
-
"@testing-library/react-hooks": "^8.0.1"
|
|
34
|
+
"@testing-library/react-hooks": "^8.0.1",
|
|
35
|
+
"app-studio-types": "0.0.5",
|
|
36
|
+
"eslint-config-custom": "0.0.0",
|
|
37
|
+
"tsconfig": "0.0.0"
|
|
50
38
|
},
|
|
51
39
|
"dependencies": {
|
|
52
40
|
"@radix-ui/react-accordion": "^1.1.2",
|
|
@@ -83,5 +71,17 @@
|
|
|
83
71
|
"tailwind-merge": "^1.13.2",
|
|
84
72
|
"tailwindcss-animate": "^1.0.6",
|
|
85
73
|
"vaul": "0.9.1"
|
|
74
|
+
},
|
|
75
|
+
"scripts": {
|
|
76
|
+
"lint": "eslint \"**/*.ts*\"",
|
|
77
|
+
"ui:add": "pnpm dlx shadcn-ui@latest add",
|
|
78
|
+
"build:styles": "postcss styles/globals.css -o dist/styles.css",
|
|
79
|
+
"build:ts": "tsc -p tsconfig.json && tsc-alias",
|
|
80
|
+
"build": "pnpm run build:ts && pnpm run build:styles",
|
|
81
|
+
"dev:ts": "tsc -w -p tsconfig.json",
|
|
82
|
+
"dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
|
|
83
|
+
"dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\"",
|
|
84
|
+
"test": "jest",
|
|
85
|
+
"test:watch": "jest --watch"
|
|
86
86
|
}
|
|
87
|
-
}
|
|
87
|
+
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Custom hook to debug dependency changes.
|
|
3
|
-
*
|
|
4
|
-
* Usage:
|
|
5
|
-
* useDebugDependencies([dependencyA, dependencyB]);
|
|
6
|
-
*
|
|
7
|
-
* @param {Array} deps - Array of dependencies to monitor for changes.
|
|
8
|
-
*/
|
|
9
|
-
export declare function useDebugDependencies(deps: any[]): void;
|
|
10
|
-
//# sourceMappingURL=use-debug-dependencies.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-debug-dependencies.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-debug-dependencies.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,EAAE,QAU/C"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { useRef, useEffect } from "react";
|
|
3
|
-
/**
|
|
4
|
-
* Custom hook to debug dependency changes.
|
|
5
|
-
*
|
|
6
|
-
* Usage:
|
|
7
|
-
* useDebugDependencies([dependencyA, dependencyB]);
|
|
8
|
-
*
|
|
9
|
-
* @param {Array} deps - Array of dependencies to monitor for changes.
|
|
10
|
-
*/
|
|
11
|
-
export function useDebugDependencies(deps) {
|
|
12
|
-
const prevDeps = useRef(deps);
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
const changedDeps = deps.map((dep, i) => dep !== prevDeps.current[i] ? dep : null);
|
|
15
|
-
console.log("Changed dependencies:", changedDeps);
|
|
16
|
-
prevDeps.current = deps;
|
|
17
|
-
}, [deps]);
|
|
18
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { PhoenixLayout } from "lib/tapcart/types";
|
|
2
|
-
type UseLayoutProps = {
|
|
3
|
-
appId: string;
|
|
4
|
-
layoutId: string;
|
|
5
|
-
};
|
|
6
|
-
type UseLayoutReturn = {
|
|
7
|
-
layout: PhoenixLayout | null;
|
|
8
|
-
error: any;
|
|
9
|
-
isLoading: boolean;
|
|
10
|
-
};
|
|
11
|
-
export declare function useLayout({ appId, layoutId, }: UseLayoutProps): UseLayoutReturn;
|
|
12
|
-
export {};
|
|
13
|
-
//# sourceMappingURL=use-layout.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-layout.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-layout.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGjD,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,aAAa,GAAG,IAAI,CAAA;IAC5B,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,GACT,EAAE,cAAc,GAAG,eAAe,CAYlC"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
|
-
import useSWR from "swr";
|
|
12
|
-
import { fetchLayoutById } from "apps/tapcart-ssr-app/lib/tapcart/index";
|
|
13
|
-
export function useLayout({ appId, layoutId, }) {
|
|
14
|
-
const fetcher = (appId, layoutId) => __awaiter(this, void 0, void 0, function* () {
|
|
15
|
-
return fetchLayoutById(appId, layoutId);
|
|
16
|
-
});
|
|
17
|
-
const { data, error } = useSWR([appId, layoutId], fetcher);
|
|
18
|
-
return {
|
|
19
|
-
layout: data || null,
|
|
20
|
-
error,
|
|
21
|
-
isLoading: !data && !error,
|
|
22
|
-
};
|
|
23
|
-
}
|