Reintroduce Slider component with tailwind (#1908)

* Reintroduce Slider component with tailwind

* Add changeset

* Remove dynamic classnames

* Remove storybook prop

* Fix lint

* Remove script

* Fix lint issues

* Fix tailwind class order

* Undo fn comment block

.changeset/new-olives-yawn.md

@@ -0,0 +1,5 @@
+---
+'@penumbra-zone/ui': minor
+---
+
+Add Slider component

packages/ui/package.json

@@ -43,6 +43,7 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "clsx": "^2.1.1",

packages/ui/src/Slider/index.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Slider } from './index';
+
+const meta: Meta<typeof Slider> = {
+  component: Slider,
+  tags: ['autodocs', '!dev'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  args: {
+    min: 0,
+    max: 10,
+    step: 1,
+    defaultValue: 5,
+    leftLabel: 'Left label',
+    rightLabel: 'Right label',
+    showValue: true,
+    valueDetails: 'dummy text',
+    showTrackGaps: true,
+    trackGapBackground: 'base.black',
+    showFill: true,
+    fontSize: '16px',
+    disabled: false,
+  },
+};

packages/ui/src/Slider/index.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import { Text } from '../Text';
+import * as RadixSlider from '@radix-ui/react-slider';
+import { ThemeColor, getThemeColorClass } from '../utils/color';
+import cn from 'clsx';
+
+interface SliderProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  leftLabel?: string;
+  rightLabel?: string;
+  showValue?: boolean;
+  valueDetails?: string;
+  focusedOutlineColor?: ThemeColor;
+  showTrackGaps?: boolean;
+  trackGapBackground?: ThemeColor;
+  showFill?: boolean;
+  fontSize?: string;
+  disabled?: boolean;
+}
+
+export const Slider: React.FC<SliderProps> = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  defaultValue = 0,
+  onChange,
+  leftLabel,
+  rightLabel,
+  showValue = true,
+  showFill = false,
+  showTrackGaps = true,
+  trackGapBackground = 'base.black',
+  valueDetails,
+  disabled = false,
+}) => {
+  const [value, setValue] = useState(defaultValue);
+  const handleValueChange = (newValue: number[]) => {
+    const updatedValue = newValue[0] ?? defaultValue;
+    setValue(updatedValue);
+    onChange?.(updatedValue);
+  };
+
+  const totalSteps = (max - min) / step;
+
+  return (
+    <div>
+      {(!!leftLabel || !!rightLabel) && (
+        <div className='mb-2 flex w-full justify-between'>
+          <Text detailTechnical as='div' color='text.secondary'>
+            {leftLabel}
+          </Text>
+          <Text detailTechnical as='div' color='text.secondary'>
+            {rightLabel}
+          </Text>
+        </div>
+      )}
+      <RadixSlider.Root
+        className='relative flex h-8 w-full items-center'
+        min={min}
+        max={max}
+        step={step}
+        defaultValue={[defaultValue]}
+        onValueChange={handleValueChange}
+        disabled={disabled}
+      >
+        <RadixSlider.Track className='relative h-2 w-full rounded-full bg-other-tonalFill10 px-2'>
+          {showFill && (
+            <RadixSlider.Range className='absolute h-full rounded-full bg-primary-main' />
+          )}
+          <div className='relative'>
+            {showTrackGaps &&
+              Array.from({ length: totalSteps + 1 })
+                .map((_, i): number => (i / totalSteps) * 100)
+                .map(left => {
+                  return (
+                    <div
+                      key={left}
+                      className={cn(
+                        'absolute w-1 h-2 -translate-x-1/2',
+                        getThemeColorClass(trackGapBackground).bg,
+                      )}
+                      style={{
+                        left: `${left}%`,
+                      }}
+                    />
+                  );
+                })}
+          </div>
+        </RadixSlider.Track>
+        <RadixSlider.Thumb
+          className={cn(
+            'block w-4 h-4 rounded-full bg-neutral-contrast',
+            !disabled && 'cursor-grab hover:bg-neutral-contrast focus:outline focus:outline-2',
+            !disabled && `focus:outline-primary-main`,
+            disabled &&
+              "after:content-[''] after:absolute after:inset-0 after:bg-action-disabledOverlay",
+          )}
+        />
+      </RadixSlider.Root>
+      {showValue && (
+        <div className='mt-4 flex rounded-sm border border-other-tonalStroke px-3 py-2 text-text-primary'>
+          <Text as='div' detail color='text.primary'>
+            {value}
+          </Text>
+          {valueDetails && (
+            <div className='ml-2'>
+              <Text as='div' detail color='text.secondary'>
+                · {valueDetails}
+              </Text>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};