@linktr.ee/create-link-app 0.3.0-next.4 → 0.3.0-next.40

package/README.md

@@ -23,10 +23,12 @@ 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 login`](#create-link-app-login)
 * [`create-link-app logout`](#create-link-app-logout)
+* [`create-link-app storybook`](#create-link-app-storybook)
 
 ## `create-link-app build`
 
@@ -106,6 +108,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
@@ -143,7 +157,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.2.13/src/commands/help.ts)_
 
 ## `create-link-app login`
 
@@ -168,4 +182,19 @@ USAGE
 DESCRIPTION
   Logout and clear browser session
 ```
+
+## `create-link-app storybook`
+
+Start the Storybook development server
+
+```
+USAGE
+  $ create-link-app storybook [-p <value>]
+
+FLAGS
+  -p, --port=<value>  [default: 6006] Port to run the Storybook server on
+
+DESCRIPTION
+  Start the Storybook development server
+```
 <!-- commandsstop -->

package/dist/commands/build.js

@@ -10,9 +10,10 @@ const webpack_config_1 = __importDefault(require("../webpack/webpack.config"));
 class Build extends base_1.default {
     async run() {
         const { flags } = await this.parse(Build);
-        (0, webpack_1.default)((0, webpack_config_1.default)('production', {
+        const config = await (0, webpack_config_1.default)('production', {
             allowAnyOrigin: flags['allow-any-origin'],
-        }), (err, stats) => {
+        });
+        (0, webpack_1.default)(config, (err, stats) => {
             if (err) {
                 this.error(err);
             }
@@ -25,7 +26,6 @@ class Build extends base_1.default {
         });
     }
 }
-exports.default = Build;
 Build.description = 'Build Link App project to static assets used for production';
 Build.flags = {
     'allow-any-origin': core_1.Flags.boolean({
@@ -33,3 +33,4 @@ Build.flags = {
         hidden: true,
     }),
 };
+exports.default = Build;

package/dist/commands/create.js

@@ -25,7 +25,6 @@ class Create extends base_1.default {
         this.log(`    ${useYarn ? 'yarn dev' : 'npm run dev'}\n`);
     }
 }
-exports.default = Create;
 Create.description = 'Initialize a new Link App project';
 Create.examples = [
     '$ create-link-app create my-link-app',
@@ -51,3 +50,4 @@ Create.flags = {
         description: 'Path to create the project in',
     }),
 };
+exports.default = Create;

package/dist/commands/deploy.js

@@ -35,7 +35,6 @@ class Deploy extends base_1.default {
         }
     }
 }
-exports.default = Deploy;
 Deploy.description = 'Deploy your Link App and test it on Linktr.ee';
 Deploy.flags = {
     path: core_1.Flags.string({
@@ -58,3 +57,4 @@ Deploy.flags = {
         hidden: true,
     }),
 };
+exports.default = Deploy;

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,11 +19,10 @@ 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();
     }
 }
-exports.default = Dev;
 Dev.description = 'Start development server for Link App project';
 Dev.examples = ['$ create-link-app dev', '$ create-link-app dev --port 8000', '$ create-link-app dev --https'];
 Dev.flags = {
@@ -35,3 +35,4 @@ Dev.flags = {
         description: 'Use HTTPS for development server',
     }),
 };
+exports.default = Dev;

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;
+    }
+}
+GenerateTypes.description = 'Generate Typescript types from the schema definitions';
+exports.default = GenerateTypes;

package/dist/commands/grant-access.js

@@ -37,7 +37,6 @@ class GrantAccess extends base_1.default {
         }
     }
 }
-exports.default = GrantAccess;
 GrantAccess.description = 'Grant access to other developers to push updates for your Link App';
 GrantAccess.examples = ['$ create-link-app grant-access my-link-app friend'];
 GrantAccess.args = [
@@ -62,3 +61,4 @@ GrantAccess.flags = {
         hidden: true,
     }),
 };
+exports.default = GrantAccess;

package/dist/commands/login.js

@@ -30,7 +30,6 @@ class Login extends base_1.default {
         }
     }
 }
-exports.default = Login;
 Login.description = 'Login using your Linktree credentials to deploy Link Apps';
 Login.flags = {
     qa: core_1.Flags.boolean({
@@ -38,3 +37,4 @@ Login.flags = {
         hidden: true,
     }),
 };
+exports.default = Login;

package/dist/commands/logout.js

@@ -20,7 +20,6 @@ class Logout extends base_1.default {
         this.log(`If browser did not open automatically, please go to the following link to logout from the browser: ${url}`);
     }
 }
-exports.default = Logout;
 Logout.description = 'Logout and clear browser session';
 Logout.flags = {
     qa: core_1.Flags.boolean({
@@ -28,3 +27,4 @@ Logout.flags = {
         hidden: true,
     }),
 };
+exports.default = Logout;

package/dist/commands/storybook.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@oclif/core");
+const child_process_1 = require("child_process");
+const base_1 = __importDefault(require("../base"));
+const path_1 = __importDefault(require("path"));
+class Storybook extends base_1.default {
+    async run() {
+        const configPath = path_1.default.resolve(__dirname, '..', 'storybook');
+        const { flags } = await this.parse(Storybook);
+        const storybook = (0, child_process_1.spawn)(`start-storybook -p ${flags.port} -c ${configPath}`, { shell: true, stdio: 'inherit' });
+        storybook.on('error', (err) => {
+            throw err;
+        });
+    }
+}
+Storybook.description = 'Start the Storybook development server';
+Storybook.flags = {
+    port: core_1.Flags.integer({
+        char: 'p',
+        description: 'Port to run the Storybook server on',
+        default: 6006,
+    }),
+};
+exports.default = Storybook;

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

@@ -14,6 +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`);
+    }
     // update `name` field in project manifest
     const manifest = await fs_extra_1.default.readJson(`${targetDir}/manifest.json`);
     manifest.name = (0, project_name_to_title_1.default)(path_1.default.basename(targetDir));

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,7 +36,7 @@ async function packProject() {
             gzipOptions: { level: 9 },
         });
         archive.on('warning', (err) => {
-            if (err.code === 'ENOENT') {
+            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') {
@@ -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

@@ -0,0 +1,31 @@
+"use strict";
+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 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

@@ -0,0 +1,53 @@
+"use strict";
+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 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: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        {
+            name: 'storybook-addon-turbo-build',
+            options: {
+                optimizationLevel: 2,
+            },
+        },
+        {
+            /**
+             * Fix Storybook issue with PostCSS@8
+             * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
+             */
+            name: '@storybook/addon-postcss',
+            options: {
+                cssLoaderOptions: { importLoaders: 1 },
+                postcssLoaderOptions: {
+                    implementation: postcss_1.default,
+                    postcssOptions: (0, postcss_config_1.getPostcssConfig)({ linkTypeSlug, env: 'storybook' }),
+                },
+            },
+        },
+    ],
+    framework: '@storybook/react',
+    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),
+            }));
+        }
+        return config;
+    },
+};
+module.exports = config;

package/dist/storybook/preview.js

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