@moises.ai/design-system 3.4.5 → 3.5.0

package/src/lib/menu/Menu.module.css

@@ -0,0 +1,356 @@
+.menuContent, .menuSubContent {
+  border-radius: 8px;
+  width: fit-content;
+  min-width: 151px;
+  background-color: var(--panel-solid) !important;
+  padding: 4px;
+  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.30), 0 12px 60px 0 rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  border: 1px solid var(--neutral-alpha-3);
+}
+
+[data-radix-popper-content-wrapper] {
+  z-index: 9999 !important;
+}
+
+.menuPortal {
+  border-radius: 8px;
+  border: 1px solid var(--neutral-alpha-3);
+  background: #18191B;
+  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.30), 0 12px 60px 0 rgba(0, 0, 0, 0.15);
+}
+
+.menuItem {
+  all: unset;
+  color: var(--white);
+  line-height: 1;
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+  gap: 4px;
+  font-weight: 400;
+}
+
+.menuItem-size-1 {
+  font-size: 12px;
+  padding: 4px 8px;
+
+  & .label {
+    font-size: 12px;
+  }
+
+  & .secondaryTextBottom,
+  & .secondaryTextRight {
+    font-size: 11px;
+  }
+
+  & .keybinding {
+    font-size: 11px;
+  }
+}
+
+.menuItem-size-2 {
+  font-size: 14px;
+  padding: 6px 8px;
+
+  & .label {
+    font-size: 14px;
+  }
+
+  & .secondaryTextBottom,
+  & .secondaryTextRight {
+    font-size: 12px;
+  }
+
+  & .keybinding {
+    font-size: 12px;
+  }
+}
+
+.menuItem[data-disabled] {
+  color: var(--neutral-alpha-7);
+  cursor: not-allowed;
+  pointer-events: none;
+
+  & .label,
+  & .secondaryTextBottom,
+  & .secondaryTextRight,
+  & .keybinding,
+  & .leftIcon,
+  & .rightIcon,
+  & .checkboxIndicatorSlot {
+    color: var(--neutral-alpha-7);
+  }
+
+  & .leftIcon > svg,
+  & .rightIcon > svg,
+  & .menuCheckboxIndicator > svg {
+    color: var(--neutral-alpha-7);
+  }
+}
+
+.menuSeparator {
+  height: 1px;
+  background-color: var(--neutral-alpha-3);
+  margin: 8px 0;
+}
+
+.leftIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--neutral-alpha-11);
+  flex-shrink: 0;
+  height: 18px;
+}
+
+.leftIcon > svg {
+  width: 16px;
+  height: 16px;
+}
+
+.labelContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+.label {
+  color: var(--white);
+  line-height: 18px;
+}
+
+.secondaryTextBottom {
+  font-size: 12px;
+  color: var(--neutral-alpha-9);
+  line-height: 1.2;
+}
+
+.secondaryTextRight {
+  font-size: 12px;
+  color: var(--neutral-alpha-9);
+}
+
+.rightSlot {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--neutral-alpha-11);
+  flex-shrink: 0;
+  height: 18px;
+}
+
+.rightSlot > svg {
+  width: 12px;
+  height: 12px;
+  color: var(--neutral-alpha-10);
+}
+
+.keybinding {
+  font-size: 12px;
+  color: var(--neutral-alpha-9);
+}
+
+.rightIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--neutral-alpha-11);
+}
+
+.rightIcon > svg {
+  width: 14px;
+  height: 14px;
+}
+
+.menuSub {
+  position: relative;
+}
+
+.menuSubTrigger {
+  all: unset;
+  font-size: 14px;
+  color: var(--white);
+  font-weight: 400;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  gap: 4px;
+}
+
+.menuSubTrigger-size-1 {
+  font-size: 12px;
+  padding: 4px 8px;
+
+  & .rightSlot > svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.menuSubTrigger-size-2 {
+  font-size: 14px;
+  padding: 6px 8px;
+
+  & .rightSlot > svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.menuItem[data-state='open'],
+.menuTrigger[data-state='open'],
+.menuTrigger[data-highlighted] {
+  background-color: transparent;
+}
+
+.showActiveTrigger {
+  background-color: var(--neutral-alpha-0-50) !important;
+  border-radius: 3px;
+
+  &:hover {
+    background-color: var(--neutral-alpha-2) !important;
+  }
+}
+
+.menuSubTrigger[data-highlighted],
+.menuItem[data-highlighted],
+.menuSubTrigger[data-state='open'] {
+  border-radius: 6px;
+  background-color: var(--neutral-alpha-3);
+}
+
+.menuSubContent {
+  min-width: 242px;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+.menuLabel {
+  font-size: 12px;
+  color: var(--neutral-alpha-9);
+  font-weight: 400;
+  line-height: 1;
+  padding: 4px 8px;
+  margin-bottom: 4px;
+
+  &[data-disabled] {
+    color: var(--neutral-alpha-7);
+  }
+}
+
+.menuLabel-size-1 {
+  font-size: 12px;
+  padding: 4px 8px;
+}
+
+.menuLabel-size-2 {
+  font-size: 14px;
+  padding: 4px 8px;
+}
+
+.menuItemSelected {
+  background-color: var(--neutral-alpha-3);
+  border-radius: 6px;
+  cursor: default;
+  font-weight: 400;
+
+  &[data-disabled] {
+    background-color: transparent;
+    color: var(--neutral-alpha-7);
+
+    & .label,
+    & .secondaryTextBottom,
+    & .secondaryTextRight,
+    & .keybinding,
+    & .leftIcon,
+    & .rightIcon,
+    & .checkboxIndicatorSlot {
+      color: var(--neutral-alpha-7);
+    }
+
+    & .leftIcon > svg,
+    & .rightIcon > svg,
+    & .menuCheckboxIndicator > svg {
+      color: var(--neutral-alpha-7);
+    }
+  }
+}
+
+.menuItemIndicator {
+  position: absolute;
+  right: 10px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--neutral-alpha-10);
+}
+
+.checkboxIndicatorSlot {
+  width: 16px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.menuCheckboxIndicator {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--white);
+}
+
+.menuCheckboxIndicator > svg {
+  width: 16px;
+  height: 16px;
+}
+
+.menuCheckboxItem {
+  position: relative;
+}
+
+.red {
+  color: color(display-p3 1 .57 .55);
+
+  & .label,
+  & .leftIcon,
+  & .rightIcon,
+  & .checkboxIndicatorSlot {
+    color: color(display-p3 1 .57 .55);
+  }
+
+  & .leftIcon > svg,
+  & .rightIcon > svg,
+  & .menuCheckboxIndicator > svg {
+    color: color(display-p3 1 .57 .55);
+  }
+}
+
+.cyan {
+  color: var(--aqua-dark-alpha-11);
+
+  & .label,
+  & .leftIcon,
+  & .rightIcon,
+  & .checkboxIndicatorSlot {
+    color: var(--aqua-dark-alpha-11);
+  }
+
+  & .leftIcon > svg,
+  & .rightIcon > svg,
+  & .menuCheckboxIndicator > svg {
+    color: var(--aqua-dark-alpha-11);
+  }
+}
+

package/src/lib/menu/index.js

@@ -0,0 +1,2 @@
+export { createRenderItem, styles } from './renderItem'
+

package/src/lib/menu/renderItem.jsx

@@ -0,0 +1,190 @@
+import React from 'react'
+import { CheckIcon, ChevronRightIcon } from '@radix-ui/react-icons'
+import classNames from 'classnames'
+import styles from './Menu.module.css'
+
+/**
+ * Creates a render function for menu items.
+ * @param {Object} MenuPrimitives - The Radix menu primitives (DropdownMenu or ContextMenu)
+ * @returns {Function} - The render function for menu options
+ */
+export const createRenderItem = (MenuPrimitives) => {
+  const renderItem = (
+    opt,
+    size = '2',
+    onSelectionChange,
+    closeOnSelect = true,
+  ) => {
+    switch (opt.type) {
+      case 'custom':
+        return (
+          <div key={opt.key} className={styles.menuItem}>
+            {opt.customRender()}
+          </div>
+        )
+
+      case 'separator':
+        return (
+          <MenuPrimitives.Separator
+            key={opt.key}
+            className={styles.menuSeparator}
+          />
+        )
+
+      case 'label':
+        return (
+          <MenuPrimitives.Label
+            key={opt.key}
+            className={classNames(
+              styles.menuLabel,
+              styles[`menuLabel-size-${size}`],
+            )}
+          >
+            {opt.label}
+          </MenuPrimitives.Label>
+        )
+
+      case 'sub':
+        return (
+          <MenuPrimitives.Sub key={opt.key} className={styles.menuSub}>
+            <MenuPrimitives.SubTrigger
+              className={classNames(
+                styles.menuSubTrigger,
+                styles[`menuSubTrigger-size-${size}`],
+                {
+                  [styles.red]: opt.color === 'red' && !opt.disabled,
+                  [styles.cyan]: opt.color === 'cyan' && !opt.disabled,
+                },
+              )}
+            >
+              {opt.label}
+              <div className={styles.rightSlot}>
+                <ChevronRightIcon />
+              </div>
+            </MenuPrimitives.SubTrigger>
+
+            <MenuPrimitives.SubContent className={styles.menuSubContent}>
+              {opt?.children?.map((child) =>
+                renderItem(child, size, onSelectionChange, closeOnSelect),
+              )}
+            </MenuPrimitives.SubContent>
+          </MenuPrimitives.Sub>
+        )
+
+      case 'item':
+        return (
+          <MenuPrimitives.Item
+            key={opt.key}
+            className={classNames(
+              styles.menuItem,
+              styles[`menuItem-size-${size}`],
+              {
+                [styles.red]: opt.color === 'red' && !opt.disabled,
+                [styles.cyan]: opt.color === 'cyan' && !opt.disabled,
+              },
+            )}
+            onSelect={(event) => {
+              if (!closeOnSelect) {
+                event.preventDefault()
+              }
+              opt.onClick?.()
+              onSelectionChange?.(opt)
+            }}
+            disabled={opt.disabled}
+          >
+            {opt.icon && <span className={styles.leftIcon}>{opt.icon}</span>}
+            <div className={styles.labelContainer}>
+              <span className={styles.label}>{opt.label}</span>
+              {opt.secondaryText && opt.secondaryTextPosition === 'bottom' && (
+                <span className={styles.secondaryTextBottom}>
+                  {opt.secondaryText}
+                </span>
+              )}
+            </div>
+            <div className={styles.rightSlot}>
+              {opt.secondaryText && opt.secondaryTextPosition !== 'bottom' && (
+                <span className={styles.secondaryTextRight}>
+                  {opt.secondaryText}
+                </span>
+              )}
+              {opt.keybinding && (
+                <span className={styles.keybinding}>{opt.keybinding}</span>
+              )}
+              {opt.rightIcon && (
+                <span className={styles.rightIcon}>{opt.rightIcon}</span>
+              )}
+            </div>
+          </MenuPrimitives.Item>
+        )
+
+      case 'checkbox':
+        return (
+          <MenuPrimitives.CheckboxItem
+            key={opt.key}
+            checked={opt.checked}
+            onCheckedChange={(checked) => {
+              opt.onChange?.(checked)
+              onSelectionChange?.({ ...opt, checked })
+            }}
+            onSelect={(event) => {
+              if (!closeOnSelect) {
+                event.preventDefault()
+              }
+            }}
+            className={classNames(
+              styles.menuItem,
+              styles.menuCheckboxItem,
+              {
+                [styles.menuItemSelected]: opt.checked,
+                [styles[`menuItem-size-${size}`]]: size,
+                [styles.red]: opt.color === 'red' && !opt.disabled,
+                [styles.cyan]: opt.color === 'cyan' && !opt.disabled,
+              },
+            )}
+            disabled={opt.disabled}
+          >
+            <span className={styles.checkboxIndicatorSlot}>
+              <MenuPrimitives.ItemIndicator
+                className={styles.menuCheckboxIndicator}
+              >
+                <CheckIcon
+                  width={size === '1' ? 12 : 16}
+                  height={size === '1' ? 12 : 16}
+                />
+              </MenuPrimitives.ItemIndicator>
+            </span>
+            {opt.icon && <span className={styles.leftIcon}>{opt.icon}</span>}
+            <div className={styles.labelContainer}>
+              <span className={styles.label}>{opt.label}</span>
+              {opt.secondaryText && opt.secondaryTextPosition === 'bottom' && (
+                <span className={styles.secondaryTextBottom}>
+                  {opt.secondaryText}
+                </span>
+              )}
+            </div>
+            <div className={styles.rightSlot}>
+              {opt.secondaryText && opt.secondaryTextPosition !== 'bottom' && (
+                <span className={styles.secondaryTextRight}>
+                  {opt.secondaryText}
+                </span>
+              )}
+              {opt.keybinding && (
+                <span className={styles.keybinding}>{opt.keybinding}</span>
+              )}
+              {opt.rightIcon && (
+                <span className={styles.rightIcon}>{opt.rightIcon}</span>
+              )}
+            </div>
+          </MenuPrimitives.CheckboxItem>
+        )
+
+      default:
+        return null
+    }
+  }
+
+  return renderItem
+}
+
+export { styles }
+

package/src/primitives.jsx

@@ -0,0 +1,71 @@
+import {
+  AccessibleIcon,
+  Accordion,
+  AlertDialog,
+  AspectRatio,
+  Avatar,
+  Checkbox,
+  Collapsible,
+  ContextMenu,
+  Dialog,
+  Direction,
+  DropdownMenu,
+  Form,
+  HoverCard,
+  Label,
+  Menubar,
+  NavigationMenu,
+  unstable_OneTimePasswordField,
+  unstable_PasswordToggleField,
+  Popover,
+  Portal,
+  Progress,
+  RadioGroup,
+  ScrollArea,
+  Separator,
+  Slot,
+  Switch,
+  Tabs,
+  Toast,
+  Toggle,
+  ToggleGroup,
+  Toolbar,
+  Tooltip,
+  VisuallyHidden,
+} from 'radix-ui'
+
+export {
+  AccessibleIcon,
+  Accordion,
+  AlertDialog,
+  AspectRatio,
+  Avatar,
+  Checkbox,
+  Collapsible,
+  ContextMenu,
+  Dialog,
+  Direction,
+  DropdownMenu,
+  Form,
+  HoverCard,
+  Label,
+  Menubar,
+  NavigationMenu,
+  unstable_OneTimePasswordField,
+  unstable_PasswordToggleField,
+  Popover,
+  Portal,
+  Progress,
+  RadioGroup,
+  ScrollArea,
+  Separator,
+  Slot,
+  Switch,
+  Tabs,
+  Toast,
+  Toggle,
+  ToggleGroup,
+  Toolbar,
+  Tooltip,
+  VisuallyHidden,
+}

package/src/styles.css

@@ -0,0 +1,10 @@
+/* Import Radix UI Themes base styles */
+@import '@radix-ui/themes/styles.css';
+
+/* Import custom theme overrides and colors */
+@import './colors/custom-styles.css';
+
+/* 
+ * Any additional global styles or customizations can be added here.
+ * These styles will be bundled into the final styles.css file.
+ */

package/src/utils/avatarUtils.js

@@ -0,0 +1,18 @@
+/**
+ * Converts external avatar URLs to use local proxy to avoid CORS/COEP issues
+ * @param {string} url - The original URL
+ * @returns {string} - The proxied URL
+ */
+export function getProxiedAvatarUrl(url) {
+  if (!url) return url;
+
+  // Check if it's a Google Storage URL for voice avatars
+  if (url.startsWith("https://storage.googleapis.com/moises-api-assets/voice/")) {
+    // Extract the filename from the URL
+    const filename = url.replace("https://storage.googleapis.com/moises-api-assets/voice/", "");
+    return `/api/proxy/avatar/${filename}`;
+  }
+
+  // Return original URL if it's not a Google Storage URL
+  return url;
+}

package/src/utils/constants.js

@@ -0,0 +1,16 @@
+export const UI_CONFIG = {
+  modal: {
+    width: '480px',
+    height: '600px',
+  },
+  timeouts: {
+    feedbackDuration: 3000,
+    debounceDelay: 100,
+    animationDuration: 200,
+  },
+  audio: {
+    paddingSeconds: 1,
+    silencePaddingStart: 1,
+    silencePaddingEnd: 1,
+  },
+}

package/src/utils/use-isomorphic-layout-effect.js

@@ -0,0 +1,6 @@
+import { useEffect, useLayoutEffect } from 'react'
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect
+
+export { useIsomorphicLayoutEffect }

package/src/utils/useEventListener.js

@@ -0,0 +1,34 @@
+/* eslint-disable */
+/* tslint:disable */
+import { useEffect, useRef } from 'react'
+// See: https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect'
+
+function useEventListener(eventName, handler, element) {
+  // Create a ref that stores handler
+  const savedHandler = useRef(handler)
+
+  useIsomorphicLayoutEffect(() => {
+    savedHandler.current = handler
+  }, [handler])
+
+  useEffect(() => {
+    // Define the listening target
+    const targetElement = element?.current || window
+    if (!(targetElement && targetElement.addEventListener)) {
+      return
+    }
+
+    // Create event listener that calls handler function stored in ref
+    const eventListener = (event) => savedHandler.current(event)
+
+    targetElement.addEventListener(eventName, eventListener)
+
+    // Remove event listener on cleanup
+    return () => {
+      targetElement.removeEventListener(eventName, eventListener)
+    }
+  }, [eventName, element])
+}
+
+export { useEventListener }