@shopify/shop-minis-cli 0.0.161 → 0.0.162

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

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

@@ -0,0 +1,115 @@
+import {useMemo, useState} from 'react'
+import {View, Text, TextInput, TouchableOpacity} from 'react-native'
+import {
+  useProductSearch,
+  SafeAreaView,
+  ProductCardGrid,
+  TouchableProduct,
+  ProductCard,
+} from '@shopify/shop-minis-sdk'
+import debounce from 'lodash/debounce'
+
+import {HeaderAction} from '../components/HeaderAction'
+
+const LoadMoreButton = ({onPress}: {onPress: () => void}) => (
+  <View style={{marginTop: 16}}>
+    <TouchableOpacity
+      onPress={onPress}
+      style={{
+        backgroundColor: 'black',
+        padding: 12,
+        borderRadius: 12,
+        alignItems: 'center',
+      }}
+    >
+      <Text style={{color: 'white', fontWeight: '600'}}>Load more</Text>
+    </TouchableOpacity>
+  </View>
+)
+
+export function ProductSearchScreen() {
+  const [inputValue, setInputValue] = useState('')
+  const [query, setQuery] = useState('')
+
+  const debouncedSetQuery = useMemo(
+    () =>
+      debounce((text: string) => {
+        setQuery(text)
+      }, 300),
+    []
+  )
+
+  const {products, loadMore} = useProductSearch({
+    query,
+    first: 10,
+    filters: {
+      minimumRating: 4,
+      price: {
+        min: 150,
+        max: 250,
+      },
+    },
+    skip: !query,
+  })
+
+  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 Products
+          </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>
+
+        {products && products.length > 0 ? (
+          <View style={{flex: 1, marginTop: 16}}>
+            <ProductCardGrid
+              products={products}
+              renderItem={({product}) => (
+                <TouchableProduct product={product}>
+                  <ProductCard key={product.id} product={product} />
+                </TouchableProduct>
+              )}
+              initialNumToRender={10}
+              ListFooterComponent={<LoadMoreButton onPress={loadMore} />}
+            />
+          </View>
+        ) : null}
+      </View>
+    </SafeAreaView>
+  )
+}

package/build/commands/create-mini/standalone/examples/with-search/src/types/screens.ts

@@ -0,0 +1,6 @@
+import {ParamListBase} from '@react-navigation/native'
+
+export interface RootStackParamList extends ParamListBase {
+  ProductSearch: undefined
+  MerchantSearch: undefined
+}

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

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

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

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

package/build/commands/create-mini/standalone/examples/with-user-data/.prettierrc.json

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