@moises.ai/design-system 3.4.4 → 3.4.6

package/src/components/ProfileMenu/ProfileMenu.stories.jsx

@@ -0,0 +1,44 @@
+import { Flex } from '../../index'
+import { ProfileMenu } from './ProfileMenu'
+
+export default {
+  title: 'Components/ProfileMenu',
+  component: ProfileMenu,
+  argTypes: {},
+}
+
+export const Default = {
+  args: {
+    user: {
+      avatar: 'https://i.pravatar.cc/150?img=1',
+      name: 'Alex Smith',
+      plan: 'Premium',
+    },
+    menuOptions: [
+      {
+        type: 'item',
+        key: 'account-settings',
+        label: 'Account Settings',
+        onClick: () => console.log('Account Settings clicked'),
+      },
+      {
+        type: 'item',
+        key: 'subscription',
+        label: 'Subscription',
+        onClick: () => console.log('Subscription clicked'),
+      },
+      {
+        type: 'item',
+        key: 'notifications',
+        label: 'Notifications',
+        onClick: () => console.log('Notifications clicked'),
+      },
+    ],
+    collapsed: false,
+  },
+  render: (args) => (
+    <Flex width={args.collapsed ? "40px" : "300px"}>
+      <ProfileMenu {...args} />
+    </Flex>
+  ),
+}

package/src/components/RadioCardsGroup/RadioCardsGroup.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { RadioCards as RadioCardsRadix, Flex, Text } from '@radix-ui/themes'
+import classNames from 'classnames'
+import styles from './RadioCardsGroup.module.css'
+
+export const RadioCardsGroup = ({
+  className,
+  items = [],
+  showRadio = true,
+  defaultValue,
+  columns = { initial: "1" },
+  ...props
+}) => {
+  return <RadioCardsRadix.Root
+    className={classNames(styles.RadioCardsGroup, className, {
+      [styles.showRadio]: showRadio
+    })}
+    columns={columns}
+    defaultValue={defaultValue}
+    {...props}
+  >
+    {items.map((item, idx) => (
+      <RadioCardsRadix.Item key={idx} value={item.value} disabled={item.disabled || false} className={styles.RadioCardsGroupItem}>
+        <Flex direction="column" width="100%" className={styles.RadioCardsGroupItemContent}>
+          <Text weight="regular" size="2">{item.label}</Text>
+          {item.description && (
+            <Text weight="regular" size="1" className={styles.RadioCardsGroupDescription}>{item.description}</Text>
+          )}
+        </Flex>
+      </RadioCardsRadix.Item>
+    ))}
+  </RadioCardsRadix.Root>
+}
+
+RadioCardsGroup.displayName = 'RadioCardsGroup'

package/src/components/RadioCardsGroup/RadioCardsGroup.module.css

@@ -0,0 +1,66 @@
+.RadioCardsGroup {
+  width: 100%;
+  gap: 12px;
+
+  .RadioCardsGroupItem {
+    --accent-indicator: var(--accent-9);
+    --base-card-border-radius: var(--radius-4);
+
+    &:where([data-state='checked'])::after {
+      outline-width: 2px;
+      outline-offset: -1px;
+    }
+
+    &:where(:disabled) {
+      --accent-indicator: var(--neutral-alpha-6);
+      color: var(--neutral-alpha-9);
+
+      &::selection {
+        background-color: var(--neutral-alpha-6);
+      }
+
+      &::before {
+        background-image: none;
+        background-color: var(--neutral-alpha-3);
+      }
+
+      &::after {
+        outline-color: var(--neutral-alpha-6);
+      }
+    }
+  }
+
+  .RadioCardsGroupDescription {
+    color: var(--neutral-alpha-9);
+  }
+
+  &.showRadio {
+    .RadioCardsGroupItem {
+      &[data-state='checked'] {
+        .RadioCardsGroupItemContent::before {
+          border-color: var(--accent-indicator);
+          border-width: 5px;
+        }
+      }
+    }
+
+    .RadioCardsGroupItemContent {
+      position: relative;
+      padding-right: 32px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: auto;
+        right: 0;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        border: 1px solid var(--neutral-6);
+        transform: translateY(-50%);
+        box-sizing: border-box;
+      }
+    }
+  }
+}

package/src/components/RadioCardsGroup/RadioCardsGroup.stories.jsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from 'react'
+import { RadioCardsGroup } from './RadioCardsGroup'
+import { Flex, Text } from '@radix-ui/themes'
+
+export default {
+  title: 'Components/RadioCardsGroup',
+  component: RadioCardsGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'Array of radio cards items, each item should have a value and a label. Example: [{ value: "1", label: "8-core CPU" }, { value: "2", label: "32 GB RAM" }]',
+    },
+    defaultValue: {
+      control: 'text',
+      description: 'Value of the default checked radio card',
+    },
+    columns: {
+      control: 'object',
+      description: 'Number of columns. Example: { initial: "1", md: "3" }',
+      options: {
+        initial: "1",
+        sm: "2",
+        md: "3",
+        lg: "4",
+        xl: "5",
+        xxl: "6",
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['1', '2', '3'],
+      description: 'Size of the radio cards',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '2' },
+      },
+    },
+    showRadio: {
+      control: 'boolean',
+      description: 'Whether to show the radio button',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    onValueChange: {
+      action: 'value changed',
+      description: 'Event handler called when the value state changes',
+      table: {
+        type: { summary: 'function' },
+        defaultValue: { summary: '—' },
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    items: [
+      { value: '1', label: 'I dont use the subscription enough', description: 'I want to cancel the subscription' },
+      { value: '2', label: 'I dont use the subscription enough', description: 'I want to cancel the subscription', disabled: true },
+      { value: '3', label: 'I cannot find the features or content that i need' },
+      { value: '4', label: 'I have had techinical problems with the service I have had a o a c a v techinical problems with the service' },
+      { value: '5', label: 'I am switching to a different plan', disabled: true },
+      { value: '6', label: 'Title', description: 'Subtitle' },
+      { value: '7', label: 'Title', description: 'Subtitle', disabled: true },
+    ],
+    size: '2',
+    defaultValue: '7',
+    showRadio: true,
+  },
+  render: (args) => {
+    const [state, setState] = useState(args.defaultValue)
+
+    useEffect(() => {
+      setState(args?.defaultValue)
+    }, [args.defaultValue])
+
+
+    return <Flex width="480px" direction="column" gap="2">
+      <Text weight="bold">Value: {state}</Text>
+      <RadioCardsGroup {...args} defaultValue={state} onValueChange={setState} />
+    </Flex>
+  },
+}

package/src/components/Rating/Rating.jsx

@@ -0,0 +1,154 @@
+import { useState, useCallback } from 'react'
+import { StarIcon, StarFilledIcon } from '../../icons'
+import styles from './Rating.module.css'
+import classNames from 'classnames'
+import { Flex, Text } from '@radix-ui/themes'
+
+export const Rating = ({
+  count = 5,
+  value: controlledValue,
+  defaultValue,
+  disabled = false,
+  readOnly = false,
+  onValueChange,
+  onHoverChange,
+  className,
+  label,
+  minLabel,
+  maxLabel,
+  ...props
+}) => {
+  const [internalValue, setInternalValue] = useState(defaultValue || 0)
+  const [hoverValue, setHoverValue] = useState(0)
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue
+  const isControlled = controlledValue !== undefined
+
+  const handleStarClick = useCallback(
+    (starIndex) => {
+      if (disabled || readOnly) return
+
+      const clickedValue = starIndex + 1
+      const newValue = clickedValue === value ? 0 : clickedValue
+
+      if (!isControlled) {
+        setInternalValue(newValue)
+      }
+      onValueChange?.({ value: newValue })
+    },
+    [disabled, readOnly, isControlled, onValueChange, value],
+  )
+
+  const handleMouseMove = useCallback(
+    (event) => {
+      if (disabled || readOnly) return
+
+      const rect = event.currentTarget.getBoundingClientRect()
+      const x = event.clientX - rect.left
+      const starWidth = rect.width / count
+      const starIndex = Math.floor(x / starWidth)
+      const clampedIndex = Math.max(0, Math.min(starIndex, count - 1))
+
+      const newHoverValue = clampedIndex + 1
+      if (newHoverValue !== hoverValue) {
+        setHoverValue(newHoverValue)
+        onHoverChange?.({ value: newHoverValue })
+      }
+    },
+    [disabled, readOnly, count, hoverValue, onHoverChange],
+  )
+
+  const handleMouseLeave = useCallback(() => {
+    if (disabled || readOnly) return
+
+    setHoverValue(0)
+    onHoverChange?.({ value: 0 })
+  }, [disabled, readOnly, onHoverChange])
+
+  const renderStar = (index) => {
+    const isFilled = hoverValue > 0 ? index < hoverValue : index < value
+    const isHovered = hoverValue > 0 && index < hoverValue
+    const isActive = index < value
+
+    return (
+      <button
+        key={index}
+        type="button"
+        className={classNames(styles.starButton, {
+          [styles.filled]: isFilled,
+          [styles.hovered]: isHovered,
+          [styles.active]: isActive,
+          [styles.disabled]: disabled,
+          [styles.readOnly]: readOnly,
+        })}
+        onClick={() => handleStarClick(index)}
+        disabled={disabled || readOnly}
+        aria-label={`Rate ${index + 1} out of ${count}`}
+        {...props}
+      >
+        {isFilled ? (
+          <StarFilledIcon className={styles.starIcon} />
+        ) : (
+          <StarIcon className={styles.starIcon} />
+        )}
+      </button>
+    )
+  }
+
+  return (
+    <Flex
+      direction="column"
+      align="center"
+      gap="2"
+      width="100%"
+      className={classNames(className)}
+    >
+      {label && (
+        <Text size="2" weight="medium" className={styles.label}>
+          {label}
+        </Text>
+      )}
+
+      <Flex direction="column" gap="1" width="100%">
+        <Flex
+          direction="row"
+          align="center"
+          gap="2px"
+          justify="center"
+          className={styles.starsContainer}
+          role="radiogroup"
+          aria-label={`Rating: ${value} out of ${count} stars`}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+        >
+          {Array.from({ length: count }, (_, index) => renderStar(index))}
+        </Flex>
+        {(minLabel || maxLabel) && (
+          <Flex
+            direction="row"
+            align="center"
+            justify="between"
+            className={styles.labelsContainer}
+          >
+            {minLabel ? (
+              <Text size="2" className={styles.smallLabel} weight="regular">
+                {minLabel}
+              </Text>
+            ) : (
+              <div />
+            )}
+            {maxLabel ? (
+              <Text size="2" className={styles.smallLabel} weight="regular">
+                {maxLabel}
+              </Text>
+            ) : (
+              <div />
+            )}
+          </Flex>
+        )}
+      </Flex>
+    </Flex>
+  )
+}
+
+Rating.displayName = 'Rating'

package/src/components/Rating/Rating.module.css

@@ -0,0 +1,70 @@
+.starButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  border: none;
+  border-radius: 6px;
+  background-color: var(--neutral-alpha-2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0;
+  flex-shrink: 0;
+  flex: 1;
+  min-width: 44px;
+}
+
+.starButton:hover:not(.disabled):not(.readOnly):not(.active) {
+  background-color: var(--neutral-alpha-4);
+}
+
+.starButton.filled .starIcon {
+  color: var(--neutral-12);
+}
+
+.starButton:not(.filled) .starIcon {
+  color: var(--neutral-11);
+}
+
+.starButton.hovered:not(.active) {
+  background-color: var(--neutral-alpha-4);
+}
+
+.starButton.filled.active,
+.starButton.filled.active.hovered,
+.starButton.filled.active:focus {
+  background-color: var(--aqua-dark-5) !important;
+}
+
+.starButton.disabled {
+  opacity: 0.7;
+  cursor: default;
+}
+
+.starButton.readOnly {
+  cursor: default;
+}
+
+.starIcon {
+  width: 16px;
+  height: 16px;
+}
+
+
+.starsContainer {
+  width: 100%;
+}
+
+.labelsContainer {
+  width: 100%;
+}
+
+.label {
+  text-align: start;
+  color: #fff;
+  width: 100%;
+}
+
+.smallLabel {
+  color: var(--neutral-alpha-9);
+}

package/src/components/Rating/Rating.stories.jsx

@@ -0,0 +1,215 @@
+import { Rating } from './Rating'
+import { useState } from 'react'
+import { Flex } from '@radix-ui/themes'
+
+export default {
+  title: 'Components/Rating',
+  component: Rating,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+### Complete Example
+\`\`\`jsx
+import { useState } from 'react'
+import { Rating } from '@moises.ai/design-system'
+
+function RatingExample() {
+  const [rating, setRating] = useState(0)
+  const [hoverRating, setHoverRating] = useState(0)
+
+  return (
+    <div>
+      <Rating
+        count={5}
+        value={rating}
+        onValueChange={({ value }) => setRating(value)}
+        onHoverChange={({ value }) => setHoverRating(value)}
+        label="How satisfied are you with AI Studio?"
+        minLabel="Very unsatisfied"
+        maxLabel="Very satisfied"
+      />
+      <p>Selected: {rating} | Hover: {hoverRating}</p>
+    </div>
+  )
+}
+\`\`\`
+
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    count: {
+      control: { type: 'number', min: 1, max: 10 },
+      description: 'The total number of ratings',
+    },
+    value: {
+      control: { type: 'number', min: 0, max: 5 },
+      description: 'The controlled value of the rating',
+    },
+    defaultValue: {
+      control: { type: 'number', min: 0, max: 5 },
+      description: 'The initial value of the rating when rendered',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Whether the rating is disabled',
+    },
+    readOnly: {
+      control: { type: 'boolean' },
+      description: 'Whether the rating is readonly',
+    },
+    label: {
+      control: { type: 'text' },
+      description: 'Optional label text to display above the rating stars',
+    },
+    minLabel: {
+      control: { type: 'text' },
+      description: 'Optional label for the minimum rating (left side)',
+    },
+    maxLabel: {
+      control: { type: 'text' },
+      description: 'Optional label for the maximum rating (right side)',
+    },
+    onValueChange: {
+      action: 'value changed',
+      description: 'Function to be called when the rating value changes',
+    },
+    onHoverChange: {
+      action: 'hover changed',
+      description: 'Function to be called when the rating value is hovered',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    count: 5,
+    defaultValue: 0,
+  },
+}
+
+export const WithValue = {
+  args: {
+    count: 5,
+    value: 3,
+  },
+}
+
+export const WithDefaultValue = {
+  args: {
+    count: 5,
+    defaultValue: 4,
+  },
+}
+
+export const Disabled = {
+  args: {
+    count: 5,
+    value: 3,
+    disabled: true,
+  },
+}
+
+export const ReadOnly = {
+  args: {
+    count: 5,
+    value: 3,
+    readOnly: true,
+  },
+}
+
+export const CustomCount = {
+  args: {
+    count: 10,
+    defaultValue: 7,
+  },
+}
+
+export const SurveyStyle = {
+  args: {
+    count: 5,
+    defaultValue: 0,
+    label: 'How satisfied are you with AI Studio?',
+    minLabel: 'Very unsatisfied',
+    maxLabel: 'Very satisfied',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Rating component with survey-style question and labels, similar to the image shown.',
+      },
+    },
+  },
+}
+
+export const WithQuestionOnly = {
+  args: {
+    count: 5,
+    defaultValue: 0,
+    label: 'Rate your experience',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Rating component with only a question, no labels.',
+      },
+    },
+  },
+}
+
+export const WithLabelsOnly = {
+  args: {
+    count: 5,
+    defaultValue: 0,
+    minLabel: 'Poor',
+    maxLabel: 'Excellent',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Rating component with only labels, no question.',
+      },
+    },
+  },
+}
+
+export const Interactive = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'This is an interactive rating component. Try hovering over the stars to see the hover effect, and clicking to set a rating. Click on the same star to deselect it.',
+      },
+    },
+  },
+  render: (args) => {
+    const [rating, setRating] = useState(0)
+    const [hoverRating, setHoverRating] = useState(0)
+
+    return (
+      <Flex
+        direction="column"
+        align="center"
+        gap="16px"
+        justify="center"
+        style={{ width: '328px' }}
+      >
+        <Rating
+          {...args}
+          count={5}
+          value={rating}
+          onValueChange={({ value }) => setRating(value)}
+          onHoverChange={({ value }) => setHoverRating(value)}
+        />
+        <p>
+          Selected: {rating} | Hover: {hoverRating}
+        </p>
+      </Flex>
+    )
+  },
+}