@shopify/shop-minis-cli 0.0.161 → 0.0.162

package/build/commands/create-mini/standalone/examples/with-camera-access/.eslintignore

@@ -0,0 +1 @@
+*.graphql.d.ts

package/build/commands/create-mini/standalone/examples/with-camera-access/.eslintrc.js

@@ -0,0 +1,3 @@
+const {minisEslintConfig} = require('@shopify/shop-minis-sdk/eslint-config')
+
+module.exports = minisEslintConfig

package/build/commands/create-mini/standalone/examples/with-camera-access/.graphqlrc.js

@@ -0,0 +1 @@
+module.exports = require('@shopify/shop-minis-sdk/graphqlrc')

package/build/commands/create-mini/standalone/examples/with-camera-access/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "avoid",
+  "bracketSpacing": false,
+  "printWidth": 80
+}

package/build/commands/create-mini/standalone/examples/with-camera-access/README.md

@@ -0,0 +1,30 @@
+# Camera Access Mini
+
+A Shop Mini that demonstrates device camera access, photo gallery selection, and photo sharing capabilities.
+
+## Features
+
+- Access device camera to take photos
+- Access photo gallery to select existing photos
+- Display selected/captured photos
+- Share photos using the device's native share sheet
+- Built with React Native components and styling
+
+## Setup
+
+1. Run the development server:
+   ```bash
+   npm start
+   ```
+
+## Development
+
+This mini is built using:
+
+- React Native
+- TypeScript
+- Shop Minis SDK
+- react-native-image-crop-picker - for camera and gallery access
+- react-native-share - for native share sheet functionality
+
+Note: Camera access requires running the app on a physical device.

package/build/commands/create-mini/standalone/examples/with-camera-access/assets.d.ts

@@ -0,0 +1,14 @@
+declare module '*.svg' {
+  const content: import('react').FC<import('react-native-svg').SvgProps>
+  export default content
+}
+
+declare module '*.png' {
+  const content: import('react-native').ImageRequireSource
+  export default content
+}
+
+declare module '*.jpg' {
+  const content: import('react-native').ImageRequireSource
+  export default content
+}

package/build/commands/create-mini/standalone/examples/with-camera-access/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  // Changes to babel config are not supported by the mini platform.
+  // Custom configuration can introduce unexpected behaviour in your mini and could be a cause of rejection during the submission process.
+  presets: ['@shopify/shop-minis-sdk/babel-preset'],
+}

package/build/commands/create-mini/standalone/examples/with-camera-access/index.tsx

@@ -0,0 +1,5 @@
+import {renderDevelopmentMini} from '@shopify/shop-minis-sdk/src/renderDevelopmentMini'
+
+import MiniApp from './src'
+
+renderDevelopmentMini(MiniApp)

package/build/commands/create-mini/standalone/examples/with-camera-access/metro.config.js

@@ -0,0 +1,3 @@
+const {getMinisMetroConfig} = require('@shopify/shop-minis-sdk/metro-config')
+
+module.exports = getMinisMetroConfig(__dirname)

package/build/commands/create-mini/standalone/examples/with-camera-access/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "with-camera-access",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "shop-minis dev",
+    "test": "jest",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@shopify/shop-minis-sdk": "0.0.16"
+  },
+  "devDependencies": {
+    "@shopify/shop-minis-cli": "0.0.161",
+    "@types/jest": "^29.2.6",
+    "babel-jest": "^26.6.3",
+    "eslint": "^8.32.0",
+    "jest": "^29.3.1",
+    "prettier": "^2.8.2"
+  },
+  "jest": {
+    "preset": "react-native"
+  },
+  "overrides": {
+    "graphql": "15.8.0",
+    "react": "18.2.0",
+    "react-native": "0.73.2"
+  },
+  "resolutions": {
+    "@apollo/federation": "0.38.1",
+    "graphql": "15.8.0"
+  }
+}

package/build/commands/create-mini/standalone/examples/with-camera-access/src/App.tsx

@@ -0,0 +1,152 @@
+import {useState} from 'react'
+import {View, Text, TouchableOpacity, StyleSheet} from 'react-native'
+import {
+  SafeAreaView,
+  ImageBox,
+  useErrorToast,
+  useImagePicker,
+  useShare,
+} from '@shopify/shop-minis-sdk'
+
+function Button({
+  text,
+  onPress,
+  variant = 'primary',
+  disabled,
+  style,
+}: {
+  text: string
+  onPress: () => void
+  variant?: 'primary' | 'secondary'
+  disabled?: boolean
+  style?: object
+}) {
+  return (
+    <TouchableOpacity
+      disabled={disabled}
+      style={[
+        styles.button,
+        variant === 'primary' ? styles.primaryButton : styles.secondaryButton,
+        disabled && {opacity: 0.5},
+        style,
+      ]}
+      onPress={onPress}
+    >
+      <Text
+        style={[
+          styles.buttonText,
+          {color: variant === 'primary' ? '#FFFFFF' : '#000000'},
+        ]}
+      >
+        {text}
+      </Text>
+    </TouchableOpacity>
+  )
+}
+
+export function App() {
+  const [imageUrl, setImageUrl] = useState<string>()
+  const {showErrorToast} = useErrorToast()
+  const {openCamera, openPicker} = useImagePicker()
+  const {share} = useShare()
+
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <View
+        style={{flex: 1, paddingHorizontal: 16, backgroundColor: '#FFFFFF'}}
+      >
+        <Text style={styles.title}>Share a Photo</Text>
+        <Text style={styles.subtitle}>
+          Let&apos;s explore the native capabilities your Shop Mini can access.
+        </Text>
+        <View>
+          <Button
+            text="Camera access"
+            onPress={async () => {
+              await openCamera({})
+                .then(image => setImageUrl(image.path))
+                .catch(error => {
+                  showErrorToast({
+                    message: error.message,
+                  })
+                })
+            }}
+          />
+          <Text style={{marginTop: 8}}>
+            Run this Mini on a real device to access the camera.
+          </Text>
+        </View>
+        <View style={{marginVertical: 16}}>
+          <Button
+            text="Gallery access"
+            variant="secondary"
+            onPress={async () => {
+              await openPicker({})
+                .then(image => setImageUrl(image.path))
+                .catch(console.log)
+            }}
+          />
+        </View>
+        {imageUrl ? (
+          <View style={{marginTop: 32, alignItems: 'center'}}>
+            <View style={styles.imageContainer}>
+              <ImageBox source={{uri: imageUrl}} style={styles.image} />
+            </View>
+            <Button
+              text="Share photo"
+              variant="secondary"
+              disabled={!imageUrl}
+              style={{width: 200, marginTop: 16}}
+              onPress={async () => {
+                if (imageUrl) {
+                  await share({
+                    url: imageUrl,
+                    title: 'My Shared Image',
+                    type: 'image/*',
+                  }).catch(console.log)
+                }
+              }}
+            />
+          </View>
+        ) : null}
+      </View>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  button: {
+    padding: 12,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  primaryButton: {
+    backgroundColor: '#000000',
+  },
+  secondaryButton: {
+    backgroundColor: '#E6E6E6',
+  },
+  buttonText: {
+    fontSize: 16,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 16,
+    marginTop: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    marginBottom: 16,
+  },
+  imageContainer: {
+    width: 200,
+    height: 200,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  image: {
+    width: 200,
+    height: 200,
+  },
+})

package/build/commands/create-mini/standalone/examples/with-camera-access/src/index.tsx

@@ -0,0 +1,9 @@
+import {MiniAppConfig} from '@shopify/shop-minis-sdk'
+
+import {App} from './App'
+
+const config: MiniAppConfig = {
+  ViewerRoot: App,
+}
+
+export default config

package/build/commands/create-mini/standalone/examples/with-camera-access/src/manifest.json

@@ -0,0 +1,5 @@
+{
+  "name": "with-camera-access",
+  "features": ["FULL_BLEED_VIEWER", "STANDALONE"],
+  "permissions": ["GALLERY", "CAMERA"]
+}

package/build/commands/create-mini/standalone/examples/with-camera-access/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "*": [
+        "*",
+        "*.ios",
+        "*.android",
+        "./node_modules/@shopify/shop-minis-sdk/node_modules/*"
+      ]
+    },
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": false,
+    "jsx": "preserve",
+    "lib": ["es2019"],
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "moduleResolution": "node",
+    "noEmit": true,
+    "incremental": true,
+    "strict": true,
+    "target": "esnext",
+    "skipLibCheck": true,
+    "noImplicitReturns": false,
+    "noFallthroughCasesInSwitch": true,
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "useUnknownInCatchVariables": false
+  },
+  "exclude": ["node_modules"]
+}

package/build/commands/create-mini/standalone/examples/with-fal-ai/.eslintignore

@@ -0,0 +1 @@
+*.graphql.d.ts

package/build/commands/create-mini/standalone/examples/with-fal-ai/.eslintrc.js

@@ -0,0 +1,3 @@
+const {minisEslintConfig} = require('@shopify/shop-minis-sdk/eslint-config')
+
+module.exports = minisEslintConfig

package/build/commands/create-mini/standalone/examples/with-fal-ai/.graphqlrc.js

@@ -0,0 +1 @@
+module.exports = require('@shopify/shop-minis-sdk/graphqlrc')

package/build/commands/create-mini/standalone/examples/with-fal-ai/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "avoid",
+  "bracketSpacing": false,
+  "printWidth": 80
+}

package/build/commands/create-mini/standalone/examples/with-fal-ai/README.md

@@ -0,0 +1,46 @@
+# Product AI Image Generator Mini
+
+A Shop Mini that generates AI-powered product images based on your recently viewed products. Using FAL AI's image generation capabilities, this mini creates realistic studio-quality product images from product titles, descriptions, and shop information.
+
+## Features
+
+- Automatically detects your most recently viewed product
+- Generates AI-powered product images using FAL AI
+- Displays original product information alongside generated images
+- Simple one-click image generation
+
+## Setup
+
+1. Clone this repository
+2. Install dependencies:
+
+   ```bash
+   npm install
+   ```
+
+3. Setup your mini and login with your partners account:
+
+   ```bash
+   npx shop-minis setup
+   ```
+
+4. Set up your FAL AI API key:
+
+   - Sign up for a FAL AI account at [FAL AI](https://fal.ai)
+   - Get your API key from the dashboard
+   - Run `npx shop-minis secrets set fal_ai_key <your-api-key-here>`
+   - Run `npx shop-minis proxies apply`
+
+5. Run the development server:
+   ```bash
+   npm start
+   ```
+
+## Development
+
+This mini is built using:
+
+- React Native
+- TypeScript
+- Shop Minis SDK
+- FAL AI API

package/build/commands/create-mini/standalone/examples/with-fal-ai/assets.d.ts

@@ -0,0 +1,14 @@
+declare module '*.svg' {
+  const content: import('react').FC<import('react-native-svg').SvgProps>
+  export default content
+}
+
+declare module '*.png' {
+  const content: import('react-native').ImageRequireSource
+  export default content
+}
+
+declare module '*.jpg' {
+  const content: import('react-native').ImageRequireSource
+  export default content
+}

package/build/commands/create-mini/standalone/examples/with-fal-ai/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  // Changes to babel config are not supported by the mini platform.
+  // Custom configuration can introduce unexpected behaviour in your mini and could be a cause of rejection during the submission process.
+  presets: ['@shopify/shop-minis-sdk/babel-preset'],
+}

package/build/commands/create-mini/standalone/examples/with-fal-ai/index.tsx

@@ -0,0 +1,5 @@
+import {renderDevelopmentMini} from '@shopify/shop-minis-sdk/src/renderDevelopmentMini'
+
+import MiniApp from './src'
+
+renderDevelopmentMini(MiniApp)

package/build/commands/create-mini/standalone/examples/with-fal-ai/metro.config.js

@@ -0,0 +1,3 @@
+const {getMinisMetroConfig} = require('@shopify/shop-minis-sdk/metro-config')
+
+module.exports = getMinisMetroConfig(__dirname)

package/build/commands/create-mini/standalone/examples/with-fal-ai/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "with-fal-ai",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "shop-minis dev",
+    "test": "jest",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@shopify/shop-minis-sdk": "0.0.16"
+  },
+  "devDependencies": {
+    "@shopify/shop-minis-cli": "0.0.161",
+    "@types/jest": "^29.2.6",
+    "babel-jest": "^26.6.3",
+    "eslint": "^8.32.0",
+    "jest": "^29.3.1",
+    "prettier": "^2.8.2"
+  },
+  "jest": {
+    "preset": "react-native"
+  },
+  "overrides": {
+    "graphql": "15.8.0",
+    "react": "18.2.0",
+    "react-native": "0.73.2"
+  },
+  "resolutions": {
+    "@apollo/federation": "0.38.1",
+    "graphql": "15.8.0"
+  }
+}

package/build/commands/create-mini/standalone/examples/with-fal-ai/src/App.tsx

@@ -0,0 +1,5 @@
+import {HomeScreen} from './screens/HomeScreen'
+
+export function App() {
+  return <HomeScreen />
+}

package/build/commands/create-mini/standalone/examples/with-fal-ai/src/index.tsx

@@ -0,0 +1,9 @@
+import {MiniAppConfig} from '@shopify/shop-minis-sdk'
+
+import {App} from './App'
+
+const config: MiniAppConfig = {
+  ViewerRoot: App,
+}
+
+export default config

package/build/commands/create-mini/standalone/examples/with-fal-ai/src/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "with-fal-ai",
+  "features": ["FULL_BLEED_VIEWER", "STANDALONE"],
+  "trusted_domains": ["v3.fal.media"],
+  "proxies": [
+    {
+      "target_url_pattern": "https://queue.fal.run/fal-ai/flux/schnell*",
+      "allowed_methods": ["POST"],
+      "appended_headers": ["Authorization: Key {{ secrets.fal_ai_key }}"],
+      "user_rate_limit_requests": 10,
+      "user_rate_limit_interval": 3600
+    },
+    {
+      "target_url_pattern": "https://queue.fal.run/fal-ai/flux/requests*",
+      "allowed_methods": ["GET"],
+      "appended_headers": ["Authorization: Key {{ secrets.fal_ai_key }}"],
+      "user_rate_limit_requests": 50,
+      "user_rate_limit_interval": 300
+    }
+  ]
+}

package/build/commands/create-mini/standalone/examples/with-fal-ai/src/screens/HomeScreen.tsx

@@ -0,0 +1,142 @@
+import {useState} from 'react'
+import {ScrollView, View, Text, Button, StyleSheet} from 'react-native'
+import {
+  SafeAreaView,
+  ProductCard,
+  useRecentProducts,
+  Product,
+  Image,
+  useFalAi,
+} from '@shopify/shop-minis-sdk'
+
+function generatePrompt(product: Product): string {
+  return `
+    A realistic Product image photo in a studio setting of a product named ${product.title} from the store: ${product.shop.name}
+  `
+}
+
+function EmptyState() {
+  return (
+    <Text>
+      No recently viewed products found. Close the Mini and visit any product.
+    </Text>
+  )
+}
+
+function ProductSection({
+  product,
+  isLoading,
+  onGenerateImage,
+}: {
+  product: Product
+  isLoading: boolean
+  onGenerateImage: () => void
+}) {
+  return (
+    <>
+      <Text style={styles.title}>Generate an AI image from this product</Text>
+      <Text>
+        Based on the product title, shop and description, this mini generates a
+        realistic image of the product.
+      </Text>
+      <View style={styles.productContainer}>
+        <ProductCard product={product} />
+      </View>
+      <Button
+        disabled={isLoading}
+        onPress={onGenerateImage}
+        title={isLoading ? 'Loading...' : 'Generate an AI image'}
+      />
+    </>
+  )
+}
+
+export function HomeScreen() {
+  const {products} = useRecentProducts({first: 1})
+  const fal = useFalAi()
+  const [imageUrl, setImageUrl] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+
+  const generateImage = async () => {
+    const product = products?.[0]
+    if (!product) return
+
+    setIsLoading(true)
+    setImageUrl('')
+
+    try {
+      const prompt = generatePrompt(product)
+      const response = await fal.subscribe('fal-ai/flux/schnell', {
+        input: {
+          prompt,
+        },
+        mode: 'polling',
+        pollInterval: 1000,
+      })
+
+      if (response.data.images?.[0]?.url) {
+        setImageUrl(response.data.images[0].url)
+      }
+    } catch (error) {
+      console.error('Failed to generateImage:', error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <SafeAreaView>
+      <ScrollView>
+        <View style={styles.container}>
+          <View style={styles.main}>
+            {(() => {
+              if (products === undefined) return null
+              if (products.length === 0) return <EmptyState />
+              return (
+                <ProductSection
+                  product={products[0]}
+                  isLoading={isLoading}
+                  onGenerateImage={generateImage}
+                />
+              )
+            })()}
+
+            {imageUrl ? (
+              <Image source={{uri: imageUrl}} style={styles.generatedImage} />
+            ) : null}
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'stretch',
+    justifyContent: 'center',
+    marginHorizontal: 'auto',
+  },
+  main: {
+    gap: 8,
+    justifyContent: 'center',
+    alignItems: 'stretch',
+    paddingHorizontal: 24,
+  },
+  title: {
+    marginVertical: 10,
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+  productContainer: {
+    marginHorizontal: 50,
+  },
+  generatedImage: {
+    width: '100%',
+    height: 300,
+    marginTop: 12,
+    marginBottom: 20,
+    borderRadius: 8,
+  },
+})