@shopify/shop-minis-cli 0.0.82 → 0.0.84

package/templates/__template_hello_world/src/types.ts

@@ -1,31 +0,0 @@
-// @react-navigation/native-stack requires a `type` instead of an `interface`
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-export type StackParamList = {
-  '__MINI_APP_NAME_PASCAL_CASE__.Home': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.Modal': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.ProductCard': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.ProductCardGrid': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.ProductLink': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.Typography': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.BottomSheet': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.Buttons': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.Icons': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.ImageMultipleChoice': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.Inputs': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.Media': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.MultipleChoice': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.QuantityPicker': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.VariantPicker': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.WebView': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.Query': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.ShopActions': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.Html': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.Params': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.ProgressIndicator': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.Spinner': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.Grid': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.Avatar': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.KeyboardAvoidingView': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.Quiz': undefined
-  '__MINI_APP_NAME_PASCAL_CASE__.Accordion': undefined
-}

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

@@ -1,7 +0,0 @@
-export function getFlagEmoji(countryCode: string) {
-  const codePoints = countryCode
-    .toUpperCase()
-    .split('')
-    .map(char => 127397 + char.charCodeAt(0))
-  return String.fromCodePoint(...codePoints)
-}

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

@@ -1,330 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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/assets/assets.d.ts

@@ -1,4 +0,0 @@
-declare module '*.svg' {
-  const content: any
-  export default content
-}

package/templates/__template_snowboardz/src/assets/circle-blue.svg

@@ -1,9 +0,0 @@
-<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.199997" width="40" height="40" rx="20" fill="url(#paint0_linear_277_3614)"/>
-<defs>
-<linearGradient id="paint0_linear_277_3614" x1="20.2" y1="0" x2="20.2" y2="40" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8ACDFD"/>
-<stop offset="1" stop-color="#3D5EEA"/>
-</linearGradient>
-</defs>
-</svg>

package/templates/__template_snowboardz/src/assets/circle-green.svg

@@ -1,9 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="40" height="40" rx="20" fill="url(#paint0_linear_277_3611)"/>
-<defs>
-<linearGradient id="paint0_linear_277_3611" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
-<stop stop-color="#2CCB29"/>
-<stop offset="1" stop-color="#23B7AE"/>
-</linearGradient>
-</defs>
-</svg>

package/templates/__template_snowboardz/src/assets/circle-purple.svg

@@ -1,9 +0,0 @@
-<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.399994" width="40" height="40" rx="20" fill="url(#paint0_linear_277_3612)"/>
-<defs>
-<linearGradient id="paint0_linear_277_3612" x1="20.4" y1="0" x2="20.4" y2="40" gradientUnits="userSpaceOnUse">
-<stop stop-color="#CE9CE4"/>
-<stop offset="1" stop-color="#6D41CB"/>
-</linearGradient>
-</defs>
-</svg>

package/templates/__template_snowboardz/src/assets/circle-rainbow.svg

@@ -1,34 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_277_3873)">
-<circle cx="20" cy="20" r="20" transform="rotate(-180 20 20)" fill="#FFB7D8"/>
-<circle cx="20" cy="20" r="17" transform="rotate(-180 20 20)" fill="#750CD6"/>
-<circle cx="20" cy="20" r="14" transform="rotate(-180 20 20)" fill="#0098DB"/>
-<circle cx="20" cy="20" r="11" transform="rotate(-180 20 20)" fill="#78C301"/>
-<circle cx="20" cy="20" r="8" transform="rotate(-180 20 20)" fill="#F5CF3E"/>
-<circle cx="20" cy="20" r="5" transform="rotate(-180 20 20)" fill="#FE6C37"/>
-<circle cx="20" cy="20" r="2" transform="rotate(-180 20 20)" fill="#DE2826"/>
-<rect x="40" y="20" width="3" height="21" transform="rotate(-180 40 20)" fill="#FFB7D8"/>
-<rect x="3" y="20" width="3" height="21" transform="rotate(-180 3 20)" fill="#FFB7D8"/>
-<rect x="37" y="20" width="3" height="21" transform="rotate(-180 37 20)" fill="#750CD6"/>
-<rect x="6" y="20" width="3" height="21" transform="rotate(-180 6 20)" fill="#750CD6"/>
-<rect x="34" y="20" width="3" height="21" transform="rotate(-180 34 20)" fill="#0098DB"/>
-<rect x="9" y="20" width="3" height="21" transform="rotate(-180 9 20)" fill="#0098DB"/>
-<rect x="31" y="20" width="3" height="21" transform="rotate(-180 31 20)" fill="#78C301"/>
-<rect x="12" y="20" width="3" height="21" transform="rotate(-180 12 20)" fill="#78C301"/>
-<rect x="28" y="20" width="3" height="21" transform="rotate(-180 28 20)" fill="#F5CF3E"/>
-<rect x="15" y="20" width="3" height="21" transform="rotate(-180 15 20)" fill="#F5CF3E"/>
-<rect x="25" y="20" width="3" height="21" transform="rotate(-180 25 20)" fill="#FE6C37"/>
-<rect x="18" y="20" width="3" height="21" transform="rotate(-180 18 20)" fill="#FE6C37"/>
-<rect x="22" y="20" width="4" height="21" transform="rotate(-180 22 20)" fill="#DE2826"/>
-<rect width="40" height="40" fill="url(#paint0_linear_277_3873)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_277_3873" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
-<stop stop-opacity="0"/>
-<stop offset="1" stop-opacity="0.2"/>
-</linearGradient>
-<clipPath id="clip0_277_3873">
-<rect x="40" y="40" width="40" height="40" rx="20" transform="rotate(-180 40 40)" fill="white"/>
-</clipPath>
-</defs>
-</svg>

package/templates/__template_snowboardz/src/assets/circle-red.svg

@@ -1,9 +0,0 @@
-<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.599991" width="40" height="40" rx="20" fill="url(#paint0_linear_277_3615)"/>
-<defs>
-<linearGradient id="paint0_linear_277_3615" x1="20.6" y1="0" x2="20.6" y2="40" gradientUnits="userSpaceOnUse">
-<stop stop-color="#EF6767"/>
-<stop offset="1" stop-color="#731D4B"/>
-</linearGradient>
-</defs>
-</svg>

package/templates/__template_snowboardz/src/assets/circle-yellow.svg

@@ -1,9 +0,0 @@
-<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.800003" width="40" height="40" rx="20" fill="url(#paint0_linear_277_3613)"/>
-<defs>
-<linearGradient id="paint0_linear_277_3613" x1="20.8" y1="0" x2="20.8" y2="40" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8D846"/>
-<stop offset="1" stop-color="#968C34"/>
-</linearGradient>
-</defs>
-</svg>

package/templates/__template_snowboardz/src/assets/skill-level-icon-advanced.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect y="8" width="11" height="11" transform="rotate(-45 0 8)" fill="black"/>
-</svg>

package/templates/__template_snowboardz/src/assets/skill-level-icon-beginner.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="8" cy="8" r="8" fill="#008552"/>
-</svg>

package/templates/__template_snowboardz/src/assets/skill-level-icon-intermediate.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="14" height="14" fill="#33A9EB"/>
-</svg>

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

@@ -1,79 +0,0 @@
-import {Box, Text} from '@shopify/shop-minis-platform-sdk'
-import {StyleSheet, TouchableOpacity} from 'react-native'
-
-import CircleGreen from '../assets/circle-green.svg'
-import CirclePurple from '../assets/circle-purple.svg'
-import CircleYellow from '../assets/circle-yellow.svg'
-import CircleBlue from '../assets/circle-blue.svg'
-import CircleRed from '../assets/circle-red.svg'
-import CircleRainbow from '../assets/circle-rainbow.svg'
-
-const colorMap = {
-  green: CircleGreen,
-  purple: CirclePurple,
-  yellow: CircleYellow,
-  blue: CircleBlue,
-  red: CircleRed,
-}
-
-interface Props {
-  onPress: () => void
-  color: string
-  selected?: boolean
-  isResetButton?: boolean
-}
-export const ColorButton = ({
-  onPress,
-  color,
-  selected,
-  isResetButton,
-}: Props) => {
-  const ColoredCircle = colorMap[color as keyof typeof colorMap]
-
-  if (isResetButton) {
-    return (
-      <TouchableOpacity onPress={onPress}>
-        <Box style={[styles.circleContainer]}>
-          {selected ? null : (
-            <Text
-              variant="bodySmall"
-              color="foregrounds-primary"
-              style={styles.resetText}
-            >
-              Reset
-            </Text>
-          )}
-          <CircleRainbow />
-        </Box>
-      </TouchableOpacity>
-    )
-  }
-
-  if (!ColoredCircle) return null
-
-  return (
-    <>
-      <TouchableOpacity onPress={onPress}>
-        <Box style={[styles.circleContainer, selected && styles.selected]}>
-          <ColoredCircle />
-        </Box>
-      </TouchableOpacity>
-    </>
-  )
-}
-
-const styles = StyleSheet.create({
-  circleContainer: {
-    padding: 2,
-    borderWidth: 2,
-    borderRadius: 100,
-    borderColor: 'transparent',
-  },
-  selected: {
-    borderColor: 'black',
-  },
-  resetText: {
-    position: 'absolute',
-    top: -24,
-  },
-})

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

@@ -1,40 +0,0 @@
-import {Box, Text} from '@shopify/shop-minis-platform-sdk'
-
-import {ColorButton} from './ColorButton'
-
-interface ColorPickerProps {
-  handleSelectedColor: (handleSelectedColor: string | null) => void
-  selectedColor: string | null
-  snowboardColors: string[]
-}
-export const ColorPicker = ({
-  handleSelectedColor,
-  selectedColor,
-  snowboardColors,
-}: ColorPickerProps) => {
-  if (!snowboardColors || snowboardColors.length < 1) {
-    return null
-  }
-
-  return (
-    <>
-      <Text marginBottom="xs">Select color</Text>
-      <Box justifyContent="space-between" flexDirection="row">
-        {snowboardColors.map(color => (
-          <ColorButton
-            selected={selectedColor === color}
-            key={color}
-            color={color}
-            onPress={() => handleSelectedColor(color)}
-          />
-        ))}
-        <ColorButton
-          selected={!selectedColor}
-          color="Reset"
-          isResetButton
-          onPress={() => handleSelectedColor(null)}
-        />
-      </Box>
-    </>
-  )
-}