@linktr.ee/messaging-react 1.26.0 → 1.26.1-rc-1776058603

package/src/components/LockedAttachmentCard/LockedAttachmentCard.stories.tsx

@@ -0,0 +1,365 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React, { useState } from 'react'
+
+import LockedAttachmentCard, { type LockedAttachmentCardProps } from '.'
+
+const VIDEO_THUMBNAIL = '/video-thumbnail.jpg'
+const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
+const VIDEO_SOURCE = '/video-source.mp4'
+
+const IMAGE_THUMBNAIL = '/image-thumbnail.jpg'
+const IMAGE_THUMBNAIL_BLURRED = '/image-thumbnail-blurred.jpg'
+const IMAGE_SOURCE = '/image-source.jpg'
+
+const DOCUMENT_THUMBNAIL = '/document-thumbnail.jpg'
+const DOCUMENT_THUMBNAIL_BLURRED = '/document-thumbnail-blurred.jpg'
+const DOCUMENT_SOURCE = '/document-source.pdf'
+
+const AUDIO_THUMBNAIL = '/audio-thumbnail.jpg'
+const AUDIO_THUMBNAIL_BLURRED = '/audio-thumbnail-blurred.jpg'
+const AUDIO_SOURCE = '/audio-source.mp3'
+
+const meta: Meta = {
+  title: 'LockedAttachmentCard',
+  component: LockedAttachmentCard,
+  parameters: { layout: 'centered' },
+}
+export default meta
+
+const Labeled = ({ label, children }: { label: string; children: React.ReactNode }) => (
+  <div className="flex flex-col gap-2">
+    {children}
+    <span className="text-center text-xs text-black/40">{label}</span>
+  </div>
+)
+
+type InteractiveProps = Omit<LockedAttachmentCardProps, 'onUnlock' | 'onDownload'> & {
+  unlockedSource: string
+  unlockedThumbnail?: string
+}
+
+const Interactive = ({ unlockedSource, unlockedThumbnail, ...props }: InteractiveProps) => {
+  const [source, setSource] = useState<string | undefined>(undefined)
+  const [thumbnail, setThumbnail] = useState(props.thumbnail)
+  const [loading, setLoading] = useState(false)
+
+  const handleUnlock = async () => {
+    setLoading(true)
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    const res = await fetch(unlockedSource)
+    const blob = await res.blob()
+    setSource(URL.createObjectURL(blob))
+    if (unlockedThumbnail) setThumbnail(unlockedThumbnail)
+    setLoading(false)
+  }
+
+  return (
+    <LockedAttachmentCard
+      {...props}
+      thumbnail={thumbnail}
+      source={source}
+      loading={loading}
+      onUnlock={source ? undefined : handleUnlock}
+      onDownload={source ? () => {} : undefined}
+    />
+  )
+}
+
+export const Video: StoryFn = () => (
+  <div className="flex items-start gap-4 p-12">
+    <Labeled label="Locked">
+      <Interactive
+        title="Alicia's Workout Plan"
+        amountText="AU$9.99"
+        thumbnail={VIDEO_THUMBNAIL_BLURRED}
+        unlockedThumbnail={VIDEO_THUMBNAIL}
+        mimeType="video/mp4"
+        detail="1:20"
+        unlockedSource={VIDEO_SOURCE}
+      />
+    </Labeled>
+    <Labeled label="Purchased">
+      <Interactive
+        title="Alicia's Workout Plan"
+        amountText="AU$9.99"
+        thumbnail={VIDEO_THUMBNAIL_BLURRED}
+        unlockedThumbnail={VIDEO_THUMBNAIL}
+        mimeType="video/mp4"
+        detail="1:20"
+        unlockedSource={VIDEO_SOURCE}
+        isPurchased
+      />
+    </Labeled>
+    <Labeled label="Unlocked">
+      <LockedAttachmentCard
+        title="Alicia's Workout Plan"
+        thumbnail={VIDEO_THUMBNAIL}
+        source={VIDEO_SOURCE}
+        mimeType="video/mp4"
+        detail="1:20"
+        onDownload={() => {}}
+      />
+    </Labeled>
+  </div>
+)
+
+export const Audio: StoryFn = () => (
+  <div className="flex items-start gap-4 p-12">
+    <Labeled label="Locked">
+      <Interactive
+        title="Morning Meditation"
+        amountText="AU$4.99"
+        thumbnail={AUDIO_THUMBNAIL_BLURRED}
+        unlockedThumbnail={AUDIO_THUMBNAIL}
+        mimeType="audio/mpeg"
+        detail="4:35"
+        unlockedSource={AUDIO_SOURCE}
+      />
+    </Labeled>
+    <Labeled label="Purchased">
+      <Interactive
+        title="Morning Meditation"
+        amountText="AU$4.99"
+        thumbnail={AUDIO_THUMBNAIL_BLURRED}
+        unlockedThumbnail={AUDIO_THUMBNAIL}
+        mimeType="audio/mpeg"
+        detail="4:35"
+        unlockedSource={AUDIO_SOURCE}
+        isPurchased
+      />
+    </Labeled>
+    <Labeled label="Unlocked">
+      <LockedAttachmentCard
+        title="Morning Meditation"
+        thumbnail={AUDIO_THUMBNAIL}
+        source={AUDIO_SOURCE}
+        mimeType="audio/mpeg"
+        detail="4:35"
+        onDownload={() => {}}
+      />
+    </Labeled>
+  </div>
+)
+
+export const Image: StoryFn = () => (
+  <div className="flex items-start gap-4 p-12">
+    <Labeled label="Locked">
+      <Interactive
+        title="Picture of my cat"
+        amountText="AU$2.99"
+        thumbnail={IMAGE_THUMBNAIL_BLURRED}
+        unlockedThumbnail={IMAGE_THUMBNAIL}
+        mimeType="image/jpeg"
+        detail="3.2 MB"
+        unlockedSource={IMAGE_SOURCE}
+      />
+    </Labeled>
+    <Labeled label="Purchased">
+      <Interactive
+        title="Picture of my cat"
+        amountText="AU$2.99"
+        thumbnail={IMAGE_THUMBNAIL_BLURRED}
+        unlockedThumbnail={IMAGE_THUMBNAIL}
+        mimeType="image/jpeg"
+        detail="3.2 MB"
+        unlockedSource={IMAGE_SOURCE}
+        isPurchased
+      />
+    </Labeled>
+    <Labeled label="Unlocked">
+      <LockedAttachmentCard
+        title="Picture of my cat"
+        thumbnail={IMAGE_THUMBNAIL}
+        source={IMAGE_SOURCE}
+        mimeType="image/jpeg"
+        detail="3.2 MB"
+        onDownload={() => {}}
+      />
+    </Labeled>
+  </div>
+)
+
+export const Document: StoryFn = () => (
+  <div className="flex items-start gap-4 p-12">
+    <Labeled label="Locked">
+      <Interactive
+        title="Strength Training Guide"
+        amountText="AU$4.99"
+        thumbnail={DOCUMENT_THUMBNAIL_BLURRED}
+        unlockedThumbnail={DOCUMENT_THUMBNAIL}
+        mimeType="application/zip"
+        detail="14 files"
+        unlockedSource={DOCUMENT_SOURCE}
+      />
+    </Labeled>
+    <Labeled label="Purchased">
+      <Interactive
+        title="Strength Training Guide"
+        amountText="AU$4.99"
+        thumbnail={DOCUMENT_THUMBNAIL_BLURRED}
+        unlockedThumbnail={DOCUMENT_THUMBNAIL}
+        mimeType="application/zip"
+        detail="14 files"
+        unlockedSource={DOCUMENT_SOURCE}
+        isPurchased
+      />
+    </Labeled>
+    <Labeled label="Unlocked">
+      <LockedAttachmentCard
+        title="Strength Training Guide"
+        thumbnail={DOCUMENT_THUMBNAIL}
+        source={DOCUMENT_SOURCE}
+        mimeType="application/zip"
+        detail="14 files"
+        onDownload={() => {}}
+      />
+    </Labeled>
+  </div>
+)
+
+const VARIANTS = [
+  { label: 'Video', title: "Alicia's Workout Plan", mimeType: 'video/mp4', detail: '1:20', thumbnail: VIDEO_THUMBNAIL, thumbnailBlurred: VIDEO_THUMBNAIL_BLURRED, source: VIDEO_SOURCE },
+  { label: 'Audio', title: 'Morning Meditation', mimeType: 'audio/mpeg', detail: '4:35', thumbnail: AUDIO_THUMBNAIL, thumbnailBlurred: AUDIO_THUMBNAIL_BLURRED, source: AUDIO_SOURCE },
+  { label: 'Image', title: 'Picture of my cat', mimeType: 'image/jpeg', detail: '3.2 MB', thumbnail: IMAGE_THUMBNAIL, thumbnailBlurred: IMAGE_THUMBNAIL_BLURRED, source: IMAGE_SOURCE },
+  { label: 'Document', title: 'Strength Training Guide', mimeType: 'application/zip', detail: '14 files', thumbnail: DOCUMENT_THUMBNAIL, thumbnailBlurred: DOCUMENT_THUMBNAIL_BLURRED, source: DOCUMENT_SOURCE },
+]
+
+export const Fallback: StoryFn = () => (
+  <div className="flex items-start gap-4 p-12">
+    <Labeled label="Locked">
+      <Interactive
+        title="Unknown Attachment"
+        amountText="AU$9.99"
+        mimeType="application/octet-stream"
+        unlockedSource={DOCUMENT_SOURCE}
+      />
+    </Labeled>
+    <Labeled label="Purchased">
+      <Interactive
+        title="Unknown Attachment"
+        amountText="AU$9.99"
+        mimeType="application/octet-stream"
+        unlockedSource={DOCUMENT_SOURCE}
+        isPurchased
+      />
+    </Labeled>
+    <Labeled label="Unlocked">
+      <LockedAttachmentCard
+        title="Unknown Attachment"
+        source={DOCUMENT_SOURCE}
+        mimeType="application/octet-stream"
+        onDownload={() => {}}
+      />
+    </Labeled>
+  </div>
+)
+
+const NO_POSTER_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 },
+]
+
+export const NoPoster: StoryFn = () => (
+  <div className="p-12">
+    <table className="border-separate border-spacing-4">
+      <thead>
+        <tr>
+          <th className="text-left text-xs font-medium text-black/40 pb-2" />
+          {NO_POSTER_VARIANTS.map(({ label, mimeType }) => (
+            <th key={mimeType} className="text-left text-xs font-medium text-black/40 pb-2">{label}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {(['Locked', 'Unlocked'] as const).map(state => (
+          <tr key={state}>
+            <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">{state}</td>
+            {NO_POSTER_VARIANTS.map(({ title, mimeType, detail, source }) => (
+              <td key={mimeType} className="align-top">
+                {state === 'Locked' ? (
+                  <Interactive
+                    title={title}
+                    amountText="AU$9.99"
+                    mimeType={mimeType}
+                    detail={detail}
+                    unlockedSource={source}
+                  />
+                ) : (
+                  <LockedAttachmentCard
+                    title={title}
+                    source={source}
+                    mimeType={mimeType}
+                    detail={detail}
+                    onDownload={() => {}}
+                  />
+                )}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+)
+
+export const CreatorView: StoryFn = () => (
+  <div className="p-12">
+    <table className="border-separate border-spacing-4">
+      <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>
+      <tbody>
+        <tr>
+          <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Preview</td>
+          {VARIANTS.map(({ mimeType, detail, source }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachmentCard
+                title=""
+                mimeType={mimeType}
+                detail={detail}
+                source={source}
+                isPreview
+              />
+            </td>
+          ))}
+        </tr>
+        <tr>
+          <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Unsold</td>
+          {VARIANTS.map(({ title, mimeType, detail, thumbnailBlurred }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachmentCard
+                title={title}
+                thumbnail={thumbnailBlurred}
+                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, thumbnailBlurred }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachmentCard
+                title={title}
+                thumbnail={thumbnailBlurred}
+                mimeType={mimeType}
+                detail={detail}
+                amountText="AU$9.99"
+                isPurchased
+              />
+            </td>
+          ))}
+        </tr>
+      </tbody>
+    </table>
+  </div>
+)