@linktr.ee/create-link-app 1.1.6 → 1.4.0

package/README.md

@@ -2,18 +2,24 @@
 
 CLI tool to create [Link Apps](https://linktr.ee/marketplace) on [Linktr.ee](https://linktr.ee).
 
-## Getting Started
+[Public document](https://docs.linktr.ee/sdk-documentation)
 
-Create a project with either npm:
+## Getting Started
 
+(Optional) Install create-link-app globally
 ```sh
-npm init @linktr.ee/create-link-app my-link-app
-```
+yarn global add @linktr.ee/create-link-app
+# or
+npm install -g @linktr.ee/create-link-app
 
-Or Yarn:
+which create-link-app
+
+create-link-app --help
+```
 
+Or run with npx
 ```sh
-yarn create @linktr.ee/create-link-app my-link-app
+npx @linktr.ee/create-link-app --help
 ```
 
 ## Commands

package/dist/commands/create.js

@@ -22,7 +22,8 @@ class Create extends base_1.default {
         const relativeProjectPath = path_1.default.relative(process.cwd(), targetDir);
         this.log('✅ Project created, to get started:\n');
         this.log(`    cd ${relativeProjectPath}`);
-        this.log(`    ${useYarn ? 'yarn dev' : 'npm run dev'}\n`);
+        this.log(`    yarn install | npm install`);
+        this.log(`    yarn dev | npm run dev\n`);
     }
 }
 exports.default = Create;

package/dist/commands/generate-types.js

@@ -37,15 +37,6 @@ class GenerateTypes extends base_1.default {
             await this.cmd(`echo " * These types were autogenerated by @linktr.ee/create-link-app" >> ${this.typesPath}/index.ts`);
             await this.cmd(`echo " * https://www.npmjs.com/package/@linktr.ee/create-link-app " >> ${this.typesPath}/index.ts`);
             await this.cmd(`echo " */" >> ${this.typesPath}/index.ts`);
-            // Generate and append types
-            await this.generateAndAppendSchemaType('editablePublic');
-            await this.log('✓ Generated EditablePublicData type');
-            await this.generateAndAppendSchemaType('readonlyPublic');
-            await this.log('✓ Generated ReadonlyPublicData type');
-            await this.generateAndAppendSchemaType('editablePrivate');
-            await this.log('✓ Generated EditablePrivateData type');
-            await this.generateAndAppendSchemaType('readonlyPrivate');
-            await this.log('✓ Generated ReadonlyPrivateData type');
             // Clean up file formatting
             await this.cmd(`npx prettier ${this.typesPath}/index.ts --write`);
             await this.log('✓ All types created successfully');

package/dist/lib/deploy/pack-project.js

@@ -8,11 +8,6 @@ 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`
@@ -53,11 +48,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/lib/schema/compile.js

@@ -3,12 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const fs_extra_1 = __importDefault(require("fs-extra"));
-const path_1 = __importDefault(require("path"));
 const jtd_js_1 = __importDefault(require("ajv/dist/jtd.js"));
 const index_js_1 = __importDefault(require("ajv/dist/standalone/index.js"));
-const schemaNames = ['editablePublic', 'readonlyPublic', 'editablePrivate', 'readonlyPrivate', 'system'];
-async function compileSchema() {
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+async function compileSchema(schemaNames) {
     try {
         const ajv = new jtd_js_1.default({
             // @ts-expect-error: In JTD mode some options are not typed correctly.

package/dist/webpack/production.entry.js

@@ -10,7 +10,7 @@ const root = document.getElementById('root');
 // First set up event handler for extension data
 window.addEventListener('message', function handler(event) {
     if (!__ALLOW_ANY_ORIGIN__) {
-        if (!/^https:\/\/(qa\.)?linktr.ee$|^https:\/\/linktree\.local$/.test(event.origin))
+        if (!/^https:\/\/(qa\.)?linktr.ee$|^https:\/\/linktree\.local$|^https?:\/\/localhost(:\d+)?$/.test(event.origin))
             return;
     }
     if (event.data?.type !== 'extension-data')

package/dist/webpack/webpack.config.js

@@ -130,7 +130,8 @@ async function default_1(env, options) {
         const exposedEntryPoints = {
             // Default entry points
             ['./App']: appEntry,
-            ['./validate']: toVirtualModule((await (0, compile_1.default)())),
+            // Add schema if we need to
+            ['./validate']: toVirtualModule((await (0, compile_1.default)([]))),
         };
         if (useEditorEntry) {
             exposedEntryPoints['./Editor'] = path_1.default.resolve(appDir, 'src/Editor');

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.6",
+  "version": "1.4.0",
   "commands": {
     "build": {
       "id": "build",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/create-link-app",
-  "version": "1.1.6",
+  "version": "1.4.0",
   "description": "Create a Link App on Linktr.ee.",
   "license": "UNLICENSED",
   "author": "Linktree",
@@ -45,7 +45,7 @@
     "@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/react": "^16.3.0",
     "@testing-library/user-event": "14",
     "ajv": "^8.12.0",
     "archiver": "^5.3.1",
@@ -83,6 +83,7 @@
   },
   "devDependencies": {
     "@oclif/test": "^2.1.0",
+    "@storybook/core-common": "^8.6.14",
     "@types/archiver": "^5.3.1",
     "@types/axios": "^0.14.0",
     "@types/form-data": "^2.5.0",
@@ -95,6 +96,7 @@
     "babel-jest": "^29.7.0",
     "jest": "^28.1.1",
     "oclif": "^3.0.1",
+    "postcss-load-config": "^6.0.1",
     "shx": "^0.3.4",
     "ts-jest": "^28.0.4",
     "ts-node": "^10.8.1",

package/templates/common/README.md

@@ -21,27 +21,7 @@ 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/*.jtd.json`        | These files define the shape of the data that is stored for each Link that uses this Link App. They are used to validate the data on the front and back end and to generate Typescript types shared between client and server. The format for these schemas adheres to the [JSON Type Definition](https://jsontypedef.com/), aka [RFC 8927](https://datatracker.ietf.org/doc/html/rfc8927), standard. |
 
-## Generating types from your `schema/*.jtd.json` files
-
-Under the hood Linktree uses the `jtd-codegen` package to generate types from your schema. If you want to generate types for local development, this package must first be installed on your system. You can install it with the following command:
-
-```sh
-brew install jsontypedef/jsontypedef/jtd-codegen
-```
-
-You will also require `prettier`
-
-```sh
-brew install prettier
-```
-
-When you have these packages installed, you can generate types by running one of the following commands:
-
-`npm run generate:types` or `yarn generate:types`
-
-For more information on using `jtd-codegen` to generate code see the [official documentation](https://jsontypedef.com/docs/jtd-codegen/), or for specifics on generating Typescript code [here](https://jsontypedef.com/docs/typescript-codegen/).
 
 ## UI Components
 

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

@@ -1,3 +1,4 @@
 {
-  "title": "Link App Title"
+  "__linkUrl": "https://linktr.ee/linkapp",
+  "__layout": "STACK"
 }

package/templates/common/manifest.json

@@ -6,6 +6,7 @@
     "This example code acts as a base for experimenting with link type capabilities"
   ],
   "manifest_version": "1.0.0",
+  "version": "1.0.0",
   "supporting_links": {
     "terms_of_service": "https://example.com/terms-of-service",
     "privacy_policy": "https://example.com/privacy-policy"

package/templates/react/package.json

@@ -2,14 +2,16 @@
   "private": true,
   "scripts": {
     "build": "create-link-app build",
-    "deploy": "create-link-app deploy",
+    "login": "create-link-app login",
+    "logout": "create-link-app logout",
+    "upload": "create-link-app deploy",
+    "update": "create-link-app deploy --update",
     "storybook": "create-link-app storybook",
     "dev": "create-link-app dev",
-    "generate:types": "jtd-codegen ./schema.json --typescript-out src/types --root-name=LinkAppData"
+    "prepack": "create-link-app build --native"
   },
   "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,12 @@
-import P from '@linktr.ee/component-library/P'
-
 import './tailwind.css'
 
-function App({ title }) {
-  return <P>{title}</P>
+function App({ __linkUrl, __layout }) {
+  return (
+    <div>
+      <p>{__linkUrl}</p>
+      <p>{__layout}</p>
+    </div>
+  )
 }
 
 export default App

package/templates/react-ts/package.json

@@ -2,14 +2,15 @@
   "private": true,
   "scripts": {
     "build": "create-link-app build",
-    "deploy": "create-link-app deploy",
+    "login": "create-link-app login",
+    "logout": "create-link-app logout",
+    "upload": "create-link-app deploy",
+    "update": "create-link-app deploy --update",
     "storybook": "create-link-app storybook",
     "dev": "create-link-app dev",
-    "generate:types": "create-link-app generate-types",
     "prepack": "create-link-app build --native"
   },
   "devDependencies": {
-    "@linktr.ee/component-library": "latest",
     "@linktr.ee/create-link-app": "latest",
     "@linktr.ee/ui-link-kit": "latest",
     "@types/react": "^18.2.8",

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

@@ -1,22 +1,22 @@
 import { Featured, Carousel, Grid, Stack } from './components/Layouts'
-import { AppProps, Layout } from './types'
+import { AppProps } from './types'
 
 import './tailwind.css'
 
 function App(props: AppProps) {
-  const { layout } = props
+  const { __layout } = props
 
-  switch (layout) {
-    case Layout.Stack:
+  switch (__layout) {
+    case 'STACK':
       return <Stack {...props} />
-    case Layout.Grid:
+    case 'GRID':
       return <Grid {...props} />
-    case Layout.Carousel:
+    case 'CAROUSEL':
       return <Carousel {...props} />
-    case Layout.Featured:
+    case 'FEATURED':
       return <Featured {...props} />
     default:
-      return <div>Unknown layout: {props.layout}</div>
+      return <div>Unknown layout: {__layout}</div>
   }
 }
 

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

@@ -3,8 +3,6 @@ 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 '../App'
 
 import './tailwind.sb.css'
@@ -42,7 +40,7 @@ export const Stack: ComponentStory<typeof LinkApp> = (args) => (
   </div>
 )
 Stack.args = {
-  layout: Layout.Stack,
+  __layout: 'STACK',
 }
 
 export const Grid: ComponentStory<typeof LinkApp> = (args) => (
@@ -58,7 +56,7 @@ export const Grid: ComponentStory<typeof LinkApp> = (args) => (
   </div>
 )
 Grid.args = {
-  layout: Layout.Grid,
+  __layout: 'GRID',
 }
 
 export const Carousel: ComponentStory<typeof LinkApp> = (args) => (
@@ -74,7 +72,7 @@ export const Carousel: ComponentStory<typeof LinkApp> = (args) => (
   </div>
 )
 Carousel.args = {
-  layout: Layout.Carousel,
+  __layout: 'CAROUSEL',
 }
 
 export const Featured: ComponentStory<typeof LinkApp> = (args) => (
@@ -90,5 +88,5 @@ export const Featured: ComponentStory<typeof LinkApp> = (args) => (
   </div>
 )
 Featured.args = {
-  layout: Layout.Featured,
+  __layout: 'FEATURED',
 }

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

@@ -1,8 +1,15 @@
-import type { HostData } from '@linktr.ee/ui-link-kit/Schemas'
-import { EditablePrivateData, EditablePublicData, ReadonlyPrivateData, ReadonlyPublicData } from './schema'
+type LinktreeLinkAppContext = {
+  /**
+   * The URL of the link.
+   */
+  __linkUrl: string
 
-export type { HostData } from '@linktr.ee/ui-link-kit/Schemas'
-export { HostDataLayout as Layout } from '@linktr.ee/ui-link-kit/Schemas'
+  /**
+   * The layout style for the link in Linktree profile page.
+   */
+  __layout: 'STACK' | 'GRID' | 'CAROUSEL' | 'FEATURED'
+}
 
-export type AppProps = HostData & EditablePublicData & ReadonlyPublicData
-export type EditorProps = EditablePublicData & ReadonlyPublicData & EditablePrivateData & ReadonlyPrivateData
+export type AppProps = LinktreeLinkAppContext & {
+  // Additional properties here
+}

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +0,0 @@
-import './tailwind.css'
-
-const Editor = () => {
-  return <div>Editor</div>
-}
-
-export default Editor

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

@@ -1,7 +0,0 @@
-import './tailwind.css'
-
-const Sheet = () => {
-  return <div>Sheet</div>
-}
-
-export default Sheet

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

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