@shopify/shop-minis-cli 0.0.161 → 0.0.163

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,
+  },
+})

package/build/commands/create-mini/standalone/examples/with-fal-ai/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-getting-started/README.md

@@ -0,0 +1,18 @@
+# Getting Started Mini
+
+A Shop Mini that demonstrates the basics of how to get started with Shop Minis.
+
+## Setup
+
+1. Run the development server:
+   ```bash
+   npm start
+   ```
+
+## Development
+
+This mini is built using:
+
+- React Native
+- TypeScript
+- Shop Minis SDK

package/build/commands/create-mini/standalone/examples/with-getting-started/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "getting-started",
+  "name": "with-getting-started",
   "version": "0.0.1",
   "private": true,
   "scripts": {
@@ -8,10 +8,10 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@shopify/shop-minis-sdk": "0.0.11"
+    "@shopify/shop-minis-sdk": "0.0.16"
   },
   "devDependencies": {
-    "@shopify/shop-minis-cli": "0.0.158",
+    "@shopify/shop-minis-cli": "0.0.161",
     "@types/jest": "^29.2.6",
     "babel-jest": "^26.6.3",
     "eslint": "^8.32.0",

package/build/commands/create-mini/standalone/examples/with-getting-started/src/manifest.json

@@ -1,7 +1,5 @@
 {
   "name": "Getting Started",
-  "handle": "getting-started",
-  "description": "Getting Started Example Mini",
   "features": ["FULL_BLEED_VIEWER", "STANDALONE"],
   "permissions": ["GALLERY", "CAMERA"]
 }

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

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

package/build/commands/create-mini/standalone/examples/with-search/.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-search/.graphqlrc.js

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

package/build/commands/create-mini/standalone/examples/with-search/.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-search/README.md

@@ -0,0 +1,25 @@
+# Show Buyers's data
+
+A Shop Mini that searches forShop products and merchants
+
+## Features
+
+- Fetches products and merchants using the Shop Minis Platform SDK
+- Displays vertical scrollable lists of items
+- Shows product cards with images and details
+- Shows shop cards with logos and names, and navigation to the shop
+
+## Setup
+
+1. Run the development server:
+   ```bash
+   npm start
+   ```
+
+## Development
+
+This mini is built using:
+
+- React Native
+- TypeScript
+- Shop Minis SDK

package/build/commands/create-mini/standalone/examples/with-search/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-search/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-search/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-search/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-search/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "with-search",
+  "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-search/src/App.tsx

@@ -0,0 +1,23 @@
+import {createNativeStackNavigator} from '@react-navigation/native-stack'
+
+import {ProductSearchScreen} from './screens/ProductSearchScreen'
+import {MerchantSearchScreen} from './screens/MerchantSearchScreen'
+
+const Stack = createNativeStackNavigator()
+
+export function App() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="ProductSearch"
+        component={ProductSearchScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="MerchantSearch"
+        component={MerchantSearchScreen}
+        options={{headerShown: false}}
+      />
+    </Stack.Navigator>
+  )
+}

package/build/commands/create-mini/standalone/examples/with-search/src/components/HeaderAction.tsx

@@ -0,0 +1,32 @@
+import {useNavigation, useRoute} from '@react-navigation/native'
+import {NativeStackNavigationProp} from '@react-navigation/native-stack'
+import {TouchableOpacity, Text} from 'react-native'
+
+import {RootStackParamList} from '../types/screens'
+
+export function HeaderAction() {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>()
+  const route = useRoute()
+
+  const isProductSearch = route.name === 'ProductSearch'
+
+  const navigationTarget = isProductSearch ? 'MerchantSearch' : 'ProductSearch'
+
+  return (
+    <TouchableOpacity
+      onPress={() => navigation.navigate(navigationTarget)}
+      style={{
+        backgroundColor: 'black',
+        paddingVertical: 6,
+        paddingHorizontal: 12,
+        borderRadius: 8,
+        alignItems: 'center',
+      }}
+    >
+      <Text style={{color: 'white', fontWeight: '600'}}>
+        {isProductSearch ? 'Search Merchants' : 'Search Products'}
+      </Text>
+    </TouchableOpacity>
+  )
+}

package/build/commands/create-mini/standalone/examples/with-search/src/components/ShopCard.tsx

@@ -0,0 +1,92 @@
+import {View, Text} from 'react-native'
+import {Icon, IconButton, ImageBox, Shop} from '@shopify/shop-minis-sdk'
+
+interface ShopCardProps {
+  shop: Shop
+  onFavoriteToggled?: () => void
+}
+
+const IMAGE_ASPECT_RATIO = 1
+
+export const ShopCard: React.FC<ShopCardProps> = ({
+  shop,
+  onFavoriteToggled,
+}) => {
+  const {logoImage, name, isFollowing, reviewAnalytics} = shop
+
+  const averageRating = reviewAnalytics?.averageRating
+
+  const heartButton = isFollowing ? (
+    <IconButton
+      accessibilityLabel="Favorite"
+      onPress={() => onFavoriteToggled?.()}
+      name="heart"
+      variant="filled"
+      backgroundColor="primary-button-background"
+      size="xs"
+    />
+  ) : (
+    <IconButton
+      accessibilityLabel="Favorite"
+      onPress={() => onFavoriteToggled?.()}
+      name="favorites-heart"
+      variant="overlay"
+      size="xs"
+    />
+  )
+
+  return (
+    <View>
+      <View
+        style={{
+          borderRadius: 16,
+          borderColor: '#E4E5E7',
+          borderWidth: 0.5,
+          borderRightWidth: 1,
+        }}
+      >
+        <View
+          style={{
+            minWidth: 134,
+            width: '100%',
+            aspectRatio: IMAGE_ASPECT_RATIO,
+          }}
+        >
+          <ImageBox
+            borderRadius="m"
+            style={{
+              width: '100%',
+              height: '100%',
+              minHeight: 134,
+            }}
+            resizeMode="cover"
+            source={{
+              uri: logoImage?.url,
+            }}
+          />
+        </View>
+
+        {onFavoriteToggled ? (
+          <View style={{position: 'absolute', right: 12, bottom: 12}}>
+            {heartButton}
+          </View>
+        ) : null}
+      </View>
+
+      <View
+        style={{flexDirection: 'column', alignItems: 'center', marginTop: 4}}
+      >
+        <Text style={{fontSize: 16, fontWeight: '400'}}>{name}</Text>
+
+        {averageRating ? (
+          <View
+            style={{flexDirection: 'row', alignItems: 'center', marginLeft: 8}}
+          >
+            <Text>{averageRating?.toFixed(1)}</Text>
+            <Icon name="star-filled" size="xs" />
+          </View>
+        ) : null}
+      </View>
+    </View>
+  )
+}

package/build/commands/create-mini/standalone/examples/with-search/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-search/src/manifest.json

@@ -0,0 +1,7 @@
+{
+  "name": "with-search-merchants",
+  "features": [
+    "FULL_BLEED_VIEWER",
+    "STANDALONE"
+  ]
+}

package/build/commands/create-mini/standalone/examples/with-search/src/screens/MerchantSearchScreen.tsx

@@ -0,0 +1,126 @@
+import {useMemo, useState, useCallback} from 'react'
+import {TouchableOpacity, TextInput, Text, View} from 'react-native'
+import {
+  useShopSearch,
+  useUpdateFollowedShops,
+  useTheme,
+  useShopNavigation,
+  SafeAreaView,
+  Grid,
+  Shop,
+} from '@shopify/shop-minis-sdk'
+import debounce from 'lodash/debounce'
+
+import {ShopCard} from '../components/ShopCard'
+import {HeaderAction} from '../components/HeaderAction'
+
+export function MerchantSearchScreen() {
+  const theme = useTheme()
+
+  const [inputValue, setInputValue] = useState('')
+  const [query, setQuery] = useState('')
+
+  const {followShop, unfollowShop} = useUpdateFollowedShops()
+  const {navigateToShop} = useShopNavigation()
+  const debouncedSetQuery = useMemo(
+    () =>
+      debounce((text: string) => {
+        setQuery(text)
+      }, 300),
+    []
+  )
+
+  const {shops, refetch} = useShopSearch({
+    query,
+    first: 10,
+    skip: !query,
+  })
+
+  const onShopCardPressedHandler = useCallback(
+    (shop: Shop) => {
+      navigateToShop({
+        shopId: shop.id,
+        shopName: shop.name,
+      })
+    },
+    [navigateToShop]
+  )
+
+  const onFavoriteToggledHandler = useCallback(
+    async (shop: Shop) => {
+      if (shop.isFollowing) {
+        unfollowShop({shopId: shop.id})
+      } else {
+        followShop({shopId: shop.id})
+      }
+
+      await refetch()
+    },
+    [followShop, unfollowShop, refetch]
+  )
+
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <View
+        style={{
+          flex: 1,
+          paddingHorizontal: 16,
+          marginBottom: 8,
+          backgroundColor: 'white',
+        }}
+      >
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: 8,
+            marginTop: 4,
+          }}
+        >
+          <Text style={{fontSize: 20, fontWeight: 'bold'}}>
+            Search Merchants
+          </Text>
+
+          <HeaderAction />
+        </View>
+
+        <View>
+          <TextInput
+            placeholder="Search for..."
+            value={inputValue}
+            onChangeText={text => {
+              setInputValue(text)
+              debouncedSetQuery(text)
+            }}
+            style={{
+              borderWidth: 1,
+              borderColor: 'gray',
+              borderRadius: 5,
+              padding: 10,
+            }}
+          />
+        </View>
+
+        {shops && shops.length > 0 ? (
+          <View style={{flex: 1, marginTop: theme.spacing.m}}>
+            <Grid
+              data={shops}
+              renderItem={({item}) => (
+                <TouchableOpacity
+                  onPress={() => onShopCardPressedHandler(item)}
+                >
+                  <ShopCard
+                    shop={item}
+                    onFavoriteToggled={() => onFavoriteToggledHandler(item)}
+                  />
+                </TouchableOpacity>
+              )}
+              initialNumToRender={10}
+            />
+          </View>
+        ) : null}
+      </View>
+    </SafeAreaView>
+  )
+}