@moises.ai/design-system 3.4.5 → 3.4.6

package/src/components/IconButton/IconButton.stories.jsx

@@ -0,0 +1,532 @@
+import { IconButton } from './IconButton'
+import { Flex, Box, Heading, Text, Grid } from '@radix-ui/themes'
+import {
+  HomeIcon,
+  MagnifyingGlassIcon,
+  Cross1Icon,
+  PlusIcon,
+  ChevronRightIcon,
+  DownloadIcon,
+  TrashIcon,
+  HeartIcon,
+} from '@radix-ui/react-icons'
+
+import { AlertIcon } from '../../icons/AlertIcon'
+
+export default {
+  title: 'Components/IconButton',
+  component: IconButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+IconButton is a button that displays only an icon. It's built on top of Radix UI's IconButton component and 
+supports various states such as default, hover, and disabled.
+
+## Usage
+
+\`\`\`jsx
+import { IconButton } from '@moises.ai/design-system'
+import { HomeIcon } from '@moises.ai/design-system/icons'
+
+const MyComponent = () => (
+  <IconButton onClick={() => console.log('clicked!')}>
+    <HomeIcon width={20} height={20} />
+  </IconButton>
+)
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['ghost', 'solid', 'soft', 'surface'],
+      description:
+        'The visual style of the button. **Note:** solid variant is not available when color is mint. **Note:** surface and soft variants only support gray color.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'ghost' },
+      },
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['gray', 'red', 'mint', 'cyan'],
+      description:
+        'The color scheme of the button **Note:** mint color is not available when variant is solid.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'gray' },
+      },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Disables the button',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Function called when the button is clicked',
+      table: {
+        type: { summary: 'function' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    className: {
+      control: false,
+      description: 'Additional CSS class names to apply to the button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    children: {
+      control: false,
+      description: 'Icon component to be rendered as children **(REQUIRED)**',
+      table: {
+        type: { summary: 'React.ReactNode' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['1', '2', '3', '4'],
+      description: 'The size of the button.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '1' },
+      },
+    },
+    highContrast: {
+      control: { type: 'boolean' },
+      description: 'Whether to use high contrast styling',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    loading: {
+      control: { type: 'boolean' },
+      description: 'Shows a loading indicator',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    iconComponent: {
+      control: false,
+      description: 'Internal use only for story examples',
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    // Default values for all stories
+    variant: 'ghost',
+    color: 'gray',
+  },
+}
+
+const Template = (args) => (
+  <IconButton {...args}>
+    {args.iconComponent ? (
+      args.iconComponent
+    ) : (
+      <HomeIcon width={20} height={20} />
+    )}
+  </IconButton>
+)
+
+const ButtonWithLabel = ({ label, ...props }) => (
+  <Flex direction="column" gap="2" align="center">
+    <Text size="1">{label}</Text>
+    <IconButton {...props}>
+      <HomeIcon width={20} height={20} />
+    </IconButton>
+  </Flex>
+)
+
+export const Default = {
+  render: Template,
+}
+
+export const Variants = {
+  name: 'Button Variants',
+  render: () => (
+    <Flex direction="column" gap="8">
+      <Box>
+        <Heading size="4">Available Variants</Heading>
+        <Grid columns="4" gap="6" mt="4" align="center">
+          <ButtonWithLabel label="Ghost" variant="ghost" />
+          <ButtonWithLabel label="Solid" variant="solid" />
+          <ButtonWithLabel label="Soft" variant="soft" />
+          <ButtonWithLabel label="Surface" variant="surface" />
+        </Grid>
+      </Box>
+
+      <Box>
+        <Heading size="4">Available Colors</Heading>
+        <Grid columns="4" gap="6" mt="4" align="center">
+          <ButtonWithLabel label="Gray" color="gray" />
+          <ButtonWithLabel label="Red" color="red" />
+          <ButtonWithLabel label="Mint" color="mint" />
+          <ButtonWithLabel label="Cyan" color="cyan" />
+        </Grid>
+      </Box>
+
+      <Box>
+        <Heading size="4">High Contrast Options</Heading>
+        <Grid columns="2" gap="6" mt="4" align="center">
+          <ButtonWithLabel label="Normal Contrast" />
+          <ButtonWithLabel label="High Contrast" highContrast />
+        </Grid>
+      </Box>
+
+      <Box>
+        <Heading size="4">State Variations</Heading>
+        <Grid columns="3" gap="6" mt="4" align="center">
+          <ButtonWithLabel label="Default" />
+          <ButtonWithLabel label="Disabled" disabled />
+          <ButtonWithLabel label="Loading" loading />
+        </Grid>
+      </Box>
+    </Flex>
+  ),
+}
+
+export const ColorVariants = {
+  name: 'Complete Color Examples',
+  render: () => (
+    <Flex direction="column" gap="8">
+      <Box>
+        <Heading size="4">Mint Color (only ghost variant)</Heading>
+        <Flex align="center" justify="center" gap="4" wrap="wrap" mt="4">
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost default</Text>
+            <IconButton variant="ghost" color="mint">
+              <AlertIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost highContrast</Text>
+            <IconButton variant="ghost" color="mint" highContrast>
+              <AlertIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+        </Flex>
+        <Flex align="center" justify="center" gap="4" wrap="wrap" mt="4">
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost default disabled</Text>
+            <IconButton variant="ghost" color="mint" disabled>
+              <AlertIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost highContrast disabled</Text>
+            <IconButton
+              variant="ghost"
+              color="mint"
+              disabled
+              highContrast={true}
+            >
+              <AlertIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+        </Flex>
+        <Flex align="center" justify="center" gap="4" wrap="wrap" mt="4">
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost loading</Text>
+            <IconButton variant="ghost" color="mint" loading>
+              <AlertIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost loading highContrast</Text>
+            <IconButton variant="ghost" color="mint" loading highContrast>
+              <AlertIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+        </Flex>
+      </Box>
+
+      <Box>
+        <Heading size="4">Gray Color (all variants)</Heading>
+        <Flex align="center" justify="center" gap="4" wrap="wrap" mt="4">
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost default</Text>
+            <IconButton variant="ghost" color="gray">
+              <AlertIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost highContrast</Text>
+            <IconButton variant="ghost" color="gray" highContrast>
+              <AlertIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid default</Text>
+            <IconButton variant="solid" color="gray">
+              <AlertIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid highContrast</Text>
+            <IconButton variant="solid" color="gray" highContrast>
+              <AlertIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+        </Flex>
+        <Flex align="center" justify="center" gap="4" wrap="wrap" mt="4">
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Soft default</Text>
+            <IconButton variant="soft" color="gray">
+              <AlertIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Soft highContrast</Text>
+            <IconButton variant="soft" color="gray" highContrast>
+              <AlertIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Surface default</Text>
+            <IconButton variant="surface" color="gray">
+              <AlertIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Surface highContrast</Text>
+            <IconButton variant="surface" color="gray" highContrast>
+              <AlertIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+        </Flex>
+        <Flex align="center" justify="center" gap="4" wrap="wrap" mt="4">
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost disabled</Text>
+            <IconButton variant="ghost" color="gray" disabled>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid disabled</Text>
+            <IconButton variant="solid" color="gray" disabled>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Soft disabled</Text>
+            <IconButton variant="soft" color="gray" disabled>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Surface disabled</Text>
+            <IconButton variant="surface" color="gray" disabled>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+        </Flex>
+        <Flex align="center" justify="center" gap="4" wrap="wrap" mt="4">
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost loading</Text>
+            <IconButton variant="ghost" color="gray" loading>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid loading</Text>
+            <IconButton variant="solid" color="gray" loading>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Soft loading</Text>
+            <IconButton variant="soft" color="gray" loading>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Surface loading</Text>
+            <IconButton variant="surface" color="gray" loading>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+        </Flex>
+      </Box>
+
+      <Box>
+        <Heading size="4">Red Color (ghost and solid variants)</Heading>
+        <Flex align="center" justify="center" gap="4" wrap="wrap" mt="4">
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost default</Text>
+            <IconButton variant="ghost" color="red">
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost highContrast</Text>
+            <IconButton variant="ghost" color="red" highContrast>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid default</Text>
+            <IconButton variant="solid" color="red">
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid highContrast</Text>
+            <IconButton variant="solid" color="red" highContrast>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+        </Flex>
+        <Flex align="center" justify="center" gap="4" wrap="wrap" mt="4">
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost disabled</Text>
+            <IconButton variant="ghost" color="red" disabled>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost highContrast disabled</Text>
+            <IconButton variant="ghost" color="red" disabled highContrast>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid disabled</Text>
+            <IconButton variant="solid" color="red" disabled>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid highContrast disabled</Text>
+            <IconButton variant="solid" color="red" disabled highContrast>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+        </Flex>
+        <Flex align="center" justify="center" gap="4" wrap="wrap" mt="4">
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost loading</Text>
+            <IconButton variant="ghost" color="red" loading>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost highContrast loading</Text>
+            <IconButton variant="ghost" color="red" loading highContrast>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid loading</Text>
+            <IconButton variant="solid" color="red" loading>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid highContrast loading</Text>
+            <IconButton variant="solid" color="red" loading highContrast>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+        </Flex>
+      </Box>
+
+      <Box>
+        <Heading size="4">Cyan Color (ghost and solid variants)</Heading>
+        <Flex align="center" justify="center" gap="4" wrap="wrap" mt="4">
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost default</Text>
+            <IconButton variant="ghost" color="cyan">
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost highContrast</Text>
+            <IconButton variant="ghost" color="cyan" highContrast>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid default</Text>
+            <IconButton variant="solid" color="cyan">
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid highContrast</Text>
+            <IconButton variant="solid" color="cyan" highContrast>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+        </Flex>
+        <Flex align="center" justify="center" gap="4" wrap="wrap" mt="4">
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost disabled</Text>
+            <IconButton variant="ghost" color="cyan" disabled>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost highContrast disabled</Text>
+            <IconButton variant="ghost" color="cyan" disabled highContrast>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid disabled</Text>
+            <IconButton variant="solid" color="cyan" disabled>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid highContrast disabled</Text>
+            <IconButton variant="solid" color="cyan" disabled highContrast>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+        </Flex>
+        <Flex align="center" justify="center" gap="4" wrap="wrap" mt="4">
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost loading</Text>
+            <IconButton variant="ghost" color="cyan" loading>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Ghost highContrast loading</Text>
+            <IconButton variant="ghost" color="cyan" loading highContrast>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid loading</Text>
+            <IconButton variant="solid" color="cyan" loading>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+          <Flex direction="column" gap="2" align="center">
+            <Text size="1">Solid highContrast loading</Text>
+            <IconButton variant="solid" color="cyan" loading highContrast>
+              <HomeIcon width={20} height={20} />
+            </IconButton>
+          </Flex>
+        </Flex>
+      </Box>
+    </Flex>
+  ),
+}

package/src/components/InstrumentSelector/InstrumentSelector.jsx

@@ -0,0 +1,61 @@
+import { RadioCards as RadioCardsRadix, Flex, Text } from '@radix-ui/themes'
+import styles from './InstrumentSelector.module.css'
+import classNames from 'classnames'
+
+export const InstrumentSelector = ({
+  items = [],
+  defaultValue,
+  value,
+  selectedValue,
+  columns = { initial: '2' },
+  onValueChange,
+  handleValueChange,
+  children,
+  className,
+  ...props
+}) => {
+  const resolvedValue = value ?? selectedValue
+  const resolvedOnValueChange = onValueChange ?? handleValueChange
+
+  return (
+    <RadioCardsRadix.Root
+      className={classNames(styles.RadioCardsRoot, className)}
+      columns={columns}
+      defaultValue={defaultValue}
+      value={resolvedValue}
+      onValueChange={resolvedOnValueChange}
+      {...props}
+    >
+      {items.map((item, idx) => {
+        const Icon = item.Icon ?? item.icon
+        const itemText = item.text ?? item.label ?? item.children
+
+        return (
+          <RadioCardsRadix.Item
+            key={item.value ?? idx}
+            value={item.value}
+            disabled={item.disabled || false}
+            className={styles.RadioCardsItem}
+          >
+            <Flex align="center" gap="3" className={styles.RadioCardsContent}>
+              {Icon && (
+                <span className={styles.icon}>
+                  {typeof Icon === 'function' ? <Icon /> : Icon}
+                </span>
+              )}
+              {itemText && (
+                <Text as="span" size="2" weight="regular" className={styles.text}>
+                  {itemText}
+                </Text>
+              )}
+              {item.children}
+            </Flex>
+          </RadioCardsRadix.Item>
+        )
+      })}
+      {children}
+    </RadioCardsRadix.Root>
+  )
+}
+
+InstrumentSelector.displayName = 'InstrumentSelector'

package/src/components/InstrumentSelector/InstrumentSelector.module.css

@@ -0,0 +1,80 @@
+.RadioCardsRoot {
+  width: 100%;
+  gap: 4px;
+}
+
+.RadioCardsItem {
+  display: flex;
+  min-height: 52px !important;
+  min-width: 140px;
+  align-items: center;
+  width: 100%;
+  padding: 14px 20px;
+  border: none;
+  border-radius: var(--Radius-3, 6px);
+  background: var(--neutral-alpha-2, rgba(216, 244, 246, 0.04));
+  cursor: pointer;
+  box-sizing: border-box;
+  box-shadow: none;
+  outline: none;
+  transition: background-color 0.18s ease, color 0.18s ease;
+  justify-content: flex-start;
+
+  &::before,
+  &::after {
+    box-shadow: none;
+    outline: none;
+    border: none;
+    background: none;
+  }
+
+  &:hover {
+    background: var(--neutral-alpha-3, rgba(221, 234, 248, 0.08));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--neutral-alpha-6);
+    outline-offset: 2px;
+  }
+
+  &:where([data-state='checked']) {
+    border-radius: var(--Radius-3-max, 6px);
+    background: var(--neutral-alpha-4, rgba(211, 237, 248, 0.11));
+
+    .icon {
+      color: var(--neutral-alpha-12);
+    }
+
+    &::after {
+      outline: none;
+    }
+  }
+
+  &:where([data-state='checked']):hover {
+    border-radius: var(--Radius-3-max, 6px);
+    background: var(--neutral-alpha-5, rgba(217, 237, 254, 0.15));
+  }
+}
+
+.RadioCardsContent {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.icon {
+  color: var(--neutral-alpha-10);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.text {
+  color: var(--neutral-alpha-12);
+}