@moises.ai/design-system 4.16.10 → 4.16.11

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

@@ -1,225 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

@@ -1,25 +0,0 @@
-.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;
-  }
-}

package/src/components/PlayerTempoPitch/PlayerTempoPitch.stories.jsx

@@ -1,215 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { PlayerTempoPitch } from './PlayerTempoPitch'
-import { MAX_VALUE_BPM, MIN_VALUE_BPM } from './constants'
-
-const DEFAULTS = {
-  tempo: 120,
-  pitch: 'C#',
-  tuning: 440,
-}
-
-function StatefulPlayerTempoPitch({
-  initialTempo = DEFAULTS.tempo,
-  initialPitch = DEFAULTS.pitch,
-  initialTuning = DEFAULTS.tuning,
-  onTempoChange,
-  onPitchChange,
-  onTuningChange,
-  onRefresh,
-}) {
-  const [tempo, setTempo] = useState(initialTempo)
-  const [pitch, setPitch] = useState(initialPitch)
-  const [tuning, setTuning] = useState(initialTuning)
-
-  useEffect(() => {
-    setTempo(initialTempo)
-  }, [initialTempo])
-
-  useEffect(() => {
-    setPitch(initialPitch)
-  }, [initialPitch])
-
-  useEffect(() => {
-    setTuning(initialTuning)
-  }, [initialTuning])
-
-  const handleRefresh = useCallback(() => {
-    setTempo(DEFAULTS.tempo)
-    setPitch(DEFAULTS.pitch)
-    setTuning(DEFAULTS.tuning)
-    onRefresh?.()
-  }, [onRefresh])
-
-  return (
-    <PlayerTempoPitch
-      tempo={tempo}
-      pitch={pitch}
-      tuning={tuning}
-      onTempoChange={(value) => {
-        setTempo(value)
-        onTempoChange?.(value)
-      }}
-      onPitchChange={(value) => {
-        setPitch(value)
-        onPitchChange?.(value)
-      }}
-      onTuningChange={(value) => {
-        setTuning(value)
-        onTuningChange?.(value)
-      }}
-      onRefresh={handleRefresh}
-    />
-  )
-}
-
-export default {
-  title: 'New Mixer/PlayerTempoPitch',
-  component: PlayerTempoPitch,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: `
-Tempo and pitch panel for New Mixer. Pass \`tempo\`, \`pitch\` and \`tuning\`, then update them from their change handlers. The refresh button resets to defaults.
-        `,
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          width: 258,
-          padding: 16,
-          background: '#1d1d1d',
-          borderRadius: 8,
-          boxSizing: 'border-box',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    tempo: {
-      description: `Tempo in BPM (${MIN_VALUE_BPM}–${MAX_VALUE_BPM}).`,
-      table: { type: { summary: 'number' }, defaultValue: { summary: 120 } },
-      control: { type: 'range', min: MIN_VALUE_BPM, max: MAX_VALUE_BPM, step: 1 },
-    },
-    pitch: {
-      description: 'Selected pitch note.',
-      table: { type: { summary: 'string' }, defaultValue: { summary: 'C#' } },
-      control: 'select',
-      options: ['C', 'C#', 'D', 'D#', 'E'],
-    },
-    tuning: {
-      description: 'Reference tuning in Hz.',
-      table: { type: { summary: 'number' }, defaultValue: { summary: 440 } },
-      control: 'select',
-      options: [440, 442, 444, 446],
-    },
-    onTempoChange: {
-      table: { type: { summary: '(tempo: number | "") => void' } },
-      action: 'tempo changed',
-    },
-    onPitchChange: {
-      table: { type: { summary: '(pitch: string) => void' } },
-      action: 'pitch changed',
-    },
-    onTuningChange: {
-      table: { type: { summary: '(tuning: number) => void' } },
-      action: 'tuning changed',
-    },
-    onRefresh: {
-      table: { type: { summary: '() => void' } },
-      action: 'refreshed',
-    },
-  },
-}
-
-export const Default = {
-  render: (args) => (
-    <StatefulPlayerTempoPitch
-      initialTempo={args.tempo}
-      initialPitch={args.pitch}
-      initialTuning={args.tuning}
-      onTempoChange={args.onTempoChange}
-      onPitchChange={args.onPitchChange}
-      onTuningChange={args.onTuningChange}
-      onRefresh={args.onRefresh}
-    />
-  ),
-}
-
-export const SlowTempo = {
-  args: {
-    tempo: 60,
-    pitch: 'C',
-  },
-  render: (args) => (
-    <StatefulPlayerTempoPitch
-      initialTempo={args.tempo}
-      initialPitch={args.pitch}
-      initialTuning={args.tuning}
-      onTempoChange={args.onTempoChange}
-      onPitchChange={args.onPitchChange}
-      onTuningChange={args.onTuningChange}
-      onRefresh={args.onRefresh}
-    />
-  ),
-}
-
-export const FastTempo = {
-  args: {
-    tempo: 180,
-    pitch: 'E',
-  },
-  render: (args) => (
-    <StatefulPlayerTempoPitch
-      initialTempo={args.tempo}
-      initialPitch={args.pitch}
-      initialTuning={args.tuning}
-      onTempoChange={args.onTempoChange}
-      onPitchChange={args.onPitchChange}
-      onTuningChange={args.onTuningChange}
-      onRefresh={args.onRefresh}
-    />
-  ),
-}
-
-export const AlternateTuning = {
-  args: {
-    tuning: 442,
-  },
-  render: (args) => (
-    <StatefulPlayerTempoPitch
-      initialTempo={args.tempo}
-      initialPitch={args.pitch}
-      initialTuning={args.tuning}
-      onTempoChange={args.onTempoChange}
-      onPitchChange={args.onPitchChange}
-      onTuningChange={args.onTuningChange}
-      onRefresh={args.onRefresh}
-    />
-  ),
-}
-
-export const Playground = {
-  args: {
-    tempo: 120,
-    pitch: 'C#',
-    tuning: 440,
-  },
-  render: (args) => (
-    <StatefulPlayerTempoPitch
-      initialTempo={args.tempo}
-      initialPitch={args.pitch}
-      initialTuning={args.tuning}
-      onTempoChange={args.onTempoChange}
-      onPitchChange={args.onPitchChange}
-      onTuningChange={args.onTuningChange}
-      onRefresh={args.onRefresh}
-    />
-  ),
-}

package/src/components/PlayerTempoPitch/StepperField.jsx

@@ -1,57 +0,0 @@
-import { Flex, Text, IconButton, TextField } from '../../index'
-import { MinusIcon, PlusIcon } from '../../icons'
-import styles from './PlayerTempoPitch.module.css'
-
-export function StepperField({
-  label,
-  hint,
-  value,
-  onChange,
-  onBlur,
-  onDecrease,
-  onIncrease,
-  disableDecrease,
-  disableIncrease,
-}) {
-  return (
-    <Flex direction="column" gap="1">
-      <Flex width="100%" justify="between" align="center">
-        <Text size="2" className={styles.neutral12}>
-          {label}
-        </Text>
-
-        {hint && (
-          <Text size="2" className={styles.neutralAlpha9}>
-            {hint}
-          </Text>
-        )}
-      </Flex>
-
-      <Flex gap="1" align="center" justify="center">
-        <IconButton
-          className={styles.button}
-          variant="soft"
-          size="2"
-          onClick={onDecrease}
-          disabled={disableDecrease}
-        >
-          <MinusIcon width={16} height={16} />
-        </IconButton>
-
-        <Flex className={styles.customTextField}>
-          <TextField size="2" value={value} onChange={onChange} onBlur={onBlur} />
-        </Flex>
-
-        <IconButton
-          className={styles.button}
-          variant="soft"
-          size="2"
-          onClick={onIncrease}
-          disabled={disableIncrease}
-        >
-          <PlusIcon width={16} height={16} />
-        </IconButton>
-      </Flex>
-    </Flex>
-  )
-}

package/src/components/PlayerTempoPitch/constants.js

@@ -1,40 +0,0 @@
-// TODO: remove this file when we have the right constants
-export const MIN_VALUE_BPM = 30
-export const MAX_VALUE_BPM = 200
-
-export const TEMPO_RANGES = [
-  { maxBpm: 19, marking: 'Larghissimo' },
-  { maxBpm: 40, marking: 'Grave' },
-  { maxBpm: 45, marking: 'Lento' },
-  { maxBpm: 50, marking: 'Largo' },
-  { maxBpm: 55, marking: 'Larghetto' },
-  { maxBpm: 65, marking: 'Adagio' },
-  { maxBpm: 69, marking: 'Adagietto' },
-  { maxBpm: 72, marking: 'Andante Moderato' },
-  { maxBpm: 77, marking: 'Andante' },
-  { maxBpm: 83, marking: 'Andantino' },
-  { maxBpm: 85, marking: 'Marcia Moderato' },
-  { maxBpm: 97, marking: 'Moderato' },
-  { maxBpm: 109, marking: 'Allegretto' },
-  { maxBpm: 132, marking: 'Allegro' },
-  { maxBpm: 140, marking: 'Vivace' },
-  { maxBpm: 150, marking: 'Vivacissimo' },
-  { maxBpm: 167, marking: 'Allegrissimo' },
-  { maxBpm: 177, marking: 'Presto' },
-  { maxBpm: Number.POSITIVE_INFINITY, marking: 'Prestissimo' },
-]
-
-export const PITCH_ITEMS = [
-  { value: 'C', label: 'C' },
-  { value: 'C#', label: 'C#' },
-  { value: 'D', label: 'D' },
-  { value: 'D#', label: 'D#' },
-  { value: 'E', label: 'E' },
-]
-
-export const TUNING_ITEMS = [
-  { value: 440, label: '440 Hz', aiDetected: true, extra: '(AI detected)' },
-  { value: 442, label: '442 Hz' },
-  { value: 444, label: '444 Hz' },
-  { value: 446, label: '446 Hz' },
-]