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

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
+}

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

@@ -1,19 +0,0 @@
-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