@moises.ai/design-system 4.16.5 → 4.16.7

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

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

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

@@ -0,0 +1,40 @@
+// 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' },
+]

package/src/icons/ChordDiagramGridIcon.jsx

@@ -0,0 +1,22 @@
+export const ChordDiagramGridIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  width={width} 
+  height={height} 
+  viewBox="0 0 16 16" 
+  fill="none"
+  className={className}
+  {...props}
+>
+    <path 
+      d="M5.33325 14.6663C5.33325 14.9425 5.55711 15.1663 5.83325 15.1663C6.10939 15.1663 6.33325 14.9425 6.33325 14.6663H5.83325H5.33325ZM9.66658 14.6663C9.66658 14.9425 9.89044 15.1663 10.1666 15.1663C10.4427 15.1663 10.6666 14.9425 10.6666 14.6663H10.1666H9.66658ZM2.66659 10.6663V11.1663H13.3333V10.6663V10.1663H2.66659V10.6663ZM2.66659 14.6663V15.1663H13.3333V14.6663V14.1663H2.66659V14.6663ZM5.83325 14.6663H6.33325V10.6663H5.83325H5.33325V14.6663H5.83325ZM10.1666 14.6663H10.6666V10.6663H10.1666H9.66658V14.6663H10.1666ZM1.33325 13.333H1.83325V11.9997H1.33325H0.833252V13.333H1.33325ZM14.6666 13.333H15.1666V11.9997H14.6666H14.1666V13.333H14.6666ZM13.3333 10.6663V11.1663C13.7935 11.1663 14.1666 11.5394 14.1666 11.9997H14.6666H15.1666C15.1666 10.9872 14.3458 10.1663 13.3333 10.1663V10.6663ZM13.3333 14.6663V15.1663C14.3458 15.1663 15.1666 14.3455 15.1666 13.333H14.6666H14.1666C14.1666 13.7932 13.7935 14.1663 13.3333 14.1663V14.6663ZM2.66659 10.6663V10.1663C1.65406 10.1663 0.833252 10.9872 0.833252 11.9997H1.33325H1.83325C1.83325 11.5394 2.20635 11.1663 2.66659 11.1663V10.6663ZM2.66659 14.6663V14.1663C2.20635 14.1663 1.83325 13.7932 1.83325 13.333H1.33325H0.833252C0.833252 14.3455 1.65406 15.1663 2.66659 15.1663V14.6663ZM3.83325 1.33301V1.83301H6.16659V1.33301V0.833008H3.83325V1.33301ZM6.16659 1.33301V1.83301H9.83325V1.33301V0.833008H6.16659V1.33301ZM9.83325 1.33301V1.83301H12.1666V1.33301V0.833008H9.83325V1.33301ZM13.4999 2.66634H12.9999V7.99967H13.4999H13.9999V2.66634H13.4999ZM2.49992 7.99967H2.99992V2.66634H2.49992H1.99992V7.99967H2.49992ZM12.1666 1.33301V1.83301C12.6268 1.83301 12.9999 2.2061 12.9999 2.66634H13.4999H13.9999C13.9999 1.65382 13.1791 0.833008 12.1666 0.833008V1.33301ZM3.83325 1.33301V0.833008C2.82073 0.833008 1.99992 1.65382 1.99992 2.66634H2.49992H2.99992C2.99992 2.2061 3.37301 1.83301 3.83325 1.83301V1.33301ZM6.16659 7.99967H6.66659V1.33301H6.16659H5.66659V7.99967H6.16659ZM9.83325 7.99967H10.3333V1.33301H9.83325H9.33325V7.99967H9.83325Z" 
+      fill='currentColor'
+    />
+    <path 
+      d="M11.1667 4.66634C11.1667 5.40272 10.5697 5.99967 9.83333 5.99967C9.09695 5.99967 8.5 5.40272 8.5 4.66634C8.5 3.92996 9.09695 3.33301 9.83333 3.33301C10.5697 3.33301 11.1667 3.92996 11.1667 4.66634Z" 
+      fill='currentColor' 
+    />
+  </svg>
+)
+
+ChordDiagramGridIcon.displayName = 'ChordDiagramGridIcon'

package/src/icons/ChordGrid3Icon.jsx

@@ -0,0 +1,20 @@
+export const ChordGrid3Icon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  width={width} 
+  height={height} 
+  viewBox="0 0 15 8" 
+  fill="none"
+  className={className}
+  {...props}
+  >
+    <path 
+      d="M5 7.5V0.5M9.33333 7.5V0.5M12.5 0.5H1.83333C1.09695 0.5 0.5 1.39543 0.5 2.5V5.5C0.5 6.60457 1.09695 7.5 1.83333 7.5H12.5C13.2364 7.5 13.8333 6.60457 13.8333 5.5V2.5C13.8333 1.39543 13.2364 0.5 12.5 0.5Z" 
+      stroke="currentColor" 
+      strokeMiterlimit="10" 
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+ChordGrid3Icon.displayName = 'ChordGrid3Icon'

package/src/icons.jsx

@@ -435,3 +435,5 @@ export { ThumbsDownIcon } from './icons/ThumbsDownIcon'
 export { LightBulbIcon } from './icons/LightBulbIcon'
 export { RewindBarFillIcon } from './icons/RewindBarFillIcon'
 export { ForwardBarFillIcon } from './icons/ForwardBarFillIcon'
+export { ChordGrid3Icon } from './icons/ChordGrid3Icon'
+export { ChordDiagramGridIcon } from './icons/ChordDiagramGridIcon'

package/src/index.jsx

@@ -122,4 +122,4 @@ export { TrackHeader } from './components/TrackHeader/TrackHeader'
 export { useForm } from './components/useForm/useForm'
 export { VerticalSegmentControl } from './components/VerticalSegmentControl/VerticalSegmentControl'
 export { VoiceConversionForm } from './components/VoiceConversionForm/VoiceConversionForm'
-export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'
+export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'