@shopify/shop-minis-cli 0.0.83 → 0.0.84

package/templates/__template_hello_world/src/fixtures/mocked-products-with-variants.ts

@@ -1,274 +0,0 @@
-const BASE_PRODUCT = {
-  __typename: 'Product',
-  id: 'gid://shopify/Product/7632803594495',
-  title: 'Canvas Shoes',
-  featuredImage: {
-    __typename: 'Image',
-    id: 'gid://shopify/ProductImage/37069008929023',
-    altText: null,
-    url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/mahabis-footwear-dv5AJQJ6ay8-unsplash.jpg?v=1651848310',
-  },
-} as const
-
-const BASE_VARIANT = {
-  __typename: 'ProductVariant',
-  image: {
-    __typename: 'Image',
-    id: 'gid://shopify/ProductImage/39889211949311',
-    altText: null,
-    url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/files/518DoMlGnHL._AC_SY695._SX._UX._SY._UY.jpg?v=1687945939',
-  },
-  price: {
-    __typename: 'Money',
-    amount: '899.0',
-    currencyCode: 'USD',
-  },
-}
-
-function createVariantForOptions(
-  optionEntries: [optionName: string, optionValue: string][],
-  {currentlyNotInStock = false, availableForSale = true} = {}
-) {
-  return {
-    ...BASE_VARIANT,
-    id: `gid://shopify/ProductVariant/${optionEntries
-      .map(([, value]) => value)
-      .join('')}`,
-    selectedOptions: optionEntries.map(([name, value]) => ({
-      __typename: 'SelectedOption',
-      name,
-      value,
-    })),
-    title: optionEntries.map(([, value]) => value).join(' / '),
-    currentlyNotInStock,
-    availableForSale,
-  }
-}
-
-const BASE_VARIANTS_CONFIG: [string, string][][] = [
-  [
-    ['Size', '43'],
-    ['Color', 'Black'],
-  ],
-  [
-    ['Size', '43'],
-    ['Color', 'Red'],
-  ],
-  [
-    ['Size', '43'],
-    ['Color', 'White'],
-  ],
-  [
-    ['Size', '44'],
-    ['Color', 'Black'],
-  ],
-  [
-    ['Size', '44'],
-    ['Color', 'Red'],
-  ],
-  [
-    ['Size', '44'],
-    ['Color', 'White'],
-  ],
-  [
-    ['Size', '45'],
-    ['Color', 'Black'],
-  ],
-  [
-    ['Size', '45'],
-    ['Color', 'Red'],
-  ],
-  [
-    ['Size', '45'],
-    ['Color', 'White'],
-  ],
-]
-
-const MOCKED_PRODUCT_1_DISABLED_VARIANTS = [
-  ['43', 'Black'],
-  ['44', 'White'],
-  ['44', 'Red'],
-  ['45', 'Red'],
-]
-
-/**
- * 2 options: size, color
- *
- * all variants available except:
- * variant with size 45 and color white is not available for sale
- */
-export const MOCKED_PRODUCT_1 = {
-  ...BASE_PRODUCT,
-  options: [
-    {
-      __typename: 'ProductOption',
-      id: 'gid://shopify/ProductOption/9702957383935',
-      name: 'Size',
-      values: [
-        '40',
-        '43',
-        '44',
-        '45',
-        '46',
-        '47',
-        '48',
-        '49',
-        '50',
-        '51',
-        '52',
-        '53',
-        '54',
-        '55',
-      ],
-    },
-    {
-      __typename: 'ProductOption',
-      id: 'gid://shopify/ProductOption/10355959628031',
-      name: 'Color',
-      values: ['Black', 'Red', 'White'],
-    },
-  ],
-  variants: {
-    __typename: 'ProductVariantConnection',
-    nodes: [
-      // Standard options
-      ...BASE_VARIANTS_CONFIG.map(options => createVariantForOptions(options)),
-      // Use many sizes for black
-      createVariantForOptions([
-        ['Size', '55'],
-        ['Color', 'Black'],
-      ]),
-      createVariantForOptions([
-        ['Size', '54'],
-        ['Color', 'Black'],
-      ]),
-      createVariantForOptions([
-        ['Size', '53'],
-        ['Color', 'Black'],
-      ]),
-      createVariantForOptions([
-        ['Size', '52'],
-        ['Color', 'Black'],
-      ]),
-      createVariantForOptions([
-        ['Size', '51'],
-        ['Color', 'Black'],
-      ]),
-      createVariantForOptions([
-        ['Size', '50'],
-        ['Color', 'Black'],
-      ]),
-      createVariantForOptions([
-        ['Size', '49'],
-        ['Color', 'Black'],
-      ]),
-      createVariantForOptions([
-        ['Size', '48'],
-        ['Color', 'Black'],
-      ]),
-      createVariantForOptions([
-        ['Size', '47'],
-        ['Color', 'Black'],
-      ]),
-      createVariantForOptions([
-        ['Size', '46'],
-        ['Color', 'Black'],
-      ]),
-    ].map(variant => {
-      MOCKED_PRODUCT_1_DISABLED_VARIANTS.forEach(variantOptions =>
-        makeVariantNotAvailableForSale(variant, variantOptions)
-      )
-
-      return variant
-    }),
-  },
-  defaultVariant: createVariantForOptions([
-    ['Size', '43'],
-    ['Color', 'White'],
-  ]),
-}
-
-export const MOCKED_PRODUCT_1_DESCRIPTION = `Product with variants by size and color.\n* Sizes >45 only have Black color\n* Not available for sale: ${MOCKED_PRODUCT_1_DISABLED_VARIANTS.join(
-  ' - '
-)}`
-
-const MOCKED_PRODUCT_2_DISABLED_VARIANTS = [
-  ['45', 'Red', 'Warm'],
-  ['44', 'White', 'Cool'],
-  ['43', 'Black', 'Warm'],
-  ['44', 'Red', 'Extra Warm'],
-]
-
-/**
- * 3 options: size, color and warmth
- */
-export const MOCKED_PRODUCT_2 = {
-  ...BASE_PRODUCT,
-  options: [
-    {
-      __typename: 'ProductOption',
-      id: 'gid://shopify/ProductOption/9702957383935',
-      name: 'Size',
-      values: ['43', '44', '45'],
-    },
-    {
-      __typename: 'ProductOption',
-      id: 'gid://shopify/ProductOption/10355959628031',
-      name: 'Color',
-      values: ['Black', 'Red', 'White'],
-    },
-    {
-      __typename: 'ProductOption',
-      id: 'gid://shopify/ProductOption/WARMTH',
-      name: 'Warmth',
-      values: ['Cool', 'Warm', 'Extra Warm'],
-    },
-  ],
-  variants: {
-    __typename: 'ProductVariantConnection',
-    nodes: [
-      // Add warmth variants
-      ...BASE_VARIANTS_CONFIG.map(options => [
-        ...options,
-        ['Warmth', 'Cool'],
-      ]).map(options => createVariantForOptions(options as [string, string][])),
-      ...BASE_VARIANTS_CONFIG.map(options => [
-        ...options,
-        ['Warmth', 'Warm'],
-      ]).map(options => createVariantForOptions(options as [string, string][])),
-      ...BASE_VARIANTS_CONFIG.map(options => [
-        ...options,
-        ['Warmth', 'Extra Warm'],
-      ]).map(options => createVariantForOptions(options as [string, string][])),
-    ].map(variant => {
-      // make some variants not available for sale
-      MOCKED_PRODUCT_2_DISABLED_VARIANTS.forEach(variantOptions =>
-        makeVariantNotAvailableForSale(variant, variantOptions)
-      )
-      return variant
-    }),
-  },
-  defaultVariant: createVariantForOptions([
-    ['Size', '43'],
-    ['Color', 'White'],
-    ['Warmth', 'Cool'],
-  ]),
-}
-
-export const MOCKED_PRODUCT_2_DESCRIPTION = `Product with variants by size, color and warmth.\n* Not available for sale: ${MOCKED_PRODUCT_2_DISABLED_VARIANTS.join(
-  ' - '
-)}`
-
-function makeVariantNotAvailableForSale(
-  variant: ReturnType<typeof createVariantForOptions>,
-  optionValues: string[]
-) {
-  if (
-    optionValues.every(optionValue =>
-      variant.selectedOptions.find((opt: any) => opt.value === optionValue)
-    )
-  ) {
-    variant.availableForSale = false
-  }
-  return variant
-}

package/templates/__template_hello_world/src/hooks/useQuizData.ts

@@ -1,26 +0,0 @@
-import {useEffect, useState} from 'react'
-
-import {QuizData, QuizDataState} from '../components/quiz/types'
-import {mockQuizData} from '../utils/mockQuizData'
-
-const MOCK_FETCH_TIME = 2000
-
-export const useQuizData = () => {
-  const [quizDataState, setQuizDataState] = useState<QuizDataState>('Loading')
-  const [quizData, setQuizData] = useState<QuizData>()
-
-  // Here is where you would fetch the quesitons from your server
-  // and process them into the shape you need
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setQuizData(mockQuizData)
-      setQuizDataState('Ready')
-    }, MOCK_FETCH_TIME)
-    return () => clearTimeout(timer)
-  }, [])
-
-  return {
-    quizDataState,
-    quizData,
-  }
-}

package/templates/__template_hello_world/src/hooks/useQuizState.ts

@@ -1,27 +0,0 @@
-import {useCallback, useState} from 'react'
-
-import {QuizResult, QuizResultEntry} from '../components/quiz/types'
-
-export const useQuizState = () => {
-  const [userName, setUserName] = useState('you')
-
-  const [quizResult, setQuizResult] = useState<QuizResult>()
-
-  const recordQuestionResult = useCallback(
-    (id: string, answer: QuizResultEntry) => {
-      const newQuizResult = {
-        ...quizResult,
-        [id]: answer,
-      }
-      setQuizResult(newQuizResult)
-    },
-    [quizResult]
-  )
-
-  return {
-    recordQuestionResult,
-    quizResult,
-    setUserName,
-    userName,
-  }
-}

package/templates/__template_hello_world/src/index.tsx

@@ -1,10 +0,0 @@
-import {MiniAppConfig} from '@shopify/shop-minis-platform-sdk'
-
-import {__MINI_APP_NAME_PASCAL_CASE__Navigator} from './routes'
-
-const config: MiniAppConfig = {
-  name: '__MINI_APP_NAME__',
-  Root: __MINI_APP_NAME_PASCAL_CASE__Navigator,
-}
-
-export default config

package/templates/__template_hello_world/src/routes.tsx

@@ -1,149 +0,0 @@
-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 {VariantPickerScreen} from './screens/VariantPickerScreen'
-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'
-import {InputScreen} from './screens/InputScreen'
-import {MultipleChoiceScreen} from './screens/MultipleChoiceScreen'
-import {QuizScreen} from './screens/QuizScreen'
-import {ImageMultipleChoiceScreen} from './screens/ImageMultipleChoiceScreen'
-import {AccordionScreen} from './screens/AccordionScreen'
-import {ShopActionsScreen} from './screens/ShopActionsScreen'
-
-const Stack = createNativeStackNavigator()
-
-export const __MINI_APP_NAME_PASCAL_CASE__Navigator = () => {
-  return (
-    <Stack.Navigator>
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.Home"
-        component={HomeScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.Avatar"
-        component={AvatarScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.BottomSheet"
-        component={BottomSheetScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.Buttons"
-        component={ButtonsScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.Grid"
-        component={GridScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.Icons"
-        component={IconsScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.Media"
-        component={MediaScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.ProgressIndicator"
-        component={ProgressIndicatorScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.Spinner"
-        component={SpinnerScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.Typography"
-        component={TypographyScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.QuantityPicker"
-        component={QuantityPickerScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.VariantPicker"
-        component={VariantPickerScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.WebView"
-        component={WebViewScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.Modal"
-        component={ModalScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.ProductLink"
-        component={ProductLinkScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.ProductCard"
-        component={ProductCardScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.ProductCardGrid"
-        component={ProductCardGridScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.Inputs"
-        component={InputScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.MultipleChoice"
-        component={MultipleChoiceScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.ImageMultipleChoice"
-        component={ImageMultipleChoiceScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.Quiz"
-        component={QuizScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.Accordion"
-        component={AccordionScreen}
-        options={{headerShown: false}}
-      />
-      <Stack.Screen
-        name="__MINI_APP_NAME_PASCAL_CASE__.ShopActions"
-        component={ShopActionsScreen}
-        options={{headerShown: false}}
-      />
-    </Stack.Navigator>
-  )
-}

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

@@ -1,73 +0,0 @@
-import {
-  Box,
-  Text,
-  AccordionProps,
-  Accordion,
-} from '@shopify/shop-minis-platform-sdk'
-import {SafeAreaView, ScrollView} from 'react-native'
-
-import {Header} from '../components/Header'
-
-const createAccordionEntries = (
-  numberOfEntries: number,
-  initiallyOpenIndexes?: number[]
-): AccordionProps['items'] => {
-  return Array(numberOfEntries)
-    .fill(undefined)
-    .map((_, index) => ({
-      title: `Option ${
-        index + 1
-      } - Reiciendis repellendus blanditiis, nam soluta `,
-      body: (
-        <Text>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum
-          architecto, quibusdam incidunt error atque id voluptas sit dolores
-          reprehenderit. Reiciendis repellendus blanditiis, nam soluta
-          distinctio est nostrum reprehenderit veritatis id END?
-        </Text>
-      ),
-      isInitiallyOpen: initiallyOpenIndexes?.includes(index),
-    }))
-}
-
-const mockAccordionItems = createAccordionEntries(5)
-const mockAccordionItemsWithInitialOpen = createAccordionEntries(5, [1, 2])
-
-export const AccordionScreen = () => {
-  return (
-    <SafeAreaView style={{flex: 1}}>
-      <ScrollView style={{flex: 1}}>
-        <Header />
-        <Box padding="m">
-          <Box marginBottom="m">
-            <Text variant="headerBold">Accordion</Text>
-          </Box>
-          <Box marginBottom="xxl">
-            <Box marginBottom="s">
-              <Text variant="subtitle">All Closed</Text>
-            </Box>
-            <Box>
-              <Accordion items={mockAccordionItems} />
-            </Box>
-          </Box>
-          <Box marginBottom="xxl">
-            <Box marginBottom="s">
-              <Text variant="subtitle">Initial Open (2 & 3)</Text>
-            </Box>
-            <Box>
-              <Accordion items={mockAccordionItemsWithInitialOpen} />
-            </Box>
-          </Box>
-          <Box marginBottom="xxl">
-            <Box marginBottom="s">
-              <Text variant="subtitle">Toggle (alwaysOpen=false)</Text>
-            </Box>
-            <Box>
-              <Accordion items={mockAccordionItems} alwaysOpen={false} />
-            </Box>
-          </Box>
-        </Box>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}

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

@@ -1,95 +0,0 @@
-import {Platform, SafeAreaView, ScrollView} from 'react-native'
-import {Avatar, Box, Text, useTheme} from '@shopify/shop-minis-platform-sdk'
-
-import {Header} from '../components/Header'
-
-const monospaceFontFamily = Platform.OS === 'ios' ? 'Menlo' : 'monospace'
-
-export const AvatarScreen = () => {
-  const theme = useTheme()
-  return (
-    <SafeAreaView
-      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
-    >
-      <ScrollView
-        style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
-      >
-        <Header />
-        <Box px="gutter">
-          <Box marginBottom="m">
-            <Text variant="headerBold" mb="xs">
-              Avatar
-            </Text>
-            <Text variant="bodyLarge">
-              Avatars are used to show a thumbnail of a user or business.
-            </Text>
-          </Box>
-
-          <Box flexDirection="row" alignItems="center">
-            <Avatar
-              color="foregrounds-regular"
-              source={{uri: 'https://picsum.photos/id/1080/1000/1500'}}
-              size="small"
-            />
-            <Avatar
-              color="foregrounds-regular"
-              source={{uri: 'https://picsum.photos/id/1080/1000/1500'}}
-              size="medium"
-            />
-            <Avatar
-              color="foregrounds-regular"
-              source={{uri: 'https://picsum.photos/id/1080/1000/1500'}}
-              size="large"
-            />
-          </Box>
-
-          <Text mb="l" mt="s">
-            Size&nbsp;
-            <Text
-              fontFamily={monospaceFontFamily}
-              variant="bodyLargeBold"
-              color="backgrounds-success"
-            >
-              `small`
-            </Text>
-            &nbsp; | &nbsp;
-            <Text
-              fontFamily={monospaceFontFamily}
-              variant="bodyLargeBold"
-              color="backgrounds-success"
-            >
-              `medium`
-            </Text>
-            &nbsp; | &nbsp;
-            <Text
-              fontFamily={monospaceFontFamily}
-              variant="bodyLargeBold"
-              color="backgrounds-success"
-            >
-              `large`
-            </Text>
-          </Text>
-
-          <Box flexDirection="row" alignItems="center">
-            <Avatar
-              color="foregrounds-regular"
-              source={{uri: 'https://picsum.photos/id/1080/1000/1500'}}
-              title="Title"
-            />
-          </Box>
-
-          <Text mb="l" mt="s">
-            Title&nbsp;
-            <Text
-              fontFamily={monospaceFontFamily}
-              variant="bodyLargeBold"
-              color="backgrounds-dangerous"
-            >
-              string
-            </Text>
-          </Text>
-        </Box>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}