@mmb-digital/design-system-web 0.1.0

package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderMax.test.ts

@@ -0,0 +1,83 @@
+import { getSliderMax } from '@/components/slider/slider/sliderFunction/linearVisualSteps/sliderMax';
+import { SliderSteps } from '@/components/slider/slider/slider.types';
+
+describe('Running Test for slider linear visual step sliderMax', () => {
+	test('linear step', () => {
+		const linerStep: SliderSteps = {
+			baseStep: 1,
+			breakpointList: [],
+		};
+
+		expect(
+			getSliderMax({
+				min: 10,
+				max: 20,
+				steps: linerStep,
+			}),
+		).toBe(20);
+	});
+
+	test('multiple step 1', () => {
+		const linerStep: SliderSteps = {
+			baseStep: 1,
+			breakpointList: [
+				{
+					step: 2,
+					bottomBreakpoint: 20,
+				},
+			],
+		};
+
+		expect(
+			getSliderMax({
+				min: 10,
+				max: 30,
+				steps: linerStep,
+			}),
+		).toBe(25);
+	});
+
+	test('multiple step 2', () => {
+		const linerStep: SliderSteps = {
+			baseStep: 1,
+			breakpointList: [
+				{
+					step: 2,
+					bottomBreakpoint: 19,
+				},
+			],
+		};
+
+		expect(
+			getSliderMax({
+				min: 10,
+				max: 30,
+				steps: linerStep,
+			}),
+		).toBe(25);
+	});
+
+	test('multiple step 3', () => {
+		const linerStep: SliderSteps = {
+			baseStep: 1,
+			breakpointList: [
+				{
+					step: 2,
+					bottomBreakpoint: 20,
+				},
+				{
+					step: 3,
+					bottomBreakpoint: 30,
+				},
+			],
+		};
+
+		expect(
+			getSliderMax({
+				min: 10,
+				max: 40,
+				steps: linerStep,
+			}),
+		).toBe(29);
+	});
+});

package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderMax.ts

@@ -0,0 +1,34 @@
+import { SliderBreakpoint, SliderSteps } from '@/components/slider/slider/slider.types';
+
+interface GetSliderMaxParam {
+	readonly max: number;
+	readonly min: number;
+	readonly steps: SliderSteps;
+}
+
+export const getSliderMax = (param: GetSliderMaxParam): number => {
+	const { max, min, steps } = param;
+
+	const breakpoints: SliderBreakpoint[] = [{ step: steps.baseStep, bottomBreakpoint: min }, ...steps.breakpointList];
+
+	const sliderMax = breakpoints.reduce((accumulator, currentValue, currentIndex, array) => {
+		const { bottomBreakpoint: currenBottomBreakpoint, step } = currentValue;
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		const nextBreakpoint: number = array[currentIndex + 1]?.bottomBreakpoint === undefined ? max : array[currentIndex + 1].bottomBreakpoint;
+
+		let localSteps = 0;
+		let i = currenBottomBreakpoint;
+		while (i + step < nextBreakpoint) {
+			i = i + step;
+			localSteps = localSteps + 1;
+		}
+
+		if (i < nextBreakpoint) {
+			return accumulator + localSteps + 1;
+		}
+
+		return accumulator + localSteps;
+	}, min);
+
+	return sliderMax;
+};

package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderValueByValue.test.ts

@@ -0,0 +1,249 @@
+import { getSliderValueByValue } from '@/components/slider/slider/sliderFunction/linearVisualSteps/sliderValueByValue';
+import { SliderSteps } from '@/components/slider/slider/slider.types';
+
+describe('Running Test for slider linear visual step sliderValue', () => {
+	test('linear step', () => {
+		const steps: SliderSteps = {
+			baseStep: 1,
+			breakpointList: [],
+		};
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 20,
+				steps: steps,
+				value: 10,
+			}),
+		).toBe(10);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 20,
+				steps: steps,
+				value: 15,
+			}),
+		).toBe(15);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 20,
+				steps: steps,
+				value: 20,
+			}),
+		).toBe(20);
+	});
+
+	test('multiple step 1', () => {
+		const steps: SliderSteps = {
+			baseStep: 1,
+			breakpointList: [
+				{
+					step: 2,
+					bottomBreakpoint: 20,
+				},
+			],
+		};
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 30,
+				steps: steps,
+				value: 10,
+			}),
+		).toBe(10);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 30,
+				steps: steps,
+				value: 20,
+			}),
+		).toBe(20);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 30,
+				steps: steps,
+				value: 22,
+			}),
+		).toBe(21);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 30,
+				steps: steps,
+				value: 30,
+			}),
+		).toBe(25);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 30,
+				steps: steps,
+				value: 28,
+			}),
+		).toBe(24);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 30,
+				steps: steps,
+				value: 27,
+			}),
+		).toBe(24);
+	});
+
+	test('multiple step 2', () => {
+		const steps: SliderSteps = {
+			baseStep: 1,
+			breakpointList: [
+				{
+					step: 2,
+					bottomBreakpoint: 20,
+				},
+				{
+					step: 3,
+					bottomBreakpoint: 30,
+				},
+			],
+		};
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 40,
+				steps: steps,
+				value: 30,
+			}),
+		).toBe(25);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 40,
+				steps: steps,
+				value: 33,
+			}),
+		).toBe(26);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 40,
+				steps: steps,
+				value: 34,
+			}),
+		).toBe(27);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 40,
+				steps: steps,
+				value: 36,
+			}),
+		).toBe(27);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 40,
+				steps: steps,
+				value: 39,
+			}),
+		).toBe(28);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 40,
+				steps: steps,
+				value: 40,
+			}),
+		).toBe(29);
+	});
+
+	test('multiple step 3', () => {
+		const steps: SliderSteps = {
+			baseStep: 3,
+			breakpointList: [
+				{
+					step: 4,
+					bottomBreakpoint: 20,
+				},
+			],
+		};
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 50,
+				steps: steps,
+				value: 19,
+			}),
+		).toBe(13);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 50,
+				steps: steps,
+				value: 20,
+			}),
+		).toBe(14);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 50,
+				steps: steps,
+				value: 21,
+			}),
+		).toBe(15);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 50,
+				steps: steps,
+				value: 22,
+			}),
+		).toBe(15);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 50,
+				steps: steps,
+				value: 23,
+			}),
+		).toBe(15);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 50,
+				steps: steps,
+				value: 24,
+			}),
+		).toBe(15);
+
+		expect(
+			getSliderValueByValue({
+				min: 10,
+				max: 50,
+				steps: steps,
+				value: 25,
+			}),
+		).toBe(16);
+	});
+});

package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderValueByValue.ts

@@ -0,0 +1,41 @@
+import { SliderBreakpoint, SliderSteps } from '@/components/slider/slider/slider.types';
+
+interface GetSliderValueByValueParam {
+	readonly max: number;
+	readonly min: number;
+	readonly steps: SliderSteps;
+	readonly value: number;
+}
+
+export const getSliderValueByValue = (param: GetSliderValueByValueParam): number => {
+	const { max, min, steps, value } = param;
+
+	const breakpoints: SliderBreakpoint[] = [{ step: steps.baseStep, bottomBreakpoint: min }, ...steps.breakpointList];
+
+	let sliderValue = min;
+
+	outerCycle: for (const [breakpointIndex, breakpoint] of breakpoints.entries()) {
+		const { bottomBreakpoint: currenBottomBreakpoint, step } = breakpoint;
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		const nextBreakpoint = breakpoints[breakpointIndex + 1]?.bottomBreakpoint === undefined ? max : breakpoints[breakpointIndex + 1].bottomBreakpoint;
+
+		let i: number = currenBottomBreakpoint;
+		if (value <= currenBottomBreakpoint) {
+			break;
+		}
+		while (i + step < nextBreakpoint) {
+			i = i + step;
+			sliderValue = sliderValue + 1;
+
+			if (i === value || (i > value && i < value + step)) {
+				break outerCycle;
+			}
+		}
+
+		if (i < nextBreakpoint) {
+			sliderValue = sliderValue + 1;
+		}
+	}
+
+	return sliderValue;
+};

package/src/components/slider/slider/sliderFunction/linearVisualSteps/valueBySliderValue.test.ts

@@ -0,0 +1,204 @@
+import { SliderSteps } from '@/components/slider/slider/slider.types';
+import { getValueBySliderValue } from '@/components/slider/slider/sliderFunction/linearVisualSteps/valueBySliderValue';
+
+describe('Running Test for slider linear visual step value', () => {
+	test('linear step', () => {
+		const steps: SliderSteps = {
+			baseStep: 1,
+			breakpointList: [],
+		};
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 20,
+				steps: steps,
+				sliderValue: 10,
+			}),
+		).toBe(10);
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 20,
+				steps: steps,
+				sliderValue: 15,
+			}),
+		).toBe(15);
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 20,
+				steps: steps,
+				sliderValue: 20,
+			}),
+		).toBe(20);
+	});
+
+	test('multiple step 1', () => {
+		const steps: SliderSteps = {
+			baseStep: 1,
+			breakpointList: [
+				{
+					step: 2,
+					bottomBreakpoint: 20,
+				},
+			],
+		};
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 30,
+				steps: steps,
+				sliderValue: 10,
+			}),
+		).toBe(10);
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 30,
+				steps: steps,
+				sliderValue: 20,
+			}),
+		).toBe(20);
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 30,
+				steps: steps,
+				sliderValue: 21,
+			}),
+		).toBe(22);
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 30,
+				steps: steps,
+				sliderValue: 25,
+			}),
+		).toBe(30);
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 30,
+				steps: steps,
+				sliderValue: 24,
+			}),
+		).toBe(28);
+	});
+
+	test('multiple step 2', () => {
+		const steps: SliderSteps = {
+			baseStep: 1,
+			breakpointList: [
+				{
+					step: 2,
+					bottomBreakpoint: 20,
+				},
+				{
+					step: 3,
+					bottomBreakpoint: 30,
+				},
+			],
+		};
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 40,
+				steps: steps,
+				sliderValue: 25,
+			}),
+		).toBe(30);
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 40,
+				steps: steps,
+				sliderValue: 26,
+			}),
+		).toBe(33);
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 40,
+				steps: steps,
+				sliderValue: 27,
+			}),
+		).toBe(36);
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 40,
+				steps: steps,
+				sliderValue: 28,
+			}),
+		).toBe(39);
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 40,
+				steps: steps,
+				sliderValue: 30,
+			}),
+		).toBe(40);
+	});
+
+	test('multiple step 3', () => {
+		const steps: SliderSteps = {
+			baseStep: 3,
+			breakpointList: [
+				{
+					step: 4,
+					bottomBreakpoint: 20,
+				},
+			],
+		};
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 50,
+				steps: steps,
+				sliderValue: 13,
+			}),
+		).toBe(19);
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 50,
+				steps: steps,
+				sliderValue: 14,
+			}),
+		).toBe(20);
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 50,
+				steps: steps,
+				sliderValue: 15,
+			}),
+		).toBe(24);
+
+		expect(
+			getValueBySliderValue({
+				min: 10,
+				max: 50,
+				steps: steps,
+				sliderValue: 16,
+			}),
+		).toBe(28);
+	});
+});

package/src/components/slider/slider/sliderFunction/linearVisualSteps/valueBySliderValue.ts

@@ -0,0 +1,35 @@
+import { SliderBreakpoint, SliderMapOnChangeFunction } from '@/components/slider/slider/slider.types';
+
+export const getValueBySliderValue: SliderMapOnChangeFunction = (param): number => {
+	const { max, min, sliderValue, steps } = param;
+
+	const breakpoints: SliderBreakpoint[] = [{ step: steps.baseStep, bottomBreakpoint: min }, ...steps.breakpointList];
+
+	let currentSliderValue = min;
+	let currentValue = min;
+
+	while (currentSliderValue < sliderValue) {
+		let breakpointIndexFound = 0;
+		let breakpointFound: SliderBreakpoint = breakpoints[breakpointIndexFound];
+
+		for (const [currentBreakpointIndex, currentBreakpoint] of breakpoints.entries()) {
+			if (currentBreakpoint.bottomBreakpoint > currentValue) {
+				break;
+			}
+
+			breakpointIndexFound = currentBreakpointIndex;
+			breakpointFound = currentBreakpoint;
+		}
+
+		const breakpointFoundStep = breakpointFound.step;
+
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		const nextBreakpoint = breakpoints[breakpointIndexFound + 1]?.bottomBreakpoint === undefined ? max : breakpoints[breakpointIndexFound + 1].bottomBreakpoint;
+
+		const nextValue = currentValue + breakpointFoundStep;
+		currentValue = nextValue < nextBreakpoint ? nextValue : nextBreakpoint;
+		currentSliderValue = currentSliderValue + 1;
+	}
+
+	return currentValue;
+};

package/src/components/slider/slider/sliderHandleSvgHandler.ts

@@ -0,0 +1,26 @@
+import { theme } from '@/style/styledComponents/theme';
+import { encode as encodeBase64 } from 'base-64';
+
+export const getSliderHandleBackgroundSvg = (disable: boolean) => {
+	if (disable) {
+		return `
+				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+					<circle cx="12" cy="12" r="11" stroke="${theme.colors.fg.disabled.light}" stroke-width="2"/>
+				</svg>`;
+	}
+
+	return `
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+				<circle cx="12" cy="12" r="11" stroke="url(#paint0_linear_1206_76209)" stroke-width="2" />
+				<defs>
+					<linearGradient id="paint0_linear_1206_76209" x1="24" y1="0" x2="0" y2="24" gradientUnits="userSpaceOnUse">
+						<stop offset="0.0677083" stop-color="${theme.palette.pink600}"/>
+						<stop offset="1" stop-color="${theme.palette.blue600}"/>
+					</linearGradient>
+				</defs>
+			</svg>`;
+};
+
+export const getSliderHandleBackgroundSvgBase64 = (disable: boolean) => {
+	return encodeBase64(getSliderHandleBackgroundSvg(disable));
+};