@linktr.ee/messaging-react 3.10.0 → 3.11.0

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

@@ -1,450 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react'
-import React, { useState } from 'react'
-
-import type { LockedAttachmentGalleryItem } from './types'
-
-import LockedAttachment from '.'
-
-const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
-const VIDEO_THUMBNAIL = '/video-thumbnail.jpg'
-const VIDEO_SOURCE = '/video-source.mp4'
-
-const IMAGE_THUMBNAIL_BLURRED = '/image-thumbnail-blurred.jpg'
-const IMAGE_THUMBNAIL = '/image-thumbnail.jpg'
-const IMAGE_SOURCE = '/image-source.jpg'
-
-const DOCUMENT_THUMBNAIL_BLURRED = '/document-thumbnail-blurred.jpg'
-const DOCUMENT_THUMBNAIL = '/document-thumbnail.jpg'
-const DOCUMENT_SOURCE = '/document-source.pdf'
-
-const AUDIO_THUMBNAIL_BLURRED = '/audio-thumbnail-blurred.jpg'
-const AUDIO_THUMBNAIL = '/audio-thumbnail.jpg'
-const AUDIO_SOURCE = '/audio-source.mp3'
-
-const meta: Meta = {
-  title: 'LockedAttachment',
-  parameters: { layout: 'fullscreen' },
-}
-export default meta
-
-const VARIANTS = [
-  {
-    label: 'Video',
-    title: "Alicia's Workout Plan",
-    mimeType: 'video/mp4',
-    detail: '1:20',
-    thumbnailUrl: VIDEO_THUMBNAIL_BLURRED,
-    thumbnailUnlockedUrl: VIDEO_THUMBNAIL,
-    sourceUrl: VIDEO_SOURCE,
-  },
-  {
-    label: 'Audio',
-    title: 'Morning Meditation',
-    mimeType: 'audio/mpeg',
-    detail: '4:35',
-    thumbnailUrl: AUDIO_THUMBNAIL_BLURRED,
-    thumbnailUnlockedUrl: AUDIO_THUMBNAIL,
-    sourceUrl: AUDIO_SOURCE,
-  },
-  {
-    label: 'Image',
-    title: 'Picture of my cat',
-    mimeType: 'image/jpeg',
-    detail: '3.2 MB',
-    thumbnailUrl: IMAGE_THUMBNAIL_BLURRED,
-    thumbnailUnlockedUrl: IMAGE_THUMBNAIL,
-    sourceUrl: IMAGE_SOURCE,
-  },
-  {
-    label: 'Document',
-    title: 'Strength Training Guide',
-    mimeType: 'application/zip',
-    detail: '14 files',
-    thumbnailUrl: DOCUMENT_THUMBNAIL_BLURRED,
-    thumbnailUnlockedUrl: DOCUMENT_THUMBNAIL,
-    sourceUrl: DOCUMENT_SOURCE,
-  },
-  {
-    label: 'Unknown',
-    title: 'Unknown Attachment',
-    mimeType: 'application/octet-stream',
-    detail: '2.4 MB',
-    thumbnailUrl: undefined,
-    thumbnailUnlockedUrl: undefined,
-    sourceUrl: DOCUMENT_SOURCE,
-  },
-]
-
-/**
- * A mixed-media collection (a video + 3 photos) used by the Gallery stories
- * below. Each `LockedAttachment.*` card accepts a `gallery` prop and renders
- * a carousel of these items when 2+ items are provided.
- */
-const GALLERY_ITEMS: LockedAttachmentGalleryItem[] = [
-  {
-    mimeType: 'video/mp4',
-    thumbnailUrl: VIDEO_THUMBNAIL_BLURRED,
-    sourceUrl: VIDEO_SOURCE,
-  },
-  {
-    mimeType: 'image/jpeg',
-    thumbnailUrl: IMAGE_THUMBNAIL_BLURRED,
-    sourceUrl: IMAGE_SOURCE,
-  },
-  {
-    mimeType: 'image/jpeg',
-    thumbnailUrl: DOCUMENT_THUMBNAIL_BLURRED,
-    sourceUrl: DOCUMENT_SOURCE,
-  },
-  {
-    mimeType: 'image/jpeg',
-    thumbnailUrl: AUDIO_THUMBNAIL_BLURRED,
-    sourceUrl: AUDIO_SOURCE,
-  },
-]
-
-const GALLERY_DETAIL = '1 video, 3 photos'
-const GALLERY_TITLE = 'Workout Guide'
-
-const Table = ({ children }: { children: React.ReactNode }) => (
-  <div className="min-h-screen w-full p-12 bg-[#F9F7F4]">
-    <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 Composer: StoryFn = () => (
-  <Table>
-    <TableHead variants={VARIANTS} />
-    <tbody>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Preview
-        </td>
-        {VARIANTS.map(
-          ({
-            mimeType,
-            detail,
-            thumbnailUrl,
-            thumbnailUnlockedUrl,
-            sourceUrl,
-          }) => (
-            <td key={mimeType} className="align-top">
-              <LockedAttachment.Composer
-                placeholderTitle="Attachment title"
-                placeholderAmountText="AU$0.00"
-                thumbnailUrl={thumbnailUrl}
-                mimeType={mimeType}
-                detail={detail}
-                onFetchSource={async () => {
-                  await new Promise((resolve) => setTimeout(resolve, 1500))
-                  return {
-                    sourceUrl: sourceUrl,
-                    thumbnailUrl: thumbnailUnlockedUrl,
-                  }
-                }}
-              />
-            </td>
-          )
-        )}
-      </tr>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Pending
-        </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment.Composer
-              title={title}
-              thumbnailUrl={thumbnailUrl}
-              mimeType={mimeType}
-              detail={detail}
-              amountText="AU$9.99"
-              onDismiss={() => alert('Dismissed')}
-            />
-          </td>
-        ))}
-      </tr>
-    </tbody>
-  </Table>
-)
-
-export const Sent: StoryFn = () => (
-  <Table>
-    <TableHead variants={VARIANTS} />
-    <tbody>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Sent
-        </td>
-        {VARIANTS.map(
-          ({
-            title,
-            mimeType,
-            detail,
-            thumbnailUrl,
-            thumbnailUnlockedUrl,
-            sourceUrl,
-          }) => (
-            <td key={mimeType} className="align-top">
-              <LockedAttachment.Sent
-                title={title}
-                thumbnailUrl={thumbnailUrl}
-                mimeType={mimeType}
-                detail={detail}
-                amountText="AU$9.99"
-                onFetchSource={async () => {
-                  await new Promise((resolve) => setTimeout(resolve, 1500))
-                  return {
-                    sourceUrl: sourceUrl,
-                    thumbnailUrl: thumbnailUnlockedUrl,
-                  }
-                }}
-              />
-            </td>
-          )
-        )}
-      </tr>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Sold
-        </td>
-        {VARIANTS.map(
-          ({
-            title,
-            mimeType,
-            detail,
-            thumbnailUrl,
-            thumbnailUnlockedUrl,
-            sourceUrl,
-          }) => (
-            <td key={mimeType} className="align-top">
-              <LockedAttachment.Sent
-                title={title}
-                thumbnailUrl={thumbnailUrl}
-                mimeType={mimeType}
-                detail={detail}
-                amountText="AU$9.99"
-                paymentStatus="paid"
-                onFetchSource={async () => {
-                  await new Promise((resolve) => setTimeout(resolve, 1500))
-                  return {
-                    sourceUrl: sourceUrl,
-                    thumbnailUrl: thumbnailUnlockedUrl,
-                  }
-                }}
-              />
-            </td>
-          )
-        )}
-      </tr>
-    </tbody>
-  </Table>
-)
-
-export const Gallery: StoryFn = () => {
-  const [isPaid, setPaid] = useState(false)
-  const [isUnlocking, setUnlocking] = useState(false)
-
-  return (
-    <Table>
-      <thead>
-        <tr>
-          <th className="text-left text-xs font-medium text-black/40 pb-2" />
-          <th className="text-left text-xs font-medium text-black/40 pb-2">
-            Composer
-          </th>
-          <th className="text-left text-xs font-medium text-black/40 pb-2">
-            Sent
-          </th>
-          <th className="text-left text-xs font-medium text-black/40 pb-2">
-            Received
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-            Locked
-          </td>
-          <td className="align-top">
-            <LockedAttachment.Composer
-              title={GALLERY_TITLE}
-              detail={GALLERY_DETAIL}
-              amountText="AU$50.00"
-              gallery={GALLERY_ITEMS}
-              onDismiss={() => alert('Dismissed gallery')}
-              onEditClick={() => alert('Edit gallery')}
-            />
-          </td>
-          <td className="align-top">
-            <LockedAttachment.Sent
-              title={GALLERY_TITLE}
-              detail={GALLERY_DETAIL}
-              amountText="AU$50.00"
-              gallery={GALLERY_ITEMS}
-            />
-          </td>
-          <td className="align-top">
-            <LockedAttachment.Received
-              title={GALLERY_TITLE}
-              detail={GALLERY_DETAIL}
-              amountText="AU$50.00"
-              gallery={GALLERY_ITEMS}
-              paymentStatus={isPaid ? 'paid' : undefined}
-              isUnlocking={isUnlocking}
-              onUnlockClick={() => {
-                setUnlocking(true)
-                setTimeout(() => {
-                  setUnlocking(false)
-                  setPaid(true)
-                }, 1500)
-              }}
-              onDownloadClick={() => alert('Download gallery')}
-            />
-          </td>
-        </tr>
-        <tr>
-          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-            Sold / Purchased
-          </td>
-          <td className="align-top">
-            <LockedAttachment.Composer
-              title={GALLERY_TITLE}
-              detail={GALLERY_DETAIL}
-              amountText="AU$50.00"
-              gallery={GALLERY_ITEMS}
-              onEditClick={() => alert('Edit gallery')}
-            />
-          </td>
-          <td className="align-top">
-            <LockedAttachment.Sent
-              title={GALLERY_TITLE}
-              detail={GALLERY_DETAIL}
-              amountText="AU$50.00"
-              paymentStatus="paid"
-              gallery={GALLERY_ITEMS}
-            />
-          </td>
-          <td className="align-top">
-            <LockedAttachment.Received
-              title={GALLERY_TITLE}
-              detail={GALLERY_DETAIL}
-              amountText="AU$50.00"
-              paymentStatus="paid"
-              gallery={GALLERY_ITEMS}
-              onDownloadClick={() => alert('Download gallery')}
-            />
-          </td>
-        </tr>
-      </tbody>
-    </Table>
-  )
-}
-
-export const Received: StoryFn = () => {
-  const [isPaid, setPaid] = useState<string | undefined>()
-  const [isUnlocking, setUnlocking] = useState<string | undefined>()
-
-  return (
-    <Table>
-      <TableHead variants={VARIANTS} />
-      <tbody>
-        <tr>
-          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-            Locked
-          </td>
-          {VARIANTS.map(
-            ({
-              title,
-              mimeType,
-              detail,
-              thumbnailUrl,
-              thumbnailUnlockedUrl,
-              sourceUrl,
-            }) => (
-              <td key={mimeType} className="align-top">
-                <LockedAttachment.Received
-                  title={title}
-                  thumbnailUrl={thumbnailUrl}
-                  mimeType={mimeType}
-                  detail={detail}
-                  paymentStatus={isPaid === mimeType ? 'paid' : undefined}
-                  amountText="AU$9.99"
-                  isUnlocking={isUnlocking === mimeType}
-                  onUnlockClick={() => {
-                    setUnlocking(mimeType)
-                    setTimeout(() => {
-                      setUnlocking(undefined)
-                      setPaid(mimeType)
-                    }, 1500)
-                  }}
-                  onDownloadClick={() => alert('Download clicked')}
-                  onFetchSource={async () => ({
-                    sourceUrl: sourceUrl,
-                    thumbnailUrl: thumbnailUnlockedUrl,
-                  })}
-                />
-              </td>
-            )
-          )}
-        </tr>
-        <tr>
-          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-            Unlocked
-          </td>
-          {VARIANTS.map(
-            ({
-              title,
-              mimeType,
-              detail,
-              thumbnailUrl,
-              thumbnailUnlockedUrl,
-              sourceUrl,
-            }) => (
-              <td key={mimeType} className="align-top">
-                <LockedAttachment.Received
-                  title={title}
-                  thumbnailUrl={thumbnailUrl}
-                  mimeType={mimeType}
-                  detail={detail}
-                  amountText="AU$9.99"
-                  paymentStatus="paid"
-                  onUnlockClick={() => alert('Unlock clicked')}
-                  onDownloadClick={() => alert('Download clicked')}
-                  onFetchSource={async () => ({
-                    sourceUrl: sourceUrl,
-                    thumbnailUrl: thumbnailUnlockedUrl,
-                  })}
-                />
-              </td>
-            )
-          )}
-        </tr>
-      </tbody>
-    </Table>
-  )
-}
-// LockedAttachment.Received autoplays the video preview once paid; even with
-// our SMIL/CSS animation freeze the <video> element advances frames
-// independently and produces a non-deterministic snapshot. Skip in Chromatic.
-Received.parameters = { chromatic: { disableSnapshot: true } }

package/src/components/LockedAttachment/components/Composer/Card.tsx

@@ -1,221 +0,0 @@
-import { ImagesIcon, PencilSimpleIcon, XIcon } from '@phosphor-icons/react'
-import React, { useCallback, useRef, useState } from 'react'
-
-import type {
-  LockedAttachmentBaseProps,
-  LockedAttachmentSource,
-} from '../../types'
-import CardBody from '../_shared/CardBody'
-import GalleryThumbnail from '../_shared/GalleryThumbnail'
-import LockedCardShell from '../_shared/LockedCardShell'
-import LockedThumbnail from '../_shared/LockedThumbnail'
-
-export interface ComposerCardProps extends LockedAttachmentBaseProps {
-  /** Placeholder shown in the title slot before the composer types one. */
-  placeholderTitle?: string
-  /** Placeholder shown in the amount slot before one is configured. */
-  placeholderAmountText?: string
-  /**
-   * When provided, renders a dismiss X in the thumbnail corner. Called when
-   * the composer clicks it to remove the attachment.
-   */
-  onDismiss?: () => void
-  /** Fired the first time the composer taps the thumbnail to preview. */
-  onPreviewClick?: () => void
-  /**
-   * Lazily loads the underlying source so the composer can preview the
-   * attachment they're about to send. Called the first time the thumbnail is
-   * tapped; the returned source is cached and reused on subsequent toggles.
-   */
-  onFetchSource?: () => Promise<LockedAttachmentSource | void>
-  /**
-   * When provided, renders a pencil button in the body bottom-right that the
-   * composer can use to edit the attachment metadata (e.g. open the price /
-   * gallery editor). Matches the Composer "Button" instance in Figma.
-   */
-  onEditClick?: () => void
-}
-
-/**
- * The card the composer sees while drafting a paid attachment.
- * Matches the Composer column of the messaging design system in Figma.
- */
-const ComposerCard: React.FC<ComposerCardProps> = ({
-  title,
-  mimeType = 'application/octet-stream',
-  thumbnailUrl,
-  detail,
-  amountText,
-  placeholderTitle = 'Attachment title',
-  placeholderAmountText,
-  gallery,
-  onDismiss,
-  onPreviewClick,
-  onFetchSource,
-  onEditClick,
-}) => {
-  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
-  const [isPreviewVisible, setIsPreviewVisible] = useState(false)
-  const [isLoadingPreview, setIsLoadingPreview] = useState(false)
-  const fetchingRef = useRef(false)
-
-  const isGallery = (gallery?.length ?? 0) >= 2
-
-  const handleToggle = useCallback(async () => {
-    onPreviewClick?.()
-    if (isPreviewVisible) {
-      setIsPreviewVisible(false)
-      return
-    }
-    // Gallery items carry their own per-item sources on the `gallery` prop, so
-    // we just flip visibility — no async source fetch is needed.
-    if (isGallery) {
-      setIsPreviewVisible(true)
-      return
-    }
-    if (source) {
-      setIsPreviewVisible(true)
-      return
-    }
-    if (!onFetchSource) return
-    if (fetchingRef.current) return
-    fetchingRef.current = true
-    setIsLoadingPreview(true)
-    try {
-      const result = await onFetchSource()
-      if (result) {
-        setSource(result)
-        setIsPreviewVisible(true)
-      }
-    } finally {
-      fetchingRef.current = false
-      setIsLoadingPreview(false)
-    }
-  }, [isPreviewVisible, isGallery, source, onPreviewClick, onFetchSource])
-
-  // Gallery is always previewable in the composer because each item's source
-  // is already provided up-front via `gallery[*].sourceUrl`.
-  const togglePreview =
-    isGallery || onFetchSource || onPreviewClick ? handleToggle : undefined
-  const showLocked = !isPreviewVisible
-  const isBusy = isLoadingPreview
-
-  const statusBadge = (
-    <React.Fragment>
-      <span className="text-xs font-medium text-white/55">&bull;</span>
-      <span
-        className={
-          amountText
-            ? 'text-xs font-medium text-white/55'
-            : 'text-xs font-medium text-white/30'
-        }
-      >
-        {amountText || placeholderAmountText}
-      </span>
-    </React.Fragment>
-  )
-
-  const dismissButton = onDismiss ? (
-    <button
-      type="button"
-      onClick={(e) => {
-        // Stop the click from bubbling up into the outer preview-toggle
-        // wrapper when both are wired up at the same time.
-        e.stopPropagation()
-        onDismiss()
-      }}
-      className="flex size-6 items-center justify-center rounded-full bg-[#121110] text-white"
-      aria-label="Dismiss attachment"
-    >
-      <XIcon className="size-3" weight="bold" />
-    </button>
-  ) : undefined
-
-  const editButton = onEditClick ? (
-    <button
-      type="button"
-      onClick={onEditClick}
-      aria-label="Edit attachment"
-      className="flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15"
-    >
-      <PencilSimpleIcon className="size-5" weight="regular" />
-    </button>
-  ) : undefined
-
-  const thumbnail = isGallery ? (
-    <GalleryThumbnail
-      variant="dark"
-      gallery={gallery!}
-      title={title}
-      showLocked={showLocked}
-      topRight={dismissButton}
-    />
-  ) : (
-    <LockedThumbnail
-      variant="dark"
-      mimeType={mimeType}
-      thumbnailUrl={thumbnailUrl}
-      title={title}
-      source={source}
-      showLocked={showLocked}
-      topRight={dismissButton}
-    />
-  )
-
-  return (
-    <LockedCardShell variant="dark">
-      {togglePreview ? (
-        // Uses a `<div role="button">` rather than a native `<button>` so the
-        // dismiss control rendered inside `thumbnail` (also a `<button>`)
-        // doesn't produce invalid nested interactive elements.
-        <div
-          role="button"
-          tabIndex={isBusy ? -1 : 0}
-          aria-label="Toggle preview"
-          aria-busy={isBusy}
-          aria-pressed={!showLocked}
-          aria-disabled={isBusy || undefined}
-          onClick={isBusy ? undefined : togglePreview}
-          onKeyDown={(e) => {
-            if (isBusy) return
-            // Only handle keys that originate on the wrapper itself, not on
-            // inner interactive elements (dismiss X, carousel arrows). Without
-            // this guard, pressing Enter/Space on a focused child would bubble
-            // up and toggle the preview in addition to activating the child.
-            if (e.target !== e.currentTarget) return
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault()
-              void togglePreview()
-            }
-          }}
-          className={
-            !isBusy
-              ? 'block w-full cursor-pointer text-left'
-              : 'block w-full text-left'
-          }
-        >
-          {thumbnail}
-        </div>
-      ) : (
-        thumbnail
-      )}
-
-      <CardBody
-        variant="dark"
-        title={title}
-        placeholderTitle={placeholderTitle}
-        mimeType={mimeType}
-        detail={detail}
-        statusBadge={statusBadge}
-        icon={
-          isGallery ? (
-            <ImagesIcon className="size-5 shrink-0 text-white/55" />
-          ) : undefined
-        }
-        trailingAction={editButton}
-      />
-    </LockedCardShell>
-  )
-}
-
-export default ComposerCard

package/src/components/LockedAttachment/components/Composer/index.ts

@@ -1,2 +0,0 @@
-export { default as ComposerCard } from './Card'
-export type { ComposerCardProps } from './Card'