@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/ProfileMenu/ProfileMenu.stories.jsx

@@ -0,0 +1,44 @@
+import { Flex } from '../../index'
+import { ProfileMenu } from './ProfileMenu'
+
+export default {
+  title: 'Components/ProfileMenu',
+  component: ProfileMenu,
+  argTypes: {},
+}
+
+export const Default = {
+  args: {
+    user: {
+      avatar: 'https://i.pravatar.cc/150?img=1',
+      name: 'Alex Smith',
+      plan: 'Premium',
+    },
+    menuOptions: [
+      {
+        type: 'item',
+        key: 'account-settings',
+        label: 'Account Settings',
+        onClick: () => console.log('Account Settings clicked'),
+      },
+      {
+        type: 'item',
+        key: 'subscription',
+        label: 'Subscription',
+        onClick: () => console.log('Subscription clicked'),
+      },
+      {
+        type: 'item',
+        key: 'notifications',
+        label: 'Notifications',
+        onClick: () => console.log('Notifications clicked'),
+      },
+    ],
+    collapsed: false,
+  },
+  render: (args) => (
+    <Flex width={args.collapsed ? "40px" : "300px"}>
+      <ProfileMenu {...args} />
+    </Flex>
+  ),
+}

package/src/components/ProjectsList/ProjectsList.jsx

@@ -0,0 +1,132 @@
+import { Flex, Text, Separator, Button } from '@radix-ui/themes'
+import styles from './ProjectsList.module.css'
+import { useState } from 'react'
+import { ArrowLeftIcon, NoMusicIcon, ChevronDownIcon, ChevronUpIcon } from '../../icons'
+import { getIconFromTrackId } from './utils'
+
+export const ProjectsList = ({
+  projects = [],
+  onClickTrack,
+  onInsertAllTracks,
+}) => {
+  const [openedItem, setOpenedItem] = useState(null)
+  const [showAllTracks, setShowAllTracks] = useState(false)
+
+  const handleClickProject = (projectId) => {
+    setShowAllTracks(false)
+
+    if (openedItem === projectId) {
+      setOpenedItem(null)
+    } else {
+      setOpenedItem(projectId)
+    }
+  }
+
+  const handleClickShowAllTracks = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setShowAllTracks(!showAllTracks)
+  }
+
+  return (
+    <Flex direction="column" width="100%">
+      {projects.map((project, index) => (
+        <Flex
+          key={project.id}
+          direction="column"
+          gap="2"
+          p="1"
+          className={`${styles.item} ${openedItem === project.id ? styles.opened : ''}`}
+          onClick={() => handleClickProject(project.id)}
+        >
+          <Flex direction="row" gap="3">
+            <Flex className={styles.projectCover}>
+              <img
+                src={project.cover || `https://picsum.photos/48?random=${index}`}
+                alt={project.title}
+                draggable={false}
+                className={styles.projectCoverImage}
+              />
+            </Flex>
+
+            <Flex direction="column" gap="1" align="start" justify="center">
+              <Text size="2" className={styles.projectTitle}>
+                {project.title}
+              </Text>
+
+              {project.artist && (
+                <Text size="1" className={styles.projectArtist}>
+                  {project.artist}
+                </Text>
+              )}
+            </Flex>
+          </Flex>
+
+          {openedItem === project.id && (
+            <Flex direction="column">
+              {project.tracks.length === 0 && (
+                <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>
+              )}
+
+              {project.tracks.length > 0 && (
+                <Flex direction="column" gap="1">
+                  {project.tracks.slice(0, showAllTracks ? project.tracks.length : 6).map((track) => (
+                    <Flex
+                      key={track.id}
+                      direction="row"
+                      gap="3"
+                      className={styles.itemTrack}
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        onClickTrack?.([track])
+                      }}
+                    >
+                      <div className={styles.icon}>
+                        <Flex className={styles.iconTrack}>
+                          {getIconFromTrackId(track.id)}
+                        </Flex>
+                        <ArrowLeftIcon width={16} height={16} className={styles.iconArrowLeft} />
+                      </div>
+
+                      <Flex direction="column" gap="1" align="start" justify="center">
+                        <Text size="2" className={styles.trackTitle}>
+                          {track.title}
+                        </Text>
+                      </Flex>
+                    </Flex>
+                  ))}
+
+                  <Flex direction="row" gap="3" p="2" align="center" justify="center">
+                    <Button variant="ghost" color="gray" style={{ flex: '1' }}
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        onInsertAllTracks?.([track])
+                      }}
+                    >
+                      <ArrowLeftIcon width={16} height={16} /> Insert all
+                    </Button>
+
+                    {project.tracks.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>
+      ))
+      }
+    </Flex >
+  )
+}

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

@@ -0,0 +1,71 @@
+.projectTitle {
+  color: var(--neutral-12);
+}
+
+.projectArtist {
+  color: var(--neutral-alpha-9);
+}
+
+.projectCover {
+  width: 48px;
+  height: 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);
+
+  .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);
+}
+
+.icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--neutral-alpha-2);
+  border-radius: var(--radius-3);
+}

package/src/components/ProjectsList/ProjectsList.stories.jsx

@@ -0,0 +1,25 @@
+import { ProjectsList } from './ProjectsList'
+import { projects } from './utils-stories'
+
+export default {
+  title: 'Components/ProjectsList',
+  component: ProjectsList,
+  tags: ['autodocs'],
+  argTypes: {
+    onClickTrack: { action: 'track-clicked' },
+    onInsertAllTracks: { action: 'insert-all-tracks' },
+  },
+}
+
+export const Default = {
+  render: (args) => {
+    return (
+      <ProjectsList
+        {...args}
+      />
+    )
+  },
+  args: {
+    projects: projects,
+  },
+}

package/src/components/ProjectsList/utils-stories.js

@@ -0,0 +1,186 @@
+export const projects = [
+  {
+    "id": "3842c898-9e0c-41e8-8927-7d9f67c50bc6",
+    "title": "Studio 1",
+    "artist": "NPR Music: Tiny Desk Concert",
+    "cover": null,
+    "duration": 30.72,
+    "tracks": [
+      {
+        "id": "q8pzli0h38ptcxq09h2al",
+        "title": "10 seconds short music.mp3",
+        "audioUrl": "https://storage.googleapis.com/moises-stage--tasks-us-east1/studio-tracks/3842c898-9e0c-41e8-8927-7d9f67c50bc6/a8ed32b3352517b19379bf3578055e5539d30c82874fe5e3405d8f224c2f1e57.audio"
+      },
+      {
+        "id": "j1nvrdhrai85pftttb9bo",
+        "title": "solo-drums.m4a",
+        "audioUrl": "https://storage.googleapis.com/moises-stage--tasks-us-east1/studio-tracks/3842c898-9e0c-41e8-8927-7d9f67c50bc6/94a8225ec1d738c3ab4da67ae13fce7d84a9e6e1b4b142765839f760ac001b4f.audio"
+      },
+      {
+        "id": "b9470aco6y4a9dlef0c035",
+        "title": "blink 182 - adams song.mp3",
+        "audioUrl": "https://storage.googleapis.com/moises-stage--tasks-us-east1/studio-tracks/3842c898-9e0c-41e8-8927-7d9f67c50bc6/15a1072d5d04c507eebf39b464329572b8b400c76d8f11197a5f83147a336de5.audio"
+      }
+    ]
+  },
+  {
+    "id": "4817ab8e-bed6-4ef7-b633-ee79cc56ca30",
+    "title": "All Instruments",
+    "artist": null,
+    "cover": null,
+    "duration": 19.924,
+    "tracks": [
+      {
+        "id": "original",
+        "title": "original",
+        "audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/bass.m4a"
+      },
+      {
+        "id": "vocals",
+        "title": "vocals",
+        "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/134ecc8d-c3b5-4a75-a088-2e4ce374d6fb/vocals.m4a"
+      },
+      {
+        "id": "backing_vocals",
+        "title": "backing_vocals",
+        "audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/backing_vocals.m4a"
+      },
+      {
+        "id": "bass",
+        "title": "bass",
+        "audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/bass.m4a"
+      },
+      {
+        "id": "piano",
+        "title": "piano",
+        "audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/piano.m4a"
+      },
+      {
+        "id": "wind",
+        "title": "wind",
+        "audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/wind.m4a"
+      },
+      {
+        "id": "strings",
+        "title": "strings",
+        "audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/strings.m4a"
+      },
+      {
+        "id": "keys",
+        "title": "keys",
+        "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/keys.m4a"
+      },
+      {
+        "id": "drums",
+        "title": "drums",
+        "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/134ecc8d-c3b5-4a75-a088-2e4ce374d6fb/drums.m4a"
+      },
+      {
+        "id": "kick",
+        "title": "kick",
+        "audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/kick.m4a"
+      },
+      {
+        "id": "snare",
+        "title": "snare",
+        "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/snare.m4a"
+      },
+      {
+        "id": "toms",
+        "title": "toms",
+        "audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/toms.m4a"
+      },
+      {
+        "id": "hat",
+        "title": "hat",
+        "audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/hat.m4a"
+      },
+      {
+        "id": "cymbals",
+        "title": "cymbals",
+        "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/cymbals.m4a"
+      },
+      {
+        "id": "other_kit",
+        "title": "other_kit",
+        "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/other_kit.m4a"
+      },
+      {
+        "id": "rhythm",
+        "title": "rhythm",
+        "audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/rhythm.m4a"
+      },
+      {
+        "id": "lead",
+        "title": "lead",
+        "audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/lead.m4a"
+      },
+      {
+        "id": "electric",
+        "title": "electric",
+        "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/134ecc8d-c3b5-4a75-a088-2e4ce374d6fb/electric.m4a"
+      },
+      {
+        "id": "acoustic",
+        "title": "acoustic",
+        "audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/134ecc8d-c3b5-4a75-a088-2e4ce374d6fb/acoustic.m4a"
+      },
+      {
+        "id": "guitars",
+        "title": "guitars",
+        "audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/e21c0c85-7555-4280-ad72-9de7b274c24f/guitars.m4a"
+      },
+      {
+        "id": "other",
+        "title": "other",
+        "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/e21c0c85-7555-4280-ad72-9de7b274c24f/other.m4a"
+      }
+    ]
+  },
+  {
+    "id": "2244f646-dd1c-4986-b885-1e1929593b46",
+    "title": "Empty Project",
+    "artist": null,
+    "cover": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks2/operations/FILEMETADATA_A/306fc1a9-f157-4bce-a66d-fa2f48208f3d/cover.jpeg",
+    "duration": 1062.0343,
+    "tracks": []
+  },
+  {
+    "id": "3612a641-b86c-408e-b296-b9f0fdbeb108",
+    "title": "حسين الجسمي - بشرة خير (فيديو كليب) | Hussain Al Jassmi - Boshret Kheir | 2014",
+    "artist": null,
+    "cover": null,
+    "duration": 227.0215,
+    "tracks": [
+      {
+        "id": "bass",
+        "title": "bass",
+        "audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/09239f2d-f93f-4924-86a0-2277e5ba35ea/bass.m4a"
+      },
+      {
+        "id": "other",
+        "title": "other",
+        "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/09239f2d-f93f-4924-86a0-2277e5ba35ea/other.m4a"
+      }
+    ]
+  },
+  {
+    "id": "45f6b090-741a-4530-a7e5-b336cfb6ca9a",
+    "title": "Black Dog",
+    "artist": "Led Zeppelin",
+    "cover": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks2/operations/FILEMETADATA_A/76477978-88b0-4dd1-b729-ad760b9f1b9c/cover.jpeg",
+    "duration": 296.8065,
+    "tracks": [
+      {
+        "id": "bass",
+        "title": "bass",
+        "audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/e4325003-662f-4aeb-b75a-14797654828a/bass.m4a"
+      },
+      {
+        "id": "other",
+        "title": "other",
+        "audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/e4325003-662f-4aeb-b75a-14797654828a/other.m4a"
+      }
+    ]
+  }
+]

package/src/components/ProjectsList/utils.jsx

@@ -0,0 +1,70 @@
+import {
+    SpliterIcon,
+    VocalIcon,
+    VocalsBackgroundIcon,
+    DrumsIcon,
+    BassIcon,
+    IsolateDrumsIcon,
+    PianoIcon,
+    WindIcon,
+    StringsIcon,
+    KeysIcon,
+    KickdrumIcon,
+    SnareIcon,
+    TomsIcon,
+    HiHatIcon,
+    CymbalsIcon,
+    ElectricGuitarIcon,
+    AcousticGuitarIcon,
+    MusicIcon,
+    SparkBarsIcon,
+} from '../../icons'
+
+export const getIconFromTrackId = (trackId) => {
+    switch (trackId) {
+        case 'original':
+            return <SpliterIcon />
+        case 'vocals':
+            return <VocalIcon />
+        case 'backing_vocals':
+            return <VocalsBackgroundIcon />
+        case 'drums':
+            return <DrumsIcon />
+        case 'bass':
+            return <BassIcon />
+        case 'guitars':
+            return <ElectricGuitarIcon />
+        case 'other_kit':
+            return <IsolateDrumsIcon />
+        case "piano":
+            return <PianoIcon />
+        case "wind":
+            return <WindIcon />
+        case "strings":
+            return <StringsIcon />
+        case "keys":
+            return <KeysIcon />
+        case "kick":
+            return <KickdrumIcon />
+        case "snare":
+            return <SnareIcon />
+        case "toms":
+            return <TomsIcon />
+        case "hat":
+            return <HiHatIcon />
+        case "cymbals":
+            return <CymbalsIcon />
+        case "rhythm":
+            return <ElectricGuitarIcon />
+        case "lead":
+            return <ElectricGuitarIcon />
+        case "electric":
+            return <AcousticGuitarIcon />
+        case "acoustic":
+            return <AcousticGuitarIcon />
+        case 'other':
+            return <MusicIcon />
+        default:
+            return <SparkBarsIcon />
+    }
+}

package/src/components/RadioCardsGroup/RadioCardsGroup.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { RadioCards as RadioCardsRadix, Flex, Text } from '@radix-ui/themes'
+import classNames from 'classnames'
+import styles from './RadioCardsGroup.module.css'
+
+export const RadioCardsGroup = ({
+  className,
+  items = [],
+  showRadio = true,
+  defaultValue,
+  columns = { initial: "1" },
+  ...props
+}) => {
+  return <RadioCardsRadix.Root
+    className={classNames(styles.RadioCardsGroup, className, {
+      [styles.showRadio]: showRadio
+    })}
+    columns={columns}
+    defaultValue={defaultValue}
+    {...props}
+  >
+    {items.map((item, idx) => (
+      <RadioCardsRadix.Item key={idx} value={item.value} disabled={item.disabled || false} className={styles.RadioCardsGroupItem}>
+        <Flex direction="column" width="100%" className={styles.RadioCardsGroupItemContent}>
+          <Text weight="regular" size="2">{item.label}</Text>
+          {item.description && (
+            <Text weight="regular" size="1" className={styles.RadioCardsGroupDescription}>{item.description}</Text>
+          )}
+        </Flex>
+      </RadioCardsRadix.Item>
+    ))}
+  </RadioCardsRadix.Root>
+}
+
+RadioCardsGroup.displayName = 'RadioCardsGroup'

package/src/components/RadioCardsGroup/RadioCardsGroup.module.css

@@ -0,0 +1,66 @@
+.RadioCardsGroup {
+  width: 100%;
+  gap: 12px;
+
+  .RadioCardsGroupItem {
+    --accent-indicator: var(--accent-9);
+    --base-card-border-radius: var(--radius-4);
+
+    &:where([data-state='checked'])::after {
+      outline-width: 2px;
+      outline-offset: -1px;
+    }
+
+    &:where(:disabled) {
+      --accent-indicator: var(--neutral-alpha-6);
+      color: var(--neutral-alpha-9);
+
+      &::selection {
+        background-color: var(--neutral-alpha-6);
+      }
+
+      &::before {
+        background-image: none;
+        background-color: var(--neutral-alpha-3);
+      }
+
+      &::after {
+        outline-color: var(--neutral-alpha-6);
+      }
+    }
+  }
+
+  .RadioCardsGroupDescription {
+    color: var(--neutral-alpha-9);
+  }
+
+  &.showRadio {
+    .RadioCardsGroupItem {
+      &[data-state='checked'] {
+        .RadioCardsGroupItemContent::before {
+          border-color: var(--accent-indicator);
+          border-width: 5px;
+        }
+      }
+    }
+
+    .RadioCardsGroupItemContent {
+      position: relative;
+      padding-right: 32px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: auto;
+        right: 0;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        border: 1px solid var(--neutral-6);
+        transform: translateY(-50%);
+        box-sizing: border-box;
+      }
+    }
+  }
+}