@shopify/shop-minis-cli 0.0.0-hackathon.20250221160544

package/templates/__template_shoppable_videos/src/App.tsx

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,9 @@
+import type {__QUERY_NAME__QueryData} from './input.graphql'
+
+export function Render({
+  extensionData,
+}: {
+  extensionData: __QUERY_NAME__QueryData | null
+}) {
+  return null
+}

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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,17 @@
+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

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

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,44 @@
+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

package/templates/extensions/components/__template_survey-single-response/render.tsx

@@ -0,0 +1,26 @@
+import {SurveySingleResponse} 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 survey.
+  // You can replace this with the actual data from `extensionData`
+  __EXAMPLE_QUERY_DATA_USE__
+
+  return (
+    <SurveySingleResponse
+      choices={seedData}
+      onChoiceSelected={(index, value) =>
+        console.log('Selected:', index, value)
+      }
+      title="How did you find our store?"
+      seeMoreChoice={{label: 'Other', value: 'seeMore'}}
+      singleQuestionSurvey={false}
+    />
+  )
+}

package/templates/extensions/components/__template_survey-single-response/seed.ts

@@ -0,0 +1,22 @@
+const MINIS_TEST_STORE_DATA = {
+  id: 'gid://shopify/Shop/62104633599',
+  image: null,
+  name: 'Shop Minis Test Store',
+}
+
+const data = [
+  {label: 'Google', value: 'google'},
+  {label: 'Facebook', value: 'facebook'},
+  {label: 'Pinterest', value: 'pinterest'},
+  {label: 'Instagram', value: 'instagram'},
+  {label: 'Snapchat', value: 'snapchat'},
+  {label: 'TikTok', value: 'tikTok'},
+  {label: 'From a friend, family member or coworker', value: 'friends'},
+  {label: 'In a retail store', value: 'store'},
+  {label: 'Podcast/Radio', value: 'podcast'},
+  {label: 'Press or other article', value: 'press'},
+  {label: 'Youtube', value: 'youtube'},
+  {label: 'Other', value: 'other'},
+]
+
+export default data

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

@@ -0,0 +1,17 @@
+import {VideoCollection} 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 video collection.
+  // You can replace this with the actual data from `extensionData`
+  __EXAMPLE_QUERY_DATA_USE__
+  const {title, items} = seedData
+
+  return <VideoCollection title={title} items={items} />
+}

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

@@ -0,0 +1,37 @@
+const seedData = {
+  title: 'Video Collection Extension',
+  items: [
+    {
+      video: {
+        url: 'https://cdn.shopify.com/videos/c/o/v/197d24d529fd4d5685d88b8e7a0e99b3.mp4',
+      },
+      fallbackImage: {
+        url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main_9129b69a-0c7b-4f66-b6cf-c4222f18028a.jpg?v=1671634025',
+      },
+      relatedProducts: [],
+      externalId: '',
+    },
+    {
+      video: {
+        url: 'https://cdn.shopify.com/videos/c/o/v/5dfdf5b856cc4e52a92880ab43412db5.mp4',
+      },
+      fallbackImage: {
+        url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main_0a4e9096-021a-4c1e-8750-24b233166a12.jpg?v=1671633756',
+      },
+      relatedProducts: [],
+      externalId: '',
+    },
+    {
+      video: {
+        url: 'https://cdn.shopify.com/videos/c/o/v/60d478149138421e94b2a50ba2cac7f3.mp4',
+      },
+      fallbackImage: {
+        url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/Main_c8ff0b5d-c712-429a-be00-b29bd55cbc9d.jpg?v=1671634817',
+      },
+      relatedProducts: [],
+      externalId: '',
+    },
+  ],
+}
+
+export default seedData

package/templates/extensions/queries/__template_order-confirmation-page/input.graphql

@@ -0,0 +1,5 @@
+query __QUERY_NAME__ {
+  order {
+    id
+  }
+}

package/templates/extensions/queries/__template_order-confirmation-page/input.graphql.d.ts

@@ -0,0 +1,24 @@
+import { DocumentNode } from "graphql-typed";
+import { TypedDocumentNode } from "@graphql-typed-document-node/core";
+export namespace __QUERY_NAME__QueryPartialData {
+  export interface Order {
+    __typename?: "Order" | null;
+    id?: string | null;
+  }
+}
+export interface __QUERY_NAME__QueryPartialData {
+  order?: __QUERY_NAME__QueryPartialData.Order | null;
+}
+export namespace __QUERY_NAME__QueryData {
+  export interface Order {
+    __typename: "Order";
+    id: string;
+  }
+}
+export interface __QUERY_NAME__QueryData {
+  order?: __QUERY_NAME__QueryData.Order | null;
+}
+declare const document: DocumentNode<__QUERY_NAME__QueryData, never, __QUERY_NAME__QueryPartialData> & TypedDocumentNode<__QUERY_NAME__QueryData, {
+  [key: string]: never;
+}>;
+export default document;

package/templates/extensions/queries/__template_order-management-page/input.graphql

@@ -0,0 +1,5 @@
+query __QUERY_NAME__ {
+  order {
+    id
+  }
+}

package/templates/extensions/queries/__template_order-management-page/input.graphql.d.ts

@@ -0,0 +1,24 @@
+import { DocumentNode } from "graphql-typed";
+import { TypedDocumentNode } from "@graphql-typed-document-node/core";
+export namespace __QUERY_NAME__QueryPartialData {
+  export interface Order {
+    __typename?: "Order" | null;
+    id?: string | null;
+  }
+}
+export interface __QUERY_NAME__QueryPartialData {
+  order?: __QUERY_NAME__QueryPartialData.Order | null;
+}
+export namespace __QUERY_NAME__QueryData {
+  export interface Order {
+    __typename: "Order";
+    id: string;
+  }
+}
+export interface __QUERY_NAME__QueryData {
+  order?: __QUERY_NAME__QueryData.Order | null;
+}
+declare const document: DocumentNode<__QUERY_NAME__QueryData, never, __QUERY_NAME__QueryPartialData> & TypedDocumentNode<__QUERY_NAME__QueryData, {
+  [key: string]: never;
+}>;
+export default document;

package/templates/extensions/queries/__template_product-page/input.graphql

@@ -0,0 +1,9 @@
+query __QUERY_NAME__ {
+  product {
+    id
+    title
+  }
+  shop {
+    id
+  }
+}