@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/StemSeparationForm/StemSeparationForm.stories.jsx

@@ -0,0 +1,221 @@
+import { StemSeparationForm } from './StemSeparationForm'
+
+export default {
+  title: 'Extensions/StemSeparationForm',
+  component: StemSeparationForm,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '400px', height: '600px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+
+A comprehensive form component for AI-powered stem separation with support for both free and premium stem types.
+
+---
+
+## Basic Usage
+
+\`\`\`jsx
+import { StemSeparationForm } from '@moises.ai/design-system'
+
+<StemSeparationForm
+  formState={formState}
+  onFormStateChange={setFormState}
+  paidStems={[
+    { value: 'bass', isLocked: true },
+    { value: 'drums', isLocked: true },
+  ]}
+  freeStems={true}
+  i18n={i18n}
+  onSubmit={handleSubmit}
+  input={fileInputRef}
+  onSelectInput={handleFileSelect}
+  onRemoveInput={handleFileRemove}
+  isLoading={isLoading}
+  error={error}
+  showHiFiPaywall={handleShowHiFiPaywall}
+  onClearTrack={handleClearTrack}
+  showStemsPaywall={handleShowStemsPaywall}
+  showHiFiSwitch={true}
+/>
+\`\`\`
+
+
+---
+
+## Component API
+
+###  Props
+
+| Prop | Description |
+|------|-------------|
+| \`formState\` | Current form state containing selected stems, track info, and other form data. |
+| \`onFormStateChange\` | Callback to update form state. Can accept a new state object or updater function. |
+| \`paidStems\` | Array of paid stem configurations with value and lock status. |
+| \`freeStems\` | Whether to show free stem options (Basic Models section). |
+| \`input\` | File input reference for track upload. |
+| \`onSelectInput\` | Callback to handle file selection for stem separation. |
+| \`onRemoveInput\` | Callback to handle removal of selected input file. |
+| \`onSubmit\` | Callback fired when the "Separate Stems" button is clicked. |
+| \`i18n\` | Internationalization object with _ method for translations. |
+| \`isLoading\` | Whether the separation process is currently running. |
+| \`error\` | Error message to display when separation fails. |
+| \`showHiFiPaywall\` | Function to show paywall for Hi-Fi quality separation. |
+| \`onClearTrack\` | Callback to clear the current track and reset form. |
+| \`showStemsPaywall\` | Function to show paywall when accessing locked premium stems. |
+| \`showHiFiSwitch\` | Whether to show the Hi-Fi switch. |  
+### Definitions
+
+\`\`\`jsx
+
+paidStem = {
+  value: string;     // stem identifier (e.g., 'vocals', 'drums', 'bass')
+  isLocked: boolean; // whether this stem requires premium access
+}
+
+formState = {
+  selectedStems: string[] | string; // selected stem types for separation
+  trackId: string | null;           // unique identifier for the track
+  trackName: string | null;         // display name of the track
+}
+
+\`\`\`
+
+---
+
+## Stem Types
+
+### Free Stems (Basic Models)
+- **Vocals & Instruments**: Basic separation into vocal and instrumental parts
+- **Vocal, Bass, Drums & Others**: Four-stem separation for basic mixing
+
+### Paid Stems (Music Stems)
+- **Vocals**: Lead vocals, backing vocals, or general vocal separation
+- **Instruments**: Bass, guitars (rhythm/solo/acoustic/electric), piano, keys, strings, wind
+- **Drums**: Full drums or individual components (kick, snare, toms, hi-hat, cymbals)
+- **Other**: Miscellaneous instruments not covered by other categories
+
+---
+
+## Notes
+
+- The form automatically handles mutually exclusive stem selections (e.g., selecting "Vocals" deselects "Lead Vocals" and "Backing Vocals")
+- Premium stems show lock icons and trigger paywall when accessed without subscription
+- Hi-Fi toggle is available for enhanced separation quality (premium feature)
+- Form includes file upload, progress tracking, and error handling
+- Success and error messages are displayed in the footer area
+        `,
+      },
+    },
+  },
+  argTypes: {
+    i18n: {
+      description: 'Internationalization object with _ method for translations',
+      control: false,
+    },
+    freeStems: {
+      description: 'Whether the free stems are enabled',
+      control: 'boolean',
+    },
+    paidStems: {
+      description: 'Array of paid stems with value and isLocked properties',
+      type: { name: 'array', value: 'object' },
+      control: {
+        type: 'object',
+        properties: {
+          value: { type: 'string' },
+          isLocked: { type: 'boolean' },
+        },
+      },
+    },
+    input: {
+      description: 'The file input of the form',
+      control: 'file',
+    },
+    onSelectInput: {
+      description: 'Function to handle the selection of the input',
+      control: 'function',
+    },
+    onRemoveInput: {
+      description: 'Function to handle the removal of the input',
+      control: 'function',
+    },
+    formState: {
+      description: 'The state of the form',
+      control: 'object',
+    },
+    onFormStateChange: {
+      description: 'Function to handle the change of the form state',
+      control: 'function',
+    },
+    isLoading: {
+      description: 'Whether the form is loading',
+      control: 'boolean',
+    },
+    error: {
+      description: 'The error of the form',
+      control: 'boolean',
+    },
+    showHiFiPaywall: {
+      description: 'Function to handle the show of the hi-fi paywall',
+      control: 'function',
+    },
+    onClearTrack: {
+      description: 'Function to handle the clear of the track',
+      control: 'function',
+    },
+    showStemsPaywall: {
+      description: 'Function to handle the show of the stems paywall',
+      control: 'function',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    i18n: { _: (text) => text },
+    freeStems: true,
+    paidStems: [
+      {
+        value: 'vocals',
+        isLocked: false,
+      },
+      {
+        value: 'bass',
+        isLocked: false,
+      },
+      {
+        value: 'drums',
+        isLocked: true,
+      },
+      {
+        value: 'other',
+        isLocked: false,
+      },
+    ],
+    input: null,
+    onSelectInput: () => {},
+    onRemoveInput: () => {},
+    formState: {
+      selectedStems: [],
+      trackId: null,
+      trackName: null,
+    },
+    onFormStateChange: () => {},
+    isLoading: false,
+    error: null,
+    showHiFiPaywall: () => {},
+    onClearTrack: () => {},
+    showStemsPaywall: () => {},
+    onSubmit: () => {},
+  },
+  render: (args) => <StemSeparationForm {...args} />,
+}

package/src/components/TempoControlsForm/AutoDetect/AutoDetect.jsx

@@ -0,0 +1,114 @@
+import { Flex } from '@radix-ui/themes'
+import { Button } from '../../Button/Button'
+import { Text } from '../../Text/Text'
+import { SparkleIcon } from '../../../icons'
+import { memo } from 'react'
+
+import { formatDateTime } from '../utils/formatDateTime'
+
+export const AutoDetect = memo(
+  ({
+    handleAIDetect,
+    i18n = { _: (text) => text },
+    bpm,
+    lastTimeDetected,
+    loading,
+    timeSignatureTop,
+    timeSignatureBottom,
+    rootKey,
+  }) => {
+    if (loading) {
+      return (
+        <>
+          <Flex
+            justify="center"
+            align="center"
+            height={lastTimeDetected ? '84px' : '116px'}
+          >
+            <Text
+              size="1"
+              weight="medium"
+              style={{ color: 'var(--neutral-alpha-9)' }}
+            >
+              {i18n._('Detecting...')}
+            </Text>
+          </Flex>
+
+          {lastTimeDetected && <Button loading variant="solid" color="cyan" />}
+        </>
+      )
+    }
+
+    return (
+      <Flex direction="column" gap="3" mt="3">
+        <Flex direction="column" gap="2">
+          <Flex width="100%" justify="between" align="center">
+            <Flex align="center" gap="2">
+              <Text
+                size="1"
+                weight="medium"
+                style={{ color: 'var(--neutral-alpha-11)' }}
+              >
+                {i18n._('Tempo')}
+              </Text>
+            </Flex>
+            <Text size="1" weight="regular">
+              {bpm} {i18n._('bpm')}
+            </Text>
+          </Flex>
+          <Flex width="100%" justify="between" align="center">
+            <Flex align="center" gap="2">
+              <Text
+                size="1"
+                weight="medium"
+                style={{ color: 'var(--neutral-alpha-11)' }}
+              >
+                {i18n._('Time Signature')}
+              </Text>
+            </Flex>
+            <Text size="1" weight="regular">
+              {timeSignatureTop} / {timeSignatureBottom}
+            </Text>
+          </Flex>
+          {rootKey && (
+            <Flex width="100%" justify="between" align="center">
+              <Flex align="center" gap="2">
+                <Text
+                  size="1"
+                  weight="medium"
+                  style={{ color: 'var(--neutral-alpha-11)' }}
+                >
+                  {i18n._('Root Key')}
+                </Text>
+              </Flex>
+              <Text size="1" weight="regular">
+                {rootKey}
+              </Text>
+            </Flex>
+          )}
+        </Flex>
+
+        <Flex width="80%" mx="auto" justify="center">
+          <Text
+            size="1"
+            weight="regular"
+            align="center"
+            style={{ color: 'var(--neutral-alpha-9)' }}
+          >
+            {i18n._('Last time detected:')} {formatDateTime(lastTimeDetected)}
+          </Text>
+        </Flex>
+
+        <Button
+          variant="solid"
+          color="cyan"
+          loading={loading}
+          onClick={handleAIDetect}
+        >
+          <SparkleIcon width={16} height={16} />
+          {i18n._('AI Re-detect')}
+        </Button>
+      </Flex>
+    )
+  },
+)

package/src/components/TempoControlsForm/TempoControlsForm.jsx

@@ -0,0 +1,59 @@
+import { Flex, Switch } from '@radix-ui/themes'
+import { Text } from '../Text/Text'
+import { AutoDetect } from './AutoDetect/AutoDetect'
+import { TempoForm } from './TempoForm/TempoForm'
+
+export const TempoControlsForm = ({
+  onAiAutoDetectToggle,
+  i18n = { _: (text) => text },
+  isAiAutoDetectActive,
+  bpm,
+  lastTimeDetected,
+  loading,
+  rootKey,
+  onAiAutoDetectClick,
+  onTempoChange,
+  onTimeSignatureChange,
+  onRootKeyChange,
+  timeSignatureTop,
+  timeSignatureBottom,
+}) => {
+  return (
+    <Flex width="200px" direction="column">
+      <Flex width="100%" justify="between">
+        <Text size="2"> {i18n._('AI Auto Detect')}</Text>
+        <Switch
+          size="2"
+          checked={isAiAutoDetectActive}
+          onCheckedChange={onAiAutoDetectToggle}
+        />
+      </Flex>
+
+      {isAiAutoDetectActive ? (
+        <AutoDetect
+          handleAIDetect={onAiAutoDetectClick}
+          i18n={i18n}
+          bpm={bpm}
+          lastTimeDetected={lastTimeDetected}
+          loading={loading}
+          timeSignatureTop={timeSignatureTop}
+          timeSignatureBottom={timeSignatureBottom}
+          rootKey={rootKey}
+        />
+      ) : (
+        <TempoForm
+          onTempoChange={onTempoChange}
+          onTimeSignatureChange={onTimeSignatureChange}
+          bpm={bpm}
+          timeSignatureTop={timeSignatureTop}
+          timeSignatureBottom={timeSignatureBottom}
+          rootKey={rootKey}
+          onRootKeyChange={onRootKeyChange}
+          i18n={i18n}
+        />
+      )}
+    </Flex>
+  )
+}
+
+TempoControlsForm.displayName = 'TempoControlsForm'

package/src/components/TempoControlsForm/TempoControlsForm.stories.jsx

@@ -0,0 +1,228 @@
+import { TempoControlsForm } from './TempoControlsForm'
+import { fn } from '@storybook/test'
+
+export default {
+  title: 'Features/TempoControlsForm',
+  component: TempoControlsForm,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## TempoControlsForm Component
+
+The TempoControlsForm component provides a comprehensive interface for controlling tempo, time signature, and root key settings. It includes an AI Auto Detect feature that can automatically detect these values from audio.
+
+### Features
+
+- **Manual Tempo Control**: Adjust BPM (30-200 range) with tempo marking display
+- **Time Signature Control**: Select top and bottom values for time signature
+- **Root Key Selection**: Choose from a list of musical keys (major and minor)
+- **AI Auto Detect**: Toggle to enable AI-powered automatic detection of tempo, time signature, and root key
+
+### Usage
+
+\`\`\`jsx
+import { TempoControlsForm } from '@moises.ai/design-system'
+
+  <TempoControlsForm
+      isAiAutoDetectActive={isAiAutoDetectActive}
+      onAiAutoDetectToggle={handleAiAutoDetectToggle}
+      bpm={bpm}
+      onTempoChange={handleTempoChange}
+      timeSignatureTop={timeSignatureTop}
+      timeSignatureBottom={timeSignatureBottom}
+      onTimeSignatureChange={handleTimeSignatureChange}
+      rootKey={rootKey}
+      onRootKeyChange={handleRootKeyChange}
+      onAiAutoDetectClick={handleAiAutoDetectClick}
+      loading={loading}
+      lastTimeDetected={lastTimeDetected}
+  />
+  
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    isAiAutoDetectActive: {
+      description: 'Whether AI Auto Detect mode is currently active',
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    onAiAutoDetectToggle: {
+      description:
+        'Callback function called when the AI Auto Detect toggle is changed',
+      action: 'toggled',
+      table: {
+        type: { summary: '(checked: boolean) => void' },
+      },
+    },
+    bpm: {
+      description: 'Beats per minute value (range: 30-200)',
+      control: { type: 'number', min: 30, max: 200 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '120' },
+      },
+    },
+    onTempoChange: {
+      description: 'Callback function called when the BPM value changes',
+      action: 'tempo-changed',
+      table: {
+        type: { summary: '(bpm: number) => void' },
+      },
+    },
+    timeSignatureTop: {
+      description: 'Top value of the time signature (numerator)',
+      control: { type: 'number' },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '4' },
+      },
+    },
+    timeSignatureBottom: {
+      description: 'Bottom value of the time signature (denominator)',
+      control: { type: 'select' },
+      options: [2, 4, 8, 16],
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '4' },
+      },
+    },
+    onTimeSignatureChange: {
+      description: 'Callback function called when the time signature changes',
+      action: 'time-signature-changed',
+      table: {
+        type: { summary: '({ top: number, bottom: number }) => void' },
+      },
+    },
+    rootKey: {
+      description: 'The root key of the music (e.g., "C", "G", "Am", "Dm")',
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    onRootKeyChange: {
+      description: 'Callback function called when the root key changes',
+      action: 'root-key-changed',
+      table: {
+        type: { summary: '(key: string) => void' },
+      },
+    },
+    onAiAutoDetectClick: {
+      description:
+        'Callback function called when the AI Auto Detect button is clicked',
+      action: 'ai-detect-clicked',
+      table: {
+        type: { summary: '() => void' },
+      },
+    },
+    loading: {
+      description: 'Whether the AI detection is currently in progress',
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    lastTimeDetected: {
+      description: 'Timestamp of the last successful AI detection',
+      control: false,
+      table: {
+        type: { summary: 'Date | null' },
+        defaultValue: { summary: 'null' },
+      },
+    },
+    i18n: {
+      description: 'Internationalization object with translation function',
+      control: false,
+      table: {
+        type: { summary: '{ _: (text: string) => string }' },
+        defaultValue: { summary: '{ _: (text) => text }' },
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    isAiAutoDetectActive: false,
+    bpm: 120,
+    timeSignatureTop: 4,
+    timeSignatureBottom: 4,
+    rootKey: 'C',
+    loading: false,
+    lastTimeDetected: null,
+    onAiAutoDetectToggle: fn(),
+    onTempoChange: fn(),
+    onTimeSignatureChange: fn(),
+    onRootKeyChange: fn(),
+    onAiAutoDetectClick: fn(),
+  },
+}
+
+export const WithAiAutoDetect = {
+  args: {
+    isAiAutoDetectActive: true,
+    bpm: 120,
+    timeSignatureTop: 4,
+    timeSignatureBottom: 4,
+    rootKey: 'G',
+    loading: false,
+    lastTimeDetected: new Date('2025-12-02T14:59:39.736Z'),
+    onAiAutoDetectToggle: fn(),
+    onTempoChange: fn(),
+    onTimeSignatureChange: fn(),
+    onRootKeyChange: fn(),
+    onAiAutoDetectClick: fn(),
+  },
+}
+
+export const LoadingState = {
+  args: {
+    isAiAutoDetectActive: true,
+    bpm: 120,
+    timeSignatureTop: 4,
+    timeSignatureBottom: 4,
+    rootKey: 'G',
+    loading: true,
+    lastTimeDetected: null,
+    onAiAutoDetectToggle: fn(),
+    onTempoChange: fn(),
+    onTimeSignatureChange: fn(),
+    onRootKeyChange: fn(),
+    onAiAutoDetectClick: fn(),
+  },
+}
+
+export const CustomTimeSignature = {
+  args: {
+    isAiAutoDetectActive: false,
+    bpm: 90,
+    timeSignatureTop: 14,
+    timeSignatureBottom: 16,
+    rootKey: 'G',
+    loading: false,
+    lastTimeDetected: null,
+    onAiAutoDetectToggle: fn(),
+    onTempoChange: fn(),
+    onTimeSignatureChange: fn(),
+    onRootKeyChange: fn(),
+    onAiAutoDetectClick: fn(),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example with a custom time signature (14/16) and root key G.',
+      },
+    },
+  },
+}