@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/TextArea/TextArea.stories.jsx

@@ -0,0 +1,140 @@
+import { Flex } from '@radix-ui/themes'
+import { TextArea } from './TextArea'
+
+export default {
+  title: 'Components/TextArea',
+  component: TextArea,
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
+    resize: {
+      control: 'radio',
+      options: ['none', 'vertical', 'horizontal'],
+    },
+    variant: {
+      control: 'radio',
+      options: ['classic', 'soft'],
+    },
+    size: {
+      control: 'radio',
+      options: ['1', '2', '3'],
+    },
+    focusRing: {
+      control: 'boolean',
+    },
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+The **TextArea** component provides a multiline text input with optional title and info tooltip. It supports different visual variants, sizes, states, and resize behaviors.
+
+## Usage
+
+\`\`\`jsx
+import { TextArea } from '@moises.ai/design-system'
+
+// Basic usage
+<TextArea
+  placeholder="Enter your text here"
+  value={value}
+  onChange={(e) => setValue(e.target.value)}
+/>
+
+// With title and info tooltip
+<TextArea
+  title="Description"
+  info="Provide a detailed description"
+  placeholder="Type here..."
+  value={value}
+  onChange={(e) => setValue(e.target.value)}
+  variant="soft"
+  resize="vertical"
+/>
+\`\`\`
+
+
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export const Default = {
+  args: {
+    title: 'Text Area',
+    info: 'This is a text area',
+    placeholder: 'Enter your text here',
+  },
+  render: (args) => (
+    <Flex height="105px" py="2" px="3px">
+      <TextArea {...args} />
+    </Flex>
+  ),
+}
+
+export const WithoutTitle = {
+  args: {
+    info: 'This is a text area',
+    placeholder: 'Enter your text here',
+  },
+}
+
+export const Disabled = {
+  args: {
+    title: 'Text Area',
+    placeholder: 'Enter your text here',
+    disabled: true,
+  },
+}
+
+export const SoftVariant = {
+  args: {
+    title: 'Text Area',
+    placeholder: 'Enter your text here',
+    variant: 'soft',
+  },
+}
+
+export const ClassicVariant = {
+  args: {
+    title: 'Text Area',
+    placeholder: 'Enter your text here',
+    variant: 'classic',
+  },
+}
+
+export const ResizeNone = {
+  args: {
+    title: 'Text Area',
+    placeholder: 'Enter your text here',
+    resize: 'none',
+  },
+}
+
+export const ResizeVertical = {
+  args: {
+    title: 'Text Area',
+    placeholder: 'Enter your text here',
+    resize: 'vertical',
+  },
+}
+
+export const ResizeHorizontal = {
+  args: {
+    title: 'Text Area',
+    placeholder: 'Enter your text here',
+    resize: 'horizontal',
+  },
+}
+
+export const WithFocusRing = {
+  args: {
+    title: 'Text Area with Focus Ring',
+    placeholder: 'Enter your text here',
+    focusRing: true,
+  },
+}

package/src/components/TextField/TextField.jsx

@@ -0,0 +1,61 @@
+import { Flex, TextField as TextFieldRadix, Text } from '@radix-ui/themes'
+import styles from './TextField.module.css'
+import classNames from 'classnames'
+import { TooltipWithInfoIcon } from '../TooltipWithInfoIcon/TooltipWithInfoIcon'
+import { IconButton as IconButtonComponent } from '../IconButton/IconButton'
+
+export const TextField = ({
+  value,
+  onChange,
+  placeholder,
+  title,
+  info,
+  className,
+  disabled,
+  readOnly,
+  size = '2',
+  Icon,
+  focusRing = false,
+  startSlot,
+  endSlot,
+  ...props
+}) => {
+  // legacy Icon prop is kept for backwards compatibility.
+  const resolvedStartSlot =
+    startSlot ||
+    (Icon ? <Icon width={16} height={16} className={styles.icon} /> : null)
+
+  return (
+    <Flex direction="column" width="100%" height="100%" gap="1">
+      {title && (
+        <Flex align="center" gap="2">
+          <Text size={size} weight="medium">
+            {title}
+          </Text>
+          {info && <TooltipWithInfoIcon content={info} />}
+        </Flex>
+      )}
+      <TextFieldRadix.Root
+        size={size}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        className={classNames(styles.TextField, className, {
+          [styles.Disabled]: disabled,
+          [styles.ReadOnly]: readOnly,
+          [styles.focusRing]: focusRing,
+        })}
+        readOnly={readOnly}
+        disabled={disabled}
+        {...props}
+      >
+        {resolvedStartSlot && (
+          <TextFieldRadix.Slot>{resolvedStartSlot}</TextFieldRadix.Slot>
+        )}
+        {endSlot && <TextFieldRadix.Slot>{endSlot}</TextFieldRadix.Slot>}
+      </TextFieldRadix.Root>
+    </Flex>
+  )
+}
+
+TextField.displayName = 'TextField'

package/src/components/TextField/TextField.module.css

@@ -0,0 +1,41 @@
+.TextField {
+  background-color: var(--neutral-alpha-3);
+  color: var(--neutral-12);
+  box-shadow: none;
+  width: 100%;
+  border: none;
+  padding: 0;
+
+  &:where(:focus-within) {
+    outline: none !important;
+  }
+}
+
+.icon {
+  color: var(--neutral-alpha-10);
+}
+
+.TextField input::placeholder {
+  color: var(--neutral-alpha-9) !important;
+}
+
+.Disabled {
+  color: var(--neutral-alpha-9) !important;
+  cursor: default;
+}
+
+.ReadOnly {
+  background-color: var(--neutral-alpha-2) !important;
+  color: var(--neutral-12);
+}
+
+.TextField:focus-within:not(.ReadOnly):not(.Disabled) {
+  outline: 1px solid var(--accent-a8);
+  outline-offset: -1px;
+}
+
+
+.focusRing:where(:focus-within):not(.ReadOnly):not(.Disabled) {
+  outline: 1px solid var(--accent-a8) !important;
+  outline-offset: -1px;
+}

package/src/components/TextField/TextField.stories.jsx

@@ -0,0 +1,243 @@
+import React from 'react'
+import { TextField } from './TextField'
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
+import { HomeIcon } from '../../icons'
+import { IconButton } from '../IconButton/IconButton'
+import { action } from '@storybook/addon-actions'
+export default {
+  title: 'Components/TextField',
+  component: TextField,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+TextField provides a customizable input field component that can be used for text input in forms. It's built on top of Radix UI's TextField component and supports various configurations including labels, icons, tooltips, and different states.
+
+## Usage
+
+\`\`\`jsx
+import { TextField } from '@moises.ai/design-system'
+
+const MyComponent = () => (
+  <TextField
+    title="Username"
+    placeholder="Enter your username"
+    onChange={(e) => console.log(e.target.value)}
+    info="Your unique identifier"
+  />
+)
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Label text displayed above the input',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text shown when the input is empty',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    info: {
+      control: 'text',
+      description: 'Tooltip information displayed next to the title',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the input is disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Whether the input is read-only',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    value: {
+      control: 'text',
+      description: 'The value of the input',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Function called when the input value changes',
+      table: {
+        type: { summary: 'function' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    Icon: {
+      control: 'object',
+      description: 'Icon component to be displayed inside the input',
+      table: {
+        type: { summary: 'React.ComponentType' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['1', '2', '3'],
+      description: 'Size of the input field',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '2' },
+      },
+    },
+    className: {
+      control: false,
+      description: 'Additional CSS class names to apply to the input',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    focusRing: {
+      control: 'boolean',
+      description: 'Whether the input has a focus ring',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    startSlot: {
+      control: false,
+      description: 'Custom content rendered in the leading slot',
+      table: {
+        type: { summary: 'ReactNode' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    endSlot: {
+      control: false,
+      description: 'Custom content rendered in the trailing slot (e.g. button)',
+      table: {
+        type: { summary: 'ReactNode' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '300px', height: '80px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Default = {
+  args: {
+    placeholder: 'Enter text...',
+    title: 'Input Label',
+  },
+}
+
+export const WithInfo = {
+  args: {
+    ...Default.args,
+    info: 'This is additional information about the field',
+  },
+  name: 'With Tooltip Info',
+}
+
+export const Active = {
+  args: {
+    ...Default.args,
+    value: 'Focus on this input',
+  },
+  parameters: {
+    pseudo: { focus: true },
+  },
+}
+
+export const Filled = {
+  args: {
+    ...Default.args,
+    value: 'This is filled text',
+  },
+}
+
+export const Disabled = {
+  args: {
+    ...Default.args,
+    disabled: true,
+    value: 'This input is disabled',
+  },
+}
+
+export const ReadOnly = {
+  args: {
+    ...Default.args,
+    readOnly: true,
+    value: 'This input is read-only',
+  },
+}
+
+export const WithIcon = {
+  args: {
+    ...Default.args,
+    placeholder: 'Search...',
+    Icon: MagnifyingGlassIcon,
+  },
+}
+
+export const SmallSize = {
+  args: {
+    ...Default.args,
+    size: '1',
+    title: 'Small Input',
+  },
+}
+
+export const LargeSize = {
+  args: {
+    ...Default.args,
+    size: '3',
+    title: 'Large Input',
+  },
+}
+
+export const WithFocusRing = {
+  args: {
+    ...Default.args,
+    focusRing: true,
+  },
+}
+
+export const WithCustomSlots = {
+  args: {
+    ...Default.args,
+    placeholder: 'Search with action...',
+    startSlot: <MagnifyingGlassIcon width={16} height={16} />,
+    endSlot: (
+      <IconButton size="1" onClick={action('endSlot click')}>
+        <HomeIcon width={16} height={16} />
+      </IconButton>
+    ),
+  },
+  name: 'With custom slots',
+}

package/src/components/ThumbnailPicker/ThumbColors/ThumbColors.js

@@ -0,0 +1,101 @@
+const ThumbColors = {
+  // Yellow gradients
+  yellowLight: {
+    gradient: 'linear-gradient(225deg, #FDFFB6 0%, #B0D169 100%)',
+    opacity: 1,
+  },
+  yellowMedium: {
+    gradient: 'linear-gradient(225deg, #E1EA7D 0%, #74912A 100%)',
+    opacity: 1,
+  },
+  yellowDark: {
+    gradient: 'linear-gradient(225deg, #959B78 0%, #525D35 100%)',
+    opacity: 0.5,
+  },
+
+  // Mint gradients
+  mintLight: {
+    gradient: 'linear-gradient(225deg, #9CF0C9 0%, #52ED9A 100%)',
+    opacity: 1,
+  },
+  mintMedium: {
+    gradient: 'linear-gradient(225deg, #60E4A6 0%, #0D9D50 100%)',
+    opacity: 1,
+  },
+  mintDark: {
+    gradient: 'linear-gradient(225deg, #7EBB9F 0%, #285E41 100%)',
+    opacity: 0.5,
+  },
+
+  // Turquoise gradients
+  turquoiseLight: {
+    gradient: 'linear-gradient(225deg, #9EF5E1 0%, #25F0C4 100%)',
+    opacity: 1,
+  },
+  turquoiseMedium: {
+    gradient: 'linear-gradient(225deg, #41E5C0 0%, #088B6F 100%)',
+    opacity: 1,
+  },
+  turquoiseDark: {
+    gradient: 'linear-gradient(225deg, #6CA99B 0%, #1F5C4F 100%)',
+    opacity: 0.5,
+  },
+
+  // Acqua gradients
+  acquaLight: {
+    gradient: 'linear-gradient(225deg, #90EBFF 0%, #2DEAF6 100%)',
+    opacity: 1,
+  },
+  acquaMedium: {
+    gradient: 'linear-gradient(225deg, #3FD3F4 0%, #0D6F8A 100%)',
+    opacity: 1,
+  },
+  acquaDark: {
+    gradient: 'linear-gradient(225deg, #7AB0BD 0%, #26505C 100%)',
+    opacity: 0.5,
+  },
+
+  // Blue gradients
+  blueLight: {
+    gradient: 'linear-gradient(225deg, #AEE5FF 0%, #3798FF 100%)',
+    opacity: 1,
+  },
+  blueMedium: {
+    gradient: 'linear-gradient(225deg, #54ACEB 0%, #1F4C94 100%)',
+    opacity: 1,
+  },
+  blueDark: {
+    gradient: 'linear-gradient(225deg, #699DC1 0%, #3D567F 100%)',
+    opacity: 0.5,
+  },
+
+  // Purple gradients
+  purpleLight: {
+    gradient: 'linear-gradient(225deg, #A6C4FF 0%, #4D82FD 100%)',
+    opacity: 1,
+  },
+  purpleMedium: {
+    gradient: 'linear-gradient(225deg, #6E81D7 0%, #204091 100%)',
+    opacity: 1,
+  },
+  purpleDark: {
+    gradient: 'linear-gradient(225deg, #828CD4 0%, #353D6B 100%)',
+    opacity: 0.5,
+  },
+
+  // Gray gradients
+  grayLight: {
+    gradient: 'linear-gradient(225deg, #F1F1F1 0%, #858C91 100%)',
+    opacity: 1,
+  },
+  grayMedium: {
+    gradient: 'linear-gradient(225deg, #626E72 0%, #3C4347 100%)',
+    opacity: 1,
+  },
+  grayDark: {
+    gradient: 'linear-gradient(225deg, #5E6669 0%, #2D3235 100%)',
+    opacity: 0.5,
+  },
+}
+
+export default ThumbColors

package/src/components/ThumbnailPicker/ThumbGraphics/ThumbGraphics.js

@@ -0,0 +1,90 @@
+// Import all image files
+import circles01 from './circles01.png'
+import circles02 from './circles02.png'
+import circles03 from './circles03.png'
+import circles04 from './circles04.png'
+import circles05 from './circles05.png'
+import circles06 from './circles06.png'
+
+import lines01 from './lines01.png'
+import lines02 from './lines02.png'
+import lines03 from './lines03.png'
+import lines04 from './lines04.png'
+import lines05 from './lines05.png'
+import lines06 from './lines06.png'
+
+import patterns01 from './patterns01.png'
+import patterns02 from './patterns02.png'
+import patterns03 from './patterns03.png'
+import patterns04 from './patterns04.png'
+
+import shapes01 from './shapes01.png'
+import shapes02 from './shapes02.png'
+import shapes03 from './shapes03.png'
+import shapes04 from './shapes04.png'
+import shapes05 from './shapes05.png'
+import shapes06 from './shapes06.png'
+import shapes07 from './shapes07.png'
+import shapes08 from './shapes08.png'
+import shapes09 from './shapes09.png'
+
+import synth01 from './synth01.png'
+import synth02 from './synth02.png'
+import synth03 from './synth03.png'
+import synth04 from './synth04.png'
+import synth05 from './synth05.png'
+
+import waves01 from './waves01.png'
+import waves02 from './waves02.png'
+import waves03 from './waves03.png'
+import waves04 from './waves04.png'
+
+const ThumbGraphics = {
+  // Synth
+  synth1: synth01,
+  synth2: synth02,
+  synth3: synth03,
+  synth4: synth04,
+  synth5: synth05,
+
+  // Waves
+  waves1: waves01,
+  waves2: waves02,
+  waves3: waves03,
+  waves4: waves04,
+
+  // Patterns
+  patterns1: patterns01,
+  patterns2: patterns02,
+  patterns3: patterns03,
+  patterns4: patterns04,
+
+  // Lines
+  lines1: lines01,
+  lines2: lines02,
+  lines3: lines03,
+  lines4: lines04,
+  lines5: lines05,
+  lines6: lines06,
+
+  // Circles
+  circles1: circles01,
+  circles2: circles02,
+  circles3: circles03,
+  circles4: circles04,
+  circles5: circles05,
+  circles6: circles06,
+
+  // Shapes
+  shapes1: shapes01,
+  shapes2: shapes02,
+  shapes3: shapes03,
+  shapes4: shapes04,
+  shapes5: shapes05,
+  shapes6: shapes06,
+  shapes7: shapes07,
+  shapes8: shapes08,
+  shapes9: shapes09,
+}
+
+export default ThumbGraphics