@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/MessageWithAction/MessageWithAction.stories.jsx

@@ -0,0 +1,280 @@
+import React from 'react'
+import { MessageWithAction } from './MessageWithAction'
+import { Flex, Text, Tooltip } from '@radix-ui/themes'
+import { InfoIcon } from '../../icons'
+
+export default {
+  title: 'Components/MessageWithAction',
+  component: MessageWithAction,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## Basic Usage
+
+### MessageWithAction
+
+\`\`\`jsx
+import { MessageWithAction } from '@moises.ai/design-system'
+
+<MessageWithAction 
+  type="error" 
+  message="This is an error message" 
+  ctaLabel="Add" 
+  onClick={() => {}} 
+/>
+\`\`\`
+
+## Component API
+
+### MessageWithAction Props
+
+\`\`\`tsx
+{
+  type: 'info' | 'warn' | 'error'; // Type of message
+  message?: string; // Message to display
+  ctaLabel?: string; // Label of the CTA button (optional)
+  onClick?: () => void; // Function to handle the CTA click (optional)
+  className?: string; // Additional CSS classes (optional)
+  showBackground?: boolean; // Whether to show background (default: true)
+  showIcon?: boolean; // Whether to show icon (default: true)
+  children?: React.ReactNode; // Custom content (optional)
+}
+\`\`\`
+
+## Variations
+
+### Message Types
+
+The component supports three types:
+
+\`\`\`jsx
+// Info message
+<MessageWithAction type="info" message="This is an info message" />
+
+// Warning message  
+<MessageWithAction type="warn" message="This is a warning message" />
+
+// Error message
+<MessageWithAction type="error" message="This is an error message" />
+\`\`\`
+
+### With Call-to-Action
+
+Add a button with custom action:
+
+\`\`\`jsx
+<MessageWithAction 
+  type="error" 
+  message="This is an error message" 
+  ctaLabel="Add" 
+  onClick={() => console.log('CTA clicked')} 
+/>
+\`\`\`
+
+### With Custom Content
+
+Use children prop for custom content:
+
+\`\`\`jsx
+<MessageWithAction type="info" showIcon={false}>
+  <Text>Custom content with formatting</Text>
+</MessageWithAction>
+\`\`\`
+
+### Without Background
+
+Remove the background styling:
+
+\`\`\`jsx
+<MessageWithAction 
+  type="info" 
+  message="Message without background" 
+  showBackground={false} 
+/>
+\`\`\`
+
+### Without Icon
+
+Hide the info icon:
+
+\`\`\`jsx
+<MessageWithAction 
+  type="warn" 
+  message="Warning without icon" 
+  showIcon={false} 
+/>
+\`\`\`
+        `,
+      },
+    },
+    canvas: {
+      width: 400,
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['info', 'warn', 'error'],
+      description: 'Type of message',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'info' },
+      },
+    },
+    message: {
+      control: 'text',
+      description: 'Message text to display',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    ctaLabel: {
+      control: 'text',
+      description: 'Label for the call-to-action button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    onClick: {
+      control: false,
+      description: 'Click handler for the CTA button',
+      table: {
+        type: { summary: '() => void' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    showBackground: {
+      control: 'boolean',
+      description: 'Whether to show background styling',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    showIcon: {
+      control: 'boolean',
+      description: 'Whether to show the info icon',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    children: {
+      control: false,
+      description: 'Custom content to display',
+      table: {
+        type: { summary: 'React.ReactNode' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+// Basic Stories
+export const Default = {
+  args: {
+    type: 'info',
+    message: 'This is a default info message',
+  },
+}
+
+export const Error = {
+  args: {
+    type: 'error',
+    message: 'This is an error message',
+    ctaLabel: 'Add',
+    onClick: () => alert('Error CTA clicked'),
+  },
+}
+
+export const Warning = {
+  args: {
+    type: 'warn',
+    message: 'This is a warning message',
+    ctaLabel: 'Fix',
+    onClick: () => alert('Warning CTA clicked'),
+  },
+}
+
+export const Info = {
+  args: {
+    type: 'info',
+    message: 'This is an info message',
+    ctaLabel: 'Learn More',
+    onClick: () => alert('Info CTA clicked'),
+  },
+}
+
+// Advanced Stories
+export const WithoutBackground = {
+  args: {
+    type: 'info',
+    message: 'This message has no background styling',
+    showBackground: false,
+  },
+}
+
+export const WithoutIcon = {
+  args: {
+    type: 'warn',
+    message: 'This message has no icon',
+    showIcon: false,
+  },
+}
+
+export const WithCustomContent = {
+  args: {
+    type: 'info',
+    showIcon: false,
+    children: (
+      <Text size="1">
+        This is custom content with <strong>formatting</strong>
+      </Text>
+    ),
+  },
+}
+
+export const ComplexContent = {
+  args: {
+    type: 'info',
+    showIcon: false,
+    showBackground: false,
+    children: (
+      <Flex align="center" gap="1">
+        <Text size="1">Using</Text>
+        <Flex align="center" gap="1">
+          <Text size="1" truncate style={{ maxWidth: '100px' }}>
+            My new song which contains a long name
+          </Text>
+          <Text size="1">(0:30 - 1:23)</Text>
+        </Flex>
+        <Text size="1">to generate</Text>
+        <Tooltip content="Additional information about this item">
+          <InfoIcon width={16} height={16} />
+        </Tooltip>
+      </Flex>
+    ),
+    ctaLabel: 'Add',
+    onClick: () => alert('Complex CTA clicked'),
+  },
+}

package/src/components/MetronomeForm/MetronomeForm.jsx

@@ -0,0 +1,74 @@
+import {
+  Button,
+  Flex,
+  HorizontalVolume,
+  SegmentedControl,
+  Separator,
+  Text,
+} from '../../index'
+
+export const MetronomeForm = ({
+  i18n = { _: (text) => text },
+  subDivision = 1,
+  volume,
+  countIn,
+  onSubDivisionChange,
+  onVolumeChange,
+  onCountInChange,
+  onReset,
+}) => {
+  return (
+    <Flex width="200px" direction="column">
+      <Flex gap="4" direction="column">
+        <Flex gap="2" direction="column">
+          <Text size="2" weight="medium">
+            {i18n._('Sub-division')}
+          </Text>
+          <SegmentedControl
+            items={[
+              { value: '0', label: '0.5x' },
+              { value: '1', label: '1x' },
+              { value: '2', label: '2x' },
+            ]}
+            selectedType={String(subDivision)}
+            handleTypeChange={onSubDivisionChange}
+          />
+        </Flex>
+
+        <Flex gap="2" direction="column">
+          <Text size="2" weight="medium">
+            {i18n._('Metronome volume')}
+          </Text>
+
+          <HorizontalVolume onChangeValue={onVolumeChange} volume={volume} />
+        </Flex>
+
+        <Flex gap="1" direction="column">
+          <Text size="2" weight="medium">
+            Count-in
+          </Text>
+          <SegmentedControl
+            items={[
+              { value: '0', label: i18n._('Off') },
+              { value: '1', label: i18n._('1 Bar') },
+              { value: '2', label: i18n._('2 Bars') },
+            ]}
+            handleTypeChange={onCountInChange}
+            selectedType={countIn.count.toString()}
+          />
+        </Flex>
+      </Flex>
+
+      <Separator mt="4" style={{ width: '100%' }} />
+
+      <Button
+        variant="ghost"
+        color="gray"
+        onClick={onReset}
+        style={{ width: '100%' }}
+      >
+        {i18n._('Reset')}
+      </Button>
+    </Flex>
+  )
+}

package/src/components/MetronomeForm/MetronomeForm.stories.jsx

@@ -0,0 +1,137 @@
+import { useState } from 'react'
+import { MetronomeForm } from './MetronomeForm'
+
+export default {
+  title: 'Features/MetronomeForm',
+  component: MetronomeForm,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## Metronome Component
+
+The Metronome component provides a visual metronome that can be used to control the tempo of a track. It includes a volume control and a count-in feature.
+
+### Features
+
+- **Volume Control**: Adjust the volume of the metronome
+- **Count-in**: Select the number of bars to count in before starting the metronome
+- **Sub-division**: Select the sub-division of the metronome
+
+### Usage
+
+\`\`\`jsx
+import { MetronomeForm } from '@moises.ai/design-system'
+
+<MetronomeForm
+  i18n={i18n}
+  countIn={countIn}
+  onCountInChange={onCountInChange}
+  onSubDivisionChange={onSubDivisionChange}
+  onVolumeChange={onVolumeChange}
+  onReset={onReset}
+/>
+\`\`\`  
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    metronomeTrack: {
+      control: 'object',
+      description: 'The metronome track object',
+    },
+    subDivision: {
+      control: 'number',
+      description: 'The sub-division of the metronome',
+    },
+    volume: {
+      control: 'number',
+      description: 'The volume of the metronome',
+    },
+    countIn: {
+      control: 'object',
+      description: 'The count-in object',
+    },
+    onSubDivisionChange: {
+      control: 'function',
+      description: 'The function to handle sub-division change',
+    },
+    onVolumeChange: {
+      control: 'function',
+      description: 'The function to handle volume change',
+    },
+    onCountInChange: {
+      control: 'function',
+      description: 'The function to handle count-in change',
+    },
+    onReset: {
+      control: 'function',
+      description: 'The function to handle reset',
+    },
+  },
+}
+
+export const Default = {
+  render: () => {
+    const [countIn, setCountInValue] = useState({
+      on: true,
+      count: '0',
+    })
+    const [subDivision, setSubDivision] = useState(1)
+    const [volume, setVolume] = useState(1)
+    const [isOpen, setIsOpen] = useState(false)
+    const i18n = {
+      _: (text) => text,
+    }
+    const metronomeTrack = {
+      id: 'metronome-1764773011079',
+      group: 'default',
+      solo: false,
+      muted: false,
+      volume: 1,
+      duration: 1200,
+      peaks: [[]],
+    }
+
+    const onCountInChange = (value) => {
+      setCountInValue((prev) => ({
+        ...prev,
+        count: value,
+      }))
+    }
+
+    const onTriggerClick = () => {
+      setIsOpen((prev) => !prev)
+    }
+
+    const onReset = () => {
+      onCountInChange('0')
+      setSubDivision(1)
+      setVolume(1)
+    }
+
+    const onSubDivisionChange = (value) => {
+      setSubDivision(value)
+    }
+
+    const onVolumeChange = (value) => {
+      setVolume(value)
+    }
+
+    return (
+      <MetronomeForm
+        i18n={i18n}
+        subDivision={subDivision}
+        volume={volume}
+        countIn={countIn}
+        onCountInChange={onCountInChange}
+        onSubDivisionChange={onSubDivisionChange}
+        onVolumeChange={onVolumeChange}
+        onReset={onReset}
+      />
+    )
+  },
+}

package/src/components/MultiSelect/MultiSelect.jsx

@@ -0,0 +1,129 @@
+import React, { useState, useCallback } from 'react'
+import {
+  Box,
+  Flex,
+  Text,
+  Select as SelectRadix,
+  Tooltip,
+} from '@radix-ui/themes'
+import { Checkbox } from '../Checkbox/Checkbox'
+import { InfoIcon } from '../../icons'
+import styles from './MultiSelect.module.css'
+import classNames from 'classnames'
+
+export const MultiSelect = ({
+  className,
+  title,
+  onChange,
+  items,
+  info,
+  size = '2',
+  variant = 'soft',
+  disabled = false,
+  readOnly = false,
+  maxHeight = 'auto',
+  maxWidth = '100%',
+  placeholder = 'Select options...',
+  ...props
+}) => {
+  const handleItemClick = (value) => {
+    if (onChange) {
+      onChange(value)
+    }
+  }
+
+  return (
+    <Box width="100%">
+      {title && (
+        <Flex mb="2" align="center" gap="2">
+          <Text size="1" weight="bold">
+            {title}
+          </Text>
+          {info && (
+            <Tooltip content={info}>
+              <InfoIcon />
+            </Tooltip>
+          )}
+        </Flex>
+      )}
+      <Flex direction="column" maxWidth={maxWidth}>
+        <SelectRadix.Root
+          className={classNames(className)}
+          disabled={disabled || readOnly}
+          {...props}
+        >
+          <SelectRadix.Trigger
+            variant={variant}
+            color="gray"
+            size={size}
+            placeholder={placeholder}
+            className={classNames(styles.selectTrigger, {
+              [styles.ghost]: variant === 'ghost',
+              [styles.soft]: variant === 'soft',
+            })}
+          >
+            {placeholder}
+          </SelectRadix.Trigger>
+          <SelectRadix.Content position="popper" style={{ height: maxHeight }}>
+            <SelectRadix.Group>
+              {items.map((item) => (
+                <Flex
+                  key={item.value}
+                  align="center"
+                  gap="2"
+                  p="2"
+                  className={classNames(styles.selectItem, {
+                    [styles.hideIndicator]: true,
+                    [styles.size1]: size === '1',
+                    [styles.size2]: size === '2',
+                  })}
+                  onClick={() => handleItemClick(item.value)}
+                  style={{
+                    cursor: disabled || readOnly ? 'not-allowed' : 'pointer',
+                    width: '100%',
+                  }}
+                >
+                  <Checkbox
+                    disabled={disabled || readOnly}
+                    checked={item.isActived || false}
+                    size={size}
+                  />
+                  <Flex align="center" gap="1" style={{ flex: 1 }}>
+                    <Text size={size} style={{ color: 'var(--neutral-12)' }}>
+                      {item.label}
+                    </Text>
+                    {item.aiDetected && (
+                      <Text
+                        size="1"
+                        style={{
+                          color: 'var(--aqua-dark-alpha-9)',
+                          verticalAlign: 'top',
+                        }}
+                      >
+                        ✦
+                      </Text>
+                    )}
+                    {item.extra && (
+                      <Text
+                        size={size}
+                        className={styles.extra}
+                        style={{
+                          color: 'var(--neutral-alpha-9)',
+                        }}
+                      >
+                        {' '}
+                        {item.extra}
+                      </Text>
+                    )}
+                  </Flex>
+                </Flex>
+              ))}
+            </SelectRadix.Group>
+          </SelectRadix.Content>
+        </SelectRadix.Root>
+      </Flex>
+    </Box>
+  )
+}
+
+MultiSelect.displayName = 'MultiSelect'