@shopify/shop-minis-cli 0.0.35

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

@@ -0,0 +1,711 @@
+import {ComponentProps, useCallback, useState} from 'react'
+import {SafeAreaView, ScrollView, TouchableOpacity} from 'react-native'
+import Animated from 'react-native-reanimated'
+import {
+  Button,
+  Box,
+  Text,
+  FlatListBottomSheet,
+  ProductCardGridBottomSheet,
+  ScrollViewBottomSheet,
+  SectionListBottomSheet,
+  useTheme,
+  useMinisQuery,
+  TouchableProduct,
+  ProductCard,
+  Avatar,
+  useBottomSheet,
+  GridBottomSheet,
+  useScrollViewBottomSheet,
+  useGridBottomSheet,
+  useFlatListBottomSheet,
+  useProductCardGridBottomSheet,
+  useSectionListBottomSheet,
+} from '@shopify/shop-minis-platform-sdk'
+
+import {Header} from '../components/Header'
+import TestProductsQuery from '../data/TestProducts.graphql'
+
+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',
+]
+
+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 ExampleFlatList = ({
+  onDismiss,
+}: {
+  onDismiss: ComponentProps<typeof ScrollViewBottomSheet>['onDismiss']
+}) => {
+  return (
+    <FlatListBottomSheet
+      onDismiss={onDismiss}
+      data={Array.from({length: 50}, (_, index) => ({
+        key: index,
+        title: `Thing ${index + 1}`,
+      }))}
+      renderItem={({item}) => {
+        return (
+          <Box key={item.key} marginBottom="s" marginHorizontal="gutter">
+            <Text>{item.title}</Text>
+          </Box>
+        )
+      }}
+    />
+  )
+}
+
+const ExampleGrid = ({
+  onDismiss,
+}: {
+  onDismiss: ComponentProps<typeof ScrollViewBottomSheet>['onDismiss']
+}) => {
+  const theme = useTheme()
+  const data = Array.from({length: 50}, (_, index) => ({
+    text: `Item ${index + 1}`,
+  }))
+
+  return (
+    <GridBottomSheet
+      onDismiss={onDismiss}
+      data={data}
+      renderItem={({item}) => (
+        <Box
+          minHeight={200}
+          backgroundColor="backgrounds-success"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Text>{item.text}</Text>
+        </Box>
+      )}
+      contentContainerStyle={{
+        paddingHorizontal: theme.spacing.gutter,
+        paddingBottom: theme.spacing.m,
+      }}
+    />
+  )
+}
+
+const ExampleProductCardGrid = ({
+  onDismiss,
+}: {
+  onDismiss: ComponentProps<typeof ScrollViewBottomSheet>['onDismiss']
+}) => {
+  const theme = useTheme()
+
+  const {loading, data} = useMinisQuery(TestProductsQuery, {
+    variables: {
+      shopId: SHOP_GID,
+      productIds: PRODUCT_GIDS,
+    },
+  })
+
+  const products = data?.shop?.productsByIds ?? []
+
+  // TODO: It would be nice to handle this inside the bottomsheet with a spinner
+  if (loading || !data) return null
+
+  return (
+    <ProductCardGridBottomSheet
+      onDismiss={onDismiss}
+      products={products}
+      renderItem={({product}) => (
+        <TouchableProduct product={product} key={product.id}>
+          <ProductCard shopId={SHOP_GID} product={product} />
+        </TouchableProduct>
+      )}
+      contentContainerStyle={{
+        paddingHorizontal: theme.spacing.gutter,
+        paddingBottom: theme.spacing.m,
+      }}
+    />
+  )
+}
+
+const ExampleScrollView1 = ({
+  onDismiss,
+}: {
+  onDismiss: ComponentProps<typeof ScrollViewBottomSheet>['onDismiss']
+}) => {
+  return (
+    <ScrollViewBottomSheet onDismiss={onDismiss}>
+      <DemoContent />
+    </ScrollViewBottomSheet>
+  )
+}
+
+const ExampleScrollView2 = ({
+  onDismiss,
+}: {
+  onDismiss: ComponentProps<typeof ScrollViewBottomSheet>['onDismiss']
+}) => {
+  const [answer, setAnswer] = useState<number | null>(null)
+
+  return (
+    <ScrollViewBottomSheet
+      onDismiss={onDismiss}
+      variant="header"
+      headerText="Poll"
+    >
+      <Box marginBottom="m" marginHorizontal="gutter">
+        <Avatar
+          color="foregrounds-regular"
+          title="Mother Goose"
+          source={{uri: 'https://picsum.photos/150/150'}}
+        />
+      </Box>
+
+      <Box marginBottom="m" marginHorizontal="gutter">
+        <Text>
+          How much wood could a woodchuck chuck if a woodchuck could chuck wood?
+        </Text>
+      </Box>
+
+      <Box marginBottom="s" marginHorizontal="gutter">
+        <Button
+          text="5"
+          variant={answer === 5 ? 'primary' : 'outlined'}
+          onPress={() => setAnswer(5)}
+        />
+      </Box>
+      <Box marginBottom="s" marginHorizontal="gutter">
+        <Button
+          text="10"
+          variant={answer === 10 ? 'primary' : 'outlined'}
+          onPress={() => setAnswer(10)}
+        />
+      </Box>
+      <Box marginBottom="s" marginHorizontal="gutter">
+        <Button
+          text="500"
+          variant={answer === 500 ? 'primary' : 'outlined'}
+          onPress={() => setAnswer(500)}
+        />
+      </Box>
+      <Box marginBottom="s" marginHorizontal="gutter">
+        <Button
+          text="10000"
+          variant={answer === 10000 ? 'primary' : 'outlined'}
+          onPress={() => setAnswer(10000)}
+        />
+      </Box>
+    </ScrollViewBottomSheet>
+  )
+}
+
+const ExampleSectionList = ({
+  onDismiss,
+}: {
+  onDismiss: ComponentProps<typeof ScrollViewBottomSheet>['onDismiss']
+}) => {
+  return (
+    <SectionListBottomSheet
+      onDismiss={onDismiss}
+      sections={Array.from({length: 50}, (_, index) => ({
+        title: `Section ${index + 1}`,
+        data: ['1', '2', '3', '4', '5'],
+      }))}
+      renderSectionHeader={({section: {title}}) => (
+        <Box padding="s" backgroundColor="backgrounds-success">
+          <Text variant="heroBold">{title}</Text>
+        </Box>
+      )}
+      renderItem={({item}) => (
+        <Box padding="s">
+          <Text>{item}</Text>
+        </Box>
+      )}
+    />
+  )
+}
+
+const ExampleSnapPoints = ({
+  onDismiss,
+}: {
+  onDismiss: ComponentProps<typeof ScrollViewBottomSheet>['onDismiss']
+}) => {
+  return (
+    <FlatListBottomSheet
+      onDismiss={onDismiss}
+      snapPoints={{
+        positionOne: 200,
+        positionTwo: 500,
+      }}
+      data={Array.from({length: 50}, (_, index) => ({
+        key: index,
+        title: `Thing ${index + 1}`,
+      }))}
+      renderItem={({item}) => {
+        return (
+          <Box key={item.key} marginBottom="s" marginHorizontal="gutter">
+            <Text>{item.title}</Text>
+          </Box>
+        )
+      }}
+    />
+  )
+}
+
+const ExampleVariants = ({
+  onDismiss,
+}: {
+  onDismiss: ComponentProps<typeof ScrollViewBottomSheet>['onDismiss']
+}) => {
+  return (
+    <FlatListBottomSheet
+      onDismiss={onDismiss}
+      variant="handle"
+      data={Array.from({length: 50}, (_, index) => ({
+        key: index,
+        title: `Thing ${index + 1}`,
+      }))}
+      renderItem={({item}) => {
+        return (
+          <Box key={item.key} paddingBottom="s" paddingHorizontal="m">
+            <Text>{item.title}</Text>
+          </Box>
+        )
+      }}
+    />
+  )
+}
+
+const ExampleUseBottomSheet = ({
+  onDismiss,
+}: {
+  onDismiss: ComponentProps<typeof ScrollViewBottomSheet>['onDismiss']
+}) => {
+  const theme = useTheme()
+
+  const scrollToTop = useCallback((ref?: Animated.ScrollView) => {
+    ref?.scrollTo({y: 0, animated: false})
+  }, [])
+
+  const {BottomSheet, scrollRef, onScroll, dismissBottomSheet} =
+    useBottomSheet<Animated.ScrollView>({
+      onDismiss,
+      scrollToTop,
+    })
+
+  return (
+    <BottomSheet>
+      <Animated.ScrollView
+        ref={scrollRef}
+        style={[
+          {
+            flex: 1,
+            elevation: 10,
+            backgroundColor: theme.colors['backgrounds-regular'],
+          },
+        ]}
+        indicatorStyle={theme.type === 'dark' ? 'white' : 'black'}
+        onScrollBeginDrag={onScroll}
+        onScroll={onScroll}
+        scrollEventThrottle={1}
+      >
+        <Box marginBottom="s" marginHorizontal="gutter">
+          <Text>
+            When using useBottomSheet directly you can programmatically close
+            the bottomsheet
+          </Text>
+        </Box>
+
+        <Box marginBottom="s" marginHorizontal="gutter">
+          <Button text="Close" onPress={dismissBottomSheet} />
+        </Box>
+
+        <DemoContent />
+      </Animated.ScrollView>
+    </BottomSheet>
+  )
+}
+
+const ExampleUseScrollViewBottomSheet = ({
+  onDismiss,
+}: {
+  onDismiss: ComponentProps<typeof ScrollViewBottomSheet>['onDismiss']
+}) => {
+  // Aliasing because we already have `ScrollViewBottomSheet` imported
+  const {
+    ScrollViewBottomSheet: ScrollViewBottomSheetComponent,
+    dismissBottomSheet,
+  } = useScrollViewBottomSheet({
+    onDismiss,
+  })
+
+  return (
+    <ScrollViewBottomSheetComponent>
+      <Box marginBottom="s" marginHorizontal="gutter">
+        <Text>
+          When using useScrollViewBottomSheet directly you can programmatically
+          close the bottomsheet
+        </Text>
+      </Box>
+
+      <Box marginBottom="s" marginHorizontal="gutter">
+        <Button text="Close" onPress={dismissBottomSheet} />
+      </Box>
+
+      <DemoContent />
+    </ScrollViewBottomSheetComponent>
+  )
+}
+
+const ExampleUseGridBottomSheet = ({
+  onDismiss,
+}: {
+  onDismiss: ComponentProps<typeof GridBottomSheet>['onDismiss']
+}) => {
+  const theme = useTheme()
+
+  // Aliasing because we already have `GridBottomSheet` imported
+  const {GridBottomSheet: GridBottomSheetComponent, dismissBottomSheet} =
+    useGridBottomSheet({
+      onDismiss,
+    })
+
+  const data = Array.from({length: 50}, (_, index) => ({
+    text: `Item ${index + 1}`,
+  }))
+
+  return (
+    <GridBottomSheetComponent
+      data={data}
+      renderItem={({item}) => (
+        <TouchableOpacity onPress={dismissBottomSheet}>
+          <Box
+            minHeight={200}
+            backgroundColor="backgrounds-subdued"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Text>{item.text}</Text>
+            <Text>Press to close</Text>
+          </Box>
+        </TouchableOpacity>
+      )}
+      contentContainerStyle={{
+        paddingHorizontal: theme.spacing.gutter,
+        paddingBottom: theme.spacing.m,
+      }}
+    />
+  )
+}
+
+const ExampleUseProductCardGridBottomSheet = ({
+  onDismiss,
+}: {
+  onDismiss: ComponentProps<typeof ProductCardGridBottomSheet>['onDismiss']
+}) => {
+  const theme = useTheme()
+
+  // Aliasing because we already have `ProductCardGridBottomSheet` imported
+  const {
+    ProductCardGridBottomSheet: ProductCardGridBottomSheetComponent,
+    dismissBottomSheet,
+  } = useProductCardGridBottomSheet({
+    onDismiss,
+  })
+
+  const {loading, data} = useMinisQuery(TestProductsQuery, {
+    variables: {
+      shopId: SHOP_GID,
+      productIds: PRODUCT_GIDS,
+    },
+  })
+
+  const products = data?.shop?.productsByIds ?? []
+
+  // TODO: It would be nice to handle this inside the bottomsheet with a spinner
+  if (loading || !data) return null
+
+  return (
+    <ProductCardGridBottomSheetComponent
+      products={products}
+      ListHeaderComponent={
+        <Box paddingBottom="s" paddingHorizontal="gutter">
+          <Button text="Close" onPress={dismissBottomSheet} />
+        </Box>
+      }
+      renderItem={({product}) => (
+        <TouchableProduct product={product} key={product.id}>
+          <ProductCard shopId={SHOP_GID} product={product} />
+        </TouchableProduct>
+      )}
+      contentContainerStyle={{
+        paddingHorizontal: theme.spacing.gutter,
+        paddingBottom: theme.spacing.m,
+      }}
+    />
+  )
+}
+
+const ExampleUseFlatListBottomSheet = ({
+  onDismiss,
+}: {
+  onDismiss: ComponentProps<typeof FlatListBottomSheet>['onDismiss']
+}) => {
+  // Aliasing because we already have `FlatListBottomSheet` imported
+  const {
+    FlatListBottomSheet: FlatListBottomSheetComponent,
+    dismissBottomSheet,
+  } = useFlatListBottomSheet({
+    onDismiss,
+  })
+
+  return (
+    <FlatListBottomSheetComponent
+      data={Array.from({length: 50}, (_, index) => ({
+        key: index,
+        title: `Thing ${index + 1}`,
+      }))}
+      renderItem={({item}) => {
+        return (
+          <TouchableOpacity onPress={dismissBottomSheet}>
+            <Box
+              key={item.key}
+              marginBottom="s"
+              padding="s"
+              marginHorizontal="gutter"
+              backgroundColor="backgrounds-dangerous"
+            >
+              <Text>{item.title}</Text>
+              <Text>Touch to close</Text>
+            </Box>
+          </TouchableOpacity>
+        )
+      }}
+    />
+  )
+}
+
+const ExampleUseSectionListBottomSheet = ({
+  onDismiss,
+}: {
+  onDismiss: ComponentProps<typeof SectionListBottomSheet>['onDismiss']
+}) => {
+  // Aliasing because we already have `SectionListBottomSheet` imported
+  const {
+    SectionListBottomSheet: SectionListBottomSheetComponent,
+    dismissBottomSheet,
+  } = useSectionListBottomSheet({
+    onDismiss,
+  })
+
+  return (
+    <SectionListBottomSheetComponent
+      sections={Array.from({length: 50}, (_, index) => ({
+        title: `Section ${index + 1}`,
+        data: ['1', '2', '3', '4', '5'],
+      }))}
+      renderSectionHeader={({section: {title}}) => (
+        <Box padding="s" backgroundColor="foregrounds-primary">
+          <Text variant="heroBold" color="foregrounds-contrasting">
+            {title}
+          </Text>
+        </Box>
+      )}
+      renderItem={({item}) => (
+        <Box padding="s">
+          <Text>{item}</Text>
+        </Box>
+      )}
+      ListHeaderComponent={
+        <Box paddingBottom="s" paddingHorizontal="gutter">
+          <Button text="Close" onPress={dismissBottomSheet} />
+        </Box>
+      }
+    />
+  )
+}
+
+export const BottomSheetScreen = () => {
+  const theme = useTheme()
+  const [examples, setExamples] = useState([
+    {
+      Component: ExampleScrollView1,
+      title: 'ScrollView',
+      description:
+        'The simplest bottomsheet. This is a good starting point although for a large amount of content it will be best to use one of the more optimised options such as the FlatList',
+      cta: 'scrolling example',
+      isVisible: false,
+    },
+    {
+      Component: ExampleScrollView2,
+      cta: 'non-scrolling example',
+      isVisible: false,
+    },
+    {
+      Component: ExampleFlatList,
+      title: 'FlatList',
+      isVisible: false,
+    },
+    {
+      Component: ExampleGrid,
+      title: 'Grid',
+      isVisible: false,
+    },
+    {
+      Component: ExampleProductCardGrid,
+      title: 'ProductCardGrid',
+      isVisible: false,
+    },
+    {
+      Component: ExampleSectionList,
+      title: 'SectionList',
+      isVisible: false,
+    },
+    {
+      Component: ExampleSnapPoints,
+      title: 'Configuring snapPoints',
+      description:
+        'You can configure snap points for all of the bottomsheets. This allows you to control the initial, smaller, point ' +
+        ' (positionTwo) as well as the top-most position (positionOne). These are measurements in screen units from the top ' +
+        'of the container.',
+      isVisible: false,
+    },
+    {
+      Component: ExampleVariants,
+      title: 'Header Variants',
+      description:
+        "There's a variant called handle that replaces the top of the bottomsheet with an iOS-style handle",
+      isVisible: false,
+    },
+    {
+      Component: ExampleUseScrollViewBottomSheet,
+      title: 'hooks',
+      description:
+        'If you need to programmatically close the bottomsheet or want low-level control of the bottomsheet you can one of the hooks such as useScrollViewBottomSheet directly',
+      cta: 'with useScrollViewBottomSheet',
+      isVisible: false,
+    },
+    {
+      Component: ExampleUseGridBottomSheet,
+      title: 'useGridBottomSheet hook',
+      isVisible: false,
+    },
+    {
+      Component: ExampleUseProductCardGridBottomSheet,
+      title: 'useProductCardGridBottomSheet hook',
+      isVisible: false,
+    },
+    {
+      Component: ExampleUseFlatListBottomSheet,
+      title: 'useFlatListBottomSheet hook',
+      isVisible: false,
+    },
+    {
+      Component: ExampleUseSectionListBottomSheet,
+      title: 'useSectionListBottomSheet hook',
+      isVisible: false,
+    },
+    {
+      Component: ExampleUseBottomSheet,
+      description:
+        'If you have an advanced use-case you can use useBottomSheet directly but you will need to wire up the scroll handlers manually',
+      cta: 'with useBottomSheet',
+      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="m">
+              <Text variant="headerBold">BottomSheet</Text>
+            </Box>
+
+            {examples.map(({title, cta, isVisible, description}, i) => (
+              <Box key={title || cta} marginBottom="s">
+                {title ? (
+                  <Box marginBottom="xs">
+                    <Text variant="label" style={{textTransform: 'none'}}>
+                      {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 bottomsheet component itself lives outside the SafeAreaView */}
+
+      {examples.map(({Component, title, isVisible}, i) => {
+        if (!isVisible) return null
+
+        return <Component key={title} onDismiss={() => closeExample(i)} />
+      })}
+    </>
+  )
+}