@moises.ai/design-system 3.5.6 → 3.6.0

package/src/components/Extension/Extension.stories.jsx

@@ -0,0 +1,368 @@
+import { useEffect, useState } from 'react'
+import { Badge, Button, Card, Flex, IconButton, Text } from '../../index'
+import { DotsVerticalIcon } from '../../icons'
+import { Extension, useNavigation, useScreen } from './Extension'
+
+const mockMoises = {
+  extension: { close: () => console.log('extension.close()') },
+}
+
+const sidebarDecorator = (Story) => (
+  <div
+    style={{
+      width: 300,
+      height: 500,
+      border: '1px solid var(--gray-a6)',
+      borderRadius: 8,
+      overflow: 'hidden',
+      display: 'flex',
+      flexDirection: 'column',
+    }}
+  >
+    <Story />
+  </div>
+)
+
+export default {
+  title: 'Extensions/Extension',
+  decorators: [sidebarDecorator],
+  parameters: { layout: 'centered' },
+}
+
+// ---------------------------------------------------------------------------
+// Simple mode (flat layout, no navigation)
+// ---------------------------------------------------------------------------
+
+export const Simple = {
+  name: 'Simple (Header + Content + Footer)',
+  render: () => (
+    <Extension moises={mockMoises}>
+      <Extension.Header title="My Extension">
+        <Button variant="ghost" size="1">Action</Button>
+      </Extension.Header>
+      <Extension.Content>
+        <Card>Card content 1</Card>
+        <Card>Card content 2</Card>
+        <Card>Card content 3</Card>
+      </Extension.Content>
+      <Extension.Footer>
+        <Button variant="ghost" size="1">Footer Action</Button>
+      </Extension.Footer>
+    </Extension>
+  ),
+}
+
+export const HeaderOnly = {
+  name: 'Header Only',
+  render: () => (
+    <Extension moises={mockMoises}>
+      <Extension.Header title="Minimal" />
+      <Extension.Content>
+        <Text size="2">Content with a simple header above.</Text>
+      </Extension.Content>
+    </Extension>
+  ),
+}
+
+export const HeaderWithBackButton = {
+  name: 'Header with Back Button',
+  render: () => (
+    <Extension moises={mockMoises}>
+      <Extension.Header title="Detail View" onBack={() => console.log('onBack')} />
+      <Extension.Content>
+        <Text size="2">Passing `onBack` renders a back arrow on the left.</Text>
+      </Extension.Content>
+    </Extension>
+  ),
+}
+
+export const HeaderCustomLeft = {
+  name: 'Header with Custom Left',
+  render: () => (
+    <Extension moises={mockMoises}>
+      <Extension.Header
+        title="Custom Left"
+        headerLeft={<Badge variant="soft" size="1">v2</Badge>}
+      />
+      <Extension.Content>
+        <Text size="2">`headerLeft` replaces the default back button.</Text>
+      </Extension.Content>
+    </Extension>
+  ),
+}
+
+export const HeaderCustomRight = {
+  name: 'Header with Custom Right',
+  render: () => (
+    <Extension moises={mockMoises}>
+      <Extension.Header
+        title="Options"
+        headerRight={
+          <IconButton variant="ghost" color="gray" size="1">
+            <DotsVerticalIcon width={16} />
+          </IconButton>
+        }
+      />
+      <Extension.Content>
+        <Text size="2">`headerRight` adds actions before the close button.</Text>
+      </Extension.Content>
+    </Extension>
+  ),
+}
+
+export const HeaderNoClose = {
+  name: 'Header without Close Button',
+  render: () => (
+    <Extension moises={mockMoises}>
+      <Extension.Header title="No Close" allowClose={false} />
+      <Extension.Content>
+        <Text size="2">Close button hidden via `allowClose={'{false}'}`.</Text>
+      </Extension.Content>
+    </Extension>
+  ),
+}
+
+export const ScrollableContent = {
+  name: 'Scrollable Content',
+  render: () => (
+    <Extension moises={mockMoises}>
+      <Extension.Header title="Scrollable" />
+      <Extension.Content>
+        {Array.from({ length: 20 }, (_, i) => (
+          <Card key={i}>Item {i + 1}</Card>
+        ))}
+      </Extension.Content>
+      <Extension.Footer>
+        <Text size="1" color="gray">Footer stays pinned</Text>
+      </Extension.Footer>
+    </Extension>
+  ),
+}
+
+// ---------------------------------------------------------------------------
+// Navigator mode (screen stack with push/pop)
+// ---------------------------------------------------------------------------
+
+const ITEMS = [
+  { id: 'drums', name: 'Drums', desc: 'Acoustic drum kit with multiple mic positions' },
+  { id: 'bass', name: 'Bass', desc: 'Electric bass recorded through DI and amp' },
+  { id: 'guitar', name: 'Guitar', desc: 'Clean electric guitar with stereo chorus' },
+  { id: 'vocals', name: 'Vocals', desc: 'Lead vocals with studio compression' },
+  { id: 'keys', name: 'Keys', desc: 'Rhodes piano through a rotary speaker sim' },
+]
+
+function HomeScreen() {
+  const { push } = useNavigation()
+
+  return (
+    <>
+      <Extension.Content>
+        {ITEMS.map((item) => (
+          <Card
+            key={item.id}
+            style={{ cursor: 'pointer' }}
+            onClick={() => push('detail', { itemId: item.id, itemName: item.name })}
+          >
+            <Flex direction="column" gap="1">
+              <Text size="2" weight="medium">{item.name}</Text>
+              <Text size="1" color="gray">{item.desc}</Text>
+            </Flex>
+          </Card>
+        ))}
+      </Extension.Content>
+      <Extension.Footer>
+        <Button variant="ghost" size="1" onClick={() => push('settings')}>
+          View Stack
+        </Button>
+      </Extension.Footer>
+    </>
+  )
+}
+
+function DetailScreen() {
+  const { push } = useNavigation()
+  const { params, setOptions } = useScreen()
+  const item = ITEMS.find((i) => i.id === params.itemId)
+
+  useEffect(() => {
+    setOptions({ title: params.itemName })
+  }, [params.itemName])
+
+  if (!item) {
+    return (
+      <Extension.Content>
+        <Text size="2" color="gray">Item not found.</Text>
+      </Extension.Content>
+    )
+  }
+
+  return (
+    <Extension.Content>
+      <Flex direction="column" gap="2">
+        <Text size="2" weight="medium">{item.name}</Text>
+        <Text size="2" color="gray">{item.desc}</Text>
+      </Flex>
+      <Button variant="soft" size="2" onClick={() => push('editor', { itemId: item.id })}>
+        Open Editor
+      </Button>
+    </Extension.Content>
+  )
+}
+
+function EditorScreen() {
+  const { setOptions } = useScreen()
+  const [dirty, setDirty] = useState(false)
+
+  useEffect(() => {
+    setOptions({
+      headerRight: dirty ? (
+        <Button variant="soft" size="1" onClick={() => setDirty(false)}>Save</Button>
+      ) : null,
+    })
+  }, [dirty])
+
+  return (
+    <Extension.Content>
+      <Text size="2" color="gray">
+        {dirty ? 'You have unsaved changes.' : 'No changes yet.'}
+      </Text>
+      {!dirty && (
+        <Button variant="soft" size="2" onClick={() => setDirty(true)}>
+          Make a change
+        </Button>
+      )}
+    </Extension.Content>
+  )
+}
+
+function SettingsScreen() {
+  const { stack } = useNavigation()
+
+  return (
+    <Extension.Content>
+      <Text size="2" weight="medium">Navigation Stack</Text>
+      <Flex direction="column" gap="1">
+        {stack.map((entry, i) => (
+          <Flex key={i} align="center" gap="2">
+            <Badge variant="soft" size="1">{i}</Badge>
+            <Text size="1">{entry.name}</Text>
+          </Flex>
+        ))}
+      </Flex>
+    </Extension.Content>
+  )
+}
+
+export const NavigatorFull = {
+  name: 'Navigator (Multi-Screen)',
+  render: () => (
+    <Extension moises={mockMoises} initialScreen="home" animated>
+      <Extension.Screen name="home" title="Navigator Demo" component={HomeScreen}
+        headerRight={
+          <IconButton variant="ghost" color="gray" size="1">
+            <DotsVerticalIcon width={16} />
+          </IconButton>
+        }
+      />
+      <Extension.Screen name="detail" title="Detail" component={DetailScreen} />
+      <Extension.Screen name="editor" title="Editor" component={EditorScreen} />
+      <Extension.Screen name="settings" title="Settings" component={SettingsScreen} />
+    </Extension>
+  ),
+}
+
+// ---------------------------------------------------------------------------
+// Navigator — minimal two-screen example
+// ---------------------------------------------------------------------------
+
+function ListScreen() {
+  const { push } = useNavigation()
+
+  return (
+    <Extension.Content>
+      <Text size="2" color="gray">A minimal two-screen navigator.</Text>
+      <Button variant="soft" size="2" onClick={() => push('about')}>
+        Go to About
+      </Button>
+    </Extension.Content>
+  )
+}
+
+function AboutScreen() {
+  return (
+    <Extension.Content>
+      <Text size="2">This is the about screen. Press the back arrow to return.</Text>
+    </Extension.Content>
+  )
+}
+
+export const NavigatorMinimal = {
+  name: 'Navigator (Minimal)',
+  render: () => (
+    <Extension moises={mockMoises} initialScreen="list" animated>
+      <Extension.Screen name="list" title="Home" component={ListScreen} />
+      <Extension.Screen name="about" title="About" component={AboutScreen} />
+    </Extension>
+  ),
+}
+
+// ---------------------------------------------------------------------------
+// Navigator — dynamic header via setOptions
+// ---------------------------------------------------------------------------
+
+function CounterScreen() {
+  const { setOptions } = useScreen()
+  const [count, setCount] = useState(0)
+
+  useEffect(() => {
+    setOptions({
+      title: `Count: ${count}`,
+      headerRight: (
+        <Button variant="soft" size="1" onClick={() => setCount(0)}>Reset</Button>
+      ),
+    })
+  }, [count])
+
+  return (
+    <Extension.Content>
+      <Button variant="soft" size="2" onClick={() => setCount((c) => c + 1)}>
+        Increment
+      </Button>
+    </Extension.Content>
+  )
+}
+
+export const DynamicHeader = {
+  name: 'Navigator (Dynamic Header)',
+  render: () => (
+    <Extension moises={mockMoises} initialScreen="counter">
+      <Extension.Screen name="counter" title="Count: 0" component={CounterScreen} />
+    </Extension>
+  ),
+}
+
+// ---------------------------------------------------------------------------
+// Navigator — custom close handler
+// ---------------------------------------------------------------------------
+
+function CloseInfoScreen() {
+  return (
+    <Extension.Content>
+      <Text size="2">The close button on this screen triggers a custom handler instead of `moises.extension.close()`.</Text>
+    </Extension.Content>
+  )
+}
+
+export const CustomClose = {
+  name: 'Navigator (Custom Close)',
+  render: () => (
+    <Extension moises={mockMoises} initialScreen="info">
+      <Extension.Screen
+        name="info"
+        title="Custom Close"
+        component={CloseInfoScreen}
+        onClose={() => console.log('custom onClose handler')}
+      />
+    </Extension>
+  ),
+}

package/src/components/ProductsList/ProductsList.jsx

@@ -18,11 +18,19 @@ export const ProductsList = ({
             align="center"
             px="3"
             py="2"
+            role="button"
+            tabIndex={0}
             className={classNames(styles.navItem, {
               [styles.navItemSelected]: isSelected,
               [styles.collapsed]: collapsed,
             })}
             onClick={() => onProductClick?.(product.id, product)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                onProductClick?.(product.id, product)
+              }
+            }}
           >
             {product.icon && (
               <div className={styles.navItemIcon}>{product.icon}</div>

package/src/components/ProductsList/ProductsList.module.css

@@ -63,6 +63,11 @@
     color: var(--neutral-alpha-12);
 }
 
+.navItem:focus-visible {
+    outline: 2px solid var(--neutral-alpha-8);
+    outline-offset: -3px;
+}
+
 .navItemSelected {
     background-color: var(--neutral-alpha-3);
 }

package/src/components/ProfileMenu/MenuTrigger.jsx

@@ -16,6 +16,8 @@ export function MenuTrigger({ className, user, collapsed, ...props }) {
   }
   return (
     <Flex
+      role="button"
+      tabIndex={0}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       className={classNames(styles.userProfile, { [styles.collapsed]: collapsed }, className)}

package/src/components/ProfileMenu/ProfileMenu.module.css

@@ -3,6 +3,11 @@
   width: 100%;
 }
 
+.userProfile:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: -3px;
+}
+
 .userProfileInner {
   display: flex;
   align-items: center;

package/src/components/Select/Select.jsx

@@ -69,7 +69,11 @@ export const Select = ({
               </Text>
             ) : undefined}
           </SelectRadix.Trigger>
-          <SelectRadix.Content position="popper" style={{ height: maxHeight }}>
+          <SelectRadix.Content
+            position="popper"
+            className={styles.selectContent}
+            style={{ height: maxHeight }}
+          >
             <SelectRadix.Group>
               {items.map((item) =>
                 item.type === 'separator' ? (

package/src/components/Select/Select.module.css

@@ -1,3 +1,70 @@
+/* Select content popover animation */
+.selectContent {
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+.selectContent[data-side='top'] {
+  animation-name: slideDownAndFade;
+}
+
+.selectContent[data-side='right'] {
+  animation-name: slideLeftAndFade;
+}
+
+.selectContent[data-side='bottom'] {
+  animation-name: slideUpAndFade;
+}
+
+.selectContent[data-side='left'] {
+  animation-name: slideRightAndFade;
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 .selectTrigger.soft:focus-visible,
 .selectTrigger.ghost:focus-visible {
   outline: none;

package/src/components/SetlistList/SetlistList.jsx

@@ -17,6 +17,7 @@ export const SetlistItem = ({
   onClick,
   className,
   style,
+  avatarStyle,
   avatar,
   text,
   subtitle,
@@ -50,6 +51,8 @@ export const SetlistItem = ({
     <Flex
       gap="3"
       align="center"
+      role="button"
+      tabIndex={0}
       onClick={onClick}
       className={classNames(styles.newSetlistItem, className, {
         [styles.navItemSelected]: isSelected,
@@ -58,6 +61,12 @@ export const SetlistItem = ({
       })}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          onClick?.()
+        }
+      }}
       style={style}
     >
       <Flex
@@ -68,13 +77,14 @@ export const SetlistItem = ({
         })}
       >
         {avatar && (
-          <div className={styles.avatarSetlist}>
+          <div className={styles.avatarSetlist} style={avatarStyle}>
             {typeof avatar === 'string' ? (
               <Avatar
                 src={avatar}
                 fallback={<SetlistIcon width={16} height={16} />}
-                size="3"
+                // size="3"
                 radius="small"
+                style={avatarStyle}
               />
             ) : (
               avatar
@@ -141,9 +151,11 @@ export const SetlistList = ({
 }) => {
   const [openSetlistMenuId, setOpenSetlistMenuId] = useState(null)
   const [isHoveredWhenCollapsed, setIsHoveredWhenCollapsed] = useState(false)
+  const [isFullyCollapsed, setIsFullyCollapsed] = useState(false)
   const hoverTimeoutRef = useRef(null)
+  const collapseCenterTimeoutRef = useRef(null)
   const collapsedItemHeight = 44
-  const collapsedVisibleOffset = 4
+  const collapsedVisibleOffset = 8
   const maxCollapsedItems = 4
   const collapsedNewItemOffset = collapsed && onNewSetlistClick ? 1 : 0
   const showCollapsedStack = collapsed && !isHoveredWhenCollapsed
@@ -170,6 +182,26 @@ export const SetlistList = ({
     }, 180)
   }
 
+  useEffect(() => {
+    if (showCollapsedStack) {
+      collapseCenterTimeoutRef.current = setTimeout(() => {
+        setIsFullyCollapsed(true)
+        collapseCenterTimeoutRef.current = null
+      }, 200)
+    } else {
+      setIsFullyCollapsed(false)
+      if (collapseCenterTimeoutRef.current) {
+        clearTimeout(collapseCenterTimeoutRef.current)
+        collapseCenterTimeoutRef.current = null
+      }
+    }
+    return () => {
+      if (collapseCenterTimeoutRef.current) {
+        clearTimeout(collapseCenterTimeoutRef.current)
+      }
+    }
+  }, [showCollapsedStack])
+
   useEffect(() => {
     return () => {
       if (hoverTimeoutRef.current) {
@@ -200,7 +232,9 @@ export const SetlistList = ({
     </div>
   )
 
-  const getCollapsedStackStyle = (index) => {
+  const collapsedStackAvatarSizes = ['38px', '37px', '36px', '35px']
+
+  const getCollapsedStackStyle = (index, setlist) => {
     if (!collapsed) return undefined
     if (!showCollapsedStack) {
       return {
@@ -211,6 +245,14 @@ export const SetlistList = ({
     }
     const stackPosition = index + collapsedNewItemOffset
     const zIndex = setlists.length + collapsedNewItemOffset - stackPosition
+
+    const boxShadows = [
+      '0 3.84px 15.36px -7.68px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 2.88px 11.52px -3.84px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 1.92px 2.88px -1.92px var(--Overlays-Black-Alpha-3, rgba(0, 0, 0, 0.15))',
+      '0 3.686px 14.746px -7.373px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 2.765px 11.059px -3.686px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 1.843px 2.765px -1.843px var(--Overlays-Black-Alpha-3, rgba(0, 0, 0, 0.15))',
+      '0 3.539px 14.156px -7.078px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 2.654px 10.617px -3.539px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 1.769px 2.654px -1.769px var(--Overlays-Black-Alpha-3, rgba(0, 0, 0, 0.15))',
+      '0 3.401px 13.603px -6.801px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 2.551px 10.202px -3.401px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 1.701px 2.551px -1.701px var(--Overlays-Black-Alpha-3, rgba(0, 0, 0, 0.15))',
+    ]
+
     return {
       position: 'relative',
       marginTop:
@@ -218,6 +260,7 @@ export const SetlistList = ({
           ? 0
           : -(collapsedItemHeight - collapsedVisibleOffset),
       zIndex,
+      boxShadow: boxShadows[index],
     }
   }
 
@@ -239,6 +282,7 @@ export const SetlistList = ({
           direction="column"
           className={classNames(styles.setlistsContent, {
             [styles.collapsedStack]: showCollapsedStack,
+            [styles.collapsedStackCentered]: isFullyCollapsed,
             [styles.collapsedMask]: collapsed,
           })}
         >
@@ -283,6 +327,14 @@ export const SetlistList = ({
                   setOpenSetlistMenuId(nextOpen ? setlist.id : null)
                 }}
                 avatar={setlist.icon || <SetlistIcon width={16} height={16} />}
+                avatarStyle={
+                  showCollapsedStack
+                    ? {
+                      width: collapsedStackAvatarSizes[index],
+                      height: collapsedStackAvatarSizes[index],
+                    }
+                    : undefined
+                }
                 group={setlist.group}
                 moises={setlist.moises}
                 text={setlist.label}
@@ -294,7 +346,7 @@ export const SetlistList = ({
                   [styles.collapsedStackItem]: showCollapsedStack,
                   [styles.collapsedTransition]: collapsed,
                 })}
-                style={getCollapsedStackStyle(index)}
+                style={getCollapsedStackStyle(index, setlist)}
               />
             )
           })}