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

package/oclif.manifest.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/create-link-app",
-  "version": "0.3.0-next.4",
+  "version": "0.3.0-next.41",
   "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,9 +35,22 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.3",
-    "@linktr.ee/component-library": "^7.0.17",
+    "@linktr.ee/component-library": "latest",
+    "@linktr.ee/ui-link-kit": "latest",
     "@oclif/core": "^1.9.0",
     "@oclif/plugin-help": "^5.1.12",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@tailwindcss/line-clamp": "^0.4.4",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "14",
+    "ajv": "^8.12.0",
     "archiver": "^5.3.1",
     "autoprefixer": "^10.4.14",
     "axios": "^0.27.2",
@@ -53,12 +67,17 @@
     "netrc-parser": "^3.1.6",
     "openid-client": "^5.1.6",
     "postcss": "^8.4.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "postcss-loader": "^4.3.0",
+    "prettier": "^2.8.8",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "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",
+    "tailwindcss": "^3.3.2",
     "typescript": "^4.7.3",
     "webpack": "^5.75.0",
     "webpack-dev-server": "^4.11.1"
@@ -71,8 +90,8 @@
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^28.1.1",
     "@types/jsonwebtoken": "^8.5.8",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
     "axios-mock-adapter": "^1.21.1",
     "jest": "^28.1.1",
     "oclif": "^3.0.1",

package/templates/common/README.md

@@ -14,13 +14,34 @@ Optionally, you can specify a different port or serve over HTTPS. Run command wi
 
 Several files were created during the bootstrapping of this project. Some of these files play a key role:
 
-| File | Description |
-| --- | --- |
-| `src/index.jsx` | The entry point for your Link App |
-| `manifest.json` | Defines key information about your Link App, and helps users to discover your Link App via the [Linktree Marketplace](https://linktr.ee/marketplace) |
-| `settings.json` | Defines the settings made available to Linktree users when configuring the Link App via [Linktree Admin](https://linktr.ee/admin) |
-| `fixtures/props-data.json` | Used during development, this file acts as mock data for the `settings.json` output, it is injected as props to the entry point component |
-| `url-match-rules.json` | Defines the URL pattern to match against when users add a link on Linktree via URL, its structure follows the [URL Pattern API](https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API) |
+| File                       | Description                                                                                                                                                                                                                                                                                                                                                                                           |
+| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src/index.jsx`            | The entry point for your Link App                                                                                                                                                                                                                                                                                                                                                                     |
+| `manifest.json`            | Defines key information about your Link App, and helps users to discover your Link App via the [Linktree Marketplace](https://linktr.ee/marketplace)                                                                                                                                                                                                                                                  |
+| `settings.json`            | Defines the settings made available to Linktree users when configuring the Link App via [Linktree Admin](https://linktr.ee/admin)                                                                                                                                                                                                                                                                     |
+| `fixtures/props-data.json` | Used during development, this file acts as mock data for the `settings.json` output, it is injected as props to the entry point component                                                                                                                                                                                                                                                             |
+| `url-match-rules.json`     | Defines the URL pattern to match against when users add a link on Linktree via URL, its structure follows the [URL Pattern API](https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API)                                                                                                                                                                                                     |
+| `schema/*.jtd.json`        | These files define the shape of the data that is stored for each Link that uses this Link App. They are used to validate the data on the front and back end and to generate Typescript types shared between client and server. The format for these schemas adheres to the [JSON Type Definition](https://jsontypedef.com/), aka [RFC 8927](https://datatracker.ietf.org/doc/html/rfc8927), standard. |
+
+## Generating types from your `schema/*.jtd.json` files
+
+Under the hood Linktree uses the `jtd-codegen` package to generate types from your schema. If you want to generate types for local development, this package must first be installed on your system. You can install it with the following command:
+
+```sh
+brew install jsontypedef/jsontypedef/jtd-codegen
+```
+
+You will also require `prettier`
+
+```sh
+brew install prettier
+```
+
+When you have these packages installed, you can generate types by running one of the following commands:
+
+`npm run generate:types` or `yarn generate:types`
+
+For more information on using `jtd-codegen` to generate code see the [official documentation](https://jsontypedef.com/docs/jtd-codegen/), or for specifics on generating Typescript code [here](https://jsontypedef.com/docs/typescript-codegen/).
 
 ## UI Components
 
@@ -72,18 +93,18 @@ Access to a Link App can be granted to additional users who may need to retrieve
 
 Please note the user receiving access must also have a Linktree account with developer privileges. Maintainer access can be granted to as many developer accounts as required.
 
-***Note: Only the Link App Owner can grant Maintainer access to additional users. You must be logged in with an Owner account in order to use the command.***
+**_Note: Only the Link App Owner can grant Maintainer access to additional users. You must be logged in with an Owner account in order to use the command._**
 
 ### Maintainer and Owner Permitted Actions
 
 The following table compares which actions are permitted for Maintainers and Owners:
 
-|Action                     |Owner  |Maintainer|Notes                                          |
-|---------------------------|-------|----------|-----------------------------------------------|
-|Create Link App            |✓|N/A       |Owner is defined when Link App is first created|
-|Get Link App               |✓|✓   |                                               |
-|Update Link App            |✓|✓   |                                               |
-|Request Link App review    |✓|✓   |                                               |
-|Get Link App maintainers   |✓|✓   |                                               |
-|Add new Link App maintainer|✓|✗   |                                               |
-|Remove Link App maintainer |✓|✗   |                                               |
+| Action                      | Owner   | Maintainer | Notes                                           |
+| --------------------------- | ------- | ---------- | ----------------------------------------------- |
+| Create Link App             | ✓ | N/A        | Owner is defined when Link App is first created |
+| Get Link App                | ✓ | ✓    |                                                 |
+| Update Link App             | ✓ | ✓    |                                                 |
+| Request Link App review     | ✓ | ✓    |                                                 |
+| Get Link App maintainers    | ✓ | ✓    |                                                 |
+| Add new Link App maintainer | ✓ | ✗    |                                                 |
+| Remove Link App maintainer  | ✓ | ✗    |                                                 |

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

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

package/templates/common/gitignore

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

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

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

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

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

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

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

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

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

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

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

package/templates/common/settings.json

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

package/templates/react/package.json

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

package/templates/react/src/index.jsx

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

package/templates/react/src/tailwind.css

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

package/templates/react-ts/package.json

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

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

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

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

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

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

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

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

@@ -0,0 +1,59 @@
+import { AppProps } from '../types'
+
+const baseStyle = {
+  backgroundColor: 'var(--lt-color-primary)',
+  color: 'var(--lt-color-on-primary)',
+} as React.CSSProperties
+
+const Featured = (props: AppProps) => {
+  return (
+    <div
+      className="px-6 pt-12 pb-11 h-full"
+      style={{
+        ...baseStyle,
+        borderRadius: 'var(--lt-feature-container-radius)',
+      }}
+    >
+      Featured
+    </div>
+  )
+}
+
+const Carousel = (props: AppProps) => {
+  return (
+    <div
+      className="px-4 pt-16 pb-10 h-full"
+      style={{
+        ...baseStyle,
+        borderRadius: 'var(--lt-carousel-container-radius)',
+      }}
+    >
+      Carousel
+    </div>
+  )
+}
+
+const Grid = (props: AppProps) => {
+  return (
+    <div className="px-3 py-10 h-full" style={{ ...baseStyle, borderRadius: 'var(--lt-grid-container-radius)' }}>
+      Grid
+    </div>
+  )
+}
+
+const Stack = (props: AppProps) => {
+  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>
+  )
+}
+
+export { Featured, Carousel, Grid, Stack }

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

@@ -0,0 +1,94 @@
+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
+    data-link-type-id={__LINK_TYPE_SLUG__}
+    style={{
+      margin: '0.5rem',
+      width: 374,
+      height: 80,
+    }}
+  >
+    <LinkApp {...args} />
+  </div>
+)
+Stack.args = {
+  layout: Layout.Stack,
+}
+
+export const Grid: ComponentStory<typeof LinkApp> = (args) => (
+  <div
+    data-link-type-id={__LINK_TYPE_SLUG__}
+    style={{
+      margin: '0.5rem',
+      width: 183,
+      height: 240,
+    }}
+  >
+    <LinkApp {...args} />
+  </div>
+)
+Grid.args = {
+  layout: Layout.Grid,
+}
+
+export const Carousel: ComponentStory<typeof LinkApp> = (args) => (
+  <div
+    data-link-type-id={__LINK_TYPE_SLUG__}
+    style={{
+      margin: '0.5rem',
+      width: 224,
+      height: 296,
+    }}
+  >
+    <LinkApp {...args} />
+  </div>
+)
+Carousel.args = {
+  layout: Layout.Carousel,
+}
+
+export const Featured: ComponentStory<typeof LinkApp> = (args) => (
+  <div
+    data-link-type-id={__LINK_TYPE_SLUG__}
+    style={{
+      margin: '0.5rem',
+      width: 374,
+      height: 374,
+    }}
+  >
+    <LinkApp {...args} />
+  </div>
+)
+Featured.args = {
+  layout: Layout.Featured,
+}

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,11 @@
-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
+}
+
+declare const __LINK_TYPE_ID__: string
+declare const __LINK_TYPE_SLUG__: string

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

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

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

@@ -0,0 +1,33 @@
+/**
+ * These types were autogenerated by @linktr.ee/create-link-app
+ * https://www.npmjs.com/package/@linktr.ee/create-link-app
+ */
+
+/**
+ * These are properties that the Linker can `read` and `write`, and the Visitor
+ * can `read`
+ */
+export interface EditablePublicData {
+  thumbnailUrl: string
+  title: string
+  url: string
+}
+
+/**
+ * These are properties that the Linker can `read`, and the Visitor can `read`
+ */
+export interface ReadonlyPublicData {}
+
+/**
+ * These are properties that the Linker can `read` 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
+}