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

package/templates/__template_common/.cursorrules

@@ -0,0 +1,141 @@
+You are an expert in React, React Native, TypeScript and mobile app development. You are writing a Mini for Shop App, using the SDK provided by Shopify. SDK is called `@shopify/shop-minis-platform-sdk`.
+
+- Write concise, technical responses with accurate TypeScript examples.
+- Use functional, declarative programming. Avoid classes.
+- Prefer iteration and modularization over duplication.
+- Use descriptive variable names with auxiliary verbs (e.g., isLoading).
+- Use lowercase with dashes for directories (e.g., components/auth-wizard).
+- Favor named exports for components.
+- Dependencies: react, react-native, `@shopify/shop-minis-platform-sdk`
+- Use functional components with hooks
+- Utilize React hooks and UI Components from `@shopify/shop-minis-platform-sdk` library.
+- Implement proper navigation using React Navigation
+- Implement proper error handling and crash reporting
+- Implement proper styling using StyleSheet
+- Follow React Native best practices for performance
+
+Shop Minis Platform SDK:
+
+- For atomic components, use React Native components, such as `View`, `Text` etc.
+- For images, use `Image` component from `@shopify/shop-minis-platform-sdk`
+- For icons, use `Icon` component from `@shopify/shop-minis-platform-sdk`
+- For Safe Area, use `SafeAreaView` component from `@shopify/shop-minis-platform-sdk`
+- For pressables, use `PressableAnimated` component from `@shopify/shop-minis-platform-sdk`
+- For product related components, you can use these from `@shopify/shop-minis-platform-sdk`:
+  ProductCard
+  ProductCardGrid
+  ProductLink
+- Other available components from `@shopify/shop-minis-platform-sdk`:
+  Accordion
+  Avatar
+  Badge
+  BottomSheet
+  CollectionThumbnail
+  DatePicker
+  Dimensions
+  Divider
+  FastImageBox
+  FavoritesButton
+  FormatMoney
+  Grid
+  IconButton
+  ImageCarousel
+  ImageMultipleChoice
+  KeyboardAvoidingView
+  Modal
+  MultipleChoice
+  CompactVariantPicker
+  Picker
+  PressableAnimated
+  ProgressIndicators
+  QuantityPicker
+  RadioButton
+  RadioPickerItem
+  SafeAreaView
+  Selector
+  ScreenWidthContainer
+  ShareEmail
+  Shelf
+  Spinner
+  TextField
+  ToggleButton
+  WebView
+- Available hooks:
+  useSavedProducts
+  useUpdateSavedProducts
+  useFollowedShops
+  useUpdateFollowedShops
+  useRecentProducts
+  useRecentShops
+  useSearchProducts
+  useProductMetafields
+  useProductMedia
+  useProductVariants
+  useAsyncStorage
+  useSecureStorage
+  useUserMetafields
+  useImageUpload
+  useShopNavigation
+  navigateToProduct
+  navigateToShop
+  navigateToCheckout
+  useCloseMini
+  useSheet
+  useMinisParams
+  useShop
+  useShopSearch
+  useShopCart
+  addToCart
+  buyProduct
+  shopEvents
+  useCheckoutSuccessfully
+  useOnMiniAppClosed
+  useOnMiniAppFocused
+  useOnMiniAppBlurred
+  useOnVariantUpdated
+  useOnAppStateChange
+  useErrorScreen
+  useErrorToast
+  useMinisDimensions
+  useAccessibilityInfo
+- Here are the available third party dependencies. Do not install any other dependencies.
+  @react-navigation/bottom-tabs
+  @react-navigation/native
+  @react-navigation/native-stack
+  @reactvision/react-viro
+  @shopify/react-native-skia
+  react-native-device-info
+  react-native-fast-image
+  react-native-gesture-handler
+  react-native-haptic-feedback
+  react-native-image-colors
+  react-native-image-crop-picker
+  react-native-linear-gradient
+  react-native-localize
+  react-native-permissions
+  react-native-reanimated
+  react-native-reanimated-carousel
+  react-native-render-html
+  react-native-safe-area-context
+  react-native-screens
+  react-native-share
+  react-native-svg
+  react-native-uuid
+  react-native-video
+  react-native-view-shot
+  react-native-webview
+
+Project Structure:
+
+- Ensure the following folder structure is present:
+  - src/
+    - assets/
+    - components/
+    - screens/
+    - navigation/
+    - hooks/
+    - utils/
+    - App.tsx
+    - index.tsx
+
+Follow Shop Minis SDK docs for components, hooks and available third party dependencies. (Docs: https://shop.app/minis/docs/)

package/templates/__template_common/.eslintignore

@@ -0,0 +1 @@
+*.graphql.d.ts

package/templates/__template_common/.eslintrc.js

@@ -0,0 +1,3 @@
+const {minisEslintConfig} = require('@shopify/shop-minis-runtime/eslint-config')
+
+module.exports = minisEslintConfig

package/templates/__template_common/.graphqlrc.js

@@ -0,0 +1 @@
+module.exports = require('@shopify/shop-minis-runtime/graphqlrc')

package/templates/__template_common/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "avoid",
+  "bracketSpacing": false,
+  "printWidth": 80
+}

package/templates/__template_common/assets.d.ts

@@ -0,0 +1,14 @@
+declare module '*.svg' {
+  const content: import('react').FC<import('react-native-svg').SvgProps>
+  export default content
+}
+
+declare module '*.png' {
+  const content: import('react-native').ImageRequireSource
+  export default content
+}
+
+declare module '*.jpg' {
+  const content: import('react-native').ImageRequireSource
+  export default content
+}

package/templates/__template_common/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  // Changes to babel config are not supported by the mini platform.
+  // Custom configuration can introduce unexpected behaviour in your mini and could be a cause of rejection during the submission process.
+  presets: ['@shopify/shop-minis-runtime/babel-preset'],
+}

package/templates/__template_common/gitignore

@@ -0,0 +1,5 @@
+node_modules
+.minis-cache
+*.tsbuildinfo
+.env
+entry-point-params.json

package/templates/__template_common/index.tsx

@@ -0,0 +1,5 @@
+import {renderDevelopmentMini} from '@shopify/shop-minis-runtime/src/utils/renderDevelopmentMini'
+
+import MiniApp from './src'
+
+renderDevelopmentMini(MiniApp)

package/templates/__template_common/metro.config.js

@@ -0,0 +1,5 @@
+const {
+  getMinisMetroConfig,
+} = require('@shopify/shop-minis-runtime/metro-config')
+
+module.exports = getMinisMetroConfig(__dirname)

package/templates/__template_common/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "__MINI_APP_NAME_KEBAB_CASE__",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "shop-minis dev",
+    "test": "jest",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@shopify/shop-minis-platform-sdk": "__SHOP_MINIS_SDK_VERSION__",
+    "@shopify/shop-minis-runtime": "__SHOP_MINIS_RUNTIME_VERSION__",
+    "@shopify/shop-minis-ui-extensions": "__SHOP_MINIS_UI_EXTENSIONS_VERSION__"
+  },
+  "devDependencies": {
+    "@shopify/shop-minis-cli": "__SHOP_MINIS_CLI_VERSION__",
+    "@types/jest": "^29.2.6",
+    "babel-jest": "^26.6.3",
+    "eslint": "^8.32.0",
+    "jest": "^29.3.1",
+    "prettier": "^2.8.2"
+  },
+  "jest": {
+    "preset": "react-native"
+  },
+  "overrides": {
+    "graphql": "15.8.0",
+    "react": "18.2.0",
+    "react-native": "__REACT_NATIVE_VERSION__"
+  },
+  "resolutions": {
+    "@apollo/federation": "0.38.1",
+    "graphql": "15.8.0"
+  }
+}

package/templates/__template_common/src/manifest.json

@@ -0,0 +1,6 @@
+{
+  "name": "__MINI_APP_NAME__",
+  "features": [
+    "FULL_BLEED_VIEWER"
+  ]
+}

package/templates/__template_common/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "*": [
+        "*",
+        "*.ios",
+        "*.android",
+        "./node_modules/@shopify/shop-minis-runtime/node_modules/*"
+      ]
+    },
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": false,
+    "jsx": "preserve",
+    "lib": ["es2019"],
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "moduleResolution": "node",
+    "noEmit": true,
+    "incremental": true,
+    "strict": true,
+    "target": "esnext",
+    "skipLibCheck": true,
+    "noImplicitReturns": false,
+    "noFallthroughCasesInSwitch": true,
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "useUnknownInCatchVariables": false
+  },
+  "exclude": ["node_modules"]
+}

package/templates/__template_getting_started/src/App.tsx

@@ -0,0 +1,23 @@
+import {createNativeStackNavigator} from '@react-navigation/native-stack'
+
+import {HomeScreen} from './screens/HomeScreen'
+import {NativeFeaturesScreen} from './screens/NativeFeaturesScreen'
+
+const Stack = createNativeStackNavigator()
+
+export function App() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="GettingStarted.Home"
+        component={HomeScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="GettingStarted.NativeFeatures"
+        component={NativeFeaturesScreen}
+        options={{headerShown: false}}
+      />
+    </Stack.Navigator>
+  )
+}

package/templates/__template_getting_started/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/__template_getting_started/src/manifest.json

@@ -0,0 +1,7 @@
+{
+  "name": "__MINI_APP_NAME__",
+  "features": [
+    "FULL_BLEED_VIEWER",
+    "STANDALONE"
+  ]
+}

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

@@ -0,0 +1,128 @@
+import {useState} from 'react'
+import {ScrollView} from 'react-native'
+import {useNavigation} from '@react-navigation/native'
+import {NativeStackNavigationProp} from '@react-navigation/native-stack'
+import {
+  Box,
+  SafeAreaView,
+  Text,
+  ProductCard,
+  useProductSearch,
+  useTheme,
+  Button,
+  TextField,
+  RadioButton,
+  Divider,
+} from '@shopify/shop-minis-platform-sdk'
+
+import {RootStackParamList} from '../types/screens'
+
+export function HomeScreen() {
+  const theme = useTheme()
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>()
+
+  const {products} = useProductSearch({
+    query: 'skateboard',
+    first: 4,
+    filters: {
+      minimumRating: 4,
+      price: {
+        min: 150,
+        max: 250,
+      },
+    },
+  })
+
+  const radioButtonOptions = ['Option A', 'Option B', 'Option C']
+
+  const [selectedOption, setSelectedOption] = useState(radioButtonOptions[0])
+  const [textFieldValue, setTextFieldValue] = useState('')
+
+  return (
+    <SafeAreaView
+      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
+    >
+      <ScrollView>
+        <Box
+          flex={1}
+          paddingHorizontal="gutter"
+          marginBottom="s"
+          backgroundColor="backgrounds-regular"
+        >
+          <Text variant="heroBold" marginBottom="s" marginTop="xs">
+            Hello, World!
+          </Text>
+          <Text variant="subtitle" marginBottom="s">
+            You just created a Shop Mini! Nice.
+          </Text>
+          <Text variant="subtitle">Let&apos;s explore what a Mini can do.</Text>
+          <Divider marginVertical="s" />
+          {products ? (
+            <>
+              <Text marginBottom="s">
+                First up: Product Cards (Since we&apos;re all about shopping,
+                right?)
+              </Text>
+              <Box flexDirection="row">
+                {products.slice(0, 2).map(product => (
+                  <Box key={product.id} flex={1}>
+                    <ProductCard product={product} />
+                  </Box>
+                ))}
+              </Box>
+              <Box flexDirection="row">
+                {products.slice(2, 4).map(product => (
+                  <Box key={product.id} flex={1} padding="xs">
+                    <ProductCard product={product} />
+                  </Box>
+                ))}
+              </Box>
+            </>
+          ) : null}
+          <Divider marginVertical="s" />
+
+          <Text marginBottom="s">
+            You can add interactions to your Mini with inputs.
+          </Text>
+          <Box>
+            <TextField
+              placeholder="I love Minis because..."
+              value={textFieldValue}
+              onChangeText={setTextFieldValue}
+            />
+            {textFieldValue ? (
+              <Text marginTop="xs">I love Minis because {textFieldValue}</Text>
+            ) : null}
+          </Box>
+          <Divider marginVertical="s" />
+
+          <Text>Radio buttons</Text>
+          {radioButtonOptions.map(option => (
+            <Box key={option} marginVertical="xs">
+              <RadioButton
+                variant="tertiary"
+                text={option}
+                active={selectedOption === option}
+                onPress={() => setSelectedOption(option)}
+              />
+            </Box>
+          ))}
+          <Divider marginVertical="s" />
+
+          <Text marginBottom="s">
+            Ready for more? Let&apos;s explore native capabilities in the
+            screen.
+          </Text>
+          <Button
+            text="Next"
+            size="l"
+            onPress={() => {
+              navigation.navigate('GettingStarted.NativeFeatures')
+            }}
+          />
+        </Box>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}

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

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

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

package/templates/__template_shoppable_posts/src/App.tsx

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

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