@linktr.ee/create-link-app 0.1.0

package/dist/lib/create/install-dependencies.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const child_process_1 = require("child_process");
+const installDependencies = (targetDir, useYarn) => {
+    const command = useYarn ? 'yarn' : 'npm';
+    const args = useYarn ? [] : ['install'];
+    (0, child_process_1.spawnSync)(command, args, {
+        cwd: targetDir,
+    });
+};
+exports.default = installDependencies;

package/dist/lib/create/is-using-yarn.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const isUsingYarn = () => {
+    return (process.env.npm_config_user_agent ?? '').includes('yarn');
+};
+exports.default = isUsingYarn;

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

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const form_data_1 = __importDefault(require("form-data"));
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const RequiredAssets = [
+    {
+        key: 'manifest',
+        fileName: 'manifest.json',
+        contentType: 'application/json',
+    },
+    {
+        key: 'settings',
+        fileName: 'settings.json',
+        contentType: 'application/json',
+    },
+    {
+        key: 'package',
+        fileName: 'package.tgz',
+        contentType: 'application/gzip',
+    },
+];
+const OptionalAssets = [
+    {
+        key: 'icon',
+        fileName: 'icon.svg',
+        contentType: 'image/svg+xml',
+    },
+    {
+        key: 'url_match_rules',
+        fileName: 'url_match_rules.json',
+        contentType: 'application/json',
+    },
+];
+/**
+ * Create a readable multipart/form-data stream which includes the Link App asset files.
+ */
+function createFormData(assetPath = process.cwd()) {
+    const form = new form_data_1.default();
+    RequiredAssets.forEach((asset) => {
+        const filePath = path_1.default.resolve(assetPath, asset.fileName);
+        if (!fs_1.default.existsSync(filePath)) {
+            throw new Error(`Missing asset file: ${asset.fileName}`);
+        }
+        const stream = fs_1.default.createReadStream(filePath);
+        form.append(asset.key, stream, { contentType: asset.contentType });
+    });
+    OptionalAssets.forEach((asset) => {
+        const filePath = path_1.default.resolve(assetPath, asset.fileName);
+        if (fs_1.default.existsSync(filePath)) {
+            const stream = fs_1.default.createReadStream(filePath);
+            form.append(asset.key, stream, { contentType: asset.contentType });
+        }
+    });
+    return form;
+}
+exports.default = createFormData;

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

@@ -0,0 +1,55 @@
+"use strict";
+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 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/`
+ * - `package.json`
+ * - `package-lock.json` - *optional*
+ * - `yarn.lock` - *optional*
+ * - `tsconfig.json` - *optional*
+ */
+async function packProject() {
+    return new Promise((resolve, reject) => {
+        const outputPath = resolveProjPath('package.tgz');
+        const outputWriteStream = fs_1.default.createWriteStream(outputPath);
+        const handleSuccess = () => resolve();
+        const handleFailure = (err) => {
+            // remove success handler because 'close' is still emitted on error
+            outputWriteStream.removeListener('close', handleSuccess);
+            reject(err);
+        };
+        outputWriteStream.on('close', handleSuccess);
+        const archive = (0, archiver_1.default)('tar', {
+            gzip: true,
+            gzipOptions: { level: 9 },
+        });
+        archive.on('warning', (err) => {
+            if (err.code === 'ENOENT') {
+                // lock files and tsconfig may or may not exist
+                const fileName = path_1.default.basename(err.path);
+                if (fileName === 'package-lock.json' || fileName === 'yarn.lock' || fileName === 'tsconfig.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');
+        archive.finalize();
+    });
+}
+const resolveProjPath = (relativePath) => path_1.default.resolve(process.cwd(), relativePath);
+exports.default = packProject;

package/dist/lib/deploy/upload-assets.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const axios_1 = __importDefault(require("axios"));
+async function uploadAssets(url, formData, accessToken, update, forceUpdate) {
+    const uploadMethod = update ? axios_1.default.put : axios_1.default.post;
+    const headers = formData.getHeaders();
+    headers['Authorization'] = `Bearer ${accessToken}`;
+    if (update && forceUpdate) {
+        headers['force-update'] = 'true';
+    }
+    const res = await uploadMethod(url, formData, { headers });
+    return res.data;
+}
+exports.default = uploadAssets;

package/dist/lib/fetch-app-config.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const axios_1 = __importDefault(require("axios"));
+const fetchAppConfig = async (stage = 'production') => {
+    const configUrl = `https://link-types-assets.${stage}.linktr.ee/application-config/create-link-cli.json`;
+    try {
+        const response = await axios_1.default.get(configUrl);
+        return response.data;
+    }
+    catch (err) {
+        if (axios_1.default.isAxiosError(err)) {
+            throw new Error(err.message);
+        }
+        throw err;
+    }
+};
+exports.default = fetchAppConfig;

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/webpack/development.entry.js

@@ -0,0 +1,59 @@
+"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 react_1 = __importStar(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const extension_1 = __importDefault(require("@linktr.ee/extension"));
+const extension_dev_data_1 = __importDefault(require("@linktr.ee/extension-dev-data"));
+const root = document.getElementById('root');
+const App = () => {
+    // TODO: refactor common postMessage to parent in both entry points
+    (0, react_1.useEffect)(() => {
+        const message = {
+            type: 'extension-ready',
+            data: {
+                ready: true,
+                height: root.clientHeight,
+            },
+        };
+        window.parent.postMessage(message, '*');
+    }, []);
+    if (window.location.search === '?embed') {
+        return react_1.default.createElement(extension_1.default, { ...extension_dev_data_1.default });
+    }
+    else {
+        return (react_1.default.createElement("iframe", { src: `${window.location}?embed`, sandbox: ['allow-scripts', 'allow-same-origin', 'allow-popups', 'allow-popups-to-escape-sandbox'].join(' '), scrolling: "no", frameBorder: 0, style: {
+                display: 'block',
+                margin: '0 auto',
+                width: '1px',
+                minWidth: '680px',
+                height: '100vh',
+            } }));
+    }
+};
+react_dom_1.default.render(react_1.default.createElement(App, null), root);

package/dist/webpack/production.entry.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const extension_1 = __importDefault(require("@linktr.ee/extension"));
+const root = document.getElementById('root');
+// First set up event handler for extension data
+window.addEventListener('message', function handler(event) {
+    if (!__ALLOW_ANY_ORIGIN__) {
+        if (!/^https:\/\/(qa\.)?linktr.ee$/.test(event.origin))
+            return;
+    }
+    if (event.data?.type !== 'extension-data')
+        return;
+    renderApp(event.data?.data ?? {});
+    window.removeEventListener('message', handler);
+});
+// Then send extension-loaded event
+window.parent.postMessage({ type: 'extension-loaded' }, '*');
+// Send interaction events on components to the parent window for processing
+document.addEventListener('interaction-event', (event) => window.parent.postMessage({ type: 'interaction-event', data: event.detail }, '*'));
+const renderApp = (data) => {
+    const App = () => react_1.default.createElement(extension_1.default, { ...data });
+    react_dom_1.default.render(react_1.default.createElement(App, null), root, postExtensionReadyMessage);
+};
+const postExtensionReadyMessage = () => {
+    const message = {
+        type: 'extension-ready',
+        data: {
+            ready: true,
+            height: root.clientHeight,
+        },
+    };
+    window.parent.postMessage(message, '*');
+};

package/dist/webpack/webpack.config.js

@@ -0,0 +1,113 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
+const fs_1 = __importDefault(require("fs"));
+const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
+const inject_body_webpack_plugin_1 = __importDefault(require("inject-body-webpack-plugin"));
+const path_1 = __importDefault(require("path"));
+const webpack_1 = require("webpack");
+function default_1(env, options) {
+    const appDir = process.cwd();
+    const entryFile = path_1.default.resolve(__dirname, `${env}.entry`);
+    const htmlTemplateFile = path_1.default.resolve(__dirname, '..', '..', 'html-template', `${env}.html`);
+    const hasTsconfig = fileExists(path_1.default.resolve(appDir, 'tsconfig.json'));
+    const config = {
+        target: 'web',
+        mode: env,
+        entry: entryFile,
+        output: {
+            publicPath: '',
+            path: path_1.default.resolve(appDir, 'dist'),
+            assetModuleFilename: 'images/[hash][ext][query]',
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.(js|jsx|ts|tsx)$/,
+                    exclude: /node_modules/,
+                    loader: require.resolve('babel-loader'),
+                    options: {
+                        presets: [
+                            require.resolve('@babel/preset-env'),
+                            require.resolve('@babel/preset-typescript'),
+                            [require.resolve('@babel/preset-react'), { runtime: 'automatic' }],
+                        ],
+                        plugins: [require.resolve('@babel/plugin-transform-runtime')],
+                    },
+                },
+                {
+                    test: /\.(png|jpe?g|gif)$/i,
+                    type: 'asset/resource',
+                },
+            ],
+        },
+        resolve: {
+            extensions: ['.ts', '.tsx', '.js', '.jsx'],
+            // Resolve `react` and `react-dom` in entry file from the app modules
+            // TODO: The behaviour here with module resolution is confusing, can we make it more explicit?
+            modules: [path_1.default.resolve(appDir, 'node_modules'), 'node_modules'],
+            alias: {
+                '@linktr.ee/extension': path_1.default.resolve(appDir, 'src'),
+            },
+        },
+        plugins: [
+            new html_webpack_plugin_1.default({
+                template: htmlTemplateFile,
+            }),
+        ],
+    };
+    // Type checking on a separate process - @babel/preset-typescript only handles transpilation
+    if (hasTsconfig) {
+        config.plugins.push(new fork_ts_checker_webpack_plugin_1.default());
+    }
+    if (env === 'development') {
+        config.devtool = 'cheap-module-source-map';
+        config.resolve.alias = {
+            ...config.resolve.alias,
+            '@linktr.ee/extension-dev-data': path_1.default.resolve(appDir, 'fixtures', 'props-data.json'),
+        };
+    }
+    if (env === 'production') {
+        config.externals = {
+            react: 'React',
+            'react-dom': 'ReactDOM',
+            'styled-components': 'styled',
+        };
+        config.performance = {
+            maxEntrypointSize: 1048576,
+            maxAssetSize: 350000,
+            hints: 'warning',
+        };
+        config.plugins.push(new webpack_1.DefinePlugin({
+            __ALLOW_ANY_ORIGIN__: options?.allowAnyOrigin,
+        }), 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        new inject_body_webpack_plugin_1.default({
+            position: 'start',
+            content: `<!-- ${getBuildInfo()} -->`,
+        }));
+    }
+    return config;
+}
+exports.default = default_1;
+const getBuildInfo = () => {
+    const buildInfo = [`built at: ${new Date().toISOString()}`];
+    if (typeof process.env?.BUILDKITE_BUILD_ID === 'string' && process.env.BUILDKITE_BUILD_ID.length) {
+        buildInfo.push(`buildId: ${process.env.BUILDKITE_BUILD_ID}`);
+    }
+    return buildInfo.join(' ');
+};
+const fileExists = (path) => {
+    try {
+        fs_1.default.accessSync(path);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};

package/html-template/development.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <base target="_blank" />
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <script crossorigin src="https://unpkg.com/iframe-resizer@4.3.2/js/iframeResizer.contentWindow.js"></script>
+  <title>Extension Link</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>

package/html-template/production.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <base target="_blank" />
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Extension Link</title>
+  <script crossorigin src="https://unpkg.com/react-is@17.0.2/umd/react-is.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/styled-components@5.2.1/dist/styled-components.js"></script>
+  <script crossorigin src="https://unpkg.com/iframe-resizer@4.3.2/js/iframeResizer.contentWindow.min.js"></script>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>

package/oclif.manifest.json

@@ -0,0 +1 @@
+{"version":"0.1.0","commands":{"build":{"id":"build","description":"Build Link App project to static assets used for production","strict":true,"pluginName":"@linktr.ee/create-link-app","pluginAlias":"@linktr.ee/create-link-app","pluginType":"core","aliases":[],"flags":{"allow-any-origin":{"name":"allow-any-origin","type":"boolean","description":"Allow Link App iframe to be loadable from non-Linktree origins for debugging","hidden":true,"allowNo":false}},"args":[],"_globalFlags":{}},"create":{"id":"create","description":"Initialize a new Link App project","strict":true,"pluginName":"@linktr.ee/create-link-app","pluginAlias":"@linktr.ee/create-link-app","pluginType":"core","aliases":[],"examples":["$ create-link-app create my-link-app","$ create-link-app create my-link-app --template react","$ create-link-app create my-link-app --path my/custom/path"],"flags":{"template":{"name":"template","type":"option","char":"t","description":"Template to use for the project","multiple":false,"options":["react","react-ts"],"default":"react-ts"},"path":{"name":"path","type":"option","char":"p","description":"Path to create the project in","multiple":false}},"args":[{"name":"name","description":"Name of the Link App","required":true}],"_globalFlags":{}},"deploy":{"id":"deploy","description":"Deploy your Link App and test it on Linktr.ee","strict":true,"pluginName":"@linktr.ee/create-link-app","pluginAlias":"@linktr.ee/create-link-app","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","char":"p","description":"Specify custom path to project directory","multiple":false},"update":{"name":"update","type":"boolean","description":"Push update for existing Link App","allowNo":false},"endpoint":{"name":"endpoint","type":"option","description":"Custom API endpoint to push assets to","hidden":true,"multiple":false},"qa":{"name":"qa","type":"boolean","description":"Use QA environment","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","hidden":true,"allowNo":false}},"args":[],"_globalFlags":{}},"dev":{"id":"dev","description":"Start development server for Link App project","strict":true,"pluginName":"@linktr.ee/create-link-app","pluginAlias":"@linktr.ee/create-link-app","pluginType":"core","aliases":[],"examples":["$ create-link-app dev","$ create-link-app dev --port 8000","$ create-link-app dev --https"],"flags":{"port":{"name":"port","type":"option","char":"p","description":"Development server listening port","multiple":false,"default":3000},"https":{"name":"https","type":"boolean","description":"Use HTTPS for development server","allowNo":false}},"args":[],"_globalFlags":{}},"grant-access":{"id":"grant-access","description":"Grant access to other developers to push updates for your Link App","strict":true,"pluginName":"@linktr.ee/create-link-app","pluginAlias":"@linktr.ee/create-link-app","pluginType":"core","aliases":[],"examples":["$ create-link-app grant-access my-link-app friend"],"flags":{"endpoint":{"name":"endpoint","type":"option","description":"Custom API endpoint to push assets to","hidden":true,"multiple":false},"qa":{"name":"qa","type":"boolean","description":"Use QA environment","hidden":true,"allowNo":false}},"args":[{"name":"link_app_id","description":"The Link App's ID you wish to grant access to","required":true},{"name":"username","description":"The Linktree username of the developer you wish to grant access to","required":true}],"_globalFlags":{}},"login":{"id":"login","description":"Login using your Linktree credentials to deploy Link Apps","strict":true,"pluginName":"@linktr.ee/create-link-app","pluginAlias":"@linktr.ee/create-link-app","pluginType":"core","aliases":[],"flags":{"qa":{"name":"qa","type":"boolean","description":"Use QA environment","hidden":true,"allowNo":false}},"args":[],"_globalFlags":{}},"logout":{"id":"logout","description":"Logout and clear browser session","strict":true,"pluginName":"@linktr.ee/create-link-app","pluginAlias":"@linktr.ee/create-link-app","pluginType":"core","aliases":[],"flags":{"qa":{"name":"qa","type":"boolean","description":"Use QA environment","hidden":true,"allowNo":false}},"args":[],"_globalFlags":{}}}}

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@linktr.ee/create-link-app",
+  "version": "0.1.0",
+  "description": "Create a Link App on Linktr.ee.",
+  "license": "UNLICENSED",
+  "author": "Linktree",
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "bin": {
+    "create-link-app": "./bin/run"
+  },
+  "files": [
+    "/bin",
+    "/dist",
+    "/html-template",
+    "/npm-shrinkwrap.json",
+    "/oclif.manifest.json",
+    "/templates"
+  ],
+  "scripts": {
+    "build": "shx rm -rf dist && tsc -b",
+    "postpack": "shx rm -f oclif.manifest.json",
+    "prepack": "yarn build && oclif manifest && oclif readme",
+    "test": "jest --watch",
+    "test:ci": "jest",
+    "test:cov": "jest --coverage",
+    "version": "oclif readme && git add README.md"
+  },
+  "dependencies": {
+    "@babel/core": "^7.18.2",
+    "@babel/plugin-transform-runtime": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
+    "@babel/preset-typescript": "^7.17.12",
+    "@babel/runtime": "^7.18.3",
+    "@oclif/core": "^1.9.0",
+    "@oclif/plugin-help": "^5.1.12",
+    "archiver": "^5.3.1",
+    "axios": "^0.27.2",
+    "babel-loader": "^8.2.5",
+    "fork-ts-checker-webpack-plugin": "^7.2.11",
+    "form-data": "^4.0.0",
+    "fs-extra": "^10.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "inject-body-webpack-plugin": "^1.3.0",
+    "jsonwebtoken": "^8.5.1",
+    "netrc-parser": "^3.1.6",
+    "openid-client": "^5.1.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.5",
+    "typescript": "^4.7.3",
+    "webpack": "^5.73.0",
+    "webpack-dev-server": "^4.9.2"
+  },
+  "devDependencies": {
+    "@oclif/test": "^2.1.0",
+    "@types/archiver": "^5.3.1",
+    "@types/axios": "^0.14.0",
+    "@types/form-data": "^2.5.0",
+    "@types/fs-extra": "^9.0.13",
+    "@types/jest": "^28.1.1",
+    "@types/jsonwebtoken": "^8.5.8",
+    "@types/react": "^17.0.45",
+    "@types/react-dom": "^17.0.17",
+    "axios-mock-adapter": "^1.21.1",
+    "jest": "^28.1.1",
+    "oclif": "^3.0.1",
+    "shx": "^0.3.4",
+    "ts-jest": "^28.0.4",
+    "ts-node": "^10.8.1",
+    "tslib": "^2.4.0"
+  },
+  "oclif": {
+    "bin": "create-link-app",
+    "dirname": "create-link-app",
+    "default": "create",
+    "commands": "./dist/commands",
+    "plugins": [
+      "@oclif/plugin-help"
+    ]
+  }
+}

package/templates/common/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}

package/templates/common/README.md

@@ -0,0 +1,89 @@
+# Create Link App
+
+This project contains files that form the basis of a new Link App project built with React.
+
+## Getting Started
+
+To start developing your Link App, you can run a local development server on [http://localhost:3000](http://localhost:3000) via:
+
+`npm run dev` or `yarn dev`
+
+Optionally, you can specify a different port or serve over HTTPS. Run command with `--help` for more information.
+
+## File Structure
+
+Several files were created during the bootstrapping of this project. Some of these files play a key role:
+
+| File | Description |
+| --- | --- |
+| `src/index.jsx` | The entry point for your Link App |
+| `manifest.json` | Defines key information about your Link App, and helps users to discover your Link App via the [Linktree Marketplace](https://linktr.ee/marketplace) |
+| `settings.json` | Defines the settings made available to Linktree users when configuring the Link App via [Linktree Admin](https://linktr.ee/admin) |
+| `fixtures/props-data.json` | Used during development, this file acts as mock data for the `settings.json` output, it is injected as props to the entry point component |
+| `url-match-rules.json` | Defines the URL pattern to match against when users add a link on Linktree via URL, its structure follows the [URL Pattern API](https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API) |
+
+## UI Components
+
+Linktree provides a set of flexible UI components via `@linktr.ee/ui-link-kit` to build and customize your Link App. You can check out the list of components in Storybook.
+
+## Deploying Your Link App
+
+When you're ready to test your Link App, you can deploy it in `DRAFT` state and test it on [Linktr.ee](https://linktr.ee). You will require a Linktree account with developer privileges to do this, please contact Linktree if you need access.
+
+### Login
+
+To initiate the login flow, run the following:
+
+`npx @linktr.ee/create-link-app login`
+
+This will open a login page in your default browser. Follow the prompts and sign in with your Linktree account credentials.
+
+Once login is successful, an access token will be stored locally on your machine under `~/.netrc`. Link App deployments will now use this token to authenticate requests.
+
+### Deploy
+
+Before deployment, please ensure that the properties in your `manifest.json` and `settings.json` data are accurate and complete.
+
+Deploy your Link App via:
+
+`npm run deploy` or `yarn deploy`
+
+This will push your Link App assets through to our build pipeline, where upon a successful build, your Link App will be published in `DRAFT` state.
+
+Being in `DRAFT` will limit the Link App from public use and discovery, but you will be able to add the Link App via your Linktree Admin page and profile to validate its functionality.
+
+## Submitting Your Link App for Review
+
+Once you're satisfied that your Link App functions as expected, you can request a review from Linktree to have your Link App submitted to the Linktree Marketplace:
+
+To submit your Link App for review:
+
+**TODO: Submission flow**
+
+Linktree will review and test your Link App, requesting changes if necessary. Following approval, your Link App will be put in the `PUBLISHED` state and made available via the Linktree Marketplace for public use.
+
+## Granting Access to Additional Developers
+
+Once a Link App has been deployed for the first time, the user who deployed it will be set as the `Owner` of the Link App by default. The `Owner` role represents a set of elevated admin-like access privileges granted to the user for actions that can be performed on the Link App. Initially only the `Owner` will have access to retrieve and modify the Link App.
+
+Access to a Link App can be granted to additional users who may need to retrieve data or make changes to the Link App. You can grant a `Maintainer` role to a user for your Link App via the `grant-access` command:
+
+`npx @linktr.ee/create-link-app grant-access <link_app_id> <username>`
+
+Please note the user receiving access must also have a Linktree account with developer privileges. Maintainer access can be granted to as many developer accounts as required.
+
+***Note: Only the Link App Owner can grant Maintainer access to additional users. You must be logged in with an Owner account in order to use the command.***
+
+### Maintainer and Owner Permitted Actions
+
+The following table compares which actions are permitted for Maintainers and Owners:
+
+|Action                     |Owner  |Maintainer|Notes                                          |
+|---------------------------|-------|----------|-----------------------------------------------|
+|Create Link App            |&check;|N/A       |Owner is defined when Link App is first created|
+|Get Link App               |&check;|&check;   |                                               |
+|Update Link App            |&check;|&check;   |                                               |
+|Request Link App review    |&check;|&check;   |                                               |
+|Get Link App maintainers   |&check;|&check;   |                                               |
+|Add new Link App maintainer|&check;|&cross;   |                                               |
+|Remove Link App maintainer |&check;|&cross;   |                                               |

package/templates/common/fixtures/props-data.json

@@ -0,0 +1,4 @@
+{
+  "toggle": true,
+  "your_name": "World"
+}

package/templates/common/gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store