@shopify/shop-minis-cli 0.0.83 → 0.0.84

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

@@ -1,90 +0,0 @@
-import {Alert, SafeAreaView, ScrollView} from 'react-native'
-import {
-  Button,
-  ButtonProps,
-  Box,
-  FastImageBox,
-  Text,
-  useTheme,
-} from '@shopify/shop-minis-platform-sdk'
-
-import {Header} from '../components/Header'
-
-export const ButtonsScreen = () => {
-  const theme = useTheme()
-  return (
-    <SafeAreaView
-      style={{backgroundColor: theme.colors['backgrounds-regular']}}
-    >
-      <ScrollView
-        style={{backgroundColor: theme.colors['backgrounds-regular']}}
-      >
-        <Header />
-        <Box px="gutter">
-          <Text variant="headerBold" mb="xs">
-            Button
-          </Text>
-          <Text variant="bodyTitleLarge" mt="m">
-            Sizes
-          </Text>
-          {(['s', 'm', 'l'] as ButtonProps['size'][]).map(size => (
-            <Box key={size} paddingVertical="xs">
-              <Button size={size} text={size as string} onPress={() => {}} />
-            </Box>
-          ))}
-          <Text variant="bodyTitleLarge" mt="m">
-            Variants
-          </Text>
-          {(
-            [
-              'primary',
-              'secondary',
-              'tertiary',
-              'outlined',
-              'overlay',
-            ] as ButtonProps['variant'][]
-          ).map(variant => (
-            <Box key={variant as string} paddingVertical="xs">
-              <Button
-                variant={variant}
-                text={variant as string}
-                onPress={() => {}}
-              />
-            </Box>
-          ))}
-          <Box paddingVertical="xs">
-            <FastImageBox
-              height={200}
-              resizeMode="cover"
-              source={{uri: 'https://picsum.photos/id/1080/1000/1500'}}
-              borderRadius={16}
-            />
-            <Box position="absolute" bottom={20} right={20} width={150}>
-              <Box height={100} width={100} />
-              <Button variant="overlay" text="overlay" onPress={() => {}} />
-            </Box>
-          </Box>
-          <Text variant="bodyTitleLarge" mt="m">
-            States
-          </Text>
-          <Box paddingVertical="xs">
-            <Button
-              disabled
-              text="inactive"
-              onPress={() => Alert.alert('Pressed')}
-            />
-          </Box>
-          <Text variant="bodyTitleLarge" mt="m">
-            Event handling
-          </Text>
-          <Box paddingVertical="xs">
-            <Button
-              text="Will alert when pressed"
-              onPress={() => Alert.alert('Pressed')}
-            />
-          </Box>
-        </Box>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}

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

@@ -1,74 +0,0 @@
-import {SafeAreaView} from 'react-native'
-import {Grid, Box, Text, useTheme} from '@shopify/shop-minis-platform-sdk'
-
-import {Header} from '../components/Header'
-
-export type GridRenderItem = (info: any) => React.ReactElement | null
-
-export const GridScreen = () => {
-  const theme = useTheme()
-  const elements = [
-    {
-      name: 'First',
-      color: theme.colors['primary-button-background'],
-      id: 1,
-    },
-    {
-      name: 'Second',
-      color: theme.colors['backgrounds-success'],
-      id: 2,
-    },
-    {
-      name: 'Third',
-      color: theme.colors['backgrounds-success-subdued'],
-      id: 7,
-    },
-    {
-      name: 'Fourth',
-      color: theme.colors['primary-button-background'],
-      id: 5,
-    },
-    {
-      name: 'Fifth',
-      color: theme.colors['inactive-button-foreground'],
-      id: 4,
-    },
-    {
-      name: 'Fourth',
-      color: theme.colors['highlights-discounted'],
-      id: 3,
-    },
-  ]
-
-  // TODO: forwardRef breaks <Grid />s generic types so using any for now
-  const renderItem = ({item}: {item: any}) => {
-    return (
-      <Box
-        alignItems="center"
-        justifyContent="center"
-        height={item.id % 2 === 0 ? 300 : 200}
-        style={{
-          backgroundColor: item.color,
-        }}
-      >
-        <Text>{item.name}</Text>
-      </Box>
-    )
-  }
-
-  return (
-    <SafeAreaView style={{flex: 1}}>
-      <Header />
-      <Box px="gutter">
-        <Text variant="headerBold" mb="s">
-          Grid
-        </Text>
-      </Box>
-      <Grid
-        data={elements}
-        renderItem={renderItem}
-        contentContainerStyle={{padding: theme.spacing.gutter}}
-      />
-    </SafeAreaView>
-  )
-}

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

@@ -1,81 +0,0 @@
-import {Box, Text, useTheme} from '@shopify/shop-minis-platform-sdk'
-import {SafeAreaView, ScrollView} from 'react-native'
-
-import ShopMinisLogo from '../assets/shop-minis-logo.svg'
-import {ButtonCTA} from '../components/ButtonCTA'
-import {ComponentListItem} from '../components/ComponentListItem'
-import {FeaturedComponents} from '../components/FeaturedComponents'
-import {ComponentLink, componentLinks} from '../components/ComponentLink'
-
-const featuredComponents: ComponentLink[] = [
-  {
-    name: 'Modal',
-    thumbnail: require('../assets/Modal-component-thumbnail.png'),
-    screen: '__MINI_APP_NAME_PASCAL_CASE__.Modal',
-  },
-  {
-    name: 'ProductLink',
-    thumbnail: require('../assets/ProductLink-component-thumbnail.png'),
-    screen: '__MINI_APP_NAME_PASCAL_CASE__.ProductLink',
-  },
-  {
-    name: 'ProductCard',
-    thumbnail: require('../assets/ProductCard-component-thumbnail.png'),
-    screen: '__MINI_APP_NAME_PASCAL_CASE__.ProductCard',
-  },
-]
-
-export const HomeScreen = () => {
-  const theme = useTheme()
-  return (
-    <SafeAreaView
-      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
-    >
-      <ScrollView>
-        <Box flex={1} p="gutter" backgroundColor="backgrounds-regular">
-          <ShopMinisLogo width={100} />
-          <Text variant="heroBold" mb="s" mt="xs">
-            Hello, World!
-          </Text>
-          <Text variant="subtitle" mb="s">
-            A Shop Mini to showcase UI components available in the SDK.
-          </Text>
-
-          <ButtonCTA />
-
-          <Text variant="label" mb="s" mt="l">
-            Featured components
-          </Text>
-        </Box>
-        <Box backgroundColor="backgrounds-regular">
-          <FeaturedComponents components={featuredComponents} />
-        </Box>
-        <Box flex={1} p="gutter" backgroundColor="backgrounds-regular">
-          <Text variant="label" mb="s" mt="l">
-            All components
-          </Text>
-          <Box flexDirection="column">
-            {componentLinks.map(component => (
-              <ComponentListItem
-                key={component.name}
-                name={component.name}
-                screen={component.screen}
-              />
-            ))}
-          </Box>
-        </Box>
-        <Box flex={1} p="gutter" backgroundColor="backgrounds-regular">
-          <Text variant="label" mb="s" mt="l">
-            Hooks
-          </Text>
-          <Box flexDirection="column">
-            <ComponentListItem
-              name="Shop actions"
-              screen="__MINI_APP_NAME_PASCAL_CASE__.ShopActions"
-            />
-          </Box>
-        </Box>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}

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

@@ -1,181 +0,0 @@
-import {Alert, SafeAreaView, ScrollView} from 'react-native'
-import {
-  Box,
-  FastImageBox,
-  Icon,
-  IconButton,
-  Text,
-  AVAILABLE_ICONS,
-  useTheme,
-} from '@shopify/shop-minis-platform-sdk'
-
-import {Header} from '../components/Header'
-
-export const IconsScreen = () => {
-  const theme = useTheme()
-  return (
-    <SafeAreaView
-      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
-    >
-      <ScrollView>
-        <Header />
-        <Box px="gutter" pb="xs">
-          <Text variant="headerBold">Icon</Text>
-
-          <Box
-            marginTop="xs"
-            flexDirection="row"
-            flexWrap="wrap"
-            justifyContent="space-between"
-          >
-            {AVAILABLE_ICONS.map(icon => {
-              return (
-                <Box
-                  key={icon}
-                  alignItems="center"
-                  padding="s"
-                  flexGrow={1}
-                  flexBasis={100}
-                >
-                  <Icon name={icon} />
-                  <Box marginTop="xs">
-                    <Text textAlign="center" variant="caption">
-                      {icon}
-                    </Text>
-                  </Box>
-                </Box>
-              )
-            })}
-          </Box>
-
-          <Text variant="bodyLargeBold" mt="m">
-            IconButton
-          </Text>
-
-          <Box flexDirection="row" alignItems="center" paddingVertical="xs">
-            <Box minWidth={100}>
-              <Text variant="bodySmall">default</Text>
-            </Box>
-            <IconButton
-              name="favorites-heart"
-              onPress={DEFAULT_ON_PRESS}
-              accessibilityLabel="Favorite"
-            />
-          </Box>
-          <Box flexDirection="row" alignItems="center" paddingVertical="xs">
-            <Box minWidth={100}>
-              <Text variant="bodySmall">overlay</Text>
-            </Box>
-            <IconButton
-              name="favorites-heart"
-              variant="overlay"
-              onPress={DEFAULT_ON_PRESS}
-              accessibilityLabel="Favorite"
-            />
-          </Box>
-          <Box flexDirection="row" alignItems="center" paddingVertical="xs">
-            <Box minWidth={100}>
-              <Text variant="bodySmall">plain</Text>
-            </Box>
-            <IconButton
-              name="favorites-heart"
-              variant="plain"
-              onPress={DEFAULT_ON_PRESS}
-              accessibilityLabel="Favorite"
-            />
-          </Box>
-          <Box flexDirection="row" alignItems="center" paddingVertical="xs">
-            <Box minWidth={100}>
-              <Text variant="bodySmall">filled</Text>
-            </Box>
-            <IconButton
-              name="heart"
-              variant="filled"
-              backgroundColor="primary-button-background"
-              onPress={DEFAULT_ON_PRESS}
-              accessibilityLabel="Favorite"
-            />
-          </Box>
-
-          <Text variant="headerBold">Disabled icon buttons</Text>
-
-          <Box flexDirection="row" alignItems="center" paddingVertical="xs">
-            <Box minWidth={100}>
-              <Text variant="bodySmall">default</Text>
-            </Box>
-            <IconButton
-              name="favorites-heart"
-              disabled
-              onPress={DEFAULT_ON_PRESS}
-              accessibilityLabel="Favorite"
-            />
-          </Box>
-          <Box flexDirection="row" alignItems="center" paddingVertical="xs">
-            <Box minWidth={100}>
-              <Text variant="bodySmall">overlay</Text>
-            </Box>
-            <IconButton
-              name="favorites-heart"
-              disabled
-              variant="overlay"
-              onPress={DEFAULT_ON_PRESS}
-              accessibilityLabel="Favorite"
-            />
-          </Box>
-          <Box flexDirection="row" alignItems="center" paddingVertical="xs">
-            <Box minWidth={100}>
-              <Text variant="bodySmall">plain</Text>
-            </Box>
-            <IconButton
-              name="favorites-heart"
-              disabled
-              variant="plain"
-              onPress={DEFAULT_ON_PRESS}
-              accessibilityLabel="Favorite"
-            />
-          </Box>
-          <Box flexDirection="row" alignItems="center" paddingVertical="xs">
-            <Box minWidth={100}>
-              <Text variant="bodySmall">filled</Text>
-            </Box>
-            <IconButton
-              name="heart"
-              disabled
-              variant="filled"
-              backgroundColor="primary-button-background"
-              onPress={DEFAULT_ON_PRESS}
-              accessibilityLabel="Favorite"
-            />
-          </Box>
-
-          <Box paddingVertical="xs">
-            <FastImageBox
-              height={200}
-              resizeMode="cover"
-              source={{uri: 'https://picsum.photos/id/1080/1000/1000'}}
-            />
-            <Box position="absolute" bottom={20} right={80}>
-              <IconButton
-                name="favorites-heart"
-                variant="overlay"
-                onPress={DEFAULT_ON_PRESS}
-                accessibilityLabel="Favorite"
-              />
-            </Box>
-            <Box position="absolute" bottom={20} right={20}>
-              <IconButton
-                name="heart"
-                variant="filled"
-                backgroundColor="primary-button-background"
-                onPress={DEFAULT_ON_PRESS}
-                accessibilityLabel="Favorite"
-              />
-            </Box>
-          </Box>
-        </Box>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}
-
-const DEFAULT_ON_PRESS = () => Alert.alert('Pressed!')

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

@@ -1,145 +0,0 @@
-import {
-  Box,
-  Button,
-  ImageMultipleChoice,
-  ImageChoiceType,
-  Text,
-  useMultiSelect,
-  useTheme,
-} from '@shopify/shop-minis-platform-sdk'
-import {useMemo, useState} from 'react'
-import {SafeAreaView, ScrollView} from 'react-native'
-
-const DEFAULT_IMAGE_SIZE = 160
-const MOCK_IMAGE_INDEX_OFFSET = 20
-
-const getMockImageUrl = (size: number, index: number) =>
-  `https://picsum.photos/id/${index + MOCK_IMAGE_INDEX_OFFSET}/${size}`
-
-const createChoices = (numberOfChoices: number): ImageChoiceType[] => {
-  return Array(numberOfChoices)
-    .fill(undefined)
-    .map((_, index) => ({
-      label: `Option ${index + 1}`,
-      value: index,
-      imageSize: DEFAULT_IMAGE_SIZE,
-      imageUrl: getMockImageUrl(DEFAULT_IMAGE_SIZE, index),
-    }))
-}
-
-const initialChoices = createChoices(10)
-
-const textOptions = {
-  short: 'Short Option',
-  medium: 'Medium Medium Medium Option',
-  long: 'Long Long Long Long Long Long Long Long Long Option',
-}
-
-const imageSizes = {
-  50: 50,
-  90: 90,
-  160: 160,
-  300: 300,
-}
-
-interface ControlSectionProps {
-  label: string
-  children: React.ReactNode
-}
-
-const ControlSection = ({label, children}: ControlSectionProps) => (
-  <Box
-    marginHorizontal="gutter"
-    flexDirection="row"
-    alignContent="center"
-    alignItems="center"
-    marginBottom="xs"
-  >
-    <Text marginEnd="s" variant="bodyLarge">
-      {label}:
-    </Text>
-    {children}
-  </Box>
-)
-export const ImageMultipleChoiceScreen = () => {
-  const [choiceText, setChoiceText] =
-    useState<keyof typeof textOptions>('short')
-
-  const [imageSize, setImageSize] = useState(160)
-  const [snap, setSnap] = useState(false)
-  const [selectedIndexes, toggleIndex] = useMultiSelect()
-  const [selectedIndex, setSelectedIndex] = useState<number>()
-
-  const theme = useTheme()
-
-  const choices = useMemo(() => {
-    return initialChoices.map((choice, index) => ({
-      ...choice,
-      label: `${textOptions[choiceText]} ${index + 1}`,
-    }))
-  }, [choiceText])
-
-  return (
-    <SafeAreaView style={{flex: 1}}>
-      <Box paddingVertical="xs">
-        <ControlSection label="Text Length">
-          <Box flexDirection="row">
-            {Object.keys(textOptions).map(label => (
-              <Button
-                key={label}
-                variant={choiceText === label ? 'primary' : 'outlined'}
-                text={label}
-                onPress={() => setChoiceText(label as keyof typeof textOptions)}
-              />
-            ))}
-          </Box>
-        </ControlSection>
-        <ControlSection label="Image Size">
-          <Box flexDirection="row">
-            {Object.entries(imageSizes).map(([size, value]) => (
-              <Button
-                key={size}
-                variant={imageSize === value ? 'primary' : 'outlined'}
-                text={size}
-                onPress={() => setImageSize(value)}
-              />
-            ))}
-          </Box>
-        </ControlSection>
-        <ControlSection label="Snap">
-          <Button
-            variant={snap ? 'primary' : 'outlined'}
-            text={snap ? 'no snap' : 'snap'}
-            onPress={() => setSnap(!snap)}
-          />
-        </ControlSection>
-      </Box>
-      <ScrollView>
-        <Box marginVertical="s" marginHorizontal="gutter">
-          <Text variant="headerNormal">Single Select</Text>
-        </Box>
-        <ImageMultipleChoice
-          initialOffsetX={theme.spacing.gutter}
-          imageSize={imageSize}
-          choices={choices}
-          onChoiceSelected={index =>
-            setSelectedIndex(index === selectedIndex ? undefined : index)
-          }
-          selectedIndexes={selectedIndex === undefined ? [] : [selectedIndex]}
-          snap={snap}
-        />
-        <Box marginVertical="s" marginHorizontal="gutter">
-          <Text variant="headerNormal">Multi Select</Text>
-        </Box>
-        <ImageMultipleChoice
-          initialOffsetX={theme.spacing.gutter}
-          imageSize={imageSize}
-          choices={choices}
-          onChoiceSelected={toggleIndex}
-          selectedIndexes={selectedIndexes}
-          snap={snap}
-        />
-      </ScrollView>
-    </SafeAreaView>
-  )
-}