@shopify/shop-minis-cli 0.0.172 → 0.0.173

package/templates/__template_getting_started/src/screens/NativeFeaturesScreen.tsx

@@ -1,137 +0,0 @@
-import {useState} from 'react'
-import {ScrollView, TouchableOpacity} from 'react-native'
-import {useNavigation} from '@react-navigation/native'
-import {NativeStackNavigationProp} from '@react-navigation/native-stack'
-import ImagePicker from 'react-native-image-crop-picker'
-import Share from 'react-native-share'
-import {
-  Box,
-  SafeAreaView,
-  Text,
-  useTheme,
-  Button,
-  Icon,
-  useMinisDimensions,
-  Image,
-  Divider,
-} from '@shopify/shop-minis-platform-sdk'
-
-import {RootStackParamList} from '../types/screens'
-
-export function NativeFeaturesScreen() {
-  const theme = useTheme()
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>()
-  const {height, width} = useMinisDimensions()
-
-  const [imageUrl, setImageUrl] = useState<string>()
-
-  return (
-    <SafeAreaView
-      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
-    >
-      <ScrollView>
-        <Box
-          flex={1}
-          paddingHorizontal="gutter"
-          backgroundColor="backgrounds-regular"
-        >
-          <Box>
-            <TouchableOpacity
-              onPress={() => navigation.goBack()}
-              accessibilityLabel="Navigate back"
-            >
-              <Box marginTop="xs">
-                <Icon name="arrow-left" />
-              </Box>
-            </TouchableOpacity>
-          </Box>
-          <Text variant="heroBold" marginBottom="s" marginTop="xs">
-            Unlock Native Capabilities
-          </Text>
-          <Text variant="subtitle" marginBottom="s">
-            Let&apos;s explore the native capabilities your Shop Mini can
-            access.
-          </Text>
-          <Box>
-            <Button
-              text="Camera access"
-              onPress={async () => {
-                await ImagePicker.openCamera({})
-                  .then(image => {
-                    setImageUrl(image.path)
-                  })
-                  .catch(error => {
-                    console.log(error)
-                  })
-              }}
-            />
-            <Text variant="bodySmall" marginTop="xs">
-              Run this Mini on a real device to access the camera.
-            </Text>
-          </Box>
-          <Box marginVertical="s">
-            <Button
-              text="Gallery access"
-              variant="secondary"
-              onPress={async () => {
-                await ImagePicker.openPicker({})
-                  .then(image => {
-                    setImageUrl(image.path)
-                  })
-                  .catch(error => {
-                    console.log(error)
-                  })
-              }}
-            />
-          </Box>
-          {imageUrl ? (
-            <Box marginBottom="s">
-              <Box
-                style={{
-                  width: 100,
-                  height: 100,
-                  borderRadius: 10,
-                  overflow: 'hidden',
-                }}
-              >
-                <Image
-                  source={{uri: imageUrl}}
-                  style={{width: 100, height: 100}}
-                />
-              </Box>
-            </Box>
-          ) : null}
-          <Box>
-            <Button
-              text="Share sheet"
-              variant="tertiary"
-              onPress={async () => {
-                await Share.open({
-                  url: 'https://shop.app/minis',
-                  title: 'title',
-                }).catch(error => {
-                  console.log(error)
-                })
-              }}
-            />
-          </Box>
-          <Divider marginVertical="s" />
-          <Box>
-            <Text variant="subtitle" marginBottom="s">
-              Use some of our built-in APIs
-            </Text>
-            <Text>Screen height: {height}</Text>
-            <Text>Screen width: {width}</Text>
-          </Box>
-          <Divider marginVertical="s" />
-          <Text marginBottom="s">
-            We look forward to seeing what you build! Check out the
-            documentation at
-          </Text>
-          <Text>https://shop.app/minis</Text>
-        </Box>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}

package/templates/__template_getting_started/src/types/screens.ts

@@ -1,5 +0,0 @@
-import {ParamListBase} from '@react-navigation/native'
-
-export interface RootStackParamList extends ParamListBase {
-  'GettingStarted.Home': undefined
-}

package/templates/__template_shoppable_posts/src/App.tsx

@@ -1,42 +0,0 @@
-import {useMemo} from 'react'
-import {StatusBar} from 'react-native'
-import {
-  ShoppablePosts,
-  useMinisParams,
-  SafeAreaView,
-  Box,
-  shoppablePostsFixture,
-} from '@shopify/shop-minis-platform-sdk'
-
-/**
- * A stub type to get you started. Remove this in favor of the type of your extension input query data moving forward.
- */
-interface MyExtensionDataType {
-  shop?: {
-    id: string
-  }
-}
-
-export function App() {
-  const {extensionData} = useMinisParams<MyExtensionDataType>()
-  const shopId = extensionData?.shop?.id
-
-  const shoppablePosts = useMemo(() => {
-    // Format your data in to the shape expected by `<ShoppablePosts />`
-    // return getShoppablePostsFromExtensionData(extensionData)
-    return shoppablePostsFixture
-  }, [])
-
-  if (!shopId) {
-    throw new Error('Shop not found')
-  }
-
-  return (
-    <Box backgroundColor="foregrounds-contrasting-inverted" flex={1}>
-      <StatusBar barStyle="light-content" />
-      <SafeAreaView style={{flex: 1}}>
-        <ShoppablePosts initialItems={shoppablePosts} shopId={shopId} />
-      </SafeAreaView>
-    </Box>
-  )
-}

package/templates/__template_shoppable_posts/src/index.tsx

@@ -1,9 +0,0 @@
-import {MiniAppConfig} from '@shopify/shop-minis-platform-sdk'
-
-import {App} from './App'
-
-const config: MiniAppConfig = {
-  ViewerRoot: App,
-}
-
-export default config

package/templates/__template_shoppable_videos/src/App.tsx

@@ -1,39 +0,0 @@
-import {useMemo} from 'react'
-import {StatusBar} from 'react-native'
-import {
-  ShoppableVideos,
-  useMinisParams,
-  Box,
-  shoppableVideosFixture,
-} from '@shopify/shop-minis-platform-sdk'
-
-/**
- * A stub type to get you started. Remove this in favor of the type of your extension input query data moving forward.
- */
-interface MyExtensionDataType {
-  shop?: {
-    id: string
-  }
-}
-
-export function App() {
-  const {extensionData} = useMinisParams<MyExtensionDataType>()
-  const shopId = extensionData?.shop?.id
-
-  const shoppableVideos = useMemo(() => {
-    // Format your data in to the shape expected by `<ShoppableVideos />`
-    // return getShoppableVideosFromExtensionData(extensionData)
-    return shoppableVideosFixture
-  }, [])
-
-  if (!shopId) {
-    throw new Error('Shop not found')
-  }
-
-  return (
-    <Box backgroundColor="foregrounds-contrasting-inverted" flex={1}>
-      <StatusBar barStyle="light-content" />
-      <ShoppableVideos items={shoppableVideos} shopId={shopId} />
-    </Box>
-  )
-}

package/templates/__template_shoppable_videos/src/index.tsx

@@ -1,9 +0,0 @@
-import {MiniAppConfig} from '@shopify/shop-minis-platform-sdk'
-
-import {App} from './App'
-
-const config: MiniAppConfig = {
-  ViewerRoot: App,
-}
-
-export default config

package/templates/extensions/components/__template_blank/render.tsx

@@ -1,18 +0,0 @@
-import {Button} from '@shopify/shop-minis-ui-extensions'
-
-import type {__QUERY_NAME__QueryData} from './input.graphql'
-
-export function Render({
-  extensionData,
-}: {
-  extensionData: __QUERY_NAME__QueryData | null
-}) {
-  return (
-    <Button
-      text="My extension"
-      onPress={() => {
-        __EXAMPLE_QUERY_DATA_USE__
-      }}
-    />
-  )
-}

package/templates/extensions/components/__template_bundle-collection/render.tsx

@@ -1,31 +0,0 @@
-import {BundleCollection} from '@shopify/shop-minis-ui-extensions'
-import {useExtensionShopActions} from '@shopify/shop-minis-platform-sdk/actions'
-
-import type {__QUERY_NAME__QueryData} from './input.graphql'
-import seedData from './seed'
-
-export function Render({
-  extensionData,
-}: {
-  extensionData: __QUERY_NAME__QueryData | null
-}) {
-  const {openMiniViewer} = useExtensionShopActions()
-
-  // Here we are using seed data to populate the initial state of the bundle collection.
-  // You can replace this with the actual data from `extensionData`
-  __EXAMPLE_QUERY_DATA_USE__
-  const {bundles: initialBundles, title} = seedData
-
-  const bundles = initialBundles.map(initialBundle => {
-    return {
-      ...initialBundle,
-      onActionButtonPress: () => {
-        openMiniViewer(initialBundle)
-      },
-    }
-  })
-
-  if (!bundles) return null
-
-  return <BundleCollection title={title} bundles={bundles} />
-}

package/templates/extensions/components/__template_bundle-collection/seed.ts

@@ -1,26 +0,0 @@
-const DEMO_IMAGE_URL =
-  'https://cdn.shopify.com/s/files/1/1232/1472/products/StudioRender_-_Lovelace_Black_620x.jpg?v=1511325136'
-const data = {
-  bundles: [
-    {
-      title: 'Mix and match bundle',
-      subtitle: 'Add a t-shirt and save 25%',
-      badgeText: 'Save 25%',
-      imageUrls: [
-        DEMO_IMAGE_URL,
-        DEMO_IMAGE_URL,
-        DEMO_IMAGE_URL,
-        DEMO_IMAGE_URL,
-      ],
-      actionButtonText: 'Add to bundle',
-    },
-    {
-      title: 'Frequently bought together',
-      imageUrls: [DEMO_IMAGE_URL, DEMO_IMAGE_URL],
-      actionButtonText: 'Add to bundle',
-    },
-  ],
-  title: 'Mix and Match',
-}
-
-export default data

package/templates/extensions/components/__template_bundle-selector/render.tsx

@@ -1,51 +0,0 @@
-import {useEffect, useState} from 'react'
-import {
-  BundleSelector,
-  BundleSelectorItem,
-} from '@shopify/shop-minis-ui-extensions'
-import {useExtensionShopActions} from '@shopify/shop-minis-platform-sdk/actions'
-
-import type {__QUERY_NAME__QueryData} from './input.graphql'
-import seedData from './seed'
-
-export function Render({
-  extensionData,
-}: {
-  extensionData: __QUERY_NAME__QueryData | null
-}) {
-  // Here we are using seed data to populate the initial state of the bundle selector.
-  // You can replace this with the actual data from `extensionData`
-  __EXAMPLE_QUERY_DATA_USE__
-  const initialBundleSelectorItems: BundleSelectorItem[] = seedData
-  const [bundleSelectorItems, setBundleSelectorItems] = useState(
-    initialBundleSelectorItems
-  )
-
-  const {updateLineItemAttributes} = useExtensionShopActions()
-
-  useEffect(() => {
-    if (!bundleSelectorItems) return
-
-    const lineItemAttributes = bundleSelectorItems.map(
-      item => item.options.find(option => option.selected)?.value
-    )
-
-    updateLineItemAttributes({
-      lineItemAttributes: [
-        {
-          key: '_component_reference',
-          value: JSON.stringify(lineItemAttributes),
-        },
-      ],
-    })
-  }, [updateLineItemAttributes, bundleSelectorItems])
-
-  if (!bundleSelectorItems) return null
-
-  return (
-    <BundleSelector
-      items={bundleSelectorItems}
-      onChange={setBundleSelectorItems}
-    />
-  )
-}

package/templates/extensions/components/__template_bundle-selector/seed.ts

@@ -1,72 +0,0 @@
-import {BundleSelectorItem} from '@shopify/shop-minis-ui-extensions'
-
-const seedData: BundleSelectorItem[] = [
-  {
-    title: 'Main Snowboard',
-    options: [
-      {
-        title: 'Mr. Huebert Hydroxy Snowboard',
-        value: 'gid://shopify/ProductVariant/44887116906751',
-        imageUrl:
-          'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main_9129b69a-0c7b-4f66-b6cf-c4222f18028a.jpg?v=1671634025',
-        availability: 'Available',
-        selected: false,
-      },
-      {
-        title: 'The H2 Snowboard',
-        value: 'gid://shopify/ProductVariant/43698709922047',
-        imageUrl:
-          'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main_0a40b01b-5021-48c1-80d1-aa8ab4876d3d.jpg?v=1671634609',
-        availability: 'Available',
-        selected: false,
-      },
-      {
-        title: 'The Hosted Snowboard',
-        value: 'gid://shopify/ProductVariant/43698640978175',
-        imageUrl:
-          'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main_b9e0da7f-db89-4d41-83f0-7f417b02831d.jpg?v=1671632927',
-        availability: 'Available',
-        selected: true,
-      },
-      {
-        title: 'The Hydrogen Snowboard',
-        value: 'gid://shopify/ProductVariant/43698681938175',
-        imageUrl:
-          'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main.jpg?v=1671633869',
-        availability: 'Available',
-        selected: false,
-      },
-    ],
-  },
-  {
-    title: 'Second snowboard',
-    options: [
-      {
-        title: 'The Oxygen Snowboard',
-        value: 'gid://shopify/ProductVariant/43698704318719',
-        imageUrl:
-          'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main_d624f226-0a89-4fe1-b333-0d1548b43c06.jpg?v=1671634432',
-        availability: 'Available',
-        selected: false,
-      },
-      {
-        title: 'The S-Series Snowboard',
-        value: 'gid://shopify/ProductVariant/43698713526527',
-        imageUrl:
-          'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main_589fc064-24a2-4236-9eaf-13b2bd35d21d.jpg?v=1671634723',
-        availability: 'Available',
-        selected: true,
-      },
-      {
-        title: 'The Toggle Snowboard',
-        value: 'gid://shopify/ProductVariant/43698707857663',
-        imageUrl:
-          'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main_f44a9605-cd62-464d-b095-d45cdaa0d0d7.jpg?v=1671634521',
-        availability: 'Available',
-        selected: false,
-      },
-    ],
-  },
-]
-
-export default seedData

package/templates/extensions/components/__template_default-card/render.tsx

@@ -1,24 +0,0 @@
-import {DefaultCard} from '@shopify/shop-minis-ui-extensions'
-
-import type {__QUERY_NAME__QueryData} from './input.graphql'
-import seedData from './seed'
-
-export function Render({
-  extensionData,
-}: {
-  extensionData: __QUERY_NAME__QueryData | null
-}) {
-  // Here we are using seed data to populate the initial state of the default card.
-  // You can replace this with the actual data from `extensionData`
-  __EXAMPLE_QUERY_DATA_USE__
-  const {actionText, image, text, title} = seedData
-
-  return (
-    <DefaultCard
-      actionText={actionText}
-      image={image}
-      text={text}
-      title={title}
-    />
-  )
-}

package/templates/extensions/components/__template_default-card/seed.ts

@@ -1,10 +0,0 @@
-const data = {
-  title: 'Default Card Extension',
-  text: 'This is a default card extension. It can be used for different purposes.',
-  actionText: 'Action text',
-  image: {
-    url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_9129b69a-0c7b-4f66-b6cf-c4222f18028a.jpg?v=1674664579',
-  },
-}
-
-export default data

package/templates/extensions/components/__template_image-collection/render.tsx

@@ -1,17 +0,0 @@
-import {ImageCollection} from '@shopify/shop-minis-ui-extensions'
-
-import type {__QUERY_NAME__QueryData} from './input.graphql'
-import seedData from './seed'
-
-export function Render({
-  extensionData,
-}: {
-  extensionData: __QUERY_NAME__QueryData | null
-}) {
-  // Here we are using seed data to populate the initial state of the image collection.
-  // You can replace this with the actual data from `extensionData`
-  __EXAMPLE_QUERY_DATA_USE__
-  const {title, items} = seedData
-
-  return <ImageCollection title={title} items={items} layout="GRID" />
-}

package/templates/extensions/components/__template_image-collection/seed.ts

@@ -1,70 +0,0 @@
-const seedData = {
-  title: 'Image Collection Extension',
-  items: [
-    {
-      image: {
-        url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/files/preview_images/197d24d529fd4d5685d88b8e7a0e99b3.thumbnail.0000000000.jpg',
-      },
-      relatedProducts: [],
-      externalId: '1',
-    },
-    {
-      image: {
-        url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/files/preview_images/60d478149138421e94b2a50ba2cac7f3.thumbnail.0000000000.jpg',
-      },
-      relatedProducts: [],
-      externalId: '2',
-    },
-    {
-      image: {
-        url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/files/preview_images/5dfdf5b856cc4e52a92880ab43412db5.thumbnail.0000000000.jpg',
-      },
-      relatedProducts: [],
-      externalId: '3',
-    },
-    {
-      externalId: '4',
-      image: {
-        url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/files/preview_images/7a92d6b2112b497fae2bca267ba6dfb1.thumbnail.0000000000.jpg',
-      },
-      relatedProducts: [],
-    },
-    {
-      externalId: '5',
-      image: {
-        url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/files/preview_images/197d24d529fd4d5685d88b8e7a0e99b3.thumbnail.0000000000.jpg',
-      },
-      relatedProducts: [],
-    },
-    {
-      externalId: '6',
-      image: {
-        url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/files/preview_images/197d24d529fd4d5685d88b8e7a0e99b3.thumbnail.0000000000.jpg',
-      },
-      relatedProducts: [],
-    },
-    {
-      externalId: '7',
-      image: {
-        url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/files/preview_images/197d24d529fd4d5685d88b8e7a0e99b3.thumbnail.0000000000.jpg',
-      },
-      relatedProducts: [],
-    },
-    {
-      externalId: '8',
-      image: {
-        url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/files/preview_images/197d24d529fd4d5685d88b8e7a0e99b3.thumbnail.0000000000.jpg',
-      },
-      relatedProducts: [],
-    },
-    {
-      externalId: '9',
-      image: {
-        url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/files/preview_images/197d24d529fd4d5685d88b8e7a0e99b3.thumbnail.0000000000.jpg',
-      },
-      relatedProducts: [],
-    },
-  ],
-}
-
-export default seedData

package/templates/extensions/components/__template_link/render.tsx

@@ -1,17 +0,0 @@
-import {Link} from '@shopify/shop-minis-ui-extensions'
-
-import type {__QUERY_NAME__QueryData} from './input.graphql'
-import seedData from './seed'
-
-export function Render({
-  extensionData,
-}: {
-  extensionData: __QUERY_NAME__QueryData | null
-}) {
-  // Here we are using seed data to populate the initial state of the link.
-  // You can replace this with the actual data from `extensionData`
-  __EXAMPLE_QUERY_DATA_USE__
-  const {actionText} = seedData
-
-  return <Link actionText={actionText} />
-}

package/templates/extensions/components/__template_link/seed.ts

@@ -1,5 +0,0 @@
-const data = {
-  actionText: 'Action text',
-}
-
-export default data

package/templates/extensions/components/__template_product-offer-card/render.tsx

@@ -1,17 +0,0 @@
-import {ProductOfferCard} from '@shopify/shop-minis-ui-extensions'
-
-import type {__QUERY_NAME__QueryData} from './input.graphql'
-import seedData from './seed'
-
-export function Render({
-  extensionData,
-}: {
-  extensionData: __QUERY_NAME__QueryData | null
-}) {
-  // Here we are using seed data to populate the initial state of the product offer card.
-  // You can replace this with the actual data from `extensionData`
-  __EXAMPLE_QUERY_DATA_USE__
-  const {product, offer, order} = seedData
-
-  return <ProductOfferCard product={product} offer={offer} order={order} />
-}

package/templates/extensions/components/__template_product-offer-card/seed.ts

@@ -1,44 +0,0 @@
-const MINIS_TEST_STORE_DATA = {
-  id: 'gid://shopify/Shop/62104633599',
-  image: null,
-  name: 'Shop Minis Test Store',
-}
-
-const data = {
-  offer: {
-    discountedPrice: {
-      amount: '405.95',
-      currencyCode: 'USD',
-    },
-    originalPrice: {
-      amount: '605.95',
-      currencyCode: 'USD',
-    },
-    title: 'Widget! Check this offer!',
-    image: {
-      url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_9129b69a-0c7b-4f66-b6cf-c4222f18028a.jpg?v=1674664579',
-    },
-    variantId: 'gid://shopify/ProductVariant/43695240413206',
-    expiresAt: new Date('2099-03-22T23:59:59.000Z'),
-  },
-  order: {
-    id: 'gid://shopify/Order/123',
-  },
-  product: {
-    id: 'gid://shopify/Product/7982542651414',
-    shop: MINIS_TEST_STORE_DATA,
-    title: 'Mr. Huebert Hydroxy Snowboard',
-    image: {
-      altText: null,
-      url: 'https://cdn.shopify.com/s/files/1/0688/2233/5510/products/Main_9129b69a-0c7b-4f66-b6cf-c4222f18028a.jpg?v=1674664579',
-    },
-    price: {
-      amount: '605.95',
-      currencyCode: 'USD',
-    },
-    reviewsAverageRating: null,
-    reviewsCount: 0,
-  },
-}
-
-export default data