@shopify/shop-minis-cli 0.0.35

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

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

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

@@ -0,0 +1,70 @@
+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_HANDLE_PASCAL_CASE__.Modal',
+  },
+  {
+    name: 'ProductLink',
+    thumbnail: require('../assets/ProductLink-component-thumbnail.png'),
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.ProductLink',
+  },
+  {
+    name: 'ProductCard',
+    thumbnail: require('../assets/ProductCard-component-thumbnail.png'),
+    screen: '__MINI_APP_HANDLE_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>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}

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

@@ -0,0 +1,181 @@
+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/MediaScreen.tsx

@@ -0,0 +1,130 @@
+import {SafeAreaView, ScrollView} from 'react-native'
+import {
+  Box,
+  FastImageBox,
+  Text,
+  Avatar,
+  CollectionThumbnail,
+  useTheme,
+} from '@shopify/shop-minis-platform-sdk'
+
+import {Header} from '../components/Header'
+
+export const MediaScreen = () => {
+  const theme = useTheme()
+  return (
+    <SafeAreaView
+      style={{backgroundColor: theme.colors['backgrounds-regular']}}
+    >
+      <ScrollView>
+        <Header />
+        <Box px="gutter">
+          <Text variant="headerBold" mb="xs">
+            Media
+          </Text>
+        </Box>
+        <Box>
+          <Box padding="gutter">
+            <Text variant="sectionTitle">Avatar</Text>
+
+            <Box
+              mt="xs"
+              p="gutter"
+              backgroundColor="unbranded-button-background"
+              borderRadius={16}
+            >
+              <Avatar
+                color="backgrounds-regular"
+                title="John Doe"
+                source={{uri: 'https://picsum.photos/200/200'}}
+              />
+            </Box>
+
+            <Box
+              mt="xs"
+              p="gutter"
+              backgroundColor="backgrounds-subdued"
+              borderRadius={16}
+            >
+              <Avatar
+                color="foregrounds-regular"
+                title="Joe Dohn"
+                source={{uri: 'https://picsum.photos/150/150'}}
+              />
+            </Box>
+          </Box>
+
+          <Box px="gutter" mt="s">
+            <Text variant="sectionTitle">Thumbnails</Text>
+            <Box marginTop="s" flexDirection="row">
+              <Box>
+                <CollectionThumbnail
+                  borderColor="foregrounds-regular"
+                  imageSources={[{uri: 'https://picsum.photos/200/200'}]}
+                  onPress={() => {}}
+                />
+              </Box>
+              <Box marginLeft="xs">
+                <CollectionThumbnail
+                  borderColor="backgrounds-regular"
+                  imageSources={[
+                    {uri: 'https://picsum.photos/200/200'},
+                    {uri: 'https://picsum.photos/150/150'},
+                    {uri: 'https://picsum.photos/100/100'},
+                  ]}
+                  onPress={() => {}}
+                />
+              </Box>
+            </Box>
+          </Box>
+
+          <Box padding="gutter">
+            <Text variant="sectionTitle">Images</Text>
+            <Text variant="bodySmall" mt="m">
+              resizeMode: contain
+            </Text>
+            <FastImageBox
+              height={200}
+              resizeMode="contain"
+              source={{uri: 'https://picsum.photos/200/300'}}
+            />
+            <Text variant="bodySmall" mt="m">
+              resizeMode: cover
+            </Text>
+            <FastImageBox
+              height={200}
+              resizeMode="cover"
+              source={{uri: 'https://picsum.photos/200/300'}}
+            />
+            <Text variant="bodySmall" mt="m">
+              resizeMode: stretch
+            </Text>
+            <FastImageBox
+              height={200}
+              resizeMode="stretch"
+              source={{uri: 'https://picsum.photos/200/300'}}
+            />
+            <Text variant="bodySmall" mt="m">
+              resizeMode: center
+            </Text>
+            <FastImageBox
+              height={200}
+              resizeMode="center"
+              source={{uri: 'https://picsum.photos/200/300'}}
+            />
+            <Text variant="bodySmall" mt="m">
+              With Box styling
+            </Text>
+            <FastImageBox
+              height={200}
+              aspectRatio={1}
+              borderRadius={16}
+              resizeMode="center"
+              source={{uri: 'https://picsum.photos/200/300'}}
+            />
+          </Box>
+        </Box>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}