@shopify/shop-minis-cli 0.0.140 → 0.0.142

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

@@ -0,0 +1,127 @@
+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,
+  useProducts,
+  useTheme,
+  Button,
+  TextField,
+  Picker,
+} from '@shopify/shop-minis-platform-sdk'
+
+import {RootStackParamList} from '../types/screens'
+
+export function HomeScreen() {
+  const theme = useTheme()
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>()
+
+  const {products} = useProducts(
+    [
+      'gid://shopify/Product/7632803594495',
+      'gid://shopify/Product/7541927510271',
+      'gid://shopify/Product/7541908734207',
+      'gid://shopify/Product/7541924987135',
+    ],
+    'gid://shopify/Shop/62104633599'
+  )
+
+  const [pickerVisible, setPickerVisible] = useState(false)
+
+  return (
+    <SafeAreaView
+      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
+    >
+      <ScrollView>
+        <Box
+          flex={1}
+          paddingHorizontal="gutter"
+          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" marginBottom="s">
+            Let&apos;s explore what a Mini can do.
+          </Text>
+          {products ? (
+            <>
+              <Text marginBottom="s">
+                First up: Product Cards (Since we&apos;re all about shopping,
+                right?)
+              </Text>
+              <Box flexDirection="row" paddingHorizontal="gutter">
+                {products.slice(0, 2).map(product => (
+                  <Box key={product.id} flex={1} padding="xs">
+                    <TouchableProduct product={product}>
+                      <ProductCard
+                        shopId="gid://shopify/Shop/62104633599"
+                        product={product}
+                      />
+                    </TouchableProduct>
+                  </Box>
+                ))}
+              </Box>
+              <Box flexDirection="row" paddingHorizontal="gutter">
+                {products.slice(2, 4).map(product => (
+                  <Box key={product.id} flex={1} padding="xs">
+                    <TouchableProduct product={product}>
+                      <ProductCard
+                        shopId="gid://shopify/Shop/62104633599"
+                        product={product}
+                      />
+                    </TouchableProduct>
+                  </Box>
+                ))}
+              </Box>
+            </>
+          ) : null}
+          <Text marginBottom="s">
+            You can add interactions to your Mini with inputs.
+          </Text>
+          <Box marginBottom="s">
+            <TextField placeholder="Text input" />
+          </Box>
+          <Box marginBottom="s">
+            <Button
+              text="Open picker"
+              onPress={() => {
+                setPickerVisible(true)
+              }}
+            />
+          </Box>
+          {pickerVisible ? (
+            <Picker
+              items={[
+                {label: 'Red', value: 'Red'},
+                {label: 'Green', value: 'Green'},
+                {label: 'Blue', value: 'Blue'},
+              ]}
+              handleDismiss={() => setPickerVisible(false)}
+              headerText="Select a color"
+            />
+          ) : null}
+          <Text marginBottom="s">
+            Ready for more? Let&apos;s explore native capabilities in the
+            screen.
+          </Text>
+          <Button
+            text="Next"
+            onPress={() => {
+              navigation.navigate('GettingStarted.NativeFeatures')
+            }}
+          />
+        </Box>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}

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

@@ -0,0 +1,103 @@
+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,
+} 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()
+
+  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 marginBottom="s">
+            <Button
+              text="Camera access"
+              onPress={async () => {
+                await ImagePicker.openCamera({}).then(image => {
+                  console.log(image)
+                })
+              }}
+            />
+            <Text variant="bodySmall" marginTop="xs">
+              Run this Mini on a real device to access the camera.
+            </Text>
+          </Box>
+          <Box marginBottom="s">
+            <Button
+              text="Gallery access"
+              onPress={async () => {
+                await ImagePicker.openPicker({}).then(image => {
+                  console.log(image)
+                })
+              }}
+            />
+          </Box>
+          <Box marginBottom="s">
+            <Button
+              text="Share sheet"
+              onPress={async () => {
+                await Share.open({
+                  url: 'https://shop.app/minis',
+                  title: 'title',
+                })
+              }}
+            />
+          </Box>
+          <Box marginBottom="s">
+            <Text>Screen height: {height}</Text>
+            <Text>Screen width: {width}</Text>
+          </Box>
+          <Text marginBottom="s">
+            But how do people find your Mini? Let&apos;s talk about that in the
+            next screen.
+          </Text>
+          <Button
+            text="Next"
+            onPress={() => {
+              navigation.navigate('GettingStarted.Extensions')
+            }}
+          />
+        </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/build/commands/dev/utils/qr-code.d.ts

@@ -1 +0,0 @@
-export declare function printQRCode(content: string): Promise<void>;

package/build/commands/dev/utils/qr-code.js

@@ -1,5 +0,0 @@
-import qrcodeTerminal from 'qrcode-terminal';
-export async function printQRCode(content) {
-    qrcodeTerminal.generate(content, { small: true }, (code) => console.log(code));
-}
-//# sourceMappingURL=qr-code.js.map

package/build/commands/dev/utils/qr-code.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"qr-code.js","sourceRoot":"","sources":["../../../../src/commands/dev/utils/qr-code.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,iBAAiB,CAAA;AAE5C,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,OAAe;IAC/C,cAAc,CAAC,QAAQ,CAAC,OAAO,EAAE,EAAC,KAAK,EAAE,IAAI,EAAC,EAAE,CAAC,IAAY,EAAE,EAAE,CAC/D,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAClB,CAAA;AACH,CAAC"}