@shopify/shop-minis-cli 0.0.171 → 0.0.173

package/build/commands/create-mini/standalone/examples/with-fal-ai/.eslintrc.js

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

package/build/commands/create-mini/standalone/examples/with-fal-ai/.graphqlrc.js

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

package/build/commands/create-mini/standalone/examples/with-fal-ai/.prettierrc.json

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

package/build/commands/create-mini/standalone/examples/with-fal-ai/README.md

@@ -1,46 +0,0 @@
-# Product AI Image Generator Mini
-
-A Shop Mini that generates AI-powered product images based on your recently viewed products. Using FAL AI's image generation capabilities, this mini creates realistic studio-quality product images from product titles, descriptions, and shop information.
-
-## Features
-
-- Automatically detects your most recently viewed product
-- Generates AI-powered product images using FAL AI
-- Displays original product information alongside generated images
-- Simple one-click image generation
-
-## Setup
-
-1. Clone this repository
-2. Install dependencies:
-
-   ```bash
-   npm install
-   ```
-
-3. Setup your mini and login with your partners account:
-
-   ```bash
-   npx shop-minis setup
-   ```
-
-4. Set up your FAL AI API key:
-
-   - Sign up for a FAL AI account at [FAL AI](https://fal.ai)
-   - Get your API key from the dashboard
-   - Run `npx shop-minis secrets set fal_ai_key <your-api-key-here>`
-   - Run `npx shop-minis proxies apply`
-
-5. Run the development server:
-   ```bash
-   npm start
-   ```
-
-## Development
-
-This mini is built using:
-
-- React Native
-- TypeScript
-- Shop Minis SDK
-- FAL AI API

package/build/commands/create-mini/standalone/examples/with-fal-ai/assets.d.ts

@@ -1,14 +0,0 @@
-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/build/commands/create-mini/standalone/examples/with-fal-ai/babel.config.js

@@ -1,5 +0,0 @@
-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-sdk/babel-preset'],
-}

package/build/commands/create-mini/standalone/examples/with-fal-ai/index.tsx

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

package/build/commands/create-mini/standalone/examples/with-fal-ai/metro.config.js

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

package/build/commands/create-mini/standalone/examples/with-fal-ai/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "with-fal-ai",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "start": "shop-minis dev",
-    "test": "jest",
-    "lint": "eslint ."
-  },
-  "dependencies": {
-    "@shopify/shop-minis-sdk": "0.0.16"
-  },
-  "devDependencies": {
-    "@shopify/shop-minis-cli": "0.0.161",
-    "@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": "0.73.2"
-  },
-  "resolutions": {
-    "@apollo/federation": "0.38.1",
-    "graphql": "15.8.0"
-  }
-}

package/build/commands/create-mini/standalone/examples/with-fal-ai/src/App.tsx

@@ -1,5 +0,0 @@
-import {HomeScreen} from './screens/HomeScreen'
-
-export function App() {
-  return <HomeScreen />
-}

package/build/commands/create-mini/standalone/examples/with-fal-ai/src/index.tsx

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

package/build/commands/create-mini/standalone/examples/with-fal-ai/src/manifest.json

@@ -1,21 +0,0 @@
-{
-  "name": "with-fal-ai",
-  "features": ["FULL_BLEED_VIEWER", "STANDALONE"],
-  "trusted_domains": ["v3.fal.media"],
-  "proxies": [
-    {
-      "target_url_pattern": "https://queue.fal.run/fal-ai/flux/schnell*",
-      "allowed_methods": ["POST"],
-      "appended_headers": ["Authorization: Key {{ secrets.fal_ai_key }}"],
-      "user_rate_limit_requests": 10,
-      "user_rate_limit_interval": 3600
-    },
-    {
-      "target_url_pattern": "https://queue.fal.run/fal-ai/flux/requests*",
-      "allowed_methods": ["GET"],
-      "appended_headers": ["Authorization: Key {{ secrets.fal_ai_key }}"],
-      "user_rate_limit_requests": 50,
-      "user_rate_limit_interval": 300
-    }
-  ]
-}

package/build/commands/create-mini/standalone/examples/with-fal-ai/src/screens/HomeScreen.tsx

@@ -1,142 +0,0 @@
-import {useState} from 'react'
-import {ScrollView, View, Text, Button, StyleSheet} from 'react-native'
-import {
-  SafeAreaView,
-  ProductCard,
-  useRecentProducts,
-  Product,
-  Image,
-  useFalAi,
-} from '@shopify/shop-minis-sdk'
-
-function generatePrompt(product: Product): string {
-  return `
-    A realistic Product image photo in a studio setting of a product named ${product.title} from the store: ${product.shop.name}
-  `
-}
-
-function EmptyState() {
-  return (
-    <Text>
-      No recently viewed products found. Close the Mini and visit any product.
-    </Text>
-  )
-}
-
-function ProductSection({
-  product,
-  isLoading,
-  onGenerateImage,
-}: {
-  product: Product
-  isLoading: boolean
-  onGenerateImage: () => void
-}) {
-  return (
-    <>
-      <Text style={styles.title}>Generate an AI image from this product</Text>
-      <Text>
-        Based on the product title, shop and description, this mini generates a
-        realistic image of the product.
-      </Text>
-      <View style={styles.productContainer}>
-        <ProductCard product={product} />
-      </View>
-      <Button
-        disabled={isLoading}
-        onPress={onGenerateImage}
-        title={isLoading ? 'Loading...' : 'Generate an AI image'}
-      />
-    </>
-  )
-}
-
-export function HomeScreen() {
-  const {products} = useRecentProducts({first: 1})
-  const fal = useFalAi()
-  const [imageUrl, setImageUrl] = useState('')
-  const [isLoading, setIsLoading] = useState(false)
-
-  const generateImage = async () => {
-    const product = products?.[0]
-    if (!product) return
-
-    setIsLoading(true)
-    setImageUrl('')
-
-    try {
-      const prompt = generatePrompt(product)
-      const response = await fal.subscribe('fal-ai/flux/schnell', {
-        input: {
-          prompt,
-        },
-        mode: 'polling',
-        pollInterval: 1000,
-      })
-
-      if (response.data.images?.[0]?.url) {
-        setImageUrl(response.data.images[0].url)
-      }
-    } catch (error) {
-      console.error('Failed to generateImage:', error)
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  return (
-    <SafeAreaView>
-      <ScrollView>
-        <View style={styles.container}>
-          <View style={styles.main}>
-            {(() => {
-              if (products === undefined) return null
-              if (products.length === 0) return <EmptyState />
-              return (
-                <ProductSection
-                  product={products[0]}
-                  isLoading={isLoading}
-                  onGenerateImage={generateImage}
-                />
-              )
-            })()}
-
-            {imageUrl ? (
-              <Image source={{uri: imageUrl}} style={styles.generatedImage} />
-            ) : null}
-          </View>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'stretch',
-    justifyContent: 'center',
-    marginHorizontal: 'auto',
-  },
-  main: {
-    gap: 8,
-    justifyContent: 'center',
-    alignItems: 'stretch',
-    paddingHorizontal: 24,
-  },
-  title: {
-    marginVertical: 10,
-    fontSize: 24,
-    fontWeight: 'bold',
-  },
-  productContainer: {
-    marginHorizontal: 50,
-  },
-  generatedImage: {
-    width: '100%',
-    height: 300,
-    marginTop: 12,
-    marginBottom: 20,
-    borderRadius: 8,
-  },
-})

package/build/commands/create-mini/standalone/examples/with-fal-ai/tsconfig.json

@@ -1,41 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "*": [
-        "*",
-        "*.ios",
-        "*.android",
-        "./node_modules/@shopify/shop-minis-sdk/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/build/commands/create-mini/standalone/examples/with-getting-started/.eslintignore

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

package/build/commands/create-mini/standalone/examples/with-getting-started/.eslintrc.js

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

package/build/commands/create-mini/standalone/examples/with-getting-started/.graphqlrc.js

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

package/build/commands/create-mini/standalone/examples/with-getting-started/.prettierrc.json

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

package/build/commands/create-mini/standalone/examples/with-getting-started/README.md

@@ -1,18 +0,0 @@
-# Getting Started Mini
-
-A Shop Mini that demonstrates the basics of how to get started with Shop Minis.
-
-## Setup
-
-1. Run the development server:
-   ```bash
-   npm start
-   ```
-
-## Development
-
-This mini is built using:
-
-- React Native
-- TypeScript
-- Shop Minis SDK

package/build/commands/create-mini/standalone/examples/with-getting-started/assets.d.ts

@@ -1,14 +0,0 @@
-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/build/commands/create-mini/standalone/examples/with-getting-started/babel.config.js

@@ -1,5 +0,0 @@
-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-sdk/babel-preset'],
-}

package/build/commands/create-mini/standalone/examples/with-getting-started/index.tsx

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

package/build/commands/create-mini/standalone/examples/with-getting-started/metro.config.js

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

package/build/commands/create-mini/standalone/examples/with-getting-started/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "with-getting-started",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "start": "shop-minis dev",
-    "test": "jest",
-    "lint": "eslint ."
-  },
-  "dependencies": {
-    "@shopify/shop-minis-sdk": "0.0.16"
-  },
-  "devDependencies": {
-    "@shopify/shop-minis-cli": "0.0.161",
-    "@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": "0.73.2"
-  },
-  "resolutions": {
-    "@apollo/federation": "0.38.1",
-    "graphql": "15.8.0"
-  }
-}

package/build/commands/create-mini/standalone/examples/with-getting-started/src/App.tsx

@@ -1,23 +0,0 @@
-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/build/commands/create-mini/standalone/examples/with-getting-started/src/index.tsx

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

package/build/commands/create-mini/standalone/examples/with-getting-started/src/manifest.json

@@ -1,5 +0,0 @@
-{
-  "name": "Getting Started",
-  "features": ["FULL_BLEED_VIEWER", "STANDALONE"],
-  "permissions": ["GALLERY", "CAMERA"]
-}

package/build/commands/create-mini/standalone/examples/with-getting-started/src/screens/HomeScreen.tsx

@@ -1,133 +0,0 @@
-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,
-  TouchableProduct,
-  ProductCard,
-  useProductSearch,
-  useTheme,
-  Button,
-  TextField,
-  RadioButton,
-  Divider,
-} from '@shopify/shop-minis-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}>
-                    <TouchableProduct product={product}>
-                      <ProductCard product={product} />
-                    </TouchableProduct>
-                  </Box>
-                ))}
-              </Box>
-              <Box flexDirection="row">
-                {products.slice(2, 4).map(product => (
-                  <Box key={product.id} flex={1} padding="xs">
-                    <TouchableProduct product={product}>
-                      <ProductCard product={product} />
-                    </TouchableProduct>
-                  </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>
-  )
-}