@moises.ai/design-system 4.16.5 → 4.16.7

package/src/components/PlayerMasterVolume/PlayerMasterVolume.stories.jsx

@@ -0,0 +1,182 @@
+import { useCallback, useEffect, useState } from 'react'
+import { PlayerMasterVolume } from './PlayerMasterVolume'
+
+const DEFAULT_STEMS = [
+  { name: 'Vocals', volume: 80 },
+  { name: 'Drums', volume: 65 },
+  { name: 'Bass', volume: 70 },
+  { name: 'Others', volume: 55 },
+]
+
+function StatefulPlayerMasterVolume({
+  initialVolume = 1,
+  initialStems = DEFAULT_STEMS,
+  onVolumeChange,
+  onStemVolumeChange,
+}) {
+  const [volume, setVolume] = useState(initialVolume)
+  const [stems, setStems] = useState(initialStems)
+
+  useEffect(() => {
+    setVolume(initialVolume)
+  }, [initialVolume])
+
+  useEffect(() => {
+    setStems(initialStems)
+  }, [initialStems])
+
+  const handleVolumeChange = useCallback(
+    ([value]) => {
+      setVolume(value)
+      onVolumeChange?.([value])
+    },
+    [onVolumeChange],
+  )
+
+  const handleStemVolumeChange = useCallback(
+    (name, value) => {
+      setStems((prev) =>
+        prev.map((stem) =>
+          stem.name === name ? { ...stem, volume: value } : stem,
+        ),
+      )
+      onStemVolumeChange?.(name, value)
+    },
+    [onStemVolumeChange],
+  )
+
+  return (
+    <PlayerMasterVolume
+      volume={volume}
+      stems={stems}
+      onVolumeChange={handleVolumeChange}
+      onStemVolumeChange={handleStemVolumeChange}
+    />
+  )
+}
+
+export default {
+  title: 'New Mixer/PlayerMasterVolume',
+  component: PlayerMasterVolume,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+Master volume popover for New Mixer. Pass \`volume\` and update it from \`onVolumeChange\` (receives a gain array from \`InputLevelMeter\`). Stem sliders are controlled via \`stems\` and \`onStemVolumeChange\`.
+        `,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: 286,
+          padding: 16,
+          background: '#1d1d1d',
+          borderRadius: 8,
+          boxSizing: 'border-box',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    volume: {
+      description: 'Master gain passed to InputLevelMeter (0 = mute, 1 = unity).',
+      table: { type: { summary: 'number' }, defaultValue: { summary: 1 } },
+      control: { type: 'range', min: 0, max: 2, step: 0.01 },
+    },
+    stems: {
+      description: 'Stem rows rendered when the accordion is open.',
+      table: { type: { summary: '{ name: string, volume: number }[]' } },
+      control: false,
+    },
+    onVolumeChange: {
+      description: 'Called with `[gain]` when the master fader moves.',
+      table: { type: { summary: '([gain: number]) => void' } },
+      action: 'volume changed',
+    },
+    onStemVolumeChange: {
+      description: 'Called with stem name and slider value (0–100).',
+      table: { type: { summary: '(name: string, value: number) => void' } },
+      action: 'stem volume changed',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    volume: 1,
+    initialStems: DEFAULT_STEMS,
+  },
+  render: (args) => (
+    <StatefulPlayerMasterVolume
+      initialVolume={args.volume}
+      initialStems={args.initialStems}
+      onVolumeChange={args.onVolumeChange}
+      onStemVolumeChange={args.onStemVolumeChange}
+    />
+  ),
+}
+
+export const VolumeAtZero = {
+  args: {
+    volume: 0,
+  },
+  render: (args) => (
+    <StatefulPlayerMasterVolume
+      initialVolume={args.volume}
+      onVolumeChange={args.onVolumeChange}
+      onStemVolumeChange={args.onStemVolumeChange}
+    />
+  ),
+}
+
+export const VolumeBoosted = {
+  args: {
+    volume: 1.5,
+  },
+  render: (args) => (
+    <StatefulPlayerMasterVolume
+      initialVolume={args.volume}
+      onVolumeChange={args.onVolumeChange}
+      onStemVolumeChange={args.onStemVolumeChange}
+    />
+  ),
+}
+
+export const CustomStems = {
+  args: {
+    volume: 1,
+    initialStems: [
+      { name: 'Vocals', volume: 100 },
+      { name: 'Guitar', volume: 40 },
+      { name: 'Keys', volume: 60 },
+    ],
+  },
+  render: (args) => (
+    <StatefulPlayerMasterVolume
+      initialVolume={args.volume}
+      initialStems={args.initialStems}
+      onVolumeChange={args.onVolumeChange}
+      onStemVolumeChange={args.onStemVolumeChange}
+    />
+  ),
+}
+
+export const Playground = {
+  args: {
+    volume: 1,
+  },
+  render: (args) => (
+    <StatefulPlayerMasterVolume
+      initialVolume={args.volume}
+      onVolumeChange={args.onVolumeChange}
+      onStemVolumeChange={args.onStemVolumeChange}
+    />
+  ),
+}

package/src/components/PlayerSmartMetronome/PlayerSmartMetronome.jsx

@@ -0,0 +1,79 @@
+import styles from './PlayerSmartMetronome.module.css'
+import { Flex, Text, SliderLibrary, Separator, IconButton, PanControl } from '../../index'
+import { RefreshBackIcon } from '../../icons'
+import { SegmentedField } from './SegmentedField'
+
+export const PlayerSmartMetronome = ({
+  subDivision = '1x',
+  volume = 50,
+  countIn = 'off',
+  panValue = 0,
+  onSubDivisionChange,
+  onVolumeChange,
+  onCountInChange,
+  onRefresh,
+  onPanChange,
+}) => {
+  return (
+    <Flex className={styles.PlayerSmartMetronome} direction="column" gap="4">
+      <Flex align="center" gap="2" justify="between">
+        <Text size="3" weight="medium" className={styles.white}>
+          Smart Metronome
+        </Text>
+
+        <IconButton variant="ghost" size="1" onClick={onRefresh}>
+          <RefreshBackIcon width={16} height={16} />
+        </IconButton>
+      </Flex>
+
+      <SegmentedField
+        label="Sub-division"
+        items={[
+          { value: '0.5x', label: '0.5x' },
+          { value: '1x', label: '1x' },
+          { value: '2x', label: '2x' },
+        ]}
+        value={subDivision}
+        onChange={onSubDivisionChange}
+      />
+      <Flex gap="3" align="end" justify="between">
+        <Flex className={styles.flex1} direction="column" gap="1">
+          <Flex width="100%" justify="between" align="center">
+            <Text size="2" className={styles.neutral12}>
+              Metronome volume
+            </Text>
+
+            <Text size="2" className={styles.neutralAlpha9}>
+              {volume}%
+            </Text>
+          </Flex>
+          <SliderLibrary
+            value={volume}
+            onValueChange={onVolumeChange}
+            formatValue={(v) => `${v}%`}
+            aria-label="Volume"
+          />
+        </Flex>
+
+        <PanControl value={panValue} onChange={onPanChange} />
+      </Flex>
+
+      <Flex justify="center" width="100%">
+        <Separator size="1" className={styles.neutralAlpha4} />
+      </Flex>
+
+      <SegmentedField
+        label="Count-in"
+        items={[
+          { value: 'off', label: 'Off' },
+          { value: '1 bar', label: '1 bar' },
+          { value: '2 bars', label: '2 bars' },
+        ]}
+        value={countIn}
+        onChange={onCountInChange}
+      />
+    </Flex>
+  )
+}
+
+PlayerSmartMetronome.displayName = 'PlayerSmartMetronome'

package/src/components/PlayerSmartMetronome/PlayerSmartMetronome.module.css

@@ -0,0 +1,23 @@
+.PlayerSmartMetronome {
+  min-width: 258px;
+}
+
+.neutral12 {
+  color: var(--neutral-12);
+}
+
+.neutralAlpha4 {
+  color: var(--neutral-alpha-4);
+}
+
+.flex1 {
+  flex: 1;
+}
+
+.neutralAlpha9 {
+  color: var(--neutral-alpha-9);
+}
+
+.white {
+  color: var(--white);
+}

package/src/components/PlayerSmartMetronome/PlayerSmartMetronome.stories.jsx

@@ -0,0 +1,225 @@
+import { useCallback, useEffect, useState } from 'react'
+import { PlayerSmartMetronome } from './PlayerSmartMetronome'
+
+const DEFAULTS = {
+  subDivision: '1x',
+  volume: 50,
+  countIn: 'off',
+  panValue: 0,
+}
+
+function StatefulPlayerSmartMetronome({
+  initialSubDivision = DEFAULTS.subDivision,
+  initialVolume = DEFAULTS.volume,
+  initialCountIn = DEFAULTS.countIn,
+  initialPanValue = DEFAULTS.panValue,
+  onSubDivisionChange,
+  onVolumeChange,
+  onCountInChange,
+  onPanChange,
+  onRefresh,
+}) {
+  const [subDivision, setSubDivision] = useState(initialSubDivision)
+  const [volume, setVolume] = useState(initialVolume)
+  const [countIn, setCountIn] = useState(initialCountIn)
+  const [panValue, setPanValue] = useState(initialPanValue)
+
+  useEffect(() => {
+    setSubDivision(initialSubDivision)
+  }, [initialSubDivision])
+
+  useEffect(() => {
+    setVolume(initialVolume)
+  }, [initialVolume])
+
+  useEffect(() => {
+    setCountIn(initialCountIn)
+  }, [initialCountIn])
+
+  useEffect(() => {
+    setPanValue(initialPanValue)
+  }, [initialPanValue])
+
+  const handleRefresh = useCallback(() => {
+    setSubDivision(DEFAULTS.subDivision)
+    setVolume(DEFAULTS.volume)
+    setCountIn(DEFAULTS.countIn)
+    setPanValue(DEFAULTS.panValue)
+    onRefresh?.()
+  }, [onRefresh])
+
+  return (
+    <PlayerSmartMetronome
+      subDivision={subDivision}
+      volume={volume}
+      countIn={countIn}
+      panValue={panValue}
+      onSubDivisionChange={(value) => {
+        setSubDivision(value)
+        onSubDivisionChange?.(value)
+      }}
+      onVolumeChange={(value) => {
+        setVolume(value)
+        onVolumeChange?.(value)
+      }}
+      onCountInChange={(value) => {
+        setCountIn(value)
+        onCountInChange?.(value)
+      }}
+      onPanChange={(value) => {
+        setPanValue(value)
+        onPanChange?.(value)
+      }}
+      onRefresh={handleRefresh}
+    />
+  )
+}
+
+export default {
+  title: 'New Mixer/PlayerSmartMetronome',
+  component: PlayerSmartMetronome,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+Smart metronome panel for New Mixer. Control sub-division, volume, pan and count-in via props and their change handlers.
+        `,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: 258,
+          padding: 16,
+          background: '#1d1d1d',
+          borderRadius: 8,
+          boxSizing: 'border-box',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    subDivision: {
+      description: 'Selected sub-division multiplier.',
+      table: { type: { summary: "'0.5x' | '1x' | '2x'" }, defaultValue: { summary: '1x' } },
+      control: 'select',
+      options: ['0.5x', '1x', '2x'],
+    },
+    volume: {
+      description: 'Metronome volume percentage (0–100).',
+      table: { type: { summary: 'number' }, defaultValue: { summary: 50 } },
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+    },
+    countIn: {
+      description: 'Count-in bars before playback.',
+      table: { type: { summary: "'off' | '1 bar' | '2 bars'" }, defaultValue: { summary: 'off' } },
+      control: 'select',
+      options: ['off', '1 bar', '2 bars'],
+    },
+    panValue: {
+      description: 'Pan position passed to PanControl.',
+      table: { type: { summary: 'number' }, defaultValue: { summary: 0 } },
+      control: { type: 'range', min: -1, max: 1, step: 0.01 },
+    },
+    onSubDivisionChange: {
+      table: { type: { summary: '(value: string) => void' } },
+      action: 'sub-division changed',
+    },
+    onVolumeChange: {
+      table: { type: { summary: '(value: number) => void' } },
+      action: 'volume changed',
+    },
+    onCountInChange: {
+      table: { type: { summary: '(value: string) => void' } },
+      action: 'count-in changed',
+    },
+    onPanChange: {
+      table: { type: { summary: '(value: number) => void' } },
+      action: 'pan changed',
+    },
+    onRefresh: {
+      table: { type: { summary: '() => void' } },
+      action: 'refreshed',
+    },
+  },
+}
+
+export const Default = {
+  render: (args) => (
+    <StatefulPlayerSmartMetronome
+      initialSubDivision={args.subDivision}
+      initialVolume={args.volume}
+      initialCountIn={args.countIn}
+      initialPanValue={args.panValue}
+      onSubDivisionChange={args.onSubDivisionChange}
+      onVolumeChange={args.onVolumeChange}
+      onCountInChange={args.onCountInChange}
+      onPanChange={args.onPanChange}
+      onRefresh={args.onRefresh}
+    />
+  ),
+}
+
+export const HalfSubDivision = {
+  args: {
+    subDivision: '0.5x',
+    volume: 75,
+  },
+  render: (args) => (
+    <StatefulPlayerSmartMetronome
+      initialSubDivision={args.subDivision}
+      initialVolume={args.volume}
+      onSubDivisionChange={args.onSubDivisionChange}
+      onVolumeChange={args.onVolumeChange}
+      onCountInChange={args.onCountInChange}
+      onPanChange={args.onPanChange}
+      onRefresh={args.onRefresh}
+    />
+  ),
+}
+
+export const WithCountIn = {
+  args: {
+    countIn: '2 bars',
+    volume: 80,
+  },
+  render: (args) => (
+    <StatefulPlayerSmartMetronome
+      initialCountIn={args.countIn}
+      initialVolume={args.volume}
+      onSubDivisionChange={args.onSubDivisionChange}
+      onVolumeChange={args.onVolumeChange}
+      onCountInChange={args.onCountInChange}
+      onPanChange={args.onPanChange}
+      onRefresh={args.onRefresh}
+    />
+  ),
+}
+
+export const Playground = {
+  args: {
+    subDivision: '1x',
+    volume: 50,
+    countIn: 'off',
+    panValue: 0,
+  },
+  render: (args) => (
+    <StatefulPlayerSmartMetronome
+      initialSubDivision={args.subDivision}
+      initialVolume={args.volume}
+      initialCountIn={args.countIn}
+      initialPanValue={args.panValue}
+      onSubDivisionChange={args.onSubDivisionChange}
+      onVolumeChange={args.onVolumeChange}
+      onCountInChange={args.onCountInChange}
+      onPanChange={args.onPanChange}
+      onRefresh={args.onRefresh}
+    />
+  ),
+}

package/src/components/PlayerSmartMetronome/SegmentedField.jsx

@@ -0,0 +1,19 @@
+import { Flex, Text, SegmentedControl } from '../../index'
+import styles from './PlayerSmartMetronome.module.css'
+
+export function SegmentedField({ label, items, value, onChange }) {
+  return (
+    <Flex direction="column" gap="1">
+      <Text size="2" className={styles.neutral12}>
+        {label}
+      </Text>
+
+      <SegmentedControl
+        items={items}
+        selectedType={value}
+        handleTypeChange={onChange}
+        size="2"
+      />
+    </Flex>
+  )
+}

package/src/components/PlayerTempoPitch/PlayerTempoPitch.jsx

@@ -0,0 +1,123 @@
+import { Flex, Separator, Text, IconButton, Select } from '../../index'
+import styles from './PlayerTempoPitch.module.css'
+import { RefreshBackIcon } from '../../icons'
+import { MIN_VALUE_BPM, MAX_VALUE_BPM, TEMPO_RANGES, PITCH_ITEMS, TUNING_ITEMS } from './constants'
+import { StepperField } from './StepperField'
+
+export const PlayerTempoPitch = ({
+  tempo = 120,
+  pitch = 'C#',
+  tuning = 440,
+  onTempoChange,
+  onPitchChange,
+  onTuningChange,
+  onRefresh,
+}) => {
+  const handleTempoChange = (e) => {
+    const raw = e.target.value
+
+    if (raw === '') {
+      onTempoChange?.('')
+      return
+    }
+
+    const parsed = Number(raw)
+    if (Number.isNaN(parsed)) return
+
+    onTempoChange?.(parsed)
+  }
+
+  const handleTempoBlur = () => {
+    const clamped = Math.min(
+      MAX_VALUE_BPM,
+      Math.max(MIN_VALUE_BPM, Number(tempo) || MIN_VALUE_BPM),
+    )
+    onTempoChange?.(clamped)
+  }
+
+  const handleTempoDecrease = () => {
+    onTempoChange?.(Math.max(MIN_VALUE_BPM, tempo - 1))
+  }
+
+  const handleTempoIncrease = () => {
+    onTempoChange?.(Math.min(MAX_VALUE_BPM, tempo + 1))
+  }
+
+  const handlePitchChange = (e) => {
+    onPitchChange?.(e.target.value)
+  }
+
+  const handlePitchBlur = () => {
+    const exists = PITCH_ITEMS.find((item) => item.value === pitch)
+    if (!exists) onPitchChange?.(PITCH_ITEMS[0].value)
+  }
+
+  const handlePitchDecrease = () => {
+    const currentIndex = PITCH_ITEMS.findIndex((item) => item.value === pitch)
+    if (currentIndex > 0) onPitchChange?.(PITCH_ITEMS[currentIndex - 1].value)
+  }
+
+  const handlePitchIncrease = () => {
+    const currentIndex = PITCH_ITEMS.findIndex((item) => item.value === pitch)
+    if (currentIndex < PITCH_ITEMS.length - 1) {
+      onPitchChange?.(PITCH_ITEMS[currentIndex + 1].value)
+    }
+  }
+
+  return (
+    <Flex direction="column" gap="4">
+      <Flex align="center" gap="2" justify="between">
+        <Text size="3" weight="medium" className={styles.white}>
+          Tempo & Pitch
+        </Text>
+
+        <IconButton variant="ghost" size="1" onClick={onRefresh}>
+          <RefreshBackIcon width={16} height={16} />
+        </IconButton>
+      </Flex>
+
+      <StepperField
+        label="Tempo change"
+        hint={TEMPO_RANGES.find((item) => item.maxBpm >= tempo)?.marking}
+        value={tempo}
+        onChange={handleTempoChange}
+        onBlur={handleTempoBlur}
+        onDecrease={handleTempoDecrease}
+        onIncrease={handleTempoIncrease}
+        disableDecrease={tempo <= MIN_VALUE_BPM}
+        disableIncrease={tempo >= MAX_VALUE_BPM}
+      />
+
+      <Separator size="4" className={styles.neutralAlpha4} />
+
+      <StepperField
+        label="Pitch change"
+        value={pitch}
+        onChange={handlePitchChange}
+        onBlur={handlePitchBlur}
+        onDecrease={handlePitchDecrease}
+        onIncrease={handlePitchIncrease}
+        disableDecrease={pitch === PITCH_ITEMS[0].value}
+        disableIncrease={pitch === PITCH_ITEMS[PITCH_ITEMS.length - 1].value}
+      />
+
+      <Flex direction="column" gap="1">
+        <Text size="2" className={styles.neutral12}>
+          Tuning (Hz)
+        </Text>
+
+        <Select
+          value={tuning}
+          onChange={onTuningChange}
+          items={TUNING_ITEMS}
+          placeholder="Select tuning"
+          size="2"
+          variant="soft"
+          maxHeight="300px"
+        />
+      </Flex>
+    </Flex>
+  )
+}
+
+PlayerTempoPitch.displayName = 'PlayerTempoPitch'

package/src/components/PlayerTempoPitch/PlayerTempoPitch.module.css

@@ -0,0 +1,25 @@
+.PlayerTempoPitch {
+  background-color: var(--neutral-alpha-2);
+}
+
+.neutral12 {
+  color: var(--neutral-12);
+}
+
+.neutralAlpha9 {
+  color: var(--neutral-alpha-9);
+}
+
+.neutralAlpha4 {
+  color: var(--neutral-alpha-4);
+}
+
+.white {
+  color: var(--white);
+}
+
+.customTextField {
+  input {
+    text-align: center;
+  }
+}