@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/TempoControlsForm/TempoForm/TempoForm.jsx

@@ -0,0 +1,94 @@
+import { memo, useCallback } from 'react'
+import { Flex } from '@radix-ui/themes'
+import { Select } from '../../Select/Select'
+import { Text } from '../../Text/Text'
+
+import { TempoFormInput } from '../TempoFormInput/TempoFormInput'
+
+import {
+  ROOT_KEYS,
+  TIME_SIGNATURE_TOP_ITEMS,
+  TIME_SIGNATURE_BOTTOM_ITEMS,
+} from '../constants'
+
+export const TempoForm = memo(
+  ({
+    onTempoChange,
+    onTimeSignatureChange,
+    bpm,
+    timeSignatureTop,
+    timeSignatureBottom,
+    rootKey,
+    onRootKeyChange,
+    i18n = { _: (text) => text },
+  }) => {
+    const handleTimeSignatureTopChange = useCallback(
+      (value) => {
+        onTimeSignatureChange({
+          top: parseInt(value),
+          bottom: timeSignatureBottom,
+        })
+      },
+      [onTimeSignatureChange, timeSignatureBottom],
+    )
+
+    const handleTimeSignatureBottomChange = useCallback(
+      (value) => {
+        onTimeSignatureChange({
+          top: timeSignatureTop,
+          bottom: parseInt(value),
+        })
+      },
+      [onTimeSignatureChange, timeSignatureTop],
+    )
+
+    const rootKeyItems = ROOT_KEYS.map((note) => ({
+      value: note,
+      label: note,
+    }))
+
+    return (
+      <>
+        <TempoFormInput bpm={bpm} onTempoChange={onTempoChange} i18n={i18n} />
+
+        <Flex gap="1" mt="4" direction="column">
+          <Text size="2">{i18n._('Time signature')}</Text>
+
+          <Flex width="100%" gap="1" align="center">
+            <Select
+              defaultValue={timeSignatureTop?.toString()}
+              onChange={handleTimeSignatureTopChange}
+              size="2"
+              items={TIME_SIGNATURE_TOP_ITEMS}
+            />
+
+            <Text size="2">/</Text>
+
+            <Select
+              defaultValue={timeSignatureBottom?.toString()}
+              onChange={handleTimeSignatureBottomChange}
+              size="2"
+              items={TIME_SIGNATURE_BOTTOM_ITEMS}
+            />
+          </Flex>
+        </Flex>
+
+        <Flex gap="1" mt="4" direction="column">
+          <Text size="2">{i18n._('Root Key')}</Text>
+
+          <Flex width="100%" gap="1" align="center">
+            <Select
+              value={rootKey}
+              onChange={onRootKeyChange}
+              items={rootKeyItems}
+              placeholder={i18n._('Select root')}
+              size="2"
+              variant="soft"
+              maxHeight="300px"
+            />
+          </Flex>
+        </Flex>
+      </>
+    )
+  },
+)

package/src/components/TempoControlsForm/TempoFormInput/TempoFormInput.jsx

@@ -0,0 +1,136 @@
+import { memo, useCallback, useState } from 'react'
+import { Flex } from '@radix-ui/themes'
+import { TextField } from '../../TextField/TextField'
+import { IconButton } from '../../IconButton/IconButton'
+import { Text } from '../../Text/Text'
+import { MinusIcon, PlusIcon } from '../../../icons'
+import { getTempoMarking } from '../utils/getTempoMarking'
+import { MAX_VALUE_BPM, MIN_VALUE_BPM } from '../constants'
+import styles from './TempoFormInput.module.css'
+
+export const TempoFormInput = memo(
+  ({ bpm, onTempoChange, i18n = { _: (text) => text } }) => {
+    const [localBpm, setLocalBpm] = useState(bpm)
+
+    const handleIncrement = useCallback(() => {
+      const currentBpm = parseInt(localBpm) || MIN_VALUE_BPM
+      const newBpm = currentBpm + 1
+
+      if (newBpm > MAX_VALUE_BPM) {
+        return
+      }
+
+      setLocalBpm(newBpm)
+      onTempoChange(newBpm)
+    }, [localBpm, onTempoChange])
+
+    const handleDecrement = useCallback(() => {
+      const currentBpm = parseInt(localBpm) || MIN_VALUE_BPM
+      const newBpm = currentBpm - 1
+
+      if (newBpm < MIN_VALUE_BPM) {
+        return
+      }
+
+      setLocalBpm(newBpm)
+      onTempoChange(newBpm)
+    }, [localBpm, onTempoChange])
+
+    const normalizeBpmValue = useCallback((value) => {
+      const numValue = parseInt(value, 10)
+
+      if (isNaN(numValue)) {
+        return MIN_VALUE_BPM
+      }
+
+      if (numValue < MIN_VALUE_BPM) {
+        return MIN_VALUE_BPM
+      }
+
+      if (numValue > MAX_VALUE_BPM) {
+        return MAX_VALUE_BPM
+      }
+
+      return numValue
+    }, [])
+
+    const handleBpmChange = useCallback((e) => {
+      const value = e.target.value
+      // this is to allow empty string during typing - to fix NaN error
+      if (value === '' || /^\d+$/.test(value)) {
+        setLocalBpm(value)
+      }
+    }, [])
+
+    const handleBpmBlur = useCallback(
+      (e) => {
+        const normalizedBpm = normalizeBpmValue(e.target.value)
+        setLocalBpm(normalizedBpm)
+
+        onTempoChange(normalizedBpm)
+      },
+      [normalizeBpmValue, onTempoChange],
+    )
+
+    const handleBpmKeyDown = useCallback(
+      (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault()
+          const normalizedBpm = normalizeBpmValue(e.target.value)
+          setLocalBpm(normalizedBpm)
+
+          onTempoChange(normalizedBpm)
+        }
+      },
+      [normalizeBpmValue, onTempoChange],
+    )
+
+    return (
+      <>
+        <Flex mb="2" mt="3" width="100%" justify="between" align="center">
+          <Flex align="center" gap="2">
+            <Text size="2" weight="medium">
+              {i18n._('Tempo')}
+            </Text>
+          </Flex>
+          <Text
+            size="2"
+            weight="regular"
+            style={{ color: 'var(--neutral-alpha-9)' }}
+          >
+            {getTempoMarking(parseInt(bpm))}
+          </Text>
+        </Flex>
+
+        <Flex gap="1" align="center" justify="center">
+          <IconButton
+            onClick={handleDecrement}
+            className={styles.button}
+            variant="soft"
+          >
+            <MinusIcon width={16} height={16} />
+          </IconButton>
+
+          <Flex className={styles.counter}>
+            <TextField
+              size="2"
+              value={localBpm}
+              onChange={handleBpmChange}
+              onBlur={handleBpmBlur}
+              onKeyDown={handleBpmKeyDown}
+              style={{ textAlign: 'center' }}
+            />
+          </Flex>
+
+          <IconButton
+            variant="soft"
+            onClick={handleIncrement}
+            className={styles.button}
+          >
+            <PlusIcon width={16} height={16} />
+          </IconButton>
+        </Flex>
+      </>
+    )
+  },
+)

package/src/components/TempoControlsForm/TempoFormInput/TempoFormInput.module.css

@@ -0,0 +1,19 @@
+.button {
+    border: none;
+    border-radius: 6px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.counter {
+    background-color: var(--neutral-alpha-2);
+    border-radius: 6px;
+    height: 32px;
+    min-width: 60px;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+}

package/src/components/TempoControlsForm/constants.js

@@ -0,0 +1,77 @@
+export const MIN_VALUE_BPM = 30
+export const MAX_VALUE_BPM = 200
+
+// Array of BPM ranges and their corresponding markings
+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: Infinity, marking: 'Prestissimo' },
+]
+
+export const ROOT_KEYS = [
+  'C',
+  'Db',
+  'D',
+  'Eb',
+  'E',
+  'F',
+  'Gb',
+  'G',
+  'Ab',
+  'A',
+  'Bb',
+  'B',
+  'Cm',
+  'C#m',
+  'Dm',
+  'Ebm',
+  'Em',
+  'Fm',
+  'F#m',
+  'Gm',
+  'G#m',
+  'Am',
+  'Bbm',
+  'Bm',
+]
+
+export const TIME_SIGNATURE_TOP_ITEMS = [
+  { label: '2', value: '2' },
+  { label: '3', value: '3' },
+  { label: '4', value: '4' },
+  { label: '5', value: '5' },
+  { label: '6', value: '6' },
+  { label: '7', value: '7' },
+  { label: '8', value: '8' },
+  { label: '9', value: '9' },
+  { label: '10', value: '10' },
+  { label: '11', value: '11' },
+  { label: '12', value: '12' },
+  { label: '13', value: '13' },
+  { label: '14', value: '14' },
+  { label: '15', value: '15' },
+  { label: '16', value: '16' },
+]
+
+export const TIME_SIGNATURE_BOTTOM_ITEMS = [
+  { label: '2', value: '2' },
+  { label: '4', value: '4' },
+  { label: '8', value: '8' },
+  { label: '16', value: '16' },
+]

package/src/components/TempoControlsForm/utils/formatDateTime.js

@@ -0,0 +1,50 @@
+export const formatDateTime = (isoString) => {
+  const date = new Date(isoString)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffSeconds = Math.floor(diffMs / 1000)
+  const diffMinutes = Math.floor(diffSeconds / 60)
+  const diffHours = Math.floor(diffMinutes / 60)
+  const diffDays = Math.floor(diffHours / 24)
+
+  // Less than 1 day old
+  if (diffDays === 0) {
+    if (diffSeconds < 60) {
+      return 'a few seconds ago'
+    } else if (diffMinutes < 60) {
+      return `${diffMinutes} minute${diffMinutes !== 1 ? 's' : ''} ago`
+    } else {
+      const remainingMinutes = diffMinutes % 60
+      if (remainingMinutes === 0) {
+        return `${diffHours} hour${diffHours !== 1 ? 's' : ''} ago`
+      } else {
+        return `${diffHours} hour${
+          diffHours !== 1 ? 's' : ''
+        } ${remainingMinutes} minute${remainingMinutes !== 1 ? 's' : ''} ago`
+      }
+    }
+  }
+
+  // Exactly 1 day old
+  if (diffDays === 1) {
+    return `yesterday at ${date.toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    })}`
+  }
+
+  // More than 1 day old
+  const currentYear = now.getFullYear()
+  const dateYear = date.getFullYear()
+  const includeYear = dateYear !== currentYear
+
+  return date.toLocaleString([], {
+    year: includeYear ? 'numeric' : undefined,
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  })
+}

package/src/components/TempoControlsForm/utils/getTempoMarking.js

@@ -0,0 +1,6 @@
+import { TEMPO_RANGES } from '../constants'
+
+export const getTempoMarking = (bpm) => {
+  const tempoRange = TEMPO_RANGES.find((range) => bpm <= range.maxBpm)
+  return tempoRange ? tempoRange.marking : 'Prestissimo'
+}

package/src/components/Text/Text.jsx

@@ -0,0 +1,19 @@
+import { Text as TextRadix } from '@radix-ui/themes'
+import styles from './Text.module.css'
+import classNames from 'classnames'
+
+export const Text = ({ size, className, children, ...props }) => {
+  const isCustomSize = size === '0'
+
+  return (
+    <TextRadix
+      size={isCustomSize ? undefined : size}
+      className={classNames(className, isCustomSize && styles.textSize0)}
+      {...props}
+    >
+      {children}
+    </TextRadix>
+  )
+}
+
+Text.displayName = 'Text'

package/src/components/Text/Text.module.css

@@ -0,0 +1,5 @@
+.textSize0 {
+  font-size: 11px !important;
+  letter-spacing: 0em !important;
+  line-height: 11px !important;
+} 

package/src/components/Text/Text.stories.jsx

@@ -0,0 +1,117 @@
+import React from 'react'
+import { Text } from './Text'
+import { Flex } from '@radix-ui/themes'
+
+export default {
+  title: 'Components/Text',
+  component: Text,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+ Text component 
+## Usage
+
+\`\`\`jsx
+import { Text } from '@moises.ai/design-system'
+
+<Text size="1">Small text</Text>
+<Text size="2">Medium text</Text>
+<Text size="3">Large text</Text>
+<Text size="0">Custom small text (11px)</Text>
+
+\`\`\`
+
+## Supported Props
+
+
+- **size**: '0' | '1' | '2' | '3' 
+- **weight**: 'light' | 'regular' | 'medium' | 'bold'
+- **align**: 'left' | 'center' | 'right'
+- **trim**: 'normal' | 'start' | 'end' | 'both'
+- **wrap**: 'wrap' | 'nowrap' | 'pretty' | 'balance'
+- **highContrast**: boolean
+- **truncate**: boolean
+- **as**: 'span' | 'div' | 'label' | 'p'
+- **asChild**: boolean
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['0', '1', '2', '3'],
+      description: 'Size of the text. Size "0" is custom with 11px font-size',
+    },
+    weight: {
+      control: 'select',
+      options: ['light', 'regular', 'medium', 'bold'],
+      description: 'Font weight',
+    },
+    align: {
+      control: 'select',
+      options: ['left', 'center', 'right'],
+      description: 'Text alignment',
+    },
+    trim: {
+      control: 'select',
+      options: ['normal', 'start', 'end', 'both'],
+      description: 'Text trimming',
+    },
+    wrap: {
+      control: 'select',
+      options: ['wrap', 'nowrap', 'pretty', 'balance'],
+      description: 'Text wrapping',
+    },
+    highContrast: {
+      control: 'boolean',
+      description: 'High contrast mode',
+    },
+    truncate: {
+      control: 'boolean',
+      description: 'Truncate text with ellipsis',
+    },
+    as: {
+      control: 'select',
+      options: ['span', 'div', 'label', 'p'],
+      description: 'HTML element to render',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    children: 'This is default text',
+    size: '2',
+  },
+}
+
+export const AllSizes = {
+  render: () => (
+    <Flex direction="column" gap="3" align="start">
+      <Text size="0">Size 0 - Custom (11px)</Text>
+      <Text size="1">Size 1 - Small</Text>
+      <Text size="2">Size 2 - Medium</Text>
+      <Text size="3">Size 3 - Large</Text>
+    </Flex>
+  ),
+}
+
+export const WithWeights = {
+  render: () => (
+    <Flex direction="column" gap="3" align="start">
+      <Text size="0" weight="regular">
+        Size 0 - Regular
+      </Text>
+      <Text size="0" weight="medium">
+        Size 0 - Medium
+      </Text>
+      <Text size="0" weight="bold">
+        Size 0 - Bold
+      </Text>
+    </Flex>
+  ),
+}

package/src/components/TextArea/TextArea.jsx

@@ -0,0 +1,53 @@
+import { Flex, Text, TextArea as TextAreaRadix } from '@radix-ui/themes'
+import { TooltipWithInfoIcon } from '../TooltipWithInfoIcon/TooltipWithInfoIcon'
+import styles from './TextArea.module.css'
+import classNames from 'classnames'
+
+export const TextArea = ({
+  value,
+  onChange,
+  placeholder,
+  title,
+  info,
+  className,
+  variant = 'classic',
+  resize = 'none',
+  disabled = false,
+  size = '2',
+  focusRing = false,
+  ...props
+}) => {
+  return (
+    <Flex direction="column" width="100%" height="100%" gap="1">
+      {title && (
+        <Flex align="center" gap="2">
+          <Text size={size} weight="medium">
+            {title}
+          </Text>
+          {info && <TooltipWithInfoIcon content={info} />}
+        </Flex>
+      )}
+      <Flex className={styles.fullSize} style={{ flex: 1 }}>
+        <TextAreaRadix
+          size={size}
+          variant={variant}
+          radius="3"
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={classNames(styles.textArea, className, {
+            [styles.variantClassic]: variant === 'classic',
+            [styles.variantSoft]: variant === 'soft',
+            [styles.disabled]: disabled,
+            [styles.focusRing]: focusRing,
+          })}
+          resize={resize}
+          {...props}
+        />
+      </Flex>
+    </Flex>
+  )
+}
+
+TextArea.displayName = 'TextArea'

package/src/components/TextArea/TextArea.module.css

@@ -0,0 +1,35 @@
+.textArea {
+  color: var(--neutral-12);
+  box-shadow: none;
+  width: 100%;
+  height: 100%;
+
+  &:where(:focus-within) {
+    outline: none;
+  }
+}
+
+.variantClassic {
+  background-color: transparent !important;
+}
+
+.variantSoft {
+  background-color: var(--neutral-alpha-3) !important;
+}
+
+.textArea textarea::placeholder {
+  color: var(--neutral-alpha-9) !important;
+  -webkit-text-fill-color: var(--neutral-alpha-9) !important;
+}
+
+.rt-TextAreaInput:where(:disabled, :read-only){
+  color: var(--neutral-alpha-9) !important;
+  -webkit-text-fill-color: var(--neutral-alpha-9) !important;
+  background-color: var(--neutral-alpha-3) !important;
+
+}
+
+.focusRing:where(:focus-within) {
+  outline: 1px solid var(--accent-a8);
+  outline-offset: -1px;
+}