@linktr.ee/create-link-app 0.3.0-next.3 → 0.3.0-next.30

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
@@ -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);
             }

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('prettier');
+            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(`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

@@ -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;
+        });
+    }
+}
+exports.default = Storybook;
+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,
+    }),
+};

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,31 @@
+"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 },
+        });
+        schemaNames.forEach(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 compiled = ajv.compile(true);
+        const moduleCode = (0, index_js_1.default)(ajv, compiled);
+        return moduleCode;
+    }
+    catch (e) {
+        console.error(e);
+    }
+}
+exports.default = compileSchema;

package/dist/postcss/postcss.config.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 });
+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');
+const config = {
+    plugins: [
+        (0, tailwindcss_1.default)({
+            content: [`${process.cwd()}/src/**/*.{js,jsx,ts,tsx}`, componentLibraryContentPath, uiLinkKitPath],
+            presets: [require('@linktr.ee/component-library/tailwind.config')],
+            plugins: [],
+        }),
+        (0, autoprefixer_1.default)(),
+    ],
+};
+module.exports = config;

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,62 @@
+"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 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: { ...postcssOptions },
+                },
+            },
+        },
+    ],
+    framework: '@storybook/react',
+    core: {
+        builder: 'webpack5',
+    },
+};
+module.exports = config;

package/dist/storybook/preview.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parameters = void 0;
+require("./global.css");
+exports.parameters = {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+    },
+};

package/dist/webpack/webpack.config.js

@@ -1,5 +1,28 @@
 "use strict";
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+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 };
 };
@@ -8,18 +31,26 @@ const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checke
 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 mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
 const path_1 = __importDefault(require("path"));
 const webpack_1 = require("webpack");
 const camelcase_1 = __importDefault(require("camelcase"));
 const slugify_1 = __importDefault(require("slugify"));
+const compile_1 = __importDefault(require("../lib/schema/compile"));
+const postcssOptions = __importStar(require("../postcss/postcss.config"));
 const { ModuleFederationPlugin } = webpack_1.container;
-function default_1(env, options) {
+function toVirtualModule(code) {
+    const base64 = Buffer.from(code).toString('base64');
+    return `data:text/javascript;base64,${base64}`;
+}
+async 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 manifestJson = JSON.parse(fs_1.default.readFileSync(path_1.default.resolve(appDir, 'manifest.json'), 'utf8'));
     const linkTypeName = manifestJson.name.replace(/[^A-Za-z0-9 ]/g, '');
-    const linkTypeId = (0, camelcase_1.default)((0, slugify_1.default)(linkTypeName, { lower: true }), { pascalCase: true });
+    const linkTypeSlug = (0, slugify_1.default)(linkTypeName, { lower: true });
+    const linkTypeId = (0, camelcase_1.default)(linkTypeSlug, { pascalCase: true });
     const hasTsconfig = fileExists(path_1.default.resolve(appDir, 'tsconfig.json'));
     const config = {
         target: 'web',
@@ -28,7 +59,9 @@ function default_1(env, options) {
         output: {
             publicPath: 'auto',
             path: path_1.default.resolve(appDir, 'dist'),
-            assetModuleFilename: 'images/[hash][ext][query]',
+            assetModuleFilename: 'images/[hash].[contenthash][ext][query]',
+            chunkFilename: '[id].[contenthash].js',
+            filename: '[name].[contenthash].js',
         },
         module: {
             rules: [
@@ -47,7 +80,20 @@ function default_1(env, options) {
                 },
                 {
                     test: /\.(png|jpe?g|gif|svg)$/i,
-                    type: 'asset/inline',
+                    type: 'asset/inline', // <-- this builds all images into data URLs, is that what you want?
+                },
+                {
+                    test: /\.css$/,
+                    use: [
+                        mini_css_extract_plugin_1.default.loader,
+                        'css-loader',
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                postcssOptions: { ...postcssOptions },
+                            },
+                        },
+                    ],
                 },
             ],
         },
@@ -77,6 +123,7 @@ function default_1(env, options) {
             ...config.resolve.alias,
             '@linktr.ee/extension-dev-data': path_1.default.resolve(appDir, 'fixtures', 'props-data.json'),
         };
+        config.plugins.push(new mini_css_extract_plugin_1.default());
     }
     if (env === 'production') {
         // TODO: Figure out how to manage externals with Module Federation
@@ -104,6 +151,7 @@ function default_1(env, options) {
             filename: 'remoteEntry.js',
             exposes: {
                 ['./App']: path_1.default.resolve(appDir, 'src'),
+                ['./validate']: toVirtualModule((await (0, compile_1.default)())),
             },
             shared: {
                 react: {
@@ -119,6 +167,9 @@ function default_1(env, options) {
                 //   requiredVersion: '5',
                 // },
             },
+        }), new mini_css_extract_plugin_1.default({
+            filename: '[name].[contenthash].css',
+            chunkFilename: '[id].[contenthash].css',
         }));
     }
     return config;

package/html-template/development.html

@@ -13,4 +13,4 @@
   <div id="root"></div>
 </body>
 
-</html>
+</html>

package/html-template/production.html

@@ -17,4 +17,4 @@
   <div id="root"></div>
 </body>
 
-</html>
+</html>

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0-next.3",
+  "version": "0.3.0-next.30",
   "commands": {
     "build": {
       "id": "build",
@@ -139,6 +139,17 @@
       },
       "args": {}
     },
+    "generate-types": {
+      "id": "generate-types",
+      "description": "Generate Typescript types from the schema definitions",
+      "strict": true,
+      "pluginName": "@linktr.ee/create-link-app",
+      "pluginAlias": "@linktr.ee/create-link-app",
+      "pluginType": "core",
+      "aliases": [],
+      "flags": {},
+      "args": {}
+    },
     "grant-access": {
       "id": "grant-access",
       "description": "Grant access to other developers to push updates for your Link App",
@@ -216,6 +227,26 @@
         }
       },
       "args": {}
+    },
+    "storybook": {
+      "id": "storybook",
+      "description": "Start the Storybook development server",
+      "strict": true,
+      "pluginName": "@linktr.ee/create-link-app",
+      "pluginAlias": "@linktr.ee/create-link-app",
+      "pluginType": "core",
+      "aliases": [],
+      "flags": {
+        "port": {
+          "name": "port",
+          "type": "option",
+          "char": "p",
+          "description": "Port to run the Storybook server on",
+          "multiple": false,
+          "default": 6006
+        }
+      },
+      "args": {}
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/create-link-app",
-  "version": "0.3.0-next.3",
+  "version": "0.3.0-next.30",
   "description": "Create a Link App on Linktr.ee.",
   "license": "UNLICENSED",
   "author": "Linktree",
@@ -19,13 +19,14 @@
     "/templates"
   ],
   "scripts": {
-    "build": "shx rm -rf dist && tsc -b",
+    "build": "shx rm -rf dist && tsc -b && yarn copy-storybook-global-css",
     "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"
+    "version": "oclif readme && git add README.md",
+    "copy-storybook-global-css": "cp ./src/storybook/global.css ./dist/storybook/global.css"
   },
   "dependencies": {
     "@babel/core": "^7.18.2",
@@ -34,24 +35,48 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.3",
+    "@linktr.ee/component-library": "^7.0.17",
+    "@linktr.ee/ui-link-kit": "latest",
     "@oclif/core": "^1.9.0",
     "@oclif/plugin-help": "^5.1.12",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@tailwindcss/line-clamp": "^0.4.4",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "14",
+    "ajv": "^8.12.0",
     "archiver": "^5.3.1",
+    "autoprefixer": "^10.4.14",
     "axios": "^0.27.2",
     "babel-loader": "^8.2.5",
     "camelcase": "^6.3.0",
+    "css-loader": "^6.7.3",
     "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",
+    "mini-css-extract-plugin": "^2.7.5",
     "netrc-parser": "^3.1.6",
     "openid-client": "^5.1.6",
+    "postcss": "^8.4.21",
+    "postcss-loader": "^4.3.0",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "slugify": "^1.6.6",
+    "storybook-addon-designs": "^6.3.1",
+    "storybook-addon-turbo-build": "^1.1.0",
+    "style-loader": "^3.3.2",
     "styled-components": "^5.3.5",
+    "tailwindcss": "^3.3.2",
     "typescript": "^4.7.3",
     "webpack": "^5.75.0",
     "webpack-dev-server": "^4.11.1"

package/templates/common/README.md

@@ -14,13 +14,34 @@ Optionally, you can specify a different port or serve over HTTPS. Run command wi
 
 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) |
+| 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)                                                                                                                                                                                                     |
+| `schema/*.jtd.json`        | These files define the shape of the data that is stored for each Link that uses this Link App. They are used to validate the data on the front and back end and to generate Typescript types shared between client and server. The format for these schemas adheres to the [JSON Type Definition](https://jsontypedef.com/), aka [RFC 8927](https://datatracker.ietf.org/doc/html/rfc8927), standard. |
+
+## Generating types from your `schema/*.jtd.json` files
+
+Under the hood Linktree uses the `jtd-codegen` package to generate types from your schema. If you want to generate types for local development, this package must first be installed on your system. You can install it with the following command:
+
+```sh
+brew install jsontypedef/jsontypedef/jtd-codegen
+```
+
+You will also require `prettier`
+
+```sh
+brew install prettier
+```
+
+When you have these packages installed, you can generate types by running one of the following commands:
+
+`npm run generate:types` or `yarn generate:types`
+
+For more information on using `jtd-codegen` to generate code see the [official documentation](https://jsontypedef.com/docs/jtd-codegen/), or for specifics on generating Typescript code [here](https://jsontypedef.com/docs/typescript-codegen/).
 
 ## UI Components
 
@@ -72,18 +93,18 @@ Access to a Link App can be granted to additional users who may need to retrieve
 
 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.***
+**_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            |✓|N/A       |Owner is defined when Link App is first created|
-|Get Link App               |✓|✓   |                                               |
-|Update Link App            |✓|✓   |                                               |
-|Request Link App review    |✓|✓   |                                               |
-|Get Link App maintainers   |✓|✓   |                                               |
-|Add new Link App maintainer|✓|✗   |                                               |
-|Remove Link App maintainer |✓|✗   |                                               |
+| Action                      | Owner   | Maintainer | Notes                                           |
+| --------------------------- | ------- | ---------- | ----------------------------------------------- |
+| Create Link App             | ✓ | N/A        | Owner is defined when Link App is first created |
+| Get Link App                | ✓ | ✓    |                                                 |
+| Update Link App             | ✓ | ✓    |                                                 |
+| Request Link App review     | ✓ | ✓    |                                                 |
+| Get Link App maintainers    | ✓ | ✓    |                                                 |
+| Add new Link App maintainer | ✓ | ✗    |                                                 |
+| Remove Link App maintainer  | ✓ | ✗    |                                                 |

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

@@ -1,4 +1,3 @@
 {
-  "toggle": true,
-  "your_name": "World"
+  "title": "Link App Title"
 }

package/templates/common/gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 .DS_Store
+package.tgz

package/templates/common/schema/editablePrivate.jtd.json

@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "description": "These are properties that the Linker can `read`, but the Visitor will never have access to."
+  },
+  "properties": {}
+}

package/templates/common/schema/editablePublic.jtd.json

@@ -0,0 +1,10 @@
+{
+  "metadata": {
+    "description": "These are properties that the Linker can `read` and `write`, and the Visitor can `read`"
+  },
+  "properties": {
+    "thumbnailUrl": { "type": "string" },
+    "title": { "type": "string" },
+    "url": { "type": "string" }
+  }
+}

package/templates/common/schema/readonlyPrivate.jtd.json

@@ -0,0 +1,8 @@
+{
+  "metadata": {
+    "description": "These are properties that only the Linker can `read`. The Visitor will never have access to these properties"
+  },
+  "properties": {
+    "httpResponseCode": { "type": "int16" }
+  }
+}

package/templates/common/schema/readonlyPublic.jtd.json

@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "description": "These are properties that the Linker can `read`, and the Visitor can `read`"
+  },
+  "properties": {}
+}

package/templates/common/schema/system.jtd.json

@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "description": "These are internal-only properties that neither the Linker nor Visitor will ever have access to."
+  },
+  "properties": {}
+}

package/templates/common/settings.json

@@ -1,33 +1,21 @@
 {
-  "title": "Link Type",
-  "overview": {
-    "title": "You can have a heading",
-    "description": "as well as a description to inform users on what the link does."
-  },
+  "title": "Link App",
   "elements": [
     {
-      "inputType": "linkBehavior",
-      "id": "how_link_behaves",
-      "title": "How would you like the link to behave?",
-      "description": "When a user interacts with this link:",
-      "linkBehaviorLabels": {
-        "embedLabel": "Embed content on the profile",
-        "linkOffLabel": "Go directly to URL"
-      },
-      "defaultValue": "embedLabel"
+      "id": "thumbnailUrl",
+      "title": "Thumbnail",
+      "inputType": "file",
+      "accept": ["image/*"]
     },
     {
-      "inputType": "switch",
-      "id": "toggle",
-      "title": "Use another title/description to break up content",
-      "description": "and describe what the next section of inputs will do",
-      "label": "Is feature enabled?",
-      "defaultValue": true
+      "id": "title",
+      "title": "Title",
+      "inputType": "text"
     },
     {
-      "inputType": "text",
-      "id": "your_name",
-      "label": "elements that only have a label will stick close the element above"
+      "id": "url",
+      "title": "URL",
+      "inputType": "text"
     }
   ]
 }

package/templates/react/package.json

@@ -3,10 +3,13 @@
   "scripts": {
     "build": "create-link-app build",
     "deploy": "create-link-app deploy",
-    "dev": "create-link-app dev"
+    "storybook": "create-link-app storybook",
+    "dev": "create-link-app dev",
+    "generate:types": "jtd-codegen ./schema.json --typescript-out src/types --root-name=LinkAppData"
   },
   "devDependencies": {
-    "@linktr.ee/create-link-app": "latest",
+    "@linktr.ee/component-library": "latest",
+    "@linktr.ee/create-link-app": "next",
     "@linktr.ee/ui-link-kit": "latest"
   }
 }

package/templates/react/src/index.jsx

@@ -1,18 +1,9 @@
-import { Container, Description, Header } from '@linktr.ee/ui-link-kit'
+import P from '@linktr.ee/component-library/P'
 
-import logo from './images/logo.png'
+import './tailwind.css'
 
-function App({ toggle, your_name, __linkUrl }) {
-  return (
-    <Container
-      primaryCta={toggle ? { label: 'Visit our UI docs for more info', href: 'https://blstrco.github.io/ui-link-kit/' } : null}
-      secondaryCta={toggle ? { label: 'Original url for your Linktree link', href: __linkUrl } : null}
-      logo={logo}
-    >
-      <Header heading={`Hello ${your_name}!`} secondaryHeading="Congratulations, you now have a Linktree link!" layout="hero" />
-      <Description>{your_name}</Description>
-    </Container>
-  )
+function App({ title }) {
+  return <P>{title}</P>
 }
 
 export default App

package/templates/react/src/tailwind.css

@@ -0,0 +1,5 @@
+/* tailwind.css */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/templates/react-ts/package.json

@@ -3,10 +3,13 @@
   "scripts": {
     "build": "create-link-app build",
     "deploy": "create-link-app deploy",
-    "dev": "create-link-app dev"
+    "storybook": "create-link-app storybook",
+    "dev": "create-link-app dev",
+    "generate:types": "create-link-app generate-types"
   },
   "devDependencies": {
-    "@linktr.ee/create-link-app": "latest",
+    "@linktr.ee/component-library": "latest",
+    "@linktr.ee/create-link-app": "next",
     "@linktr.ee/ui-link-kit": "latest",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0"

package/templates/react-ts/src/components/Layouts.tsx

@@ -0,0 +1,57 @@
+import { SettingsData } from '../types'
+
+const baseStyle = {
+  backgroundColor: 'var(--lt-color-primary)',
+  color: 'var(--lt-color-on-primary)',
+} as React.CSSProperties
+
+const Featured = (props: SettingsData) => {
+  return (
+    <div
+      className="px-6 pt-12 pb-11 h-full"
+      style={{
+        ...baseStyle,
+        borderRadius: 'var(--lt-feature-container-radius)',
+      }}
+    >
+      Featured
+    </div>
+  )
+}
+
+const Carousel = (props: SettingsData) => {
+  return (
+    <div
+      className="px-4 pt-16 pb-10 h-full"
+      style={{
+        ...baseStyle,
+        borderRadius: 'var(--lt-carousel-container-radius)',
+      }}
+    >
+      Carousel
+    </div>
+  )
+}
+
+const Grid = (props: SettingsData) => {
+  return (
+    <div className="px-3 py-10 h-full" style={{ ...baseStyle, borderRadius: 'var(--lt-grid-container-radius)' }}>
+      Grid
+    </div>
+  )
+}
+
+const Stack = (props: SettingsData) => {
+  return (
+    <div className="flex p-2 h-full gap-4 w-full" style={{ ...baseStyle, borderRadius: 'var(--lt-stack-container-radius)' }}>
+      <div className="w-16 aspect-square"></div>
+      <h2 className="mr-20">Stack</h2>
+    </div>
+  )
+}
+
+const SheetBody = () => {
+  return <div>sheet body</div>
+}
+
+export { Featured, Carousel, Grid, Stack, SheetBody }

package/templates/react-ts/src/index.tsx

@@ -1,19 +1,25 @@
-import { Container, Description, Header } from '@linktr.ee/ui-link-kit'
-import { SettingsData } from './types'
+import { Featured, Carousel, Grid, Stack, SheetBody } from './components/Layouts'
+import { AppProps, Layout } from './types'
 
-import logo from './images/logo.png'
+import './tailwind.css'
 
-function App({ toggle, your_name, __linkUrl }: SettingsData) {
-  return (
-    <Container
-      primaryCta={toggle ? { label: 'Visit our UI docs for more info', href: 'https://blstrco.github.io/ui-link-kit/' } : null}
-      secondaryCta={toggle ? { label: 'Original url for your Linktree link', href: __linkUrl } : null}
-      logo={logo}
-    >
-      <Header heading={`Hello ${your_name}!`} secondaryHeading="Congratulations, you now have a Linktree link!" layout="hero" />
-      <Description>{your_name}</Description>
-    </Container>
-  )
+function App(props: AppProps) {
+  const { layout } = props
+
+  switch (layout) {
+    case Layout.Stack:
+      return <Stack {...props} />
+    case Layout.Grid:
+      return <Grid {...props} />
+    case Layout.Carousel:
+      return <Carousel {...props} />
+    case Layout.Featured:
+      return <Featured {...props} />
+    case Layout.SheetBody:
+      return <SheetBody />
+    default:
+      return <div>Unknown layout: {props.layout}</div>
+  }
 }
 
 export default App

package/templates/react-ts/src/stories/LinkApp.stories.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import manifest from '../../manifest.json'
+import fixture from '../../fixtures/props-data.json'
+
+import { Layout } from '../types'
+
+import LinkApp from '..'
+
+import './tailwind.sb.css'
+
+export default {
+  title: `Link App/${manifest.name}`,
+  component: LinkApp,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    ...fixture,
+    editing: false,
+  },
+  argTypes: {
+    layout: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof LinkApp>
+
+export const Stack: ComponentStory<typeof LinkApp> = (args) => (
+  <div
+    className="m-2"
+    style={{
+      width: 374,
+      height: 80,
+    }}
+  >
+    <LinkApp {...args} />
+  </div>
+)
+Stack.args = {
+  layout: Layout.stack,
+}
+
+export const Grid: ComponentStory<typeof LinkApp> = (args) => (
+  <div
+    className="m-2"
+    style={{
+      width: 183,
+      height: 240,
+    }}
+  >
+    <LinkApp {...args} />
+  </div>
+)
+Grid.args = {
+  layout: Layout.grid,
+}
+
+export const Carousel: ComponentStory<typeof LinkApp> = (args) => (
+  <div
+    className="m-2"
+    style={{
+      width: 224,
+      height: 296,
+    }}
+  >
+    <LinkApp {...args} />
+  </div>
+)
+Carousel.args = {
+  layout: Layout.carousel,
+}
+
+export const Featured: ComponentStory<typeof LinkApp> = (args) => (
+  <div
+    className="m-2"
+    style={{
+      width: 374,
+      height: 374,
+    }}
+  >
+    <LinkApp {...args} />
+  </div>
+)
+Featured.args = {
+  layout: Layout.featured,
+}
+
+export const SheetBody: ComponentStory<typeof LinkApp> = (args) => (
+  <div className="m-2">
+    <LinkApp {...args} />
+  </div>
+)
+SheetBody.args = {
+  layout: Layout.sheetBody,
+}

package/templates/react-ts/src/stories/tailwind.sb.css

@@ -0,0 +1,5 @@
+/* tailwind.sb.css */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/templates/react-ts/src/tailwind.css

@@ -0,0 +1,4 @@
+/* tailwind.css */
+
+@tailwind components;
+@tailwind utilities;

package/templates/react-ts/src/types/global.d.ts

@@ -1,5 +1,8 @@
-declare module '*.jpg'
-declare module '*.png'
-declare module '*.jpeg'
-declare module '*.gif'
-declare module '*.svg'
+// @HACK: These files are removed at build time, but we need it for type checking
+declare module '*manifest.json' {
+  export const name: string
+}
+
+declare module '*props-data.json' {
+  export const name: string
+}

package/templates/react-ts/src/types/index.ts

@@ -1,7 +1,8 @@
-type LinktreeLinkContext = {
-  __linkUrl: string
-}
-export type SettingsData = {
-  toggle: boolean
-  your_name: string
-} & LinktreeLinkContext
+import type { HostData } from '@linktr.ee/ui-link-kit/Schemas'
+import { EditablePrivateData, EditablePublicData, ReadonlyPrivateData, ReadonlyPublicData } from './schema'
+
+export type { HostData } from '@linktr.ee/ui-link-kit/Schemas'
+export { HostDataLayout as Layout } from '@linktr.ee/ui-link-kit/Schemas'
+
+export type AppProps = HostData & EditablePublicData & ReadonlyPublicData
+export type EditorProps = EditablePublicData & ReadonlyPublicData & EditablePrivateData & ReadonlyPrivateData

package/templates/react-ts/src/types/schema/index.ts

@@ -0,0 +1,33 @@
+/**
+ * These types were autogenerated by @linktr.ee/create-link-app
+ * https://www.npmjs.com/package/@linktr.ee/create-link-app
+ */
+
+/**
+ * These are properties that the Linker can `read` and `write`, and the Visitor
+ * can `read`
+ */
+export interface EditablePublicData {
+  thumbnailUrl: string
+  title: string
+  url: string
+}
+
+/**
+ * These are properties that the Linker can `read`, and the Visitor can `read`
+ */
+export interface ReadonlyPublicData {}
+
+/**
+ * These are properties that the Linker can `read`, but the Visitor will never
+ * have access to.
+ */
+export interface EditablePrivateData {}
+
+/**
+ * These are properties that only the Linker can `read`. The Visitor will never
+ * have access to these properties
+ */
+export interface ReadonlyPrivateData {
+  httpResponseCode: number
+}