@linktr.ee/create-link-app 0.3.0-next.8 → 1.0.0

package/README.md

@@ -23,8 +23,9 @@ yarn create @linktr.ee/create-link-app my-link-app
 * [`create-link-app create NAME`](#create-link-app-create-name)
 * [`create-link-app deploy`](#create-link-app-deploy)
 * [`create-link-app dev`](#create-link-app-dev)
+* [`create-link-app generate-types`](#create-link-app-generate-types)
 * [`create-link-app grant-access LINK_APP_ID USERNAME`](#create-link-app-grant-access-link_app_id-username)
-* [`create-link-app help [COMMANDS]`](#create-link-app-help-commands)
+* [`create-link-app help [COMMAND]`](#create-link-app-help-command)
 * [`create-link-app login`](#create-link-app-login)
 * [`create-link-app logout`](#create-link-app-logout)
 * [`create-link-app storybook`](#create-link-app-storybook)
@@ -35,7 +36,10 @@ Build Link App project to static assets used for production
 
 ```
 USAGE
-  $ create-link-app build
+  $ create-link-app build [--native]
+
+FLAGS
+  --native  Build native components of a Link App ready for publishing to npm
 
 DESCRIPTION
   Build Link App project to static assets used for production
@@ -107,6 +111,18 @@ EXAMPLES
   $ create-link-app dev --https
 ```
 
+## `create-link-app generate-types`
+
+Generate Typescript types from the schema definitions
+
+```
+USAGE
+  $ create-link-app generate-types
+
+DESCRIPTION
+  Generate Typescript types from the schema definitions
+```
+
 ## `create-link-app grant-access LINK_APP_ID USERNAME`
 
 Grant access to other developers to push updates for your Link App
@@ -126,16 +142,16 @@ EXAMPLES
   $ create-link-app grant-access my-link-app friend
 ```
 
-## `create-link-app help [COMMANDS]`
+## `create-link-app help [COMMAND]`
 
 Display help for create-link-app.
 
 ```
 USAGE
-  $ create-link-app help [COMMANDS] [-n]
+  $ create-link-app help [COMMAND] [-n]
 
 ARGUMENTS
-  COMMANDS  Command to show help for.
+  COMMAND  Command to show help for.
 
 FLAGS
   -n, --nested-commands  Include all nested commands in the output.
@@ -144,7 +160,7 @@ DESCRIPTION
   Display help for create-link-app.
 ```
 
-_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v5.2.9/src/commands/help.ts)_
+_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v5.1.23/src/commands/help.ts)_
 
 ## `create-link-app login`
 
@@ -172,7 +188,7 @@ DESCRIPTION
 
 ## `create-link-app storybook`
 
-Start the Stortybook development server
+Start the Storybook development server
 
 ```
 USAGE
@@ -182,6 +198,6 @@ FLAGS
   -p, --port=<value>  [default: 6006] Port to run the Storybook server on
 
 DESCRIPTION
-  Start the Stortybook development server
+  Start the Storybook development server
 ```
 <!-- commandsstop -->

package/dist/commands/build.js

@@ -7,12 +7,22 @@ const core_1 = require("@oclif/core");
 const webpack_1 = __importDefault(require("webpack"));
 const base_1 = __importDefault(require("../base"));
 const webpack_config_1 = __importDefault(require("../webpack/webpack.config"));
+const child_process_1 = require("child_process");
 class Build extends base_1.default {
     async run() {
         const { flags } = await this.parse(Build);
-        (0, webpack_1.default)((0, webpack_config_1.default)('production', {
-            allowAnyOrigin: flags['allow-any-origin'],
-        }), (err, stats) => {
+        if (flags['native']) {
+            this.native();
+        }
+        else {
+            this.webpack({
+                allowAnyOrigin: flags['allow-any-origin'],
+            });
+        }
+    }
+    async webpack(options) {
+        const config = await (0, webpack_config_1.default)('production', options);
+        (0, webpack_1.default)(config, (err, stats) => {
             if (err) {
                 this.error(err);
             }
@@ -24,6 +34,9 @@ class Build extends base_1.default {
             }
         });
     }
+    async native() {
+        (0, child_process_1.spawn)('npx react-native-builder-bob build', { cwd: process.cwd(), shell: true, stdio: 'inherit' });
+    }
 }
 exports.default = Build;
 Build.description = 'Build Link App project to static assets used for production';
@@ -32,4 +45,7 @@ Build.flags = {
         description: 'Allow Link App iframe to be loadable from non-Linktree origins for debugging',
         hidden: true,
     }),
+    native: core_1.Flags.boolean({
+        description: 'Build native components of a Link App ready for publishing to npm',
+    }),
 };

package/dist/commands/dev.js

@@ -11,6 +11,7 @@ const webpack_config_1 = __importDefault(require("../webpack/webpack.config"));
 class Dev extends base_1.default {
     async run() {
         const { flags } = await this.parse(Dev);
+        const config = await (0, webpack_config_1.default)('development');
         const devServer = new webpack_dev_server_1.default({
             client: {
                 overlay: false,
@@ -18,7 +19,7 @@ class Dev extends base_1.default {
             hot: false,
             https: flags.https,
             port: flags.port,
-        }, (0, webpack_1.default)((0, webpack_config_1.default)('development')));
+        }, (0, webpack_1.default)(config));
         await devServer.start();
     }
 }

package/dist/commands/generate-types.js

@@ -0,0 +1,111 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const base_1 = __importDefault(require("../base"));
+const child_process_1 = require("child_process");
+class MissingDependencyException extends Error {
+    constructor(packageName) {
+        super(`'${packageName}' is required on your system. Please refer to the create-link-app README`);
+    }
+}
+const ucfirst = (str) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};
+class GenerateTypes extends base_1.default {
+    constructor() {
+        super(...arguments);
+        this.schemaDirPath = path_1.default.join(process.cwd(), '/schema');
+        this.tmpPath = path_1.default.join(process.cwd(), '/__temp__');
+        this.typesPath = path_1.default.join(process.cwd(), '/src/types/schema');
+    }
+    async run() {
+        try {
+            // Check for necessary deps
+            await this.dependOn('npx');
+            await this.dependOn('jtd-codegen');
+            await this.log('✓ All dependencies present');
+            // Ensure necessary directories exist
+            await this.cmd(`mkdir -p ${this.tmpPath} && touch ${this.tmpPath}/index.ts`);
+            await this.cmd(`mkdir -p ${this.typesPath} && touch ${this.typesPath}/index.ts`);
+            await this.log('✓ Files prepped for generation');
+            // Wipe existing types & drop comments
+            await this.cmd(`> ${this.typesPath}/index.ts`);
+            await this.cmd(`echo "/**" >> ${this.typesPath}/index.ts`);
+            await this.cmd(`echo " * These types were autogenerated by @linktr.ee/create-link-app" >> ${this.typesPath}/index.ts`);
+            await this.cmd(`echo " * https://www.npmjs.com/package/@linktr.ee/create-link-app " >> ${this.typesPath}/index.ts`);
+            await this.cmd(`echo " */" >> ${this.typesPath}/index.ts`);
+            // Generate and append types
+            await this.generateAndAppendSchemaType('editablePublic');
+            await this.log('✓ Generated EditablePublicData type');
+            await this.generateAndAppendSchemaType('readonlyPublic');
+            await this.log('✓ Generated ReadonlyPublicData type');
+            await this.generateAndAppendSchemaType('editablePrivate');
+            await this.log('✓ Generated EditablePrivateData type');
+            await this.generateAndAppendSchemaType('readonlyPrivate');
+            await this.log('✓ Generated ReadonlyPrivateData type');
+            // Clean up file formatting
+            await this.cmd(`npx prettier ${this.typesPath}/index.ts --write`);
+            await this.log('✓ All types created successfully');
+            // Garbage collect temporary dir
+            await this.cmd(`rm -rf ${this.tmpPath}`);
+            await this.log('✓ Cleanup complete');
+        }
+        catch (e) {
+            await this.log(`𐄂 ERROR: ${e}`);
+        }
+    }
+    /**
+     * Generates a Typescript type for the schema defined in schema/<schemaName>.jtd.json
+     * and appends that type to src/types/schema/index.ts
+     */
+    async generateAndAppendSchemaType(schemaName) {
+        // Generate schema
+        await this.cmd(`jtd-codegen ${this.schemaDirPath}/${schemaName}.jtd.json --typescript-out ${this.tmpPath} --root-name=${ucfirst(schemaName)}Data`);
+        // Strip jtd comment
+        await this.cmd(`sed '/^\\/\\//d' ${this.tmpPath}/index.ts > ${this.tmpPath}/parsed.ts`);
+        // Append to final file
+        await this.cmd(`cat ${this.tmpPath}/parsed.ts >> ${this.typesPath}/index.ts`);
+    }
+    async dependOn(dependencyName) {
+        try {
+            await this.cmd(`command -v ${dependencyName} || exit 1`);
+        }
+        catch (e) {
+            throw new MissingDependencyException('prettier');
+        }
+    }
+    /**
+     * Run a command with spawn effectively synchronously
+     */
+    async cmd(command, opts = {
+        shell: true,
+        stdio: 'ignore',
+    }, onError) {
+        await new Promise((resolve, reject) => {
+            (0, child_process_1.spawn)(command, opts)
+                .on('error', (e) => {
+                reject(e);
+            })
+                .on('exit', (code) => {
+                if (code === 1)
+                    reject({ exitCode: code });
+            })
+                .on('close', () => {
+                resolve();
+            });
+        }).catch((e) => {
+            if (onError) {
+                onError();
+            }
+            else {
+                throw e;
+            }
+        });
+        return;
+    }
+}
+exports.default = GenerateTypes;
+GenerateTypes.description = 'Generate Typescript types from the schema definitions';

package/dist/commands/storybook.js

@@ -18,7 +18,7 @@ class Storybook extends base_1.default {
     }
 }
 exports.default = Storybook;
-Storybook.description = 'Start the Stortybook development server';
+Storybook.description = 'Start the Storybook development server';
 Storybook.flags = {
     port: core_1.Flags.integer({
         char: 'p',

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

@@ -14,8 +14,9 @@ const createProject = async (template, targetDir) => {
     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 (await fs_extra_1.default.existsSync(`${targetDir}/src/types/global.d.ts`)) {
-        await fs_extra_1.default.unlink(`${targetDir}/src/types/global.d.ts`);
+    // 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`);
     }
     // update `name` field in project manifest
     const manifest = await fs_extra_1.default.readJson(`${targetDir}/manifest.json`);

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

@@ -12,11 +12,6 @@ const RequiredAssets = [
         fileName: 'manifest.json',
         contentType: 'application/json',
     },
-    {
-        key: 'settings',
-        fileName: 'settings.json',
-        contentType: 'application/json',
-    },
     {
         key: 'package',
         fileName: 'package.tgz',
@@ -29,11 +24,21 @@ const OptionalAssets = [
         fileName: 'icon.svg',
         contentType: 'image/svg+xml',
     },
+    {
+        key: 'settings',
+        fileName: 'settings.json',
+        contentType: 'application/json',
+    },
     {
         key: 'url_match_rules',
         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

@@ -8,7 +8,13 @@ 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:
+ * - `schema/editablePublic.jtd.json`
+ * - `schema/readonlyPublic.jtd.json`
+ * - `schema/editablePrivate.jtd.json`
+ * - `schema/readonlyPrivate.jtd.json`
+ * - `schema/system.jtd.json`
  * - `src/`
+ * - `schema.json`
  * - `package.json`
  * - `package-lock.json` - *optional*
  * - `yarn.lock` - *optional*
@@ -30,10 +36,10 @@ async function packProject() {
             gzipOptions: { level: 9 },
         });
         archive.on('warning', (err) => {
-            if (err.code === 'ENOENT') {
-                // lock files and tsconfig may or may not exist
+            if (err?.code === 'ENOENT') {
+                // package, 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') {
+                if (fileName === 'package.json' || fileName === 'package-lock.json' || fileName === 'yarn.lock' || fileName === 'tsconfig.json') {
                     return;
                 }
             }
@@ -43,6 +49,11 @@ async function packProject() {
             handleFailure(err);
         });
         archive.pipe(outputWriteStream);
+        archive.file(resolveProjPath('schema/editablePublic.jtd.json'), { name: 'schema/editablePublic.jtd.json' });
+        archive.file(resolveProjPath('schema/readonlyPublic.jtd.json'), { name: 'schema/readonlyPublic.jtd.json' });
+        archive.file(resolveProjPath('schema/editablePrivate.jtd.json'), { name: 'schema/editablePrivate.jtd.json' });
+        archive.file(resolveProjPath('schema/readonlyPrivate.jtd.json'), { name: 'schema/readonlyPrivate.jtd.json' });
+        archive.file(resolveProjPath('schema/system.jtd.json'), { name: 'schema/system.jtd.json' });
         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' });

package/dist/lib/schema/compile.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+const jtd_js_1 = __importDefault(require("ajv/dist/jtd.js"));
+const index_js_1 = __importDefault(require("ajv/dist/standalone/index.js"));
+const schemaNames = ['editablePublic', 'readonlyPublic', 'editablePrivate', 'readonlyPrivate', 'system'];
+async function compileSchema() {
+    try {
+        const ajv = new jtd_js_1.default({
+            // @ts-expect-error: In JTD mode some options are not typed correctly.
+            strict: false,
+            code: { source: true, esm: true },
+        });
+        await Promise.all(schemaNames.map(async (schemaName) => {
+            const schemaPath = path_1.default.join(process.cwd(), `./schema/${schemaName}.jtd.json`);
+            const schema = await fs_extra_1.default.readJSON(schemaPath);
+            ajv.addSchema(schema, schemaName);
+        }));
+        const moduleCode = (0, index_js_1.default)(ajv);
+        return moduleCode;
+    }
+    catch (e) {
+        console.error(e);
+    }
+}
+exports.default = compileSchema;

package/dist/postcss/postcss.config.js

@@ -3,18 +3,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPostcssConfig = void 0;
 const path_1 = __importDefault(require("path"));
 const tailwindcss_1 = __importDefault(require("tailwindcss"));
 const autoprefixer_1 = __importDefault(require("autoprefixer"));
 const componentLibraryContentPath = path_1.default.join(require.resolve('@linktr.ee/component-library/tailwind.config').split('/').slice(0, -1).join('/'), 'dist', '**', '*.js');
-const config = {
-    plugins: [
-        (0, tailwindcss_1.default)({
-            content: [`${process.cwd()}/src/**/*.{js,jsx,ts,tsx}`, componentLibraryContentPath],
-            presets: [require('@linktr.ee/component-library/tailwind.config')],
-            plugins: [],
-        }),
-        (0, autoprefixer_1.default)(),
-    ],
-};
-module.exports = config;
+const uiLinkKitPath = path_1.default.join(require.resolve('@linktr.ee/ui-link-kit').split('/').slice(0, -2).join('/'), '**', '*.js');
+function getPostcssConfig({ linkTypeSlug, env = 'production' }) {
+    const isStorybook = env === 'storybook';
+    const content = [`${process.cwd()}/src/**/*.{js,jsx,ts,tsx}`, uiLinkKitPath];
+    if (isStorybook) {
+        content.push(componentLibraryContentPath);
+    }
+    return {
+        ...(isStorybook && { inject: { insertAtTop: true } }),
+        plugins: [
+            (0, tailwindcss_1.default)({
+                important: `[data-link-type-id=${linkTypeSlug}]`,
+                content,
+                presets: [require('@linktr.ee/component-library/tailwind.config')],
+                plugins: [],
+            }),
+            (0, autoprefixer_1.default)(),
+        ],
+    };
+}
+exports.getPostcssConfig = getPostcssConfig;

package/dist/storybook/global.css

@@ -0,0 +1,53 @@
+:root {
+  --lt-color-primary: #849589;
+  --lt-color-on-primary: #ffffff;
+  --lt-color-on-primary-alpha: #ffffffb2;
+
+  --lt-color-secondary: #67776b;
+  --lt-color-on-secondary: #ffffffb3;
+
+  --lt-color-background: #3a463c;
+  --lt-color-on-background: #f7fdf9;
+
+  --lt-color0: #ffffff;
+  --lt-color1: #f7fdf9;
+  --lt-color2: #eef6ed;
+  --lt-color3: #e0ece2;
+  --lt-color4: #c9d5cb;
+  --lt-color5: #b6c5b7;
+  --lt-color6: #849589;
+  --lt-color7: #67776b;
+  --lt-color8: #4d5e52;
+  --lt-color9: #3a463c;
+  --lt-color10: #29382d;
+  --lt-color11: #151e16;
+  --lt-color12: #0b140c;
+  --lt-color13: #000501;
+  --lt-color14: #000000;
+  --lt-color15: #000000;
+
+  --lt-treetop-radius-mobile: 2.5rem;
+
+  --lt-cover-radius: 6rem;
+  --lt-cover-radius-mobile: 4rem;
+
+  --lt-feature-container-radius: 2rem;
+  --lt-feature-thumbnail-radius: 1.5rem;
+
+  --lt-carousel-container-radius: 1.5rem;
+  --lt-carousel-thumbnail-radius: 1rem;
+
+  --lt-grid-container-radius: 1.25rem;
+  --lt-grid-thumbnail-radius: 0.75rem;
+
+  --lt-stack-container-radius: 1rem;
+  --lt-stack-thumbnail-radius: 0.65rem;
+
+  --lt-font-family: INTER;
+  --lt-text-2xl: 1.5rem;
+  --lt-text-xl: 1.25rem;
+  --lt-text-lg: 1.125rem;
+  --lt-text-md: 1rem;
+  --lt-text-sm: 0.875rem;
+  --lt-text-xs: 0.75rem;
+}

package/dist/storybook/main.js

@@ -1,33 +1,14 @@
 "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 postcss_1 = __importDefault(require("postcss"));
-const postcssOptions = __importStar(require("../postcss/postcss.config"));
+const webpack_1 = __importDefault(require("webpack"));
+const postcss_config_1 = require("../postcss/postcss.config");
+// Do not need to be the real values, just need to be defined for storybook
+const linkTypeSlug = 'test-id';
+const linkTypeId = 'testId';
 const config = {
     stories: [`${process.cwd()}/src/**/*.stories.@(js|jsx|ts|tsx)`],
     addons: [
@@ -49,7 +30,7 @@ const config = {
                 cssLoaderOptions: { importLoaders: 1 },
                 postcssLoaderOptions: {
                     implementation: postcss_1.default,
-                    postcssOptions: { ...postcssOptions },
+                    postcssOptions: (0, postcss_config_1.getPostcssConfig)({ linkTypeSlug, env: 'storybook' }),
                 },
             },
         },
@@ -58,5 +39,24 @@ const config = {
     core: {
         builder: 'webpack5',
     },
+    webpackFinal: async (config) => {
+        if (config.plugins?.length) {
+            // Add the DefinePlugin to the Webpack plugins array
+            config.plugins.push(new webpack_1.default.DefinePlugin({
+                __LINK_TYPE_ID__: JSON.stringify(linkTypeId),
+                __LINK_TYPE_SLUG__: JSON.stringify(linkTypeSlug),
+            }));
+        }
+        config.module?.rules?.push({
+            test: /\.(ts|tsx)$/,
+            use: [
+                {
+                    loader: require.resolve('ts-loader'),
+                },
+            ],
+        });
+        config.resolve?.extensions?.push('.ts', '.tsx');
+        return config;
+    },
 };
 module.exports = config;

package/dist/storybook/preview.js

@@ -1,6 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parameters = void 0;
+exports.decorators = exports.parameters = void 0;
+const react_1 = __importDefault(require("react"));
+require("./global.css");
 exports.parameters = {
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
@@ -10,3 +15,7 @@ exports.parameters = {
         },
     },
 };
+const WrapperDecorator = (storyFn) => (react_1.default.createElement("div", { style: {
+        display: 'contents',
+    }, "data-link-type-id": __LINK_TYPE_SLUG__ }, storyFn()));
+exports.decorators = [WrapperDecorator];