@shopify/shop-minis-cli 0.0.35

package/templates/__template_common/.eslintrc.json

@@ -0,0 +1,132 @@
+{
+  "root": true,
+  "extends": [
+    "@react-native-community",
+    "plugin:@shopify/typescript",
+    "plugin:@shopify/react",
+    "plugin:@shopify/jest",
+    "plugin:@shopify/prettier"
+  ],
+  "plugins": ["jest", "reanimated"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "project": "./tsconfig.json",
+    "schema": "node_modules/@shopify/shop-minis-platform-sdk/src/api/minis.graphql",
+    "operations": "**/*.graphql"
+  },
+  "rules": {
+    "@babel/no-unused-expressions": 0,
+    "@typescript-eslint/no-unused-expressions": [
+      "error",
+      {
+        "allowShortCircuit": true
+      }
+    ],
+    "line-comment-position": 0,
+    "no-implicit-coercion": 2,
+    "consistent-return": 0,
+    "no-console": 0,
+    "jsx-a11y/no-autofocus": 0,
+    "@shopify/strict-component-boundaries": 0,
+    "react/display-name": 0,
+    "spaced-comment": 0,
+    "no-warning-comments": "off",
+    "no-process-env": "off",
+    "lines-around-comment": "off",
+    "react/jsx-no-bind": "off",
+    "react/state-in-constructor": "off",
+    "react/jsx-no-constructed-context-values": "off",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "@shopify/typescript/prefer-pascal-case-enums": "off",
+    "@typescript-eslint/naming-convention": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/consistent-indexed-object-style": "off",
+    "@typescript-eslint/member-ordering": "off",
+    "@shopify/react-no-multiple-render-methods": "off",
+    "@shopify/react-type-state": "off",
+    "@shopify/react-prefer-private-members": "off",
+    "react/no-unused-prop-types": "off",
+    "@shopify/jest/no-vague-titles": "off",
+    "@shopify/jsx-no-complex-expressions": "off",
+    "@shopify/jsx-no-hardcoded-content": "off",
+    "import/no-named-as-default": "off",
+    "import/named": "off",
+    "id-blacklist": [2, "blacklist", "whitelist"],
+    "@shopify/images-no-direct-imports": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/class-name-casing": "off",
+    "@typescript-eslint/array-type": "off",
+    "jest/no-standalone-expect": "off",
+    "jest/no-test-callback": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "react-native/no-inline-styles": "off",
+    "jsx-a11y/accessible-emoji": "off",
+    "jest/valid-title": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_.{1,}"
+      }
+    ],
+    "@typescript-eslint/no-shadow": "error",
+    "no-shadow": "off",
+    "max-len": [
+      "error",
+      {
+        "code": 200,
+        "ignoreUrls": true
+      }
+    ],
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "react",
+            "importNames": ["default"],
+            "message": "JSX Transform is active. Please remove unnecessary default import of 'React' or use destructured named imports instead"
+          }
+        ]
+      }
+    ],
+    "reanimated/js-function-in-worklet": 2,
+    "react-hooks/exhaustive-deps": ["error"]
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "@typescript-eslint/no-non-null-assertion": 0,
+        "shopify/typescript/prefer-pascal-case-enums": 0
+      }
+    },
+    {
+      "files": ["**/*.graphql"],
+      "extends": "plugin:@graphql-eslint/operations-recommended",
+      "rules": {
+        "@graphql-eslint/no-deprecated": "warn",
+
+        // we sometimes declare fragments that get used in TypeScript, which causes this to error
+        "@graphql-eslint/no-unused-fragments": "off",
+        "@graphql-eslint/naming-convention": "off",
+        "@graphql-eslint/selection-set-depth": ["error", {"maxDepth": 15}]
+      }
+    },
+    {
+      "files": ["*.spec.*", "*.test.*"],
+      "rules": {
+        "require-await": 2,
+        "@typescript-eslint/no-floating-promises": 2
+      }
+    }
+  ]
+}

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/babel.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  presets: [
+    [
+      'module:metro-react-native-babel-preset',
+      {useTransformReactJSXExperimental: true},
+    ],
+  ],
+  plugins: [
+    [
+      '@babel/plugin-transform-react-jsx',
+      {
+        runtime: 'automatic',
+      },
+    ],
+    ['@babel/plugin-transform-named-capturing-groups-regex'],
+    ['import-graphql'],
+    ['react-native-reanimated/plugin'],
+  ],
+}

package/templates/__template_common/gitignore

@@ -0,0 +1,3 @@
+node_modules
+.minis-cache
+*.tsbuildinfo

package/templates/__template_common/index.tsx

@@ -0,0 +1,43 @@
+// Note: This file is only used for the development mode. Changes made here will not be
+// reflected in published/production mode mini apps
+import 'intl'
+import 'intl/locale-data/jsonp/en'
+import {AppRegistry} from 'react-native'
+import 'react-native-gesture-handler'
+import {useNativeEventEmitterShopActions} from '@shopify/shop-minis-platform-sdk'
+import {Wrapper} from '@shopify/shop-minis-platform-sdk/src/components/Wrapper'
+import {ShopActionsProvider} from '@shopify/shop-minis-platform-sdk/actions'
+
+import MiniAppRootComponent, {theme} from './src'
+
+AppRegistry.registerComponent(
+  'ShopMinis',
+  () =>
+    ({
+      initialApiKeys,
+      apiHeaders,
+      params = {},
+      entryPoint = null,
+      entryPointParams = null,
+      environment,
+    }: any) => {
+      const actions = useNativeEventEmitterShopActions()
+
+      return (
+        <ShopActionsProvider value={actions}>
+          <Wrapper
+            initialApiKeys={initialApiKeys}
+            apiHeaders={apiHeaders}
+            theme={theme}
+            params={params}
+            entryPoint={entryPoint}
+            entryPointParams={entryPointParams}
+            environment={environment}
+            enableApiSandbox
+          >
+            <MiniAppRootComponent />
+          </Wrapper>
+        </ShopActionsProvider>
+      )
+    }
+)

package/templates/__template_common/metro.config.js

@@ -0,0 +1,31 @@
+const {getDefaultConfig} = require('metro-config') // eslint-disable-line import/no-extraneous-dependencies
+
+module.exports = (async () => {
+  const {
+    resolver: {sourceExts, assetExts},
+  } = await getDefaultConfig()
+
+  return {
+    // We need to explicitly tell metro/haste/watchman to register the root directory
+    // otherwise imports fail when running minis directly.
+    // https://github.com/facebook/react-native/issues/24432#issuecomment-482798850
+    watchFolders: [__dirname],
+    server: {
+      port: parseInt(process.env.RCT_METRO_PORT, 10) || 8082,
+    },
+    transformer: {
+      // eslint-disable-next-line require-await
+      getTransformOptions: async () => ({
+        transform: {
+          experimentalImportSupport: false,
+          inlineRequires: true,
+        },
+      }),
+      babelTransformerPath: require.resolve('react-native-svg-transformer'),
+    },
+    resolver: {
+      assetExts: assetExts.filter(ext => ext !== 'svg'),
+      sourceExts: [...sourceExts, 'svg'],
+    },
+  }
+})()

package/templates/__template_common/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "__MINI_APP_HANDLE_KEBAB_CASE__",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "shop-minis dev",
+    "test": "jest",
+    "lint": "eslint .",
+    "postinstall": "patch-package",
+    "generate-graphql-types": "shop-minis generate-graphql-types"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@babel/plugin-transform-named-capturing-groups-regex": "^7.20.5",
+    "@babel/plugin-transform-react-jsx": "^7.20.7",
+    "@babel/runtime": "^7.12.5",
+    "@graphql-eslint/eslint-plugin": "^3.15.0",
+    "@react-native-community/blur": "4.3.0",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@react-navigation/native": "6.1.2",
+    "@react-navigation/native-stack": "6.9.8",
+    "@shopify/eslint-plugin": "^42.0.3",
+    "@shopify/react-graphql": "9.2.3",
+    "@shopify/restyle": "^2.1.0",
+    "@shopify/shop-minis-cli": "__SHOP_MINIS_CLI_VERSION__",
+    "@shopify/shop-minis-platform-sdk": "^0.1.0",
+    "@types/color": "^3.0.3",
+    "@types/react": "^17.0.39",
+    "@types/react-native": "^0.68.1",
+    "apollo-cache-inmemory": "^1.6.6",
+    "apollo-client": "^2.6.10",
+    "apollo-link": "^1.2.14",
+    "apollo-link-context": "^1.0.20",
+    "apollo-link-error": "^1.1.13",
+    "apollo-link-http": "^1.5.17",
+    "apollo-link-timeout": "^1.4.1",
+    "babel-jest": "^26.6.3",
+    "babel-plugin-import-graphql": "^2.8.1",
+    "color": "^4.2.3",
+    "eslint": "^8.32.0",
+    "eslint-plugin-react-native": "^4.0.0",
+    "eslint-plugin-reanimated": "^2.0.0",
+    "graphql": "^15.0.0",
+    "intl": "^1.2.5",
+    "jest": "^26.6.3",
+    "metro-react-native-babel-preset": "^0.67.0",
+    "patch-package": "^6.4.7",
+    "postinstall-postinstall": "^2.1.0",
+    "prettier": "^2.8.2",
+    "react": "17.0.2",
+    "react-native": "0.68.5",
+    "react-native-fast-image": "8.6.3",
+    "react-native-gesture-handler": "2.6.1",
+    "react-native-localize": "2.2.4",
+    "react-native-progress": "5.0.0",
+    "react-native-reanimated": "2.13.0",
+    "react-native-safe-area-context": "4.4.1",
+    "react-native-screens": "3.18.2",
+    "react-native-svg": "13.6.0",
+    "react-native-svg-transformer": "^1.0.0",
+    "react-native-webview": "11.23.1",
+    "react-test-renderer": "17.0.2",
+    "typescript": "~4.7.4"
+  },
+  "jest": {
+    "preset": "react-native"
+  }
+}

package/templates/__template_common/patches/react-native+0.68.5.patch

@@ -0,0 +1,173 @@
+Apply the changes from https://github.com/facebook/react-native/pull/33726 
+so that we can run on a different port. This can be removed once that PR lands 
+in react-native stable
+
+diff --git a/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.fb.js b/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.fb.js
+index f37be3e..8ff1683 100644
+--- a/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.fb.js
++++ b/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.fb.js
+@@ -5302,7 +5302,7 @@ var getViewConfigForType =
+ // % 2 === 0 means it is a Fabric tag.
+ // This means that they never overlap.
+ 
+-var nextReactTag = 2;
++var nextReactTag = 999992;
+ 
+ // TODO: Remove this conditional once all changes have propagated.
+ if (registerEventHandler) {
+diff --git a/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js b/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js
+index 39be910..68e9a22 100644
+--- a/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js
++++ b/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js
+@@ -4810,7 +4810,7 @@ var getViewConfigForType =
+ // % 2 === 0 means it is a Fabric tag.
+ // This means that they never overlap.
+ 
+-var nextReactTag = 2;
++var nextReactTag = 999992;
+ 
+ // TODO: Remove this conditional once all changes have propagated.
+ if (registerEventHandler) {
+diff --git a/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.fb.js b/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.fb.js
+index bd8208a..75c9d37 100644
+--- a/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.fb.js
++++ b/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.fb.js
+@@ -1851,7 +1851,7 @@ var _nativeFabricUIManage = nativeFabricUIManager,
+     _nativeFabricUIManage.unstable_getCurrentEventPriority,
+   getViewConfigForType =
+     ReactNativePrivateInterface.ReactNativeViewConfigRegistry.get,
+-  nextReactTag = 2;
++  nextReactTag = 999992;
+ registerEventHandler && registerEventHandler(dispatchEvent);
+ var ReactFabricHostComponent = (function() {
+   function ReactFabricHostComponent(
+diff --git a/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.js b/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.js
+index 058a5e1..87e8af5 100644
+--- a/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.js
++++ b/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.js
+@@ -1847,7 +1847,7 @@ var _nativeFabricUIManage = nativeFabricUIManager,
+     _nativeFabricUIManage.unstable_getCurrentEventPriority,
+   getViewConfigForType =
+     ReactNativePrivateInterface.ReactNativeViewConfigRegistry.get,
+-  nextReactTag = 2;
++  nextReactTag = 999992;
+ registerEventHandler && registerEventHandler(dispatchEvent);
+ var ReactFabricHostComponent = (function() {
+   function ReactFabricHostComponent(
+diff --git a/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js b/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js
+index 88a4d7e..88b9720 100644
+--- a/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js
++++ b/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js
+@@ -1972,7 +1972,7 @@ var _nativeFabricUIManage = nativeFabricUIManager,
+     _nativeFabricUIManage.unstable_getCurrentEventPriority,
+   getViewConfigForType =
+     ReactNativePrivateInterface.ReactNativeViewConfigRegistry.get,
+-  nextReactTag = 2;
++  nextReactTag = 999992;
+ registerEventHandler && registerEventHandler(dispatchEvent);
+ var ReactFabricHostComponent = (function() {
+   function ReactFabricHostComponent(
+diff --git a/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-profiling.js b/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-profiling.js
+index 791e998..740a8b3 100644
+--- a/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-profiling.js
++++ b/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-profiling.js
+@@ -1895,7 +1895,7 @@ var _nativeFabricUIManage = nativeFabricUIManager,
+     _nativeFabricUIManage.unstable_getCurrentEventPriority,
+   getViewConfigForType =
+     ReactNativePrivateInterface.ReactNativeViewConfigRegistry.get,
+-  nextReactTag = 2;
++  nextReactTag = 999992;
+ registerEventHandler && registerEventHandler(dispatchEvent);
+ var ReactFabricHostComponent = (function() {
+   function ReactFabricHostComponent(
+diff --git a/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js b/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js
+index fa3df1e..7822e98 100644
+--- a/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js
++++ b/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js
+@@ -5531,7 +5531,7 @@ var UPDATE_SIGNAL = {};
+ // % 10 === 1 means it is a rootTag.
+ // % 2 === 0 means it is a Fabric tag.
+ 
+-var nextReactTag = 3;
++var nextReactTag = 999993;
+ 
+ function allocateTag() {
+   var tag = nextReactTag;
+diff --git a/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js b/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js
+index 3772e42..041524c 100644
+--- a/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js
++++ b/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js
+@@ -5024,7 +5024,7 @@ var UPDATE_SIGNAL = {};
+ // % 10 === 1 means it is a rootTag.
+ // % 2 === 0 means it is a Fabric tag.
+ 
+-var nextReactTag = 3;
++var nextReactTag = 999993;
+ 
+ function allocateTag() {
+   var tag = nextReactTag;
+diff --git a/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js b/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js
+index 34c20b4..c764e34 100644
+--- a/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js
++++ b/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js
+@@ -1912,7 +1912,7 @@ function shim$1() {
+ var getViewConfigForType =
+     ReactNativePrivateInterface.ReactNativeViewConfigRegistry.get,
+   UPDATE_SIGNAL = {},
+-  nextReactTag = 3;
++  nextReactTag = 999993;
+ function allocateTag() {
+   var tag = nextReactTag;
+   1 === tag % 10 && (tag += 2);
+diff --git a/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js b/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js
+index 3fb794d..f3a6a5b 100644
+--- a/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js
++++ b/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js
+@@ -1906,7 +1906,7 @@ function shim() {
+ var getViewConfigForType =
+     ReactNativePrivateInterface.ReactNativeViewConfigRegistry.get,
+   UPDATE_SIGNAL = {},
+-  nextReactTag = 3;
++  nextReactTag = 999993;
+ function allocateTag() {
+   var tag = nextReactTag;
+   1 === tag % 10 && (tag += 2);
+diff --git a/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js b/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js
+index f9734c0..847f3a3 100644
+--- a/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js
++++ b/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js
+@@ -2033,7 +2033,7 @@ function shim$1() {
+ var getViewConfigForType =
+     ReactNativePrivateInterface.ReactNativeViewConfigRegistry.get,
+   UPDATE_SIGNAL = {},
+-  nextReactTag = 3;
++  nextReactTag = 999993;
+ function allocateTag() {
+   var tag = nextReactTag;
+   1 === tag % 10 && (tag += 2);
+diff --git a/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.js b/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.js
+index b875b0e..7441160 100644
+--- a/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.js
++++ b/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.js
+@@ -1954,7 +1954,7 @@ function shim() {
+ var getViewConfigForType =
+     ReactNativePrivateInterface.ReactNativeViewConfigRegistry.get,
+   UPDATE_SIGNAL = {},
+-  nextReactTag = 3;
++  nextReactTag = 999993;
+ function allocateTag() {
+   var tag = nextReactTag;
+   1 === tag % 10 && (tag += 2);
+diff --git a/node_modules/react-native/React-Core.podspec b/node_modules/react-native/React-Core.podspec
+index 375bd9e..1721fef 100644
+--- a/node_modules/react-native/React-Core.podspec
++++ b/node_modules/react-native/React-Core.podspec
+@@ -47,7 +47,7 @@ Pod::Spec.new do |s|
+   s.compiler_flags         = folly_compiler_flags + ' ' + boost_compiler_flags
+   s.header_dir             = "React"
+   s.framework              = "JavaScriptCore"
+-  s.pod_target_xcconfig    = { "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/ReactCommon\" \"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/DoubleConversion\" \"$(PODS_ROOT)/RCT-Folly\" \"${PODS_ROOT}/Headers/Public/React-hermes\" \"${PODS_ROOT}/Headers/Public/hermes-engine\" \"${PODS_ROOT}/Headers/Public/FlipperKit\" \"$(PODS_ROOT)/Headers/Public/ReactCommon\" \"$(PODS_ROOT)/Headers/Public/React-RCTFabric\"", "DEFINES_MODULE" => "YES" }
++  s.pod_target_xcconfig    = { "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/ReactCommon\" \"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/DoubleConversion\" \"$(PODS_ROOT)/RCT-Folly\" \"${PODS_ROOT}/Headers/Public/React-hermes\" \"${PODS_ROOT}/Headers/Public/hermes-engine\" \"${PODS_ROOT}/Headers/Public/FlipperKit\" \"$(PODS_ROOT)/Headers/Public/ReactCommon\" \"$(PODS_ROOT)/Headers/Public/React-RCTFabric\"", "DEFINES_MODULE" => "YES", "GCC_PREPROCESSOR_DEFINITIONS" => "RCT_METRO_PORT=${RCT_METRO_PORT}" }
+   s.user_target_xcconfig   = { "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/Headers/Private/React-Core\""}
+   s.default_subspec        = "Default"
+ 

package/templates/__template_common/src/manifest.json

@@ -0,0 +1,29 @@
+{
+  "name": "__MINI_APP_NAME__",
+  "handle": "__MINI_APP_HANDLE_KEBAB_CASE__",
+  "icon_url": "https://cdn.shopify.com/shop-assets/static_uploads/mini_apps/mini-placeholder-icon.png",
+  "shopify_app_ids": [],
+  "description": "Mini App Description",
+  "entry_points": [
+    {
+      "type": "ACTION_BUTTON",
+      "location": "PRODUCT_PAGE",
+      "images": {
+        "default_value": []
+      },
+      "call_to_action_text": {
+        "default_value": "Open __MINI_APP_NAME__"
+      },
+      "visibility": {
+        "owner_type": "PRODUCT",
+        "namespace": "__MINI_APP_HANDLE_KEBAB_CASE__",
+        "key": "available"
+      },
+      "visibility_rule": {
+        "owner_type": "SHOP",
+        "namespace": "__MINI_APP_HANDLE_KEBAB_CASE__",
+        "key": "product_entry_point_rule"
+      }
+    }
+  ]
+}

package/templates/__template_common/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "*": ["*", "*.ios", "*.android"],
+    },
+    "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_hello_world/src/assets/assets.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any
+  export default content
+}

package/templates/__template_hello_world/src/assets/figma-logo.svg

@@ -0,0 +1,14 @@
+<svg width="15" height="23" viewBox="0 0 15 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_532_7940)">
+<path d="M7.5 11.4711C7.5 10.4766 7.89509 9.52274 8.59835 8.81948C9.30161 8.11622 10.2554 7.72113 11.25 7.72113C12.2446 7.72113 13.1984 8.11622 13.9017 8.81948C14.6049 9.52274 15 10.4766 15 11.4711C15 12.4657 14.6049 13.4195 13.9017 14.1228C13.1984 14.826 12.2446 15.2211 11.25 15.2211C10.2554 15.2211 9.30161 14.826 8.59835 14.1228C7.89509 13.4195 7.5 12.4657 7.5 11.4711Z" fill="#1ABCFE"/>
+<path d="M0 18.9711C0 17.9766 0.395088 17.0227 1.09835 16.3195C1.80161 15.6162 2.75544 15.2211 3.75 15.2211H7.5V18.9711C7.5 19.9657 7.10491 20.9195 6.40165 21.6228C5.69839 22.326 4.74456 22.7211 3.75 22.7211C2.75544 22.7211 1.80161 22.326 1.09835 21.6228C0.395088 20.9195 0 19.9657 0 18.9711Z" fill="#0ACF83"/>
+<path d="M7.5 0.22113V7.72113H11.25C12.2446 7.72113 13.1984 7.32604 13.9017 6.62278C14.6049 5.91952 15 4.96569 15 3.97113C15 2.97657 14.6049 2.02274 13.9017 1.31948C13.1984 0.616219 12.2446 0.22113 11.25 0.22113L7.5 0.22113Z" fill="#FF7262"/>
+<path d="M0 3.97113C0 4.96569 0.395088 5.91952 1.09835 6.62278C1.80161 7.32604 2.75544 7.72113 3.75 7.72113H7.5V0.22113H3.75C2.75544 0.22113 1.80161 0.616219 1.09835 1.31948C0.395088 2.02274 0 2.97657 0 3.97113Z" fill="#F24E1E"/>
+<path d="M0 11.4711C0 12.4657 0.395088 13.4195 1.09835 14.1228C1.80161 14.826 2.75544 15.2211 3.75 15.2211H7.5V7.72113H3.75C2.75544 7.72113 1.80161 8.11622 1.09835 8.81948C0.395088 9.52274 0 10.4766 0 11.4711Z" fill="#A259FF"/>
+</g>
+<defs>
+<clipPath id="clip0_532_7940">
+<rect width="15" height="22.5" fill="white" transform="translate(0 0.22113)"/>
+</clipPath>
+</defs>
+</svg>

package/templates/__template_hello_world/src/assets/shop-minis-logo.svg

@@ -0,0 +1,7 @@
+<svg width="164" height="46" viewBox="0 0 164 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0288 18.2598C7.97006 17.3793 6.16191 17.0348 6.16191 15.4708C6.16191 13.9997 7.38555 13.2669 9.83283 13.2669C11.9851 13.2669 13.5584 14.2075 14.7165 16.0504C14.8039 16.1926 14.9841 16.2418 15.1316 16.1653L19.6984 13.8575C19.8623 13.7755 19.9224 13.5677 19.8295 13.4091C17.934 10.1224 14.4324 8.32324 9.82191 8.32324C3.76379 8.32324 0 11.3091 0 16.0559C0 21.098 4.58319 22.3722 8.64743 23.2527C12.7117 24.1331 14.5253 24.4776 14.5253 26.0417C14.5253 27.6057 13.2033 28.344 10.5648 28.344C8.12848 28.344 6.32033 27.2284 5.22779 25.0628C5.14585 24.9042 4.95466 24.8386 4.79624 24.9206L0.240358 27.1791C0.0819403 27.2612 0.0163881 27.4526 0.0983284 27.6166C1.90648 31.2533 5.61564 33.2986 10.5703 33.2986C16.8797 33.2986 20.6927 30.3619 20.6927 25.4675C20.6927 20.573 16.0876 19.1512 12.0288 18.2707V18.2598Z" fill="#5433EB"/>
+<path d="M36.5018 8.32341C33.9125 8.32341 31.6236 9.24214 29.9794 10.8773C29.8756 10.9757 29.7062 10.9046 29.7062 10.7624V0.322772C29.7062 0.142307 29.5642 0.00012207 29.3839 0.00012207H23.67C23.4897 0.00012207 23.3477 0.142307 23.3477 0.322772V32.7245C23.3477 32.905 23.4897 33.0472 23.67 33.0472H29.3839C29.5642 33.0472 29.7062 32.905 29.7062 32.7245V18.5115C29.7062 15.7662 31.8094 13.6608 34.6445 13.6608C37.4796 13.6608 39.5336 15.7225 39.5336 18.5115V32.7245C39.5336 32.905 39.6756 33.0472 39.8559 33.0472H45.5699C45.7501 33.0472 45.8922 32.905 45.8922 32.7245V18.5115C45.8922 12.5397 41.9809 8.32887 36.5018 8.32887V8.32341Z" fill="#5433EB"/>
+<path d="M57.495 7.39915C54.3922 7.39915 51.4751 8.34522 49.3883 9.71785C49.2463 9.81082 49.1971 10.0022 49.2846 10.1499L51.8028 14.4537C51.8957 14.6068 52.0924 14.6615 52.2453 14.5685C53.8295 13.6115 55.6431 13.1139 57.495 13.1248C62.4824 13.1248 66.1479 16.6466 66.1479 21.3005C66.1479 25.2652 63.2144 28.2019 59.4943 28.2019C56.4625 28.2019 54.3594 26.4355 54.3594 23.9418C54.3594 22.5145 54.9657 21.3442 56.5445 20.5184C56.7083 20.4309 56.7684 20.2286 56.6701 20.07L54.2938 16.0451C54.2174 15.9138 54.0535 15.8537 53.906 15.9084C50.7212 17.0896 48.487 19.9333 48.487 23.7504C48.487 29.5253 53.0811 33.8346 59.4888 33.8346C66.9727 33.8346 72.3535 28.6448 72.3535 21.202C72.3535 13.2233 66.0932 7.39368 57.484 7.39368L57.495 7.39915Z" fill="#5433EB"/>
+<path d="M89.0646 8.27964C86.1749 8.27964 83.5965 9.34603 81.7119 11.2272C81.6081 11.3311 81.4387 11.2546 81.4387 11.1124V8.84838C81.4387 8.66791 81.2967 8.52573 81.1164 8.52573H75.55C75.3697 8.52573 75.2277 8.66791 75.2277 8.84838V41.2009C75.2277 41.3814 75.3697 41.5236 75.55 41.5236H81.2639C81.4442 41.5236 81.5862 41.3814 81.5862 41.2009V30.5917C81.5862 30.4495 81.7556 30.3784 81.8594 30.4714C83.7385 32.2214 86.224 33.244 89.0701 33.244C95.7728 33.244 101.001 27.8137 101.001 20.7591C101.001 13.7045 95.7674 8.27417 89.0701 8.27417L89.0646 8.27964ZM87.9885 27.7644C84.1755 27.7644 81.2858 24.7293 81.2858 20.7153C81.2858 16.7014 84.1701 13.6663 87.9885 13.6663C91.8069 13.6663 94.6857 16.6521 94.6857 20.7153C94.6857 24.7786 91.8451 27.7644 87.983 27.7644H87.9885Z" fill="#5433EB"/>
+<path d="M118.125 28.2617V17.1377L122.877 28.2617H125.037L129.807 17.1377V28.2617H132.003V14.2217H128.583L123.957 25.3997L119.349 14.2217H115.929V28.2617H118.125ZM135.649 17.5697C136.441 17.5697 137.089 16.9577 137.089 16.1477C137.089 15.3377 136.477 14.7257 135.649 14.7257C134.839 14.7257 134.209 15.3377 134.209 16.1477C134.209 16.9577 134.839 17.5697 135.649 17.5697ZM136.711 28.2617V18.9017H134.605V28.2617H136.711ZM141.19 28.2617V23.5817C141.19 21.7277 142.18 20.4317 143.728 20.4317C145.024 20.4317 145.744 21.3677 145.744 22.8617V28.2617H147.886V22.7717C147.886 20.0357 146.734 18.6137 144.43 18.6137C142.9 18.6137 141.838 19.3337 141.19 20.4137V18.9017H139.066V28.2617H141.19ZM151.162 17.5697C151.954 17.5697 152.602 16.9577 152.602 16.1477C152.602 15.3377 151.99 14.7257 151.162 14.7257C150.352 14.7257 149.722 15.3377 149.722 16.1477C149.722 16.9577 150.352 17.5697 151.162 17.5697ZM152.224 28.2617V18.9017H150.118V28.2617H152.224ZM158.539 28.5497C161.095 28.5497 162.661 27.4157 162.661 25.6337C162.661 21.6197 156.595 23.6357 156.595 21.5117C156.595 20.7197 157.279 20.1617 158.467 20.1617C159.763 20.1617 160.555 20.8097 160.609 21.8897H162.643C162.499 19.8737 160.969 18.6137 158.629 18.6137C156.055 18.6137 154.489 19.8197 154.489 21.6017C154.489 25.5077 160.555 23.4557 160.555 25.6877C160.555 26.4257 159.835 27.0017 158.611 27.0017C157.243 27.0017 156.325 26.3897 156.271 25.3277H154.219C154.273 27.3257 155.911 28.5497 158.539 28.5497Z" fill="#0F1721"/>
+</svg>

package/templates/__template_hello_world/src/components/ButtonCTA.tsx

@@ -0,0 +1,31 @@
+import {Box, Icon, Text} from '@shopify/shop-minis-platform-sdk'
+import {TouchableOpacity, Linking} from 'react-native'
+
+import FigmaLogo from '../assets/figma-logo.svg'
+
+const SHOP_MINIS_UI_KIT_URL =
+  'https://www.figma.com/community/file/1203047147438982192'
+
+export const ButtonCTA = () => {
+  return (
+    <TouchableOpacity onPress={() => Linking.openURL(SHOP_MINIS_UI_KIT_URL)}>
+      <Box
+        justifyContent="space-between"
+        flexDirection="row"
+        alignItems="center"
+        borderRadius={36}
+        backgroundColor="tertiary-button-background"
+        paddingHorizontal="m"
+        paddingVertical="s"
+      >
+        <Box flexDirection="row">
+          <FigmaLogo />
+          <Text ml="xs" variant="buttonLarge">
+            Shop Minis UI Kit
+          </Text>
+        </Box>
+        <Icon name="launch" />
+      </Box>
+    </TouchableOpacity>
+  )
+}