[_]: feat/Range Slider component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internxt/internxtui",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",
@@ -19,6 +19,9 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.2.25",
     "@internxt/eslint-config-internxt": "^1.0.9",
@@ -59,6 +62,7 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5.4.3",
     "vite": "^5.2.2",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^3.7.3",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^1.4.0"

src/components/index.ts

@@ -6,3 +6,4 @@ export * from './switch/Switch';
 export * from './radio-button/RadioButton';
 export * from './avatar/Avatar';
 export * from './spinner/Spinner';
+export * from './slider/RangeSlider';

src/components/slider/RangeSlider.tsx

@@ -0,0 +1,45 @@
+import { ChangeEvent } from 'react';
+import '../../styles/RangeSlider.css';
+
+interface RangeSliderProps {
+  value: number;
+  min?: number;
+  max: number;
+  step?: number;
+  percentageForProgressSliderBar?: number;
+  className?: string;
+  onChange: (value: number) => void;
+  disabled?: boolean;
+  ariaLabel?: string;
+}
+
+export const RangeSlider = ({
+  value,
+  min = 0,
+  max,
+  step,
+  className,
+  disabled = false,
+  ariaLabel = 'Range slider',
+  onChange,
+}: RangeSliderProps) => {
+  const percentage = ((value - min) / (max - min)) * 100;
+  const sliderBackground = `linear-gradient(to right, #3264fe ${percentage}%, #d5d5d5 ${percentage}%)`;
+
+  return (
+    <div className={className}>
+      <input
+        id="my-slider"
+        type="range"
+        min={min}
+        max={max}
+        value={value}
+        step={step}
+        onInput={(e: ChangeEvent<HTMLInputElement>) => onChange(Number(e.target.value))}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        style={{ background: sliderBackground }}
+      />
+    </div>
+  );
+};

src/components/slider/__test__/RangeSlider.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { RangeSlider } from '../RangeSlider';
+
+describe('RangeSlider component', () => {
+  it('RangeSlider onChange should work correctly', () => {
+    const handleChange = vi.fn();
+    render(<RangeSlider value={50} max={100} onChange={handleChange} />);
+
+    const slider = screen.getByRole('slider');
+
+    fireEvent.input(slider, { target: { value: '75' } });
+
+    expect(handleChange).toHaveBeenCalledOnce();
+    expect(handleChange).toHaveBeenCalledWith(75);
+  });
+
+  it('RangeSlider component should render correctly', () => {
+    const { container } = render(<RangeSlider value={50} max={100} onChange={() => {}} />);
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/slider/__test__/__snapshots__/RangeSlider.test.tsx.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RangeSlider component > RangeSlider component should render correctly 1`] = `
+<div>
+  <div>
+    <input
+      aria-label="Range slider"
+      id="my-slider"
+      max="100"
+      min="0"
+      step="1"
+      type="range"
+      value="50"
+    />
+  </div>
+</div>
+`;

src/stories/components/slider/RangeSlider.stories.ts

@@ -0,0 +1,72 @@
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import { RangeSlider } from '../../../components/slider/RangeSlider';
+import { useArgs } from '@storybook/preview-api';
+
+const onChangeDecorator: Decorator = (Story, context) => {
+  const [, setArgs] = useArgs();
+
+  return Story({
+    ...context,
+    args: {
+      ...context.args,
+      onChange: (newValue: number) => setArgs({ ...context.args, value: newValue }),
+    },
+  });
+};
+
+const meta: Meta<typeof RangeSlider> = {
+  title: 'Components/RangeSlider',
+  component: RangeSlider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [onChangeDecorator],
+  argTypes: {
+    min: {
+      description: 'The minimum value of the slider',
+      control: { type: 'number' },
+      defaultValue: 0,
+    },
+    max: {
+      description: 'The maximum value of the slider',
+      control: { type: 'number' },
+      defaultValue: 100,
+    },
+    value: {
+      description: 'The current value of the slider',
+      control: { type: 'number' },
+    },
+    className: {
+      description: 'The current width of the slider',
+      control: { type: 'text' },
+    },
+    step: {
+      description: 'The steps of the slider',
+      control: { type: 'number' },
+    },
+    percentageForProgressSliderBar: {
+      description: 'The custom percentage of the slider',
+      control: { type: 'number' },
+    },
+    ariaLabel: {
+      description: 'Label of the component',
+      control: { type: 'text' },
+    },
+    onChange: {
+      description: 'Function to handle value change',
+      action: 'onInput',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RangeSlider>;
+
+export const RangeSliderComponent: Story = {
+  args: {
+    min: 0,
+    max: 100,
+    value: 50,
+  },
+};

src/styles/RangeSlider.css

@@ -0,0 +1,72 @@
+.custom-range-slider {
+  width: 100%;
+  height: 6px;
+  background-color: #ffffff;
+  border-radius: 50%;
+  outline: none;
+  position: relative;
+}
+
+input[type="range"] {
+  position: relative;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  width: '100%';
+  background: #d5d5d5;
+  border-radius: 16px;
+  outline: none;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
+  height: 6px;
+}
+
+input[type="range"]::-moz-track {
+  appearance: none;
+  height: 6px;
+
+}
+
+input[type="range"]::-ms-track {
+  appearance: none;
+  height: 6px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 24px;
+  width: 24px;
+  background-color: #3264fe;
+  border-radius: 50%;
+  pointer-events: auto;
+  cursor: pointer;
+  margin-top: -9px;
+  border: none;
+}
+
+input[type="range"]::-moz-range-thumb {
+  appearance: none;
+  height: 24px;
+  width: 24px;
+  background-color: #3264fe;
+  border-radius: 50%;
+  pointer-events: auto;
+  cursor: pointer;
+  margin-top: -9px;
+  border: none;
+}
+
+input[type="range"]::-ms-thumb {
+  appearance: none;
+  height: 24px;
+  width: 24px;
+  background-color: #3264fe;
+  border-radius: 50%;
+  pointer-events: auto;
+  cursor: pointer;
+  margin-top: -9px;
+  border: none;
+}

vite.config.ts

@@ -3,6 +3,7 @@
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import svgr from 'vite-plugin-svgr';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
 import { configDefaults } from 'vitest/config';
 import { peerDependencies } from './package.json';
 
@@ -31,5 +32,5 @@ export default defineConfig({
     sourcemap: true,
     emptyOutDir: true,
   },
-  plugins: [dts(), svgr()],
+  plugins: [dts(), svgr(), cssInjectedByJsPlugin()],
 });