@moises.ai/design-system 3.6.2 → 3.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.6.2",
+  "version": "3.6.3",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/SetlistList/SetlistList.jsx

@@ -9,7 +9,8 @@ import {
   PlusIcon,
 } from '../../icons'
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu'
-import { useState, useEffect, useRef, useMemo } from 'react'
+import { Tooltip } from '../Tooltip/Tooltip'
+import { useState, useEffect, useRef, useMemo, Fragment } from 'react'
 import { MoreButton } from '../MoreButton/MoreButton'
 
 export const SetlistItem = ({
@@ -198,12 +199,14 @@ export const SetlistList = ({
     }, 0)
   }
 
+  // Só centraliza os avatares depois que a sidebar terminou de colapsar (width 280ms + delay 100ms)
+  const collapseAnimationDuration = 400
   useEffect(() => {
     if (showCollapsedStack) {
       collapseCenterTimeoutRef.current = setTimeout(() => {
         setIsFullyCollapsed(true)
         collapseCenterTimeoutRef.current = null
-      }, 200)
+      }, collapseAnimationDuration)
     } else {
       setIsFullyCollapsed(false)
       if (collapseCenterTimeoutRef.current) {
@@ -336,9 +339,8 @@ export const SetlistList = ({
             ))}
           {visibleSetlists.map((setlist, index) => {
             const isSelected = selectedSetlistId === setlist.id
-            return (
+            const setlistItem = (
               <SetlistItem
-                key={setlist.id}
                 isSelected={isSelected}
                 onClick={() => onSetlistClick?.(setlist.id)}
                 dropdownMenuOpen={openSetlistMenuId === setlist.id}
@@ -368,6 +370,15 @@ export const SetlistList = ({
                 style={getCollapsedStackStyle(index, setlist)}
               />
             )
+            return collapsed && !showCollapsedStack ? (
+              <Tooltip key={setlist.id} content={setlist.label} side="right">
+                <div className={styles.tooltipTriggerWrapper}>
+                  {setlistItem}
+                </div>
+              </Tooltip>
+            ) : (
+              <Fragment key={setlist.id}>{setlistItem}</Fragment>
+            )
           })}
         </Flex>
       </div>

package/src/components/SetlistList/SetlistList.module.css

@@ -1,3 +1,8 @@
+.tooltipTriggerWrapper {
+  display: block;
+  width: 100%;
+}
+
 .newSetlistItem {
     cursor: pointer;
     margin: 0 12px;

package/src/components/Tooltip/Tooltip.jsx

@@ -0,0 +1,67 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import styles from './Tooltip.module.css'
+import classNames from 'classnames'
+
+export const Tooltip = ({
+  children,
+  content,
+  shortcut,
+  color = 'gray',
+  delayDuration = 200,
+  skipDelayDuration,
+  disableHoverableContent,
+  ...props
+}) => {
+
+  const {
+    defaultOpen,
+    open,
+    onOpenChange,
+    ...restContentProps
+  } = props
+
+  const providerProps = {
+    delayDuration,
+    skipDelayDuration,
+    disableHoverableContent,
+  }
+
+  const rootProps = {
+    defaultOpen,
+    open,
+    onOpenChange,
+  }
+
+  return (
+    <TooltipPrimitive.Provider {...providerProps}>
+      <TooltipPrimitive.Root {...rootProps}>
+        <TooltipPrimitive.Trigger asChild>
+          {children}
+        </TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Content
+            className={classNames(
+              styles.TooltipContent,
+              styles[`TooltipContent--${color}`]
+            )}
+            sideOffset={5}
+            {...restContentProps}
+          >
+            <span className={styles.TooltipText}>{content}</span>
+            {shortcut && (
+              <span className={classNames(
+                styles.TooltipShortcut,
+                styles[`TooltipShortcut--${color}`]
+              )}>
+                {shortcut}
+              </span>
+            )}
+            <TooltipPrimitive.Arrow className={styles.TooltipArrow} />
+          </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  )
+}
+
+Tooltip.displayName = 'Tooltip'

package/src/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,129 @@
+.TooltipContent {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  text-align: center;
+  font-family: var(--Typography-Font-family-text, "Articulat CF");
+  font-size: var(--Typography-Font-size-1, 12px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--Typography-Line-height-1, 16px);
+  letter-spacing: var(--Typography-Letter-spacing-1, 0.04px);
+  z-index: 9999;
+  animation-duration: 0.15s;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+.TooltipContent[data-state='delayed-open'][data-side='top'] {
+  animation-name: slideDownAndFade;
+}
+
+.TooltipContent[data-state='delayed-open'][data-side='right'] {
+  animation-name: slideLeftAndFade;
+}
+
+.TooltipContent[data-state='delayed-open'][data-side='bottom'] {
+  animation-name: slideUpAndFade;
+}
+
+.TooltipContent[data-state='delayed-open'][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);
+  }
+}
+
+/* White variant */
+.TooltipContent--white {
+  border-radius: var(--Radius-1, 3px);
+  background: var(--Colors-Neutral-Neutral-12, #EDEEF0);
+  color: var(--Colors-Neutral-Neutral-1, #111113);
+}
+
+/* Gray variant */
+.TooltipContent--gray {
+  border-radius: var(--Radius-1, 3px);
+  background: var(--Colors-Neutral-Neutral-4, #272A2D);
+  color: var(--Colors-Neutral-Neutral-Alpha-12, rgba(252, 253, 255, 0.94));
+}
+
+.TooltipText {
+  white-space: nowrap;
+}
+
+.TooltipShortcut {
+  font-family: var(--Typography-Font-family-text, "Articulat CF");
+  font-size: var(--Typography-Font-size-0, 11px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--Typography-Line-height-0, 11px);
+  letter-spacing: var(--Typography-Letter-spacing-0, 0);
+  white-space: nowrap;
+}
+
+/* White shortcut */
+.TooltipShortcut--white {
+  color: var(--Colors-Neutral-Neutral-8, #5A6169);
+}
+
+/* Gray shortcut */
+.TooltipShortcut--gray {
+  color: var(--Colors-Neutral-Neutral-Alpha-10, rgba(229, 237, 253, 0.48));
+}
+
+.TooltipArrow {
+  fill: var(--Colors-Neutral-Neutral-4, #272A2D);
+}
+
+.TooltipContent--white .TooltipArrow {
+  fill: var(--Colors-Neutral-Neutral-12, #EDEEF0);
+}
+
+.TooltipContent {
+  display: flex;
+  flex-direction: column;
+  gap: 0px;
+}

package/src/components/Tooltip/Tooltip.stories.jsx

@@ -0,0 +1,59 @@
+import { Tooltip } from './Tooltip'
+import { Button } from '../Button/Button'
+
+export default {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['white', 'gray'],
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    content: 'Tooltip',
+    color: 'gray',
+    children: <Button>Hover me</Button>,
+  },
+}
+
+export const GrayVariant = {
+  args: {
+    content: 'Tooltip',
+    color: 'gray',
+    children: <Button>Hover me</Button>,
+  },
+}
+
+export const WhiteVariant = {
+  args: {
+    content: 'Tooltip',
+    color: 'white',
+    children: <Button>Hover me</Button>,
+  },
+}
+
+export const WithShortcutGray = {
+  args: {
+    content: 'Tooltip',
+    shortcut: '⌘ C',
+    color: 'gray',
+    children: <Button>Hover me</Button>,
+  },
+}
+
+export const WithShortcutWhite = {
+  args: {
+    content: 'Tooltip',
+    shortcut: '⌘ C',
+    color: 'white',
+    children: <Button>Hover me</Button>,
+  },
+}

package/src/index.jsx

@@ -32,7 +32,6 @@ import {
   Switch,
   Table,
   Tabs,
-  Tooltip,
   VisuallyHidden,
   DataList,
 } from '@radix-ui/themes'
@@ -70,7 +69,6 @@ export {
   Switch,
   Table,
   Tabs,
-  Tooltip,
   VisuallyHidden,
   DataList,
 }
@@ -154,4 +152,5 @@ export { InstrumentSelector } from './components/InstrumentSelector/InstrumentSe
 export { Card as CardWidget } from './components/Card/Card'
 export { ProjectsList } from './components/ProjectsList/ProjectsList'
 
-export { MoreButton } from './components/MoreButton/MoreButton'
+export { MoreButton } from './components/MoreButton/MoreButton'
+export { Tooltip } from './components/Tooltip/Tooltip'