@moises.ai/design-system 3.4.4 → 3.4.6

package/src/components/RecordingForm/RecordingForm.jsx

@@ -0,0 +1,142 @@
+import { Flex, Separator, Switch } from '@radix-ui/themes'
+import styles from './RecordingForm.module.css'
+import { Text } from '../Text/Text'
+import { Select } from '../Select/Select'
+import { Slider } from '../Slider/Slider'
+
+export const RecordingForm = ({
+  i18n = { _: (text) => text },
+  device,
+  channel,
+  monitorVolume,
+  isMonitorActive,
+  deviceOptions,
+  channelOptions,
+  onDeviceChange,
+  onChannelChange,
+  onMonitorToggle,
+  onMonitorVolumeChange,
+  inputVolume,
+  onInputVolumeChange,
+  inputVolumeDb,
+  inputLevel,
+}) => {
+  return (
+    <Flex direction="column" gap="4" width="200px">
+      <Flex gap="1" direction="column">
+        <Text size="2" mb="1" weight="medium">
+          {i18n._('Source')}
+        </Text>
+        <Select
+          value={device}
+          onChange={onDeviceChange}
+          className={styles.select}
+          items={deviceOptions}
+          placeholder={i18n._('Select audio input device')}
+          size="2"
+          variant="soft"
+        />
+        <Select
+          value={channel}
+          onChange={onChannelChange}
+          className={styles.select}
+          items={channelOptions}
+          placeholder={i18n._('Select audio input channels')}
+          size="2"
+          variant="soft"
+        />
+      </Flex>
+      <Flex gap="2" direction="column">
+        <Text size="2" weight="medium">
+          {i18n._('Input Level')}
+        </Text>
+        <div className={styles.levelMeter}>
+          <div className={styles.levelMeterTrack}>
+            {/* Level meter with three color zones */}
+            <div className={styles.levelMeterRow}>
+              {Array.from({ length: 17 }, (_, i) => {
+                // Scale inputLevel (5-30 range) to 17 segments
+                const normalizedLevel = Math.max(0, (inputLevel - 5) / 25) * 17 // (inputLevel - 5) / (30 - 5) * 17
+                const isActive = i < normalizedLevel
+                let colorClass = 'low'
+
+                if (i >= 15) colorClass = 'high' // Last 2 segments (15-16)
+                else if (i >= 11) colorClass = 'mid' // Next 4 segments (11-14)
+                // First 11 segments (0-10) use 'low'
+
+                return (
+                  <div
+                    key={`level-${i}`}
+                    className={`${styles.levelMeterSegment} ${
+                      isActive ? `${styles.active} ${styles[colorClass]}` : ''
+                    }`}
+                  />
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </Flex>
+
+      <Flex gap="2" direction="column" mb="1">
+        <Slider
+          title={i18n._('Gain')}
+          value={[inputVolume]}
+          onValueChange={([value]) => onInputVolumeChange(value)}
+          min={0.1}
+          max={3.0}
+          step={0.1}
+          defaultValue={1}
+          style={{ flex: 1 }}
+          info={inputVolumeDb}
+          color="neutral"
+          size="1"
+        />
+      </Flex>
+
+      <Separator style={{ width: '100%' }} />
+
+      <Flex gap="2" mb="2" direction="column">
+        <Flex align="center" justify="between">
+          <Text size="2" weight="medium">
+            {i18n._('Monitor (Feedback)')}
+          </Text>
+          <Switch
+            checked={isMonitorActive}
+            onCheckedChange={onMonitorToggle}
+            size="1"
+          />
+        </Flex>
+        {isMonitorActive && (
+          <Flex direction="column" gap="2">
+            <Flex align="center" justify="between">
+              <Text
+                size="1"
+                weight="medium"
+                mb="2"
+                style={{ color: 'var(--neutral-10)' }}
+              >
+                {i18n._('Monitor level')}
+              </Text>
+              <Text size="1" style={{ color: 'var(--neutral-10)' }}>
+                {Math.round(monitorVolume)}%
+              </Text>
+            </Flex>
+            <Slider
+              value={[monitorVolume]}
+              onValueChange={([value]) => onMonitorVolumeChange(value)}
+              min={0}
+              max={100}
+              step={1}
+              defaultValue={0}
+              color="neutral"
+              size="1"
+            />
+          </Flex>
+        )}
+      </Flex>
+    </Flex>
+  )
+}
+
+RecordingForm.displayName = 'RecordingForm'

package/src/components/RecordingForm/RecordingForm.module.css

@@ -0,0 +1,49 @@
+.select {
+  width: 100%;
+}
+
+.levelMeter {
+  width: 100%;
+}
+
+.levelMeterTrack {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  width: 100%;
+}
+
+.levelMeterRow {
+  display: flex;
+  gap: 2px;
+  height: 6px;
+}
+
+.levelMeterSegment {
+  flex: 1;
+  height: 100%;
+  border-radius: 1px;
+  background: #333;
+  transition: background-color 0.1s ease;
+}
+
+/* Active segment base */
+.levelMeterSegment.active {
+  /* Base active state if needed */
+}
+
+/* Three-level color progression */
+.levelMeterSegment.low {
+  background: #00bbc5;
+  /* First 11 segments */
+}
+
+.levelMeterSegment.mid {
+  background: #ffc53d;
+  /* Next 4 segments */
+}
+
+.levelMeterSegment.high {
+  background: #e5484c;
+  /* Last 2 segments */
+}

package/src/components/RecordingForm/RecordingForm.stories.jsx

@@ -0,0 +1,319 @@
+import { RecordingForm } from './RecordingForm'
+import { fn } from '@storybook/test'
+
+export default {
+  title: 'Features/RecordingForm',
+  component: RecordingForm,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## RecordingForm Component
+
+The RecordingForm component provides a comprehensive interface for configuring audio recording settings. It includes device selection, channel configuration, input level monitoring, gain control, and monitor (feedback) settings.
+
+### Features
+
+- **Device Selection**: Choose from available audio input devices
+- **Channel Selection**: Select single or multiple audio channels (including grouped channels)
+- **Input Level Meter**: Visual level meter with color-coded zones (low/mid/high)
+- **Gain Control**: Adjustable input volume/gain slider (0.1-3.0 range) with dB display
+- **Monitor Control**: Toggle monitor (feedback) on/off with adjustable volume (0-100%)
+
+### Usage
+
+\`\`\`jsx
+import { RecordingForm } from '@moises.ai/design-system'
+
+<RecordingForm
+  device="111"
+  channel={0}
+  monitorVolume={34}
+  isMonitorActive={true}
+  deviceOptions={[
+    { value: "111", label: "MacBook Pro Microphone (Built-in)" },
+    { value: "default", label: "Default - MacBook Pro Microphone (Built-in)" }
+  ]}
+  channelOptions={[
+    { value: 0, label: "Channel 1", isSelected: true, isGroup: false },
+    { value: 1, label: "Channel 2", isSelected: false, isGroup: false },
+    { value: "0+1", label: "Channel 1 + 2", isSelected: false, isGroup: true }
+  ]}
+  inputVolume={1.7}
+  inputVolumeDb="4.6 dB"
+  inputLevel={0}
+  onDeviceChange={handleDeviceChange}
+  onChannelChange={handleChannelChange}
+  onMonitorToggle={handleMonitorToggle}
+  onMonitorVolumeChange={handleMonitorVolumeChange}
+  onInputVolumeChange={handleInputVolumeChange}
+/>
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    i18n: {
+      description: 'Internationalization object with translation function',
+      control: false,
+      table: {
+        type: { summary: '{ _: (text: string) => string }' },
+        defaultValue: { summary: '{ _: (text) => text }' },
+      },
+    },
+    device: {
+      description: 'Currently selected audio input device value',
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    channel: {
+      description:
+        'Currently selected audio channel (number for single channel, string for grouped channels)',
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'number | string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    monitorVolume: {
+      description: 'Monitor (feedback) volume level (0-100)',
+      control: { type: 'number', min: 0, max: 100 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    isMonitorActive: {
+      description: 'Whether monitor (feedback) is currently active',
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    deviceOptions: {
+      description: 'Array of available audio input devices',
+      control: false,
+      table: {
+        type: { summary: 'Array<{ value: string, label: string }>' },
+        defaultValue: { summary: '[]' },
+      },
+    },
+    channelOptions: {
+      description: 'Array of available audio channels (single or grouped)',
+      control: false,
+      table: {
+        type: {
+          summary:
+            'Array<{ value: number | string, label: string, isSelected: boolean, isGroup: boolean }>',
+        },
+        defaultValue: { summary: '[]' },
+      },
+    },
+    inputVolume: {
+      description: 'Input gain/volume value (0.1-3.0 range)',
+      control: { type: 'number', min: 0.1, max: 3.0, step: 0.1 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    inputVolumeDb: {
+      description: 'Input volume displayed in decibels (dB)',
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    inputLevel: {
+      description:
+        'Current input level for the level meter (typically 5-30 range, normalized to 17 segments)',
+      control: { type: 'range', min: 0, max: 30, step: 1 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+      },
+    },
+    onDeviceChange: {
+      description: 'Callback function called when the device selection changes',
+      action: 'device-changed',
+      table: {
+        type: { summary: '(value: string) => void' },
+      },
+    },
+    onChannelChange: {
+      description:
+        'Callback function called when the channel selection changes',
+      action: 'channel-changed',
+      table: {
+        type: { summary: '(value: number | string) => void' },
+      },
+    },
+    onMonitorToggle: {
+      description:
+        'Callback function called when the monitor toggle is changed',
+      action: 'monitor-toggled',
+      table: {
+        type: { summary: '(checked: boolean) => void' },
+      },
+    },
+    onMonitorVolumeChange: {
+      description: 'Callback function called when the monitor volume changes',
+      action: 'monitor-volume-changed',
+      table: {
+        type: { summary: '(volume: number) => void' },
+      },
+    },
+    onInputVolumeChange: {
+      description:
+        'Callback function called when the input volume/gain changes',
+      action: 'input-volume-changed',
+      table: {
+        type: { summary: '(volume: number) => void' },
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    i18n: {
+      _: (text) => text,
+    },
+    device: '43c7838986db15dace3cee762d77493367425612315de96a5d3c19ce4f72c15a',
+    channel: 0,
+    monitorVolume: 34,
+    isMonitorActive: true,
+    deviceOptions: [
+      {
+        value:
+          '43c7838986db15dace3cee762d77493367425612315de96a5d3c19ce4f72c15a',
+        label: 'MacBook Pro Microphone (Built-in)',
+      },
+      {
+        value: 'default',
+        label: 'Default - MacBook Pro Microphone (Built-in)',
+      },
+    ],
+    channelOptions: [
+      {
+        value: 0,
+        label: 'Channel 1',
+        isSelected: true,
+        isGroup: false,
+      },
+      {
+        value: 1,
+        label: 'Channel 2',
+        isSelected: false,
+        isGroup: false,
+      },
+      {
+        value: '0+1',
+        label: 'Channel 1 + 2',
+        isSelected: false,
+        isGroup: true,
+      },
+    ],
+    inputVolume: 1.7,
+    inputVolumeDb: '4.6 dB',
+    inputLevel: 0,
+    onDeviceChange: fn(),
+    onChannelChange: fn(),
+    onMonitorToggle: fn(),
+    onMonitorVolumeChange: fn(),
+    onInputVolumeChange: fn(),
+  },
+}
+
+export const MonitorInactive = {
+  args: {
+    ...Default.args,
+    isMonitorActive: false,
+    inputLevel: 15,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'RecordingForm with monitor (feedback) disabled. The monitor volume slider is hidden when inactive.',
+      },
+    },
+  },
+}
+
+export const HighInputLevel = {
+  args: {
+    ...Default.args,
+    inputLevel: 28,
+    inputVolume: 2.5,
+    inputVolumeDb: '7.96 dB',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'RecordingForm with high input level. The level meter shows more active segments, including the high (red) zone.',
+      },
+    },
+  },
+}
+
+export const GroupedChannels = {
+  args: {
+    ...Default.args,
+    channel: '0+1',
+    channelOptions: [
+      {
+        value: 0,
+        label: 'Channel 1',
+        isSelected: false,
+        isGroup: false,
+      },
+      {
+        value: 1,
+        label: 'Channel 2',
+        isSelected: false,
+        isGroup: false,
+      },
+      {
+        value: '0+1',
+        label: 'Channel 1 + 2',
+        isSelected: true,
+        isGroup: true,
+      },
+    ],
+    inputLevel: 20,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'RecordingForm with grouped channels selected (Channel 1 + 2).',
+      },
+    },
+  },
+}
+
+export const LowInputLevel = {
+  args: {
+    ...Default.args,
+    inputLevel: 8,
+    inputVolume: 0.5,
+    inputVolumeDb: '-6.02 dB',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'RecordingForm with low input level. The level meter shows fewer active segments in the low (green) zone.',
+      },
+    },
+  },
+}

package/src/components/SectionExpander/SectionExpander.jsx

@@ -0,0 +1,53 @@
+import { Flex, Text, Separator } from '@radix-ui/themes'
+import { ChevronDownIcon } from '@radix-ui/react-icons'
+import { Collapsible } from 'radix-ui'
+import { useState } from 'react'
+import styles from './SectionExpander.module.css'
+import classNames from 'classnames'
+
+export const SectionExpander = ({ title, children, className, ...props }) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Flex
+      width="100%"
+      direction="column"
+      className={classNames(styles.sectionExpander, className)}
+      {...props}
+    >
+      <Flex
+        className={styles.sectionExpanderHeader}
+        align="center"
+        justify="between"
+        onClick={() => setOpen(!open)}
+      >
+        <Separator style={{ width: '100%' }} />
+        <Flex align="center" justify="center" width="100%" gap="1" px="4">
+          <Text
+            size="2"
+            truncate="true"
+            className={styles.sectionExpanderTitle}
+          >
+            {title}
+          </Text>
+          <ChevronDownIcon
+            className={classNames(styles.sectionExpanderIcon, {
+              [styles.expanded]: open,
+            })}
+            width={16}
+            height={16}
+          />
+        </Flex>
+        <Separator style={{ width: '100%' }} />
+      </Flex>
+
+      <Collapsible.Root open={open} onOpenChange={setOpen}>
+        <Collapsible.Content className={styles.sectionExpanderContent}>
+          {children}
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </Flex>
+  )
+}
+
+SectionExpander.displayName = 'SectionExpander'

package/src/components/SectionExpander/SectionExpander.module.css

@@ -0,0 +1,46 @@
+.sectionExpander {
+  width: 100%;
+  overflow: hidden;
+}
+
+.sectionExpanderHeader {
+  cursor: pointer !important;
+  user-select: none;
+
+  &:hover .sectionExpanderTitle,
+  &:hover .sectionExpanderIcon {
+    color: var(--neutral-alpha-11);
+  }
+}
+
+.sectionExpanderTitle {
+  color: var(--neutral-alpha-9);
+  transition: color 0.3s ease;
+
+}
+
+.sectionExpanderIcon {
+  color: var(--neutral-alpha-10);
+  transition: transform 0.3s ease, color 0.3s ease;
+}
+
+.sectionExpanderIcon.expanded {
+  transform: rotate(180deg);
+}
+
+.sectionExpanderContent {
+  padding: 16px 0;
+  background-color: var(--neutral-alpha-1);
+  animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+} 

package/src/components/SectionExpander/SectionExpander.stories.jsx

@@ -0,0 +1,48 @@
+import { Flex } from '@radix-ui/themes'
+import { SectionExpander } from './SectionExpander'
+
+export default {
+  title: 'Components/SectionExpander',
+  component: SectionExpander,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## Usage
+
+\`\`\`jsx
+import { SectionExpander } from '@moises.ai/design-system'
+
+<SectionExpander title="Advanced Settings">
+  <div>SectionExpander Component</div>
+</SectionExpander>
+\`\`\`
+
+## Component API
+
+\`\`\`jsx
+{
+  title: string, // The title of the section
+  children: React.ReactNode, // The content of the section
+}
+\`\`\`
+
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export const Default = {
+  args: {
+    title: 'Advanced Settings',
+    children: 'SectionExpander Component',
+  },
+  render: (args) => (
+    <Flex width="300px" height="100px" justify="center" align="start">
+      <SectionExpander {...args} />
+    </Flex>
+  ),
+}

package/src/components/SegmentedControl/SegmentedControl.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import {
+  Flex,
+  SegmentedControl as SegmentedControlRadix,
+} from '@radix-ui/themes'
+import './SegmentedControl.styles.css'
+import classNames from 'classnames'
+
+export const SegmentedControl = ({
+  className,
+  selectedType,
+  size = '2',
+  handleTypeChange,
+  items,
+  iconProps = {},
+  ...props
+}) => {
+  return (
+    <Flex padding="1" width="100%">
+      <SegmentedControlRadix.Root
+        size={size}
+        value={selectedType}
+        onValueChange={handleTypeChange}
+        variant="surface"
+        radius="medium"
+        className={classNames('customSegmentedControl', className, {
+          hasIconSegmentedControl: items.some((item) => item.icon),
+        })}
+        {...props}
+      >
+        {items.map((item) => (
+          <SegmentedControlRadix.Item
+            key={item.value}
+            value={item.value}
+            className={classNames('customSegmentedControlItem', {
+              hasIcon: item.icon,
+            })}
+          >
+            {item.icon && <item.icon {...iconProps} />}
+            {item.label}
+          </SegmentedControlRadix.Item>
+        ))}
+      </SegmentedControlRadix.Root>
+    </Flex>
+  )
+}
+
+SegmentedControl.displayName = 'SegmentedControl'