@linktr.ee/create-link-app 1.4.0 → 1.5.0

package/README.md

@@ -57,7 +57,7 @@ Initialize a new Link App project
 
 ```
 USAGE
-  $ create-link-app create NAME [-t react|react-ts] [-p <value>]
+  $ create-link-app create NAME [-t react|react-ts] [-p <value>] [--storybook]
 
 ARGUMENTS
   NAME  Name of the Link App
@@ -66,6 +66,7 @@ FLAGS
   -p, --path=<value>       Path to create the project in
   -t, --template=<option>  [default: react-ts] Template to use for the project
                            <options: react|react-ts>
+  --storybook              With Storybook added to the project
 
 DESCRIPTION
   Initialize a new Link App project

package/dist/commands/create.js

@@ -14,13 +14,16 @@ class Create extends base_1.default {
         const { args, flags } = await this.parse(Create);
         const targetDir = path_1.default.resolve(flags.path ?? process.cwd(), args.name);
         this.log(`🔗 Creating project in ${targetDir}...`);
-        await (0, create_project_1.default)(flags.template, targetDir);
+        if (flags.storybook) {
+            this.log('  🎨 Including Storybook in the project...');
+        }
+        await (0, create_project_1.default)(flags.template, targetDir, { hasStorybook: flags.storybook });
         const useYarn = (0, is_using_yarn_1.default)();
-        core_1.CliUx.ux.action.start('🚚 Installing dependencies');
+        core_1.CliUx.ux.action.start('  🚚 Installing dependencies');
         (0, install_dependencies_1.default)(targetDir, useYarn);
         core_1.CliUx.ux.action.stop();
         const relativeProjectPath = path_1.default.relative(process.cwd(), targetDir);
-        this.log('✅ Project created, to get started:\n');
+        this.log('\n✅ Project created, to get started:');
         this.log(`    cd ${relativeProjectPath}`);
         this.log(`    yarn install | npm install`);
         this.log(`    yarn dev | npm run dev\n`);
@@ -51,4 +54,8 @@ Create.flags = {
         char: 'p',
         description: 'Path to create the project in',
     }),
+    storybook: core_1.Flags.boolean({
+        description: 'With Storybook added to the project',
+        default: false,
+    }),
 };

package/dist/commands/deploy.js

@@ -7,33 +7,105 @@ const core_1 = require("@oclif/core");
 const axios_1 = __importDefault(require("axios"));
 const base_1 = __importDefault(require("../base"));
 const access_token_1 = require("../lib/auth/access-token");
+const create_form_data_1 = __importDefault(require("../lib/deploy/create-form-data"));
 const pack_project_1 = __importDefault(require("../lib/deploy/pack-project"));
 const upload_assets_1 = __importDefault(require("../lib/deploy/upload-assets"));
-const create_form_data_1 = __importDefault(require("../lib/deploy/create-form-data"));
 class Deploy extends base_1.default {
     async run() {
+        try {
+            await this.parse(Deploy);
+        }
+        catch (err) {
+            console.log('err', err);
+        }
         const { flags } = await this.parse(Deploy);
         const appConfig = await this.getAppConfig(flags.qa ? 'qa' : 'production');
         const accessToken = (0, access_token_1.getAccessToken)(appConfig.auth.audience);
-        await (0, pack_project_1.default)();
+        const linkTypeServiceUrl = `${flags.endpoint ?? appConfig.link_types_url}/link-types`;
+        const isForceUpdate = !!flags['force-update'];
+        const packedFiles = await (0, pack_project_1.default)();
+        this.log(`\n===`);
+        if (isForceUpdate) {
+            this.log('⚠️  "--force-update" flag will impact the existing PUBLISHED Link Apps.\n');
+        }
+        if (packedFiles?.length) {
+            this.log('Ready to upload the following files:');
+            packedFiles.forEach((file) => {
+                this.log(`  - ${file}`);
+            });
+        }
+        const userConfirmDeploy = await core_1.CliUx.ux.prompt(`❓ Do you want to proceed? (Y/n)`, { required: false });
+        if (userConfirmDeploy?.toLowerCase() !== 'y') {
+            this.log('Aborted!');
+            return;
+        }
         const form = (0, create_form_data_1.default)(flags.path);
-        const url = `${flags.endpoint ?? appConfig.link_types_url}/link-types`;
+        let linkTypeErrorCode = null;
         try {
-            const result = await (0, upload_assets_1.default)(url, form, accessToken, flags.update, flags['force-update']);
-            this.log(`Draft Link App successfully ${flags.update ? 'updated' : 'uploaded'}\n`);
-            this.log(JSON.stringify(result, null, 2));
+            const result = await (0, upload_assets_1.default)(linkTypeServiceUrl, form, accessToken, flags.update, isForceUpdate);
+            await this.processSuccess(flags, result);
         }
         catch (err) {
-            this.log('There was an error while uploading Link App assets\n');
+            let throwError = true;
             if (axios_1.default.isAxiosError(err)) {
-                if (err.response) {
-                    this.error(JSON.stringify(err.response.data, null, 2));
+                if (err.response?.data) {
+                    linkTypeErrorCode = err.response?.data?.['link_types_error_code'] ?? null;
+                    if (linkTypeErrorCode === 'LINK_TYPE_ALREADY_EXISTS') {
+                        throwError = false;
+                    }
+                    else {
+                        this.error(JSON.stringify(err.response.data, null, 2));
+                    }
                 }
-                this.error(err.message);
+                else {
+                    this.error(err.message);
+                }
+            }
+            if (throwError) {
+                throw err;
+            }
+        }
+        if (linkTypeErrorCode === 'LINK_TYPE_ALREADY_EXISTS' && !flags.update && !isForceUpdate) {
+            this.log(`\n⚠️  This Link Type already exists! Do you want to update it?\n`);
+            const userConfirmUpdate = await core_1.CliUx.ux.prompt(`❓ Do you want to proceed? (Y/n)`, { required: false });
+            if (userConfirmUpdate.toLowerCase() !== 'y') {
+                this.log('Aborted!');
+                return;
+            }
+            try {
+                const result = await (0, upload_assets_1.default)(linkTypeServiceUrl, form, accessToken, true, isForceUpdate);
+                await this.processSuccess(flags, result);
+            }
+            catch (err) {
+                if (axios_1.default.isAxiosError(err)) {
+                    if (err.response?.data) {
+                        this.error(JSON.stringify(err.response.data, null, 2));
+                    }
+                    else {
+                        this.error(err.message);
+                    }
+                }
+                throw err;
             }
-            throw err;
         }
     }
+    async processSuccess(flags, result) {
+        this.log(`\n===`);
+        this.log(JSON.stringify(result, null, 2));
+        const linkTypeId = result.linkType.linkTypeId;
+        const buildId = result.build.id;
+        const linkAppBuildUrl = flags.qa
+            ? `https://buildkite.com/linktree/link-types-ci-service/builds/${buildId}`
+            : `https://linkapp-ci.replit.app/?linkTypeId=${linkTypeId}&buildId=${buildId}`;
+        const linkAppCreateUrl = flags.qa
+            ? `https://qa.linktr.ee/admin?action=create-link&linkType=${linkTypeId}`
+            : `https://linktr.ee/admin?action=create-link&linkType=${linkTypeId}`;
+        this.log(`\n===`);
+        this.log(`✅ Draft Link App successfully ${flags.update ? 'updated' : 'uploaded'}`);
+        this.log(` - Link App ID: ${linkTypeId}`);
+        this.log(` - Check Link App build: ${linkAppBuildUrl}`);
+        this.log(` - Create Link App: ${linkAppCreateUrl}`);
+    }
 }
 exports.default = Deploy;
 Deploy.description = 'Deploy your Link App and test it on Linktr.ee';
@@ -45,16 +117,17 @@ Deploy.flags = {
     update: core_1.Flags.boolean({
         description: 'Push update for existing Link App',
     }),
+    // Test local link-types service, with --endpoint http://localhost:8081
     endpoint: core_1.Flags.string({
-        description: 'Custom API endpoint to push assets to',
+        description: 'Custom API endpoint to push assets to. Admin use only.',
         hidden: true,
     }),
     qa: core_1.Flags.boolean({
-        description: 'Use QA environment',
+        description: 'Use QA environment. Admin use only.',
         hidden: true,
     }),
     'force-update': core_1.Flags.boolean({
-        description: 'Allow Link Type Admins to push updates to Link Apps in PUBLISHED state',
+        description: 'Allow Link Type Admins to push updates to Link Apps in PUBLISHED state. Admin use only.',
         hidden: true,
     }),
 };

package/dist/commands/grant-access.js

@@ -54,11 +54,11 @@ GrantAccess.args = [
 ];
 GrantAccess.flags = {
     endpoint: core_1.Flags.string({
-        description: 'Custom API endpoint to push assets to',
+        description: 'Custom API endpoint to push assets to. Admin use only.',
         hidden: true,
     }),
     qa: core_1.Flags.boolean({
-        description: 'Use QA environment',
+        description: 'Use QA environment. Admin use only.',
         hidden: true,
     }),
 };

package/dist/commands/login.js

@@ -34,7 +34,7 @@ exports.default = Login;
 Login.description = 'Login using your Linktree credentials to deploy Link Apps';
 Login.flags = {
     qa: core_1.Flags.boolean({
-        description: 'Use QA environment',
+        description: 'Use QA environment. Admin use only.',
         hidden: true,
     }),
 };

package/dist/commands/logout.js

@@ -24,7 +24,7 @@ exports.default = Logout;
 Logout.description = 'Logout and clear browser session';
 Logout.flags = {
     qa: core_1.Flags.boolean({
-        description: 'Use QA environment',
+        description: 'Use QA environment. Admin use only.',
         hidden: true,
     }),
 };

package/dist/lib/create/create-project.js

@@ -8,12 +8,15 @@ const path_1 = __importDefault(require("path"));
 const project_name_to_title_1 = __importDefault(require("./project-name-to-title"));
 // templates path relative to this module
 const BaseTemplatesDir = path_1.default.resolve(__dirname, '..', '..', '..', 'templates');
-const createProject = async (template, targetDir) => {
+const createProject = async (template, targetDir, options) => {
     const templateDir = path_1.default.resolve(BaseTemplatesDir, template);
     const templateCommonDir = path_1.default.resolve(BaseTemplatesDir, 'common');
     await fs_extra_1.default.copy(templateDir, targetDir);
     await fs_extra_1.default.copy(templateCommonDir, targetDir);
     await fs_extra_1.default.move(`${targetDir}/gitignore`, `${targetDir}/.gitignore`);
+    if (options.hasStorybook) {
+        await fs_extra_1.default.copy(path_1.default.resolve(BaseTemplatesDir, 'stories'), path_1.default.resolve(targetDir, 'stories'));
+    }
     // remove types that are only required when building the `create-link-app` project
     if (await fs_extra_1.default.existsSync(`${targetDir}/src/types/hack.d.ts`)) {
         await fs_extra_1.default.unlink(`${targetDir}/src/types/hack.d.ts`);

package/dist/lib/deploy/create-form-data.js

@@ -34,11 +34,6 @@ const OptionalAssets = [
         fileName: 'url_match_rules.json',
         contentType: 'application/json',
     },
-    {
-        key: 'urlRules',
-        fileName: 'urlRules.json',
-        contentType: 'application/json',
-    },
 ];
 /**
  * Create a readable multipart/form-data stream which includes the Link App asset files.

package/dist/lib/deploy/pack-project.js

@@ -1,22 +1,43 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const archiver_1 = __importDefault(require("archiver"));
+const archiver_1 = __importStar(require("archiver"));
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 /**
- * Pack the Link App source files into `package.tgz`. This includes the following:
- * - `src/`
- * - `schema.json`
- * - `package.json`
- * - `package-lock.json` - *optional*
- * - `yarn.lock` - *optional*
- * - `tsconfig.json` - *optional*
+ * Pack the Link App source files into `package.tgz`. This includes the above required/optional directories and files.
  */
 async function packProject() {
-    return new Promise((resolve, reject) => {
+    const requiredDirs = ['src'];
+    const requiredFiles = ['package.json', 'manifest.json'];
+    const optionalFiles = ['package-lock.json', 'yarn.lock', 'tsconfig.json', 'url-match-rules.json', 'settings.json', 'icon.svg'];
+    const packedFiles = [];
+    await new Promise((resolve, reject) => {
         const outputPath = resolveProjPath('package.tgz');
         const outputWriteStream = fs_1.default.createWriteStream(outputPath);
         const handleSuccess = () => resolve();
@@ -31,30 +52,36 @@ async function packProject() {
             gzipOptions: { level: 9 },
         });
         archive.on('warning', (err) => {
-            if (err?.code === 'ENOENT') {
-                // package, lock files, tsconfig, and schema files may or may not exist
-                const fileName = path_1.default.basename(err.path);
-                if (fileName === 'package.json' ||
-                    fileName === 'package-lock.json' ||
-                    fileName === 'yarn.lock' ||
-                    fileName === 'tsconfig.json' ||
-                    fileName.endsWith('.jtd.json')) {
-                    return;
-                }
-            }
             handleFailure(err);
         });
         archive.on('error', (err) => {
             handleFailure(err);
         });
         archive.pipe(outputWriteStream);
-        archive.file(resolveProjPath('package.json'), { name: 'package.json' });
-        archive.file(resolveProjPath('package-lock.json'), { name: 'package-lock.json' });
-        archive.file(resolveProjPath('yarn.lock'), { name: 'yarn.lock' });
-        archive.file(resolveProjPath('tsconfig.json'), { name: 'tsconfig.json' });
-        archive.directory(resolveProjPath('src/'), 'src');
+        requiredFiles.forEach((fileName) => {
+            if (!fs_1.default.existsSync(resolveProjPath(fileName))) {
+                handleFailure(new archiver_1.ArchiverError(`File ${fileName} does not exist`, 'ENOENT'));
+            }
+            archive.file(resolveProjPath(fileName), { name: fileName });
+            packedFiles.push(fileName);
+        });
+        optionalFiles.forEach((fileName) => {
+            if (fs_1.default.existsSync(resolveProjPath(fileName))) {
+                archive.file(resolveProjPath(fileName), { name: fileName });
+                packedFiles.push(fileName);
+            }
+        });
+        requiredDirs.forEach((dirName) => {
+            if (!fs_1.default.existsSync(resolveProjPath(dirName)) || !fs_1.default.statSync(resolveProjPath(dirName)).isDirectory()) {
+                handleFailure(new archiver_1.ArchiverError(`Directory ${dirName} does not exist`, 'ENOENT'));
+            }
+            archive.directory(resolveProjPath(`${dirName}/`), dirName);
+            packedFiles.push(`${dirName}/`);
+        });
         archive.finalize();
     });
+    packedFiles.sort();
+    return packedFiles;
 }
 const resolveProjPath = (relativePath) => path_1.default.resolve(process.cwd(), relativePath);
 exports.default = packProject;

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.0",
+  "version": "1.5.0",
   "commands": {
     "build": {
       "id": "build",
@@ -60,6 +60,12 @@
           "char": "p",
           "description": "Path to create the project in",
           "multiple": false
+        },
+        "storybook": {
+          "name": "storybook",
+          "type": "boolean",
+          "description": "With Storybook added to the project",
+          "allowNo": false
         }
       },
       "args": {
@@ -96,21 +102,21 @@
         "endpoint": {
           "name": "endpoint",
           "type": "option",
-          "description": "Custom API endpoint to push assets to",
+          "description": "Custom API endpoint to push assets to. Admin use only.",
           "hidden": true,
           "multiple": false
         },
         "qa": {
           "name": "qa",
           "type": "boolean",
-          "description": "Use QA environment",
+          "description": "Use QA environment. Admin use only.",
           "hidden": true,
           "allowNo": false
         },
         "force-update": {
           "name": "force-update",
           "type": "boolean",
-          "description": "Allow Link Type Admins to push updates to Link Apps in PUBLISHED state",
+          "description": "Allow Link Type Admins to push updates to Link Apps in PUBLISHED state. Admin use only.",
           "hidden": true,
           "allowNo": false
         }
@@ -191,14 +197,14 @@
         "endpoint": {
           "name": "endpoint",
           "type": "option",
-          "description": "Custom API endpoint to push assets to",
+          "description": "Custom API endpoint to push assets to. Admin use only.",
           "hidden": true,
           "multiple": false
         },
         "qa": {
           "name": "qa",
           "type": "boolean",
-          "description": "Use QA environment",
+          "description": "Use QA environment. Admin use only.",
           "hidden": true,
           "allowNo": false
         }
@@ -229,7 +235,7 @@
         "qa": {
           "name": "qa",
           "type": "boolean",
-          "description": "Use QA environment",
+          "description": "Use QA environment. Admin use only.",
           "hidden": true,
           "allowNo": false
         }
@@ -249,7 +255,7 @@
         "qa": {
           "name": "qa",
           "type": "boolean",
-          "description": "Use QA environment",
+          "description": "Use QA environment. Admin use only.",
           "hidden": true,
           "allowNo": false
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/create-link-app",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Create a Link App on Linktr.ee.",
   "license": "UNLICENSED",
   "author": "Linktree",

package/templates/{react-ts/src/stories → stories}/LinkApp.stories.tsx

@@ -1,18 +1,18 @@
-import React from 'react'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import manifest from '../../manifest.json'
-import fixture from '../../fixtures/props-data.json'
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import fixture from "../fixtures/props-data.json";
+import manifest from "../manifest.json";
 
-import LinkApp from '../App'
+import LinkApp from "../src/App";
 
-import './tailwind.sb.css'
+import "./tailwind.sb.css";
 
 export default {
   title: `Link App/${manifest.name}`,
   component: LinkApp,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
   args: {
     ...fixture,
@@ -25,68 +25,68 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof LinkApp>
+} as ComponentMeta<typeof LinkApp>;
 
 export const Stack: ComponentStory<typeof LinkApp> = (args) => (
   <div
-    data-link-type-id={__LINK_TYPE_SLUG__}
+    data-link-type-id={manifest.name}
     style={{
-      margin: '0.5rem',
+      margin: "0.5rem",
       width: 374,
       height: 80,
     }}
   >
     <LinkApp {...args} />
   </div>
-)
+);
 Stack.args = {
-  __layout: 'STACK',
-}
+  __layout: "STACK",
+};
 
 export const Grid: ComponentStory<typeof LinkApp> = (args) => (
   <div
-    data-link-type-id={__LINK_TYPE_SLUG__}
+    data-link-type-id={manifest.name}
     style={{
-      margin: '0.5rem',
+      margin: "0.5rem",
       width: 183,
       height: 240,
     }}
   >
     <LinkApp {...args} />
   </div>
-)
+);
 Grid.args = {
-  __layout: 'GRID',
-}
+  __layout: "GRID",
+};
 
 export const Carousel: ComponentStory<typeof LinkApp> = (args) => (
   <div
-    data-link-type-id={__LINK_TYPE_SLUG__}
+    data-link-type-id={manifest.name}
     style={{
-      margin: '0.5rem',
+      margin: "0.5rem",
       width: 224,
       height: 296,
     }}
   >
     <LinkApp {...args} />
   </div>
-)
+);
 Carousel.args = {
-  __layout: 'CAROUSEL',
-}
+  __layout: "CAROUSEL",
+};
 
 export const Featured: ComponentStory<typeof LinkApp> = (args) => (
   <div
-    data-link-type-id={__LINK_TYPE_SLUG__}
+    data-link-type-id={manifest.name}
     style={{
-      margin: '0.5rem',
+      margin: "0.5rem",
       width: 374,
       height: 374,
     }}
   >
     <LinkApp {...args} />
   </div>
-)
+);
 Featured.args = {
-  __layout: 'FEATURED',
-}
+  __layout: "FEATURED",
+};