@moises.ai/design-system 3.6.3 → 3.6.5

package/src/components/SetlistList/SetlistList.stories.jsx

@@ -1,6 +1,164 @@
 import { useState } from 'react'
 import { SetlistList } from './SetlistList'
-import { MusicNoteIcon } from '../../icons'
+
+const defaultSetlists = [
+  {
+    id: 'b55ae387-6f5e-44e9-af9f-c05e0438db69',
+    label: 'Jam Sessions with Charlie Puth',
+    description:
+      'Submit your cover or remix of "Beat Yourself Up" for a chance to win your share of $100,000* in prizes, including cash, music gear, and an all-expenses-paid NYC trip to meet Charlie backstage at Madison Square Garden.',
+    subtitle: 'By Moises',
+    moises: true,
+    icon: 'https://storage.googleapis.com/moises-stage-api-assets/setlists/jam-sessions-charlie-puth-setlist-title/logo-1770055262172-charlie-puth-cover-132x132-3x-png',
+    group: false,
+    dropdownMenuOptions: [
+      {
+        type: 'item',
+        key: 'leave-setlist',
+        label: 'Leave setlist',
+        color: 'red',
+      },
+    ],
+  },
+  {
+    id: '00fc53a1-da6f-4b9c-afc0-64e40892d32a',
+    label: 'track, master and voice',
+    description: '',
+    subtitle: 'By testeqajp265',
+    moises: false,
+    icon: [
+      'https://d2-stage.moises.ai/v3/download/moises-stage--tasks/operations/FILEMETADATA_A/bf262dfd-8fe5-4e2a-8baa-ca8971690f62/cover.jpeg',
+      'https://d2-stage.moises.ai/v3/download/moises-stage--tasks/operations/FILEMETADATA_A/62b4b14d-b81f-4ef4-b681-bf6c863f9db8/cover.jpeg',
+      'https://d2-stage.moises.ai/v3/download/moises-stage--tasks/operations/FILEMETADATA_A/5db13e39-a0ac-4251-a4b5-4edb35f6b4a2/cover.jpeg',
+      'https://d3-stage.moises.ai/v3/download/moises-stage--tasks/operations/FILEMETADATA_A/9315c6df-aa12-4265-bb6d-594f638d8a63/cover.jpeg',
+    ],
+    group: true,
+    dropdownMenuOptions: [
+      {
+        type: 'item',
+        key: 'leave-setlist',
+        label: 'Leave setlist',
+        color: 'red',
+      },
+    ],
+  },
+  {
+    id: '15c1b18e-a0b8-439a-9480-78660562173b',
+    label: 'Minha setlist #532',
+    description: '',
+    subtitle: 'By Swanny Kathllen',
+    moises: false,
+    icon: [
+      'https://d2-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/FILEMETADATA_A/8e5ec2e6-61f4-4721-9ed0-c31fda5904ab/cover.jpeg',
+      'https://d2-stage.moises.ai/v3/download/moises-stage--tasks/operations/FILEMETADATA_A/b4112cfb-3f37-4551-bd42-8ce9fcaec2b0/cover.jpeg',
+      'https://d1-stage.moises.ai/v3/download/moises-stage--tasks/operations/FILEMETADATA_A/2e6d2a5f-d9c8-4750-bf9e-12f5d0b43f1d/cover.jpeg',
+    ],
+    group: false,
+    dropdownMenuOptions: [
+      { type: 'item', key: 'edit', label: 'Edit' },
+      { type: 'separator', key: 'separator-edit' },
+      { type: 'item', key: 'delete', label: 'Delete', color: 'red' },
+    ],
+  },
+  {
+    id: '85aabd11-4bfe-4f5e-814a-c450fa3695fd',
+    label: 'My Setlist #4',
+    description: '',
+    subtitle: 'By Swanny Kathllen',
+    moises: false,
+    icon: [],
+    group: true,
+    dropdownMenuOptions: [
+      {
+        type: 'item',
+        key: 'leave-setlist',
+        label: 'Leave setlist',
+        color: 'red',
+      },
+    ],
+  },
+  {
+    id: 'd234cc21-b271-4f11-af53-73fdc685e83b',
+    label: 'My Setlist #3',
+    description: '',
+    subtitle: 'By Swanny Kathllen',
+    moises: false,
+    group: false,
+    dropdownMenuOptions: [
+      { type: 'item', key: 'edit', label: 'Edit' },
+      { type: 'separator', key: 'separator-edit' },
+      { type: 'item', key: 'delete', label: 'Delete', color: 'red' },
+    ],
+  },
+  {
+    id: 'd7fe60bb-261e-4f55-89c3-80cffcb018d1',
+    label: 'playlist de outro user [não editável]',
+    description: '',
+    subtitle: 'By Swanny Kathllen',
+    moises: false,
+    group: true,
+    dropdownMenuOptions: [
+      {
+        type: 'item',
+        key: 'leave-setlist',
+        label: 'Leave setlist',
+        color: 'red',
+      },
+    ],
+  },
+  {
+    id: '0a3668ac-24f0-4363-a018-5ca9b1d22cfe',
+    label: 'Playlist de outro usuário [editável]',
+    description: '',
+    subtitle: 'By Swanny Kathllen',
+    moises: false,
+    group: true,
+    dropdownMenuOptions: [
+      {
+        type: 'item',
+        key: 'leave-setlist',
+        label: 'Leave setlist',
+        color: 'red',
+      },
+    ],
+  },
+  {
+    id: 'df74975a-fbfe-4000-9ce1-d02d998ecd7f',
+    label: 'Guitar Exercises',
+    description:
+      'Improve your chops with these Berklee Online guitar exercises, pulled from actual courses.',
+    subtitle: 'By Berklee Online',
+    moises: true,
+    icon: 'https://storage.googleapis.com/moises-api-assets/setlists/berklee2.png',
+    group: false,
+    dropdownMenuOptions: [
+      {
+        type: 'item',
+        key: 'leave-setlist',
+        label: 'Leave setlist',
+        color: 'red',
+      },
+    ],
+  },
+  {
+    id: '66d16b7e-2dc0-46e9-8706-56b7d4133104',
+    label: 'Moises Collection',
+    description:
+      'Songs written and recorded by the Moises community. For demo purposes only.',
+    subtitle: 'By Moises',
+    moises: true,
+    icon: 'https://storage.googleapis.com/moises-api-assets/moises-collection-cover.png',
+    group: true,
+    dropdownMenuOptions: [
+      {
+        type: 'item',
+        key: 'leave-setlist',
+        label: 'Leave setlist',
+        color: 'red',
+      },
+    ],
+  },
+]
 
 export default {
   title: 'Components/SetlistList',
@@ -14,12 +172,14 @@ export default {
 
 export const Default = {
   render: (args) => {
-    const [selectedSetlistId, setSelectedSetlistId] =
-      useState('piano-exercises')
+    const [selectedSetlistId, setSelectedSetlistId] = useState(
+      defaultSetlists[0].id
+    )
 
     return (
       <SetlistList
         {...args}
+        setlists={defaultSetlists}
         selectedSetlistId={selectedSetlistId}
         onSetlistClick={(id) => {
           setSelectedSetlistId(id)
@@ -32,63 +192,7 @@ export const Default = {
     )
   },
   args: {
-    setlists: [
-      {
-        id: 'piano-exercises',
-        label: 'Piano Exercises',
-        subtitle: 'By Berklee',
-        moises: true,
-        icon: 'https://storage.googleapis.com/moises-api-assets/setlists/jamsession_cory/cover.png',
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'bossa-nova',
-        label: 'Bossa Nova Essentials',
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'band-rehearsal',
-        label: 'Band Rehearsal',
-        subtitle: 'By Nickyz dsdasdas',
-        moises: true,
-        group: true,
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'gig-dec-21',
-        label: 'Gig Dec 21th',
-        icon: <MusicNoteIcon width={16} height={16} />,
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-    ],
+    setlists: defaultSetlists,
     collapsed: false,
     isMobile: false,
   },

package/src/components/Sidebar/Sidebar.jsx

@@ -11,6 +11,7 @@ import {
   CloseIcon,
 } from '../../icons'
 import { useMobileDrawer } from '../../utils/useMobileDrawer'
+import { MobileDrawerProvider } from '../../contexts/MobileDrawerContext'
 
 export const Sidebar = ({
   className,
@@ -50,12 +51,13 @@ export const Sidebar = ({
   }
 
   return (
-    <div
-      className={classNames(styles.root, {
-        [styles.rootCollapsed]: effectiveCollapsed,
-      })}
-      {...props}
-    >
+    <MobileDrawerProvider value={{ close, isMobile }}>
+      <div
+        className={classNames(styles.root, {
+          [styles.rootCollapsed]: effectiveCollapsed,
+        })}
+        {...props}
+      >
       <div className={styles.mobileTopBarWrapper}>
         <Flex
           align="center"
@@ -170,6 +172,7 @@ export const Sidebar = ({
         </Flex>
       </Flex>
     </div>
+    </MobileDrawerProvider>
   )
 }
 

package/src/contexts/MobileDrawerContext.jsx

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react'
+
+const MobileDrawerContext = createContext({
+  close: () => {},
+  isMobile: false,
+})
+
+export const useMobileDrawerContext = () => useContext(MobileDrawerContext)
+
+export const MobileDrawerProvider = MobileDrawerContext.Provider