@shopify/shop-minis-cli 0.0.35

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

@@ -0,0 +1,215 @@
+import {
+  Box,
+  CurrencyCode,
+  ProductLink,
+  ProductLinkProps,
+  Text,
+  useTheme,
+} from '@shopify/shop-minis-platform-sdk'
+import {SafeAreaView} from 'react-native'
+
+import {Header} from '../components/Header'
+
+const FIXTURE: ProductLinkProps['product'] = {
+  __typename: 'Product',
+  id: 'gid://shopify/Product/7982547763222',
+  title: 'The Hero Snowboard',
+  featuredImage: {
+    __typename: 'Image',
+    id: 'gid://shopify/ProductImage/39774118445078',
+    altText: null,
+    url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
+  },
+  variants: {
+    __typename: 'ProductVariantConnection',
+    nodes: [
+      {
+        __typename: 'ProductVariant',
+        id: 'gid://shopify/ProductVariant/43695288975382',
+        title: 'Default Title',
+        price: {
+          __typename: 'Money',
+          amount: '605.95',
+          currencyCode: CurrencyCode.USD,
+        },
+        image: {
+          __typename: 'Image',
+          id: 'gid://shopify/ProductImage/39774118445078',
+          altText: null,
+          url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
+        },
+      },
+    ],
+  },
+}
+
+const FIXTURE_WITH_DISCOUNT: ProductLinkProps['product'] = {
+  __typename: 'Product',
+  id: 'gid://shopify/Product/7982547763222',
+  title: 'The Hero Snowboard',
+  featuredImage: {
+    __typename: 'Image',
+    id: 'gid://shopify/ProductImage/39774118445078',
+    altText: null,
+    url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
+  },
+  variants: {
+    __typename: 'ProductVariantConnection',
+    nodes: [
+      {
+        __typename: 'ProductVariant',
+        id: 'gid://shopify/ProductVariant/43695288975382',
+        title: 'Default Title',
+        compareAtPrice: {
+          __typename: 'Money',
+          amount: '605.95',
+          currencyCode: CurrencyCode.USD,
+        },
+        price: {
+          __typename: 'Money',
+          amount: '555.95',
+          currencyCode: CurrencyCode.USD,
+        },
+        image: {
+          __typename: 'Image',
+          id: 'gid://shopify/ProductImage/39774118445078',
+          altText: null,
+          url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
+        },
+      },
+    ],
+  },
+}
+
+const FIXTURE_WITH_DISCOUNT_BIG_MONEY: ProductLinkProps['product'] = {
+  __typename: 'Product',
+  id: 'gid://shopify/Product/7982547763222',
+  title: 'The Hero Snowboard',
+  featuredImage: {
+    __typename: 'Image',
+    id: 'gid://shopify/ProductImage/39774118445078',
+    altText: null,
+    url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
+  },
+  variants: {
+    __typename: 'ProductVariantConnection',
+    nodes: [
+      {
+        __typename: 'ProductVariant',
+        id: 'gid://shopify/ProductVariant/43695288975382',
+        title: 'Default Title',
+        compareAtPrice: {
+          __typename: 'Money',
+          amount: '22605.95',
+          currencyCode: CurrencyCode.USD,
+        },
+        price: {
+          __typename: 'Money',
+          amount: '12555.95',
+          currencyCode: CurrencyCode.USD,
+        },
+        image: {
+          __typename: 'Image',
+          id: 'gid://shopify/ProductImage/39774118445078',
+          altText: null,
+          url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
+        },
+      },
+    ],
+  },
+}
+
+const FIXTURE_WITH_MULTIPLE_VARIANTS: ProductLinkProps['product'] = {
+  __typename: 'Product',
+  id: 'gid://shopify/Product/7982547763222',
+  title: 'The Hero Snowboard',
+  featuredImage: {
+    __typename: 'Image',
+    id: 'gid://shopify/ProductImage/39774118445078',
+    altText: null,
+    url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
+  },
+  variants: {
+    __typename: 'ProductVariantConnection',
+    nodes: [
+      {
+        __typename: 'ProductVariant',
+        id: 'gid://shopify/ProductVariant/43695288975382',
+        title: 'Default Title',
+        price: {
+          __typename: 'Money',
+          amount: '605.95',
+          currencyCode: CurrencyCode.USD,
+        },
+        image: {
+          __typename: 'Image',
+          id: 'gid://shopify/ProductImage/39774118445078',
+          altText: null,
+          url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_52f8e304-92d9-4a36-82af-50df8fe31c69.jpg?v=1674664826',
+        },
+      },
+      {
+        __typename: 'ProductVariant',
+        id: 'gid://shopify/ProductVariant/43695281569814',
+        title: 'Default Title',
+        price: {
+          __typename: 'Money',
+          amount: '577.95',
+          currencyCode: CurrencyCode.USD,
+        },
+        image: {
+          __typename: 'Image',
+          id: 'gid://shopify/ProductImage/39774117986326',
+          altText: null,
+          url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main.jpg?v=1674664528',
+        },
+      },
+    ],
+  },
+}
+
+export const ProductLinkScreen = () => {
+  const theme = useTheme()
+  return (
+    <SafeAreaView
+      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
+    >
+      <Header />
+      <Box px="gutter">
+        <Text variant="headerBold" mb="xs">
+          ProductLink
+        </Text>
+        <Box marginBottom="m">
+          <Text variant="bodyLarge" mb="xs">
+            Default
+          </Text>
+          <ProductLink product={FIXTURE} />
+        </Box>
+
+        <Box marginBottom="m">
+          <Text variant="bodyLarge" mb="xs">
+            With discount
+          </Text>
+          <ProductLink product={FIXTURE_WITH_DISCOUNT} />
+        </Box>
+
+        <Box marginBottom="m">
+          <Text variant="bodyLarge" mb="xs">
+            With large discount
+          </Text>
+          <ProductLink product={FIXTURE_WITH_DISCOUNT_BIG_MONEY} />
+        </Box>
+
+        <Box marginBottom="m">
+          <Text variant="bodyLarge" mb="xs">
+            With variant selection
+          </Text>
+          <ProductLink
+            product={FIXTURE_WITH_MULTIPLE_VARIANTS}
+            productVariantId="gid://shopify/ProductVariant/43695281569814"
+          />
+        </Box>
+      </Box>
+    </SafeAreaView>
+  )
+}

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

@@ -0,0 +1,77 @@
+import {useCallback, useState} from 'react'
+import {SafeAreaView} from 'react-native'
+import {
+  Box,
+  Text,
+  ProgressIndicators,
+  Button,
+  useTheme,
+} from '@shopify/shop-minis-platform-sdk'
+import {runOnJS, useSharedValue, withTiming} from 'react-native-reanimated'
+
+import {Header} from '../components/Header'
+
+const PROGRESS_INDICATORS = 10
+
+export const ProgressIndicatorScreen = () => {
+  const theme = useTheme()
+  const currentActiveAnimatedIndicator = useSharedValue(0)
+  const progress = useSharedValue(0)
+
+  const [currentActive, setCurrentActive] = useState(
+    currentActiveAnimatedIndicator.value
+  )
+
+  const startProgressIndicator = useCallback(() => {
+    progress.value = withTiming(1, {duration: 5000}, finished => {
+      if (
+        finished &&
+        currentActiveAnimatedIndicator.value < PROGRESS_INDICATORS - 1
+      ) {
+        currentActiveAnimatedIndicator.value += 1
+        progress.value = 0
+        runOnJS(setCurrentActive)(currentActiveAnimatedIndicator.value)
+
+        runOnJS(startProgressIndicator)()
+      }
+    })
+  }, [progress, currentActiveAnimatedIndicator])
+
+  const reset = useCallback(() => {
+    currentActiveAnimatedIndicator.value = 0
+    progress.value = 0
+    setCurrentActive(0)
+  }, [currentActiveAnimatedIndicator, progress])
+
+  return (
+    <SafeAreaView
+      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
+    >
+      <Header />
+      <Box flex={1} px="gutter">
+        <Text variant="headerBold">ProgressIndicators</Text>
+
+        <Box
+          my="s"
+          padding="m"
+          backgroundColor="backgrounds-overlay"
+          borderRadius={16}
+          flex={1}
+        >
+          <ProgressIndicators
+            numberOfIndicators={PROGRESS_INDICATORS}
+            currentStep={currentActive}
+            progress={progress}
+            width="100%"
+          />
+          <Box marginTop="s">
+            <Button onPress={startProgressIndicator} text="Start" />
+          </Box>
+          <Box marginTop="s">
+            <Button onPress={reset} text="Stop and reset" variant="secondary" />
+          </Box>
+        </Box>
+      </Box>
+    </SafeAreaView>
+  )
+}

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

@@ -0,0 +1,76 @@
+import {useState} from 'react'
+import {SafeAreaView, ScrollView} from 'react-native'
+import {
+  Box,
+  QuantityPicker,
+  QuantityPickerProps,
+  Text,
+} from '@shopify/shop-minis-platform-sdk'
+
+import {Header} from '../components/Header'
+
+export const QuantityPickerScreen = () => {
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <ScrollView style={{flex: 1}}>
+        <Header />
+        <Box px="gutter">
+          <Text variant="heroBold">QuantityPicker</Text>
+
+          <Box paddingTop="m">
+            <Text>No limits</Text>
+          </Box>
+
+          <Box paddingTop="xs">
+            <StatefulQuantityPicker quantity={1} disabled={false} />
+          </Box>
+
+          <Box paddingTop="m">
+            <Text>Maximum 10 items</Text>
+          </Box>
+
+          <Box paddingTop="xs">
+            <StatefulQuantityPicker
+              quantity={1}
+              maxQuantity={10}
+              disabled={false}
+            />
+          </Box>
+
+          <Box paddingTop="m">
+            <Text>Disabled</Text>
+          </Box>
+
+          <Box paddingTop="xs">
+            <StatefulQuantityPicker quantity={5} disabled />
+          </Box>
+
+          <Box paddingTop="m">
+            <Text>With Label</Text>
+          </Box>
+
+          <Box paddingTop="xs">
+            <StatefulQuantityPicker label="Quantity" quantity={5} />
+          </Box>
+        </Box>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}
+
+type StatefulQuantityPickerProps = Omit<QuantityPickerProps, 'onQuantityChange'>
+
+function StatefulQuantityPicker({
+  quantity: initialQuantity,
+  ...props
+}: StatefulQuantityPickerProps) {
+  const [quantity, setQuantity] = useState<number>(initialQuantity)
+
+  return (
+    <QuantityPicker
+      {...props}
+      quantity={quantity}
+      onQuantityChange={setQuantity}
+    />
+  )
+}

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

@@ -0,0 +1,63 @@
+import {SafeAreaView, ScrollView} from 'react-native'
+import {Box, Spinner, Text, useTheme} from '@shopify/shop-minis-platform-sdk'
+
+import {Header} from '../components/Header'
+
+export const SpinnerScreen = () => {
+  const theme = useTheme()
+  return (
+    <SafeAreaView
+      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
+    >
+      <ScrollView style={{flex: 1}}>
+        <Header />
+        <Box px="gutter">
+          <Text variant="headerBold" mb="xs">
+            Spinner
+          </Text>
+        </Box>
+        <Box px="gutter" py="m">
+          <Text>Large (default)</Text>
+          <Box
+            flex={1}
+            justifyContent="center"
+            alignItems="center"
+            px="xs"
+            py="m"
+            mt="s"
+          >
+            <Spinner />
+          </Box>
+        </Box>
+        <Box px="gutter" py="m">
+          <Text>Small</Text>
+          <Box
+            flex={1}
+            justifyContent="center"
+            alignItems="center"
+            px="xs"
+            py="m"
+            mt="s"
+          >
+            <Spinner size="small" />
+          </Box>
+        </Box>
+        <Box px="gutter" py="m">
+          <Text>For dark backgrounds</Text>
+          <Box
+            flex={1}
+            justifyContent="center"
+            alignItems="center"
+            px="xs"
+            py="m"
+            mt="s"
+            backgroundColor="foregrounds-contrasting-inverted"
+            borderRadius={16}
+          >
+            <Spinner dark />
+          </Box>
+        </Box>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}