@moises.ai/design-system 3.4.4 → 3.4.6

package/src/components/GenerationSourceCallout/GenerationSourceCallout.module.css

@@ -0,0 +1,98 @@
+.neutral10 {
+    color: var(--neutral-alpha-10);
+}
+
+.neutral12 {
+    color: var(--neutral-alpha-12);
+}
+
+.trucateWithInterval {
+    max-width: 70px !important;
+}
+
+.truncate {
+    max-width: 100px;
+}
+
+@media (min-width: 685px) and (max-width: 800px) {
+    .truncate {
+      max-width: 350px !important;
+    }
+    .truncate.trucateWithInterval {
+      max-width: 330px !important;
+    }
+  }
+  
+  @media (min-width: 800px) {
+    .truncate {
+      max-width: 550px !important;
+    }
+    .truncate.trucateWithInterval {
+      max-width: 450px !important;
+    }
+  }
+@media (max-width: 685px) {
+    .truncate {
+        &.trucateWithInterval {
+            max-width: 160px !important;
+        }
+        max-width: 250px !important;
+    }
+}
+
+@media (max-width: 585px) {
+    .truncate {
+        &.trucateWithInterval {
+            max-width: 90px !important;
+        }
+        max-width: 150px !important;
+    }
+}
+
+
+@media (max-width: 400px) {
+    .truncate {
+        &.trucateWithInterval {
+            max-width: 70px !important;
+        }
+        max-width: 130px !important;
+    }
+}
+
+@media (max-width: 385px) {
+    .calloutContainer {
+        display: flex;
+        align-items: flex-start;
+        gap: 0;
+        flex-direction: column;
+    }
+
+    .customMessageWithAction>div {
+        align-items: flex-end !important;
+    }
+
+    .truncate {
+        &.trucateWithInterval {
+            max-width: 180px !important;
+        }
+        max-width: 250px !important;
+    }
+}
+
+@media (max-width: 360px) {
+    .truncate {
+        &.trucateWithInterval {
+            max-width: 140px !important;
+        }
+        max-width: 210px !important;
+    }
+}
+
+@media (max-width: 320px) {
+    .truncate {
+        &.trucateWithInterval {
+            max-width: 100px !important;
+        }
+        max-width: 160px !important;
+    }
+}

package/src/components/GroupButtons/GroupButtons.jsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import styles from './GroupButtons.module.css'
+import { Button } from '../Button/Button'
+import { IconButton } from '../IconButton/IconButton'
+import classNames from 'classnames'
+import { Separator, Flex } from '@radix-ui/themes'
+
+export const GroupButtons = ({
+  className,
+  items,
+  ungroupedItems = [],
+  style,
+  size = '2',
+}) => {
+  const leftExtras = ungroupedItems.filter((x) => x.side === 'left')
+  const rightExtras = ungroupedItems.filter((x) => x.side === 'right')
+
+  const renderButton = (item, key, size) => (
+    <>
+      {item.label ? (
+        <Button
+          key={key}
+          type="button"
+          onClick={item.onClick}
+          variant="ghost"
+          color="gray"
+          size={size}
+          disabled={item.disabled}
+        >
+          {item.icon && item.icon}
+          {item.label && item.label}
+        </Button>
+      ) : (
+        <IconButton
+          key={key}
+          type="button"
+          onClick={item.onClick}
+          variant="ghost"
+          color="gray"
+          size={size}
+          disabled={item.disabled}
+        >
+          {item.icon && item.icon}
+        </IconButton>
+      )}
+    </>
+  )
+
+  return (
+    <Flex className={classNames(className)} style={style} gap="3">
+      {leftExtras.length > 0 &&
+        leftExtras.map((item, i) => (
+          <Flex
+            key={`left-group-${i}`}
+            className={styles.group}
+            align="center"
+            gap="1"
+          >
+            {renderButton(item, `left-${i}`, size)}
+          </Flex>
+        ))}
+
+      <Flex className={styles.group} align="center" gap="1">
+        {items.map((it, idx) => (
+          <React.Fragment key={idx}>
+            {renderButton(it, `g-${idx}`, size)}
+
+            {idx < items.length - 1 && (
+              <Separator
+                className={styles.separator}
+                orientation="vertical"
+                size="1"
+                style={{
+                  color: 'rgba(255, 255, 255, 0.00) !important',
+                }}
+              />
+            )}
+          </React.Fragment>
+        ))}
+      </Flex>
+
+      {rightExtras.length > 0 &&
+        rightExtras.map((item, i) => (
+          <Flex
+            key={`right-group-${i}`}
+            className={styles.group}
+            align="center"
+            gap="1"
+          >
+            {renderButton(item, `right-${i}`, size)}
+          </Flex>
+        ))}
+    </Flex>
+  )
+}
+
+GroupButtons.displayName = 'GroupButtons'

package/src/components/GroupButtons/GroupButtons.module.css

@@ -0,0 +1,8 @@
+.group {
+  background-color: var(--neutral-alpha-3);
+  padding: 4px;
+  border-radius: 9999px;
+  display: inline-flex;
+  align-items: center;    
+}
+

package/src/components/GroupButtons/GroupButtons.stories.jsx

@@ -0,0 +1,301 @@
+import { GroupButtons } from './GroupButtons'
+import {
+  PlayIcon,
+  StopIcon,
+  CubeIcon,
+  CropIcon,
+  GearIcon,
+  UploadIcon,
+} from '@radix-ui/react-icons'
+
+export default {
+  title: 'Components/GroupButtons',
+  component: GroupButtons,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The GroupButtons component is a flexible button group that allows you to create a set of related actions with optional separators and ungrouped items.
+
+## Features
+- Grouped buttons with separators
+- Optional ungrouped items that can be placed on either side
+- Icon and label support for each button
+- Support for disabled state on individual buttons
+
+## Usage
+The component accepts the following props:
+- \`items\`: Array of button items for the main group
+- \`ungroupedItems\`: Array of buttons that will be placed outside the group (left or right)
+- \`size\`: Size of the buttons (default: '2')
+- \`className\`: Additional CSS classes
+- \`style\`: Additional inline styles
+
+### Button Item Structure
+Each button item (in both \`items\` and \`ungroupedItems\`) can be configured as:
+- Icon only: \`{ icon: <Icon />, label: null }\`
+- Label only: \`{ label: 'Text', icon: null }\`
+- Both icon and label: \`{ icon: <Icon />, label: 'Text' }\`
+- Disabled state: \`{ disabled: true }\`
+
+For \`ungroupedItems\`, you must also specify the \`side\` prop ('left' or 'right').
+
+### Basic Usage
+\`\`\`jsx
+import { GroupButtons } from '@moises.ai/design-system'
+import { PlayIcon, StopIcon } from '@moises.ai/design-system/icons'
+
+function MyComponent() {
+  const handlePlay = () => {
+    // Handle play action
+  }
+
+  const handleStop = () => {
+    // Handle stop action
+  }
+
+  return (
+    <GroupButtons
+      items={[
+        {
+          label: 'Play',
+          icon: <PlayIcon width={16} height={16} />,
+          onClick: handlePlay,
+        },
+        {
+          label: 'Stop',
+          icon: <StopIcon width={16} height={16} />,
+          onClick: handleStop,
+        },
+      ]}
+    />
+  )
+}
+\`\`\`
+
+### With Ungrouped Items
+\`\`\`jsx
+import { GroupButtons } from './GroupButtons'
+import { PlayIcon, StopIcon, GearIcon } from '@moises.ai/design-system/icons'
+
+function MyComponent() {
+  return (
+    <GroupButtons
+      items={[
+        {
+          label: 'Play',
+          icon: <PlayIcon width={16} height={16} />,
+          onClick: () => {},
+        },
+        {
+          label: 'Stop',
+          icon: <StopIcon width={16} height={16} />,
+          onClick: () => {},
+        },
+      ]}
+      ungroupedItems={[
+        {
+          icon: <GearIcon width={16} height={16} />,
+          side: 'left',
+          onClick: () => {},
+        },
+        {
+          label: 'Settings',
+          side: 'right',
+          onClick: () => {},
+        },
+      ]}
+    />
+  )
+}
+\`\`\`
+
+## Examples
+Below you'll find various examples showcasing different combinations of grouped and ungrouped items.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    items: {
+      description:
+        'Array of button items for the main group. Each item can be configured as icon-only, label-only, or both. Can include disabled state.',
+      control: 'object',
+    },
+    ungroupedItems: {
+      description:
+        'Array of buttons that will be placed outside the group (left or right). Each item can be configured as icon-only, label-only, or both, and must specify a side. Can include disabled state.',
+      control: 'object',
+    },
+    size: {
+      description: 'Size of the buttons',
+      control: 'select',
+      options: ['1', '2', '3'],
+    },
+  },
+}
+
+export const MixedItems = {
+  args: {
+    items: [
+      {
+        label: 'Play',
+        icon: <PlayIcon width={16} height={16} />,
+        onClick: () => {},
+      },
+      {
+        label: 'Cut',
+        icon: <CubeIcon width={16} height={16} />,
+        onClick: () => {},
+      },
+      {
+        label: 'Crop',
+        icon: <CropIcon width={16} height={16} />,
+        onClick: () => {},
+      },
+    ],
+    ungroupedItems: [
+      {
+        icon: <GearIcon width={16} height={16} />,
+        onClick: () => {},
+        side: 'left',
+      },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ minWidth: '400px', width: '100%' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const IconOnlyItems = {
+  args: {
+    items: [
+      {
+        label: null,
+        icon: <PlayIcon width={16} height={16} />,
+        onClick: () => {},
+      },
+      {
+        label: null,
+        icon: <StopIcon width={16} height={16} />,
+        onClick: () => {},
+      },
+      {
+        label: null,
+        icon: <CubeIcon width={16} height={16} />,
+        onClick: () => {},
+      },
+    ],
+  },
+}
+
+export const LabelOnlyItems = {
+  args: {
+    items: [
+      {
+        label: 'Play',
+        icon: null,
+        onClick: () => {},
+      },
+      {
+        label: 'Stop',
+        icon: null,
+        onClick: () => {},
+      },
+      {
+        label: 'Cut',
+        icon: null,
+        onClick: () => {},
+      },
+    ],
+  },
+}
+
+// Example with mixed ungrouped items
+export const MixedUngroupedItems = {
+  args: {
+    items: [
+      {
+        label: 'Silence',
+        icon: <StopIcon width={16} height={16} />,
+        onClick: () => {},
+      },
+      {
+        label: 'Cut',
+        icon: <CubeIcon width={16} height={16} />,
+        onClick: () => {},
+      },
+    ],
+    ungroupedItems: [
+      // Left side - mixed items
+      {
+        label: null,
+        icon: <PlayIcon width={16} height={16} />,
+        side: 'left',
+        onClick: () => {},
+      },
+      { label: 'Settings', icon: null, side: 'left', onClick: () => {} },
+      {
+        label: 'Upload',
+        icon: <UploadIcon width={16} height={16} />,
+        side: 'left',
+        onClick: () => {},
+      },
+      // Right side - mixed items
+      { label: 'Download', icon: null, side: 'right', onClick: () => {} },
+      {
+        label: null,
+        icon: <GearIcon width={16} height={16} />,
+        side: 'right',
+        onClick: () => {},
+      },
+      {
+        label: 'Share',
+        icon: <PlayIcon width={16} height={16} />,
+        side: 'right',
+        onClick: () => {},
+      },
+    ],
+  },
+}
+
+export const WithDisabledButtons = {
+  args: {
+    items: [
+      {
+        label: 'Play',
+        icon: <PlayIcon width={16} height={16} />,
+        onClick: () => {},
+      },
+      {
+        label: 'Stop',
+        icon: <StopIcon width={16} height={16} />,
+        onClick: () => {},
+        disabled: true,
+      },
+      {
+        label: 'Cut',
+        icon: <CubeIcon width={16} height={16} />,
+        onClick: () => {},
+      },
+    ],
+    ungroupedItems: [
+      {
+        icon: <GearIcon width={16} height={16} />,
+        side: 'left',
+        onClick: () => {},
+        disabled: true,
+      },
+      {
+        label: 'Settings',
+        side: 'right',
+        onClick: () => {},
+      },
+    ],
+  },
+}

package/src/components/HeaderPanel/HeaderPanel.jsx

@@ -0,0 +1,115 @@
+import React from 'react'
+import { Flex, Text, Tooltip } from '@radix-ui/themes'
+import { IconButton } from '../IconButton/IconButton'
+
+const HeaderPanelButton = React.forwardRef(
+  ({ children, onClick, title, className, ...props }, ref) => {
+    return (
+      <IconButton
+        ref={ref}
+        variant="ghost"
+        className={className}
+        {...props}
+        onClick={onClick}
+      >
+        {title ? <Tooltip content={title}>{children}</Tooltip> : children}
+      </IconButton>
+    )
+  },
+)
+
+const HeaderPanelDetails = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <Flex ref={ref} className={className} {...props}>
+        {children}
+      </Flex>
+    )
+  },
+)
+
+HeaderPanelDetails.displayName = 'HeaderPanel.Details'
+
+HeaderPanelButton.displayName = 'HeaderPanel.Button'
+
+const HeaderPanelComponent = React.forwardRef(
+  (
+    {
+      title,
+      onBack,
+      children,
+      className,
+      titleSize = '3',
+      titleWeight = 'bold',
+      titlePosition = 'left',
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <Flex
+        ref={ref}
+        gap="4"
+        pb="9px"
+        align="center"
+        justify="between"
+        width="100%"
+        style={{
+          borderBottom: '1px solid var(--neutral-3)',
+        }}
+        className={className}
+        {...props}
+      >
+        {titlePosition === 'center' && !onBack && (
+          <Flex style={{ flex: '1' }} />
+        )}
+        {titlePosition !== 'center' && onBack && onBack}
+
+        {titlePosition === 'center' && onBack && (
+          <Flex style={{ flex: '1' }}>{onBack}</Flex>
+        )}
+        <Flex
+          align="center"
+          gap="2"
+          width="100%"
+          style={{
+            flex: '2',
+          }}
+        >
+          <Text
+            size={titleSize}
+            weight={titleWeight}
+            style={{ color: 'var(--neutral-12)', width: '100%' }}
+            align={titlePosition}
+          >
+            {title}
+          </Text>
+        </Flex>
+
+        {titlePosition === 'center' && !children && (
+          <Flex style={{ flex: '1' }} />
+        )}
+
+        {children && (
+          <Flex
+            gap="3"
+            align="center"
+            justify="end"
+            style={{
+              flex: '1',
+            }}
+          >
+            {children}
+          </Flex>
+        )}
+      </Flex>
+    )
+  },
+)
+
+HeaderPanelComponent.displayName = 'HeaderPanel'
+
+HeaderPanelComponent.Button = HeaderPanelButton
+HeaderPanelComponent.Details = HeaderPanelDetails
+
+export const HeaderPanel = HeaderPanelComponent