@moises.ai/design-system 3.4.4 → 3.4.6

package/src/components/HeaderPanel/HeaderPanel.stories.jsx

@@ -0,0 +1,389 @@
+import React from 'react'
+import { HeaderPanel } from './HeaderPanel'
+import { Text } from '@radix-ui/themes'
+import {
+  PlayIcon,
+  StopIcon,
+  MixerHorizontalIcon,
+  DownloadIcon,
+  PlusIcon,
+  Cross1Icon,
+  GearIcon,
+  InfoCircledIcon,
+  ArrowLeftIcon,
+} from '@radix-ui/react-icons'
+
+export default {
+  title: 'Components/HeaderPanel',
+  component: HeaderPanel,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## Basic Usage
+
+\`\`\`jsx
+import { HeaderPanel } from '@moises.ai/design-system'
+import { PlayIcon, StopIcon } from '@moises.ai/design-system/icons'
+
+const MyComponent = () => (
+  <HeaderPanel title="Section Title">
+    <HeaderPanel.Button>
+      <StopIcon />
+    </HeaderPanel.Button>
+    <HeaderPanel.Button>
+      <PlayIcon />
+    </HeaderPanel.Button>
+  </HeaderPanel>
+)
+\`\`\`
+
+## Component API
+
+### HeaderPanel
+
+\`\`\`tsx
+{
+  title: string; // The title text displayed in the header panel
+  onBack?: React.ReactNode; // Optional back button component to display before the title
+  className?: string; // Optional className for custom styling
+  children?: React.ReactNode; // Button components (typically HeaderPanel.Button) or HeaderPanel.Details
+  titleSize?: '1' | '2' | '3' | '4'; // Optional text size for the title (default: '3')
+  titleWeight?: 'normal' | 'medium' | 'semibold' | 'bold'; // Optional weight for the title (default: 'bold')
+  titlePosition?: 'left' | 'center' | 'right'; // Optional position of the title (default: 'left')
+}
+\`\`\`
+
+### HeaderPanel.Button
+
+\`\`\`tsx
+{
+  onClick?: () => void; // Click handler for the button
+  title?: string; // Optional tooltip content to display on hover
+  className?: string; // Optional className for custom styling
+  children: React.ReactNode; // Icon component to render inside the button (required)
+}
+\`\`\`
+
+### HeaderPanel.Details
+
+\`\`\`tsx
+{
+  className?: string; // Optional className for custom styling
+  children: React.ReactNode; // Content to render inside the details section
+}
+\`\`\`
+
+## Variations
+
+### With Back Button
+
+Use the \`onBack\` prop to add a back button before the title:
+
+\`\`\`jsx
+<HeaderPanel 
+  title="Section Title" 
+  onBack={
+    <HeaderPanel.Button onClick={() => console.log('Back clicked')}>
+      <ArrowLeftIcon />
+    </HeaderPanel.Button>
+  }
+>
+  <HeaderPanel.Button>
+    <StopIcon />
+  </HeaderPanel.Button>
+</HeaderPanel>
+\`\`\`
+
+### With Tooltips
+
+Use the \`title\` prop on HeaderPanel.Button to add tooltips:
+
+\`\`\`jsx
+<HeaderPanel title="Project Settings">
+  <HeaderPanel.Button title="Settings">
+    <GearIcon />
+  </HeaderPanel.Button>
+  <HeaderPanel.Button title="Information">
+    <InfoCircledIcon />
+  </HeaderPanel.Button>
+</HeaderPanel>
+\`\`\`
+
+### With Multiple Buttons
+
+You can add as many buttons as needed:
+
+\`\`\`jsx
+<HeaderPanel title="Audio Controls">
+  <HeaderPanel.Button>
+    <StopIcon />
+  </HeaderPanel.Button>
+  <HeaderPanel.Button>
+    <PlayIcon />
+  </HeaderPanel.Button>
+  <HeaderPanel.Button>
+    <MixerHorizontalIcon />
+  </HeaderPanel.Button>
+  <HeaderPanel.Button>
+    <DownloadIcon />
+  </HeaderPanel.Button>
+</HeaderPanel>
+\`\`\`
+
+### Without Buttons
+
+The component can be used without any buttons:
+
+\`\`\`jsx
+<HeaderPanel title="Section Without Actions" />
+\`\`\`
+
+### With Click Handlers
+
+Add onClick handlers to buttons:
+
+\`\`\`jsx
+<HeaderPanel title="Interactive Controls">
+  <HeaderPanel.Button onClick={() => console.log('Stop clicked')}>
+    <StopIcon />
+  </HeaderPanel.Button>
+  <HeaderPanel.Button onClick={() => console.log('Play clicked')}>
+    <PlayIcon />
+  </HeaderPanel.Button>
+</HeaderPanel>
+\`\`\`
+
+### With Details Content
+
+Use HeaderPanel.Details to add custom content:
+
+\`\`\`jsx
+<HeaderPanel title="Section With Details">
+  <HeaderPanel.Details>
+    <Text size="2">Details</Text>
+  </HeaderPanel.Details>
+</HeaderPanel>
+\`\`\`
+        `,
+      },
+    },
+    canvas: {
+      width: 380,
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'The title to display in the header panel',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    onBack: {
+      control: false,
+      description: 'Optional back button component to display before the title',
+      table: {
+        type: { summary: 'React.ReactNode' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    children: {
+      control: false,
+      description: 'HeaderPanel.Button components to display as actions',
+      table: {
+        type: { summary: 'React.ReactNode' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    titleSize: {
+      control: 'select',
+      options: ['1', '2', '3', '4'],
+      description: 'The text size for the title',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '3' },
+      },
+    },
+    titleWeight: {
+      control: 'select',
+      options: ['normal', 'medium', 'semibold', 'bold'],
+      description: 'The weight for the title',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'bold' },
+      },
+    },
+    titlePosition: {
+      control: 'select',
+      options: ['left', 'center', 'right'],
+      description: 'The position of the title',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'left' },
+      },
+    },
+    className: {
+      control: false,
+      description: 'Additional CSS class names',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Default = {
+  args: {
+    title: 'AI Voice Models',
+    children: (
+      <>
+        <HeaderPanel.Button>
+          <StopIcon />
+        </HeaderPanel.Button>
+        <HeaderPanel.Button>
+          <PlayIcon />
+        </HeaderPanel.Button>
+      </>
+    ),
+  },
+}
+
+export const WithTooltips = {
+  args: {
+    title: 'Project Settings',
+    children: (
+      <>
+        <HeaderPanel.Button title="Settings">
+          <GearIcon />
+        </HeaderPanel.Button>
+        <HeaderPanel.Button title="Information">
+          <InfoCircledIcon />
+        </HeaderPanel.Button>
+      </>
+    ),
+  },
+}
+
+export const WithMultipleButtons = {
+  args: {
+    title: 'Audio Controls',
+    children: (
+      <>
+        <HeaderPanel.Button>
+          <StopIcon />
+        </HeaderPanel.Button>
+        <HeaderPanel.Button>
+          <PlayIcon />
+        </HeaderPanel.Button>
+        <HeaderPanel.Button>
+          <MixerHorizontalIcon />
+        </HeaderPanel.Button>
+        <HeaderPanel.Button>
+          <DownloadIcon />
+        </HeaderPanel.Button>
+      </>
+    ),
+  },
+}
+
+export const LongTitle = {
+  args: {
+    title: 'This is a very long title that might wrap on smaller screens',
+    children: (
+      <>
+        <HeaderPanel.Button>
+          <PlusIcon />
+        </HeaderPanel.Button>
+        <HeaderPanel.Button>
+          <Cross1Icon />
+        </HeaderPanel.Button>
+      </>
+    ),
+  },
+}
+
+export const NoButtons = {
+  args: {
+    title: 'Section Without Actions',
+    children: null,
+  },
+}
+
+export const WithOnClick = {
+  args: {
+    title: 'Section Without Actions',
+    children: (
+      <>
+        <HeaderPanel.Button onClick={() => alert('Clicked')}>
+          <StopIcon />
+        </HeaderPanel.Button>
+      </>
+    ),
+  },
+}
+
+export const WithBackButton = {
+  args: {
+    title: 'Section With Back Button',
+    onBack: (
+      <HeaderPanel.Button onClick={() => alert('Back clicked')}>
+        <ArrowLeftIcon width={16} height={16} />
+      </HeaderPanel.Button>
+    ),
+  },
+}
+
+export const WithBackButtonTooltip = {
+  args: {
+    title: 'Back Button Without Tooltip',
+    onBack: (
+      <HeaderPanel.Button onClick={() => alert('Back clicked')} title="Go back">
+        <ArrowLeftIcon width={16} height={16} />
+      </HeaderPanel.Button>
+    ),
+  },
+}
+
+export const WithCustomTextSize = {
+  args: {
+    title: 'Section With Custom Text Size',
+    titleSize: '2',
+  },
+}
+
+export const WithCustomTitlePosition = {
+  args: {
+    title: 'Section With Custom Title Position',
+    titlePosition: 'center',
+  },
+}
+
+export const WithDetailsContent = {
+  args: {
+    title: 'Section With Details Content',
+    children: (
+      <>
+        <HeaderPanel.Details>
+          <Text size="2" style={{ color: 'var(--neutral-11)' }}>
+            Details
+          </Text>
+        </HeaderPanel.Details>
+        <HeaderPanel.Button onClick={() => alert('Settings clicked')}>
+          <GearIcon />
+        </HeaderPanel.Button>
+      </>
+    ),
+  },
+}

package/src/components/HorizontalVolume/HorizontalVolume.jsx

@@ -0,0 +1,157 @@
+import { Slider, Tooltip } from 'radix-ui'
+
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+
+import styles from './HorizontalVolume.module.css'
+
+export const HorizontalVolume = ({ onChangeValue, volume, disabled }) => {
+  const [open, setOpen] = useState(false)
+  const timeoutRef = useRef()
+  const lastClickTimeRef = useRef(0)
+
+  // Convert percentage (0-1) to decibels (-60 to 6)
+  // Using proper logarithmic conversion, where:
+  // - 0dB is at 100% (volume = 1)
+  // - Range is from -60dB to +6dB
+  // - Below -60dB is considered muted (0%)
+  const percentToDb = useCallback((percent) => {
+    // If volume is essentially 0, return minimum dB (representing mute)
+    if (percent < 0.001) return -Infinity
+
+    // Standard logarithmic conversion
+    const db = 20 * Math.log10(percent)
+
+    // If below our minimum threshold, return minimum dB
+    if (db < -60) return -60
+
+    return db
+  }, [])
+
+  // Convert decibels (-60 to 6) to percentage (0-1)
+  const dbToPercent = useCallback((db) => {
+    // If db is -Infinity or below our minimum threshold, return 0 (muted)
+    if (db === -Infinity || db <= -60) return 0
+
+    return Math.pow(10, db / 20)
+  }, [])
+
+  // Current volume in dB, clamped to our range
+  const volumeInDb = useMemo(() => {
+    const db = percentToDb(volume)
+
+    // Special case for displaying the value
+    if (db === -Infinity) return -60
+
+    return Math.max(-60, Math.min(6, db))
+  }, [volume, percentToDb])
+
+  // For display purposes only - when to show "- ∞ dB" for muted state
+  const isMuted = useMemo(() => volume < 0.001, [volume])
+
+  const showTooltip = useCallback(() => {
+    clearTimeout(timeoutRef.current)
+    setOpen(true)
+  }, [])
+
+  const hideTooltip = useCallback(() => {
+    timeoutRef.current = setTimeout(() => {
+      setOpen(false)
+    }, 300)
+  }, [])
+
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        showTooltip()
+      }
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.preventDefault()
+        e.stopPropagation()
+        showTooltip()
+      }
+    },
+    [showTooltip],
+  )
+
+  const handleValueChange = useCallback(
+    (values) => {
+      // Convert the dB value back to percentage for onChangeValue
+      onChangeValue(values.map(dbToPercent))
+    },
+    [onChangeValue, dbToPercent],
+  )
+
+  const handleInteractionStart = useCallback(() => {
+    showTooltip()
+  }, [showTooltip])
+
+  const handleInteractionEnd = useCallback(() => {
+    hideTooltip()
+  }, [hideTooltip])
+
+  const handleDoubleClick = useCallback(() => {
+    // Reset to 100% volume (1)
+    onChangeValue([1])
+    showTooltip()
+  }, [onChangeValue, showTooltip])
+
+  const handleClick = useCallback(() => {
+    const now = Date.now()
+    if (now - lastClickTimeRef.current < 300) {
+      handleDoubleClick()
+    }
+    lastClickTimeRef.current = now
+  }, [handleDoubleClick])
+
+  const tooltipContent = useMemo(
+    () => (
+      <>
+        {isMuted ? '-∞ dB' : `${volumeInDb.toFixed(1)} dB`}
+        <Tooltip.Arrow className={styles.tooltipArrow} />
+      </>
+    ),
+    [volumeInDb, isMuted],
+  )
+
+  return (
+    <Slider.Root
+      className={styles.sliderRoot}
+      min={-60}
+      max={6}
+      step={0.1}
+      value={[isMuted ? -60 : volumeInDb]}
+      onValueChange={handleValueChange}
+      onPointerDown={handleInteractionStart}
+      onPointerUp={handleInteractionEnd}
+      disabled={disabled}
+    >
+      <div className={styles.sliderContainer}>
+        <Slider.Track className={styles.sliderTrack}>
+          <Slider.Range className={styles.sliderRange} />
+        </Slider.Track>
+        <Tooltip.Provider delayDuration={200}>
+          <Tooltip.Root open={open}>
+            <Tooltip.Trigger asChild>
+              <Slider.Thumb
+                className={styles.sliderThumb}
+                onPointerDown={handleInteractionStart}
+                onKeyDown={handleKeyDown}
+                onBlur={handleInteractionEnd}
+                onClick={handleClick}
+              />
+            </Tooltip.Trigger>
+
+            <Tooltip.Content
+              className={styles.tooltipContent}
+              side="bottom"
+              align="center"
+              sideOffset={10}
+            >
+              {tooltipContent}
+            </Tooltip.Content>
+          </Tooltip.Root>
+        </Tooltip.Provider>
+      </div>
+    </Slider.Root>
+  )
+}

package/src/components/HorizontalVolume/HorizontalVolume.module.css

@@ -0,0 +1,123 @@
+@import '../../styles.css';
+
+.tooltip {
+  width: 204px;
+}
+
+.range {
+  z-index: 4;
+  left: 0;
+  top: -10px;
+  width: 100%;
+  opacity: 0;
+  position: absolute;
+
+  & input {
+    top: 0;
+    left: 0;
+    width: 100%;
+    cursor: pointer;
+    position: relative;
+  }
+}
+.sliderRoot {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  touch-action: none;
+}
+
+.sliderTrack {
+  position: relative;
+  flex-grow: 1;
+  height: 6px;
+  border-radius: 9999px;
+  background-color: var(--neutral-alpha-3);
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.sliderTrack[data-disabled] {
+  cursor: default;
+}
+
+.sliderRange {
+  position: absolute;
+  height: 100%;
+  width: var(--radix-slider-range);
+  border-radius: 9999px;
+  background-color: var(--aqua-dark-alpha-8);
+  &:hover {
+    cursor: pointer;
+  }
+}
+.sliderRange[data-disabled] {
+  background-color: var(--neutral-alpha-3);
+  cursor: default !important;
+}
+.SliderRoot:where([data-disabled]){
+  background-color: var(--neutral-alpha-1);
+  cursor: default;
+}
+
+.sliderThumb {
+  position: absolute;
+  transform: translate(-50%, -30%);
+  width: 13px;
+  height: 13px;
+  background-color: var(--white);
+  border: 1px solid var(--neutral-alpha-5);
+  border-radius: 9999px;
+ 
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.sliderThumb[data-disabled] {
+  border: 1px solid var(--neutral-7);
+  background: var(--neutral-2);
+  cursor: default;
+}
+
+.tooltipContent {
+  background-color: var(--neutral-12);
+  color: var(--neutral-2);
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  z-index: 999;
+  white-space: nowrap;
+  animation: fadeIn 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 70px;
+  gap: 4px;
+}
+
+.tooltipArrow {
+  fill: var(--neutral-12);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.sliderContainer {
+  width: 100%;
+  display: flex;
+
+  &:hover {
+    cursor: pointer;
+  }
+}