@linktr.ee/create-link-app 0.3.0-next.7 → 0.3.0-next.8

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/oclif.manifest.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/create-link-app",
-  "version": "0.3.0-next.7",
+  "version": "0.3.0-next.8",
   "description": "Create a Link App on Linktr.ee.",
   "license": "UNLICENSED",
   "author": "Linktree",

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,9 +3,11 @@
   "scripts": {
     "build": "create-link-app build",
     "deploy": "create-link-app deploy",
+    "storybook": "create-link-app storybook",
     "dev": "create-link-app dev"
   },
   "devDependencies": {
+    "@linktr.ee/component-library": "latest",
     "@linktr.ee/create-link-app": "latest",
     "@linktr.ee/ui-link-kit": "latest"
   }

package/templates/react/src/index.jsx

@@ -1,18 +1,7 @@
-import { Container, Description, Header } from '@linktr.ee/ui-link-kit'
+import P from '@linktr.ee/component-library/P'
 
-import logo from './images/logo.png'
-
-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-ts/package.json

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

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

@@ -1,19 +1,8 @@
-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'
-
-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/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