@shopify/shop-minis-cli 0.0.35

package/templates/__template_hello_world/src/components/ComponentLink.ts

@@ -0,0 +1,70 @@
+import {StackParamList} from '../types'
+
+export interface ComponentLink {
+  name: string
+  screen: keyof StackParamList
+  thumbnail?: any
+}
+
+export const componentLinks: ComponentLink[] = [
+  {
+    name: 'Avatar',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Avatar',
+  },
+  {
+    name: 'BottomSheet',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.BottomSheet',
+  },
+  {
+    name: 'Buttons',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Buttons',
+  },
+  {
+    name: 'Grid',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Grid',
+  },
+  {
+    name: 'Icon',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Icons',
+  },
+  {
+    name: 'Media',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Media',
+  },
+  {
+    name: 'Modal',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Modal',
+  },
+  {
+    name: 'ProductCard',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.ProductCard',
+  },
+  {
+    name: 'ProductCardGrid',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.ProductCardGrid',
+  },
+  {
+    name: 'ProductLink',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.ProductLink',
+  },
+  {
+    name: 'ProgressIndicator',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.ProgressIndicator',
+  },
+  {
+    name: 'Spinner',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Spinner',
+  },
+  {
+    name: 'Typography',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Typography',
+  },
+  {
+    name: 'QuantityPicker',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.QuantityPicker',
+  },
+  {
+    name: 'WebView',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.WebView',
+  },
+]

package/templates/__template_hello_world/src/components/ComponentListItem.tsx

@@ -0,0 +1,38 @@
+import {TouchableOpacity} from 'react-native'
+import {useNavigation} from '@react-navigation/native'
+import {NativeStackNavigationProp} from '@react-navigation/native-stack'
+import {Box, Text, Icon} from '@shopify/shop-minis-platform-sdk'
+
+import {StackParamList} from '../types'
+
+export const ComponentListItem = ({
+  name,
+  screen,
+}: {
+  name: string
+  screen: keyof StackParamList
+}) => {
+  const navigation = useNavigation<NativeStackNavigationProp<StackParamList>>()
+
+  return (
+    <Box
+      width="100%"
+      paddingVertical="s"
+      borderBottomColor="borders-regular"
+      borderBottomWidth={1}
+    >
+      <TouchableOpacity onPress={() => navigation.navigate(screen)}>
+        <Box
+          justifyContent="space-between"
+          flexDirection="row"
+          alignItems="center"
+        >
+          <Text variant="buttonLarge" marginBottom="xxs">
+            {name}
+          </Text>
+          <Icon name="chevron-right" />
+        </Box>
+      </TouchableOpacity>
+    </Box>
+  )
+}

package/templates/__template_hello_world/src/components/FeaturedComponents.tsx

@@ -0,0 +1,108 @@
+import {useCallback} from 'react'
+import {
+  FlatList,
+  useWindowDimensions,
+  Image,
+  TouchableOpacity,
+} from 'react-native'
+import {useNavigation} from '@react-navigation/native'
+import {NativeStackNavigationProp} from '@react-navigation/native-stack'
+import {Box, Icon, Text} from '@shopify/shop-minis-platform-sdk'
+
+import {StackParamList} from '../types'
+
+import {ComponentLink, componentLinks} from './ComponentLink'
+
+export const FeaturedComponents = ({
+  components,
+}: {
+  components: ComponentLink[]
+}) => {
+  const navigation = useNavigation<NativeStackNavigationProp<StackParamList>>()
+  const {width} = useWindowDimensions()
+  const cardWidth = width * 0.6
+  const cardHeight = cardWidth * 0.8
+  const randomComponentCard = {
+    name: 'Surprise me',
+  }
+
+  const renderCard = useCallback(
+    ({item, index}: {item: ComponentLink; index: number}) => {
+      const isLast = index === components.length
+
+      return (
+        <TouchableOpacity
+          key={item.name}
+          onPress={() => {
+            if (item.name === 'Surprise me') {
+              const randomComponentLink =
+                componentLinks[
+                  Math.floor(Math.random() * componentLinks.length)
+                ]
+              navigation.navigate(randomComponentLink.screen)
+            } else {
+              navigation.navigate(item.screen)
+            }
+          }}
+        >
+          <Box
+            width={cardWidth}
+            height={cardHeight}
+            backgroundColor="backgrounds-subdued"
+            borderRadius={16}
+            marginLeft="s"
+            marginRight={isLast ? 's' : 'none'}
+            flexDirection="column"
+          >
+            {item.thumbnail && !isLast && (
+              <Image
+                style={{
+                  width: cardWidth,
+                  height: cardHeight,
+                }}
+                source={item.thumbnail}
+              />
+            )}
+
+            {isLast ? (
+              <Box
+                flexDirection="column"
+                alignItems="center"
+                justifyContent="center"
+                height={cardHeight}
+              >
+                <Icon name="network" size="m" />
+                <Text mt="xxs" variant="bodyLargeBold">
+                  {item.name}
+                </Text>
+              </Box>
+            ) : (
+              <Text
+                variant="bodyLargeBold"
+                mt="m"
+                ml="m"
+                style={{
+                  position: 'absolute',
+                }}
+              >
+                {item.name}
+              </Text>
+            )}
+          </Box>
+        </TouchableOpacity>
+      )
+    },
+    [components.length, cardWidth, cardHeight, navigation]
+  )
+
+  return (
+    <FlatList
+      horizontal
+      style={{flex: 1}}
+      data={[...components, randomComponentCard as ComponentLink]}
+      keyExtractor={item => item.name}
+      renderItem={renderCard}
+      showsHorizontalScrollIndicator={false}
+    />
+  )
+}

package/templates/__template_hello_world/src/components/Header.tsx

@@ -0,0 +1,40 @@
+import {TouchableOpacity, Linking} from 'react-native'
+import {useNavigation} from '@react-navigation/native'
+import {NativeStackNavigationProp} from '@react-navigation/native-stack'
+import {Box, Icon, Text} from '@shopify/shop-minis-platform-sdk'
+
+import {StackParamList} from '../types'
+
+const SHOP_MINIS_DOCS_URL = 'https://shop.app/minis/docs'
+
+export const Header = () => {
+  const navigation = useNavigation<NativeStackNavigationProp<StackParamList>>()
+  return (
+    <Box
+      px="s"
+      py="s"
+      flexDirection="row"
+      justifyContent="space-between"
+      alignItems="center"
+    >
+      <Box>
+        <TouchableOpacity
+          onPress={() => navigation.goBack()}
+          accessibilityLabel="Navigate back"
+        >
+          <Box mt="xs">
+            <Icon name="back" />
+          </Box>
+        </TouchableOpacity>
+      </Box>
+      <TouchableOpacity onPress={() => Linking.openURL(SHOP_MINIS_DOCS_URL)}>
+        <Box mt="xs" flexDirection="row" alignItems="center">
+          <Text variant="bodySmall" mr="xs">
+            Read docs
+          </Text>
+          <Icon name="launch" />
+        </Box>
+      </TouchableOpacity>
+    </Box>
+  )
+}

package/templates/__template_hello_world/src/data/Test.graphql

@@ -0,0 +1,33 @@
+query HelloWorldTest($shopId: ID!, $productId: ID!) {
+  shop(id: $shopId) {
+    id
+    name
+    product(id: $productId) {
+      id
+      title
+      featuredImage {
+        id
+        altText
+        url
+      }
+      defaultVariant {
+        id
+        title
+        isFavorited
+        compareAtPrice {
+          amount
+          currencyCode
+        }
+        price {
+          amount
+          currencyCode
+        }
+        image {
+          id
+          altText
+          url
+        }
+      }
+    }
+  }
+}

package/templates/__template_hello_world/src/data/Test.graphql.d.ts

@@ -0,0 +1,114 @@
+import {DocumentNode} from 'graphql-typed'
+import {
+  URL,
+  Decimal,
+  CurrencyCode,
+} from '@shopify/shop-minis-platform-sdk/api/types'
+export namespace HelloWorldTestQueryPartialData {
+  export interface ShopProductFeaturedImage {
+    __typename?: 'Image' | null
+    id?: string | null
+    altText?: string | null
+    url?: URL | null
+  }
+  export interface ShopProductDefaultVariantCompareAtPrice {
+    __typename?: 'Money' | null
+    amount?: Decimal | null
+    currencyCode?: CurrencyCode | null
+  }
+  export interface ShopProductDefaultVariantPrice {
+    __typename?: 'Money' | null
+    amount?: Decimal | null
+    currencyCode?: CurrencyCode | null
+  }
+  export interface ShopProductDefaultVariantImage {
+    __typename?: 'Image' | null
+    id?: string | null
+    altText?: string | null
+    url?: URL | null
+  }
+  export interface ShopProductDefaultVariant {
+    __typename?: 'ProductVariant' | null
+    id?: string | null
+    title?: string | null
+    isFavorited?: boolean | null
+    compareAtPrice?: HelloWorldTestQueryPartialData.ShopProductDefaultVariantCompareAtPrice | null
+    price?: HelloWorldTestQueryPartialData.ShopProductDefaultVariantPrice | null
+    image?: HelloWorldTestQueryPartialData.ShopProductDefaultVariantImage | null
+  }
+  export interface ShopProduct {
+    __typename?: 'Product' | null
+    id?: string | null
+    title?: string | null
+    featuredImage?: HelloWorldTestQueryPartialData.ShopProductFeaturedImage | null
+    defaultVariant?: HelloWorldTestQueryPartialData.ShopProductDefaultVariant | null
+  }
+  export interface Shop {
+    __typename?: 'Shop' | null
+    id?: string | null
+    name?: string | null
+    product?: HelloWorldTestQueryPartialData.ShopProduct | null
+  }
+}
+export interface HelloWorldTestQueryPartialData {
+  shop?: HelloWorldTestQueryPartialData.Shop | null
+}
+export namespace HelloWorldTestQueryData {
+  export interface Variables {
+    shopId: string
+    productId: string
+  }
+  export interface ShopProductFeaturedImage {
+    __typename: 'Image'
+    id?: string | null
+    altText?: string | null
+    url: URL
+  }
+  export interface ShopProductDefaultVariantCompareAtPrice {
+    __typename: 'Money'
+    amount: Decimal
+    currencyCode: CurrencyCode
+  }
+  export interface ShopProductDefaultVariantPrice {
+    __typename: 'Money'
+    amount: Decimal
+    currencyCode: CurrencyCode
+  }
+  export interface ShopProductDefaultVariantImage {
+    __typename: 'Image'
+    id?: string | null
+    altText?: string | null
+    url: URL
+  }
+  export interface ShopProductDefaultVariant {
+    __typename: 'ProductVariant'
+    id: string
+    title: string
+    isFavorited: boolean
+    compareAtPrice?: HelloWorldTestQueryData.ShopProductDefaultVariantCompareAtPrice | null
+    price: HelloWorldTestQueryData.ShopProductDefaultVariantPrice
+    image?: HelloWorldTestQueryData.ShopProductDefaultVariantImage | null
+  }
+  export interface ShopProduct {
+    __typename: 'Product'
+    id: string
+    title: string
+    featuredImage?: HelloWorldTestQueryData.ShopProductFeaturedImage | null
+    defaultVariant: HelloWorldTestQueryData.ShopProductDefaultVariant
+  }
+  export interface Shop {
+    __typename: 'Shop'
+    id: string
+    name: string
+    product?: HelloWorldTestQueryData.ShopProduct | null
+  }
+}
+export interface HelloWorldTestQueryData {
+  shop?: HelloWorldTestQueryData.Shop | null
+}
+declare const document: DocumentNode<
+  HelloWorldTestQueryData,
+  HelloWorldTestQueryData.Variables,
+  HelloWorldTestQueryPartialData
+>
+export default document

package/templates/__template_hello_world/src/data/TestProducts.graphql

@@ -0,0 +1,34 @@
+query HelloWorldTestProducts($shopId: ID!, $productIds: [ID!]!) {
+  shop(id: $shopId) {
+    id
+    name
+    productsByIds(ids: $productIds) {
+      id
+      title
+      tags
+      featuredImage {
+        id
+        altText
+        url
+      }
+      defaultVariant {
+        id
+        title
+        isFavorited
+        compareAtPrice {
+          amount
+          currencyCode
+        }
+        price {
+          amount
+          currencyCode
+        }
+        image {
+          id
+          altText
+          url
+        }
+      }
+    }
+  }
+}

package/templates/__template_hello_world/src/data/TestProducts.graphql.d.ts

@@ -0,0 +1,119 @@
+import {DocumentNode} from 'graphql-typed'
+import {
+  URL,
+  Decimal,
+  CurrencyCode,
+} from '@shopify/shop-minis-platform-sdk/api/types'
+
+export namespace HelloWorldTestProductsQueryPartialData {
+  export interface ShopProductsByIdsFeaturedImage {
+    __typename?: 'Image' | null
+    id?: string | null
+    altText?: string | null
+    url?: URL | null
+  }
+  export interface ShopProductsByIdsDefaultVariantCompareAtPrice {
+    __typename?: 'Money' | null
+    amount?: Decimal | null
+    currencyCode?: CurrencyCode | null
+  }
+  export interface ShopProductsByIdsDefaultVariantPrice {
+    __typename?: 'Money' | null
+    amount?: Decimal | null
+    currencyCode?: CurrencyCode | null
+  }
+  export interface ShopProductsByIdsDefaultVariantImage {
+    __typename?: 'Image' | null
+    id?: string | null
+    altText?: string | null
+    url?: URL | null
+  }
+  export interface ShopProductsByIdsDefaultVariant {
+    __typename?: 'ProductVariant' | null
+    id?: string | null
+    title?: string | null
+    isFavorited?: boolean | null
+    compareAtPrice?: HelloWorldTestProductsQueryPartialData.ShopProductsByIdsDefaultVariantCompareAtPrice | null
+    price?: HelloWorldTestProductsQueryPartialData.ShopProductsByIdsDefaultVariantPrice | null
+    image?: HelloWorldTestProductsQueryPartialData.ShopProductsByIdsDefaultVariantImage | null
+  }
+  export interface ShopProductsByIds {
+    __typename?: 'Product' | null
+    id?: string | null
+    title?: string | null
+    tags?: (string | null)[] | null
+    featuredImage?: HelloWorldTestProductsQueryPartialData.ShopProductsByIdsFeaturedImage | null
+    defaultVariant?: HelloWorldTestProductsQueryPartialData.ShopProductsByIdsDefaultVariant | null
+  }
+  export interface Shop {
+    __typename?: 'Shop' | null
+    id?: string | null
+    name?: string | null
+    productsByIds?:
+      | (HelloWorldTestProductsQueryPartialData.ShopProductsByIds | null)[]
+      | null
+  }
+}
+export interface HelloWorldTestProductsQueryPartialData {
+  shop?: HelloWorldTestProductsQueryPartialData.Shop | null
+}
+export namespace HelloWorldTestProductsQueryData {
+  export interface Variables {
+    shopId: string
+    productIds: string[]
+  }
+  export interface ShopProductsByIdsFeaturedImage {
+    __typename: 'Image'
+    id?: string | null
+    altText?: string | null
+    url: URL
+  }
+  export interface ShopProductsByIdsDefaultVariantCompareAtPrice {
+    __typename: 'Money'
+    amount: Decimal
+    currencyCode: CurrencyCode
+  }
+  export interface ShopProductsByIdsDefaultVariantPrice {
+    __typename: 'Money'
+    amount: Decimal
+    currencyCode: CurrencyCode
+  }
+  export interface ShopProductsByIdsDefaultVariantImage {
+    __typename: 'Image'
+    id?: string | null
+    altText?: string | null
+    url: URL
+  }
+  export interface ShopProductsByIdsDefaultVariant {
+    __typename: 'ProductVariant'
+    id: string
+    title: string
+    isFavorited: boolean
+    compareAtPrice?: HelloWorldTestProductsQueryData.ShopProductsByIdsDefaultVariantCompareAtPrice | null
+    price: HelloWorldTestProductsQueryData.ShopProductsByIdsDefaultVariantPrice
+    image?: HelloWorldTestProductsQueryData.ShopProductsByIdsDefaultVariantImage | null
+  }
+  export interface ShopProductsByIds {
+    __typename: 'Product'
+    id: string
+    title: string
+    tags: string[]
+    featuredImage?: HelloWorldTestProductsQueryData.ShopProductsByIdsFeaturedImage | null
+    defaultVariant: HelloWorldTestProductsQueryData.ShopProductsByIdsDefaultVariant
+  }
+  export interface Shop {
+    __typename: 'Shop'
+    id: string
+    name: string
+    productsByIds: (HelloWorldTestProductsQueryData.ShopProductsByIds | null)[]
+  }
+}
+export interface HelloWorldTestProductsQueryData {
+  shop?: HelloWorldTestProductsQueryData.Shop | null
+}
+declare const document: DocumentNode<
+  HelloWorldTestProductsQueryData,
+  HelloWorldTestProductsQueryData.Variables,
+  HelloWorldTestProductsQueryPartialData
+>
+export default document

package/templates/__template_hello_world/src/index.tsx

@@ -0,0 +1,9 @@
+import {theme as defaultTheme, Theme} from '@shopify/shop-minis-platform-sdk'
+
+import {__MINI_APP_HANDLE_PASCAL_CASE__Navigator} from './routes'
+
+export const theme: Theme = {
+  ...defaultTheme,
+}
+
+export default __MINI_APP_HANDLE_PASCAL_CASE__Navigator

package/templates/__template_hello_world/src/routes.tsx

@@ -0,0 +1,107 @@
+import {createNativeStackNavigator} from '@react-navigation/native-stack'
+
+import {HomeScreen} from './screens/HomeScreen'
+import {AvatarScreen} from './screens/AvatarScreen'
+import {BottomSheetScreen} from './screens/BottomSheetScreen'
+import {ButtonsScreen} from './screens/ButtonsScreen'
+import {GridScreen} from './screens/GridScreen'
+import {IconsScreen} from './screens/IconsScreen'
+import {MediaScreen} from './screens/MediaScreen'
+import {ProgressIndicatorScreen} from './screens/ProgressIndicatorScreen'
+import {SpinnerScreen} from './screens/SpinnerScreen'
+import {TypographyScreen} from './screens/TypographyScreen'
+import {QuantityPickerScreen} from './screens/QuantityPickerScreen'
+import {WebViewScreen} from './screens/WebViewScreen'
+import {ModalScreen} from './screens/ModalScreen'
+import {ProductLinkScreen} from './screens/ProductLinkScreen'
+import {ProductCardScreen} from './screens/ProductCardScreen'
+import {ProductCardGridScreen} from './screens/ProductCardGridScreen'
+
+const Stack = createNativeStackNavigator()
+
+export const __MINI_APP_HANDLE_PASCAL_CASE__Navigator = () => {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.Home"
+        component={HomeScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.Avatar"
+        component={AvatarScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.BottomSheet"
+        component={BottomSheetScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.Buttons"
+        component={ButtonsScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.Grid"
+        component={GridScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.Icons"
+        component={IconsScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.Media"
+        component={MediaScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.ProgressIndicator"
+        component={ProgressIndicatorScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.Spinner"
+        component={SpinnerScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.Typography"
+        component={TypographyScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.QuantityPicker"
+        component={QuantityPickerScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.WebView"
+        component={WebViewScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.Modal"
+        component={ModalScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.ProductLink"
+        component={ProductLinkScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.ProductCard"
+        component={ProductCardScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.ProductCardGrid"
+        component={ProductCardGridScreen}
+        options={{headerShown: false}}
+      />
+    </Stack.Navigator>
+  )
+}