@moises.ai/design-system 3.8.0 → 3.9.0

package/package.json

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

package/src/components/EmptyState/EmptyState.jsx

@@ -0,0 +1,88 @@
+import { Flex } from '@radix-ui/themes'
+import { Button } from '../Button/Button'
+import styles from './EmptyState.module.css'
+import classNames from 'classnames'
+import { Text } from '../Text/Text'
+
+// Emphasis: Low  High
+// Size:  Medium  Large
+export const EmptyState = ({
+  title = 'Title',
+  secondaryText = 'Secondary text',
+  buttonLabel = 'Button',
+  onButtonClick,
+  icon,
+  showIcon = true,
+  showSecondaryText = true,
+  showButton = true,
+  className,
+  titleMultiline = false,
+  emphasis = 'low',
+  size = 'medium',
+  children,
+  ...props
+}) => {
+  const hasButtonContent = children != null || buttonLabel != null
+  return (
+    <Flex
+      className={classNames(className)}
+      direction="column"
+      align="center"
+      justify="center"
+      {...props}
+    >
+      <Flex direction="column" align="center" justify="center" className={styles.content} gap="5" py="6">
+        {showIcon && (
+          <div className={classNames(styles.iconWrapper, {
+            [styles.iconWrapperLarge]: size === 'large',
+            [styles.iconWrapperMedium]: size === 'medium',
+            [styles.iconWrapperLow]: emphasis === 'low',
+            [styles.iconWrapperHigh]: emphasis === 'high',
+          })} aria-hidden>
+            {icon}
+          </div>
+        )}
+        <Flex direction="column" align="center" justify="center" className={styles.textGroup} gap="2">
+          <Text
+            size={size === 'large' ? '7' : '4'}
+            weight="medium"
+            className={classNames({
+              [styles.titleMultiline]: titleMultiline,
+              [styles.titleLow]: emphasis === 'low',
+              [styles.titleHigh]: emphasis === 'high',
+            })}
+          >
+            {title}
+          </Text>
+          {showSecondaryText && secondaryText != null && (
+            <Text
+              size={size === 'large' ? '3' : '2'}
+              weight="regular"
+              className={classNames(styles.secondaryText, {
+                [styles.secondaryTextLow]: emphasis === 'low',
+                [styles.secondaryTextHigh]: emphasis === 'high',
+              })}
+            >{secondaryText}</Text>
+          )}
+        </Flex>
+        {showButton && hasButtonContent && (
+          <div>
+            {children ?? (
+              <Button
+                size={size === 'large' ? '3' : '2'}
+                variant={emphasis === 'low' ? 'soft' : 'solid'}
+                onClick={onButtonClick}
+                aria-label={buttonLabel}
+              >
+                {buttonLabel}
+              </Button>
+            )}
+          </div>
+        )}
+
+      </Flex>
+    </Flex>
+  )
+}
+
+EmptyState.displayName = 'EmptyState'

package/src/components/EmptyState/EmptyState.module.css

@@ -0,0 +1,91 @@
+
+.content {
+
+  max-width: 480px;
+  min-width: 320px;
+  width: 100%;
+
+}
+
+.iconWrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--neutral-alpha-9);
+}
+
+.iconWrapperLarge {
+  width: 32px;
+  height: 32px;
+
+  svg {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+.iconWrapperMedium {
+  width: 24px;
+  height: 24px;
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.iconWrapperLow {
+  color: var(--neutral-alpha-10);
+}
+
+.iconWrapperHigh {
+  color: var(--neutral-alpha-12);
+}
+.textGroup {
+  width: 100%;
+}
+
+.title {
+  font-family: inherit;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 26px;
+  letter-spacing: -0.04px;
+  color: var(--neutral-alpha-10);
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.titleMultiline {
+  white-space: normal;
+}
+
+.titleLow {
+  color: var(--neutral-alpha-10);
+}
+
+.titleHigh {
+  color: var(--neutral-alpha-12);
+}
+
+.secondaryText {
+  font-family: inherit;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0;
+  text-align: center;
+  width: 100%;
+}
+
+
+.secondaryTextLow {
+  color: var(--neutral-alpha-9);
+}
+
+.secondaryTextHigh {
+  color: var(--neutral-alpha-11);
+}

package/src/components/EmptyState/EmptyState.stories.jsx

@@ -0,0 +1,192 @@
+import { EmptyState } from './EmptyState'
+import { InfoCircledIcon } from '@radix-ui/react-icons'
+
+export default {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## EmptyState
+
+Displays an empty state with icon, title, secondary text, and optional action. Aligned with the design system (Figma) with **emphasis** and **size** variants.
+
+### Usage
+
+\`\`\`jsx
+import { EmptyState } from '@moises.ai/design-system'
+import { InfoCircledIcon } from '@radix-ui/react-icons'
+
+// Default: low emphasis, medium size
+<EmptyState
+  title="No items in your setlist"
+  secondaryText="Add tracks from your library or search for songs."
+  buttonLabel="Add track"
+  onButtonClick={() => openLibrary()}
+  icon={<InfoCircledIcon />}
+/>
+
+// High emphasis, large size
+<EmptyState
+  title="No projects"
+  secondaryText="Create your first project to get started."
+  buttonLabel="Create project"
+  emphasis="high"
+  size="large"
+  icon={<PlusIcon />}
+  onButtonClick={() => createProject()}
+/>
+
+// No button, message only
+<EmptyState
+  title="No results"
+  secondaryText="Try different search terms."
+  showButton={false}
+  icon={<MagnifyingGlassIcon />}
+/>
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Main title displayed in the empty state.',
+    },
+    secondaryText: {
+      control: 'text',
+      description: 'Supporting secondary text.',
+    },
+    buttonLabel: {
+      control: 'text',
+      description: 'Action button label.',
+    },
+    onButtonClick: {
+      action: 'clicked',
+      description: 'Called when the button is clicked.',
+    },
+    icon: {
+      description: 'Icon displayed above the title (e.g. InfoCircledIcon).',
+    },
+    showIcon: {
+      control: 'boolean',
+      description: 'Show or hide the icon.',
+    },
+    showSecondaryText: {
+      control: 'boolean',
+      description: 'Show or hide the secondary text.',
+    },
+    showButton: {
+      control: 'boolean',
+      description: 'Show or hide the button (or action area).',
+    },
+    emphasis: {
+      control: 'select',
+      options: ['low', 'high'],
+      description: "Visual emphasis: 'low' (subtle, soft button) or 'high' (prominent, solid button).",
+    },
+    size: {
+      control: 'select',
+      options: ['medium', 'large'],
+      description: "Size: 'medium' (24px icon, smaller text) or 'large' (32px icon, larger text).",
+    },
+    titleMultiline: {
+      control: 'boolean',
+      description: 'Allow the title to wrap to multiple lines.',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    title: 'Title',
+    secondaryText: 'Secondary text',
+    buttonLabel: 'Button',
+    showIcon: true,
+    showSecondaryText: true,
+    showButton: true,
+    emphasis: 'low',
+    size: 'medium',
+    icon: <InfoCircledIcon />,
+  },
+}
+
+export const EmphasisHigh = {
+  args: {
+    ...Default.args,
+    title: 'No items found',
+    secondaryText: 'Try adjusting filters or searching for a different term.',
+    buttonLabel: 'Clear filters',
+    emphasis: 'high',
+    icon: <InfoCircledIcon />,
+  },
+}
+
+export const SizeLarge = {
+  args: {
+    ...Default.args,
+    title: 'Your setlist is empty',
+    secondaryText: 'Add tracks from your library or search for songs to get started.',
+    buttonLabel: 'Add track',
+    size: 'large',
+    icon: <InfoCircledIcon />,
+  },
+}
+
+export const LargeAndHighEmphasis = {
+  args: {
+    ...Default.args,
+    title: 'No projects yet',
+    secondaryText: 'Create your first project to get started.',
+    buttonLabel: 'Create project',
+    size: 'large',
+    emphasis: 'high',
+    icon: <InfoCircledIcon />,
+  },
+}
+
+export const WithCustomIcon = {
+  args: {
+    ...Default.args,
+    icon: <InfoCircledIcon />,
+  },
+}
+
+export const NoIcon = {
+  args: {
+    ...Default.args,
+    showIcon: false,
+  },
+}
+
+export const NoSecondaryText = {
+  args: {
+    ...Default.args,
+    showSecondaryText: false,
+    icon: <InfoCircledIcon />,
+  },
+}
+
+export const NoButton = {
+  args: {
+    ...Default.args,
+    showButton: false,
+    icon: <InfoCircledIcon />,
+  },
+}
+
+export const LongTitle = {
+  args: {
+    ...Default.args,
+    title: 'No items in your setlist yet',
+    secondaryText:
+      'Add tracks from your library or search for songs to get started.',
+    buttonLabel: 'Add track',
+    titleMultiline: true,
+    icon: <InfoCircledIcon />,
+  },
+}

package/src/components/SetlistList/SetlistList.jsx

@@ -213,6 +213,8 @@ export const SetlistItem = ({
           <DropdownMenu
             open={dropdownMenuOpen}
             onOpenChange={onDropdownMenuOpenChange}
+            side="bottom"
+            align="end"
             trigger={
               <Flex
                 className={classNames(styles.dropdownTriggerWrapper, {

package/src/index.jsx

@@ -140,3 +140,5 @@ export { TrackHeader } from './components/TrackHeader/TrackHeader'
 export { useForm } from './components/useForm/useForm'
 export { VoiceConversionForm } from './components/VoiceConversionForm/VoiceConversionForm'
 export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'
+
+export { EmptyState } from './components/EmptyState/EmptyState'