@shopify/shop-minis-react 0.2.3 → 0.2.5
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/_virtual/index10.js +2 -2
- package/dist/_virtual/index4.js +2 -3
- package/dist/_virtual/index4.js.map +1 -1
- package/dist/_virtual/index7.js +3 -2
- package/dist/_virtual/index7.js.map +1 -1
- package/dist/_virtual/index9.js +2 -2
- package/dist/components/atoms/touchable.js +31 -28
- package/dist/components/atoms/touchable.js.map +1 -1
- package/dist/shop-minis-react/node_modules/.pnpm/@radix-ui_react-use-is-hydrated@0.1.0_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-use-is-hydrated/dist/index.js +1 -1
- package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js +1 -1
- package/dist/shop-minis-react/node_modules/.pnpm/querystringify@2.2.0/node_modules/querystringify/index.js +1 -1
- package/dist/shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js +1 -1
- package/eslint/rules/prefer-sdk-components.cjs +18 -8
- package/package.json +1 -1
- package/src/components/atoms/touchable.tsx +7 -4
package/dist/_virtual/index10.js
CHANGED
package/dist/_virtual/index4.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
var i = r();
|
|
1
|
+
var r = {};
|
|
3
2
|
export {
|
|
4
|
-
|
|
3
|
+
r as __exports
|
|
5
4
|
};
|
|
6
5
|
//# sourceMappingURL=index4.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/dist/_virtual/index7.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import { __require as r } from "../shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js";
|
|
2
|
+
var i = r();
|
|
2
3
|
export {
|
|
3
|
-
|
|
4
|
+
i as s
|
|
4
5
|
};
|
|
5
6
|
//# sourceMappingURL=index7.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index7.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index7.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
package/dist/_virtual/index9.js
CHANGED
|
@@ -1,53 +1,56 @@
|
|
|
1
1
|
import { jsx as d } from "react/jsx-runtime";
|
|
2
2
|
import * as i from "react";
|
|
3
3
|
import { useAnimationControls as f } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/animation/hooks/use-animation.js";
|
|
4
|
-
import { motion as
|
|
4
|
+
import { motion as y } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
|
|
5
5
|
const L = ({
|
|
6
|
-
children:
|
|
6
|
+
children: u,
|
|
7
7
|
onClick: a,
|
|
8
|
-
stopPropagation:
|
|
9
|
-
...
|
|
8
|
+
stopPropagation: t = !1,
|
|
9
|
+
...l
|
|
10
10
|
}) => {
|
|
11
|
-
const r = i.useRef(null),
|
|
12
|
-
(
|
|
13
|
-
|
|
11
|
+
const r = i.useRef(null), o = f(), { ref: w, ...p } = l, m = i.useCallback(
|
|
12
|
+
(e) => {
|
|
13
|
+
t && e.stopPropagation(), a?.(e);
|
|
14
14
|
},
|
|
15
|
-
[
|
|
15
|
+
[t, a]
|
|
16
16
|
);
|
|
17
17
|
return i.useEffect(() => {
|
|
18
|
-
if (!
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
if (!t || !r.current) return;
|
|
19
|
+
const e = r.current, s = (n) => {
|
|
20
|
+
n.stopImmediatePropagation(), n.stopPropagation(), o.start({
|
|
21
|
+
opacity: 0.7,
|
|
22
|
+
transition: {
|
|
23
|
+
opacity: { type: "tween", duration: 0.08, ease: "linear" }
|
|
24
|
+
}
|
|
23
25
|
});
|
|
24
|
-
}, c = (
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
}, c = (n) => {
|
|
27
|
+
n.stopImmediatePropagation(), n.stopPropagation(), o.start({
|
|
28
|
+
opacity: 1,
|
|
29
|
+
transition: {
|
|
30
|
+
opacity: { type: "tween", duration: 0.08, ease: "linear" }
|
|
31
|
+
}
|
|
28
32
|
});
|
|
29
33
|
};
|
|
30
|
-
return
|
|
31
|
-
|
|
34
|
+
return e.addEventListener("pointerdown", s, !0), e.addEventListener("pointerup", c, !0), () => {
|
|
35
|
+
e.removeEventListener("pointerdown", s, !0), e.removeEventListener("pointerup", c, !0);
|
|
32
36
|
};
|
|
33
|
-
}, [
|
|
34
|
-
|
|
37
|
+
}, [t, o]), /* @__PURE__ */ d(
|
|
38
|
+
y.div,
|
|
35
39
|
{
|
|
36
40
|
ref: r,
|
|
37
41
|
"data-touchable": "true",
|
|
38
42
|
className: "flex w-full",
|
|
39
|
-
animate:
|
|
40
|
-
whileTap:
|
|
43
|
+
animate: t ? o : void 0,
|
|
44
|
+
whileTap: t ? void 0 : { opacity: 0.7 },
|
|
41
45
|
transition: {
|
|
42
|
-
scale: { type: "tween", duration: 0.08, ease: "linear" },
|
|
43
46
|
opacity: { type: "tween", duration: 0.08, ease: "linear" }
|
|
44
47
|
},
|
|
45
|
-
onClick:
|
|
48
|
+
onClick: m,
|
|
46
49
|
style: {
|
|
47
|
-
touchAction:
|
|
50
|
+
touchAction: t ? "manipulation" : void 0
|
|
48
51
|
},
|
|
49
|
-
...
|
|
50
|
-
children:
|
|
52
|
+
...p,
|
|
53
|
+
children: u
|
|
51
54
|
}
|
|
52
55
|
);
|
|
53
56
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"touchable.js","sources":["../../../src/components/atoms/touchable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {motion, HTMLMotionProps, useAnimationControls} from 'motion/react'\n\nexport const Touchable = ({\n children,\n onClick,\n stopPropagation = false,\n ...props\n}: HTMLMotionProps<'div'> & {\n onClick?: React.MouseEventHandler<HTMLDivElement>\n stopPropagation?: boolean\n}) => {\n const ref = React.useRef<HTMLDivElement>(null)\n const controls = useAnimationControls()\n\n // Filter out props that shouldn't be passed to motion.div\n // Any other custom props that get added to the component interface should be filtered here\n const {ref: _, ...motionProps} = props\n\n const handleClick = React.useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (stopPropagation) event.stopPropagation()\n onClick?.(event)\n },\n [stopPropagation, onClick]\n )\n\n // Handle animations manually when stopPropagation is true to prevent parent from receiving event\n React.useEffect(() => {\n if (!stopPropagation || !ref.current) return\n\n const element = ref.current\n\n const handlePointerDown = (event: PointerEvent) => {\n event.stopImmediatePropagation()\n event.stopPropagation()\n\n // Animate to pressed state\n controls.start({\n
|
|
1
|
+
{"version":3,"file":"touchable.js","sources":["../../../src/components/atoms/touchable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {motion, HTMLMotionProps, useAnimationControls} from 'motion/react'\n\nexport const Touchable = ({\n children,\n onClick,\n stopPropagation = false,\n ...props\n}: HTMLMotionProps<'div'> & {\n onClick?: React.MouseEventHandler<HTMLDivElement>\n stopPropagation?: boolean\n}) => {\n const ref = React.useRef<HTMLDivElement>(null)\n const controls = useAnimationControls()\n\n // Filter out props that shouldn't be passed to motion.div\n // Any other custom props that get added to the component interface should be filtered here\n const {ref: _, ...motionProps} = props\n\n const handleClick = React.useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (stopPropagation) event.stopPropagation()\n onClick?.(event)\n },\n [stopPropagation, onClick]\n )\n\n // Handle animations manually when stopPropagation is true to prevent parent from receiving event\n React.useEffect(() => {\n if (!stopPropagation || !ref.current) return\n\n const element = ref.current\n\n const handlePointerDown = (event: PointerEvent) => {\n event.stopImmediatePropagation()\n event.stopPropagation()\n\n // Animate to pressed state\n controls.start({\n opacity: 0.7,\n transition: {\n opacity: {type: 'tween', duration: 0.08, ease: 'linear'},\n },\n })\n }\n\n const handlePointerUp = (event: PointerEvent) => {\n event.stopImmediatePropagation()\n event.stopPropagation()\n\n // Animate back to normal state\n controls.start({\n opacity: 1,\n transition: {\n opacity: {type: 'tween', duration: 0.08, ease: 'linear'},\n },\n })\n }\n\n // Capture pointer event before Motion\n element.addEventListener('pointerdown', handlePointerDown, true)\n element.addEventListener('pointerup', handlePointerUp, true)\n\n return () => {\n element.removeEventListener('pointerdown', handlePointerDown, true)\n element.removeEventListener('pointerup', handlePointerUp, true)\n }\n }, [stopPropagation, controls])\n\n return (\n <motion.div\n ref={ref}\n data-touchable=\"true\"\n className=\"flex w-full\"\n animate={stopPropagation ? controls : undefined}\n whileTap={stopPropagation ? undefined : {opacity: 0.7}}\n transition={{\n opacity: {type: 'tween', duration: 0.08, ease: 'linear'},\n }}\n onClick={handleClick}\n style={{\n touchAction: stopPropagation ? 'manipulation' : undefined,\n }}\n {...motionProps}\n >\n {children}\n </motion.div>\n )\n}\n"],"names":["Touchable","children","onClick","stopPropagation","props","ref","React","controls","useAnimationControls","_","motionProps","handleClick","event","element","handlePointerDown","handlePointerUp","jsx","motion"],"mappings":";;;;AAIO,MAAMA,IAAY,CAAC;AAAA,EACxB,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,GAAGC;AACL,MAGM;AACE,QAAAC,IAAMC,EAAM,OAAuB,IAAI,GACvCC,IAAWC,EAAqB,GAIhC,EAAC,KAAKC,GAAG,GAAGC,EAAe,IAAAN,GAE3BO,IAAcL,EAAM;AAAA,IACxB,CAACM,MAA4C;AACvC,MAAAT,OAAuB,gBAAgB,GAC3CD,IAAUU,CAAK;AAAA,IACjB;AAAA,IACA,CAACT,GAAiBD,CAAO;AAAA,EAC3B;AAGA,SAAAI,EAAM,UAAU,MAAM;AACpB,QAAI,CAACH,KAAmB,CAACE,EAAI,QAAS;AAEtC,UAAMQ,IAAUR,EAAI,SAEdS,IAAoB,CAACF,MAAwB;AACjD,MAAAA,EAAM,yBAAyB,GAC/BA,EAAM,gBAAgB,GAGtBL,EAAS,MAAM;AAAA,QACb,SAAS;AAAA,QACT,YAAY;AAAA,UACV,SAAS,EAAC,MAAM,SAAS,UAAU,MAAM,MAAM,SAAQ;AAAA,QAAA;AAAA,MACzD,CACD;AAAA,IACH,GAEMQ,IAAkB,CAACH,MAAwB;AAC/C,MAAAA,EAAM,yBAAyB,GAC/BA,EAAM,gBAAgB,GAGtBL,EAAS,MAAM;AAAA,QACb,SAAS;AAAA,QACT,YAAY;AAAA,UACV,SAAS,EAAC,MAAM,SAAS,UAAU,MAAM,MAAM,SAAQ;AAAA,QAAA;AAAA,MACzD,CACD;AAAA,IACH;AAGQ,WAAAM,EAAA,iBAAiB,eAAeC,GAAmB,EAAI,GACvDD,EAAA,iBAAiB,aAAaE,GAAiB,EAAI,GAEpD,MAAM;AACH,MAAAF,EAAA,oBAAoB,eAAeC,GAAmB,EAAI,GAC1DD,EAAA,oBAAoB,aAAaE,GAAiB,EAAI;AAAA,IAChE;AAAA,EAAA,GACC,CAACZ,GAAiBI,CAAQ,CAAC,GAG5B,gBAAAS;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACC,KAAAZ;AAAA,MACA,kBAAe;AAAA,MACf,WAAU;AAAA,MACV,SAASF,IAAkBI,IAAW;AAAA,MACtC,UAAUJ,IAAkB,SAAY,EAAC,SAAS,IAAG;AAAA,MACrD,YAAY;AAAA,QACV,SAAS,EAAC,MAAM,SAAS,UAAU,MAAM,MAAM,SAAQ;AAAA,MACzD;AAAA,MACA,SAASQ;AAAA,MACT,OAAO;AAAA,QACL,aAAaR,IAAkB,iBAAiB;AAAA,MAClD;AAAA,MACC,GAAGO;AAAA,MAEH,UAAAT;AAAA,IAAA;AAAA,EACH;AAEJ;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __module as r } from "../../../../../../../_virtual/
|
|
1
|
+
import { __module as r } from "../../../../../../../_virtual/index10.js";
|
|
2
2
|
import { __require as o } from "../cjs/use-sync-external-store-shim.production.js";
|
|
3
3
|
import { __require as i } from "../cjs/use-sync-external-store-shim.development.js";
|
|
4
4
|
var e;
|
|
@@ -15,6 +15,8 @@ module.exports = {
|
|
|
15
15
|
messages: {
|
|
16
16
|
preferSdkComponent:
|
|
17
17
|
'Use <{{sdkComponent}}> from @shopify/shop-minis-react instead of <{{nativeElement}}>. The SDK component provides optimized performance, consistent styling, and additional features.',
|
|
18
|
+
preferButtonComponent:
|
|
19
|
+
'Use <Button> or <Touchable> from @shopify/shop-minis-react instead of <button>. These SDK components provide optimized performance, consistent styling, and additional features.',
|
|
18
20
|
},
|
|
19
21
|
schema: [
|
|
20
22
|
{
|
|
@@ -59,14 +61,22 @@ module.exports = {
|
|
|
59
61
|
if (componentMap[elementName]) {
|
|
60
62
|
const sdkComponent = componentMap[elementName]
|
|
61
63
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
64
|
+
// Use custom message for button element since it has multiple SDK options
|
|
65
|
+
if (elementName === 'button') {
|
|
66
|
+
context.report({
|
|
67
|
+
node,
|
|
68
|
+
messageId: 'preferButtonComponent',
|
|
69
|
+
})
|
|
70
|
+
} else {
|
|
71
|
+
context.report({
|
|
72
|
+
node,
|
|
73
|
+
messageId: 'preferSdkComponent',
|
|
74
|
+
data: {
|
|
75
|
+
nativeElement: elementName,
|
|
76
|
+
sdkComponent,
|
|
77
|
+
},
|
|
78
|
+
})
|
|
79
|
+
}
|
|
70
80
|
}
|
|
71
81
|
},
|
|
72
82
|
}
|
package/package.json
CHANGED
|
@@ -38,8 +38,10 @@ export const Touchable = ({
|
|
|
38
38
|
|
|
39
39
|
// Animate to pressed state
|
|
40
40
|
controls.start({
|
|
41
|
-
scale: 0.95,
|
|
42
41
|
opacity: 0.7,
|
|
42
|
+
transition: {
|
|
43
|
+
opacity: {type: 'tween', duration: 0.08, ease: 'linear'},
|
|
44
|
+
},
|
|
43
45
|
})
|
|
44
46
|
}
|
|
45
47
|
|
|
@@ -49,8 +51,10 @@ export const Touchable = ({
|
|
|
49
51
|
|
|
50
52
|
// Animate back to normal state
|
|
51
53
|
controls.start({
|
|
52
|
-
scale: 1,
|
|
53
54
|
opacity: 1,
|
|
55
|
+
transition: {
|
|
56
|
+
opacity: {type: 'tween', duration: 0.08, ease: 'linear'},
|
|
57
|
+
},
|
|
54
58
|
})
|
|
55
59
|
}
|
|
56
60
|
|
|
@@ -70,9 +74,8 @@ export const Touchable = ({
|
|
|
70
74
|
data-touchable="true"
|
|
71
75
|
className="flex w-full"
|
|
72
76
|
animate={stopPropagation ? controls : undefined}
|
|
73
|
-
whileTap={stopPropagation ? undefined : {
|
|
77
|
+
whileTap={stopPropagation ? undefined : {opacity: 0.7}}
|
|
74
78
|
transition={{
|
|
75
|
-
scale: {type: 'tween', duration: 0.08, ease: 'linear'},
|
|
76
79
|
opacity: {type: 'tween', duration: 0.08, ease: 'linear'},
|
|
77
80
|
}}
|
|
78
81
|
onClick={handleClick}
|