@linktr.ee/messaging-react 1.26.1 → 1.28.0-rc-1776225927

package/src/components/LockedAttachment/LockedAttachment.stories.tsx

@@ -0,0 +1,343 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import LockedAttachment, { type VisitorCardProps } from '.'
+
+const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
+const VIDEO_SOURCE = '/video-source.mp4'
+
+const IMAGE_THUMBNAIL_BLURRED = '/image-thumbnail-blurred.jpg'
+const IMAGE_SOURCE = '/image-source.jpg'
+
+const DOCUMENT_THUMBNAIL = '/document-thumbnail.jpg'
+const DOCUMENT_SOURCE = '/document-source.pdf'
+
+const AUDIO_THUMBNAIL = '/audio-thumbnail.jpg'
+const AUDIO_SOURCE = '/audio-source.mp3'
+
+const meta: Meta = {
+  title: 'Components/LockedAttachment',
+  component: LockedAttachment,
+  parameters: { layout: 'centered' },
+}
+export default meta
+
+type InteractiveProps = Omit<VisitorCardProps, 'onUnlock' | 'onDownload'> & {
+  unlockedSource: string
+}
+
+const Interactive = ({ unlockedSource, ...props }: InteractiveProps) => (
+  <LockedAttachment
+    {...props}
+    onUnlock={async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      const res = await fetch(unlockedSource)
+      const blob = await res.blob()
+      return { source: URL.createObjectURL(blob) }
+    }}
+    onDownload={() => {}}
+  />
+)
+
+const VARIANTS = [
+  {
+    label: 'Video',
+    title: "Alicia's Workout Plan",
+    mimeType: 'video/mp4',
+    detail: '1:20',
+    thumbnail: VIDEO_THUMBNAIL_BLURRED,
+    source: VIDEO_SOURCE,
+  },
+  {
+    label: 'Audio',
+    title: 'Morning Meditation',
+    mimeType: 'audio/mpeg',
+    detail: '4:35',
+    thumbnail: AUDIO_THUMBNAIL,
+    source: AUDIO_SOURCE,
+  },
+  {
+    label: 'Image',
+    title: 'Picture of my cat',
+    mimeType: 'image/jpeg',
+    detail: '3.2 MB',
+    thumbnail: IMAGE_THUMBNAIL_BLURRED,
+    source: IMAGE_SOURCE,
+  },
+  {
+    label: 'Document',
+    title: 'Strength Training Guide',
+    mimeType: 'application/zip',
+    detail: '14 files',
+    thumbnail: DOCUMENT_THUMBNAIL,
+    source: DOCUMENT_SOURCE,
+  },
+  {
+    label: 'Unknown',
+    title: 'Unknown Attachment',
+    mimeType: 'application/octet-stream',
+    detail: undefined,
+    thumbnail: undefined,
+    source: DOCUMENT_SOURCE,
+  },
+]
+
+const NO_THUMBNAIL_VARIANTS = [
+  {
+    label: 'Video',
+    title: "Alicia's Workout Plan",
+    mimeType: 'video/mp4',
+    detail: '1:20',
+    source: VIDEO_SOURCE,
+  },
+  {
+    label: 'Audio',
+    title: 'Morning Meditation',
+    mimeType: 'audio/mpeg',
+    detail: '4:35',
+    source: AUDIO_SOURCE,
+  },
+  {
+    label: 'Image',
+    title: 'Picture of my cat',
+    mimeType: 'image/jpeg',
+    detail: '3.2 MB',
+    source: IMAGE_SOURCE,
+  },
+  {
+    label: 'Document',
+    title: 'Strength Training Guide',
+    mimeType: 'application/zip',
+    detail: '14 files',
+    source: DOCUMENT_SOURCE,
+  },
+]
+
+const Table = ({ children }: { children: React.ReactNode }) => (
+  <div className="p-12">
+    <table className="border-separate border-spacing-4">{children}</table>
+  </div>
+)
+
+const TableHead = ({
+  variants,
+}: {
+  variants: { label: string; mimeType: string }[]
+}) => (
+  <thead>
+    <tr>
+      <th className="text-left text-xs font-medium text-black/40 pb-2" />
+      {variants.map(({ label, mimeType }) => (
+        <th
+          key={mimeType}
+          className="text-left text-xs font-medium text-black/40 pb-2"
+        >
+          {label}
+        </th>
+      ))}
+    </tr>
+  </thead>
+)
+
+export const Visitor: StoryFn = () => (
+  <Table>
+    <TableHead variants={VARIANTS} />
+    <tbody>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+          Locked
+        </td>
+        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+          <td key={mimeType} className="align-top">
+            <Interactive
+              title={title}
+              amountText="AU$9.99"
+              thumbnail={thumbnail}
+              mimeType={mimeType}
+              detail={detail}
+              unlockedSource={source}
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+          Purchased
+        </td>
+        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+          <td key={mimeType} className="align-top">
+            <Interactive
+              title={title}
+              amountText="AU$9.99"
+              thumbnail={thumbnail}
+              mimeType={mimeType}
+              detail={detail}
+              unlockedSource={source}
+              paymentStatus="paid"
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+          Unlocked
+        </td>
+        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+          <td key={mimeType} className="align-top">
+            <LockedAttachment
+              title={title}
+              thumbnail={thumbnail}
+              source={source}
+              mimeType={mimeType}
+              detail={detail}
+              amountText="AU$9.99"
+              paymentStatus="paid"
+              onDownload={() => {}}
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </Table>
+)
+
+export const Creator: StoryFn = () => (
+  <Table>
+    <TableHead variants={VARIANTS} />
+    <tbody>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+          Preview
+        </td>
+        {VARIANTS.map(({ mimeType, detail, thumbnail, source }) => (
+          <td key={mimeType} className="align-top">
+            <LockedAttachment
+              isCreator
+              isPreview
+              thumbnail={thumbnail}
+              source={source}
+              mimeType={mimeType}
+              detail={detail}
+              placeholderAmountText="A$0.00"
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+          Pending
+        </td>
+        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+          <td key={mimeType} className="align-top">
+            <LockedAttachment
+              isCreator
+              title={title}
+              thumbnail={thumbnail}
+              source={source}
+              mimeType={mimeType}
+              detail={detail}
+              amountText="AU$9.99"
+              onDismiss={() => alert('Dismissed')}
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+          Sent
+        </td>
+        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+          <td key={mimeType} className="align-top">
+            <LockedAttachment
+              isCreator
+              title={title}
+              thumbnail={thumbnail}
+              source={source}
+              mimeType={mimeType}
+              detail={detail}
+              amountText="AU$9.99"
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+          Sold
+        </td>
+        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+          <td key={mimeType} className="align-top">
+            <LockedAttachment
+              isCreator
+              title={title}
+              thumbnail={thumbnail}
+              source={source}
+              mimeType={mimeType}
+              detail={detail}
+              amountText="AU$9.99"
+              paymentStatus="paid"
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </Table>
+)
+
+export const NoThumbnail: StoryFn = () => (
+  <Table>
+    <TableHead variants={NO_THUMBNAIL_VARIANTS} />
+    <tbody>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+          Creator
+        </td>
+        {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
+          <td key={mimeType} className="align-top">
+            <LockedAttachment
+              isCreator
+              title={title}
+              source={source}
+              mimeType={mimeType}
+              detail={detail}
+              amountText="AU$9.99"
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+          Locked
+        </td>
+        {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
+          <td key={mimeType} className="align-top">
+            <Interactive
+              title={title}
+              amountText="AU$9.99"
+              mimeType={mimeType}
+              detail={detail}
+              unlockedSource={source}
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+          Unlocked
+        </td>
+        {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
+          <td key={mimeType} className="align-top">
+            <LockedAttachment
+              title={title}
+              source={source}
+              mimeType={mimeType}
+              detail={detail}
+              amountText="AU$9.99"
+              paymentStatus="paid"
+              onDownload={() => {}}
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </Table>
+)