@moises.ai/design-system 3.4.5 → 3.4.6

package/src/components/ThumbnailPicker/ThumbnailPicker.jsx

@@ -0,0 +1,67 @@
+import { Box } from '@radix-ui/themes'
+import classNames from 'classnames'
+import ThumbGraphics from './ThumbGraphics/ThumbGraphics.js'
+import ThumbColors from './ThumbColors/ThumbColors.js'
+import { useMemo } from 'react'
+import { getStyleFromID } from './getStyleFromID.js'
+
+export const ThumbnailPicker = ({
+  color: propColor,
+  graphic: propGraphic,
+  width = 68,
+  height = 68,
+  id,
+  className,
+  ...props
+}) => {
+  const colorKeys = useMemo(() => Object.keys(ThumbColors), [])
+  const graphicKeys = useMemo(() => Object.keys(ThumbGraphics), [])
+
+  const { color, graphic } = useMemo(() => {
+    let color = propColor
+    let graphic = propGraphic
+
+    if (id) {
+      const styles = getStyleFromID(id)
+      color = color || styles.color
+      graphic = graphic || styles.graphic
+    }
+
+    if (!color) {
+      const idx = Math.floor(Math.random() * colorKeys.length)
+      color = colorKeys[idx]
+    }
+
+    if (!graphic) {
+      const idx = Math.floor(Math.random() * graphicKeys.length)
+      graphic = graphicKeys[idx]
+    }
+
+    return { color, graphic }
+  }, [propColor, propGraphic, id, colorKeys, graphicKeys])
+
+  const colorData = ThumbColors[color]
+  const graphicData = ThumbGraphics[graphic]
+
+  const style = useMemo(
+    () => ({
+      background: colorData.gradient,
+      opacity: colorData.opacity,
+    }),
+    [colorData.gradient, colorData.opacity],
+  )
+
+  return (
+    <Box
+      width={width + 'px'}
+      height={height + 'px'}
+      className={classNames(className)}
+      style={style}
+      {...props}
+    >
+      <img src={graphicData} alt={graphic} width={width} height={height} />
+    </Box>
+  )
+}
+
+ThumbnailPicker.displayName = 'ThumbnailPicker'

package/src/components/ThumbnailPicker/ThumbnailPicker.stories.jsx

@@ -0,0 +1,406 @@
+import { ThumbnailPicker } from './ThumbnailPicker'
+import ThumbColors from './ThumbColors/ThumbColors.js'
+import ThumbGraphics from './ThumbGraphics/ThumbGraphics.js'
+import { Flex, Text } from '@radix-ui/themes'
+
+// Get all available color options
+const colorOptions = Object.keys(ThumbColors)
+const graphicOptions = Object.keys(ThumbGraphics)
+
+// Generate all possible IDs (color-graphic combinations)
+const allPossibleIds = colorOptions.flatMap((color) =>
+  graphicOptions.map((graphic) => `${color}-${graphic}`),
+)
+
+export default {
+  title: 'Components/ThumbnailPicker',
+  component: ThumbnailPicker,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## ThumbnailPicker Component
+
+A component that displays thumbnail previews with customizable colors and graphics. When no color and/or graphic props are provided, the component will generate random values automatically.
+
+### Usage
+
+**Using separate color and graphic props:**
+
+\`\`\`jsx
+<ThumbnailPicker 
+  color="yellowLight" 
+  graphic="synth1" 
+  width={68} 
+  height={68} 
+/>
+\`\`\`
+
+**Using id prop with format "color-graphic":**
+
+\`\`\`jsx
+<ThumbnailPicker 
+  id="yellowLight-synth1" 
+  width={68} 
+  height={68} 
+/>
+\`\`\`
+
+**Random generation (no props needed):**
+
+\`\`\`jsx
+// Random color and graphic
+<ThumbnailPicker />
+
+// Random color with specific graphic
+<ThumbnailPicker graphic="synth1" />
+
+// Random graphic with specific color
+<ThumbnailPicker color="blueLight" />
+\`\`\`
+        `,
+      },
+    },
+  },
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ["", ...colorOptions],
+      description: 'Color theme for the thumbnail background',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+    graphic: {
+      control: { type: 'select' },
+      options: ["", ...graphicOptions],
+      description: 'Graphic image to display on the thumbnail',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+    width: {
+      control: { type: 'number' },
+      description: 'Width of the thumbnail in pixels',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 68 },
+      },
+    },
+    height: {
+      control: { type: 'number' },
+      description: 'Height of the thumbnail in pixels',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 68 },
+      },
+    },
+    id: {
+      control: { type: 'text' },
+      // options: allPossibleIds,
+      description:
+        'Alternative way to set color and graphic using format "color-graphic" (e.g., "yellow-light-synth1")',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export const Default = {
+  args: {
+    color: '',
+    graphic: '',
+    width: 68,
+    height: 68,
+  },
+  render: (args) => <ThumbnailPicker {...args} />,
+}
+
+export const YellowVariants = {
+  args: {
+    graphic: 'synth1',
+    width: 68,
+    height: 68,
+  },
+  render: (args) => (
+    <Flex gap="5" wrap="wrap">
+      <ThumbnailPicker {...args} color="yellowLight" />
+      <ThumbnailPicker {...args} color="yellowMedium" />
+      <ThumbnailPicker {...args} color="yellowDark" />
+    </Flex>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows all yellow color variants (light, medium, dark)',
+      },
+    },
+  },
+}
+
+export const MintVariants = {
+  args: {
+    graphic: 'waves1',
+    width: 68,
+    height: 68,
+  },
+  render: (args) => (
+    <Flex gap="5" wrap="wrap">
+      <ThumbnailPicker {...args} color="mintLight" />
+      <ThumbnailPicker {...args} color="mintMedium" />
+      <ThumbnailPicker {...args} color="mintDark" />
+    </Flex>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows all mint color variants (light, medium, dark)',
+      },
+    },
+  },
+}
+
+export const TurquoiseVariants = {
+  args: {
+    graphic: 'patterns1',
+    width: 68,
+    height: 68,
+  },
+  render: (args) => (
+    <Flex gap="5" wrap="wrap">
+      <ThumbnailPicker {...args} color="turquoiseLight" />
+      <ThumbnailPicker {...args} color="turquoiseMedium" />
+      <ThumbnailPicker {...args} color="turquoiseDark" />
+    </Flex>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows all turquoise color variants (light, medium, dark)',
+      },
+    },
+  },
+}
+
+export const AcquaVariants = {
+  args: {
+    graphic: 'lines1',
+    width: 68,
+    height: 68,
+  },
+  render: (args) => (
+    <Flex gap="5" wrap="wrap">
+      <ThumbnailPicker {...args} color="acquaLight" />
+      <ThumbnailPicker {...args} color="acquaMedium" />
+      <ThumbnailPicker {...args} color="acquaDark" />
+    </Flex>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows all acqua color variants (light, medium, dark)',
+      },
+    },
+  },
+}
+
+export const BlueVariants = {
+  args: {
+    graphic: 'circles1',
+    width: 68,
+    height: 68,
+  },
+  render: (args) => (
+    <Flex gap="5" wrap="wrap">
+      <ThumbnailPicker {...args} color="blueLight" />
+      <ThumbnailPicker {...args} color="blueMedium" />
+      <ThumbnailPicker {...args} color="blueDark" />
+    </Flex>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows all blue color variants (light, medium, dark)',
+      },
+    },
+  },
+}
+
+export const PurpleVariants = {
+  args: {
+    graphic: 'shapes1',
+    width: 68,
+    height: 68,
+  },
+  render: (args) => (
+    <Flex gap="5" wrap="wrap">
+      <ThumbnailPicker {...args} color="purpleLight" />
+      <ThumbnailPicker {...args} color="purpleMedium" />
+      <ThumbnailPicker {...args} color="purpleDark" />
+    </Flex>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows all purple color variants (light, medium, dark)',
+      },
+    },
+  },
+}
+
+export const GrayVariants = {
+  args: {
+    graphic: 'synth2',
+    width: 68,
+    height: 68,
+  },
+  render: (args) => (
+    <Flex gap="5" wrap="wrap">
+      <ThumbnailPicker {...args} color="grayLight" />
+      <ThumbnailPicker {...args} color="grayMedium" />
+      <ThumbnailPicker {...args} color="grayDark" />
+    </Flex>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows all gray color variants (light, medium, dark)',
+      },
+    },
+  },
+}
+
+export const AllColors = {
+  args: {
+    graphic: 'synth1',
+    width: 68,
+    height: 68,
+  },
+  render: (args) => (
+    <Flex gap="5" wrap="wrap" maxWidth="800px">
+      {colorOptions.map((color) => (
+        <Flex key={color} direction="column" align="center">
+          <ThumbnailPicker {...args} color={color} />
+          <Text size="1" align="center" mt="2">
+            {color}
+          </Text>
+        </Flex>
+      ))}
+    </Flex>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows all available color options with their names',
+      },
+    },
+  },
+}
+
+export const DifferentSizes = {
+  args: {
+    color: 'blueMedium',
+    graphic: 'waves2',
+  },
+  render: (args) => (
+    <Flex gap="5" align="flex-end">
+      <ThumbnailPicker {...args} width={48} height={48} />
+      <ThumbnailPicker {...args} width={68} height={68} />
+      <ThumbnailPicker {...args} width={96} height={96} />
+      <ThumbnailPicker {...args} width={120} height={120} />
+    </Flex>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows the component in different sizes',
+      },
+    },
+  },
+}
+
+export const UsingId = {
+  args: {
+    id: 'yellowLight-synth1',
+    width: 68,
+    height: 68,
+  },
+  render: (args) => (
+    <Flex gap="5" wrap="wrap">
+      <ThumbnailPicker {...args} id="yellowLight-synth1" />
+      <ThumbnailPicker {...args} id="mintMedium-waves2" />
+      <ThumbnailPicker {...args} id="blueDark-circles1" />
+      <ThumbnailPicker {...args} id="purpleLight-shapes3" />
+      <ThumbnailPicker {...args} id="turquoiseMedium-patterns2" />
+      <ThumbnailPicker {...args} id="acquaLight-lines4" />
+      <ThumbnailPicker {...args} id="grayDark-shapes7" />
+    </Flex>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: `Demonstrates using the id prop with format "color-graphic" to set both color and graphic at once. Total of ${allPossibleIds.length} possible combinations available.`,
+      },
+    },
+  },
+}
+
+export const RandomExamples = {
+  args: {
+    width: 68,
+    height: 68,
+  },
+  render: (args) => (
+    <Flex direction="column" gap="4">
+      <Flex direction="column" gap="2">
+        <Text size="3" weight="bold">
+          Random Color + Random Graphic
+        </Text>
+        <Flex gap="5" wrap="wrap">
+          <ThumbnailPicker {...args} />
+          <ThumbnailPicker {...args} />
+          <ThumbnailPicker {...args} />
+          <ThumbnailPicker {...args} />
+        </Flex>
+      </Flex>
+
+      <Flex direction="column" gap="2">
+        <Text size="3" weight="bold">
+          Random Color + Fixed Graphic (waves2)
+        </Text>
+        <Flex gap="5" wrap="wrap">
+          <ThumbnailPicker {...args} graphic="waves2" />
+          <ThumbnailPicker {...args} graphic="waves2" />
+          <ThumbnailPicker {...args} graphic="waves2" />
+          <ThumbnailPicker {...args} graphic="waves2" />
+        </Flex>
+      </Flex>
+
+      <Flex direction="column" gap="2">
+        <Text size="3" weight="bold">
+          Fixed Color (purpleLight) + Random Graphic
+        </Text>
+        <Flex gap="5" wrap="wrap">
+          <ThumbnailPicker {...args} color="purpleLight" />
+          <ThumbnailPicker {...args} color="purpleLight" />
+          <ThumbnailPicker {...args} color="purpleLight" />
+          <ThumbnailPicker {...args} color="purpleLight" />
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates different combinations of random and fixed values. Each row shows a different scenario: completely random, random color with fixed graphic, and fixed color with random graphic.',
+      },
+    },
+  },
+}

package/src/components/ThumbnailPicker/getStyleFromID.js

@@ -0,0 +1,31 @@
+import ThumbColors from './ThumbColors/ThumbColors.js'
+import ThumbGraphics from './ThumbGraphics/ThumbGraphics.js'
+
+export function getStyleFromID(id) {
+  // Color options (21 total)
+  const colors = Object.keys(ThumbColors)
+
+  // Graphic options (35 total)
+  const graphics = Object.keys(ThumbGraphics)
+
+  // DJB2 hash function
+  function djb2Hash(str) {
+    let hash = 5381
+    for (let i = 0; i < str.length; i++) {
+      hash = (hash << 5) + hash + str.charCodeAt(i) // hash * 33 + charCode
+    }
+    return Math.abs(hash) // Ensure positive value
+  }
+
+  // Generate hash for the ID
+  const hash = djb2Hash(id)
+
+  // Use different parts of the hash for color and graphic selection
+  const colorIndex = hash % colors.length
+  const graphicIndex = Math.floor(hash / colors.length) % graphics.length
+
+  return {
+    color: colors[colorIndex],
+    graphic: graphics[graphicIndex],
+  }
+}

package/src/components/TooltipWithInfoIcon/TooltipWithInfoIcon.jsx

@@ -0,0 +1,18 @@
+import { Tooltip } from '@radix-ui/themes'
+import { InfoIcon } from '../../icons'
+import styles from './TooltipWithInfoIcon.module.css'
+
+export const TooltipWithInfoIcon = ({ content, className, ...props }) => {
+  return (
+    <Tooltip
+      maxWidth="198px"
+      content={content}
+      {...props}
+      className={className}
+    >
+      <InfoIcon width={16} height={16} className={styles.InfoIconWithTooltip} />
+    </Tooltip>
+  )
+}
+
+TooltipWithInfoIcon.displayName = 'TooltipWithInfoIcon'

package/src/components/TooltipWithInfoIcon/TooltipWithInfoIcon.module.css

@@ -0,0 +1,6 @@
+.InfoIconWithTooltip path {
+  fill: var(--neutral-alpha-7);
+}
+.InfoIconWithTooltip:hover path {
+  fill: rgba(223, 235, 253, 0.43);
+}

package/src/components/TooltipWithInfoIcon/TooltipWithInfoIcon.stories.jsx

@@ -0,0 +1,28 @@
+import { TooltipWithInfoIcon } from './TooltipWithInfoIcon'
+
+export default {
+  title: 'Components/TooltipWithInfoIcon',
+  component: TooltipWithInfoIcon,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    content: {
+      control: 'text',
+      description: 'Tooltip content',
+    },
+    side: {
+      control: 'select',
+      options: ['top', 'right', 'bottom', 'left'],
+      description: 'Tooltip side',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    content: 'This is a tooltip content',
+    side: 'top',
+  },
+}

package/src/components/TrackControlButton/TrackControlButton.jsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames'
+import { memo } from 'react'
+import { Button } from '../../index'
+import styles from './TrackControlButton.module.css'
+
+export const TrackControlButton = memo(
+  ({ variant = 'mute', isActive, className, onChange }) => {
+    const isMute = variant === 'mute'
+    const label = isMute ? 'M' : 'S'
+
+    return (
+      <Button
+        className={classNames(styles.button, className, {
+          [styles.mute]: isMute,
+          [styles.solo]: !isMute,
+          [styles.active]: isActive,
+        })}
+        variant="ghost"
+        color="gray"
+        onClick={() => onChange?.(!isActive)}
+      >
+        {label}
+      </Button>
+    )
+  },
+)
+
+TrackControlButton.displayName = 'TrackControlButton'

package/src/components/TrackControlButton/TrackControlButton.module.css

@@ -0,0 +1,32 @@
+.button {
+  width: 40px !important;
+  height: 100% !important;
+  font-size: 12px !important;
+  background-color: transparent;
+
+  &:not(.active) {
+    color: var(--neutral-10) !important;
+
+    &:hover {
+      color: var(--neutral-12) !important;
+    }
+  }
+
+  &.active {
+    &.mute {
+      color: var(--yellow-9) !important;
+
+      &:hover {
+        color: var(--yellow-10) !important;
+      }
+    }
+
+    &.solo {
+      color: var(--aqua-9) !important;
+
+      &:hover {
+        color: var(--aqua-10) !important;
+      }
+    }
+  }
+}