@moises.ai/design-system 3.4.4 → 3.4.6

package/src/components/Sidebar/Sidebar.module.css

@@ -0,0 +1,267 @@
+.root {
+  background-color: var(--neutral-1);
+  width: 240px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--neutral-3);
+  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: 0ms;
+  overflow: hidden;
+}
+
+.rootCollapsed {
+  width: 64px;
+  transition-delay: 100ms;
+}
+
+.desktopSidebar {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  min-height: 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.moisesIcon {
+  opacity: 1;
+  transform: translateX(0);
+  transition: 
+    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: 0ms;
+  will-change: opacity, transform;
+}
+
+.moisesIconHidden {
+  opacity: 0;
+  transform: translateX(-8px);
+  pointer-events: none;
+  transition-delay: 50ms;
+}
+
+.logoToggleContainer {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logoToggleContainerCollapsed {
+  cursor: pointer;
+}
+
+.logoInContainer {
+  position: absolute;
+  opacity: 1;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.logoInContainerHidden {
+  opacity: 0;
+}
+
+.toggleInContainer {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.toggleInContainerVisible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.toggleButton {
+  opacity: 1;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+}
+
+.toggleButtonHidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.mobileTopBar {
+  display: none;
+  height: 64px;
+  padding: 8px 12px 8px 24px;
+  background-color: var(--neutral-1);
+  border-bottom: 1px solid var(--neutral-3);
+}
+
+.mobileTopBarOpen {
+  border-bottom: none;
+}
+
+.mobileTopBarWrapper {
+  display: none;
+  height: 64px;
+}
+
+.mobileTopBarAction {
+  color: var(--neutral-alpha-12);
+}
+
+.mobileOverlay {
+  display: none;
+}
+
+.mobileDrawer {
+  display: none;
+}
+
+.mobileDrawerClose {
+  color: var(--neutral-alpha-12);
+}
+
+@media (max-width: 768px) {
+  .root {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: visible;
+    background: transparent;
+    border: none;
+  }
+
+  .rootCollapsed {
+    width: 0;
+    height: 0;
+  }
+
+  .desktopSidebar {
+    display: none;
+  }
+
+  .mobileTopBarWrapper {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 64px;
+    z-index: 1002;
+    background-color: var(--neutral-1);
+    border-bottom: 1px solid var(--neutral-3);
+  }
+
+  .mobileTopBar {
+    display: flex;
+    width: 100%;
+    border-bottom: none;
+  }
+
+  .mobileOverlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 160ms ease-out;
+  }
+
+  .mobileOverlayOpen {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .mobileDrawer {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 64px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1001;
+    width: 100%;
+    height: calc(100vh - 64px);
+    padding: 16px;
+    background-color: var(--neutral-1);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 200ms ease-out, visibility 0s linear 200ms;
+    box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .mobileDrawerOpen {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transition: opacity 200ms ease-out, visibility 0s linear 0s;
+  }
+
+  .mobileDrawerContent {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    transform: translateY(-12px);
+    opacity: 0;
+    transition: transform 240ms ease-out, opacity 240ms ease-out;
+    will-change: transform, opacity;
+    width: 100%;
+    min-height: 0;
+    height: 100%;
+  }
+
+  .mobileDrawerContentOpen {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.collapsed {
+  width: 64px;
+  padding: 24px 8px;
+  display: flex;
+  align-items: center;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px;
+  margin-top: 24px;
+  height: 48px;
+  transition: padding 280ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.headerCollapsed {
+  padding-left: 17px;
+}
+
+.separator {
+ background: var(--neutral-alpha-4) !important;
+ margin: 0 20px 23px 4px;
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 8px;
+  margin-top: auto;
+}
+
+.footerSeparator {
+  margin: 0;
+}

package/src/components/Sidebar/Sidebar.stories.jsx

@@ -0,0 +1,247 @@
+import { useState } from 'react'
+import { Sidebar } from './Sidebar'
+import {
+  MoisesLogoIcon,
+  SparkBarsIcon,
+  MusicNoteIcon,
+  LibraryIcon,
+  MasteringIcon,
+  LyricsIcon,
+  WidgetIcon,
+  CrownIcon,
+  StarIcon,
+} from '../../icons'
+import { BoxIcon } from '@radix-ui/react-icons'
+
+export default {
+  title: 'Features/Sidebar',
+  component: Sidebar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+}
+
+export const Default = {
+  render: () => {
+    const [selectedProduct, setSelectedProduct] = useState('stem-separation')
+    const [selectedSetlist, setSelectedSetlist] = useState('piano-exercises')
+    const [searchValue, setSearchValue] = useState('')
+    const [showBannerAnnouncement, setShowBannerAnnouncement] = useState(true)
+    const [isCollapsed, setIsCollapsed] = useState(false)
+
+    const products = [
+      {
+        id: 'library',
+        label: 'Library',
+        icon: <LibraryIcon width={16} height={16} />,
+      },
+      {
+        id: 'ai-studio',
+        label: 'AI Studio',
+        icon: <SparkBarsIcon width={16} height={16} />,
+        badge: {
+          label: 'Beta',
+          color: 'gray',
+        },
+      },
+      {
+        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} />,
+      },
+    ]
+
+    const 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'),
+          },
+        ],
+      },
+    ]
+
+    const bannerAnnouncement = showBannerAnnouncement
+      ? {
+          title: 'Moises AI Studio',
+          badge: {
+            label: 'new',
+            color: 'green',
+          },
+          description:
+            '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.',
+          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',
+          onClose: () => {
+            console.log('Close clicked')
+            setShowBannerAnnouncement(false)
+          },
+        }
+      : null
+
+    return (
+      <>
+        <style>{`
+          .SidebarStoryLayout {
+            display: flex;
+            height: 100vh;
+          }
+          @media (max-width: 768px) {
+            .SidebarStoryLayout {
+              flex-direction: column;
+            }
+          }
+        `}</style>
+
+        <div className="SidebarStoryLayout">
+          <Sidebar
+            isCollapsed={isCollapsed}
+            onCollapsedChange={setIsCollapsed}
+            logo={<MoisesLogoIcon width={24} height={24} />}
+            logoText="moises"
+            headerAction={<BoxIcon width={16} height={16} />}
+            onHeaderActionClick={() => console.log('Header action clicked')}
+            searchValue={searchValue}
+            onSearchChange={(e) => setSearchValue(e.target.value)}
+            products={products}
+            selectedProductId={selectedProduct}
+            onProductClick={(id) => {
+              setSelectedProduct(id)
+              console.log('Product clicked:', id)
+            }}
+            setlists={setlists}
+            selectedSetlistId={selectedSetlist}
+            onSetlistClick={(id) => {
+              setSelectedSetlist(id)
+              console.log('Setlist clicked:', id)
+            }}
+            onNewSetlistClick={() => console.log('New setlist clicked')}
+            featureAnnouncement={bannerAnnouncement}
+            subFooterItems={[
+              {
+                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'),
+              },
+            ]}
+            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'),
+                },
+              ],
+            }}
+          />
+          <div
+            style={{ flex: 1, padding: '24px', background: 'var(--neutral-1)' }}
+          >
+            <h2>Main Content Area</h2>
+            <p>Selected Product: {selectedProduct}</p>
+            <p>Selected Setlist: {selectedSetlist}</p>
+            <p>Sidebar Collapsed: {isCollapsed ? 'true' : 'false'}</p>
+            <p>
+              Show Banner Announcement:{' '}
+              {showBannerAnnouncement ? 'true' : 'false'}
+            </p>
+            <button
+              onClick={() => setShowBannerAnnouncement(!showBannerAnnouncement)}
+            >
+              {showBannerAnnouncement
+                ? 'Hide Banner Announcement'
+                : 'Show Banner Announcement'}
+            </button>
+          </div>
+        </div>
+      </>
+    )
+  },
+}

package/src/components/Sidebar/SidebarSection/SidebarSection.jsx

@@ -0,0 +1,20 @@
+import { Text, Separator } from '@radix-ui/themes'
+import styles from './SidebarSection.module.css'
+
+export const SidebarSection = ({ title, collapsed = false }) => {
+  return (
+    <>
+      {!collapsed ? (
+        <Text size="1" weight="medium" className={styles.sectionTitle}>
+          {title}
+        </Text>
+      ) : (
+        <Separator
+          size="2"
+          orientation="horizontal"
+          className={styles.separator}
+        />
+      )}
+    </>
+  )
+}

package/src/components/Sidebar/SidebarSection/SidebarSection.module.css

@@ -0,0 +1,20 @@
+.sectionTitle {
+    color: var(--neutral-alpha-7);
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    padding: 0 0 8px 4px;
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.collapsed .sectionTitle {
+    opacity: 0;
+}
+
+.separator {
+    background: var(--neutral-alpha-4) !important;
+    margin: 0 4px 23px 4px;
+}

package/src/components/Slider/Slider.jsx

@@ -0,0 +1,114 @@
+import { Box, Flex, Text, Tooltip } from '@radix-ui/themes'
+import { Slider as SliderRadix } from 'radix-ui'
+import { InfoIcon } from '../../icons/InfoIcon'
+import styles from './Slider.module.css'
+import classNames from 'classnames'
+import { TooltipWithInfoIcon } from '../TooltipWithInfoIcon/TooltipWithInfoIcon'
+
+export const Slider = ({
+  className,
+  title,
+  handleValueChange,
+  color = 'accent',
+  value,
+  info,
+  tooltip,
+  min = 0,
+  max = 100,
+  step = 1,
+  size = '2',
+  disabled = false,
+  highContrast = false,
+  markers = [],
+  ...props
+}) => {
+  // Calculate marker positions as percentages
+  const getMarkerPosition = (markerValue) => {
+    return ((markerValue - min) / (max - min)) * 100
+  }
+
+  return (
+    <Box width="100%">
+      {title && (
+        <Flex mb="2" justify="between" align="center">
+          <Flex align="center" gap="2">
+            <Text size="2" style={{ color: 'var(--white)' }}>
+              {title}
+            </Text>
+            {tooltip && (
+              <Flex>
+                <TooltipWithInfoIcon content={tooltip} />
+              </Flex>
+            )}
+          </Flex>
+          {info && (
+            <Text
+              size="2"
+              weight="regular"
+              style={{ color: 'var(--neutral-alpha-9)' }}
+            >
+              {info}
+            </Text>
+          )}
+        </Flex>
+      )}
+      <Flex direction="column">
+        <SliderRadix.Root
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onValueChange={handleValueChange}
+          disabled={disabled}
+          className={className}
+          {...props}
+        >
+          <Flex className={styles.sliderContainer}>
+            <SliderRadix.Track
+              className={classNames(styles.sliderTrack, {
+                [styles.sliderTrackSize1]: size === '1',
+                [styles.sliderTrackSize2]: size === '2',
+                [styles.sliderTrackSize3]: size === '3',
+              })}
+            >
+              <SliderRadix.Range
+                className={classNames(styles.sliderRange, {
+                  [styles.sliderRangeAccent]: color === 'accent',
+                  [styles.sliderRangeNeutral]: color === 'neutral',
+                  [styles.sliderRangeHighContrastNeutral]:
+                    highContrast && color === 'neutral',
+                  [styles.sliderRangeHighContrastAccent]:
+                    highContrast && color === 'accent',
+                })}
+              />
+              <SliderRadix.Thumb
+                className={classNames(styles.sliderThumb, {
+                  [styles.sliderThumbSize1]: size === '1',
+                  [styles.sliderThumbSize2]: size === '2',
+                  [styles.sliderThumbSize3]: size === '3',
+                })}
+              />
+            </SliderRadix.Track>
+            {markers.length > 0 && (
+              <div className={styles.markersContainer}>
+                {markers.map((markerValue, index) => (
+                  <div
+                    key={index}
+                    className={classNames(styles.marker, {
+                      [styles.markerSize3]: size === '3',
+                    })}
+                    style={{
+                      left: `${getMarkerPosition(markerValue)}%`,
+                    }}
+                  />
+                ))}
+              </div>
+            )}
+          </Flex>
+        </SliderRadix.Root>
+      </Flex>
+    </Box>
+  )
+}
+
+Slider.displayName = 'Slider'