@shopify/shop-minis-react 0.2.2 → 0.2.5

package/dist/components/atoms/touchable.js

@@ -1,53 +1,56 @@
 import { jsx as d } from "react/jsx-runtime";
 import * as i from "react";
 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";
-import { motion as h } 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";
+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";
 const L = ({
-  children: l,
+  children: u,
   onClick: a,
-  stopPropagation: e = !1,
-  ...u
+  stopPropagation: t = !1,
+  ...l
 }) => {
-  const r = i.useRef(null), n = f(), { ref: v, ...m } = u, p = i.useCallback(
-    (t) => {
-      e && t.stopPropagation(), a?.(t);
+  const r = i.useRef(null), o = f(), { ref: w, ...p } = l, m = i.useCallback(
+    (e) => {
+      t && e.stopPropagation(), a?.(e);
     },
-    [e, a]
+    [t, a]
   );
   return i.useEffect(() => {
-    if (!e || !r.current) return;
-    const t = r.current, s = (o) => {
-      o.stopImmediatePropagation(), o.stopPropagation(), n.start({
-        scale: 0.95,
-        opacity: 0.7
+    if (!t || !r.current) return;
+    const e = r.current, s = (n) => {
+      n.stopImmediatePropagation(), n.stopPropagation(), o.start({
+        opacity: 0.7,
+        transition: {
+          opacity: { type: "tween", duration: 0.08, ease: "linear" }
+        }
       });
-    }, c = (o) => {
-      o.stopImmediatePropagation(), o.stopPropagation(), n.start({
-        scale: 1,
-        opacity: 1
+    }, c = (n) => {
+      n.stopImmediatePropagation(), n.stopPropagation(), o.start({
+        opacity: 1,
+        transition: {
+          opacity: { type: "tween", duration: 0.08, ease: "linear" }
+        }
       });
     };
-    return t.addEventListener("pointerdown", s, !0), t.addEventListener("pointerup", c, !0), () => {
-      t.removeEventListener("pointerdown", s, !0), t.removeEventListener("pointerup", c, !0);
+    return e.addEventListener("pointerdown", s, !0), e.addEventListener("pointerup", c, !0), () => {
+      e.removeEventListener("pointerdown", s, !0), e.removeEventListener("pointerup", c, !0);
     };
-  }, [e, n]), /* @__PURE__ */ d(
-    h.div,
+  }, [t, o]), /* @__PURE__ */ d(
+    y.div,
     {
       ref: r,
       "data-touchable": "true",
       className: "flex w-full",
-      animate: e ? n : void 0,
-      whileTap: e ? void 0 : { scale: 0.95, opacity: 0.7 },
+      animate: t ? o : void 0,
+      whileTap: t ? void 0 : { opacity: 0.7 },
       transition: {
-        scale: { type: "tween", duration: 0.08, ease: "linear" },
         opacity: { type: "tween", duration: 0.08, ease: "linear" }
       },
-      onClick: p,
+      onClick: m,
       style: {
-        touchAction: e ? "manipulation" : void 0
+        touchAction: t ? "manipulation" : void 0
       },
-      ...m,
-      children: l
+      ...p,
+      children: u
     }
   );
 };

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

@@ -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        scale: 0.95,\n        opacity: 0.7,\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        scale: 1,\n        opacity: 1,\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 : {scale: 0.95, opacity: 0.7}}\n      transition={{\n        scale: {type: 'tween', duration: 0.08, ease: 'linear'},\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,OAAO;AAAA,QACP,SAAS;AAAA,MAAA,CACV;AAAA,IACH,GAEMQ,IAAkB,CAACH,MAAwB;AAC/C,MAAAA,EAAM,yBAAyB,GAC/BA,EAAM,gBAAgB,GAGtBL,EAAS,MAAM;AAAA,QACb,OAAO;AAAA,QACP,SAAS;AAAA,MAAA,CACV;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,OAAO,MAAM,SAAS,IAAG;AAAA,MAClE,YAAY;AAAA,QACV,OAAO,EAAC,MAAM,SAAS,UAAU,MAAM,MAAM,SAAQ;AAAA,QACrD,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;"}
+{"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;"}

package/eslint/rules/prefer-sdk-components.cjs

@@ -12,10 +12,11 @@ module.exports = {
       category: 'Best Practices',
       recommended: true,
     },
-    fixable: 'code',
     messages: {
       preferSdkComponent:
         'Use <{{sdkComponent}}> from @shopify/shop-minis-react instead of <{{nativeElement}}>. The SDK component provides optimized performance, consistent styling, and additional features.',
+      preferButtonComponent:
+        'Use <Button> or <Touchable> from @shopify/shop-minis-react instead of <button>. These SDK components provide optimized performance, consistent styling, and additional features.',
     },
     schema: [
       {
@@ -52,9 +53,6 @@ module.exports = {
       ...(options.components || {}),
     }
 
-    // eslint-disable-next-line @shopify/prefer-module-scope-constants
-    const SDK_PACKAGE = '@shopify/shop-minis-react'
-
     return {
       JSXOpeningElement(node) {
         const elementName = node.name.name
@@ -63,89 +61,22 @@ module.exports = {
         if (componentMap[elementName]) {
           const sdkComponent = componentMap[elementName]
 
-          context.report({
-            node,
-            messageId: 'preferSdkComponent',
-            data: {
-              nativeElement: elementName,
-              sdkComponent,
-            },
-            fix(fixer) {
-              const sourceCode = context.getSourceCode()
-              const openingElement = node
-              const jsxElement = node.parent
-
-              // Get the closing element if it exists
-              const closingElement = jsxElement.closingElement
-
-              const fixes = []
-
-              // Fix opening tag
-              const openingTagStart = openingElement.name.range[0]
-              const openingTagEnd = openingElement.name.range[1]
-              fixes.push(
-                fixer.replaceTextRange(
-                  [openingTagStart, openingTagEnd],
-                  sdkComponent
-                )
-              )
-
-              // Fix closing tag if it exists (not self-closing)
-              if (closingElement) {
-                const closingTagStart = closingElement.name.range[0]
-                const closingTagEnd = closingElement.name.range[1]
-                fixes.push(
-                  fixer.replaceTextRange(
-                    [closingTagStart, closingTagEnd],
-                    sdkComponent
-                  )
-                )
-              }
-
-              // Add import if it doesn't exist
-              const program = sourceCode.ast
-              const imports = program.body.filter(
-                importNode => importNode.type === 'ImportDeclaration'
-              )
-
-              // Check if we already import from the SDK
-              const sdkImport = imports.find(
-                importNode => importNode.source.value === SDK_PACKAGE
-              )
-
-              if (sdkImport) {
-                // Check if this component is already imported
-                const hasComponent = sdkImport.specifiers.some(
-                  spec =>
-                    spec.type === 'ImportSpecifier' &&
-                    spec.imported.name === sdkComponent
-                )
-
-                if (!hasComponent) {
-                  // Add component to existing import
-                  const lastSpecifier =
-                    sdkImport.specifiers[sdkImport.specifiers.length - 1]
-                  fixes.push(
-                    fixer.insertTextAfter(lastSpecifier, `, ${sdkComponent}`)
-                  )
-                }
-              } else {
-                // Add new import statement
-                const firstNode = program.body[0]
-                const importStatement = `import {${sdkComponent}} from '${SDK_PACKAGE}'\n`
-
-                if (firstNode) {
-                  fixes.push(fixer.insertTextBefore(firstNode, importStatement))
-                } else {
-                  fixes.push(
-                    fixer.insertTextAfterRange([0, 0], importStatement)
-                  )
-                }
-              }
-
-              return fixes
-            },
-          })
+          // Use custom message for button element since it has multiple SDK options
+          if (elementName === 'button') {
+            context.report({
+              node,
+              messageId: 'preferButtonComponent',
+            })
+          } else {
+            context.report({
+              node,
+              messageId: 'preferSdkComponent',
+              data: {
+                nativeElement: elementName,
+                sdkComponent,
+              },
+            })
+          }
         }
       },
     }

package/eslint/rules/validate-manifest.cjs

@@ -9,6 +9,14 @@ const path = require('path')
 // Load the hook-scopes map
 const hookScopesMap = require('../../generated-hook-maps/hook-scopes-map.json')
 
+// Load the component-scopes map (may not exist yet)
+let componentScopesMap = {}
+try {
+  componentScopesMap = require('../../generated-hook-maps/component-scopes-map.json')
+} catch (err) {
+  // Component scopes map doesn't exist yet, that's okay
+}
+
 // Module-level cache for manifest.json to avoid repeated file I/O
 // ESLint reuses the same rule module across all files, so this cache
 // persists for the entire lint run, dramatically improving performance
@@ -73,7 +81,7 @@ module.exports = {
     fixable: 'code',
     messages: {
       missingScope:
-        'Hook "{{hookName}}" requires scope "{{scope}}" in src/manifest.json. Add "{{scope}}" to the "scopes" array.',
+        '{{source}} requires scope "{{scope}}" in src/manifest.json. Add "{{scope}}" to the "scopes" array.',
       missingPermission:
         '{{reason}} requires permission "{{permission}}" in src/manifest.json. Add "{{permission}}" to the "permissions" array.',
       missingTrustedDomain:
@@ -93,6 +101,7 @@ module.exports = {
     let manifest = null
     let manifestParseError = null
     const usedHooks = new Set()
+    const usedComponents = new Set()
     const requiredPermissions = new Set()
     const requiredDomains = new Set()
     const fixedIssues = new Set()
@@ -171,6 +180,35 @@ module.exports = {
                   })
                 })
               }
+
+              // Check if it's a component that requires scopes
+              // We need to check all possible paths where the component might be defined
+              const possibleComponentPaths = Object.keys(
+                componentScopesMap
+              ).filter(componentPath => {
+                // Extract the component name from the path (e.g., "commerce/add-to-cart" -> "AddToCartButton")
+                // We'll check if the import name matches common component naming patterns
+                const pathParts = componentPath.split('/')
+                const fileName = pathParts[pathParts.length - 1]
+                // Convert kebab-case or snake_case to PascalCase
+                const componentName = fileName
+                  .split(/[-_]/)
+                  .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+                  .join('')
+                return (
+                  componentName === importedName || fileName === importedName
+                )
+              })
+
+              if (possibleComponentPaths.length > 0) {
+                possibleComponentPaths.forEach(componentPath => {
+                  usedComponents.add({
+                    path: componentPath,
+                    name: importedName,
+                    node,
+                  })
+                })
+              }
             }
           })
         }
@@ -408,6 +446,7 @@ module.exports = {
         if (
           manifestParseError &&
           (usedHooks.size > 0 ||
+            usedComponents.size > 0 ||
             requiredPermissions.size > 0 ||
             requiredDomains.size > 0)
         ) {
@@ -447,6 +486,47 @@ module.exports = {
           })
         })
 
+        // Check scopes for components
+        usedComponents.forEach(
+          ({path: componentPath, name: componentName, node}) => {
+            const componentData = componentScopesMap[componentPath]
+            if (
+              !componentData ||
+              !componentData.scopes ||
+              componentData.scopes.length === 0
+            ) {
+              return
+            }
+
+            const requiredScopes = componentData.scopes
+
+            if (!manifest) {
+              issues.push({
+                messageId: 'manifestNotFound',
+                data: {
+                  hookName: componentName,
+                  scopes: requiredScopes.join(', '),
+                },
+              })
+              return
+            }
+
+            const manifestScopes = manifest.scopes || []
+
+            requiredScopes.forEach(requiredScope => {
+              if (!manifestScopes.includes(requiredScope)) {
+                issues.push({
+                  type: 'scope',
+                  scope: requiredScope,
+                  componentName,
+                  componentPath,
+                  node,
+                })
+              }
+            })
+          }
+        )
+
         // Check permissions
         requiredPermissions.forEach(({permission, reason, node}) => {
           if (!manifest) {
@@ -513,11 +593,15 @@ module.exports = {
 
             // Only report if not fixed
             if (!fixedIssues.has(issueKey)) {
+              // Determine if this is from a hook or component
+              const sourceName = issue.hookName || issue.componentName
+              const sourceType = issue.hookName ? 'Hook' : 'Component'
+
               context.report({
                 loc: {line: 1, column: 0},
                 messageId: 'missingScope',
                 data: {
-                  hookName: issue.hookName,
+                  source: `${sourceType} "${sourceName}"`,
                   scope: issue.scope,
                 },
               })

package/generated-hook-maps/component-scopes-map.json

@@ -0,0 +1,18 @@
+{
+  "commerce/product-card": {
+    "scopes": [
+      "product_list:write"
+    ],
+    "hooks": [
+      "useSavedProductsActions"
+    ]
+  },
+  "commerce/product-link": {
+    "scopes": [
+      "product_list:write"
+    ],
+    "hooks": [
+      "useSavedProductsActions"
+    ]
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.2.2",
+  "version": "0.2.5",
   "sideEffects": false,
   "type": "module",
   "engines": {

package/src/components/atoms/touchable.tsx

@@ -38,8 +38,10 @@ export const Touchable = ({
 
       // Animate to pressed state
       controls.start({
-        scale: 0.95,
         opacity: 0.7,
+        transition: {
+          opacity: {type: 'tween', duration: 0.08, ease: 'linear'},
+        },
       })
     }
 
@@ -49,8 +51,10 @@ export const Touchable = ({
 
       // Animate back to normal state
       controls.start({
-        scale: 1,
         opacity: 1,
+        transition: {
+          opacity: {type: 'tween', duration: 0.08, ease: 'linear'},
+        },
       })
     }
 
@@ -70,9 +74,8 @@ export const Touchable = ({
       data-touchable="true"
       className="flex w-full"
       animate={stopPropagation ? controls : undefined}
-      whileTap={stopPropagation ? undefined : {scale: 0.95, opacity: 0.7}}
+      whileTap={stopPropagation ? undefined : {opacity: 0.7}}
       transition={{
-        scale: {type: 'tween', duration: 0.08, ease: 'linear'},
         opacity: {type: 'tween', duration: 0.08, ease: 'linear'},
       }}
       onClick={handleClick}