@memori.ai/ui 1.0.0-alpha

package/src/components/Slider/Slider.stories.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import Slider from './Slider'
+
+const meta = {
+  title: 'UI/Slider',
+  component: Slider,
+  tags: ['autodocs'],
+  argTypes: {
+    min: {
+      control: {
+        type: 'number',
+      },
+    },
+    max: {
+      control: {
+        type: 'number',
+      },
+    },
+    step: {
+      control: {
+        type: 'number',
+      },
+    },
+    defaultValue: {
+      control: {
+        type: 'number',
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+} satisfies Meta<typeof Slider>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    min: 0,
+    max: 100,
+    step: 1,
+    defaultValue: 50,
+  },
+}
+
+export const WithStep: Story = {
+  args: {
+    min: 0,
+    max: 100,
+    step: 10,
+    defaultValue: 50,
+  },
+}
+
+export const WithLabel: Story = {
+  args: {
+    min: 0,
+    max: 100,
+    step: 1,
+    defaultValue: 50,
+    label: 'Test',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    min: 0,
+    max: 100,
+    step: 1,
+    defaultValue: 50,
+    disabled: true,
+  },
+}

package/src/components/Slider/Slider.test.tsx

@@ -0,0 +1,55 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import Slider from './Slider'
+
+describe('Slider', () => {
+  it('renders Slider unchanged', () => {
+    const { container } = render(
+      <Slider
+        min={0}
+        max={100}
+        step={1}
+        defaultValue={50}
+      />,
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders Slider with disabled prop unchanged', () => {
+    const { container } = render(
+      <Slider
+        min={0}
+        max={100}
+        step={1}
+        defaultValue={50}
+        disabled
+      />,
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders Slider with label prop unchanged', () => {
+    const { container } = render(
+      <Slider
+        min={0}
+        max={100}
+        step={1}
+        defaultValue={50}
+        label="Test"
+      />,
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders Slider with different step unchanged', () => {
+    const { container } = render(
+      <Slider
+        min={0}
+        max={100}
+        step={10}
+        defaultValue={50}
+      />,
+    )
+    expect(container).toMatchSnapshot()
+  })
+})

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,157 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { Listbox } from '@headlessui/react'
+import cx from 'classnames'
+
+import './Slider.css'
+
+export interface Props {
+  min?: number
+  max?: number
+  step?: number
+  defaultValue?: number
+  label?: string | React.ReactNode
+  onChange?: (value: number) => void
+  disabled?: boolean
+}
+
+const CustomSlider = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  defaultValue = 50,
+  label,
+  onChange,
+  disabled = false,
+}: Props) => {
+  const [value, setValue] = useState(defaultValue)
+  const [isDragging, setIsDragging] = useState(false)
+  const sliderRef = useRef<HTMLDivElement>(null)
+  const percentage = ((value - min) / (max - min)) * 100
+
+  const marks = []
+  for (let i = min; i <= max; i += (max - min) / 4) {
+    marks.push(Math.round(i))
+  }
+
+  const calculateNewValue = (clientX: number) => {
+    if (!sliderRef.current) return value
+
+    const bounds = sliderRef.current.getBoundingClientRect()
+    const position = clientX - bounds.left
+    const sliderWidth = bounds.width
+    const percentage = Math.max(
+      0,
+      Math.min(100, (position / sliderWidth) * 100),
+    )
+    const newValue = Math.round((percentage / 100) * (max - min) + min)
+    const steppedValue = Math.round(newValue / step) * step
+    return Math.min(Math.max(steppedValue, min), max)
+  }
+
+  const handleInteractionStart = (clientX: number) => {
+    if (disabled) return
+    setIsDragging(true)
+    const newValue = calculateNewValue(clientX)
+    setValue(newValue)
+    onChange?.(newValue)
+  }
+
+  const handleInteractionMove = (clientX: number) => {
+    if (!isDragging || disabled) return
+    const newValue = calculateNewValue(clientX)
+    setValue(newValue)
+    onChange?.(newValue)
+  }
+
+  const handleInteractionEnd = () => {
+    setIsDragging(false)
+  }
+
+  useEffect(() => {
+    const handleTouchMove = (e: TouchEvent) => {
+      if (!isDragging) return
+      e.preventDefault() // Prevent scrolling while dragging
+      handleInteractionMove(e.touches[0]?.clientX ?? 0)
+    }
+
+    const handleMouseMove = (e: MouseEvent) => {
+      handleInteractionMove(e.clientX)
+    }
+
+    const handleEndInteraction = () => {
+      handleInteractionEnd()
+    }
+
+    if (isDragging) {
+      window.addEventListener('touchmove', handleTouchMove, { passive: false })
+      window.addEventListener('mousemove', handleMouseMove)
+      window.addEventListener('touchend', handleEndInteraction)
+      window.addEventListener('mouseup', handleEndInteraction)
+    }
+
+    return () => {
+      window.removeEventListener('touchmove', handleTouchMove)
+      window.removeEventListener('mousemove', handleMouseMove)
+      window.removeEventListener('touchend', handleEndInteraction)
+      window.removeEventListener('mouseup', handleEndInteraction)
+    }
+  }, [isDragging])
+
+  useEffect(() => {
+    setValue(defaultValue)
+  }, [defaultValue])
+
+  return (
+    <div
+      className={cx('memori--slider-container', {
+        'memori--slider-disabled': disabled,
+      })}
+      style={{ '--percentage': `${percentage}%` } as React.CSSProperties}
+    >
+      <div className="memori--slider-header">
+        {label && <div className="memori--slider-label">{label}</div>}
+        <div className="memori--slider-value">{value}</div>
+      </div>
+
+      <div
+        ref={sliderRef}
+        className="memori--slider-track-container"
+        onMouseDown={e => handleInteractionStart(e.clientX)}
+        onTouchStart={e => handleInteractionStart(e.touches[0]?.clientX ?? 0)}
+      >
+        <div className="memori--slider-track">
+          <div className="memori--slider-track-fill" />
+        </div>
+
+        <div className="memori--slider-marks">
+          {marks.map(mark => (
+            <div
+              key={mark}
+              className="memori--slider-mark"
+            >
+              <div className="memori--slider-mark-line" />
+              <span className="memori--slider-mark-value">{mark}</span>
+            </div>
+          ))}
+        </div>
+
+        <Listbox
+          value={value}
+          onChange={setValue}
+          disabled={disabled}
+        >
+          <div
+            className="memori--slider-thumb"
+            role="slider"
+            aria-valuemin={min}
+            aria-valuemax={max}
+            aria-valuenow={value}
+            tabIndex={disabled ? -1 : 0}
+          />
+        </Listbox>
+      </div>
+    </div>
+  )
+}
+
+export default CustomSlider

package/src/components/Slider/__snapshots__/Slider.test.tsx.snap

@@ -0,0 +1,419 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Slider > renders Slider unchanged 1`] = `
+<div>
+  <div
+    class="memori--slider-container"
+    style="--percentage: 50%;"
+  >
+    <div
+      class="memori--slider-header"
+    >
+      <div
+        class="memori--slider-value"
+      >
+        50
+      </div>
+    </div>
+    <div
+      class="memori--slider-track-container"
+    >
+      <div
+        class="memori--slider-track"
+      >
+        <div
+          class="memori--slider-track-fill"
+        />
+      </div>
+      <div
+        class="memori--slider-marks"
+      >
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            0
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            25
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            50
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            75
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            100
+          </span>
+        </div>
+      </div>
+      <div
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        class="memori--slider-thumb"
+        data-headlessui-state=""
+        role="slider"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider > renders Slider with different step unchanged 1`] = `
+<div>
+  <div
+    class="memori--slider-container"
+    style="--percentage: 50%;"
+  >
+    <div
+      class="memori--slider-header"
+    >
+      <div
+        class="memori--slider-value"
+      >
+        50
+      </div>
+    </div>
+    <div
+      class="memori--slider-track-container"
+    >
+      <div
+        class="memori--slider-track"
+      >
+        <div
+          class="memori--slider-track-fill"
+        />
+      </div>
+      <div
+        class="memori--slider-marks"
+      >
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            0
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            25
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            50
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            75
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            100
+          </span>
+        </div>
+      </div>
+      <div
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        class="memori--slider-thumb"
+        data-headlessui-state=""
+        role="slider"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider > renders Slider with disabled prop unchanged 1`] = `
+<div>
+  <div
+    class="memori--slider-container memori--slider-disabled"
+    style="--percentage: 50%;"
+  >
+    <div
+      class="memori--slider-header"
+    >
+      <div
+        class="memori--slider-value"
+      >
+        50
+      </div>
+    </div>
+    <div
+      class="memori--slider-track-container"
+    >
+      <div
+        class="memori--slider-track"
+      >
+        <div
+          class="memori--slider-track-fill"
+        />
+      </div>
+      <div
+        class="memori--slider-marks"
+      >
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            0
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            25
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            50
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            75
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            100
+          </span>
+        </div>
+      </div>
+      <div
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        class="memori--slider-thumb"
+        data-disabled=""
+        data-headlessui-state="disabled"
+        role="slider"
+        tabindex="-1"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider > renders Slider with label prop unchanged 1`] = `
+<div>
+  <div
+    class="memori--slider-container"
+    style="--percentage: 50%;"
+  >
+    <div
+      class="memori--slider-header"
+    >
+      <div
+        class="memori--slider-label"
+      >
+        Test
+      </div>
+      <div
+        class="memori--slider-value"
+      >
+        50
+      </div>
+    </div>
+    <div
+      class="memori--slider-track-container"
+    >
+      <div
+        class="memori--slider-track"
+      >
+        <div
+          class="memori--slider-track-fill"
+        />
+      </div>
+      <div
+        class="memori--slider-marks"
+      >
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            0
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            25
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            50
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            75
+          </span>
+        </div>
+        <div
+          class="memori--slider-mark"
+        >
+          <div
+            class="memori--slider-mark-line"
+          />
+          <span
+            class="memori--slider-mark-value"
+          >
+            100
+          </span>
+        </div>
+      </div>
+      <div
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        class="memori--slider-thumb"
+        data-headlessui-state=""
+        role="slider"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;

package/src/components/Slider/index.tsx

@@ -0,0 +1,2 @@
+import Slider from './Slider'
+export { Slider }