@shopify/shop-minis-cli 0.0.83 → 0.0.84

package/templates/__template_hello_world/src/screens/MultipleChoiceScreen.tsx

@@ -1,75 +0,0 @@
-import {
-  useMultiSelect,
-  Box,
-  MultipleChoice,
-  Text,
-  MultipleChoiceProps,
-} from '@shopify/shop-minis-platform-sdk'
-import {useState} from 'react'
-import {SafeAreaView} from 'react-native'
-import {ScrollView} from 'react-native-gesture-handler'
-
-import {Header} from '../components/Header'
-
-const CHOICE_COUNT = 10
-
-const createChoices = (
-  numberOfChoices: number
-): MultipleChoiceProps['choices'] => {
-  return Array(numberOfChoices)
-    .fill(undefined)
-    .map((_, index) => ({
-      label: `Option ${index + 1}`,
-      value: index,
-    }))
-}
-
-const choices = createChoices(CHOICE_COUNT)
-
-export const MultipleChoiceScreen = () => {
-  const [selectedIndexes, toggleIndex] = useMultiSelect()
-  const [selectedIndex, setSelectedIndex] = useState<number>()
-  const [withPreSelectedIndexes, togglePreSelectedIndex] = useMultiSelect([
-    1, 4,
-  ])
-
-  return (
-    <SafeAreaView style={{flex: 1}}>
-      <ScrollView>
-        <Header />
-        <Box marginTop="s" marginHorizontal="gutter">
-          <Text variant="headerNormal">Single Select</Text>
-        </Box>
-        <Box margin="s">
-          <MultipleChoice
-            selectedIndexes={selectedIndex === undefined ? [] : [selectedIndex]}
-            choices={choices}
-            onChoiceSelected={index =>
-              setSelectedIndex(index === selectedIndex ? undefined : index)
-            }
-          />
-        </Box>
-        <Box marginTop="s" marginHorizontal="gutter">
-          <Text variant="headerNormal">Multi Select</Text>
-        </Box>
-        <Box margin="s">
-          <MultipleChoice
-            selectedIndexes={selectedIndexes}
-            choices={choices}
-            onChoiceSelected={toggleIndex}
-          />
-        </Box>
-        <Box marginTop="s" marginHorizontal="gutter">
-          <Text variant="headerNormal">Preselect Options</Text>
-        </Box>
-        <Box margin="s">
-          <MultipleChoice
-            selectedIndexes={withPreSelectedIndexes}
-            choices={choices}
-            onChoiceSelected={togglePreSelectedIndex}
-          />
-        </Box>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}

package/templates/__template_hello_world/src/screens/ProductCardGridScreen.tsx

@@ -1,68 +0,0 @@
-import {SafeAreaView} from 'react-native'
-import {
-  useMinisQuery,
-  Box,
-  Text,
-  TouchableProduct,
-  ProductCard,
-  ProductCardGrid,
-  useTheme,
-} from '@shopify/shop-minis-platform-sdk'
-
-import TestProductsQuery from '../data/TestProducts.graphql'
-import {Header} from '../components/Header'
-
-const SHOP_GID = 'gid://shopify/Shop/68822335510'
-const PRODUCT_GIDS = [
-  'gid://shopify/Product/7982542651414',
-  'gid://shopify/Product/7982528397334',
-  'gid://shopify/Product/7982535704598',
-  'gid://shopify/Product/7982577352726',
-  'gid://shopify/Product/7982564245526',
-  'gid://shopify/Product/7982547763222',
-  'gid://shopify/Product/7982499495958',
-  'gid://shopify/Product/7982540521494',
-  'gid://shopify/Product/7982554710038',
-  'gid://shopify/Product/7982557200406',
-  'gid://shopify/Product/7982571257878',
-  'gid://shopify/Product/7982372388886',
-]
-
-export const ProductCardGridScreen = () => {
-  const theme = useTheme()
-  const {loading, data} = useMinisQuery(TestProductsQuery, {
-    variables: {
-      shopId: SHOP_GID,
-      productIds: PRODUCT_GIDS,
-    },
-    fetchPolicy: 'cache-and-network',
-  })
-
-  const products = data?.shop?.productsByIds ?? []
-
-  if (loading || !products) return null
-
-  return (
-    <SafeAreaView
-      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
-    >
-      <Header />
-      <ProductCardGrid
-        products={products}
-        ListHeaderComponent={
-          <Box pb="s">
-            <Text variant="headerBold" mb="xs">
-              ProductCardGrid
-            </Text>
-          </Box>
-        }
-        renderItem={({product}) => (
-          <TouchableProduct product={product} key={product.id}>
-            <ProductCard shopId={SHOP_GID} product={product} />
-          </TouchableProduct>
-        )}
-        contentContainerStyle={{padding: theme.spacing.gutter}}
-      />
-    </SafeAreaView>
-  )
-}

package/templates/__template_hello_world/src/screens/ProductCardScreen.tsx

@@ -1,62 +0,0 @@
-import {SafeAreaView, ScrollView} from 'react-native'
-import {
-  Box,
-  ProductCard,
-  Text,
-  TouchableProduct,
-  useMinisQuery,
-  useTheme,
-} from '@shopify/shop-minis-platform-sdk'
-
-import TestQuery from '../data/Test.graphql'
-import {Header} from '../components/Header'
-
-const SHOP_GID = 'gid://shopify/Shop/68822335510'
-const PRODUCT_GID = 'gid://shopify/Product/7982542651414'
-
-export const ProductCardScreen = () => {
-  const theme = useTheme()
-  const {loading, data} = useMinisQuery(TestQuery, {
-    variables: {
-      shopId: SHOP_GID,
-      productId: PRODUCT_GID,
-    },
-    fetchPolicy: 'cache-and-network',
-  })
-
-  if (loading || !data?.shop?.product) return null
-
-  return (
-    <SafeAreaView
-      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
-    >
-      <ScrollView>
-        <Header />
-        <Box px="gutter">
-          <Text variant="headerBold" mb="xs">
-            ProductCard
-          </Text>
-        </Box>
-        <Box flexDirection="row" px="gutter" pt="m">
-          <Box flex={1} padding="xs">
-            <Text variant="label">Default</Text>
-            <TouchableProduct product={data.shop.product}>
-              <ProductCard shopId={SHOP_GID} product={data.shop.product} />
-            </TouchableProduct>
-          </Box>
-          <Box flex={1} padding="xs">
-            <Text variant="label">With a badge</Text>
-            <TouchableProduct product={data.shop.product}>
-              <ProductCard
-                shopId={SHOP_GID}
-                product={data.shop.product}
-                badgeText="New"
-                badgeColor="backgrounds-dangerous"
-              />
-            </TouchableProduct>
-          </Box>
-        </Box>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}

package/templates/__template_hello_world/src/screens/ProductLinkScreen.tsx

@@ -1,215 +0,0 @@
-import {
-  Box,
-  CurrencyCode,
-  ProductLink,
-  ProductLinkProps,
-  Text,
-  useTheme,
-} from '@shopify/shop-minis-platform-sdk'
-import {SafeAreaView} from 'react-native'
-
-import {Header} from '../components/Header'
-
-const FIXTURE: ProductLinkProps['product'] = {
-  __typename: 'Product',
-  id: 'gid://shopify/Product/7982547763222',
-  title: 'The Hero Snowboard',
-  featuredImage: {
-    __typename: 'Image',
-    id: 'gid://shopify/ProductImage/39774118445078',
-    altText: null,
-    url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
-  },
-  variants: {
-    __typename: 'ProductVariantConnection',
-    nodes: [
-      {
-        __typename: 'ProductVariant',
-        id: 'gid://shopify/ProductVariant/43695288975382',
-        title: 'Default Title',
-        price: {
-          __typename: 'Money',
-          amount: '605.95',
-          currencyCode: CurrencyCode.USD,
-        },
-        image: {
-          __typename: 'Image',
-          id: 'gid://shopify/ProductImage/39774118445078',
-          altText: null,
-          url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
-        },
-      },
-    ],
-  },
-}
-
-const FIXTURE_WITH_DISCOUNT: ProductLinkProps['product'] = {
-  __typename: 'Product',
-  id: 'gid://shopify/Product/7982547763222',
-  title: 'The Hero Snowboard',
-  featuredImage: {
-    __typename: 'Image',
-    id: 'gid://shopify/ProductImage/39774118445078',
-    altText: null,
-    url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
-  },
-  variants: {
-    __typename: 'ProductVariantConnection',
-    nodes: [
-      {
-        __typename: 'ProductVariant',
-        id: 'gid://shopify/ProductVariant/43695288975382',
-        title: 'Default Title',
-        compareAtPrice: {
-          __typename: 'Money',
-          amount: '605.95',
-          currencyCode: CurrencyCode.USD,
-        },
-        price: {
-          __typename: 'Money',
-          amount: '555.95',
-          currencyCode: CurrencyCode.USD,
-        },
-        image: {
-          __typename: 'Image',
-          id: 'gid://shopify/ProductImage/39774118445078',
-          altText: null,
-          url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
-        },
-      },
-    ],
-  },
-}
-
-const FIXTURE_WITH_DISCOUNT_BIG_MONEY: ProductLinkProps['product'] = {
-  __typename: 'Product',
-  id: 'gid://shopify/Product/7982547763222',
-  title: 'The Hero Snowboard',
-  featuredImage: {
-    __typename: 'Image',
-    id: 'gid://shopify/ProductImage/39774118445078',
-    altText: null,
-    url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
-  },
-  variants: {
-    __typename: 'ProductVariantConnection',
-    nodes: [
-      {
-        __typename: 'ProductVariant',
-        id: 'gid://shopify/ProductVariant/43695288975382',
-        title: 'Default Title',
-        compareAtPrice: {
-          __typename: 'Money',
-          amount: '22605.95',
-          currencyCode: CurrencyCode.USD,
-        },
-        price: {
-          __typename: 'Money',
-          amount: '12555.95',
-          currencyCode: CurrencyCode.USD,
-        },
-        image: {
-          __typename: 'Image',
-          id: 'gid://shopify/ProductImage/39774118445078',
-          altText: null,
-          url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
-        },
-      },
-    ],
-  },
-}
-
-const FIXTURE_WITH_MULTIPLE_VARIANTS: ProductLinkProps['product'] = {
-  __typename: 'Product',
-  id: 'gid://shopify/Product/7982547763222',
-  title: 'The Hero Snowboard',
-  featuredImage: {
-    __typename: 'Image',
-    id: 'gid://shopify/ProductImage/39774118445078',
-    altText: null,
-    url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
-  },
-  variants: {
-    __typename: 'ProductVariantConnection',
-    nodes: [
-      {
-        __typename: 'ProductVariant',
-        id: 'gid://shopify/ProductVariant/43695288975382',
-        title: 'Default Title',
-        price: {
-          __typename: 'Money',
-          amount: '605.95',
-          currencyCode: CurrencyCode.USD,
-        },
-        image: {
-          __typename: 'Image',
-          id: 'gid://shopify/ProductImage/39774118445078',
-          altText: null,
-          url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
-        },
-      },
-      {
-        __typename: 'ProductVariant',
-        id: 'gid://shopify/ProductVariant/43695281569814',
-        title: 'Default Title',
-        price: {
-          __typename: 'Money',
-          amount: '577.95',
-          currencyCode: CurrencyCode.USD,
-        },
-        image: {
-          __typename: 'Image',
-          id: 'gid://shopify/ProductImage/39774117986326',
-          altText: null,
-          url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main.jpg?v=1674664528',
-        },
-      },
-    ],
-  },
-}
-
-export const ProductLinkScreen = () => {
-  const theme = useTheme()
-  return (
-    <SafeAreaView
-      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
-    >
-      <Header />
-      <Box px="gutter">
-        <Text variant="headerBold" mb="xs">
-          ProductLink
-        </Text>
-        <Box marginBottom="m">
-          <Text variant="bodyLarge" mb="xs">
-            Default
-          </Text>
-          <ProductLink product={FIXTURE} />
-        </Box>
-
-        <Box marginBottom="m">
-          <Text variant="bodyLarge" mb="xs">
-            With discount
-          </Text>
-          <ProductLink product={FIXTURE_WITH_DISCOUNT} />
-        </Box>
-
-        <Box marginBottom="m">
-          <Text variant="bodyLarge" mb="xs">
-            With large discount
-          </Text>
-          <ProductLink product={FIXTURE_WITH_DISCOUNT_BIG_MONEY} />
-        </Box>
-
-        <Box marginBottom="m">
-          <Text variant="bodyLarge" mb="xs">
-            With variant selection
-          </Text>
-          <ProductLink
-            product={FIXTURE_WITH_MULTIPLE_VARIANTS}
-            productVariantId="gid://shopify/ProductVariant/43695281569814"
-          />
-        </Box>
-      </Box>
-    </SafeAreaView>
-  )
-}

package/templates/__template_hello_world/src/screens/ProgressIndicatorScreen.tsx

@@ -1,77 +0,0 @@
-import {useCallback, useState} from 'react'
-import {SafeAreaView} from 'react-native'
-import {
-  Box,
-  Text,
-  ProgressIndicators,
-  Button,
-  useTheme,
-} from '@shopify/shop-minis-platform-sdk'
-import {runOnJS, useSharedValue, withTiming} from 'react-native-reanimated'
-
-import {Header} from '../components/Header'
-
-const PROGRESS_INDICATORS = 10
-
-export const ProgressIndicatorScreen = () => {
-  const theme = useTheme()
-  const currentActiveAnimatedIndicator = useSharedValue(0)
-  const progress = useSharedValue(0)
-
-  const [currentActive, setCurrentActive] = useState(
-    currentActiveAnimatedIndicator.value
-  )
-
-  const startProgressIndicator = useCallback(() => {
-    progress.value = withTiming(1, {duration: 5000}, finished => {
-      if (
-        finished &&
-        currentActiveAnimatedIndicator.value < PROGRESS_INDICATORS - 1
-      ) {
-        currentActiveAnimatedIndicator.value += 1
-        progress.value = 0
-        runOnJS(setCurrentActive)(currentActiveAnimatedIndicator.value)
-
-        runOnJS(startProgressIndicator)()
-      }
-    })
-  }, [progress, currentActiveAnimatedIndicator])
-
-  const reset = useCallback(() => {
-    currentActiveAnimatedIndicator.value = 0
-    progress.value = 0
-    setCurrentActive(0)
-  }, [currentActiveAnimatedIndicator, progress])
-
-  return (
-    <SafeAreaView
-      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
-    >
-      <Header />
-      <Box flex={1} px="gutter">
-        <Text variant="headerBold">ProgressIndicators</Text>
-
-        <Box
-          my="s"
-          padding="m"
-          backgroundColor="backgrounds-overlay"
-          borderRadius={16}
-          flex={1}
-        >
-          <ProgressIndicators
-            numberOfIndicators={PROGRESS_INDICATORS}
-            currentStep={currentActive}
-            progress={progress}
-            width="100%"
-          />
-          <Box marginTop="s">
-            <Button onPress={startProgressIndicator} text="Start" />
-          </Box>
-          <Box marginTop="s">
-            <Button onPress={reset} text="Stop and reset" variant="secondary" />
-          </Box>
-        </Box>
-      </Box>
-    </SafeAreaView>
-  )
-}

package/templates/__template_hello_world/src/screens/QuantityPickerScreen.tsx

@@ -1,76 +0,0 @@
-import {useState} from 'react'
-import {SafeAreaView, ScrollView} from 'react-native'
-import {
-  Box,
-  QuantityPicker,
-  QuantityPickerProps,
-  Text,
-} from '@shopify/shop-minis-platform-sdk'
-
-import {Header} from '../components/Header'
-
-export const QuantityPickerScreen = () => {
-  return (
-    <SafeAreaView style={{flex: 1}}>
-      <ScrollView style={{flex: 1}}>
-        <Header />
-        <Box px="gutter">
-          <Text variant="heroBold">QuantityPicker</Text>
-
-          <Box paddingTop="m">
-            <Text>No limits</Text>
-          </Box>
-
-          <Box paddingTop="xs">
-            <StatefulQuantityPicker quantity={1} disabled={false} />
-          </Box>
-
-          <Box paddingTop="m">
-            <Text>Maximum 10 items</Text>
-          </Box>
-
-          <Box paddingTop="xs">
-            <StatefulQuantityPicker
-              quantity={1}
-              maxQuantity={10}
-              disabled={false}
-            />
-          </Box>
-
-          <Box paddingTop="m">
-            <Text>Disabled</Text>
-          </Box>
-
-          <Box paddingTop="xs">
-            <StatefulQuantityPicker quantity={5} disabled />
-          </Box>
-
-          <Box paddingTop="m">
-            <Text>With Label</Text>
-          </Box>
-
-          <Box paddingTop="xs">
-            <StatefulQuantityPicker label="Quantity" quantity={5} />
-          </Box>
-        </Box>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}
-
-type StatefulQuantityPickerProps = Omit<QuantityPickerProps, 'onQuantityChange'>
-
-function StatefulQuantityPicker({
-  quantity: initialQuantity,
-  ...props
-}: StatefulQuantityPickerProps) {
-  const [quantity, setQuantity] = useState<number>(initialQuantity)
-
-  return (
-    <QuantityPicker
-      {...props}
-      quantity={quantity}
-      onQuantityChange={setQuantity}
-    />
-  )
-}

package/templates/__template_hello_world/src/screens/QuizResultScreen.tsx

@@ -1,82 +0,0 @@
-import {Box, Text} from '@shopify/shop-minis-platform-sdk'
-import {useMemo} from 'react'
-import {Image, SafeAreaView, ScrollView} from 'react-native'
-
-import {useQuizContext} from '../components/quiz/QuizProvider'
-import {
-  addNameToText,
-  getImageCarouselAnswerUrls,
-  getMultilpleChoiceAnswerLabels,
-  getQuestionById,
-} from '../utils/quizUtils'
-
-export const QuizResultScreen = () => {
-  const {quizResult, quizData, userName} = useQuizContext()
-
-  const formattedResults = useMemo(() => {
-    if (!quizData) return []
-
-    return Object.entries(quizResult!).map(([questionId, result]) => {
-      let answer = ''
-      // image carousel type will be an imageUrl
-      let type: 'imageUrl' | 'string' = 'string'
-
-      switch (result.slideType) {
-        case 'MultipleChoiceSlide':
-          answer = getMultilpleChoiceAnswerLabels(
-            quizData,
-            questionId,
-            result.answer as number[]
-          ).join(', ')
-          break
-        case 'ImageCarouselSlide':
-          type = 'imageUrl'
-          answer = getImageCarouselAnswerUrls(
-            quizData,
-            questionId,
-            result.answer as number[]
-          )[0]
-          break
-        default:
-          answer = result.answer as string
-      }
-
-      const question = addNameToText(
-        getQuestionById(quizData, questionId),
-        userName
-      )
-
-      return {
-        type,
-        question,
-        answer,
-      }
-    })
-  }, [quizData, quizResult, userName])
-
-  return (
-    <SafeAreaView>
-      <ScrollView>
-        <Box paddingHorizontal="gutter" paddingVertical="xs">
-          <Text variant="posterXS" textAlign="center" marginVertical="m">
-            Results
-          </Text>
-          {formattedResults.map(({question, answer, type}, index) => (
-            <Box key={question} marginBottom="s">
-              <Text variant="headerNormal" marginBottom="xs">
-                {index + 1}. {question}
-              </Text>
-              {type === 'imageUrl' ? (
-                <Image
-                  style={{width: 160, height: 160}}
-                  source={{uri: answer}}
-                />
-              ) : null}
-              {type === 'string' ? <Text>Answer: {answer}</Text> : null}
-            </Box>
-          ))}
-        </Box>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}

package/templates/__template_hello_world/src/screens/QuizScreen.tsx

@@ -1,40 +0,0 @@
-import {NavigationContainer} from '@react-navigation/native'
-import {createNativeStackNavigator} from '@react-navigation/native-stack'
-
-import {Header} from '../components/Header'
-import {QuizContextProvider} from '../components/quiz/QuizProvider'
-
-import {QuizResultScreen} from './QuizResultScreen'
-import {QuizSlideScreen} from './QuizSlideScreen'
-
-const Stack = createNativeStackNavigator()
-
-export const QuizScreen = () => {
-  return (
-    <QuizContextProvider>
-      <>
-        <Header />
-        <NavigationContainer independent>
-          <Stack.Navigator>
-            <Stack.Screen
-              name="QuizScreen.QuizSlide"
-              component={QuizSlideScreen}
-              options={{
-                title: '__MINI_APP_NAME_PASCAL_CASE__ Quiz',
-                headerBackTitle: 'Previous',
-              }}
-              initialParams={{
-                slideIndex: 0,
-              }}
-            />
-            <Stack.Screen
-              name="QuizScreen.QuizResult"
-              component={QuizResultScreen}
-              options={{headerShown: false}}
-            />
-          </Stack.Navigator>
-        </NavigationContainer>
-      </>
-    </QuizContextProvider>
-  )
-}