@shopify/shop-minis-cli 0.0.37 → 0.0.82

package/templates/__template_hello_world/src/utils/mockQuizData.ts

@@ -0,0 +1,330 @@
+import {ImageCarouselSlideProps} from '../components/quiz/ImageCarouselSlide'
+import {MultipleChoiceSlideProps} from '../components/quiz/MultipleChoiceSlide'
+import {TextFieldSlideProps} from '../components/quiz/TextFieldSlide'
+import {
+  QuizAnswerType,
+  QuizData,
+  SlideInformation,
+  TextSlideProps,
+} from '../components/quiz/types'
+
+const createChoices = (numberOfChoices: number) => {
+  return Array(numberOfChoices)
+    .fill(undefined)
+    .map((_, index) => ({
+      label: `Option ${index + 1}`,
+      value: `Value ${index + 1}`,
+    }))
+}
+
+const textWelcomeSlideProps: TextSlideProps = {
+  quizSlideProps: {
+    mainText: 'Welcome!',
+    subText:
+      'This is a Text Slide which demonstrates some text. Often used as a welcome of thankyou page',
+    ctaText: "Let's get started!",
+  },
+}
+
+const textThankYouSlideProps: TextSlideProps = {
+  quizSlideProps: {
+    mainText: 'Ready for your results?',
+    subText: 'Click below for product recommendations',
+    ctaText: 'Show Me Results',
+  },
+}
+
+const multipleChoiceHairTypeSlideProps: MultipleChoiceSlideProps = {
+  quizSlideProps: {
+    mainText:
+      'So nice to meet you, {{userName}}. What is your current hair color?',
+    ctaText: 'Next Question',
+    ctaDisabled: true,
+  },
+  multipleChoiceProps: {
+    choices: [
+      {
+        label: 'Grey',
+        value: 'Grey',
+      },
+      {
+        label: 'Blonde',
+        value: 'Blonde',
+      },
+      {
+        label: 'Light/Med Brown',
+        value: 'Light/Med Brown',
+      },
+      {
+        label: 'Brunette/Dark Brown',
+        value: 'Brunette/Dark Brown',
+      },
+      {
+        label: 'Nearly Black/Jet Black',
+        value: 'Nearly Black/Jet Black',
+      },
+      {
+        label: 'Red',
+        value: 'Red',
+      },
+    ],
+    onChoiceSelected: () => null,
+    selectedIndexes: [],
+  },
+  determineCtaDisabled: (answer: QuizAnswerType) =>
+    (answer as [number]).length < 1,
+}
+
+const multipleChoiceYesNoSlideProps: MultipleChoiceSlideProps = {
+  quizSlideProps: {
+    mainText: 'Are you Canadian?',
+    ctaText: 'Next Question',
+    ctaDisabled: true,
+  },
+  multipleChoiceProps: {
+    choices: [
+      {
+        label: 'Yes',
+        value: 'Yes',
+      },
+      {
+        label: 'No',
+        value: 'No',
+      },
+    ],
+    onChoiceSelected: () => null,
+    selectedIndexes: [],
+  },
+  determineNextSlide: answer => {
+    return answer[0] === 0 ? 'canada' : 'choose-age'
+  },
+  determineCtaDisabled: (answer: QuizAnswerType) =>
+    (answer as [number]).length < 1,
+}
+
+const textCanadianSlideProps: TextSlideProps = {
+  quizSlideProps: {
+    mainText: 'You are Canadian!',
+    ctaText: 'Ja, eh',
+  },
+}
+
+const ageChoices = [
+  {
+    label: '<18',
+    value: '<18',
+  },
+  {
+    label: '19-25',
+    value: '19-25',
+  },
+  {
+    label: '26-35',
+    value: '26-35',
+  },
+  {
+    label: '36+',
+    value: '36+',
+  },
+]
+
+const textFieldPhoneSlideProps: TextFieldSlideProps = {
+  quizSlideProps: {
+    mainText: 'Can we get your phone number, please?',
+    ctaDisabled: true,
+  },
+  textFieldProps: {
+    placeholder: 'gemme dem digits',
+  },
+  determineCtaDisabled: (answer: QuizAnswerType) =>
+    (answer as string).length < 1,
+}
+
+const textFieldSlideProps: TextFieldSlideProps = {
+  quizSlideProps: {
+    mainText: 'Well that was rude of us...we never got your name.',
+    ctaDisabled: true,
+  },
+  textFieldProps: {
+    placeholder: 'Enter your name',
+  },
+  determineCtaDisabled: (answer: QuizAnswerType) =>
+    (answer as string).length < 1,
+}
+
+const textFieldMutliLineSlideProps: TextFieldSlideProps = {
+  quizSlideProps: {
+    mainText: 'Leave your comments!',
+    subText: 'Are there some other products you would like to see?',
+    ctaText: 'Submit',
+    ctaDisabled: true,
+  },
+  textFieldProps: {
+    multiline: true,
+    numberOfLines: 4,
+    helper: 'Must be at least 10 characters',
+    placeholder: 'It would be great if you Would....',
+  },
+  determineCtaDisabled: (answer: QuizAnswerType) =>
+    (answer as string).length < 10,
+}
+
+const multipleChoiceSingleSelctionShortSlideProps: MultipleChoiceSlideProps = {
+  quizSlideProps: {
+    mainText: 'How old are you?',
+    ctaText: 'Next Question',
+    ctaDisabled: true,
+  },
+  multipleChoiceProps: {
+    choices: ageChoices,
+    onChoiceSelected: () => null,
+    selectedIndexes: [],
+  },
+  determineNextSlide: answer => `age-${ageChoices[answer[0]].value}`,
+  determineCtaDisabled: (answer: QuizAnswerType) =>
+    (answer as [number]).length < 1,
+}
+
+const multipleChoiceMustAcceptSlideProps: MultipleChoiceSlideProps = {
+  quizSlideProps: {
+    mainText: 'Do You Agree To Share Your Information?',
+    subText: 'We will only use it to generate recommendations',
+    ctaText: 'On to the questions!',
+    ctaDisabled: true,
+  },
+  multipleChoiceProps: {
+    choices: [
+      {label: 'No I do not', value: 'no'},
+      {label: 'Yes I consent', value: 'yes'},
+    ],
+    onChoiceSelected: () => null,
+    selectedIndexes: [],
+  },
+  determineCtaDisabled: (answer: QuizAnswerType) =>
+    (answer as [number])[0] !== 1,
+}
+
+const generateAgeTextSlide = (age: string): SlideInformation => ({
+  id: `age-${age}`,
+  type: 'TextSlide',
+  props: {
+    quizSlideProps: {
+      mainText: `Screen just for being ${age}`,
+      subText: `The quiz jumped to this screen because you chose ${age} on the last slide`,
+    },
+    nextSlideId: 'lots-of-options',
+  },
+})
+
+const multipleChoiceSingleSelctionLongSlideProps: MultipleChoiceSlideProps = {
+  quizSlideProps: {
+    isTallSlide: true,
+    mainText: 'What are your favorite numbers under 30',
+    subText: 'Choose at least 3 numbers',
+  },
+  multipleChoiceProps: {
+    choices: createChoices(30),
+    onChoiceSelected: () => null,
+    selectedIndexes: [],
+  },
+  isMultiSelect: true,
+  determineCtaDisabled: (answer: QuizAnswerType) =>
+    (answer as [number]).length < 3,
+}
+
+// This ensures that random images are selected each time the app is generated
+const LOREM_PIXUM_OFFSET = Math.ceil(Math.random() * 100)
+const multipleChoiceImageSingleSelctionProps: ImageCarouselSlideProps = {
+  quizSlideProps: {
+    mainText: 'Select an Image that you like',
+  },
+  imageCarouselProps: {
+    choices: createChoices(30).map((choice, i) => ({
+      ...choice,
+      imageUrl: `https://picsum.photos/id/${LOREM_PIXUM_OFFSET + i}/160`,
+    })),
+    onChoiceSelected: () => null,
+    selectedIndexes: [],
+    imageSize: 160,
+  },
+  determineCtaDisabled: (answer: QuizAnswerType) =>
+    (answer as [number]).length < 1,
+}
+
+export const mockQuizData: QuizData = {
+  slides: [
+    {
+      id: 'welcome',
+      type: 'TextSlide',
+      props: textWelcomeSlideProps,
+    },
+    {
+      id: 'consent',
+      type: 'MultipleChoiceSlide',
+      props: multipleChoiceMustAcceptSlideProps,
+    },
+    {
+      id: 'enter-phone',
+      type: 'TextFieldSlide',
+      props: textFieldPhoneSlideProps,
+    },
+    {
+      id: 'enter-name',
+      type: 'TextFieldSlide',
+      props: textFieldSlideProps,
+    },
+    {
+      id: 'hair-type-personalized',
+      type: 'MultipleChoiceSlide',
+      props: multipleChoiceHairTypeSlideProps,
+    },
+    {
+      id: 'choose-canada',
+      type: 'MultipleChoiceSlide',
+      props: multipleChoiceYesNoSlideProps,
+    },
+
+    {
+      id: 'missing-products',
+      type: 'TextFieldSlide',
+      props: textFieldMutliLineSlideProps,
+    },
+    {
+      id: 'choose-canada',
+      type: 'MultipleChoiceSlide',
+      props: multipleChoiceYesNoSlideProps,
+    },
+    {
+      id: 'canada',
+      type: 'TextSlide',
+      props: textCanadianSlideProps,
+    },
+    {
+      id: 'choose-age',
+      type: 'MultipleChoiceSlide',
+      props: multipleChoiceSingleSelctionShortSlideProps,
+    },
+    generateAgeTextSlide('<18'),
+    generateAgeTextSlide('19-25'),
+    generateAgeTextSlide('26-35'),
+    generateAgeTextSlide('36+'),
+    {
+      id: 'lots-of-options',
+      type: 'MultipleChoiceSlide',
+      props: multipleChoiceSingleSelctionLongSlideProps,
+    },
+    {
+      id: 'pick an image',
+      type: 'ImageCarouselSlide',
+      props: multipleChoiceImageSingleSelctionProps,
+    },
+    {
+      id: 'thank-you',
+      type: 'TextSlide',
+      props: {
+        ...textThankYouSlideProps,
+        nextSlideId: 'results',
+      },
+    },
+  ],
+}

package/templates/__template_hello_world/src/utils/quizUtils.ts

@@ -0,0 +1,75 @@
+import {ImageCarouselSlideProps} from '../components/quiz/ImageCarouselSlide'
+import {MultipleChoiceSlideProps} from '../components/quiz/MultipleChoiceSlide'
+import {QuizData} from '../components/quiz/types'
+
+export const getQuizSlideDataByIndex = (
+  quizData: QuizData,
+  slideIndex: number
+) => quizData.slides[slideIndex] ?? undefined
+
+export const getQuizSlideDataById = (quizData: QuizData, id: string) =>
+  quizData.slides.find(slide => slide.id === id)
+
+export const getQuizSlideIndexById = (quizData: QuizData, id: string) =>
+  quizData.slides.findIndex(slide => slide.id === id)
+
+export const getQuestionById = (quizData: QuizData, questionId: string) => {
+  const slideWithQuestion = quizData.slides.find(
+    slide => slide.id === questionId
+  )
+  if (!slideWithQuestion) {
+    console.error('slide not founod')
+    return `text question not found for slide with id ${questionId}`
+  }
+
+  return slideWithQuestion.props.quizSlideProps.mainText
+}
+
+export const getMultilpleChoiceAnswerLabels = (
+  quizData: QuizData,
+  questionId: string,
+  selectedIndexes: number[]
+) => {
+  const multipleChoiceSlide = quizData.slides.find(
+    slide => slide.id === questionId
+  )
+  if (
+    !multipleChoiceSlide ||
+    multipleChoiceSlide.type !== 'MultipleChoiceSlide'
+  ) {
+    console.error('only works for multiple choice slides')
+    return []
+  }
+
+  const answers = (
+    multipleChoiceSlide.props as MultipleChoiceSlideProps
+  ).multipleChoiceProps.choices.map(({label}) => label)
+
+  return answers.filter((_, index) => selectedIndexes.includes(index))
+}
+
+export const getImageCarouselAnswerUrls = (
+  quizData: QuizData,
+  questionId: string,
+  selectedIndexes: number[]
+) => {
+  const imageCarouselSlide = quizData.slides.find(
+    slide => slide.id === questionId
+  )
+  if (!imageCarouselSlide || imageCarouselSlide.type !== 'ImageCarouselSlide') {
+    console.error('only works for ImageCarouselSlide')
+    return []
+  }
+
+  const imageAnswers = (
+    imageCarouselSlide.props as ImageCarouselSlideProps
+  ).imageCarouselProps.choices.map(({imageUrl}) => imageUrl)
+
+  return imageAnswers.filter((_, index) => selectedIndexes.includes(index))
+}
+
+export const addNameToText = (text: string, name?: string) => {
+  const regex = new RegExp('{{userName}}', 'g')
+
+  return text.replace(regex, name ? name : 'Anonymous')
+}

package/templates/__template_snowboardz/src/components/SkillLevelIcon.tsx

@@ -10,7 +10,7 @@ interface LevelIconProps {
   level: SkillLevel
 }
 export const SkillLevelIcon = ({level}: LevelIconProps) => {
-  let Icon
+  let Icon: typeof BeginnerIcon
 
   switch (level) {
     case 'Beginner':
@@ -22,9 +22,6 @@ export const SkillLevelIcon = ({level}: LevelIconProps) => {
     case 'Advanced':
       Icon = AdvancedIcon
       break
-    default:
-      Icon = null
-      break
   }
 
   return (

package/templates/__template_snowboardz/src/components/SkillLevelPicker.tsx

@@ -63,10 +63,16 @@ export const SkillLevelPicker = ({
   handleSelectedSkillLevel,
   selectedSkillLevel,
 }: SkillLevelPickerProps) => {
+  const theme = useTheme()
+
   return (
     <>
       <Text marginBottom="xs">Select skill level</Text>
-      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={{paddingHorizontal: -theme.spacing.s, overflow: 'visible'}}
+      >
         <SkillLevelButton
           selected={!selectedSkillLevel}
           text="All"

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

@@ -1,4 +1,4 @@
-query __MINI_APP_HANDLE_PASCAL_CASE__TestProducts($shopId: ID!, $productIds: [ID!]!) {
+query __MINI_APP_NAME_PASCAL_CASE__TestProducts($shopId: ID!, $productIds: [ID!]!) {
   shop(id: $shopId) {
     id
     name

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

@@ -1,108 +1,118 @@
-import { DocumentNode } from "graphql-typed";
-import { URL, Decimal, CurrencyCode } from "../node_modules/@shopify/shop-minis-platform-sdk/src/api/types";
-export namespace __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData {
+import {DocumentNode} from 'graphql-typed'
+import {
+  URL,
+  Decimal,
+  CurrencyCode,
+} from '../node_modules/@shopify/shop-minis-platform-sdk/src/api/types'
+export namespace __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryPartialData {
   export interface ShopProductsByIdsFeaturedImage {
-    __typename?: "Image" | null;
-    id?: string | null;
-    altText?: string | null;
-    url?: URL | null;
+    __typename?: 'Image' | null
+    id?: string | null
+    altText?: string | null
+    url?: URL | null
   }
   export interface ShopProductsByIdsDefaultVariantCompareAtPrice {
-    __typename?: "Money" | null;
-    amount?: Decimal | null;
-    currencyCode?: CurrencyCode | null;
+    __typename?: 'Money' | null
+    amount?: Decimal | null
+    currencyCode?: CurrencyCode | null
   }
   export interface ShopProductsByIdsDefaultVariantPrice {
-    __typename?: "Money" | null;
-    amount?: Decimal | null;
-    currencyCode?: CurrencyCode | null;
+    __typename?: 'Money' | null
+    amount?: Decimal | null
+    currencyCode?: CurrencyCode | null
   }
   export interface ShopProductsByIdsDefaultVariantImage {
-    __typename?: "Image" | null;
-    id?: string | null;
-    altText?: string | null;
-    url?: URL | null;
+    __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?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIdsDefaultVariantCompareAtPrice | null;
-    price?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIdsDefaultVariantPrice | null;
-    image?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIdsDefaultVariantImage | null;
+    __typename?: 'ProductVariant' | null
+    id?: string | null
+    title?: string | null
+    isFavorited?: boolean | null
+    compareAtPrice?: __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIdsDefaultVariantCompareAtPrice | null
+    price?: __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIdsDefaultVariantPrice | null
+    image?: __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIdsDefaultVariantImage | null
   }
   export interface ShopProductsByIds {
-    __typename?: "Product" | null;
-    id?: string | null;
-    title?: string | null;
-    tags?: (string | null)[] | null;
-    featuredImage?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIdsFeaturedImage | null;
-    defaultVariant?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIdsDefaultVariant | null;
+    __typename?: 'Product' | null
+    id?: string | null
+    title?: string | null
+    tags?: (string | null)[] | null
+    featuredImage?: __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIdsFeaturedImage | null
+    defaultVariant?: __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIdsDefaultVariant | null
   }
   export interface Shop {
-    __typename?: "Shop" | null;
-    id?: string | null;
-    name?: string | null;
-    productsByIds?: (__MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIds | null)[] | null;
+    __typename?: 'Shop' | null
+    id?: string | null
+    name?: string | null
+    productsByIds?:
+      | (__MINI_APP_NAME_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIds | null)[]
+      | null
   }
 }
-export interface __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData {
-  shop?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData.Shop | null;
+export interface __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryPartialData {
+  shop?: __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryPartialData.Shop | null
 }
-export namespace __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData {
+export namespace __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryData {
   export interface Variables {
-    shopId: string;
-    productIds: string[];
+    shopId: string
+    productIds: string[]
   }
   export interface ShopProductsByIdsFeaturedImage {
-    __typename: "Image";
-    id?: string | null;
-    altText?: string | null;
-    url: URL;
+    __typename: 'Image'
+    id?: string | null
+    altText?: string | null
+    url: URL
   }
   export interface ShopProductsByIdsDefaultVariantCompareAtPrice {
-    __typename: "Money";
-    amount: Decimal;
-    currencyCode: CurrencyCode;
+    __typename: 'Money'
+    amount: Decimal
+    currencyCode: CurrencyCode
   }
   export interface ShopProductsByIdsDefaultVariantPrice {
-    __typename: "Money";
-    amount: Decimal;
-    currencyCode: CurrencyCode;
+    __typename: 'Money'
+    amount: Decimal
+    currencyCode: CurrencyCode
   }
   export interface ShopProductsByIdsDefaultVariantImage {
-    __typename: "Image";
-    id?: string | null;
-    altText?: string | null;
-    url: URL;
+    __typename: 'Image'
+    id?: string | null
+    altText?: string | null
+    url: URL
   }
   export interface ShopProductsByIdsDefaultVariant {
-    __typename: "ProductVariant";
-    id: string;
-    title: string;
-    isFavorited: boolean;
-    compareAtPrice?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.ShopProductsByIdsDefaultVariantCompareAtPrice | null;
-    price: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.ShopProductsByIdsDefaultVariantPrice;
-    image?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.ShopProductsByIdsDefaultVariantImage | null;
+    __typename: 'ProductVariant'
+    id: string
+    title: string
+    isFavorited: boolean
+    compareAtPrice?: __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryData.ShopProductsByIdsDefaultVariantCompareAtPrice | null
+    price: __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryData.ShopProductsByIdsDefaultVariantPrice
+    image?: __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryData.ShopProductsByIdsDefaultVariantImage | null
   }
   export interface ShopProductsByIds {
-    __typename: "Product";
-    id: string;
-    title: string;
-    tags: string[];
-    featuredImage?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.ShopProductsByIdsFeaturedImage | null;
-    defaultVariant: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.ShopProductsByIdsDefaultVariant;
+    __typename: 'Product'
+    id: string
+    title: string
+    tags: string[]
+    featuredImage?: __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryData.ShopProductsByIdsFeaturedImage | null
+    defaultVariant: __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryData.ShopProductsByIdsDefaultVariant
   }
   export interface Shop {
-    __typename: "Shop";
-    id: string;
-    name: string;
-    productsByIds: (__MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.ShopProductsByIds | null)[];
+    __typename: 'Shop'
+    id: string
+    name: string
+    productsByIds: (__MINI_APP_NAME_PASCAL_CASE__TestProductsQueryData.ShopProductsByIds | null)[]
   }
 }
-export interface __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData {
-  shop?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.Shop | null;
+export interface __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryData {
+  shop?: __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryData.Shop | null
 }
-declare const document: DocumentNode<__MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData, __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.Variables, __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData>;
-export default document;
+declare const document: DocumentNode<
+  __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryData,
+  __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryData.Variables,
+  __MINI_APP_NAME_PASCAL_CASE__TestProductsQueryPartialData
+>
+export default document

package/templates/__template_snowboardz/src/index.tsx

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

package/templates/__template_snowboardz/src/routes.tsx

@@ -4,11 +4,11 @@ import {HomeScreen} from './screens/HomeScreen'
 
 const Stack = createNativeStackNavigator()
 
-export const __MINI_APP_HANDLE_PASCAL_CASE__Navigator = () => {
+export const __MINI_APP_NAME_PASCAL_CASE__Navigator = () => {
   return (
     <Stack.Navigator>
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.Home"
+        name="__MINI_APP_NAME_PASCAL_CASE__.Home"
         component={HomeScreen}
         options={{title: 'Home', headerShown: false}}
       />