@moises.ai/design-system 3.7.2 → 3.8.0

package/package.json

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

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

@@ -0,0 +1,146 @@
+import { Flex, Text, Separator, Spinner, Button } from '@radix-ui/themes'
+import { useState, useContext, useCallback, useMemo } from 'react'
+import { ArrowLeftIcon, NoMusicIcon, ChevronDownIcon, ChevronUpIcon, InfoIcon } from '../../../icons'
+import { ProjectsListContext } from '../context'
+import { ProductsBrandPattern } from '../../ProductsBrandPattern/ProductsBrandPattern'
+import styles from './ProjectItem.module.css'
+
+const ProjectItem = ({
+  id,
+  title,
+  artist,
+  cover,
+  type,
+  tracks: allTracks = [],
+  loading = false,
+  failed = false,
+  children,
+  ...props
+}) => {
+  const {
+    projects,
+    onInsertAllTracks,
+    onProjectClick,
+    openedItem,
+    setOpenedItem,
+  } = useContext(ProjectsListContext)
+  const [showAllTracks, setShowAllTracks] = useState(false)
+
+  const tracks = useMemo(() => {
+    return showAllTracks ? allTracks : allTracks.slice(0, 6)
+  }, [allTracks, showAllTracks])
+
+  const handleClickProject = useCallback(() => {
+    if (failed) return
+    setShowAllTracks(false)
+    const project = projects.find((p) => p.id === id)
+
+    if (openedItem === id) {
+      setOpenedItem(null)
+      onProjectClick?.(project, false)
+    } else {
+      setOpenedItem(id)
+      onProjectClick?.(project, true)
+    }
+  }, [id, openedItem, setOpenedItem, onProjectClick, projects, failed])
+
+  const handleClickShowAllTracks = useCallback((e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setShowAllTracks(!showAllTracks)
+  }, [showAllTracks])
+
+  const handleInsertAllTracks = useCallback((e) => {
+    e.stopPropagation()
+    onInsertAllTracks?.(allTracks)
+  }, [onInsertAllTracks, allTracks])
+
+  return (
+    <Flex
+      direction="column"
+      gap="2"
+      p="1"
+      className={`${styles.item} ${openedItem === id ? styles.opened : ''} ${failed ? styles.failed : ''}`}
+      onClick={handleClickProject}
+      {...props}
+    >
+      <Flex direction="row" gap="3">
+        <Flex className={styles.projectCover}>
+          <ProductsBrandPattern type={type} cover={cover} size="48px" />
+        </Flex>
+
+        <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 ? (
+            <Flex size="1" gap="1" className={styles.projectFailed}>
+              <InfoIcon width={16} height={16} />
+              <Text size="1">Failed</Text>
+            </Flex>
+          ) : artist && (
+            <Text size="1" asChild>
+              <span className={styles.projectArtist}>
+                {artist}
+              </span>
+            </Text>
+          )}
+        </Flex>
+      </Flex>
+
+      {openedItem === id && (
+        <Flex direction="column">
+          {allTracks.length === 0 && !loading && (
+            <Flex direction="row" gap="3" p="5" pt="2" align="center" justify="center">
+              <NoMusicIcon width={16} height={16} style={{ color: 'var(--neutral-alpha-10)' }} />
+              <Text size="2" style={{ color: 'var(--neutral-alpha-10)' }}>This file has no tracks</Text>
+            </Flex>
+          )}
+
+          {loading && (
+            <Flex direction="row" gap="3" p="5" align="center" justify="center">
+              <Spinner width={16} height={16} style={{ color: 'var(--neutral-alpha-10)' }} />
+              <Text size="2" style={{ color: 'var(--neutral-alpha-10)' }}>Loading tracks...</Text>
+            </Flex>
+          )}
+
+          {allTracks.length > 0 && (
+            <Flex direction="column" gap="1">
+              {typeof children === 'function' ? children(tracks) : children}
+
+              <Flex direction="row" gap="3" p="2" align="center" justify="center">
+                <Button variant="ghost" color="gray" style={{ flex: '1' }}
+                  onClick={handleInsertAllTracks}
+                >
+                  <ArrowLeftIcon width={16} height={16} /> Insert all
+                </Button>
+
+                {allTracks.length > 6 && (
+                  <>
+                    <Separator orientation="vertical" />
+
+                    <Button variant="ghost" color="gray" style={{ flex: '1' }} onClick={handleClickShowAllTracks}>
+                      {showAllTracks ? 'Show less' : 'Show more'}
+                      {showAllTracks ? <ChevronUpIcon width={16} height={16} /> : <ChevronDownIcon width={16} height={16} />}
+                    </Button>
+                  </>
+                )}
+              </Flex>
+            </Flex>
+          )}
+        </Flex>
+      )}
+    </Flex>
+  )
+}
+
+export default ProjectItem

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

@@ -0,0 +1,53 @@
+.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 {
+  color: var(--error-alpha-11);
+}
+
+.projectCover {
+  width: 48px;
+  height: 48px;
+  flex: 0 0 48px;
+  border-radius: var(--radius-3);
+  overflow: hidden;
+}
+
+.projectCover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+
+.item:not(.failed) {
+  cursor: pointer;
+  border-radius: var(--radius-4);
+
+  &.opened {
+    background: var(--neutral-alpha-2);
+    box-shadow: 0 24px 24px -16px rgba(0, 0, 0, 0.40);
+  }
+
+  &:hover:not(.opened) {
+    background: rgba(216, 244, 246, 0.04);
+  }
+}

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

@@ -0,0 +1,52 @@
+import { Flex, Text } from '@radix-ui/themes'
+import { useCallback, useContext } from 'react'
+import { ArrowLeftIcon } from '../../../icons'
+import { ProjectsListContext } from '../context'
+import { getIconFromTrackId } from '../utils'
+import styles from './ProjectTrack.module.css'
+
+const ProjectTrack = ({
+  ...props
+}) => {
+  const { onClickTrack } = useContext(ProjectsListContext)
+  const { id, title } = props
+
+  const handleClickTrack = useCallback((e) => {
+    e.stopPropagation()
+    onClickTrack?.(props)
+  }, [onClickTrack, props])
+
+  return (
+    <Flex direction="column" gap="1">
+      <Flex
+        direction="row"
+        gap="3"
+        className={styles.itemTrack}
+        onClick={handleClickTrack}
+      >
+        <div className={styles.icon}>
+          <Flex className={styles.iconTrack}>
+            {getIconFromTrackId(id)}
+          </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>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default ProjectTrack

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

@@ -0,0 +1,42 @@
+.itemTrack {
+  cursor: pointer;
+  border-radius: var(--radius-3);
+
+  .iconArrowLeft {
+    display: none;
+  }
+
+  &:hover {
+    background: var(--neutral-alpha-2);
+    box-shadow: 0 24px 24px -16px rgba(0, 0, 0, 0.40);
+
+    .iconArrowLeft {
+      display: block;
+    }
+
+    .iconTrack {
+      display: none;
+    }
+  }
+}
+
+.trackTitle {
+  color: var(--neutral-alpha-12);
+  display: block;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  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

package/src/components/ProjectsList/{ProjectsList.module.css → ProjectTrackVoice/ProjectTrackVoice.module.css}

@@ -1,43 +1,7 @@
-.projectTitle {
-  color: var(--neutral-12);
-}
-
-.projectArtist {
-  color: var(--neutral-alpha-9);
-}
-
-.projectCover {
-  width: 48px;
-  height: 48px;
-  flex: 0 0 48px;
-  border-radius: var(--radius-3);
-  overflow: hidden;
-}
-
-.projectCover img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  pointer-events: none;
-}
-
-.item {
-  cursor: pointer;
-  border-radius: var(--radius-4);
-
-  &.opened {
-    background: var(--neutral-alpha-2);
-    box-shadow: 0 24px 24px -16px rgba(0, 0, 0, 0.40);
-  }
-
-  &:hover:not(.opened) {
-    background: rgba(216, 244, 246, 0.04);
-  }
-}
-
 .itemTrack {
   cursor: pointer;
   border-radius: var(--radius-3);
+  overflow: hidden;
 
   .iconArrowLeft {
     display: none;
@@ -51,7 +15,7 @@
       display: block;
     }
 
-    .iconTrack {
+    .coverImage {
       display: none;
     }
   }
@@ -59,9 +23,15 @@
 
 .trackTitle {
   color: var(--neutral-alpha-12);
+  display: block;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.icon {
+.cover {
   width: 48px;
   height: 48px;
   display: flex;
@@ -69,4 +39,22 @@
   justify-content: center;
   background: var(--neutral-alpha-2);
   border-radius: var(--radius-3);
-}
+}
+
+.coverImage {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-3);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--neutral-alpha-10);
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: none;
+  }
+}