@linktr.ee/create-link-app 0.3.0-next.2 → 0.3.0-next.20

package/README.md

@@ -27,6 +27,7 @@ yarn create @linktr.ee/create-link-app my-link-app
 * [`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`
 
@@ -168,4 +169,19 @@ USAGE
 DESCRIPTION
   Logout and clear browser session
 ```
+
+## `create-link-app storybook`
+
+Start the Stortybook 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 Stortybook 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/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 Stortybook 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

@@ -9,6 +9,7 @@ const path_1 = __importDefault(require("path"));
 /**
  * Pack the Link App source files into `package.tgz`. This includes the following:
  * - `src/`
+ * - `schema.json`
  * - `package.json`
  * - `package-lock.json` - *optional*
  * - `yarn.lock` - *optional*
@@ -43,6 +44,7 @@ async function packProject() {
             handleFailure(err);
         });
         archive.pipe(outputWriteStream);
+        archive.file(resolveProjPath('schema.json'), { name: 'schema.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,27 @@
+"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 defaultSchemaPath = path_1.default.join(process.cwd(), './schema.json');
+async function compileSchema(inputSchemaPath = defaultSchemaPath) {
+    try {
+        const schema = await fs_extra_1.default.readJSON(inputSchemaPath);
+        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 },
+        });
+        const compiled = ajv.compile(schema);
+        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,20 @@
+"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 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;

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,25 +31,33 @@ 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',
         mode: env,
         entry: entryFile,
         output: {
-            publicPath: '',
+            publicPath: 'auto',
             path: path_1.default.resolve(appDir, 'dist'),
             assetModuleFilename: 'images/[hash][ext][query]',
         },
@@ -49,6 +80,19 @@ function default_1(env, options) {
                     test: /\.(png|jpe?g|gif|svg)$/i,
                     type: 'asset/inline',
                 },
+                {
+                    test: /\.css$/,
+                    use: [
+                        mini_css_extract_plugin_1.default.loader,
+                        'css-loader',
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                postcssOptions: { ...postcssOptions },
+                            },
+                        },
+                    ],
+                },
             ],
         },
         resolve: {
@@ -77,13 +121,16 @@ 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') {
-        config.externals = {
-            react: 'React',
-            'react-dom': 'ReactDOM',
-            'styled-components': 'styled',
-        };
+        // TODO: Figure out how to manage externals with Module Federation
+        //       Possibly make the index.html a host app, via separate webpack config
+        // config.externals = {
+        //   react: 'React',
+        //   'react-dom': 'ReactDOM',
+        //   'styled-components': 'styled',
+        // }
         config.performance = {
             maxEntrypointSize: 1048576,
             maxAssetSize: 350000,
@@ -102,6 +149,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: {
@@ -112,11 +160,14 @@ function default_1(env, options) {
                     singleton: true,
                     requiredVersion: '17 || 18',
                 },
-                'styled-components': {
-                    singleton: true,
-                    requiredVersion: '5',
-                },
+                // 'styled-components': {
+                //   singleton: true,
+                //   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.2",
+  "version": "0.3.0-next.20",
   "commands": {
     "build": {
       "id": "build",
@@ -216,6 +216,26 @@
         }
       },
       "args": {}
+    },
+    "storybook": {
+      "id": "storybook",
+      "description": "Start the Stortybook 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.2",
+  "version": "0.3.0-next.20",
   "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,46 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.3",
+    "@linktr.ee/component-library": "^7.0.17",
     "@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",
+    "@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.1",
     "typescript": "^4.7.3",
     "webpack": "^5.75.0",
     "webpack-dev-server": "^4.11.1"

package/templates/common/README.md

@@ -21,6 +21,24 @@ Several files were created during the bootstrapping of this project. Some of the
 | `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.json` | Defines the schema a Link App will use for generating types shared between client and server. The format for the schema adheres to the [JSON Type Definition](https://jsontypedef.com/), aka [RFC 8927](https://datatracker.ietf.org/doc/html/rfc8927), standard. |
+
+## Generating types from `schema.json`
+
+To generate the appropriate Typescript types from your schema run one of the following commands:
+
+`npm run generate:types` or `yarn generate:types`
+
+Please note that under the hood we use the `jtd-codegen` package which must first be installed on your system.
+
+This can be installed with the following command:
+
+```sh
+brew install jsontypedef/jsontypedef/jtd-codegen
+```
+
+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
 

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.json

@@ -0,0 +1,38 @@
+{
+  "definitions": {
+    "publicData": {
+      "metadata": {
+        "description": "This represents the types derived from settings.json, and is editable from the client"
+      },
+      "properties": {
+        "thumbnailUrl": { "type": "string" },
+        "title": { "type": "string" },
+        "url": { "type": "string" }
+      }
+    },
+    "protectedData": {
+      "metadata": {
+        "description": "This represents the types derived from the linktree-backend context service, and is read only from the client"
+      },
+      "properties": {}
+    },
+    "privateData": {
+      "metadata": {
+        "description": "This represents the types for backend only data, it should never be sent to the client"
+      },
+      "properties": {}
+    }
+  },
+  "properties": {
+    "publicData": { "ref": "publicData" },
+    "protectedData": { "ref": "protectedData" }
+  },
+  "optionalProperties": {
+    "privateData": {
+      "metadata": {
+        "description": "This should never be sent to the client"
+      },
+      "ref": "privateData"
+    }
+  }
+}

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": "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",
     "@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 { SettingsData, 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: SettingsData) {
+  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,35 @@
-type LinktreeLinkContext = {
-  __linkUrl: string
+// Code generated by jtd-codegen for TypeScript v0.2.1
+
+export interface LinkAppData {
+  protectedData: ProtectedData;
+  publicData: PublicData;
+
+  /**
+   * This should never be sent to the client
+   */
+  privateData?: PrivateData;
+}
+
+/**
+ * This represents the types for backend only data, it should never be sent to
+ * the client
+ */
+export interface PrivateData {
+}
+
+/**
+ * This represents the types derived from the linktree-backend context service,
+ * and is read only from the client
+ */
+export interface ProtectedData {
+}
+
+/**
+ * This represents the types derived from settings.json, and is editable from
+ * the client
+ */
+export interface PublicData {
+  thumbnailUrl: string;
+  title: string;
+  url: string;
 }
-export type SettingsData = {
-  toggle: boolean
-  your_name: string
-} & LinktreeLinkContext