@moises.ai/design-system 4.15.0 → 4.15.2

package/src/components/PreviewCard/PreviewCard.module.css

@@ -0,0 +1,257 @@
+@keyframes skeleton_animate_mask {
+  0% {
+    mask-position: 200% 50%;
+  }
+  100% {
+    mask-position: -100% 50%;
+  }
+}
+
+@keyframes equalizerBar1 {
+  0%,
+  100% {
+    height: 17px;
+  }
+  50% {
+    height: 7px;
+  }
+}
+
+@keyframes equalizerBar2 {
+  0%,
+  100% {
+    height: 5px;
+  }
+  50% {
+    height: 17px;
+  }
+}
+
+@keyframes equalizerBar3 {
+  0%,
+  100% {
+    height: 21px;
+  }
+  50% {
+    height: 9px;
+  }
+}
+
+@keyframes equalizerBar4 {
+  0%,
+  100% {
+    height: 17px;
+  }
+  50% {
+    height: 5px;
+  }
+}
+
+@keyframes equalizerBar5 {
+  0%,
+  100% {
+    height: 7px;
+  }
+  50% {
+    height: 17px;
+  }
+}
+
+.previewCard {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  max-width: 344px;
+  padding: 4px;
+  border-radius: 8px;
+  border: 1px solid var(--neutral-alpha-4);
+  background: transparent;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.previewCard:hover:not(.selected):not(.skeleton):not(.playing),
+.previewCard:has(.leftButton:hover):not(.selected):not(.skeleton) {
+  background-color: var(--neutral-alpha-2);
+}
+
+.selected {
+  background-color: var(--neutral-alpha-2);
+  border: 2px solid var(--colors-accent-accent-10);
+  padding: 3px;
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--neutral-alpha-3) 0%,
+    rgba(221, 235, 236, 0.02) 61.19%
+  );
+  pointer-events: none;
+  border-color: transparent;
+}
+
+.leftButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: var(--neutral-alpha-3);
+  color: var(--neutral-alpha-11);
+  cursor: pointer;
+}
+
+.leftButton:disabled {
+  cursor: default;
+  pointer-events: none;
+}
+
+.skeleton .leftButton,
+.skeleton .actions {
+  opacity: 0;
+}
+
+.equalizer {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: 1.8px;
+  width: 19px;
+  height: 21px;
+}
+
+.equalizerBar {
+  display: block;
+  width: 2px;
+  border-radius: 4.8px;
+  background: var(--neutral-alpha-11);
+  flex-shrink: 0;
+}
+
+.equalizerBar:nth-child(1) {
+  height: 17px;
+  animation: equalizerBar1 0.8s ease-in-out infinite;
+}
+
+.equalizerBar:nth-child(2) {
+  height: 5px;
+  animation: equalizerBar2 0.8s ease-in-out infinite;
+}
+
+.equalizerBar:nth-child(3) {
+  height: 21px;
+  animation: equalizerBar3 0.8s ease-in-out infinite;
+}
+
+.equalizerBar:nth-child(4) {
+  height: 17px;
+  animation: equalizerBar4 0.8s ease-in-out infinite;
+}
+
+.equalizerBar:nth-child(5) {
+  height: 7px;
+  animation: equalizerBar5 0.8s ease-in-out infinite;
+}
+
+.pauseOnHover {
+  display: none;
+}
+
+.playIcon {
+  display: flex;
+}
+
+.leftButton.isPlaying .equalizer {
+  display: flex;
+}
+
+.leftButton.isPlaying .playIcon {
+  display: none !important;
+}
+
+.previewCard.playing:has(.leftButton:hover) .equalizer {
+  display: none;
+}
+
+.previewCard.playing:has(.leftButton:hover) .pauseOnHover {
+  display: flex;
+}
+
+.waveformContainer {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  height: 40px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.waveformContainer :global(wave) {
+  display: block;
+}
+
+.skeleton .waveformContainer :global(wave) {
+  visibility: hidden;
+}
+
+.skeletonWaveform {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.skeletonMask {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background-repeat: repeat-x;
+  background-position: 30px center;
+  mask-image: radial-gradient(circle, blue 50%, rgba(255, 255, 0, 0.5) 50%);
+  mask-size: 400% 400%;
+  animation: skeleton_animate_mask 3s linear infinite;
+  -webkit-animation: skeleton_animate_mask 3s linear infinite;
+  background-image: url('/waveform.svg');
+}
+
+.actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  opacity: 0.4;
+  transition: opacity 0.2s ease;
+}
+
+.actions :global(button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px !important;
+  height: 24px !important;
+  min-width: 24px !important;
+  min-height: 24px !important;
+  padding: 0 !important;
+  border-radius: 4px;
+}
+
+.actions :global(svg) {
+  width: 16px;
+  height: 16px;
+}
+
+.previewCard:hover .actions,
+.previewCard:has(.leftButton:hover) .actions,
+.selected .actions {
+  opacity: 1;
+}

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'