@shopify/shop-minis-cli 0.0.35

package/build/dev-panel/middleware.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"middleware.js","sourceRoot":"","sources":["../../src/dev-panel/middleware.ts"],"names":[],"mappings":";;;;;;AAAA,gEAAgC;AAEhC,MAAM,eAAe,GAAG,SAAS,CAAA;AAEpB,QAAA,kBAAkB,GAAG,IAAA,sBAAK,EAAC,eAAe,CAAC,CAAA;AAC3C,QAAA,kBAAkB,GAAG,iCAAiC,CAAA"}

package/build/dev-panel/middleware.ts

@@ -0,0 +1,6 @@
+import serve from 'serve-static'
+
+const INDEX_FILE_PATH = __dirname
+
+export const devPanelMiddleware = serve(INDEX_FILE_PATH)
+export const DEV_PANEL_BASE_URL = `http://localhost:8082/dev_panel`

package/build/dev-panel/styles.css

@@ -0,0 +1,507 @@
+:root {
+    /* Light colors */
+    --light-backgrounds-regular: #fff;
+    --light-backgrounds-secondary: #f4f4ed;
+    --light-backgrounds-inverse: #0F1721;
+    --light-foregrounds-regular: #0F1721;
+    --light-foregrounds-regular-inverse: #fff;
+    --light-foregrounds-primary: #5433EB;
+    /* Dark colors */
+    --dark-background-regular: #0F1721;
+    --dark-background-secondary: #3F454D;
+    --dark-backgrounds-inverse: #fff;
+    --dark-foregrounds-regular: #fff;
+    --dark-foregrounds-regular-inverse: #0F1721;
+    --dark-foregrounds-primary: #9C83F8;
+}
+@font-face {
+    font-family: 'GoodSans';
+    src: local('GoodSans'),
+        url('https://cdn.shopify.com/static/fonts/GoodSans-Bold.woff2') format('woff2');
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'GoodSans';
+    src: local('GoodSans'),
+        url('https://cdn.shopify.com/static/fonts/GoodSans-Medium.woff2') format('woff2');
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'GoodSans';
+    src: local('GoodSans'),
+        url('https://cdn.shopify.com/static/fonts/GoodSansText-Regular.woff') format('woff2');
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-family: 'GoodSans';
+    font-size: 1em;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    /* height: 100vh; */
+    padding-bottom: 100px;
+    background: var(--light-backgrounds-secondary);
+    color: var(--light-foregrounds-regular);
+}
+
+a {
+    color: var(--light-foregrounds-regular);
+    text-decoration: none;
+}
+
+body::-webkit-scrollbar {
+    width: 10px;
+}
+
+body::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+body::-webkit-scrollbar-track:hover {
+    background: rgba(0, 0, 0, 0.3);
+}
+
+body::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 6px;
+    border: 2px solid transparent;
+    margin: 2px;
+    background-clip: padding-box;
+}
+
+body::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
+h1 {
+    font-size: 1em;
+    font-weight: 500;
+}
+
+.page {
+    max-width: min(70em, 100%);
+    display: flex;
+    flex-direction: column;
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+.logo {
+    margin-top: 2em;
+    align-self: center;
+    margin-bottom: 1em;
+}
+
+.link-label {
+    margin-bottom: 0.4em;
+}
+
+.link {
+    margin-top: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    font-style: normal;
+    font-size: 13px;
+    line-height: 118%;
+    color: var(--light-foregrounds-regular);
+    text-decoration: none;
+    padding: 1rem 0 1rem 1rem;
+}
+
+.link a,
+.link a:active,
+.link a:visited {
+    color: var(--light-foregrounds-primary);
+}
+
+.qrcode {
+    flex: 0;
+    width: 100%;
+    position: relative;
+}
+
+.qr-canvas {
+    display: none;
+}
+
+.content {
+    flex: 1;
+    width: 100%;
+}
+
+.container {
+    margin-top: 1em;
+    margin-bottom: 2em;
+    display: flex;
+    flex-direction: column;
+    gap: 2em;
+    word-wrap: break-word;
+}
+
+.param-row {
+    display: flex;
+    flex-direction: row;
+}
+
+input[type='text'] {
+    width: 100%;
+    padding: 12px 16px;
+    margin: 4px 0 12px;
+    box-sizing: border-box;
+    border-radius: 6px;
+    border: 1px solid #cbcbca;
+    font-family: 'GoodSans';
+    font-size: 0.875em;
+    outline: none;
+}
+
+label {
+    font-size: 12px;
+}
+
+.param-appendix {
+    font-size: 13px;
+}
+b.param-appendix {
+    font-family: 'Courier New', Courier, monospace;
+}
+
+.icon-checkmark {
+    color: var(--light-foregrounds-regular-inverse);
+    display: none;
+    gap: 0.5rem;
+}
+.icon-copy {
+    color: var(--light-foregrounds-regular-inverse);
+    display: flex;
+    gap: 0.5rem;
+}
+
+.icon-checkmark, .icon-copy span {
+    font-size: 13px;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.button {
+    background-color: var(--light-backgrounds-inverse);
+    color: var(--light-foregrounds-regular-inverse);
+    border-radius: 100px;
+    padding: 16px;
+    min-width: 200px;
+    border: none;
+    text-decoration: none;
+    font-size: 1rem;
+    margin-top: 20px;
+}
+
+.button:hover {
+    cursor: pointer;
+}
+
+.Main {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    flex: 3;
+}
+
+.rail {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+}
+
+.button-link {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    background: var(--light-backgrounds-inverse);
+    color: var(--light-foregrounds-regular-inverse);
+    border-radius: 40px;
+    padding: 8px 16px;
+    gap: 10px;
+    box-sizing: border-box;
+    text-decoration: none;
+    font-size: 0.8125rem;
+    font-family: 'GoodSans', system-ui, -apple-system, BlinkMacSystemFont,
+        'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
+        sans-serif;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    background: var(--light-backgrounds-regular);
+    border-radius: 1rem;
+    overflow: hidden;
+}
+.card h3 {
+    margin: 0;
+}
+
+.p-2 {
+    padding: 2rem;
+}
+
+.icon-container {
+    width: 4rem;
+    height: 4rem;
+    background-color: #EEEAFF;
+    border-radius: 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.deeplink-content {
+    background: var(--light-backgrounds-regular);
+    border-radius: 60px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+    position: relative;
+    border: 1px solid #cbcbca;
+}
+
+.copy-deeplink {
+    background: var(--light-backgrounds-inverse);
+    border-radius: 0px 31px 31px 0px;
+    padding: 1rem 1.5rem;
+}
+
+.copy-deeplink:hover {
+    cursor: pointer;
+}
+
+.changelog-grid {
+    position: relative;
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.changelog-grid::after {
+    content: '';
+    position: none;
+}
+
+.changelog-entry {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-top: 20px;
+}
+
+.date {
+    font-size: 0.8rem;
+}
+
+.items {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+.items p {
+    margin-top: 0
+}
+.items ul {
+    padding: 0 1rem;
+    margin: 0;
+}
+.items ul li {
+    padding: 0;
+    margin: 0;
+}
+
+.pill {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    padding: 4px 6px;
+    border-radius: 30px;
+    font-size: 0.6875rem;
+}
+
+.api {
+    background-color: #00855B;
+}
+.sdk {
+    background-color: #5433EB;
+}
+
+.w-50 {
+    width: 50%;
+}
+
+@media only screen and (min-width: 800px) {
+    .container {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .qr-canvas {
+        display: block;
+        border-radius: 1em;
+        width: 100% !important;
+        height: 100% !important;
+        aspect-ratio: 1;
+    }
+
+    .qrcode {
+        flex: 1;
+        max-width: 50%;
+    }
+
+    .content {
+        max-width: 50%;
+    }
+
+    input[type='text'] {
+        width: 60%;
+    }
+
+    .open-mini {
+        display: none;
+    }
+    .date {
+        width: 6rem;
+    }
+    .changelog-entry {
+        flex-direction: row;
+    }
+    .changelog-grid::after {
+        content: '';
+        position: absolute;
+        width: 4px;
+        background-color: white;
+        top: 0;
+        bottom: 0;
+        left: 117px;
+        border-radius: 12px;
+    }
+    .items {
+        margin-left: 30px;
+    }
+    .items::before {
+        content: '';
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        left: -29px;
+        top: 0px;
+        background-color: black;
+        border: 2px solid white;
+        border-radius: 50%;
+        z-index: 1;
+        box-sizing: content-box;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: var(--dark-background-regular);
+        color: var(--dark-foregrounds-regular);
+    }
+
+    body::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    body::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.1);
+    }
+
+    body::-webkit-scrollbar-track:hover {
+        background: rgba(255, 255, 255, 0.3);
+    }
+
+    body::-webkit-scrollbar-thumb {
+        background-color: rgba(255, 255, 255, 0.3);
+        border-radius: 6px;
+        border: 2px solid transparent;
+        margin: 2px;
+        background-clip: padding-box;
+    }
+
+    body::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(255, 255, 255, 0.8);
+    }
+    input[type='text'] {
+        background-color: var(--dark-background-secondary);
+        color: var(--dark-foregrounds-regular);
+        border: none;
+    }
+
+    a {
+        color: var(--dark-foregrounds-regular);
+        text-decoration: none;
+    }
+
+    .link {
+        color: var(--dark-foregrounds-regular);
+    }
+    .link a,
+    .link a:active,
+    .link a:visited {
+        color: var(--dark-foregrounds-primary);
+    }
+
+    .button, .button-link {
+        background-color: var(--dark-backgrounds-inverse) !important;
+        color: var(--dark-foregrounds-regular-inverse) !important;
+    }
+    .card {
+        background-color: var(--dark-background-secondary);
+    }
+    .deeplink-content {
+        background-color: var(--dark-background-secondary);
+        border-color: var(--dark-background-secondary);
+        color: var(--dark-foregrounds-regular);
+    }
+    .changelog-grid::after {
+        content: '';
+        position: absolute;
+        width: 4px;
+        background-color: rgba(255, 255, 255, 0.3);
+        top: 0;
+        bottom: 0;
+        left: 117px;
+        border-radius: 12px;
+    }
+}

package/build/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/build/index.js

@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const create_mini_1 = require("./commands/create-mini");
+const dev_1 = require("./commands/dev");
+const generate_graphql_types_1 = require("./commands/generate-graphql-types");
+const program = new commander_1.Command();
+async function loadCommands() {
+    (0, create_mini_1.loadCommand)(program);
+    await (0, dev_1.loadCommand)(program);
+    (0, generate_graphql_types_1.loadCommand)(program);
+}
+program
+    .name('shop-minis')
+    .description('CLI for creating a new Shop Mini')
+    .version('2.0.0');
+loadCommands()
+    .then(() => {
+    program.parse();
+})
+    .catch(err => {
+    console.log(err);
+    process.exit(1);
+});
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AACA,yCAAiC;AAEjC,wDAA2E;AAC3E,wCAA4D;AAC5D,8EAAgG;AAEhG,MAAM,OAAO,GAAG,IAAI,mBAAO,EAAE,CAAA;AAE7B,KAAK,UAAU,YAAY;IACzB,IAAA,yBAAqB,EAAC,OAAO,CAAC,CAAA;IAC9B,MAAM,IAAA,iBAAc,EAAC,OAAO,CAAC,CAAA;IAC7B,IAAA,oCAA+B,EAAC,OAAO,CAAC,CAAA;AAC1C,CAAC;AAED,OAAO;KACJ,IAAI,CAAC,YAAY,CAAC;KAClB,WAAW,CAAC,kCAAkC,CAAC;KAC/C,OAAO,CAAC,OAAO,CAAC,CAAA;AAEnB,YAAY,EAAE;KACX,IAAI,CAAC,GAAG,EAAE;IACT,OAAO,CAAC,KAAK,EAAE,CAAA;AACjB,CAAC,CAAC;KACD,KAAK,CAAC,GAAG,CAAC,EAAE;IACX,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAChB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;AACjB,CAAC,CAAC,CAAA"}

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@shopify/shop-minis-cli",
+  "publishConfig": {
+    "access": "public",
+    "@shopify:registry": "https://registry.npmjs.org/"
+  },
+  "version": "0.0.35",
+  "description": "Shop Minis CLI",
+  "main": "build/index.js",
+  "bin": {
+    "shop-minis": "build/index.js"
+  },
+  "author": "shopify",
+  "license": "UNLICENSED",
+  "scripts": {
+    "build": "yarn clean && yarn build:tsc && yarn build:binaries && yarn build:assets",
+    "clean": "rm -rf build",
+    "build:tsc": "tsc -i false && chmod 755 build/index.js",
+    "build:binaries": "mkdir -p build/commands/dev/bin/",
+    "build:assets": "mkdir -p build/dev-panel/ && cp -r src/dev-panel/* build/dev-panel",
+    "lint": "eslint . --ext .js,.mjs,.ts,.tsx --format codeframe --cache",
+    "shop-minis-dev": "ts-node -T src/index.ts",
+    "shop-minis": "./build/index.js",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.18.6",
+    "@react-native-community/eslint-config": "^3.1.0",
+    "@shopify/eslint-plugin": "^42.0.1",
+    "@types/connect": "^3.4.35",
+    "@types/fs-extra": "^9.0.13",
+    "@types/inquirer": "^9.0.3",
+    "@types/jest": "^29.2.6",
+    "@types/lodash": "^4.14.191",
+    "@types/metro": "^0.66.1",
+    "@types/node": "^18.11.17",
+    "@types/prompts": "^2.4.2",
+    "@types/qrcode": "^1.5.0",
+    "@types/serve-static": "^1.15.0",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
+    "babel-jest": "^29.3.1",
+    "eslint": "^8.24.0",
+    "eslint-formatter-codeframe": "^7.32.1",
+    "eslint-plugin-jest": "^26.2.2",
+    "eslint-plugin-reanimated": "^2.0.0",
+    "jest": "^29.3.1",
+    "prettier": "^2.7.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.4"
+  },
+  "dependencies": {
+    "@google-cloud/storage": "^6.9.0",
+    "@react-native-community/cli": "^10.0.0",
+    "@react-native-community/cli-plugin-metro": "^10.0.0",
+    "@types/qrcode-terminal": "^0.12.0",
+    "chalk": "^4.1.2",
+    "commander": "^9.4.1",
+    "connect": "^3.7.0",
+    "fs-extra": "^11.1.0",
+    "graphql": "^15.0.0",
+    "graphql-config": "^4.3.5",
+    "graphql-typescript-definitions": "^3.2.2",
+    "inquirer": "^8.2.3",
+    "internal-ip": "^6.2.0",
+    "lodash": "^4.17.21",
+    "metro": "^0.73.6",
+    "metro-config": "^0.73.6",
+    "metro-core": "^0.73.6",
+    "open": "^8.4.0",
+    "ora": "^5.4.1",
+    "prompts": "^2.4.2",
+    "qrcode-terminal": "^0.12.0",
+    "replace-in-file": "^6.3.5",
+    "semver": "^7.3.8",
+    "serve-static": "^1.15.0"
+  },
+  "resolutions": {
+    "@apollo/federation": "0.38.1"
+  }
+}

package/templates/__template_blank/src/custom.d.ts

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

package/templates/__template_blank/src/index.tsx

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

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

@@ -0,0 +1,12 @@
+import {Box, Text} from '@shopify/shop-minis-platform-sdk'
+import {SafeAreaView} from 'react-native'
+
+export const HomeScreen = () => {
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <Box flex={1} padding="m" backgroundColor="backgrounds-regular">
+        <Text textAlign="center">Fill in the blank</Text>
+      </Box>
+    </SafeAreaView>
+  )
+}

package/templates/__template_blank/src/types.ts

@@ -0,0 +1,5 @@
+// @react-navigation/native-stack requires a `type` instead of an `interface`
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type StackParamList = {
+  '__MINI_APP_HANDLE_PASCAL_CASE__.Home': undefined
+}

package/templates/__template_common/.eslintignore

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