@moises.ai/design-system 3.7.3 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.7.3",
+  "version": "3.9.0",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/EmptyState/EmptyState.jsx

@@ -0,0 +1,88 @@
+import { Flex } from '@radix-ui/themes'
+import { Button } from '../Button/Button'
+import styles from './EmptyState.module.css'
+import classNames from 'classnames'
+import { Text } from '../Text/Text'
+
+// Emphasis: Low  High
+// Size:  Medium  Large
+export const EmptyState = ({
+  title = 'Title',
+  secondaryText = 'Secondary text',
+  buttonLabel = 'Button',
+  onButtonClick,
+  icon,
+  showIcon = true,
+  showSecondaryText = true,
+  showButton = true,
+  className,
+  titleMultiline = false,
+  emphasis = 'low',
+  size = 'medium',
+  children,
+  ...props
+}) => {
+  const hasButtonContent = children != null || buttonLabel != null
+  return (
+    <Flex
+      className={classNames(className)}
+      direction="column"
+      align="center"
+      justify="center"
+      {...props}
+    >
+      <Flex direction="column" align="center" justify="center" className={styles.content} gap="5" py="6">
+        {showIcon && (
+          <div className={classNames(styles.iconWrapper, {
+            [styles.iconWrapperLarge]: size === 'large',
+            [styles.iconWrapperMedium]: size === 'medium',
+            [styles.iconWrapperLow]: emphasis === 'low',
+            [styles.iconWrapperHigh]: emphasis === 'high',
+          })} aria-hidden>
+            {icon}
+          </div>
+        )}
+        <Flex direction="column" align="center" justify="center" className={styles.textGroup} gap="2">
+          <Text
+            size={size === 'large' ? '7' : '4'}
+            weight="medium"
+            className={classNames({
+              [styles.titleMultiline]: titleMultiline,
+              [styles.titleLow]: emphasis === 'low',
+              [styles.titleHigh]: emphasis === 'high',
+            })}
+          >
+            {title}
+          </Text>
+          {showSecondaryText && secondaryText != null && (
+            <Text
+              size={size === 'large' ? '3' : '2'}
+              weight="regular"
+              className={classNames(styles.secondaryText, {
+                [styles.secondaryTextLow]: emphasis === 'low',
+                [styles.secondaryTextHigh]: emphasis === 'high',
+              })}
+            >{secondaryText}</Text>
+          )}
+        </Flex>
+        {showButton && hasButtonContent && (
+          <div>
+            {children ?? (
+              <Button
+                size={size === 'large' ? '3' : '2'}
+                variant={emphasis === 'low' ? 'soft' : 'solid'}
+                onClick={onButtonClick}
+                aria-label={buttonLabel}
+              >
+                {buttonLabel}
+              </Button>
+            )}
+          </div>
+        )}
+
+      </Flex>
+    </Flex>
+  )
+}
+
+EmptyState.displayName = 'EmptyState'

package/src/components/EmptyState/EmptyState.module.css

@@ -0,0 +1,91 @@
+
+.content {
+
+  max-width: 480px;
+  min-width: 320px;
+  width: 100%;
+
+}
+
+.iconWrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--neutral-alpha-9);
+}
+
+.iconWrapperLarge {
+  width: 32px;
+  height: 32px;
+
+  svg {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+.iconWrapperMedium {
+  width: 24px;
+  height: 24px;
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.iconWrapperLow {
+  color: var(--neutral-alpha-10);
+}
+
+.iconWrapperHigh {
+  color: var(--neutral-alpha-12);
+}
+.textGroup {
+  width: 100%;
+}
+
+.title {
+  font-family: inherit;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 26px;
+  letter-spacing: -0.04px;
+  color: var(--neutral-alpha-10);
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.titleMultiline {
+  white-space: normal;
+}
+
+.titleLow {
+  color: var(--neutral-alpha-10);
+}
+
+.titleHigh {
+  color: var(--neutral-alpha-12);
+}
+
+.secondaryText {
+  font-family: inherit;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0;
+  text-align: center;
+  width: 100%;
+}
+
+
+.secondaryTextLow {
+  color: var(--neutral-alpha-9);
+}
+
+.secondaryTextHigh {
+  color: var(--neutral-alpha-11);
+}

package/src/components/EmptyState/EmptyState.stories.jsx

@@ -0,0 +1,192 @@
+import { EmptyState } from './EmptyState'
+import { InfoCircledIcon } from '@radix-ui/react-icons'
+
+export default {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## EmptyState
+
+Displays an empty state with icon, title, secondary text, and optional action. Aligned with the design system (Figma) with **emphasis** and **size** variants.
+
+### Usage
+
+\`\`\`jsx
+import { EmptyState } from '@moises.ai/design-system'
+import { InfoCircledIcon } from '@radix-ui/react-icons'
+
+// Default: low emphasis, medium size
+<EmptyState
+  title="No items in your setlist"
+  secondaryText="Add tracks from your library or search for songs."
+  buttonLabel="Add track"
+  onButtonClick={() => openLibrary()}
+  icon={<InfoCircledIcon />}
+/>
+
+// High emphasis, large size
+<EmptyState
+  title="No projects"
+  secondaryText="Create your first project to get started."
+  buttonLabel="Create project"
+  emphasis="high"
+  size="large"
+  icon={<PlusIcon />}
+  onButtonClick={() => createProject()}
+/>
+
+// No button, message only
+<EmptyState
+  title="No results"
+  secondaryText="Try different search terms."
+  showButton={false}
+  icon={<MagnifyingGlassIcon />}
+/>
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Main title displayed in the empty state.',
+    },
+    secondaryText: {
+      control: 'text',
+      description: 'Supporting secondary text.',
+    },
+    buttonLabel: {
+      control: 'text',
+      description: 'Action button label.',
+    },
+    onButtonClick: {
+      action: 'clicked',
+      description: 'Called when the button is clicked.',
+    },
+    icon: {
+      description: 'Icon displayed above the title (e.g. InfoCircledIcon).',
+    },
+    showIcon: {
+      control: 'boolean',
+      description: 'Show or hide the icon.',
+    },
+    showSecondaryText: {
+      control: 'boolean',
+      description: 'Show or hide the secondary text.',
+    },
+    showButton: {
+      control: 'boolean',
+      description: 'Show or hide the button (or action area).',
+    },
+    emphasis: {
+      control: 'select',
+      options: ['low', 'high'],
+      description: "Visual emphasis: 'low' (subtle, soft button) or 'high' (prominent, solid button).",
+    },
+    size: {
+      control: 'select',
+      options: ['medium', 'large'],
+      description: "Size: 'medium' (24px icon, smaller text) or 'large' (32px icon, larger text).",
+    },
+    titleMultiline: {
+      control: 'boolean',
+      description: 'Allow the title to wrap to multiple lines.',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    title: 'Title',
+    secondaryText: 'Secondary text',
+    buttonLabel: 'Button',
+    showIcon: true,
+    showSecondaryText: true,
+    showButton: true,
+    emphasis: 'low',
+    size: 'medium',
+    icon: <InfoCircledIcon />,
+  },
+}
+
+export const EmphasisHigh = {
+  args: {
+    ...Default.args,
+    title: 'No items found',
+    secondaryText: 'Try adjusting filters or searching for a different term.',
+    buttonLabel: 'Clear filters',
+    emphasis: 'high',
+    icon: <InfoCircledIcon />,
+  },
+}
+
+export const SizeLarge = {
+  args: {
+    ...Default.args,
+    title: 'Your setlist is empty',
+    secondaryText: 'Add tracks from your library or search for songs to get started.',
+    buttonLabel: 'Add track',
+    size: 'large',
+    icon: <InfoCircledIcon />,
+  },
+}
+
+export const LargeAndHighEmphasis = {
+  args: {
+    ...Default.args,
+    title: 'No projects yet',
+    secondaryText: 'Create your first project to get started.',
+    buttonLabel: 'Create project',
+    size: 'large',
+    emphasis: 'high',
+    icon: <InfoCircledIcon />,
+  },
+}
+
+export const WithCustomIcon = {
+  args: {
+    ...Default.args,
+    icon: <InfoCircledIcon />,
+  },
+}
+
+export const NoIcon = {
+  args: {
+    ...Default.args,
+    showIcon: false,
+  },
+}
+
+export const NoSecondaryText = {
+  args: {
+    ...Default.args,
+    showSecondaryText: false,
+    icon: <InfoCircledIcon />,
+  },
+}
+
+export const NoButton = {
+  args: {
+    ...Default.args,
+    showButton: false,
+    icon: <InfoCircledIcon />,
+  },
+}
+
+export const LongTitle = {
+  args: {
+    ...Default.args,
+    title: 'No items in your setlist yet',
+    secondaryText:
+      'Add tracks from your library or search for songs to get started.',
+    buttonLabel: 'Add track',
+    titleMultiline: true,
+    icon: <InfoCircledIcon />,
+  },
+}

package/src/components/NumberPicker/NumberPicker.jsx

@@ -0,0 +1,71 @@
+import { useCallback } from 'react'
+import { Flex } from '@radix-ui/themes'
+import { MinusIcon, PlusIcon } from '../../icons'
+import { IconButton } from '../IconButton/IconButton'
+import { Text } from '../Text/Text'
+
+export const NumberPicker = ({
+  label,
+  value = 0,
+  min = 0,
+  max = 10,
+  onChange,
+}) => {
+  const onIncrement = useCallback((e) => {
+    e.stopPropagation()
+    if (max != null && value >= max) return
+    onChange(value + 1)
+  }, [max, onChange, value])
+
+  const onDecrement = useCallback((e) => {
+    e.stopPropagation()
+    if (min != null && value <= min) return
+    onChange(value - 1)
+  }, [min, onChange, value])
+
+  return (
+    <Flex direction="row" gap="1" align="center" justify="center">
+      {label && (
+        <Text size="2" weight="medium">
+          {label}
+        </Text>
+      )}
+      <Flex direction="row" gap="1" align="center" justify="center">
+        <IconButton
+          type="button"
+          aria-label="increment"
+          onClick={onDecrement}
+          style={{
+            backgroundColor: 'var(--neutral-alpha-3 )',
+          }}
+        >
+          <MinusIcon width={16} height={16} />
+        </IconButton>
+
+        <Flex
+          align="center"
+          justify="center"
+          style={{
+            height: '24px',
+            minWidth: '42px',
+            borderRadius: 'var(--radius-2)',
+            backgroundColor: 'var(--neutral-alpha-3 )',
+          }}
+        >
+          <Text size="2">{value > 0 ? `+${value}` : value}</Text>
+        </Flex>
+
+        <IconButton
+          type="button"
+          aria-label="decrement"
+          onClick={onIncrement}
+          style={{
+            backgroundColor: 'var(--neutral-alpha-3 )',
+          }}
+        >
+          <PlusIcon width={16} height={16} />
+        </IconButton>
+      </Flex>
+    </Flex>
+  )
+}

package/src/components/NumberPicker/NumberPicker.stories.jsx

@@ -0,0 +1,63 @@
+import { useState } from 'react'
+import { NumberPicker } from './NumberPicker'
+
+export default {
+  title: 'Components/NumberPicker',
+  component: NumberPicker,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    value: { control: 'number' },
+    min: { control: 'number' },
+    max: { control: 'number' },
+  },
+}
+
+export const Default = {
+  args: {
+    label: 'Number',
+    value: 0,
+    min: -10,
+    max: 10,
+  },
+  render: (args) => {
+    const [value, setValue] = useState(args.value)
+    const handleChange = (newValue) => {
+      console.log('handleChange. new value:', newValue)
+      setValue(parseInt(newValue))
+    }
+    return (
+      <NumberPicker
+        label={args.label}
+        value={value}
+        min={args.min}
+        max={args.max}
+        onChange={handleChange}
+      />
+    )
+  },
+}
+
+export const WithoutLabel = {
+  args: {
+    value: 0,
+    min: -10,
+    max: 10,
+  },
+  render: (args) => {
+    const [value, setValue] = useState(args.value)
+    const handleChange = (newValue) => {
+      console.log('handleChange. new value:', newValue)
+      setValue(parseInt(newValue))
+    }
+    return (
+      <NumberPicker
+        label={args.label}
+        value={value}
+        min={args.min}
+        max={args.max}
+        onChange={handleChange}
+      />
+    )
+  },
+}

package/src/components/ProjectsList/ProjectItem/ProjectItem.jsx

@@ -69,9 +69,17 @@ const ProjectItem = ({
           <ProductsBrandPattern type={type} cover={cover} size="48px" />
         </Flex>
 
-        <Flex direction="column" gap="1" align="start" justify="center">
-          <Text size="2" className={styles.projectTitle}>
-            {title}
+        <Flex
+          direction="column"
+          gap="1"
+          align="start"
+          justify="center"
+          style={{ flex: 1, minWidth: 0 }}
+        >
+          <Text size="2" asChild>
+            <span className={styles.projectTitle}>
+              {title}
+            </span>
           </Text>
 
           {failed ? (
@@ -80,8 +88,10 @@ const ProjectItem = ({
               <Text size="1">Failed</Text>
             </Flex>
           ) : artist && (
-            <Text size="1" className={styles.projectArtist}>
-              {artist}
+            <Text size="1" asChild>
+              <span className={styles.projectArtist}>
+                {artist}
+              </span>
             </Text>
           )}
         </Flex>

package/src/components/ProjectsList/ProjectItem/ProjectItem.module.css

@@ -1,10 +1,22 @@
 .projectTitle {
   color: var(--neutral-12);
   padding-right: var(--space-2);
+  display: block;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .projectArtist {
   color: var(--neutral-alpha-9);
+  display: block;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .projectFailed {

package/src/components/ProjectsList/ProjectTrack/ProjectTrack.jsx

@@ -31,9 +31,17 @@ const ProjectTrack = ({
           <ArrowLeftIcon width={16} height={16} className={styles.iconArrowLeft} />
         </div>
 
-        <Flex direction="column" gap="1" align="start" justify="center">
-          <Text size="2" className={styles.trackTitle}>
-            {title}
+        <Flex
+          direction="column"
+          gap="1"
+          align="start"
+          justify="center"
+          style={{ flex: 1, minWidth: 0 }}
+        >
+          <Text size="2" asChild>
+            <span className={styles.trackTitle}>
+              {title}
+            </span>
           </Text>
         </Flex>
       </Flex>

package/src/components/ProjectsList/ProjectTrack/ProjectTrack.module.css

@@ -22,6 +22,12 @@
 
 .trackTitle {
   color: var(--neutral-alpha-12);
+  display: block;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .icon {
@@ -32,4 +38,5 @@
   justify-content: center;
   background: var(--neutral-alpha-2);
   border-radius: var(--radius-3);
+  color: var(--neutral-alpha-10);
 }

package/src/components/ProjectsList/ProjectTrackVoice/ProjectTrackVoice.jsx

@@ -0,0 +1,88 @@
+import { Flex, Text } from '@radix-ui/themes'
+import { useCallback, useContext, useMemo, useState } from 'react'
+import { ArrowLeftIcon } from '../../../icons'
+import { ProjectsListContext } from '../context'
+import { NumberPicker } from '../../NumberPicker/NumberPicker'
+import { UserIcon } from '../../../icons'
+import styles from './ProjectTrackVoice.module.css'
+
+const ProjectTrackVoice = ({
+  ...props
+}) => {
+  const { onClickTrack } = useContext(ProjectsListContext)
+  const { id, title, cover, transfers, audioUrl, onChangeTransfer } = props
+
+  const hasTransfers = useMemo(() => transfers && transfers.length > 0, [transfers])
+
+  const [pitchShiftSelected, setpitchShiftSelected] = useState(hasTransfers ? parseInt(transfers?.[0]?.pitchShift ?? 0) : 0)
+  const min = useMemo(() => hasTransfers ? Math.min(...transfers?.map((transfer) => parseInt(transfer.pitchShift))) : 0, [transfers])
+  const max = useMemo(() => hasTransfers ? Math.max(...transfers?.map((transfer) => parseInt(transfer.pitchShift))) : 0, [transfers])
+
+  const getAudioUrl = useCallback((pitchShift) => {
+    return hasTransfers ? transfers?.find((transfer) => parseInt(transfer.pitchShift) === pitchShift)?.audioUrl : audioUrl
+  }, [hasTransfers, transfers, audioUrl])
+
+  const handleChangeTransfer = useCallback((value) => {
+    setpitchShiftSelected(value)
+    onChangeTransfer?.({
+      id,
+      title,
+      audioUrl: getAudioUrl(value),
+    })
+  }, [onChangeTransfer, id, title, transfers])
+
+  const handleClickTrack = useCallback((e) => {
+    e.stopPropagation()
+    onClickTrack?.({
+      id,
+      title,
+      audioUrl: getAudioUrl(pitchShiftSelected),
+    })
+  }, [onClickTrack, id, title, getAudioUrl, pitchShiftSelected])
+
+  return (
+    <Flex direction="column" gap="1">
+      <Flex
+        direction="row"
+        gap="3"
+        className={styles.itemTrack}
+        onClick={handleClickTrack}
+      >
+        <div className={styles.cover}>
+          <Flex className={styles.coverImage}>
+            {cover
+              ? <img src={cover} alt={title} width={48} height={48} />
+              : <UserIcon width={16} height={16} />
+            }
+          </Flex>
+          <ArrowLeftIcon width={16} height={16} className={styles.iconArrowLeft} />
+        </div>
+
+        <Flex
+          direction="column"
+          gap="1"
+          align="start"
+          justify="center"
+          style={{ flex: 1, minWidth: 0 }}
+        >
+          <Text size="2" asChild>
+            <span className={styles.trackTitle}>
+              {title}
+            </span>
+          </Text>
+        </Flex>
+
+        {hasTransfers && (
+          <NumberPicker
+            min={min}
+            max={max}
+            value={pitchShiftSelected}
+            onChange={handleChangeTransfer}
+          />
+        )}
+      </Flex>
+    </Flex>
+  )
+}
+
+export default ProjectTrackVoice