@shopify/shop-minis-cli 0.0.37 → 0.0.82

package/templates/__template_common/metro.config.js

@@ -1,31 +1,5 @@
-const {getDefaultConfig} = require('metro-config') // eslint-disable-line import/no-extraneous-dependencies
+const {
+  getMinisMetroConfig,
+} = require('@shopify/shop-minis-runtime/metro-config')
 
-module.exports = (async () => {
-  const {
-    resolver: {sourceExts, assetExts},
-  } = await getDefaultConfig()
-
-  return {
-    // We need to explicitly tell metro/haste/watchman to register the root directory
-    // otherwise imports fail when running minis directly.
-    // https://github.com/facebook/react-native/issues/24432#issuecomment-482798850
-    watchFolders: [__dirname],
-    server: {
-      port: parseInt(process.env.RCT_METRO_PORT, 10) || 8082,
-    },
-    transformer: {
-      // eslint-disable-next-line require-await
-      getTransformOptions: async () => ({
-        transform: {
-          experimentalImportSupport: false,
-          inlineRequires: true,
-        },
-      }),
-      babelTransformerPath: require.resolve('react-native-svg-transformer'),
-    },
-    resolver: {
-      assetExts: assetExts.filter(ext => ext !== 'svg'),
-      sourceExts: [...sourceExts, 'svg'],
-    },
-  }
-})()
+module.exports = getMinisMetroConfig(__dirname)

package/templates/__template_common/package.json

@@ -1,65 +1,35 @@
 {
-  "name": "__MINI_APP_HANDLE_KEBAB_CASE__",
+  "name": "__MINI_APP_NAME_KEBAB_CASE__",
   "version": "0.0.1",
   "private": true,
   "scripts": {
     "start": "shop-minis dev",
-    "presubmit": "shop-minis check && yarn lint",
+    "submit": "shop-minis submit",
+    "cancel-submission": "shop-minis cancel-submission",
+    "check-submission": "shop-minis check-submission",
     "test": "jest",
     "lint": "eslint .",
-    "postinstall": "patch-package",
     "generate-graphql-types": "shop-minis generate-graphql-types"
   },
+  "dependencies": {
+    "@shopify/shop-minis-runtime": "__SHOP_MINIS_RUNTIME_VERSION__"
+  },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/plugin-transform-named-capturing-groups-regex": "^7.20.5",
-    "@babel/plugin-transform-react-jsx": "^7.20.7",
-    "@babel/runtime": "^7.12.5",
-    "@graphql-eslint/eslint-plugin": "^3.15.0",
-    "@react-native-community/blur": "4.3.0",
-    "@react-native-community/eslint-config": "^3.2.0",
-    "@react-navigation/native": "6.1.2",
-    "@react-navigation/native-stack": "6.9.8",
-    "@react-native-community/datetimepicker": "^6.7.5",
-    "@react-native-community/picker": "1.6.1",
-    "@shopify/eslint-plugin": "^42.0.3",
-    "@shopify/react-graphql": "0.0.0-snapshot-20230110221326",
-    "@shopify/restyle": "^2.1.0",
     "@shopify/shop-minis-cli": "__SHOP_MINIS_CLI_VERSION__",
-    "@shopify/shop-minis-platform-sdk": "^0.1.11",
-    "@types/color": "^3.0.3",
-    "@types/react": "^17.0.39",
-    "@types/react-native": "^0.68.1",
-    "apollo-link-timeout": "^4.0.0",
+    "@types/jest": "^29.2.6",
     "babel-jest": "^26.6.3",
-    "babel-plugin-import-graphql": "^2.8.1",
-    "color": "^4.2.3",
     "eslint": "^8.32.0",
-    "eslint-plugin-react-native": "^4.0.0",
-    "eslint-plugin-reanimated": "^2.0.0",
-    "graphql": "^15.0.0",
-    "intl": "^1.2.5",
-    "jest": "^26.6.3",
-    "metro-react-native-babel-preset": "^0.67.0",
-    "patch-package": "^6.4.7",
-    "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.8.2",
-    "react": "17.0.2",
-    "react-native": "0.68.5",
-    "react-native-fast-image": "8.6.3",
-    "react-native-gesture-handler": "2.6.1",
-    "react-native-localize": "2.2.4",
-    "react-native-progress": "5.0.0",
-    "react-native-reanimated": "2.13.0",
-    "react-native-safe-area-context": "4.4.1",
-    "react-native-screens": "3.18.2",
-    "react-native-svg": "13.6.0",
-    "react-native-svg-transformer": "^1.0.0",
-    "react-native-webview": "11.23.1",
-    "react-test-renderer": "17.0.2",
-    "typescript": "~4.7.4"
+    "jest": "^29.3.1",
+    "prettier": "^2.8.2"
   },
   "jest": {
     "preset": "react-native"
+  },
+  "overrides": {
+    "graphql": "15.8.0",
+    "react": "18.2.0"
+  },
+  "resolutions": {
+    "@apollo/federation": "0.38.1"
   }
 }

package/templates/__template_common/src/manifest.json

@@ -1,29 +1,3 @@
 {
-  "name": "__MINI_APP_NAME__",
-  "handle": "__MINI_APP_HANDLE_KEBAB_CASE__",
-  "icon_url": "https://cdn.shopify.com/shop-assets/static_uploads/mini_apps/mini-placeholder-icon.png",
-  "shopify_app_ids": [],
-  "description": "Mini App Description",
-  "entry_points": [
-    {
-      "type": "ACTION_BUTTON",
-      "location": "PRODUCT_PAGE",
-      "images": {
-        "default_value": []
-      },
-      "call_to_action_text": {
-        "default_value": "Open __MINI_APP_NAME__"
-      },
-      "visibility": {
-        "owner_type": "PRODUCT",
-        "namespace": "__MINI_APP_HANDLE_KEBAB_CASE__",
-        "key": "available"
-      },
-      "visibility_rule": {
-        "owner_type": "SHOP",
-        "namespace": "__MINI_APP_HANDLE_KEBAB_CASE__",
-        "key": "product_entry_point_rule"
-      }
-    }
-  ]
+  "name": "__MINI_APP_NAME__"
 }

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

@@ -7,76 +7,88 @@ export interface ComponentLink {
 }
 
 export const componentLinks: ComponentLink[] = [
+  {
+    name: 'Accordion',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.Accordion',
+  },
   {
     name: 'Avatar',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Avatar',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.Avatar',
   },
   {
     name: 'BottomSheet',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.BottomSheet',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.BottomSheet',
   },
   {
     name: 'Buttons',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Buttons',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.Buttons',
   },
   {
     name: 'Grid',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Grid',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.Grid',
   },
   {
     name: 'Icon',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Icons',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.Icons',
   },
   {
-    name: 'ImageCarousel',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.ImageCarousel',
+    name: 'ImageMultipleChoice',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.ImageMultipleChoice',
   },
   {
     name: 'Inputs',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Inputs',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.Inputs',
   },
   {
     name: 'Media',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Media',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.Media',
   },
   {
     name: 'Modal',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Modal',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.Modal',
   },
   {
     name: 'MultipleChoice',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.MultipleChoice',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.MultipleChoice',
   },
   {
     name: 'ProductCard',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.ProductCard',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.ProductCard',
   },
   {
     name: 'ProductCardGrid',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.ProductCardGrid',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.ProductCardGrid',
   },
   {
     name: 'ProductLink',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.ProductLink',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.ProductLink',
   },
   {
     name: 'ProgressIndicator',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.ProgressIndicator',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.ProgressIndicator',
   },
   {
     name: 'Spinner',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Spinner',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.Spinner',
   },
   {
     name: 'Typography',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Typography',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.Typography',
   },
   {
     name: 'QuantityPicker',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.QuantityPicker',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.QuantityPicker',
+  },
+  {
+    name: 'VariantPicker',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.VariantPicker',
+  },
+  {
+    name: 'Quiz Example',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.Quiz',
   },
   {
     name: 'WebView',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.WebView',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.WebView',
   },
 ]

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

@@ -21,6 +21,7 @@ export const ComponentListItem = ({
       borderBottomColor="borders-regular"
       borderBottomWidth={1}
     >
+      {/* @ts-expect-error - when the stack param list contains too many routes... typescript throws random errors */}
       <TouchableOpacity onPress={() => navigation.navigate(screen)}>
         <Box
           justifyContent="space-between"

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

@@ -39,8 +39,10 @@ export const FeaturedComponents = ({
                 componentLinks[
                   Math.floor(Math.random() * componentLinks.length)
                 ]
+              // @ts-expect-error - when the stack param list contains too many routes... typescript throws random errors
               navigation.navigate(randomComponentLink.screen)
             } else {
+              // @ts-expect-error - when the stack param list contains too many routes... typescript throws random errors
               navigation.navigate(item.screen)
             }
           }}
@@ -54,7 +56,7 @@ export const FeaturedComponents = ({
             marginRight={isLast ? 's' : 'none'}
             flexDirection="column"
           >
-            {item.thumbnail && !isLast && (
+            {item.thumbnail && !isLast ? (
               <Image
                 style={{
                   width: cardWidth,
@@ -62,7 +64,7 @@ export const FeaturedComponents = ({
                 }}
                 source={item.thumbnail}
               />
-            )}
+            ) : null}
 
             {isLast ? (
               <Box

package/templates/__template_hello_world/src/components/quiz/ImageCarouselSlide.tsx

@@ -0,0 +1,54 @@
+import {
+  ImageCarousel,
+  ImageCarouselProps,
+} from '@shopify/shop-minis-platform-sdk'
+import {useCallback, useEffect, useState} from 'react'
+
+import {QuizSlide, QuizSlideProps} from './QuizSlide'
+import {SlideLogic} from './types'
+
+export interface ImageCarouselSlideProps extends SlideLogic<number[]> {
+  quizSlideProps: QuizSlideProps
+  imageCarouselProps: ImageCarouselProps
+}
+
+export const ImageCarouselSlide = ({
+  quizSlideProps,
+  imageCarouselProps,
+  determineCtaDisabled,
+  handleAnswerSelection,
+}: ImageCarouselSlideProps) => {
+  const [selectedIndex, setSelectedIndex] = useState<number>()
+
+  const [isCtaDisabled, setCtaDisabled] = useState(
+    quizSlideProps.ctaDisabled ?? false
+  )
+
+  const handleOnChoiceSelected = useCallback((index: number) => {
+    setSelectedIndex(index)
+  }, [])
+
+  useEffect(() => {
+    if (handleAnswerSelection === undefined) return
+
+    handleAnswerSelection(selectedIndex === undefined ? [] : [selectedIndex])
+  }, [handleAnswerSelection, selectedIndex])
+
+  useEffect(() => {
+    if (determineCtaDisabled === undefined) return
+
+    setCtaDisabled(
+      determineCtaDisabled(selectedIndex === undefined ? [] : [selectedIndex])
+    )
+  }, [determineCtaDisabled, selectedIndex])
+
+  return (
+    <QuizSlide {...quizSlideProps} ctaDisabled={isCtaDisabled}>
+      <ImageCarousel
+        {...imageCarouselProps}
+        selectedIndexes={selectedIndex === undefined ? [] : [selectedIndex]}
+        onChoiceSelected={handleOnChoiceSelected}
+      />
+    </QuizSlide>
+  )
+}

package/templates/__template_hello_world/src/components/quiz/MultipleChoiceSlide.tsx

@@ -0,0 +1,77 @@
+import {
+  Box,
+  MultipleChoice,
+  MultipleChoiceProps,
+  useMultiSelect,
+} from '@shopify/shop-minis-platform-sdk'
+import {useCallback, useEffect, useMemo, useState} from 'react'
+
+import {QuizSlide, QuizSlideProps} from './QuizSlide'
+import {SlideLogic} from './types'
+
+export interface MultipleChoiceSlideProps extends SlideLogic<number[]> {
+  quizSlideProps: QuizSlideProps
+  multipleChoiceProps: MultipleChoiceProps
+  isMultiSelect?: boolean
+}
+
+export const MultipleChoiceSlide = ({
+  quizSlideProps,
+  multipleChoiceProps,
+  isMultiSelect,
+  determineCtaDisabled,
+  handleAnswerSelection,
+}: MultipleChoiceSlideProps) => {
+  const [multiSelectedIndexes, toggleIndex] = useMultiSelect()
+  const [selectedIndex, setSelectedIndex] = useState<number>()
+
+  const [isCtaDisabled, setCtaDisabled] = useState(
+    quizSlideProps.ctaDisabled ?? false
+  )
+
+  const singleSelectIndex = useMemo(
+    () => (selectedIndex === undefined ? [] : [selectedIndex]),
+    [selectedIndex]
+  )
+
+  const selectedIndexes = useMemo(
+    () => (isMultiSelect ? multiSelectedIndexes : singleSelectIndex),
+    [isMultiSelect, multiSelectedIndexes, singleSelectIndex]
+  )
+
+  const handleOnChoiceSelected = useCallback(
+    (index: number) => {
+      if (isMultiSelect) {
+        toggleIndex(index)
+      } else {
+        setSelectedIndex(index)
+      }
+    },
+    [isMultiSelect, toggleIndex]
+  )
+
+  useEffect(() => {
+    if (selectedIndexes.length < 1 || handleAnswerSelection === undefined)
+      return
+
+    handleAnswerSelection(selectedIndexes)
+  }, [handleAnswerSelection, selectedIndexes])
+
+  useEffect(() => {
+    if (determineCtaDisabled === undefined) return
+
+    setCtaDisabled(determineCtaDisabled(selectedIndexes))
+  }, [determineCtaDisabled, selectedIndexes])
+
+  return (
+    <QuizSlide {...quizSlideProps} ctaDisabled={isCtaDisabled}>
+      <Box marginBottom="xl">
+        <MultipleChoice
+          {...multipleChoiceProps}
+          selectedIndexes={selectedIndexes}
+          onChoiceSelected={handleOnChoiceSelected}
+        />
+      </Box>
+    </QuizSlide>
+  )
+}

package/templates/__template_hello_world/src/components/quiz/QuizProvider.tsx

@@ -0,0 +1,64 @@
+import {createContext, useContext, useMemo} from 'react'
+
+import {useQuizData} from '../../hooks/useQuizData'
+import {useQuizState} from '../../hooks/useQuizState'
+
+import {QuizData, QuizDataState, QuizResult, QuizResultEntry} from './types'
+
+interface QuizContext {
+  recordQuestionResult: (id: string, answer: QuizResultEntry) => void
+  quizResult: QuizResult | undefined
+  quizDataState: QuizDataState | 'Loading'
+  quizData: QuizData | undefined
+  setUserName: (name: string) => void
+  userName: string | undefined
+}
+
+export const QuizContext = createContext<QuizContext>({
+  recordQuestionResult: () => undefined,
+  quizResult: undefined,
+  quizDataState: 'Loading',
+  quizData: undefined,
+  setUserName: (_name: string) => undefined,
+  userName: undefined,
+})
+
+export interface QuizProviderProps {
+  children: React.ReactElement
+}
+
+export const QuizContextProvider = ({children}: QuizProviderProps) => {
+  const {quizDataState, quizData} = useQuizData()
+  const {recordQuestionResult, quizResult, setUserName, userName} =
+    useQuizState()
+
+  const value = useMemo(
+    () => ({
+      recordQuestionResult,
+      quizResult,
+      quizDataState,
+      quizData,
+      setUserName,
+      userName,
+    }),
+    [
+      quizData,
+      quizDataState,
+      quizResult,
+      recordQuestionResult,
+      setUserName,
+      userName,
+    ]
+  )
+  return <QuizContext.Provider value={value}>{children}</QuizContext.Provider>
+}
+
+export const useQuizContext = () => {
+  const context = useContext(QuizContext)
+
+  if (!context) {
+    throw new Error('Make sure to wrap your component with QuizProvider')
+  }
+
+  return context
+}

package/templates/__template_hello_world/src/components/quiz/QuizSlide.tsx

@@ -0,0 +1,79 @@
+import {Box, Button, Text, useTheme} from '@shopify/shop-minis-platform-sdk'
+import {ReactNode} from 'react'
+import {StyleSheet, useWindowDimensions} from 'react-native'
+
+import {QuizSlideType} from './types'
+
+export interface QuizSlideProps extends QuizSlideType {
+  children?: ReactNode
+}
+
+export const QuizSlide = (props: QuizSlideProps) => {
+  const {
+    mainText,
+    subText,
+    ctaText,
+    ctaOnPressHandler,
+    ctaDisabled,
+    children,
+    isTallSlide,
+  } = props
+
+  const theme = useTheme()
+  const gutter = theme.spacing.gutter
+
+  const {height: windowHeight, width} = useWindowDimensions()
+
+  const containerWidth = width - gutter * 2
+  const containerHeight = windowHeight - 255
+
+  return (
+    <Box
+      height={containerHeight}
+      flex={1}
+      paddingTop={isTallSlide ? 'xxxl' : 'auto'}
+      position="relative"
+      justifyContent="center"
+    >
+      <Box marginBottom="m" width={containerWidth}>
+        <Text variant="subtitle">{mainText}</Text>
+        {subText ? (
+          <Text marginTop="xxs" variant="bodySmall">
+            {subText}
+          </Text>
+        ) : null}
+      </Box>
+      <Box
+        marginBottom="xxxl"
+        paddingBottom={isTallSlide ? 'l' : 'none'}
+        paddingHorizontal="gutter"
+      >
+        {children}
+      </Box>
+      <Box style={styles.ctaContainer} paddingBottom="s" width={containerWidth}>
+        <Button
+          size="l"
+          style={{width: containerWidth}}
+          onPress={
+            ctaOnPressHandler
+              ? ctaOnPressHandler
+              : () => console.log('Next Press')
+          }
+          variant="secondary"
+          text={ctaText ?? 'Next'}
+          disabled={ctaDisabled ?? false}
+        />
+      </Box>
+    </Box>
+  )
+}
+
+const styles = StyleSheet.create({
+  ctaContainer: {
+    alignItems: 'center',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+})

package/templates/__template_hello_world/src/components/quiz/QuizSlideCommander.tsx

@@ -0,0 +1,35 @@
+import {ImageCarouselSlide, ImageCarouselSlideProps} from './ImageCarouselSlide'
+import {
+  MultipleChoiceSlide,
+  MultipleChoiceSlideProps,
+} from './MultipleChoiceSlide'
+import {QuizSlide} from './QuizSlide'
+import {TextFieldSlide, TextFieldSlideProps} from './TextFieldSlide'
+import {TextSlide} from './TextSlide'
+import {QuizSlideScreenType, TextSlideProps} from './types'
+
+export interface QuizSlideCommanderProps {
+  type: QuizSlideScreenType
+  props: TextSlideProps | MultipleChoiceSlideProps | ImageCarouselSlideProps
+}
+
+export const QuizSlideCommander = ({type, props}: QuizSlideCommanderProps) => {
+  switch (type) {
+    case 'TextSlide':
+      return <TextSlide {...(props as TextSlideProps)} />
+    case 'TextFieldSlide':
+      return <TextFieldSlide {...(props as TextFieldSlideProps)} />
+    case 'ImageCarouselSlide':
+      return <ImageCarouselSlide {...(props as ImageCarouselSlideProps)} />
+    case 'MultipleChoiceSlide':
+      return <MultipleChoiceSlide {...(props as MultipleChoiceSlideProps)} />
+    default:
+      return (
+        <QuizSlide
+          mainText="error"
+          subText={`slide type ${type} is unknown`}
+          ctaText="oh no!"
+        />
+      )
+  }
+}