@moises.ai/design-system 3.4.4 → 3.4.6

package/src/components/FloatingBanner/FloatingBanner.jsx

@@ -0,0 +1,87 @@
+import { useCallback } from 'react'
+import classNames from 'classnames'
+import { Button } from '../Button/Button'
+import { IconButton } from '../IconButton/IconButton'
+import { CloseIcon } from '../../icons'
+import styles from './FloatingBanner.module.css'
+
+export const FloatingBanner = ({
+  id,
+  type = 'white',
+  title,
+  icon,
+  closable = false,
+  buttonText,
+  description,
+  column = false,
+  onConfirm,
+  onDismiss,
+  className,
+}) => {
+  const handleDismiss = useCallback(() => {
+    onDismiss?.(id)
+  }, [id, onDismiss])
+
+  const handleConfirm = useCallback(() => {
+    onConfirm?.(id)
+  }, [id, onConfirm])
+
+  return (
+    <div
+      className={classNames(styles.floatingBanner, className, {
+        [styles.white]: type === 'white',
+        [styles.error]: type === 'error',
+        [styles.warning]: type === 'warning',
+        [styles.success]: type === 'success',
+      })}
+    >
+      {icon && <div className={styles.iconWrapper}>{icon}</div>}
+
+      <div
+        className={classNames(styles.container, {
+          [styles.column]: column,
+        })}
+      >
+        <div className={styles.content}>
+          {title && (
+            <p
+              className={classNames(styles.title, {
+                [styles.strong]: !!description,
+              })}
+            >
+              {title}
+            </p>
+          )}
+
+          {description && <p className={styles.description}>{description}</p>}
+        </div>
+
+        {onConfirm && buttonText && (
+          <Button
+            size="1"
+            variant="outline"
+            color="gray"
+            onClick={handleConfirm}
+            className={styles.action}
+          >
+            {buttonText}
+          </Button>
+        )}
+      </div>
+
+      {closable && (
+        <IconButton
+          variant="ghost"
+          color="gray"
+          onClick={handleDismiss}
+          className={styles.close}
+          aria-label="Close"
+        >
+          <CloseIcon width={16} height={16} />
+        </IconButton>
+      )}
+    </div>
+  )
+}
+
+FloatingBanner.displayName = 'FloatingBanner'

package/src/components/FloatingBanner/FloatingBanner.module.css

@@ -0,0 +1,92 @@
+.floatingBanner {
+  display: flex;
+  padding: 10px;
+  flex-direction: row;
+  border-radius: 12px;
+  width: 100%;
+  max-width: 420px;
+  box-sizing: border-box;
+  align-items: flex-start;
+}
+
+.white {
+  background: #ffffff;
+}
+
+.error {
+  background: #ff613d;
+}
+
+.warning {
+  background: #ffd200;
+}
+
+.success {
+  background: #48dc6b;
+}
+
+.iconWrapper {
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  color: #1C2024;
+}
+
+.container {
+  flex: 1;
+  gap: 6px;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.container.column {
+  align-items: center;
+  flex-direction: row;
+}
+
+.content {
+  gap: 4px;
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  font-size: 14px;
+  line-height: 14px;
+  color: #1C2024;
+  margin: 0;
+}
+
+.title.strong {
+  font-weight: 600;
+}
+
+.description {
+  font-size: 14px;
+  line-height: 18px;
+  color: #1C2024;
+  margin: 0;
+}
+
+.action {
+  width: fit-content;
+  padding: 3px 8px !important;
+  color: #1C2024 !important;
+  border-color: #1C2024 !important;
+}
+
+.action:hover {
+  background-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+.close {
+  margin-left: 8px;
+  color: #1C2024 !important;
+  opacity: 1 !important;
+}
+
+.close:hover {
+  background-color: rgba(0, 0, 0, 0.1) !important;
+}

package/src/components/FloatingBanner/FloatingBanner.stories.jsx

@@ -0,0 +1,115 @@
+import { FloatingBanner } from './FloatingBanner'
+import { AlertIcon, InfoIcon } from '../../icons'
+
+export default {
+  title: 'Components/FloatingBanner',
+  component: FloatingBanner,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['white', 'error', 'warning', 'success'],
+    },
+    title: { control: 'text' },
+    description: { control: 'text' },
+    buttonText: { control: 'text' },
+    closable: { control: 'boolean' },
+    column: { control: 'boolean' },
+    onConfirm: { action: 'confirm' },
+    onDismiss: { action: 'dismiss' },
+  },
+}
+
+export const Default = {
+  args: {
+    id: '0',
+    type: 'white',
+    title: 'Information',
+    description: 'This is a default notification message.',
+    closable: true,
+  },
+}
+
+export const Success = {
+  args: {
+    id: '1',
+    type: 'success',
+    title: 'Success!',
+    description: 'Your changes have been saved successfully.',
+    closable: true,
+  },
+}
+
+export const Warning = {
+  args: {
+    id: '2',
+    type: 'warning',
+    title: 'Warning',
+    description: 'Please review your changes before continuing.',
+    closable: true,
+  },
+}
+
+export const Error = {
+  args: {
+    id: '3',
+    type: 'error',
+    title: 'Error',
+    description: 'Something went wrong. Please try again.',
+    closable: true,
+  },
+}
+
+export const WithIcon = {
+  args: {
+    id: '4',
+    type: 'warning',
+    title: 'Attention required',
+    description: 'Your session is about to expire.',
+    icon: <AlertIcon width={20} height={20} />,
+    closable: true,
+  },
+}
+
+export const WithButton = {
+  args: {
+    id: '5',
+    type: 'success',
+    title: 'New feature available',
+    description: 'Check out the new AI Studio features.',
+    buttonText: 'Learn more',
+    closable: true,
+  },
+}
+
+export const ColumnLayout = {
+  args: {
+    id: '6',
+    type: 'success',
+    title: 'Your file is ready',
+    buttonText: 'Download',
+    column: true,
+    closable: true,
+  },
+}
+
+export const TitleOnly = {
+  args: {
+    id: '7',
+    type: 'success',
+    title: 'File uploaded successfully!',
+    closable: true,
+  },
+}
+
+export const WithIconAndButton = {
+  args: {
+    id: '8',
+    type: 'error',
+    title: 'Connection lost',
+    description: 'Please check your internet connection.',
+    icon: <InfoIcon width={20} height={20} />,
+    buttonText: 'Retry',
+    closable: true,
+  },
+}

package/src/components/FooterPanel/FooterPanel.jsx

@@ -0,0 +1,56 @@
+import { Flex, Text, Spinner } from '@radix-ui/themes'
+import { Button } from '../Button/Button'
+
+export const FooterPanel = ({
+  children,
+  className,
+  title,
+  Icon,
+  variant = 'solid',
+  size = '2',
+  color = 'gray',
+  disabled = false,
+  onClick,
+  loading,
+  besideFooter,
+  ...props
+}) => {
+  return (
+    <Flex
+      gap="4"
+      align="center"
+      direction="column"
+      width="100%"
+      style={{
+        padding: '16px 0',
+        borderTop: '1px solid var(--neutral-3)',
+      }}
+      className={className}
+      {...props}
+    >
+      {children && <Flex width="100%">{children}</Flex>}
+      <Flex width="100%" justify="between" gap="3" align="center">
+        {besideFooter}
+        <Button
+          variant="solid"
+          size={size}
+          color={color}
+          disabled={disabled || loading}
+          onClick={onClick}
+          style={{ flex: 1 }}
+        >
+          {loading ? (
+            <Spinner loading>{Icon && <Icon width={16} height={16} />}</Spinner>
+          ) : (
+            Icon && <Icon width={16} height={16} />
+          )}
+          <Text size="2" weight="medium">
+            {title}
+          </Text>
+        </Button>
+      </Flex>
+    </Flex>
+  )
+}
+
+FooterPanel.displayName = 'FooterPanel'

package/src/components/FooterPanel/FooterPanel.stories.jsx

@@ -0,0 +1,289 @@
+import React from 'react'
+import { FooterPanel } from './FooterPanel'
+import { Text, Flex } from '@radix-ui/themes'
+import { InfoCircledIcon, MixerHorizontalIcon } from '@radix-ui/react-icons'
+import { SparkleIcon } from '../../icons/SparkleIcon'
+import { IconButton } from '../IconButton/IconButton'
+import { PreferencesIcon } from '../../icons/PreferencesIcon'
+import { MessageWithAction } from '../MessageWithAction/MessageWithAction'
+
+export default {
+  title: 'Components/FooterPanel',
+  component: FooterPanel,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A footer panel component used to display information and actions at the bottom of panels or cards.\n\n' +
+          '## Usage\n\n' +
+          '```jsx\n' +
+          "import { FooterPanel } from '@moises.ai/design-system'\n" +
+          "import { SparkleIcon } from '@moises.ai/design-system/icons'\n\n" +
+          'const MyComponent = () => {\n' +
+          '  return (\n' +
+          '    <FooterPanel\n' +
+          '      title="AI Enhancement"\n' +
+          '      Icon={SparkleIcon}\n' +
+          '    >\n' +
+          '      <Text>Additional footer content goes here</Text>\n' +
+          '    </FooterPanel>\n' +
+          '  )\n' +
+          '}\n' +
+          '```',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      description: 'The text to display on the footer button',
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    Icon: {
+      description: 'Icon component to display on the footer button',
+      table: {
+        type: { summary: 'React.ComponentType' },
+      },
+    },
+    color: {
+      description: 'Color of the footer button',
+      control: 'select',
+      options: ['gray', 'cyan'],
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    disabled: {
+      description: 'Disables user interaction with the footer button',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    loading: {
+      description: 'Shows a loading state on the footer button',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    size: {
+      description: 'Size of the footer button',
+      control: 'select',
+      options: ['1', '2', '3', '4'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '2' },
+      },
+    },
+    className: {
+      description: 'Additional CSS class to apply to the component',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    children: {
+      description:
+        'Content to render inside the footer panel, above the button',
+      control: 'text',
+      table: {
+        type: { summary: 'React.ReactNode' },
+      },
+    },
+    besideFooter: {
+      description: 'Content to render beside the footer button',
+      control: 'text',
+      table: {
+        type: { summary: 'React.ReactNode' },
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Default = {
+  args: {
+    title: 'Use AI',
+  },
+}
+
+export const WithIcon = {
+  render: () => (
+    <Flex direction="column" gap="4">
+      <Flex>
+        <Text size="2" weight="bold" mb="2">
+          Gray
+        </Text>
+      </Flex>
+      <FooterPanel title="Create" Icon={SparkleIcon} color="gray" />
+      <Flex mt="4">
+        <Text size="2" weight="bold" mb="2">
+          Cyan
+        </Text>
+      </Flex>
+      <FooterPanel title="Create" Icon={SparkleIcon} color="cyan" />
+    </Flex>
+  ),
+}
+
+export const WithChildren = {
+  render: () => (
+    <Flex direction="column" gap="4">
+      <Flex>
+        <Text size="2" weight="bold" mb="2">
+          Gray
+        </Text>
+      </Flex>
+      <FooterPanel
+        title="Information"
+        Icon={InfoCircledIcon}
+        color="gray"
+        children={<Text>Item 1</Text>}
+      />
+      <Flex>
+        <Text size="2" weight="bold" mb="2">
+          Cyan
+        </Text>
+      </Flex>
+      <FooterPanel
+        title="Information"
+        Icon={InfoCircledIcon}
+        color="cyan"
+        children={<Text>Item 1</Text>}
+      />
+    </Flex>
+  ),
+}
+
+export const Disabled = {
+  args: {
+    title: 'Disabled Button',
+    Icon: MixerHorizontalIcon,
+    children: <Text>Footer with disabled button</Text>,
+    disabled: true,
+  },
+}
+
+export const Loading = {
+  args: {
+    title: 'Processing...',
+    Icon: SparkleIcon,
+    children: <Text>Footer with loading button</Text>,
+    loading: true,
+  },
+}
+
+export const LoadingWithProgress = {
+  render: () => {
+    const [progress, setProgress] = React.useState(0)
+
+    React.useEffect(() => {
+      const interval = setInterval(() => {
+        setProgress((prev) => {
+          if (prev >= 100) {
+            clearInterval(interval)
+            return 100
+          }
+          return prev + 10
+        })
+      }, 500)
+
+      return () => clearInterval(interval)
+    }, [])
+
+    return (
+      <FooterPanel
+        title={`Exporting... ${progress}%`}
+        Icon={SparkleIcon}
+        children={<Text>Processing your request</Text>}
+        loading={true}
+      />
+    )
+  },
+}
+
+export const ColorVariants = {
+  render: () => (
+    <Flex direction="column" gap="4">
+      <Flex>
+        <Text size="2" weight="bold" mb="2">
+          Normal (Gray)
+        </Text>
+      </Flex>
+      <FooterPanel title="Gray Button" Icon={SparkleIcon} color="gray" />
+      <Flex>
+        <Text size="2" weight="bold" mb="2">
+          Disabled (Gray)
+        </Text>
+      </Flex>
+      <FooterPanel
+        title="Gray Disabled"
+        Icon={SparkleIcon}
+        color="gray"
+        disabled
+      />
+      <Flex>
+        <Text size="2" weight="bold" mb="2">
+          Normal (Cyan)
+        </Text>
+      </Flex>
+      <FooterPanel title="Cyan Button" Icon={SparkleIcon} color="cyan" />
+      <Flex>
+        <Text size="2" weight="bold" mb="2">
+          Disabled (Cyan)
+        </Text>
+      </Flex>
+      <FooterPanel
+        title="Cyan Disabled"
+        Icon={SparkleIcon}
+        color="cyan"
+        disabled
+      />
+    </Flex>
+  ),
+}
+
+export const WithBesideFooter = {
+  args: {
+    title: 'With Beside Footer',
+    Icon: SparkleIcon,
+    besideFooter: (
+      <IconButton variant="soft" size="2" color="gray">
+        <PreferencesIcon />
+      </IconButton>
+    ),
+  },
+}
+
+export const WithBesideFooterAndChildren = {
+  args: {
+    title: 'With Beside Footer and Children',
+    Icon: SparkleIcon,
+    besideFooter: (
+      <IconButton variant="soft" size="2" color="gray">
+        <PreferencesIcon />
+      </IconButton>
+    ),
+    children: (
+      <MessageWithAction.Info
+        ctaLabel="Add"
+        onClick={() => {}}
+        tooltip="Additional information about this item"
+      >
+        <Text size="1">This is a text with icon, tooltip, and CTA button</Text>
+      </MessageWithAction.Info>
+    ),
+  },
+}

package/src/components/GenerationSourceCallout/GenerationSourceCallout.jsx

@@ -0,0 +1,53 @@
+import { Flex, Text } from '@radix-ui/themes'
+import { TooltipWithInfoIcon } from '../TooltipWithInfoIcon/TooltipWithInfoIcon'
+import { MessageWithAction } from '../MessageWithAction/MessageWithAction'
+import styles from './GenerationSourceCallout.module.css'
+import classNames from 'classnames'
+
+export function GenerationSourceCallout({
+  trackName,
+  onClick = null,
+  ctaLabel = null,
+  interval = null,
+  tooltopContent,
+  i18n = { _: (text) => text },
+}) {
+  return (
+    <MessageWithAction
+      type="info"
+      onClick={onClick}
+      ctaLabel={ctaLabel}
+      showIcon={false}
+      showBackground={false}
+      className={styles.customMessageWithAction}
+    >
+      <Flex gap="1" align="center" className={styles.calloutContainer}>
+        <Text size="2" className={styles.neutral10}>
+          {i18n._('Using')}
+        </Text>
+        <Flex align="center" gap="1">
+          <Text
+            size="2"
+            truncate
+            className={classNames(styles.neutral12, styles.truncate, {
+              [styles.trucateWithInterval]: interval,
+            })}
+          >
+            {trackName}
+          </Text>
+          {interval && (
+            <Text size="2" wrap="nowrap" className={styles.neutral12}>
+              {interval}
+            </Text>
+          )}
+        </Flex>
+        <Flex align="center" gap="1">
+          <Text size="2" className={styles.neutral10}>
+            {i18n._('to generate')}
+          </Text>
+          <TooltipWithInfoIcon content={tooltopContent} />
+        </Flex>
+      </Flex>
+    </MessageWithAction>
+  )
+}