@shopify/shop-minis-cli 0.0.35

package/templates/__template_snowboardz/src/components/SkillLevelPicker.tsx

@@ -0,0 +1,86 @@
+import {Box, Button, Text, useTheme} from '@shopify/shop-minis-platform-sdk'
+import {ScrollView} from 'react-native-gesture-handler'
+
+import {SkillLevel} from '../types'
+
+import {SkillLevelIcon} from './SkillLevelIcon'
+
+const skillLevels: SkillLevel[] = ['Beginner', 'Intermediate', 'Advanced']
+
+interface SkillLevelButtonProps {
+  onPress: () => void
+  text: string
+  selected?: boolean
+}
+const SkillLevelButton = ({onPress, text, selected}: SkillLevelButtonProps) => {
+  const theme = useTheme()
+
+  const hasIcon = text !== 'All'
+
+  if (!hasIcon) {
+    return (
+      <Box>
+        <Button
+          size="m"
+          variant={selected ? 'primary' : 'tertiary'}
+          style={{
+            alignSelf: 'baseline',
+            marginRight: theme.spacing.xs,
+            paddingHorizontal: theme.spacing.s,
+          }}
+          text={text}
+          onPress={onPress}
+        />
+      </Box>
+    )
+  }
+  return (
+    <Box justifyContent="center">
+      <Button
+        size="m"
+        variant={selected ? 'primary' : 'tertiary'}
+        style={{
+          alignSelf: 'baseline',
+          marginRight: theme.spacing.xs,
+          paddingRight: theme.spacing.s,
+          paddingLeft: theme.spacing.xl,
+        }}
+        text={text}
+        onPress={onPress}
+      />
+      <SkillLevelIcon level={text as SkillLevel} />
+    </Box>
+  )
+}
+
+interface SkillLevelPickerProps {
+  handleSelectedSkillLevel: (
+    handleSelectedSkillLevel: SkillLevel | null
+  ) => void
+  selectedSkillLevel: SkillLevel | null
+}
+export const SkillLevelPicker = ({
+  handleSelectedSkillLevel,
+  selectedSkillLevel,
+}: SkillLevelPickerProps) => {
+  return (
+    <>
+      <Text marginBottom="xs">Select skill level</Text>
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <SkillLevelButton
+          selected={!selectedSkillLevel}
+          text="All"
+          onPress={() => handleSelectedSkillLevel(null)}
+        />
+        {skillLevels.map(skillLevel => (
+          <SkillLevelButton
+            selected={selectedSkillLevel === skillLevel}
+            key={skillLevel}
+            text={skillLevel}
+            onPress={() => handleSelectedSkillLevel(skillLevel)}
+          />
+        ))}
+      </ScrollView>
+    </>
+  )
+}

package/templates/__template_snowboardz/src/data/TestProducts.graphql

@@ -0,0 +1,34 @@
+query __MINI_APP_HANDLE_PASCAL_CASE__TestProducts($shopId: ID!, $productIds: [ID!]!) {
+  shop(id: $shopId) {
+    id
+    name
+    productsByIds(ids: $productIds) {
+      id
+      title
+      tags
+      featuredImage {
+        id
+        altText
+        url
+      }
+      defaultVariant {
+        id
+        title
+        isFavorited
+        compareAtPrice {
+          amount
+          currencyCode
+        }
+        price {
+          amount
+          currencyCode
+        }
+        image {
+          id
+          altText
+          url
+        }
+      }
+    }
+  }
+}

package/templates/__template_snowboardz/src/data/TestProducts.graphql.d.ts

@@ -0,0 +1,108 @@
+import { DocumentNode } from "graphql-typed";
+import { URL, Decimal, CurrencyCode } from "../node_modules/@shopify/shop-minis-platform-sdk/src/api/types";
+export namespace __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData {
+  export interface ShopProductsByIdsFeaturedImage {
+    __typename?: "Image" | null;
+    id?: string | null;
+    altText?: string | null;
+    url?: URL | null;
+  }
+  export interface ShopProductsByIdsDefaultVariantCompareAtPrice {
+    __typename?: "Money" | null;
+    amount?: Decimal | null;
+    currencyCode?: CurrencyCode | null;
+  }
+  export interface ShopProductsByIdsDefaultVariantPrice {
+    __typename?: "Money" | null;
+    amount?: Decimal | null;
+    currencyCode?: CurrencyCode | null;
+  }
+  export interface ShopProductsByIdsDefaultVariantImage {
+    __typename?: "Image" | null;
+    id?: string | null;
+    altText?: string | null;
+    url?: URL | null;
+  }
+  export interface ShopProductsByIdsDefaultVariant {
+    __typename?: "ProductVariant" | null;
+    id?: string | null;
+    title?: string | null;
+    isFavorited?: boolean | null;
+    compareAtPrice?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIdsDefaultVariantCompareAtPrice | null;
+    price?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIdsDefaultVariantPrice | null;
+    image?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIdsDefaultVariantImage | null;
+  }
+  export interface ShopProductsByIds {
+    __typename?: "Product" | null;
+    id?: string | null;
+    title?: string | null;
+    tags?: (string | null)[] | null;
+    featuredImage?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIdsFeaturedImage | null;
+    defaultVariant?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIdsDefaultVariant | null;
+  }
+  export interface Shop {
+    __typename?: "Shop" | null;
+    id?: string | null;
+    name?: string | null;
+    productsByIds?: (__MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData.ShopProductsByIds | null)[] | null;
+  }
+}
+export interface __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData {
+  shop?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData.Shop | null;
+}
+export namespace __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData {
+  export interface Variables {
+    shopId: string;
+    productIds: string[];
+  }
+  export interface ShopProductsByIdsFeaturedImage {
+    __typename: "Image";
+    id?: string | null;
+    altText?: string | null;
+    url: URL;
+  }
+  export interface ShopProductsByIdsDefaultVariantCompareAtPrice {
+    __typename: "Money";
+    amount: Decimal;
+    currencyCode: CurrencyCode;
+  }
+  export interface ShopProductsByIdsDefaultVariantPrice {
+    __typename: "Money";
+    amount: Decimal;
+    currencyCode: CurrencyCode;
+  }
+  export interface ShopProductsByIdsDefaultVariantImage {
+    __typename: "Image";
+    id?: string | null;
+    altText?: string | null;
+    url: URL;
+  }
+  export interface ShopProductsByIdsDefaultVariant {
+    __typename: "ProductVariant";
+    id: string;
+    title: string;
+    isFavorited: boolean;
+    compareAtPrice?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.ShopProductsByIdsDefaultVariantCompareAtPrice | null;
+    price: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.ShopProductsByIdsDefaultVariantPrice;
+    image?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.ShopProductsByIdsDefaultVariantImage | null;
+  }
+  export interface ShopProductsByIds {
+    __typename: "Product";
+    id: string;
+    title: string;
+    tags: string[];
+    featuredImage?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.ShopProductsByIdsFeaturedImage | null;
+    defaultVariant: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.ShopProductsByIdsDefaultVariant;
+  }
+  export interface Shop {
+    __typename: "Shop";
+    id: string;
+    name: string;
+    productsByIds: (__MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.ShopProductsByIds | null)[];
+  }
+}
+export interface __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData {
+  shop?: __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.Shop | null;
+}
+declare const document: DocumentNode<__MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData, __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.Variables, __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryPartialData>;
+export default document;

package/templates/__template_snowboardz/src/hooks/useSnowboardData.tsx

@@ -0,0 +1,37 @@
+import {useMinisQuery} from '@shopify/shop-minis-platform-sdk'
+
+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',
+]
+
+export const useSnowboardData = () => {
+  const {loading, data, error} = useMinisQuery(TestProductsQuery, {
+    variables: {
+      shopId: SHOP_GID,
+      productIds: PRODUCT_GIDS,
+    },
+    fetchPolicy: 'cache-and-network',
+  })
+
+  const snowboards = data?.shop?.productsByIds ?? []
+
+  return {
+    snowboards,
+    loading,
+    error,
+  }
+}

package/templates/__template_snowboardz/src/index.tsx

@@ -0,0 +1,9 @@
+import {theme as defaultTheme, Theme} from '@shopify/shop-minis-platform-sdk'
+
+import {__MINI_APP_HANDLE_PASCAL_CASE__Navigator} from './routes'
+
+export const theme: Theme = {
+  ...defaultTheme,
+}
+
+export default __MINI_APP_HANDLE_PASCAL_CASE__Navigator

package/templates/__template_snowboardz/src/routes.tsx

@@ -0,0 +1,17 @@
+import {createNativeStackNavigator} from '@react-navigation/native-stack'
+
+import {HomeScreen} from './screens/HomeScreen'
+
+const Stack = createNativeStackNavigator()
+
+export const __MINI_APP_HANDLE_PASCAL_CASE__Navigator = () => {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.Home"
+        component={HomeScreen}
+        options={{title: 'Home', headerShown: false}}
+      />
+    </Stack.Navigator>
+  )
+}

package/templates/__template_snowboardz/src/screens/HomeScreen.tsx

@@ -0,0 +1,126 @@
+import {
+  Box,
+  ProductCard,
+  ProductCardGrid,
+  Spinner,
+  Text,
+  TouchableProduct,
+  useTheme,
+} from '@shopify/shop-minis-platform-sdk'
+import {useCallback, useState, useMemo} from 'react'
+import {SafeAreaView} from 'react-native'
+
+import {ColorPicker} from '../components/ColorPicker'
+import {EmptyResult} from '../components/EmptyResult'
+import {SkillLevelPicker} from '../components/SkillLevelPicker'
+import {useSnowboardData} from '../hooks/useSnowboardData'
+import {SkillLevel, SnowBoard} from '../types'
+import {getSnowboardColors, getTagForColor, getTagForSkillLevel} from '../utils'
+
+export const HomeScreen = () => {
+  const theme = useTheme()
+
+  const {snowboards, loading} = useSnowboardData()
+
+  const [selectedSkillLevel, setSelectedSkillLevel] =
+    useState<SkillLevel | null>(null)
+
+  const handleSelectedSkillLevel = useCallback(
+    (newSkillLevel: SkillLevel | null) => {
+      setSelectedSkillLevel(newSkillLevel)
+    },
+    []
+  )
+
+  const [selectedColor, setSelectedColor] = useState<string | null>(null)
+  const handleSelectedColor = useCallback((newColor: string | null) => {
+    setSelectedColor(newColor)
+  }, [])
+
+  const handleFilterReset = useCallback(() => {
+    setSelectedColor(null)
+    setSelectedSkillLevel(null)
+  }, [])
+
+  const snowBoardsToDisplay = useMemo(() => {
+    let filteredSnowboards = [...snowboards] as SnowBoard[]
+
+    if (selectedSkillLevel) {
+      filteredSnowboards = filteredSnowboards.filter(({tags}) =>
+        tags.includes(getTagForSkillLevel(selectedSkillLevel))
+      )
+    }
+
+    if (selectedColor) {
+      filteredSnowboards = filteredSnowboards.filter(({tags}) =>
+        tags.includes(getTagForColor(selectedColor))
+      )
+    }
+
+    return filteredSnowboards
+  }, [selectedColor, selectedSkillLevel, snowboards])
+
+  const listFooter = useMemo(() => {
+    if (loading) {
+      return (
+        <Box flex={1} justifyContent="center" alignItems="center">
+          <Spinner />
+        </Box>
+      )
+    }
+    if (snowBoardsToDisplay.length === 0) {
+      return (
+        <EmptyResult
+          selectedColor={selectedColor}
+          selectedSkillLevel={selectedSkillLevel}
+          handleFilterReset={handleFilterReset}
+        />
+      )
+    }
+    return null
+  }, [
+    handleFilterReset,
+    loading,
+    selectedColor,
+    selectedSkillLevel,
+    snowBoardsToDisplay.length,
+  ])
+
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <Box flex={1} backgroundColor="backgrounds-regular">
+        <ProductCardGrid
+          ListHeaderComponent={
+            <Box paddingBottom="m">
+              <Text variant="heroNormal" marginBottom="m">
+                Find your board
+              </Text>
+              <Box marginBottom="s">
+                <SkillLevelPicker
+                  handleSelectedSkillLevel={handleSelectedSkillLevel}
+                  selectedSkillLevel={selectedSkillLevel}
+                />
+              </Box>
+              <ColorPicker
+                handleSelectedColor={handleSelectedColor}
+                selectedColor={selectedColor}
+                snowboardColors={getSnowboardColors(snowboards as SnowBoard[])}
+              />
+            </Box>
+          }
+          products={snowBoardsToDisplay}
+          renderItem={({product}) => (
+            <TouchableProduct product={product} key={product.id}>
+              <ProductCard shopId="12" product={product} />
+            </TouchableProduct>
+          )}
+          contentContainerStyle={{
+            padding: theme.spacing.m,
+            marginBottom: theme.spacing.xxl,
+          }}
+          ListFooterComponent={listFooter}
+        />
+      </Box>
+    </SafeAreaView>
+  )
+}

package/templates/__template_snowboardz/src/types.ts

@@ -0,0 +1,12 @@
+// @react-navigation/native-stack requires a `type` instead of an `interface`
+
+import {__MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData} from './data/TestProducts.graphql'
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type StackParamList = {
+  '__MINI_APP_HANDLE_PASCAL_CASE__.Home': undefined
+}
+
+export type SkillLevel = 'Beginner' | 'Intermediate' | 'Advanced'
+
+export type SnowBoard = __MINI_APP_HANDLE_PASCAL_CASE__TestProductsQueryData.ShopProductsByIds

package/templates/__template_snowboardz/src/utils.ts

@@ -0,0 +1,17 @@
+import {SkillLevel, SnowBoard} from './types'
+
+export const getTagForSkillLevel = (skillLevel: SkillLevel) =>
+  `skill-level-${skillLevel.toLowerCase()}`
+
+export const getTagForColor = (color: string) => `color-${color}`
+
+const colorTagPrefix = 'color-'
+export const getSnowboardColors = (snowboards: SnowBoard[]) => {
+  const allTags = snowboards.map(({tags}) => tags).flat()
+  const allColorsTags = allTags.filter(tag => tag.startsWith(colorTagPrefix))
+  const uniqueColorTags = [...new Set(allColorsTags)]
+
+  return uniqueColorTags.map(colorTag =>
+    colorTag.substring(colorTagPrefix.length)
+  )
+}