refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/form-components/Slider/Slider.module.css

@@ -0,0 +1,32 @@
+.root {
+  margin: 0 25px;
+}
+
+.slider {
+  padding-top: 50px;
+}
+
+.slider :global .rc-slider-handle {
+  width: 32px;
+  height: 32px;
+  margin-top: -14px;
+  border-radius: 16px;
+  cursor: pointer;
+  background-color: #0db9f0;
+}
+
+.slider :global .rc-slider-handle:after {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 8px;
+  height: 8px;
+  background: #ffffff;
+  border-radius: 4px;
+  content: '';
+}
+
+.slider :global .rc-slider-mark-text,
+.slider :global .rc-slider-tooltip-inner {
+  font-family: Montserrat, serif;
+}

app/react/components/form-components/Slider/Slider.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta, Story } from '@storybook/react';
+import { useEffect, useState } from 'react';
+
+import { Slider, Props } from './Slider';
+
+export default {
+  component: Slider,
+  title: 'Components/Form/Slider',
+} as Meta;
+
+function Template({ value, min, max, step }: JSX.IntrinsicAttributes & Props) {
+  const [sliderValue, setSliderValue] = useState(min);
+
+  useEffect(() => {
+    setSliderValue(value);
+  }, [value]);
+
+  return (
+    <Slider
+      min={min}
+      max={max}
+      step={step}
+      value={sliderValue}
+      onChange={setSliderValue}
+    />
+  );
+}
+
+export const Primary: Story<Props> = Template.bind({});
+Primary.args = {
+  min: 0,
+  max: 100,
+  step: 1,
+  value: 5,
+};

app/react/components/form-components/Slider/Slider.test.tsx

@@ -0,0 +1,22 @@
+import { render } from '@/react-tools/test-utils';
+
+import { Slider, Props } from './Slider';
+
+function renderDefault({
+  min = 0,
+  max = 10,
+  step = 1,
+  value = min,
+  onChange = () => {},
+}: Partial<Props> = {}) {
+  return render(
+    <Slider min={min} max={max} step={step} onChange={onChange} value={value} />
+  );
+}
+
+test('should display a Slider component', async () => {
+  const { getByRole } = renderDefault({});
+
+  const handle = getByRole('slider');
+  expect(handle).toBeTruthy();
+});

app/react/components/form-components/Slider/Slider.tsx

@@ -0,0 +1,42 @@
+import RcSlider from 'rc-slider';
+
+import styles from './Slider.module.css';
+import 'rc-slider/assets/index.css';
+
+export interface Props {
+  min: number;
+  max: number;
+  step: number;
+  value: number;
+  onChange: (value: number) => void;
+}
+
+export function Slider({ min, max, step, value, onChange }: Props) {
+  const SliderWithTooltip = RcSlider.createSliderWithTooltip(RcSlider);
+  const marks = {
+    [min]: translateMinValue(min),
+    [max]: max.toString(),
+  };
+
+  return (
+    <div className={styles.root}>
+      <SliderWithTooltip
+        tipFormatter={translateMinValue}
+        min={min}
+        max={max}
+        step={step}
+        marks={marks}
+        defaultValue={value}
+        onAfterChange={onChange}
+        className={styles.slider}
+      />
+    </div>
+  );
+}
+
+function translateMinValue(value: number) {
+  if (value === 0) {
+    return 'unlimited';
+  }
+  return value.toString();
+}