@moises.ai/design-system 3.4.4 → 3.4.6

package/src/components/InstrumentSelector/InstrumentSelector.stories.jsx

@@ -0,0 +1,33 @@
+import { InstrumentSelector } from './InstrumentSelector'
+import {
+  DrumsIcon,
+  BassIcon,
+  ElectricGuitarIcon,
+  KeysIcon,
+  StringsIcon,
+  WindIcon,
+} from '../../icons'
+
+export default {
+  title: 'Components/InstrumentSelector',
+  component: InstrumentSelector,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export const Default = {
+  args: {
+    items: [
+      { value: 'drums', text: 'Drums', Icon: DrumsIcon },
+      { value: 'bass', text: 'Bass', Icon: BassIcon },
+      { value: 'guitars', text: 'Guitars', Icon: ElectricGuitarIcon },
+      { value: 'keys', text: 'Keys', Icon: KeysIcon },
+      { value: 'strings', text: 'Strings', Icon: StringsIcon },
+      { value: 'others', text: 'Others', Icon: WindIcon },
+    ],
+    defaultValue: 'drums',
+    columns: { initial: '2' },
+  },
+}

package/src/components/Knob/Knob.jsx

@@ -0,0 +1,173 @@
+import styles from './Knob.module.css'
+import classNames from 'classnames'
+import { useMemo, useState } from 'react'
+import { useKnob } from './useKnob'
+import {
+  KNOB_CENTER_X,
+  KNOB_CENTER_Y,
+  KNOB_RADIUS,
+  dotColors,
+  dotPositions,
+} from './constants'
+import { getActiveDotIndex, getPointerProperties } from './utils'
+import React from 'react'
+
+export const Knob = ({
+  className,
+  value,
+  onChange,
+  disabled,
+  clickableDots = false,
+  dots = [],
+}) => {
+  const [hoveredDot, setHoveredDot] = useState(null)
+
+  if (!dots || dots.length === 0) {
+    console.warn('Knob: dots prop is required and must be a non-empty array')
+    return null
+  }
+
+  const defaultDot = useMemo(() => {
+    return (
+      dots?.find((dot) => dot.default) ||
+      dots?.[0] || { position: 0, color: 'neutral', default: true }
+    )
+  }, [dots])
+
+  const { containerRef, isDragging, handleClick, handleDotClick } = useKnob({
+    value,
+    onChange,
+    disabled,
+    dots: dots || [],
+    defaultDot,
+    clickableDots,
+  })
+
+  const activeDotIndex = useMemo(() => {
+    if (typeof value === 'object' && value !== null) {
+      return value.position
+    }
+    return getActiveDotIndex(value, dots)
+  }, [value, dots])
+
+  const { pointerRotation, pointerColor } = useMemo(() => {
+    return getPointerProperties(activeDotIndex, disabled)
+  }, [activeDotIndex, disabled])
+
+  const getDotColor = (dotConfig) => {
+    const colorConfig = dotColors[dotConfig.color] || dotColors.neutral
+    const isActive = dotConfig.position === activeDotIndex
+    const isHovered = hoveredDot === dotConfig.position && clickableDots
+
+    if (disabled) {
+      return colorConfig.default
+    }
+
+    if (isActive) {
+      return colorConfig.active
+    } else if (isHovered) {
+      return colorConfig.hover
+    } else {
+      return colorConfig.default
+    }
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={classNames(styles.content, className)}
+      data-no-drag="true"
+      onClick={handleClick}
+      style={{ cursor: disabled ? 'default' : 'ns-resize' }}
+    >
+      <div
+        className={classNames(
+          styles.pan,
+          isDragging && styles.active,
+          disabled && styles.disabled,
+        )}
+      >
+        <svg width={39} height={39} viewBox="0 0 39 39" fill="none">
+          {/* Background and outline */}
+          <circle cx={KNOB_CENTER_X} cy={KNOB_CENTER_Y} r={KNOB_RADIUS} />
+          <circle
+            cx={KNOB_CENTER_X}
+            cy={KNOB_CENTER_Y}
+            r={KNOB_RADIUS + 0.5}
+            stroke="#D3EDF8"
+            strokeOpacity={0.113725}
+          />
+
+          {/* Pointer at the end of the arc */}
+          <g
+            transform={`rotate(${pointerRotation} ${KNOB_CENTER_X} ${KNOB_CENTER_Y})`}
+          >
+            <path
+              d="M19.5 4.5 L19.5 12"
+              stroke={pointerColor}
+              strokeWidth={1}
+              transform="rotate(90 19.5 19.5)"
+            />
+          </g>
+
+          {/* dots around the knob */}
+          {dots?.map((dotConfig) => {
+            const dot = dotPositions[dotConfig.position]
+            if (!dot) return null
+
+            const fillColor = getDotColor(dotConfig)
+            // only clickable if not disabled
+            const isClickable = clickableDots && !disabled
+
+            return (
+              <React.Fragment key={`dot-${dotConfig.position}`}>
+                {isClickable && (
+                  <circle
+                    cx={dot.x}
+                    cy={dot.y}
+                    r={4}
+                    style={{
+                      cursor: 'pointer',
+                      pointerEvents: 'all',
+                    }}
+                    onMouseEnter={() => setHoveredDot(dotConfig.position)}
+                    onMouseLeave={() => setHoveredDot(null)}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleDotClick(dotConfig.position)
+                    }}
+                  />
+                )}
+                <circle
+                  cx={dot.x}
+                  cy={dot.y}
+                  r={1}
+                  fill={fillColor}
+                  style={{
+                    cursor: isClickable ? 'pointer' : 'default',
+                    transition: 'fill 0.2s ease',
+                    pointerEvents: isClickable ? 'none' : 'all',
+                  }}
+                  onMouseEnter={() => {
+                    if (isClickable) setHoveredDot(dotConfig.position)
+                  }}
+                  onMouseLeave={() => {
+                    if (isClickable) setHoveredDot(null)
+                  }}
+                  onClick={(e) => {
+                    if (isClickable) {
+                      e.stopPropagation()
+                      handleDotClick(dotConfig.position)
+                    }
+                  }}
+                />
+              </React.Fragment>
+            )
+          })}
+        </svg>
+      </div>
+    </div>
+  )
+}
+
+Knob.displayName = 'Knob'

package/src/components/Knob/Knob.module.css

@@ -0,0 +1,70 @@
+.content {
+  position: relative;
+  width: 45px;
+  height: 45px;
+  margin: 0px;
+  user-select: none;
+  -webkit-user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pan {
+  width: 39px;
+  height: 39px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pan svg circle:first-of-type {
+  fill: #DDEAF8;
+  fill-opacity: 0.0784314;
+}
+
+.pan:hover:not(.disabled) svg circle:first-of-type {
+  fill: #D9EDFE;
+  fill-opacity: 0.145098;
+}
+
+.active svg circle:first-of-type {
+  fill: #D3EDF8;
+  fill-opacity: 0.113725;
+}
+
+.disabled svg circle:first-of-type {
+  fill: #DDEAF8;
+  fill-opacity: 0.0784314;
+}
+
+.tooltipContent {
+  background-color: var(--neutral-12);
+  color: var(--neutral-2);
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  z-index: 999;
+  white-space: nowrap;
+  animation: fadeIn 0.2s ease;
+  display: flex;
+  align-items: center;
+  width: 70px;
+  justify-content: center;
+  gap: 4px;
+}
+
+.tooltipArrow {
+  fill: var(--neutral-12);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/components/Knob/Knob.stories.jsx

@@ -0,0 +1,289 @@
+import { Knob } from './Knob'
+import { useState } from 'react'
+import { Flex, Text } from '@radix-ui/themes'
+
+export default {
+  title: 'Components/Knob',
+  component: Knob,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A circular pan control component that allows setting a value between -1 and 1 with visual feedback. Can be controlled with mouse drag or mouse wheel.\n\n' +
+          '## Usage\n\n' +
+          '```jsx\n' +
+          "import { Knob } from '@moises.ai/design-system'\n\n" +
+          'const MyComponent = () => {\n' +
+          '  const [selectedDot, setSelectedDot] = useState(null)\n\n' +
+          '  return (\n' +
+          '    <Knob\n' +
+          '      value={selectedDot}\n' +
+          '      onChange={setSelectedDot}\n' +
+          '      clickableDots={true}\n' +
+          '      dots={[\n' +
+          '        { position: 0, color: "neutral", default: true, label: "Normal", value: "NORMAL" },\n' +
+          '        { position: 2, color: "red", label: "High", value: "HIGH" },\n' +
+          '        { position: 4, color: "neutral", label: "Low", value: "LOW" }\n' +
+          '      ]}\n' +
+          '    />\n' +
+          '  )\n' +
+          '}\n' +
+          '```\n\n' +
+          '## Important\n\n' +
+          'The `dots` prop is **required** and must be a non-empty array. The component will not render if no dots are provided.\n\n' +
+          '## Dot Positions\n\n' +
+          '- `0`: 12h (top)\n' +
+          '- `1`: 1h30\n' +
+          '- `2`: 3h (right)\n' +
+          '- `3`: 4h30\n' +
+          '- `4`: 6h (bottom)\n' +
+          '- `5`: 7h30\n' +
+          '- `6`: 9h (left)\n' +
+          '- `7`: 10h30\n\n' +
+          '## Clickable Dots\n\n' +
+          'When `clickableDots={true}`, clicking on a dot will set the knob value to point to that position.\n\n' +
+          '## Object Return\n\n' +
+          'The `onChange` callback now receives the complete dot object including all properties like `label`, `value`, `position`, `color`, etc.',
+      },
+    },
+  },
+  argTypes: {
+    value: {
+      description:
+        'Current knob value. Can be a number between -1 and 1, or a dot object when using the new object-based approach',
+      table: {
+        type: { summary: 'number | object' },
+        defaultValue: { summary: 0 },
+      },
+    },
+    onChange: {
+      description:
+        'Callback function triggered when the knob value changes. Now receives the complete dot object.',
+      table: {
+        type: { summary: 'function' },
+      },
+      action: 'onChange',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables user interaction with the control',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    clickableDots: {
+      control: 'boolean',
+      description: 'Makes dots clickable to set knob value to that position',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    dots: {
+      control: 'object',
+      description:
+        'Array of dot configurations with position, color, and optional properties like label, value, and default flag. This is **required** and must be a non-empty array. Colors: neutral (blue tones) or red.',
+      table: {
+        type: {
+          summary:
+            'Array<{position: number, color: "neutral" | "red", default?: boolean, label?: string, value?: any}>',
+        },
+        defaultValue: {
+          summary: '[] (empty array - must be provided)',
+        },
+      },
+    },
+    className: {
+      description: 'Additional CSS class to apply to the component',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export const Default = {
+  render: (args) => {
+    const [value, setValue] = useState(null)
+    return (
+      <Knob
+        {...args}
+        value={value}
+        onChange={setValue}
+        dots={[
+          { position: 0, color: 'neutral', default: true },
+          { position: 2, color: 'red' },
+          { position: 4, color: 'neutral' },
+          { position: 6, color: 'red' },
+        ]}
+      />
+    )
+  },
+}
+
+export const WithObjectReturn = {
+  render: (args) => {
+    const [selectedDot, setSelectedDot] = useState(null)
+
+    const handleChange = (dot) => {
+      setSelectedDot(dot)
+      console.log('Selected dot:', dot)
+    }
+
+    return (
+      <Flex direction="column" align="center" gap="2">
+        <Knob
+          {...args}
+          value={selectedDot}
+          onChange={handleChange}
+          clickableDots={true}
+          dots={[
+            {
+              position: 0,
+              color: 'neutral',
+              default: true,
+              label: 'Normal',
+              value: 'NORMAL',
+            },
+            {
+              position: 2,
+              color: 'red',
+              label: 'High',
+              value: 'HIGH',
+            },
+            {
+              position: 4,
+              color: 'neutral',
+              label: 'Low',
+              value: 'LOW',
+            },
+            {
+              position: 6,
+              color: 'red',
+              label: 'Very High',
+              value: 'VERY_HIGH',
+            },
+          ]}
+        />
+        <Text>Selected: {selectedDot?.label || 'None'}</Text>
+        <Text>Value: {selectedDot?.value || 'None'}</Text>
+        <Text>Position: {selectedDot?.position ?? 'None'}</Text>
+      </Flex>
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Example showing how the Knob now returns complete dot objects with all properties including label, value, position, and color.',
+      },
+    },
+  },
+}
+
+export const Disabled = {
+  render: (args) => {
+    const [value, setValue] = useState(null)
+
+    return (
+      <Knob
+        {...args}
+        value={value}
+        onChange={setValue}
+        disabled={true}
+        dots={[
+          { position: 0, color: 'neutral', default: true },
+          { position: 2, color: 'red' },
+          { position: 4, color: 'neutral' },
+          { position: 6, color: 'red' },
+        ]}
+      />
+    )
+  },
+}
+
+export const WithClickableDots = {
+  render: (args) => {
+    const [value, setValue] = useState(null)
+
+    return (
+      <Flex direction="column" align="center" gap="2">
+        <Knob
+          {...args}
+          value={value}
+          onChange={setValue}
+          clickableDots={true}
+          dots={[
+            { position: 0, color: 'neutral', default: true },
+            { position: 2, color: 'red' },
+            { position: 4, color: 'neutral' },
+            { position: 6, color: 'red' },
+          ]}
+        />
+        <Text>
+          Value: {typeof value === 'object' ? value?.position : value}
+        </Text>
+      </Flex>
+    )
+  },
+}
+
+export const FullRotation = {
+  render: (args) => {
+    const [value, setValue] = useState(null)
+    return (
+      <Knob
+        {...args}
+        value={value}
+        onChange={setValue}
+        clickableDots={true}
+        dots={[
+          { position: 0, color: 'neutral' }, // 12h
+          { position: 1, color: 'neutral' }, // 1h30
+          { position: 2, color: 'red' }, // 3h
+          { position: 3, color: 'neutral' }, // 4h30
+          { position: 4, color: 'neutral' }, // 6h
+          { position: 5, color: 'neutral' }, // 7h30
+          { position: 6, color: 'red' }, // 9h
+          { position: 7, color: 'neutral' }, // 10h30
+        ]}
+      />
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Knob with full 360° rotation capability. The pointer can move to any position where there are dots.',
+      },
+    },
+  },
+}
+
+export const ThreeDots = {
+  render: (args) => {
+    const [value, setValue] = useState(null)
+    return (
+      <Knob
+        {...args}
+        value={value}
+        onChange={setValue}
+        dots={[
+          { position: 0, color: 'neutral', default: true },
+          { position: 2, color: 'red' },
+          { position: 4, color: 'neutral' },
+        ]}
+      />
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Knob with only 3 dots: 12h, 3h, and 6h positions.',
+      },
+    },
+  },
+}

package/src/components/Knob/constants.js

@@ -0,0 +1,38 @@
+export const KNOB_CENTER_X = 19.5
+export const KNOB_CENTER_Y = 19.5
+export const KNOB_RADIUS = 14
+
+// Radius of the dots
+const DOT_RADIUS = 18 // 14 (knob radius) + 4 (distance)
+
+// Angles for the 8 positions (in radians)
+const DOT_ANGLES = [
+  -Math.PI / 2, // 12h (top)
+  -Math.PI / 4, // 1h30
+  0, // 3h (right)
+  Math.PI / 4, // 4h30
+  Math.PI / 2, // 6h (bottom)
+  (3 * Math.PI) / 4, // 7h30
+  Math.PI, // 9h (left)
+  (-3 * Math.PI) / 4, // 10h30
+]
+// Dot colors mapping
+export const dotColors = {
+  neutral: {
+    default: 'rgba(214, 235, 253, 0.19)',
+    hover: 'rgba(214, 235, 253, 0.5)',
+    active: 'rgba(241, 247, 254, 0.71)',
+  },
+  red: {
+    default: 'rgba(255, 32, 71, 0.34)',
+    hover: 'rgba(255, 32, 71, 0.5)',
+    active: 'rgba(254, 78, 84, 0.89)',
+  },
+}
+
+export const dotPositions = DOT_ANGLES.map((angle, position) => ({
+  angle,
+  x: KNOB_CENTER_X + DOT_RADIUS * Math.cos(angle),
+  y: KNOB_CENTER_Y + DOT_RADIUS * Math.sin(angle),
+  position,
+}))