@linktr.ee/create-link-app 0.3.0-next.0 → 0.3.0-next.10

package/README.md

@@ -24,9 +24,10 @@ yarn create @linktr.ee/create-link-app my-link-app
 * [`create-link-app deploy`](#create-link-app-deploy)
 * [`create-link-app dev`](#create-link-app-dev)
 * [`create-link-app grant-access LINK_APP_ID USERNAME`](#create-link-app-grant-access-link_app_id-username)
-* [`create-link-app help [COMMAND]`](#create-link-app-help-command)
+* [`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`
 
@@ -46,7 +47,7 @@ Initialize a new Link App project
 
 ```
 USAGE
-  $ create-link-app create [NAME] [-t react|react-ts] [-p <value>]
+  $ create-link-app create NAME [-t react|react-ts] [-p <value>]
 
 ARGUMENTS
   NAME  Name of the Link App
@@ -112,7 +113,7 @@ Grant access to other developers to push updates for your Link App
 
 ```
 USAGE
-  $ create-link-app grant-access [LINK_APP_ID] [USERNAME]
+  $ create-link-app grant-access LINK_APP_ID USERNAME
 
 ARGUMENTS
   LINK_APP_ID  The Link App's ID you wish to grant access to
@@ -125,16 +126,16 @@ EXAMPLES
   $ create-link-app grant-access my-link-app friend
 ```
 
-## `create-link-app help [COMMAND]`
+## `create-link-app help [COMMANDS]`
 
 Display help for create-link-app.
 
 ```
 USAGE
-  $ create-link-app help [COMMAND] [-n]
+  $ create-link-app help [COMMANDS] [-n]
 
 ARGUMENTS
-  COMMAND  Command to show help for.
+  COMMANDS  Command to show help for.
 
 FLAGS
   -n, --nested-commands  Include all nested commands in the output.
@@ -143,7 +144,7 @@ DESCRIPTION
   Display help for create-link-app.
 ```
 
-_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v5.1.12/src/commands/help.ts)_
+_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v5.2.9/src/commands/help.ts)_
 
 ## `create-link-app login`
 
@@ -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/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/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/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,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parameters = void 0;
+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,19 +31,28 @@ 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 postcssOptions = __importStar(require("../postcss/postcss.config"));
+const { ModuleFederationPlugin } = webpack_1.container;
 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 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]',
         },
@@ -43,6 +75,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: {
@@ -57,6 +102,7 @@ function default_1(env, options) {
         plugins: [
             new html_webpack_plugin_1.default({
                 template: htmlTemplateFile,
+                excludeChunks: [`LinkApp_${linkTypeId}`],
             }),
         ],
     };
@@ -70,13 +116,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,
@@ -90,6 +139,29 @@ function default_1(env, options) {
         new inject_body_webpack_plugin_1.default({
             position: 'start',
             content: `<!-- ${getBuildInfo()} -->`,
+        }), new ModuleFederationPlugin({
+            name: `LinkApp_${linkTypeId}`,
+            filename: 'remoteEntry.js',
+            exposes: {
+                ['./App']: path_1.default.resolve(appDir, 'src'),
+            },
+            shared: {
+                react: {
+                    singleton: true,
+                    requiredVersion: '17 || 18',
+                },
+                'react-dom': {
+                    singleton: true,
+                    requiredVersion: '17 || 18',
+                },
+                // '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 +1,241 @@
-{"version":"0.3.0-next.0","commands":{"build":{"id":"build","description":"Build Link App project to static assets used for production","strict":true,"pluginName":"@linktr.ee/create-link-app","pluginAlias":"@linktr.ee/create-link-app","pluginType":"core","aliases":[],"flags":{"allow-any-origin":{"name":"allow-any-origin","type":"boolean","description":"Allow Link App iframe to be loadable from non-Linktree origins for debugging","hidden":true,"allowNo":false}},"args":[],"_globalFlags":{}},"create":{"id":"create","description":"Initialize a new Link App project","strict":true,"pluginName":"@linktr.ee/create-link-app","pluginAlias":"@linktr.ee/create-link-app","pluginType":"core","aliases":[],"examples":["$ create-link-app create my-link-app","$ create-link-app create my-link-app --template react","$ create-link-app create my-link-app --path my/custom/path"],"flags":{"template":{"name":"template","type":"option","char":"t","description":"Template to use for the project","multiple":false,"options":["react","react-ts"],"default":"react-ts"},"path":{"name":"path","type":"option","char":"p","description":"Path to create the project in","multiple":false}},"args":[{"name":"name","description":"Name of the Link App","required":true}],"_globalFlags":{}},"deploy":{"id":"deploy","description":"Deploy your Link App and test it on Linktr.ee","strict":true,"pluginName":"@linktr.ee/create-link-app","pluginAlias":"@linktr.ee/create-link-app","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","char":"p","description":"Specify custom path to project directory","multiple":false},"update":{"name":"update","type":"boolean","description":"Push update for existing Link App","allowNo":false},"endpoint":{"name":"endpoint","type":"option","description":"Custom API endpoint to push assets to","hidden":true,"multiple":false},"qa":{"name":"qa","type":"boolean","description":"Use QA environment","hidden":true,"allowNo":false},"force-update":{"name":"force-update","type":"boolean","description":"Allow Link Type Admins to push updates to Link Apps in PUBLISHED state","hidden":true,"allowNo":false}},"args":[],"_globalFlags":{}},"dev":{"id":"dev","description":"Start development server for Link App project","strict":true,"pluginName":"@linktr.ee/create-link-app","pluginAlias":"@linktr.ee/create-link-app","pluginType":"core","aliases":[],"examples":["$ create-link-app dev","$ create-link-app dev --port 8000","$ create-link-app dev --https"],"flags":{"port":{"name":"port","type":"option","char":"p","description":"Development server listening port","multiple":false,"default":3000},"https":{"name":"https","type":"boolean","description":"Use HTTPS for development server","allowNo":false}},"args":[],"_globalFlags":{}},"grant-access":{"id":"grant-access","description":"Grant access to other developers to push updates for your Link App","strict":true,"pluginName":"@linktr.ee/create-link-app","pluginAlias":"@linktr.ee/create-link-app","pluginType":"core","aliases":[],"examples":["$ create-link-app grant-access my-link-app friend"],"flags":{"endpoint":{"name":"endpoint","type":"option","description":"Custom API endpoint to push assets to","hidden":true,"multiple":false},"qa":{"name":"qa","type":"boolean","description":"Use QA environment","hidden":true,"allowNo":false}},"args":[{"name":"link_app_id","description":"The Link App's ID you wish to grant access to","required":true},{"name":"username","description":"The Linktree username of the developer you wish to grant access to","required":true}],"_globalFlags":{}},"login":{"id":"login","description":"Login using your Linktree credentials to deploy Link Apps","strict":true,"pluginName":"@linktr.ee/create-link-app","pluginAlias":"@linktr.ee/create-link-app","pluginType":"core","aliases":[],"flags":{"qa":{"name":"qa","type":"boolean","description":"Use QA environment","hidden":true,"allowNo":false}},"args":[],"_globalFlags":{}},"logout":{"id":"logout","description":"Logout and clear browser session","strict":true,"pluginName":"@linktr.ee/create-link-app","pluginAlias":"@linktr.ee/create-link-app","pluginType":"core","aliases":[],"flags":{"qa":{"name":"qa","type":"boolean","description":"Use QA environment","hidden":true,"allowNo":false}},"args":[],"_globalFlags":{}}}}
+{
+  "version": "0.3.0-next.10",
+  "commands": {
+    "build": {
+      "id": "build",
+      "description": "Build Link App project to static assets used for production",
+      "strict": true,
+      "pluginName": "@linktr.ee/create-link-app",
+      "pluginAlias": "@linktr.ee/create-link-app",
+      "pluginType": "core",
+      "aliases": [],
+      "flags": {
+        "allow-any-origin": {
+          "name": "allow-any-origin",
+          "type": "boolean",
+          "description": "Allow Link App iframe to be loadable from non-Linktree origins for debugging",
+          "hidden": true,
+          "allowNo": false
+        }
+      },
+      "args": {}
+    },
+    "create": {
+      "id": "create",
+      "description": "Initialize a new Link App project",
+      "strict": true,
+      "pluginName": "@linktr.ee/create-link-app",
+      "pluginAlias": "@linktr.ee/create-link-app",
+      "pluginType": "core",
+      "aliases": [],
+      "examples": [
+        "$ create-link-app create my-link-app",
+        "$ create-link-app create my-link-app --template react",
+        "$ create-link-app create my-link-app --path my/custom/path"
+      ],
+      "flags": {
+        "template": {
+          "name": "template",
+          "type": "option",
+          "char": "t",
+          "description": "Template to use for the project",
+          "multiple": false,
+          "options": [
+            "react",
+            "react-ts"
+          ],
+          "default": "react-ts"
+        },
+        "path": {
+          "name": "path",
+          "type": "option",
+          "char": "p",
+          "description": "Path to create the project in",
+          "multiple": false
+        }
+      },
+      "args": {
+        "name": {
+          "name": "name",
+          "description": "Name of the Link App",
+          "required": true
+        }
+      }
+    },
+    "deploy": {
+      "id": "deploy",
+      "description": "Deploy your Link App and test it on Linktr.ee",
+      "strict": true,
+      "pluginName": "@linktr.ee/create-link-app",
+      "pluginAlias": "@linktr.ee/create-link-app",
+      "pluginType": "core",
+      "aliases": [],
+      "flags": {
+        "path": {
+          "name": "path",
+          "type": "option",
+          "char": "p",
+          "description": "Specify custom path to project directory",
+          "multiple": false
+        },
+        "update": {
+          "name": "update",
+          "type": "boolean",
+          "description": "Push update for existing Link App",
+          "allowNo": false
+        },
+        "endpoint": {
+          "name": "endpoint",
+          "type": "option",
+          "description": "Custom API endpoint to push assets to",
+          "hidden": true,
+          "multiple": false
+        },
+        "qa": {
+          "name": "qa",
+          "type": "boolean",
+          "description": "Use QA environment",
+          "hidden": true,
+          "allowNo": false
+        },
+        "force-update": {
+          "name": "force-update",
+          "type": "boolean",
+          "description": "Allow Link Type Admins to push updates to Link Apps in PUBLISHED state",
+          "hidden": true,
+          "allowNo": false
+        }
+      },
+      "args": {}
+    },
+    "dev": {
+      "id": "dev",
+      "description": "Start development server for Link App project",
+      "strict": true,
+      "pluginName": "@linktr.ee/create-link-app",
+      "pluginAlias": "@linktr.ee/create-link-app",
+      "pluginType": "core",
+      "aliases": [],
+      "examples": [
+        "$ create-link-app dev",
+        "$ create-link-app dev --port 8000",
+        "$ create-link-app dev --https"
+      ],
+      "flags": {
+        "port": {
+          "name": "port",
+          "type": "option",
+          "char": "p",
+          "description": "Development server listening port",
+          "multiple": false,
+          "default": 3000
+        },
+        "https": {
+          "name": "https",
+          "type": "boolean",
+          "description": "Use HTTPS for development server",
+          "allowNo": false
+        }
+      },
+      "args": {}
+    },
+    "grant-access": {
+      "id": "grant-access",
+      "description": "Grant access to other developers to push updates for your Link App",
+      "strict": true,
+      "pluginName": "@linktr.ee/create-link-app",
+      "pluginAlias": "@linktr.ee/create-link-app",
+      "pluginType": "core",
+      "aliases": [],
+      "examples": [
+        "$ create-link-app grant-access my-link-app friend"
+      ],
+      "flags": {
+        "endpoint": {
+          "name": "endpoint",
+          "type": "option",
+          "description": "Custom API endpoint to push assets to",
+          "hidden": true,
+          "multiple": false
+        },
+        "qa": {
+          "name": "qa",
+          "type": "boolean",
+          "description": "Use QA environment",
+          "hidden": true,
+          "allowNo": false
+        }
+      },
+      "args": {
+        "link_app_id": {
+          "name": "link_app_id",
+          "description": "The Link App's ID you wish to grant access to",
+          "required": true
+        },
+        "username": {
+          "name": "username",
+          "description": "The Linktree username of the developer you wish to grant access to",
+          "required": true
+        }
+      }
+    },
+    "login": {
+      "id": "login",
+      "description": "Login using your Linktree credentials to deploy Link Apps",
+      "strict": true,
+      "pluginName": "@linktr.ee/create-link-app",
+      "pluginAlias": "@linktr.ee/create-link-app",
+      "pluginType": "core",
+      "aliases": [],
+      "flags": {
+        "qa": {
+          "name": "qa",
+          "type": "boolean",
+          "description": "Use QA environment",
+          "hidden": true,
+          "allowNo": false
+        }
+      },
+      "args": {}
+    },
+    "logout": {
+      "id": "logout",
+      "description": "Logout and clear browser session",
+      "strict": true,
+      "pluginName": "@linktr.ee/create-link-app",
+      "pluginAlias": "@linktr.ee/create-link-app",
+      "pluginType": "core",
+      "aliases": [],
+      "flags": {
+        "qa": {
+          "name": "qa",
+          "type": "boolean",
+          "description": "Use QA environment",
+          "hidden": true,
+          "allowNo": false
+        }
+      },
+      "args": {}
+    },
+    "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.0",
+  "version": "0.3.0-next.10",
   "description": "Create a Link App on Linktr.ee.",
   "license": "UNLICENSED",
   "author": "Linktree",
@@ -34,22 +34,45 @@
     "@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",
     "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/fixtures/props-data.json

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

package/templates/react/package.json

@@ -3,10 +3,12 @@
   "scripts": {
     "build": "create-link-app build",
     "deploy": "create-link-app deploy",
+    "storybook": "create-link-app storybook",
     "dev": "create-link-app dev"
   },
   "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,12 @@
   "scripts": {
     "build": "create-link-app build",
     "deploy": "create-link-app deploy",
+    "storybook": "create-link-app storybook",
     "dev": "create-link-app dev"
   },
   "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/index.tsx

@@ -1,19 +1,10 @@
-import { Container, Description, Header } from '@linktr.ee/ui-link-kit'
+import P from '@linktr.ee/component-library/P'
 import { SettingsData } 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({ title }: SettingsData) {
+  return <P>{title}</P>
 }
 
 export default App

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { name } from '../../manifest.json'
+
+import LinkApp from '..'
+
+export default {
+  title: `Link App/${name}`,
+  component: LinkApp,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof LinkApp>
+
+export const Stack: ComponentStory<typeof LinkApp> = () => (
+  <div className="bg-marble rounded-lg p-2 m-2 w-[375px]">
+    <LinkApp layout="STACK" editing={false} title="Test Stack" />
+  </div>
+)
+
+export const Grid: ComponentStory<typeof LinkApp> = () => (
+  <div className="bg-marble rounded-lg p-2 m-2 w-[150px]">
+    <LinkApp layout="GRID" editing={false} title="Test Grid" />
+  </div>
+)
+
+export const Carousel: ComponentStory<typeof LinkApp> = () => (
+  <div className="bg-marble rounded-lg p-2 m-2 w-[225px]">
+    <LinkApp layout="CAROUSEL" editing={false} title="Test Carousel" />
+  </div>
+)
+
+export const Featured: ComponentStory<typeof LinkApp> = () => (
+  <div className="bg-marble rounded-lg p-2 m-2 w-[384px]">
+    <LinkApp layout="FEATURED" editing={false} title="Test Featured" />
+  </div>
+)

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

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

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

@@ -1,5 +1,4 @@
-declare module '*.jpg'
-declare module '*.png'
-declare module '*.jpeg'
-declare module '*.gif'
-declare module '*.svg'
+// @HACK: This file is removed at build time, but we need it for type checking
+declare module '*manifest.json' {
+  export const name: string
+}

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

@@ -1,7 +1,8 @@
 type LinktreeLinkContext = {
-  __linkUrl: string
+  layout: 'STACK' | 'CAROUSEL' | 'FEATURED' | 'GRID'
+  editing: boolean
 }
+
 export type SettingsData = {
-  toggle: boolean
-  your_name: string
+  title: string
 } & LinktreeLinkContext

package/CHANGELOG.md

@@ -1,25 +0,0 @@
-# @linktr.ee/create-link-app
-
-## 0.3.0-next.0
-
-### Minor Changes
-
-- Adds support for Federated Module entry point for Link Apps
-
-## 0.2.0
-
-### Minor Changes
-
-- f3cb1ab: Update application config URL and format
-
-### Patch Changes
-
-- 6dd47b2: Update main app & legacy app code scaffolding
-- 41123c7: Set manifest `name` field during project creation
-- 8811cd7: Fix issue where webpack wasn't bundling images correctly
-
-## 0.1.0
-
-### Minor Changes
-
-- Initial release