@shopify/shop-minis-cli 0.0.172 → 0.0.173

package/build/commands/create-mini/standalone/examples/with-getting-started/src/screens/NativeFeaturesScreen.tsx

@@ -1,138 +0,0 @@
-import {useState} from 'react'
-import {ScrollView, TouchableOpacity} from 'react-native'
-import {useNavigation} from '@react-navigation/native'
-import {NativeStackNavigationProp} from '@react-navigation/native-stack'
-import {
-  Box,
-  SafeAreaView,
-  Text,
-  useTheme,
-  Button,
-  Icon,
-  useMinisDimensions,
-  Image,
-  Divider,
-  useImagePicker,
-  useShare,
-} from '@shopify/shop-minis-sdk'
-
-import {RootStackParamList} from '../types/screens'
-
-export function NativeFeaturesScreen() {
-  const theme = useTheme()
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>()
-  const {height, width} = useMinisDimensions()
-  const {share} = useShare()
-  const {openCamera, openPicker} = useImagePicker()
-  const [imageUrl, setImageUrl] = useState<string>()
-
-  return (
-    <SafeAreaView
-      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
-    >
-      <ScrollView>
-        <Box
-          flex={1}
-          paddingHorizontal="gutter"
-          backgroundColor="backgrounds-regular"
-        >
-          <Box>
-            <TouchableOpacity
-              onPress={() => navigation.goBack()}
-              accessibilityLabel="Navigate back"
-            >
-              <Box marginTop="xs">
-                <Icon name="arrow-left" />
-              </Box>
-            </TouchableOpacity>
-          </Box>
-          <Text variant="heroBold" marginBottom="s" marginTop="xs">
-            Unlock Native Capabilities
-          </Text>
-          <Text variant="subtitle" marginBottom="s">
-            Let&apos;s explore the native capabilities your Shop Mini can
-            access.
-          </Text>
-          <Box>
-            <Button
-              text="Camera access"
-              onPress={async () => {
-                await openCamera({})
-                  .then(image => {
-                    setImageUrl(image.path)
-                  })
-                  .catch(error => {
-                    console.log(error)
-                  })
-              }}
-            />
-            <Text variant="bodySmall" marginTop="xs">
-              Run this Mini on a real device to access the camera.
-            </Text>
-          </Box>
-          <Box marginVertical="s">
-            <Button
-              text="Gallery access"
-              variant="secondary"
-              onPress={async () => {
-                await openPicker({})
-                  .then(image => {
-                    setImageUrl(image.path)
-                  })
-                  .catch(error => {
-                    console.log(error)
-                  })
-              }}
-            />
-          </Box>
-          {imageUrl ? (
-            <Box marginBottom="s">
-              <Box
-                style={{
-                  width: 100,
-                  height: 100,
-                  borderRadius: 10,
-                  overflow: 'hidden',
-                }}
-              >
-                <Image
-                  source={{uri: imageUrl}}
-                  style={{width: 100, height: 100}}
-                />
-              </Box>
-            </Box>
-          ) : null}
-          <Box>
-            <Button
-              text="Share sheet"
-              variant="tertiary"
-              onPress={async () => {
-                await share({
-                  url: 'https://shop.app/minis',
-                  title: 'title',
-                }).catch(error => {
-                  console.log(error)
-                })
-              }}
-            />
-          </Box>
-          <Divider marginVertical="s" />
-          <Box>
-            <Text variant="subtitle" marginBottom="s">
-              Use some of our built-in APIs
-            </Text>
-            <Text>Screen height: {height}</Text>
-            <Text>Screen width: {width}</Text>
-          </Box>
-          <Divider marginVertical="s" />
-          <Text marginBottom="s">
-            We look forward to seeing what you build! Check out the
-            documentation at
-          </Text>
-          <Text>https://shop.app/minis</Text>
-        </Box>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}

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

@@ -1,5 +0,0 @@
-import {ParamListBase} from '@react-navigation/native'
-
-export interface RootStackParamList extends ParamListBase {
-  'GettingStarted.Home': undefined
-}

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

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

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

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

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

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

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

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

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

@@ -1,25 +0,0 @@
-# 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

@@ -1,14 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

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

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

@@ -1,33 +0,0 @@
-{
-  "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

@@ -1,23 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

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

@@ -1,126 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

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