@shopify/shop-minis-cli 0.0.83 → 0.0.84

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

@@ -1,712 +0,0 @@
-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<
-    typeof 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)} />
-      })}
-    </>
-  )
-}