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

package/README.md

@@ -23,12 +23,10 @@ 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`
 
@@ -108,18 +106,6 @@ 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
@@ -182,19 +168,4 @@ 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,10 +10,9 @@ const webpack_config_1 = __importDefault(require("../webpack/webpack.config"));
 class Build extends base_1.default {
     async run() {
         const { flags } = await this.parse(Build);
-        const config = await (0, webpack_config_1.default)('production', {
+        (0, webpack_1.default)((0, webpack_config_1.default)('production', {
             allowAnyOrigin: flags['allow-any-origin'],
-        });
-        (0, webpack_1.default)(config, (err, stats) => {
+        }), (err, stats) => {
             if (err) {
                 this.error(err);
             }

package/dist/commands/dev.js

@@ -11,7 +11,6 @@ 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,
@@ -19,7 +18,7 @@ class Dev extends base_1.default {
             hot: false,
             https: flags.https,
             port: flags.port,
-        }, (0, webpack_1.default)(config));
+        }, (0, webpack_1.default)((0, webpack_config_1.default)('development')));
         await devServer.start();
     }
 }

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

@@ -14,9 +14,6 @@ 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,13 +8,7 @@ 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*
@@ -36,7 +30,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') {
@@ -49,11 +43,6 @@ 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/webpack/webpack.config.js

@@ -13,35 +13,19 @@ 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 postcss_config_1 = require("../postcss/postcss.config");
+const tailwindcss_1 = __importDefault(require("tailwindcss"));
+const autoprefixer_1 = __importDefault(require("autoprefixer"));
 const { ModuleFederationPlugin } = webpack_1.container;
-function toVirtualModule(code) {
-    const base64 = Buffer.from(code).toString('base64');
-    return `data:text/javascript;base64,${base64}`;
-}
-function hasEntrypoint(appDir, file) {
-    try {
-        fs_1.default.accessSync(path_1.default.resolve(appDir, 'src', file));
-        return true;
-    }
-    catch {
-        return false;
-    }
-}
-async function default_1(env, options) {
+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 useAppEntry = hasEntrypoint(appDir, 'App.tsx');
-    const useSheetEntry = hasEntrypoint(appDir, 'Sheet.tsx');
-    const useEditorEntry = hasEntrypoint(appDir, 'Editor.tsx');
-    const appEntry = useAppEntry ? path_1.default.resolve(appDir, 'src/App') : path_1.default.resolve(appDir, 'src');
     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 componentLibraryContentPath = path_1.default.join(require.resolve('@linktr.ee/component-library/tailwind.config').split('/').slice(0, -1).join('/'), 'dist', '**', '*.js');
     const config = {
         target: 'web',
         mode: env,
@@ -49,9 +33,7 @@ async function default_1(env, options) {
         output: {
             publicPath: 'auto',
             path: path_1.default.resolve(appDir, 'dist'),
-            assetModuleFilename: 'images/[hash].[contenthash][ext][query]',
-            chunkFilename: '[id].[contenthash].js',
-            filename: '[name].[contenthash].js',
+            assetModuleFilename: 'images/[hash][ext][query]',
         },
         module: {
             rules: [
@@ -70,7 +52,7 @@ async function default_1(env, options) {
                 },
                 {
                     test: /\.(png|jpe?g|gif|svg)$/i,
-                    type: 'asset/inline', // <-- this builds all images into data URLs, is that what you want?
+                    type: 'asset/inline',
                 },
                 {
                     test: /\.css$/,
@@ -80,7 +62,33 @@ async function default_1(env, options) {
                         {
                             loader: 'postcss-loader',
                             options: {
-                                postcssOptions: { ...(0, postcss_config_1.getPostcssConfig)({ linkTypeSlug }) },
+                                postcssOptions: {
+                                    plugins: [
+                                        (0, tailwindcss_1.default)({
+                                            content: [`${appDir}/src/**/*.{js,jsx,ts,tsx}`, componentLibraryContentPath],
+                                            important: `.ui-link-app-${linkTypeSlug}`,
+                                            presets: [require('@linktr.ee/component-library/tailwind.config')],
+                                            plugins: [],
+                                            theme: {
+                                                extend: {
+                                                    backgroundImage: {
+                                                        loading: 'linear-gradient(90deg,#f3f3f1,#fff,#f3f3f1);',
+                                                    },
+                                                    keyframes: {
+                                                        loading: {
+                                                            '75%': { transform: 'translateX(100%)' },
+                                                            '100%': { transform: 'translateX(100%)' },
+                                                        },
+                                                    },
+                                                    animation: {
+                                                        loading: 'loading 1.5s ease-in-out infinite',
+                                                    },
+                                                },
+                                            },
+                                        }),
+                                        (0, autoprefixer_1.default)(),
+                                    ],
+                                },
                             },
                         },
                     ],
@@ -93,12 +101,15 @@ async function default_1(env, options) {
             // TODO: The behaviour here with module resolution is confusing, can we make it more explicit?
             modules: [path_1.default.resolve(appDir, 'node_modules'), 'node_modules'],
             alias: {
-                '@linktr.ee/extension': appEntry,
+                '@linktr.ee/extension': path_1.default.resolve(appDir, 'src'),
             },
         },
         plugins: [
             new html_webpack_plugin_1.default({
                 template: htmlTemplateFile,
+                templateParameters: {
+                    tailwindBaseClass: `ui-link-app-${linkTypeSlug}`,
+                },
                 excludeChunks: [`LinkApp_${linkTypeId}`],
             }),
         ],
@@ -116,17 +127,6 @@ async function default_1(env, options) {
         config.plugins.push(new mini_css_extract_plugin_1.default());
     }
     if (env === 'production') {
-        const exposedEntryPoints = {
-            // Default entry points
-            ['./App']: appEntry,
-            ['./validate']: toVirtualModule((await (0, compile_1.default)())),
-        };
-        if (useEditorEntry) {
-            exposedEntryPoints['./Editor'] = path_1.default.resolve(appDir, 'src/Editor');
-        }
-        if (useSheetEntry) {
-            exposedEntryPoints['./Sheet'] = path_1.default.resolve(appDir, 'src/Sheet');
-        }
         // TODO: Figure out how to manage externals with Module Federation
         //       Possibly make the index.html a host app, via separate webpack config
         // config.externals = {
@@ -141,8 +141,6 @@ async function default_1(env, options) {
         };
         config.plugins.push(new webpack_1.DefinePlugin({
             __ALLOW_ANY_ORIGIN__: options?.allowAnyOrigin,
-            __LINK_TYPE_SLUG__: JSON.stringify(linkTypeSlug),
-            __LINK_TYPE_ID__: JSON.stringify(linkTypeId),
         }), 
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
@@ -152,7 +150,9 @@ async function default_1(env, options) {
         }), new ModuleFederationPlugin({
             name: `LinkApp_${linkTypeId}`,
             filename: 'remoteEntry.js',
-            exposes: exposedEntryPoints,
+            exposes: {
+                ['./App']: path_1.default.resolve(appDir, 'src'),
+            },
             shared: {
                 react: {
                     singleton: true,

package/html-template/development.html

@@ -10,7 +10,7 @@
 </head>
 
 <body>
-  <div id="root"></div>
+  <div id="root" class="<%= tailwindBaseClass %>"></div>
 </body>
 
-</html>
+</html>

package/html-template/production.html

@@ -14,7 +14,7 @@
 </head>
 
 <body>
-  <div id="root"></div>
+  <div id="root" class="<%= tailwindBaseClass %>"></div>
 </body>
 
-</html>
+</html>

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0-next.38",
+  "version": "0.3.0-next.4",
   "commands": {
     "build": {
       "id": "build",
@@ -139,17 +139,6 @@
       },
       "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",
@@ -227,26 +216,6 @@
         }
       },
       "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.38",
+  "version": "0.3.0-next.4",
   "description": "Create a Link App on Linktr.ee.",
   "license": "UNLICENSED",
   "author": "Linktree",
@@ -19,14 +19,13 @@
     "/templates"
   ],
   "scripts": {
-    "build": "shx rm -rf dist && tsc -b && yarn copy-storybook-global-css",
+    "build": "shx rm -rf dist && tsc -b",
     "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",
-    "copy-storybook-global-css": "cp ./src/storybook/global.css ./dist/storybook/global.css"
+    "version": "oclif readme && git add README.md"
   },
   "dependencies": {
     "@babel/core": "^7.18.2",
@@ -35,22 +34,9 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.3",
-    "@linktr.ee/component-library": "latest",
-    "@linktr.ee/ui-link-kit": "latest",
+    "@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",
-    "@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",
@@ -67,17 +53,12 @@
     "netrc-parser": "^3.1.6",
     "openid-client": "^5.1.6",
     "postcss": "^8.4.21",
-    "postcss-loader": "^4.3.0",
-    "prettier": "^2.8.8",
-    "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",
+    "tailwindcss": "^3.3.1",
     "typescript": "^4.7.3",
     "webpack": "^5.75.0",
     "webpack-dev-server": "^4.11.1"

package/templates/common/README.md

@@ -14,34 +14,13 @@ 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)                                                                                                                                                                                                     |
-| `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/).
+| 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) |
 
 ## UI Components
 
@@ -93,18 +72,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,3 +1,4 @@
 {
-  "title": "Link App Title"
+  "toggle": true,
+  "your_name": "World"
 }

package/templates/common/gitignore

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

package/templates/common/settings.json

@@ -1,21 +1,33 @@
 {
-  "title": "Link App",
+  "title": "Link Type",
+  "overview": {
+    "title": "You can have a heading",
+    "description": "as well as a description to inform users on what the link does."
+  },
   "elements": [
     {
-      "id": "thumbnailUrl",
-      "title": "Thumbnail",
-      "inputType": "file",
-      "accept": ["image/*"]
+      "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": "title",
-      "title": "Title",
-      "inputType": "text"
+      "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": "url",
-      "title": "URL",
-      "inputType": "text"
+      "inputType": "text",
+      "id": "your_name",
+      "label": "elements that only have a label will stick close the element above"
     }
   ]
 }

package/templates/react/package.json

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

package/templates/react/src/index.jsx

@@ -1,9 +1,18 @@
-import P from '@linktr.ee/component-library/P'
+import { Container, Description, Header } from '@linktr.ee/ui-link-kit'
 
-import './tailwind.css'
+import logo from './images/logo.png'
 
-function App({ title }) {
-  return <P>{title}</P>
+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>
+  )
 }
 
 export default App

package/templates/react-ts/package.json

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

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

@@ -0,0 +1,19 @@
+import { Container, Description, Header } from '@linktr.ee/ui-link-kit'
+import { SettingsData } from './types'
+
+import logo from './images/logo.png'
+
+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>
+  )
+}
+
+export default App