@shopify/shop-minis-react 0.2.1 → 0.2.3

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.1",
+  "version": "0.2.3",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -79,7 +79,6 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.54.2",
-    "@shopify/generate-docs": "^0.16.6",
     "@storybook/addon-docs": "^9.0.16",
     "@storybook/react-vite": "^9.0.16",
     "@testing-library/jest-dom": "^6.6.4",

package/src/providers/ImagePickerProvider.test.tsx

@@ -17,6 +17,14 @@ vi.mock('../hooks/util/useRequestPermissions', () => ({
   }),
 }))
 
+// Mock useReportInteraction hook
+const mockReportInteraction = vi.fn()
+vi.mock('../internal/useReportInteraction', () => ({
+  useReportInteraction: () => ({
+    reportInteraction: mockReportInteraction,
+  }),
+}))
+
 describe('ImagePickerProvider', () => {
   const originalMinisParams = window.minisParams
 
@@ -24,6 +32,8 @@ describe('ImagePickerProvider', () => {
     vi.clearAllMocks()
     // Default to granting permission
     mockRequestPermission.mockResolvedValue({granted: true})
+    // Clear interaction reporting mock
+    mockReportInteraction.mockClear()
   })
 
   afterEach(() => {
@@ -716,4 +726,385 @@ describe('ImagePickerProvider', () => {
       expect(galleryInput.value).toBe('')
     })
   })
+
+  describe('Interaction Reporting', () => {
+    describe('Gallery interactions', () => {
+      it('reports image_picker_open when gallery is opened', async () => {
+        mockRequestPermission.mockResolvedValue({granted: true})
+
+        const TestComponent = () => {
+          const {openGallery} = useImagePickerContext()
+
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                openGallery().catch(() => {
+                  // Ignore errors from cleanup
+                })
+              }
+            >
+              Open Gallery
+            </button>
+          )
+        }
+
+        render(
+          <ImagePickerProvider>
+            <TestComponent />
+          </ImagePickerProvider>
+        )
+
+        const button = screen.getByText('Open Gallery')
+        fireEvent.click(button)
+
+        // Wait for interaction to be reported
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'image_picker_open',
+          })
+        })
+      })
+
+      it('reports image_picker_success when file is selected', async () => {
+        mockRequestPermission.mockResolvedValue({granted: true})
+
+        const TestComponent = () => {
+          const {openGallery} = useImagePickerContext()
+
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                openGallery().catch(() => {
+                  // Ignore errors from cleanup
+                })
+              }
+            >
+              Open Gallery
+            </button>
+          )
+        }
+
+        const {container} = render(
+          <ImagePickerProvider>
+            <TestComponent />
+          </ImagePickerProvider>
+        )
+
+        const galleryInput = container.querySelector(
+          'input[type="file"]:not([capture])'
+        ) as HTMLInputElement
+
+        const button = screen.getByText('Open Gallery')
+        fireEvent.click(button)
+
+        // Wait for permission and initial interaction
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'image_picker_open',
+          })
+        })
+
+        // Clear mock to check only for success interaction
+        mockReportInteraction.mockClear()
+
+        // Simulate file selection
+        const file = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+        Object.defineProperty(galleryInput, 'files', {
+          value: [file],
+          configurable: true,
+        })
+
+        await act(async () => {
+          fireEvent.change(galleryInput)
+        })
+
+        // Check success was reported
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'image_picker_success',
+          })
+        })
+      })
+
+      it('reports image_picker_error when interrupted by new picker', async () => {
+        mockRequestPermission.mockResolvedValue({granted: true})
+
+        const TestComponent = () => {
+          const {openGallery, openCamera} = useImagePickerContext()
+
+          return (
+            <>
+              <button
+                type="button"
+                onClick={() =>
+                  openGallery().catch(() => {
+                    // Expected to fail
+                  })
+                }
+              >
+                Open Gallery
+              </button>
+              <button
+                type="button"
+                onClick={() =>
+                  openCamera().catch(() => {
+                    // Ignore errors
+                  })
+                }
+              >
+                Open Camera
+              </button>
+            </>
+          )
+        }
+
+        render(
+          <ImagePickerProvider>
+            <TestComponent />
+          </ImagePickerProvider>
+        )
+
+        // Open gallery first
+        const galleryButton = screen.getByText('Open Gallery')
+        fireEvent.click(galleryButton)
+
+        // Wait for gallery open to be reported
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'image_picker_open',
+          })
+        })
+
+        mockReportInteraction.mockClear()
+
+        // Open camera to interrupt gallery
+        const cameraButton = screen.getByText('Open Camera')
+        fireEvent.click(cameraButton)
+
+        // Check error was reported for interrupted gallery operation
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'image_picker_error',
+            interactionValue:
+              'New file picker opened before previous completed',
+          })
+        })
+      })
+    })
+
+    describe('Camera interactions', () => {
+      it('reports camera_open when camera is opened', async () => {
+        mockRequestPermission.mockResolvedValue({granted: true})
+
+        const TestComponent = () => {
+          const {openCamera} = useImagePickerContext()
+
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                openCamera().catch(() => {
+                  // Ignore errors from cleanup
+                })
+              }
+            >
+              Open Camera
+            </button>
+          )
+        }
+
+        render(
+          <ImagePickerProvider>
+            <TestComponent />
+          </ImagePickerProvider>
+        )
+
+        const button = screen.getByText('Open Camera')
+        fireEvent.click(button)
+
+        // Wait for interaction to be reported
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'camera_open',
+          })
+        })
+      })
+
+      it('reports camera_success when photo is captured', async () => {
+        mockRequestPermission.mockResolvedValue({granted: true})
+
+        const TestComponent = () => {
+          const {openCamera} = useImagePickerContext()
+
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                openCamera().catch(() => {
+                  // Ignore errors from cleanup
+                })
+              }
+            >
+              Open Camera
+            </button>
+          )
+        }
+
+        const {container} = render(
+          <ImagePickerProvider>
+            <TestComponent />
+          </ImagePickerProvider>
+        )
+
+        const cameraInput = container.querySelector(
+          'input[capture="environment"]'
+        ) as HTMLInputElement
+
+        const button = screen.getByText('Open Camera')
+        fireEvent.click(button)
+
+        // Wait for camera open to be reported
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'camera_open',
+          })
+        })
+
+        mockReportInteraction.mockClear()
+
+        // Simulate photo capture
+        const file = new File(['photo'], 'photo.jpg', {type: 'image/jpeg'})
+        Object.defineProperty(cameraInput, 'files', {
+          value: [file],
+          configurable: true,
+        })
+
+        await act(async () => {
+          fireEvent.change(cameraInput)
+        })
+
+        // Check success was reported
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'camera_success',
+          })
+        })
+      })
+
+      it('reports camera_error when interrupted by new picker', async () => {
+        mockRequestPermission.mockResolvedValue({granted: true})
+
+        const TestComponent = () => {
+          const {openCamera, openGallery} = useImagePickerContext()
+
+          return (
+            <>
+              <button
+                type="button"
+                onClick={() =>
+                  openCamera().catch(() => {
+                    // Expected to fail
+                  })
+                }
+              >
+                Open Camera
+              </button>
+              <button
+                type="button"
+                onClick={() =>
+                  openGallery().catch(() => {
+                    // Ignore errors
+                  })
+                }
+              >
+                Open Gallery
+              </button>
+            </>
+          )
+        }
+
+        render(
+          <ImagePickerProvider>
+            <TestComponent />
+          </ImagePickerProvider>
+        )
+
+        // Open camera first
+        const cameraButton = screen.getByText('Open Camera')
+        fireEvent.click(cameraButton)
+
+        // Wait for camera open to be reported
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'camera_open',
+          })
+        })
+
+        mockReportInteraction.mockClear()
+
+        // Open gallery to interrupt camera
+        const galleryButton = screen.getByText('Open Gallery')
+        fireEvent.click(galleryButton)
+
+        // Check error was reported for interrupted camera operation
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'camera_error',
+            interactionValue:
+              'New file picker opened before previous completed',
+          })
+        })
+      })
+
+      it('reports camera_error when permission is denied', async () => {
+        mockRequestPermission.mockResolvedValue({granted: false})
+
+        const TestComponent = () => {
+          const {openCamera} = useImagePickerContext()
+
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                openCamera().catch(() => {
+                  // Expected to fail
+                })
+              }
+            >
+              Open Camera
+            </button>
+          )
+        }
+
+        render(
+          <ImagePickerProvider>
+            <TestComponent />
+          </ImagePickerProvider>
+        )
+
+        const button = screen.getByText('Open Camera')
+        fireEvent.click(button)
+
+        // Wait for permission request
+        await vi.waitFor(() => {
+          expect(mockRequestPermission).toHaveBeenCalled()
+        })
+
+        // Camera open should be reported
+        expect(mockReportInteraction).toHaveBeenCalledWith({
+          interactionType: 'camera_open',
+        })
+
+        // Error interaction should be reported for permission denial
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'camera_error',
+            interactionValue: 'Camera permission not granted',
+          })
+        })
+      })
+    })
+  })
 })