@linktr.ee/create-link-app 0.3.0-next.11 → 0.3.0-next.13

package/dist/storybook/global.css

@@ -0,0 +1,39 @@
+:root {
+  /* BorderRadius.Full */
+  --lt-cover-radius: 6rem;
+  --lt-cover-radius-mobile: 4rem;
+  --lt-treetop-radius-mobile: 2.5rem;
+  --lt-feature-container-radius: 2rem;
+  --lt-feature-thumbnail-radius: 1.5rem;
+  --lt-carousel-container-radius: 1.5rem;
+  --lt-carousel-thumbnail-radius: 1rem;
+  --lt-grid-container-radius: 1.25rem;
+  --lt-grid-thumbnail-radius: 0.75rem;
+  --lt-stack-container-radius: 1rem;
+  --lt-stack-thumbnail-radius: 0.65rem;
+
+  --lt-font-family: "Inter";
+
+  /* Theme */
+  --lt-color-primary: #d1c4f7;
+  --lt-color-secondary: #d1c4f7;
+  --lt-color-on-primary: #070217;
+  --lt-color-on-secondary: #070217;
+
+  --lt-color-15: rgb(14, 9, 23);
+  --lt-color-14: rgb(27, 17, 47);
+  --lt-color-13: rgb(41, 26, 70);
+  --lt-color-12: rgb(55, 34, 93);
+  --lt-color-11: rgb(69, 43, 117);
+  --lt-color-10: rgb(82, 51, 140);
+  --lt-color-9: rgb(96, 60, 163);
+  --lt-color-8: rgb(110, 68, 187);
+  --lt-color-7: rgb(128, 92, 195);
+  --lt-color-6: rgb(146, 115, 204);
+  --lt-color-5: rgb(164, 138, 212);
+  --lt-color-4: rgb(182, 162, 221);
+  --lt-color-3: rgb(201, 185, 229);
+  --lt-color-2: rgb(219, 208, 238);
+  --lt-color-1: rgb(237, 232, 246);
+  --lt-color-0: rgb(240, 236, 248);
+}

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0-next.11",
+  "version": "0.3.0-next.13",
   "commands": {
     "build": {
       "id": "build",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/create-link-app",
-  "version": "0.3.0-next.11",
+  "version": "0.3.0-next.13",
   "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",

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

@@ -0,0 +1,57 @@
+import { SettingsData } from '../types'
+
+const baseStyle = {
+  backgroundColor: 'var(--lt-button-color)',
+  color: 'var(--lt-primary-color)',
+} as React.CSSProperties
+
+const Featured = (props: SettingsData) => {
+  return (
+    <div
+      className="px-6 pt-12 pb-11 h-full"
+      style={{
+        ...baseStyle,
+        borderRadius: 'var(--lt-feature-container-radius',
+      }}
+    >
+      Featured
+    </div>
+  )
+}
+
+const Carousel = (props: SettingsData) => {
+  return (
+    <div
+      className="px-4 pt-16 pb-10 h-full"
+      style={{
+        ...baseStyle,
+        borderRadius: 'var(--lt-carousel-container-radius',
+      }}
+    >
+      Carousel
+    </div>
+  )
+}
+
+const Grid = (props: SettingsData) => {
+  return (
+    <div className="px-3 py-10 h-full" style={{ ...baseStyle, borderRadius: 'var(--lt-grid-container-radius' }}>
+      Grid
+    </div>
+  )
+}
+
+const Stack = (props: SettingsData) => {
+  return (
+    <div className="flex p-2 h-full gap-2 w-full" style={{ ...baseStyle, borderRadius: 'var(--lt-stack-container-radius' }}>
+      <div className="w-16 aspect-square"></div>
+      <h2 className="mr-16">Stack</h2>
+    </div>
+  )
+}
+
+const SheetBody = () => {
+  return <div>sheet body</div>
+}
+
+export { Featured, Carousel, Grid, Stack, SheetBody }

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

@@ -1,10 +1,23 @@
-import P from '@linktr.ee/component-library/P'
-import { SettingsData } from './types'
+import { Featured, Carousel, Grid, Stack, SheetBody } from './components/Layouts'
+import { SettingsData, Layout } from './types'
 
-import './tailwind.css'
+function App(props: SettingsData) {
+  const { layout } = props
 
-function App({ title }: SettingsData) {
-  return <P>{title}</P>
+  switch (layout) {
+    case Layout.stack:
+      return <Stack {...props} />
+    case Layout.grid:
+      return <Grid {...props} />
+    case Layout.carousel:
+      return <Carousel {...props} />
+    case Layout.featured:
+      return <Featured {...props} />
+    case Layout.sheetBody:
+      return <SheetBody />
+    default:
+      return <div>Unknown layout: {props.layout}</div>
+  }
 }
 
 export default App

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

@@ -1,9 +1,14 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import { name } from '../../manifest.json'
+import fixture from '../../common/fixtures/props-data.json'
+
+import { Layout } from '../types'
 
 import LinkApp from '..'
 
+import '../tailwind.css'
+
 export default {
   title: `Link App/${name}`,
   component: LinkApp,
@@ -11,28 +16,84 @@ export default {
   parameters: {
     layout: 'fullscreen',
   },
+  args: {
+    ...fixture,
+    editing: false,
+  },
+  argTypes: {
+    layout: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 } 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" />
+export const Stack: ComponentStory<typeof LinkApp> = (args) => (
+  <div
+    className="m-2"
+    style={{
+      width: 374,
+      height: 80,
+    }}
+  >
+    <LinkApp {...args} />
+  </div>
+)
+Stack.args = {
+  layout: Layout.stack,
+}
+
+export const Grid: ComponentStory<typeof LinkApp> = (args) => (
+  <div
+    className="m-2"
+    style={{
+      width: 183,
+      height: 240,
+    }}
+  >
+    <LinkApp {...args} />
   </div>
 )
+Grid.args = {
+  layout: Layout.grid,
+}
 
-export const Grid: ComponentStory<typeof LinkApp> = () => (
-  <div className="bg-marble rounded-lg p-2 m-2 w-[150px]">
-    <LinkApp layout="GRID" editing={false} title="Test Grid" />
+export const Carousel: ComponentStory<typeof LinkApp> = (args) => (
+  <div
+    className="m-2"
+    style={{
+      width: 224,
+      height: 296,
+    }}
+  >
+    <LinkApp {...args} />
   </div>
 )
+Carousel.args = {
+  layout: Layout.carousel,
+}
 
-export const Carousel: ComponentStory<typeof LinkApp> = () => (
-  <div className="bg-marble rounded-lg p-2 m-2 w-[225px]">
-    <LinkApp layout="CAROUSEL" editing={false} title="Test Carousel" />
+export const Featured: ComponentStory<typeof LinkApp> = (args) => (
+  <div
+    className="m-2"
+    style={{
+      width: 374,
+      height: 374,
+    }}
+  >
+    <LinkApp {...args} />
   </div>
 )
+Featured.args = {
+  layout: Layout.featured,
+}
 
-export const Featured: ComponentStory<typeof LinkApp> = () => (
-  <div className="bg-marble rounded-lg p-2 m-2 w-[384px]">
-    <LinkApp layout="FEATURED" editing={false} title="Test Featured" />
+export const SheetBody: ComponentStory<typeof LinkApp> = (args) => (
+  <div className="m-2">
+    <LinkApp {...args} />
   </div>
 )
+SheetBody.args = {
+  layout: Layout.sheetBody,
+}

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

@@ -1,4 +1,8 @@
-// @HACK: This file is removed at build time, but we need it for type checking
+// @HACK: These files are removed at build time, but we need it for type checking
 declare module '*manifest.json' {
   export const name: string
 }
+
+declare module '*props-data.json' {
+  export const name: string
+}

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

@@ -1,8 +1,23 @@
 type LinktreeLinkContext = {
-  layout: 'STACK' | 'CAROUSEL' | 'FEATURED' | 'GRID'
-  editing: boolean
-}
+  layout: Layout;
+  editing: boolean;
+  borderRadius: BorderRadius;
+};
 
 export type SettingsData = {
-  title: string
-} & LinktreeLinkContext
+  title: string;
+} & LinktreeLinkContext;
+
+export enum Layout {
+  featured = "FEATURED",
+  carousel = "CAROUSEL",
+  grid = "GRID",
+  stack = "STACK",
+  sheetBody = "SHEET_BODY",
+}
+
+export enum BorderRadius {
+  Full = "FULL",
+  Medium = "MEDIUM",
+  None = "NONE",
+}