@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/Shell/Shell.jsx

@@ -0,0 +1,75 @@
+import { useState } from 'react'
+import { Sidebar } from '../Sidebar/Sidebar'
+import { AdditionalItems } from '../AdditionalItems/AdditionalItems'
+import { ProfileMenu } from '../ProfileMenu/ProfileMenu'
+import { Flex } from '../../index'
+import { useMobileDrawer } from '../../utils/useMobileDrawer'
+import { ProductsList } from '../ProductsList/ProductsList'
+import { SetlistList } from '../SetlistList/SetlistList'
+import { SidebarSection } from '../Sidebar/SidebarSection/SidebarSection'
+
+export const Shell = ({
+  additionalItems,
+  selectedAdditionalItemId,
+  userProfileItems,
+  showBannerAnnouncement = false,
+  products,
+  selectedProductId,
+  onProductClick,
+  setlists,
+  selectedSetlistId,
+  onSetlistClick,
+  onNewSetlistClick,
+  children,
+}) => {
+  const [collapsed, setCollapsed] = useState(false)
+  const { isMobile } = useMobileDrawer()
+
+  const effectiveCollapsed = isMobile ? false : collapsed
+
+  return (
+    <>
+      <Sidebar isCollapsed={collapsed} onCollapsedChange={setCollapsed}>
+        <Flex direction="column">
+          <SidebarSection title="PRODUCTS" collapsed={effectiveCollapsed} />
+          <ProductsList
+            products={products}
+            selectedProductId={selectedProductId}
+            onProductClick={onProductClick}
+            collapsed={effectiveCollapsed}
+          />
+        </Flex>
+        <Flex
+          direction="column"
+          style={{ overflow: 'hidden', flex: 1, minHeight: 0 }}
+        >
+          <SidebarSection title="SETLISTS" collapsed={effectiveCollapsed} />
+          <SetlistList
+            setlists={setlists}
+            selectedSetlistId={selectedSetlistId}
+            onSetlistClick={onSetlistClick}
+            onNewSetlistClick={onNewSetlistClick}
+            collapsed={effectiveCollapsed}
+            isMobile={isMobile}
+          />
+        </Flex>
+        <Flex
+          gap="3"
+          direction="column"
+          style={{ paddingTop: '8px', marginTop: 'auto' }}
+        >
+          <AdditionalItems
+            collapsed={effectiveCollapsed}
+            additionalItems={additionalItems}
+            selectedAdditionalItemId={selectedAdditionalItemId}
+          />
+          <ProfileMenu
+            userProfileItems={userProfileItems}
+            collapsed={effectiveCollapsed}
+          />
+        </Flex>
+      </Sidebar>
+      {showBannerAnnouncement && children}
+    </>
+  )
+}

package/src/components/Shell/Shell.module.css

@@ -0,0 +1,3 @@
+.plusIcon {
+  color: var(--aqua-dark-alpha-11);
+}

package/src/components/Shell/Shell.stories.jsx

@@ -0,0 +1,354 @@
+import { Shell } from './Shell'
+import { Flex, Text } from '../../index'
+import { BannerAnnouncement } from '../BannerAnnouncement/BannerAnnouncement'
+import {
+  CrownIcon,
+  LibraryIcon,
+  LyricsIcon,
+  MasteringIcon,
+  MusicNoteIcon,
+  SparkBarsIcon,
+  StarIcon,
+  WidgetIcon,
+} from '../../icons'
+
+export default {
+  title: 'Features/Shell',
+  component: Shell,
+  argTypes: {
+    selectedAdditionalItemId: { control: 'text' },
+  },
+}
+
+export const Default = {
+  args: {
+    additionalItems: [
+      {
+        id: 'upgrade',
+        type: 'upgrade',
+        label: 'Upgrade to Pro',
+        icon: <CrownIcon width={16} height={16} />,
+        onClick: () => console.log('Upgrade clicked'),
+      },
+      {
+        id: 'jam-sessions',
+        type: 'jam-sessions',
+        label: 'Jam Sessions',
+        icon: <StarIcon width={16} height={16} />,
+        onClick: () => console.log('Logout clicked'),
+      },
+    ],
+    selectedAdditionalItemId: 'upgrade',
+    userProfileItems: {
+      id: 'user',
+      type: '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'),
+        },
+      ],
+    },
+    showBannerAnnouncement: true,
+    products: [
+      {
+        id: 'library',
+        label: 'Library',
+        icon: <LibraryIcon width={16} height={16} />,
+      },
+      {
+        id: 'ai-studio',
+        label: 'AI Studio',
+        icon: <SparkBarsIcon width={16} height={16} />,
+      },
+      {
+        id: 'mastering',
+        label: 'Mastering',
+        icon: <MasteringIcon width={16} height={16} />,
+      },
+      {
+        id: 'lyric-writer',
+        label: 'Lyric Writer',
+        icon: <LyricsIcon width={16} height={16} />,
+      },
+      {
+        id: 'plugins',
+        label: 'Plugins',
+        icon: <WidgetIcon width={16} height={16} />,
+      },
+    ],
+    selectedProductId: 'library',
+    onProductClick: () => console.log('Product clicked'),
+    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',
+        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'),
+          },
+        ],
+      },
+      {
+        id: 'piano-exercises-1',
+        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-1',
+        label: 'Bossa Nova Essentials',
+        dropdownMenuOptions: [
+          {
+            type: 'item',
+            key: 'edit',
+            label: 'Edit',
+            onClick: () => console.log('Edit clicked'),
+          },
+        ],
+      },
+      {
+        id: 'band-rehearsal-1',
+        label: 'Band Rehearsal',
+        subtitle: 'By Nickyz dsdasdas',
+        group: true,
+        dropdownMenuOptions: [
+          {
+            type: 'item',
+            key: 'edit',
+            label: 'Edit',
+            onClick: () => console.log('Edit clicked'),
+          },
+        ],
+      },
+      {
+        id: 'gig-dec-21-1',
+        label: 'Gig Dec 21th',
+        icon: <MusicNoteIcon width={16} height={16} />,
+        dropdownMenuOptions: [
+          {
+            type: 'item',
+            key: 'edit',
+            label: 'Edit',
+            onClick: () => console.log('Edit clicked'),
+          },
+        ],
+      },
+      {
+        id: 'piano-exercises-2',
+        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-2',
+        label: 'Bossa Nova Essentials',
+        dropdownMenuOptions: [
+          {
+            type: 'item',
+            key: 'edit',
+            label: 'Edit',
+            onClick: () => console.log('Edit clicked'),
+          },
+        ],
+      },
+      {
+        id: 'band-rehearsal-2',
+        label: 'Band Rehearsal',
+        subtitle: 'By Nickyz dsdasdas',
+        group: true,
+        dropdownMenuOptions: [
+          {
+            type: 'item',
+            key: 'edit',
+            label: 'Edit',
+            onClick: () => console.log('Edit clicked'),
+          },
+        ],
+      },
+      {
+        id: 'gig-dec-21-2',
+        label: 'Gig Dec 21th',
+        icon: <MusicNoteIcon width={16} height={16} />,
+        dropdownMenuOptions: [
+          {
+            type: 'item',
+            key: 'edit',
+            label: 'Edit',
+            onClick: () => console.log('Edit clicked'),
+          },
+        ],
+      },
+      {
+        id: 'piano-exercises-3',
+        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-3',
+        label: 'Bossa Nova Essentials',
+        dropdownMenuOptions: [
+          {
+            type: 'item',
+            key: 'edit',
+            label: 'Edit',
+            onClick: () => console.log('Edit clicked'),
+          },
+        ],
+      },
+      {
+        id: 'band-rehearsal-3',
+        label: 'Band Rehearsal',
+        subtitle: 'By Nickyz dsdasdas',
+        group: true,
+        dropdownMenuOptions: [
+          {
+            type: 'item',
+            key: 'edit',
+            label: 'Edit',
+            onClick: () => console.log('Edit clicked'),
+          },
+        ],
+      },
+      {
+        id: 'gig-dec-21-3',
+        label: 'Gig Dec 21th',
+        icon: <MusicNoteIcon width={16} height={16} />,
+        dropdownMenuOptions: [
+          {
+            type: 'item',
+            key: 'edit',
+            label: 'Edit',
+            onClick: () => console.log('Edit clicked'),
+          },
+        ],
+      },
+    ],
+    selectedSetlistId: 'piano-exercises',
+    onSetlistClick: () => console.log('Setlist clicked'),
+    onNewSetlistClick: () => console.log('New setlist clicked'),
+    collapsed: false,
+    isMobile: false,
+  },
+  render: (args) => (
+    <Flex width="300px">
+      <Shell {...args}>
+        <BannerAnnouncement
+          badge={{ label: 'New', color: 'green' }}
+          image="https://storage.googleapis.com/moises-cms/1_day_discount_banner_2d5990f994/1_day_discount_banner_2d5990f994.png"
+          link="https://www.google.com"
+          buttonText="Learn More"
+          buttonColor="gray"
+          alt="Moises AI Studio"
+          children={
+            <Flex direction="column" gap="2">
+              <Text size="3" weight="medium">
+                Moises AI Studio
+              </Text>
+              <Text
+                size="1"
+                weight="regular"
+                style={{ color: 'var(--neutral-alpha-11)' }}
+              >
+                Step into the future of music creation. Record, separate,
+                generate, convert voice, mix, and master with our all-in-one
+                essential AI tool for musicians.
+              </Text>
+            </Flex>
+          }
+          onClose={() => console.log('Close clicked')}
+        />
+      </Shell>
+    </Flex>
+  ),
+}

package/src/components/Sidebar/Sidebar.jsx

@@ -0,0 +1,173 @@
+import { Flex } from '@radix-ui/themes'
+import { IconButton } from '../IconButton/IconButton'
+import styles from './Sidebar.module.css'
+import { useState } from 'react'
+import classNames from 'classnames'
+import {
+  MoisesIcon,
+  MoisesLogoIcon,
+  SidebarLeftIcon,
+  HamburgerMenu3Icon,
+  CloseIcon,
+} from '../../icons'
+import { useMobileDrawer } from '../../utils/useMobileDrawer'
+
+export const Sidebar = ({
+  className,
+  children,
+  isCollapsed,
+  onCollapsedChange,
+  onLogoClick,
+  ...props
+}) => {
+  const { isMobile, isOpen: mobileOpen, open, close } = useMobileDrawer()
+  const [isHovered, setIsHovered] = useState(false)
+
+  const effectiveCollapsed = isMobile ? false : isCollapsed
+
+  const handleToggleCollapse = () => {
+    if (isMobile) return
+    setIsHovered(false)
+    onCollapsedChange((prev) => !prev)
+  }
+
+  const handleMouseEnter = () => {
+    if (isMobile) return
+    setIsHovered(true)
+  }
+
+  const handleMouseLeave = () => {
+    if (isMobile) return
+    setIsHovered(false)
+  }
+
+  const handleLogoClick = (e) => {
+    if (effectiveCollapsed) {
+      handleToggleCollapse()
+    } else if (onLogoClick) {
+      onLogoClick(e)
+    }
+  }
+
+  return (
+    <div
+      className={classNames(styles.root, {
+        [styles.rootCollapsed]: effectiveCollapsed,
+      })}
+      {...props}
+    >
+      <div className={styles.mobileTopBarWrapper}>
+        <Flex
+          align="center"
+          justify="between"
+          className={classNames(styles.mobileTopBar, {
+            [styles.mobileTopBarOpen]: isMobile && mobileOpen,
+          })}
+        >
+          <Flex
+            align="center"
+            gap="2"
+            height="38px"
+            onClick={onLogoClick}
+            style={{ cursor: onLogoClick ? 'pointer' : 'default' }}
+          >
+            <MoisesLogoIcon width={32} height={17} />
+            <MoisesIcon height={12.269} />
+          </Flex>
+
+          <IconButton
+            variant="ghost"
+            size="2"
+            onClick={mobileOpen ? close : open}
+            className={styles.mobileTopBarAction}
+            aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
+          >
+            {mobileOpen ? (
+              <CloseIcon width={20} height={20} />
+            ) : (
+              <HamburgerMenu3Icon width={20} height={20} />
+            )}
+          </IconButton>
+        </Flex>
+      </div>
+
+      <div
+        className={classNames(styles.mobileDrawer, {
+          [styles.mobileDrawerOpen]: isMobile && mobileOpen,
+        })}
+      >
+        <Flex
+          direction="column"
+          className={classNames(styles.mobileDrawerContent, {
+            [styles.mobileDrawerContentOpen]: isMobile && mobileOpen,
+          })}
+        >
+          {children}
+        </Flex>
+      </div>
+
+      <Flex direction="column" className={styles.desktopSidebar}>
+        <Flex
+          align="center"
+          justify="between"
+          className={classNames(styles.header, {
+            [styles.headerCollapsed]: effectiveCollapsed,
+          })}
+        >
+          <Flex
+            align="center"
+            gap="2"
+            onClick={handleLogoClick}
+            style={{ cursor: 'pointer' }}
+          >
+            <div
+              className={classNames(styles.logoToggleContainer, {
+                [styles.logoToggleContainerCollapsed]: effectiveCollapsed,
+              })}
+              onMouseEnter={effectiveCollapsed ? handleMouseEnter : undefined}
+              onMouseLeave={effectiveCollapsed ? handleMouseLeave : undefined}
+            >
+              <MoisesLogoIcon
+                width={32}
+                height={17}
+                className={classNames(styles.logoInContainer, {
+                  [styles.logoInContainerHidden]:
+                    effectiveCollapsed && isHovered,
+                })}
+              />
+              <SidebarLeftIcon
+                width={16}
+                height={16}
+                className={classNames(styles.toggleInContainer, {
+                  [styles.toggleInContainerVisible]:
+                    effectiveCollapsed && isHovered,
+                })}
+              />
+            </div>
+            <MoisesIcon
+              height={12.269}
+              className={classNames(styles.moisesIcon, {
+                [styles.moisesIconHidden]: effectiveCollapsed,
+              })}
+            />
+          </Flex>
+          <Flex
+            align="center"
+            justify="center"
+            onClick={handleToggleCollapse}
+            className={classNames(styles.toggleButton, {
+              [styles.toggleButtonHidden]: effectiveCollapsed,
+            })}
+          >
+            <SidebarLeftIcon width={16} height={16} />
+          </Flex>
+        </Flex>
+        <Flex direction="column" className={styles.content}>
+          {children}
+        </Flex>
+      </Flex>
+    </div>
+  )
+}
+
+Sidebar.displayName = 'Sidebar'