@shopify/shop-minis-cli 0.0.35

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

@@ -0,0 +1,379 @@
+import {ComponentProps, useCallback, useState} from 'react'
+import {SafeAreaView, ScrollView, FlatList} from 'react-native'
+import {
+  Button,
+  Box,
+  Text,
+  Modal,
+  FastImageBox,
+  ModalSafeArea,
+  useTheme,
+} from '@shopify/shop-minis-platform-sdk'
+
+import {Header} from '../components/Header'
+
+const DemoContent = ({length = 50}: {length?: number}) => (
+  <>
+    {Array.from({length}, (_, index) => (
+      <Box key={`item-${index}`} marginBottom="s" marginHorizontal="gutter">
+        <Text>item {index + 1}</Text>
+      </Box>
+    ))}
+  </>
+)
+
+const ExampleAutoHeight = ({
+  isOpen,
+  onDismiss,
+}: {
+  isOpen: boolean
+  onDismiss: ComponentProps<typeof Modal>['onDismiss']
+}) => {
+  return (
+    <Modal isOpen={isOpen} onDismiss={onDismiss} headerText="Hey there!">
+      <DemoContent length={5} />
+    </Modal>
+  )
+}
+
+const ExampleFixedHeight = ({
+  isOpen,
+  onDismiss,
+}: {
+  isOpen: boolean
+  onDismiss: ComponentProps<typeof Modal>['onDismiss']
+}) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onDismiss={onDismiss}
+      height="50%"
+      headerText="Hello Friend! more text goes here"
+    >
+      <Box
+        flex={1}
+        borderColor="backgrounds-dangerous"
+        borderWidth={5}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Text>Fill the space</Text>
+      </Box>
+    </Modal>
+  )
+}
+
+const ExampleScrollingAutoHeight = ({
+  isOpen,
+  onDismiss,
+}: {
+  isOpen: boolean
+  onDismiss: ComponentProps<typeof Modal>['onDismiss']
+}) => {
+  const [length, setLength] = useState(2)
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onDismiss={onDismiss}
+      headerText="Hi Buddy!"
+      maxHeight="80%"
+    >
+      <ScrollView>
+        <Box marginBottom="s" marginHorizontal="gutter">
+          <Text>
+            This modal will have an auto height up until the maxHeight value
+          </Text>
+        </Box>
+
+        <Box marginBottom="s" marginHorizontal="gutter">
+          <Text>
+            Use this toggle to see how that would work with more or less content
+            (note: changing content height dynamically is currently not
+            recommended)
+          </Text>
+        </Box>
+
+        <Box marginBottom="s" marginHorizontal="gutter">
+          <Button
+            onPress={() =>
+              setLength(currentLength => (currentLength === 2 ? 20 : 2))
+            }
+            text="Toggle content"
+          />
+        </Box>
+
+        <DemoContent length={length} />
+      </ScrollView>
+    </Modal>
+  )
+}
+
+const ExampleScrollingAutoHeight2 = ({
+  isOpen,
+  onDismiss,
+}: {
+  isOpen: boolean
+  onDismiss: ComponentProps<typeof Modal>['onDismiss']
+}) => {
+  const [length, setLength] = useState(4)
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onDismiss={onDismiss}
+      headerText="Hi Buddy!"
+      maxHeight="60%"
+    >
+      <FlatList
+        data={Array.from({length}, (_, index) => ({
+          key: index,
+          title: `Thing ${index + 1}`,
+        }))}
+        renderItem={({item}) => {
+          if (item.key === 2) {
+            return (
+              <Box key={3} marginBottom="s" marginHorizontal="gutter">
+                <Button
+                  onPress={() =>
+                    setLength(currentLength => (currentLength === 4 ? 50 : 4))
+                  }
+                  text="Toggle content"
+                />
+              </Box>
+            )
+          }
+
+          return (
+            <Box key={item.key} marginBottom="s" marginHorizontal="gutter">
+              <Text>{item.title}</Text>
+            </Box>
+          )
+        }}
+      />
+    </Modal>
+  )
+}
+
+const ExampleScrollingFixedHeight = ({
+  isOpen,
+  onDismiss,
+}: {
+  isOpen: boolean
+  onDismiss: ComponentProps<typeof Modal>['onDismiss']
+}) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onDismiss={onDismiss}
+      height={400}
+      headerText="Howdy!"
+    >
+      <ScrollView>
+        <DemoContent length={40} />
+      </ScrollView>
+    </Modal>
+  )
+}
+
+const ExampleHeaderLayoutVariant = ({
+  isOpen,
+  onDismiss,
+}: {
+  isOpen: boolean
+  onDismiss: ComponentProps<typeof Modal>['onDismiss']
+}) => {
+  const [debugMode, setDebugMode] = useState(false)
+
+  return (
+    <Modal isOpen={isOpen} onDismiss={onDismiss} headerLayoutVariant="overlay">
+      {/* This first box is constrained to make sure there's no overlap */}
+      <ModalSafeArea
+        alignItems="center"
+        paddingTop="m"
+        paddingBottom="xs"
+        backgroundColor={debugMode ? 'backgrounds-success' : undefined}
+      >
+        <FastImageBox
+          height={100}
+          width={100}
+          resizeMode="contain"
+          source={{uri: 'https://picsum.photos/100/100'}}
+          borderRadius={16}
+        />
+      </ModalSafeArea>
+
+      {/* These boxes can take as much space as they want */}
+      <Box
+        marginHorizontal="gutter"
+        marginTop="xs"
+        marginBottom="s"
+        backgroundColor={debugMode ? 'backgrounds-success' : undefined}
+      >
+        <Text variant="subtitle" textAlign="center">
+          ALWAYS EXCITING
+        </Text>
+      </Box>
+
+      <Box
+        marginHorizontal="gutter"
+        marginBottom="m"
+        backgroundColor={debugMode ? 'backgrounds-success' : undefined}
+      >
+        <Text variant="heroBold" textAlign="center">
+          Discover the world&apos;s greatest brands
+        </Text>
+      </Box>
+
+      <Box
+        marginHorizontal="gutter"
+        marginBottom="m"
+        backgroundColor={debugMode ? 'backgrounds-success' : undefined}
+      >
+        <Text textAlign="center">
+          Fan-favorites, future-classics - if they shine, they&apos;re on Shop.
+        </Text>
+      </Box>
+
+      <Box
+        marginHorizontal="gutter"
+        marginBottom="m"
+        backgroundColor={debugMode ? 'backgrounds-success' : undefined}
+      >
+        <Button
+          text={`${debugMode ? 'Hide' : 'Show'} bounding boxes`}
+          onPress={() => setDebugMode(!debugMode)}
+        />
+      </Box>
+    </Modal>
+  )
+}
+
+export const ModalScreen = () => {
+  const theme = useTheme()
+  const [examples, setExamples] = useState([
+    {
+      Component: ExampleAutoHeight,
+      title: 'Auto Height',
+      description:
+        'This modal takes the height of whatever content you place in it. You must be sure this content will always fit on the smallest devices',
+      isVisible: false,
+      cta: null,
+    },
+    {
+      Component: ExampleFixedHeight,
+      title: 'Fixed Height',
+      description:
+        'This modal has a hardcoded height. The contents can fill this space and no more',
+      isVisible: false,
+    },
+    {
+      Component: ExampleScrollingAutoHeight,
+      title: 'Scrolling Auto Height',
+      description:
+        'This modal has scrolling contents. The modal will be as big as the scrolling contents up until the maxHeight is reached',
+      isVisible: false,
+    },
+    {
+      Component: ExampleScrollingAutoHeight2,
+      description: 'Same as above but with a flatlist',
+      isVisible: false,
+    },
+    {
+      Component: ExampleScrollingFixedHeight,
+      title: 'Scrolling Fixed Height',
+      description:
+        'This modal has scrolling contents. The contents can fill this space and scroll when needed',
+      isVisible: false,
+    },
+    {
+      Component: ExampleHeaderLayoutVariant,
+      title: 'Header Layout Variant',
+      description:
+        'In overlay mode your contents can use the header space for modal content',
+      isVisible: false,
+    },
+  ])
+
+  const openExample = useCallback((index: number) => {
+    setExamples(existingExamples =>
+      existingExamples.map((existingExample, i) => {
+        if (i !== index) return existingExample
+
+        return {
+          ...existingExample,
+          isVisible: true,
+        }
+      })
+    )
+  }, [])
+
+  const closeExample = useCallback((index: number) => {
+    setExamples(existingExamples =>
+      existingExamples.map((existingExample, i) => {
+        if (i !== index) return existingExample
+
+        return {
+          ...existingExample,
+          isVisible: false,
+        }
+      })
+    )
+  }, [])
+
+  return (
+    <>
+      <SafeAreaView
+        style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
+      >
+        <ScrollView
+          style={{
+            flex: 1,
+            backgroundColor: theme.colors['backgrounds-regular'],
+          }}
+        >
+          <Header />
+          <Box px="gutter">
+            <Box marginBottom="s">
+              <Text variant="headerBold">Modal</Text>
+            </Box>
+
+            {examples.map(({title, cta, isVisible, description}, i) => (
+              <Box key={title || description} marginBottom="xl">
+                {title ? (
+                  <Box marginBottom="xs">
+                    <Text variant="bodyLargeBold">{title}</Text>
+                  </Box>
+                ) : null}
+
+                {description ? (
+                  <Box marginBottom="s">
+                    <Text>{description}</Text>
+                  </Box>
+                ) : null}
+
+                <Button
+                  text={`Launch ${cta ?? 'example'}`}
+                  disabled={isVisible}
+                  onPress={() => openExample(i)}
+                />
+              </Box>
+            ))}
+          </Box>
+        </ScrollView>
+      </SafeAreaView>
+
+      {/* Notice that the modal component itself lives outside the SafeAreaView */}
+
+      {examples.map(({Component, title, description, isVisible}, i) => {
+        return (
+          <Component
+            key={title || description}
+            isOpen={isVisible}
+            onDismiss={() => closeExample(i)}
+          />
+        )
+      })}
+    </>
+  )
+}

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

@@ -0,0 +1,68 @@
+import {SafeAreaView} from 'react-native'
+import {
+  useMinisQuery,
+  Box,
+  Text,
+  TouchableProduct,
+  ProductCard,
+  ProductCardGrid,
+  useTheme,
+} from '@shopify/shop-minis-platform-sdk'
+
+import TestProductsQuery from '../data/TestProducts.graphql'
+import {Header} from '../components/Header'
+
+const SHOP_GID = 'gid://shopify/Shop/68822335510'
+const PRODUCT_GIDS = [
+  'gid://shopify/Product/7982542651414',
+  'gid://shopify/Product/7982528397334',
+  'gid://shopify/Product/7982535704598',
+  'gid://shopify/Product/7982577352726',
+  'gid://shopify/Product/7982564245526',
+  'gid://shopify/Product/7982547763222',
+  'gid://shopify/Product/7982499495958',
+  'gid://shopify/Product/7982540521494',
+  'gid://shopify/Product/7982554710038',
+  'gid://shopify/Product/7982557200406',
+  'gid://shopify/Product/7982571257878',
+  'gid://shopify/Product/7982372388886',
+]
+
+export const ProductCardGridScreen = () => {
+  const theme = useTheme()
+  const {loading, data} = useMinisQuery(TestProductsQuery, {
+    variables: {
+      shopId: SHOP_GID,
+      productIds: PRODUCT_GIDS,
+    },
+    fetchPolicy: 'cache-and-network',
+  })
+
+  const products = data?.shop?.productsByIds ?? []
+
+  if (loading || !products) return null
+
+  return (
+    <SafeAreaView
+      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
+    >
+      <Header />
+      <ProductCardGrid
+        products={products}
+        ListHeaderComponent={
+          <Box pb="s">
+            <Text variant="headerBold" mb="xs">
+              ProductCardGrid
+            </Text>
+          </Box>
+        }
+        renderItem={({product}) => (
+          <TouchableProduct product={product} key={product.id}>
+            <ProductCard shopId={SHOP_GID} product={product} />
+          </TouchableProduct>
+        )}
+        contentContainerStyle={{padding: theme.spacing.gutter}}
+      />
+    </SafeAreaView>
+  )
+}

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

@@ -0,0 +1,62 @@
+import {SafeAreaView, ScrollView} from 'react-native'
+import {
+  Box,
+  ProductCard,
+  Text,
+  TouchableProduct,
+  useMinisQuery,
+  useTheme,
+} from '@shopify/shop-minis-platform-sdk'
+
+import TestQuery from '../data/Test.graphql'
+import {Header} from '../components/Header'
+
+const SHOP_GID = 'gid://shopify/Shop/68822335510'
+const PRODUCT_GID = 'gid://shopify/Product/7982542651414'
+
+export const ProductCardScreen = () => {
+  const theme = useTheme()
+  const {loading, data} = useMinisQuery(TestQuery, {
+    variables: {
+      shopId: SHOP_GID,
+      productId: PRODUCT_GID,
+    },
+    fetchPolicy: 'cache-and-network',
+  })
+
+  if (loading || !data?.shop?.product) return null
+
+  return (
+    <SafeAreaView
+      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
+    >
+      <ScrollView>
+        <Header />
+        <Box px="gutter">
+          <Text variant="headerBold" mb="xs">
+            ProductCard
+          </Text>
+        </Box>
+        <Box flexDirection="row" px="gutter" pt="m">
+          <Box flex={1} padding="xs">
+            <Text variant="label">Default</Text>
+            <TouchableProduct product={data.shop.product}>
+              <ProductCard shopId={SHOP_GID} product={data.shop.product} />
+            </TouchableProduct>
+          </Box>
+          <Box flex={1} padding="xs">
+            <Text variant="label">With a badge</Text>
+            <TouchableProduct product={data.shop.product}>
+              <ProductCard
+                shopId={SHOP_GID}
+                product={data.shop.product}
+                badgeText="New"
+                badgeColor="backgrounds-dangerous"
+              />
+            </TouchableProduct>
+          </Box>
+        </Box>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}