@moises.ai/design-system 4.15.1 → 4.15.3

package/src/components/PreviewCard/PreviewCard.stories.jsx

@@ -0,0 +1,112 @@
+import React, { useMemo, useState } from 'react'
+import { Flex, Text } from '@radix-ui/themes'
+import { PreviewCard } from './PreviewCard'
+import { MoreButton } from '../MoreButton/MoreButton'
+
+const SAMPLE_AUDIO = {
+  zuri: 'https://storage.googleapis.com/moises-api-assets/voice/demo_zuri.m4a',
+  amy: 'https://storage.googleapis.com/moises-api-assets/voice/demo_amy.m4a',
+  rosa: 'https://storage.googleapis.com/moises-api-assets/voice/demo_rosa.m4a',
+  aisha: 'https://storage.googleapis.com/moises-api-assets/voice/demo_aisha.m4a',
+}
+
+const PREVIEW_ITEMS = [
+  { id: 'zuri', label: 'Zuri', audio: SAMPLE_AUDIO.zuri },
+  { id: 'amy', label: 'Amy', audio: SAMPLE_AUDIO.amy },
+  { id: 'rosa', label: 'Rosa', audio: SAMPLE_AUDIO.rosa },
+  { id: 'aisha', label: 'Aisha', audio: SAMPLE_AUDIO.aisha },
+]
+
+export default {
+  title: 'Components/PreviewCard',
+  component: PreviewCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+Preview card for tone previews with waveform, play/pause, selection, and continuous audio across multiple cards via \`wavegroup\`.
+        `,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Flex direction="column" gap="2" width="344px">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const Default = {
+  args: {
+    audio: SAMPLE_AUDIO.zuri,
+  },
+}
+
+export const Selected = {
+  args: {
+    audio: SAMPLE_AUDIO.amy,
+    selected: true,
+  },
+}
+
+export const Loading = {
+  args: {
+    audio: SAMPLE_AUDIO.rosa,
+    loading: true,
+  },
+}
+
+export const WithActions = {
+  args: {
+    audio: SAMPLE_AUDIO.zuri,
+    selected: true,
+    actions: <MoreButton aria-label="More options" />,
+  },
+}
+
+function PreviewCardGroupStory() {
+  const [selectedId, setSelectedId] = useState('zuri')
+  const [wavegroupState, setWavegroupState] = useState({
+    lastPlayed: null,
+    active: null,
+    isPlaying: false,
+    id: 'preview-card-group',
+  })
+
+  const wavegroup = useMemo(
+    () => ({
+      state: wavegroupState,
+      setter: setWavegroupState,
+    }),
+    [wavegroupState],
+  )
+
+  return (
+    <Flex direction="column" gap="3" width="344px">
+      <Text size="1" color="gray">
+        Click the card (outside waveform/play) to select. Play on another card
+        continues from the same position.
+      </Text>
+      {PREVIEW_ITEMS.map((item) => (
+        <PreviewCard
+          key={item.id}
+          audio={item.audio}
+          selected={selectedId === item.id}
+          wavegroup={wavegroup}
+          onSelect={() => setSelectedId(item.id)}
+          actions={<MoreButton aria-label={`More options for ${item.label}`} />}
+        />
+      ))}
+    </Flex>
+  )
+}
+
+export const Group = {
+  render: () => <PreviewCardGroupStory />,
+  parameters: {
+    layout: 'padded',
+  },
+}

package/src/index.jsx

@@ -148,6 +148,7 @@ export { TrackHeader } from './components/TrackHeader/TrackHeader'
 export { useForm } from './components/useForm/useForm'
 export { VoiceConversionForm } from './components/VoiceConversionForm/VoiceConversionForm'
 export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'
+export { PreviewCard } from './components/PreviewCard/PreviewCard'
 export { SpecialDialog } from './components/SpecialDialog/SpecialDialog'
 
 export { VerticalSegmentControl } from './components/VerticalSegmentControl/VerticalSegmentControl'