From 006f63e9d2b15bd9043ac482c4204eee083c26f0 Mon Sep 17 00:00:00 2001 From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com> Date: Wed, 23 Oct 2024 10:49:09 +0200 Subject: [PATCH 1/5] feat: Range Slider component --- package.json | 4 + src/components/index.ts | 1 + src/components/slider/RangeSlider.tsx | 49 + .../slider/__test__/RangeSlider.test.tsx | 32 + .../__snapshots__/RangeSlider.test.tsx.snap | 18 + .../components/slider/RangeSlider.stories.ts | 65 + src/styles/RangeSlider.css | 72 + vite.config.ts | 3 +- yarn.lock | 8096 ++++++----------- 9 files changed, 3084 insertions(+), 5256 deletions(-) create mode 100644 src/components/slider/RangeSlider.tsx create mode 100644 src/components/slider/__test__/RangeSlider.test.tsx create mode 100644 src/components/slider/__test__/__snapshots__/RangeSlider.test.tsx.snap create mode 100644 src/stories/components/slider/RangeSlider.stories.ts create mode 100644 src/styles/RangeSlider.css diff --git a/package.json b/package.json index e7615e6..b247a4e 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/src/components/index.ts b/src/components/index.ts index bb5fec9..51a79a3 100644 --- a/src/components/index.ts +++ b/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'; diff --git a/src/components/slider/RangeSlider.tsx b/src/components/slider/RangeSlider.tsx new file mode 100644 index 0000000..7f974ef --- /dev/null +++ b/src/components/slider/RangeSlider.tsx @@ -0,0 +1,49 @@ +import { ChangeEvent } from 'react'; +import '../../styles/RangeSlider.css'; + +interface RangeSliderProps { + value: number; + min?: number; + max: number; + step?: number; + className?: string; + color?: string; + onChange: (value: number) => void; + disabled?: boolean; + ariaLabel?: string; +} + +export const RangeSlider = ({ + value, + min = 0, + max, + step = 1, + className, + onChange, + disabled = false, + ariaLabel = 'Range slider', +}: RangeSliderProps) => { + const percentage = (value / max) * 100; + const sliderBackground = `linear-gradient(to right, #3264fe ${percentage}%, #d5d5d5 ${percentage}%)`; + + const handleChange = (newValue: number) => { + onChange(newValue); + }; + + return ( +