@mmb-digital/design-system-web 0.1.0

package/src/components/button/button.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React, { FC } from 'react';
+
+import { ButtonStyled, IconWrapperStyled } from './button.styles';
+import { ButtonType, Props } from './button.types';
+
+const Button: FC<Props> = (props) => {
+	const { buttonStyle, children, disabled = false, displayOnlyIcon = false, iconLeft, iconRight, onClick, size, type = ButtonType.BUTTON } = props;
+
+	return (
+		<ButtonStyled
+			buttonStyle={buttonStyle}
+			disabled={disabled}
+			displayOnlyIcon={displayOnlyIcon}
+			size={size}
+			type={type}
+			onClick={onClick}
+		>
+			{iconLeft !== undefined && <IconWrapperStyled size={size}>{iconLeft}</IconWrapperStyled>}
+			{!displayOnlyIcon && (
+				<>
+					{children}
+					{iconRight !== undefined && <IconWrapperStyled size={size}>{iconRight}</IconWrapperStyled>}
+				</>
+			)}
+		</ButtonStyled>
+	);
+};
+
+export default Button;

package/src/components/button/button.types.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+
+export enum ButtonStyle {
+	PRIMARY = 'primary',
+	SECONDARY = 'secondary',
+	TERTIARY = 'tertiary',
+}
+
+export enum ButtonSize {
+	MD = 'md',
+	SM = 'sm',
+	XL = 'xl',
+	XS = 'xs',
+	XXL = 'xxl',
+}
+
+export enum ButtonType {
+	BUTTON = 'button',
+	RESET = 'reset',
+	SUBMIT = 'submit',
+}
+
+export interface Props {
+	buttonStyle: ButtonStyle;
+	children: ReactNode;
+	disabled?: boolean;
+	displayOnlyIcon?: boolean;
+	iconLeft?: ReactNode;
+	iconRight?: ReactNode;
+	onClick?: () => void;
+	size: ButtonSize;
+	type?: ButtonType;
+}

package/src/components/form/hint/formHint.style.ts

@@ -0,0 +1,10 @@
+import { css } from 'styled-components';
+
+export const hint = css`
+	display: inline;
+	font-size: ${({ theme }) => theme.font.size.body.sm};
+	line-height: ${({ theme }) => theme.font.lineHeight.body.sm};
+	font-weight: ${({ theme }) => theme.font.weight.normal};
+	letter-spacing: ${({ theme }) => theme.font.letterSpacing.body.md};
+	color: ${({ theme }) => theme.colors.fg.neutral.subtle.light};
+`;

package/src/components/form/hint/formHint.tsx

@@ -0,0 +1,13 @@
+//TODO: this is mock
+
+import React from 'react';
+import { Props } from '@/components/form/hint/formHint.types';
+import { hint } from '@/components/form/hint/formHint.style';
+
+const FormHint: React.FC<Props> = (props) => {
+	const { children } = props;
+
+	return <span css={[hint]}>{children}</span>;
+};
+
+export default FormHint;

package/src/components/form/hint/formHint.types.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export interface Props {
+	readonly children: React.ReactNode;
+}

package/src/components/slider/slider/slider.stories.tsx

@@ -0,0 +1,176 @@
+import React, { useState } from 'react';
+import type { Meta, Parameters, StoryObj } from '@storybook/react';
+import Slider from '@/components/slider/slider/slider';
+import { MinMaxLabels, Props, SliderSteps, SliderStepType } from '@/components/slider/slider/slider.types';
+
+interface SliderParameters extends Parameters {
+	defaultValue: number;
+}
+
+const defaultValueParamName = 'defaultValue';
+
+const defaultMin = 100;
+const defaultMax = 1000;
+const defaultMinMaxLabels: MinMaxLabels = {
+	min: `${defaultMin} Kč`,
+	max: `${defaultMax} Kč`,
+};
+const argTypeMinMaxLabels = {
+	default: defaultMinMaxLabels,
+	undefined: undefined,
+};
+
+const meta = {
+	title: 'Slider/Slider',
+	component: Slider,
+	parameters: {},
+	tags: ['autodocs'],
+	argTypes: {
+		stepType: {
+			type: {
+				name: 'enum',
+				value: Object.values(SliderStepType),
+			},
+		},
+		value: {
+			table: {
+				disable: true,
+			},
+		},
+		onChange: {
+			table: {
+				disable: true,
+			},
+		},
+		disable: {
+			type: {
+				name: 'boolean',
+			},
+		},
+		minMaxLabels: {
+			defaultValue: argTypeMinMaxLabels.default,
+			options: Object.keys(argTypeMinMaxLabels),
+			mapping: argTypeMinMaxLabels,
+			control: {
+				type: 'radio',
+			},
+		},
+	},
+	decorators: [
+		(story, context) => {
+			const { args, parameters } = context;
+			const params: SliderParameters = parameters as SliderParameters;
+
+			const [value, setValue] = useState<number>(params[defaultValueParamName]);
+
+			return (
+				<>
+					{story({
+						args: {
+							...args,
+							value: value,
+							onChange: setValue,
+						},
+					})}
+					<span
+						style={{
+							fontSize: 32,
+						}}
+					>
+						{value.toLocaleString('cs-CZ')}
+					</span>
+				</>
+			);
+		},
+	],
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultSteps: SliderSteps = {
+	baseStep: 2,
+	breakpointList: [
+		{
+			step: 50,
+			bottomBreakpoint: 500,
+		},
+	],
+};
+
+const defaultOnFinalChange = (value: number) => {
+	console.log('defaultOnFinalChange', value);
+};
+
+const defaultProps: Props = {
+	steps: defaultSteps,
+	min: defaultMin,
+	max: defaultMax,
+	onFinalChange: defaultOnFinalChange,
+	stepType: SliderStepType.DEFAULT,
+	// is overwritten in the decorator
+	onChange: () => {
+		console.log('mock');
+	},
+	value: Number.NaN, // is overwritten in the decorator
+	minMaxLabels: defaultMinMaxLabels,
+};
+
+export const Default: Story = {
+	args: {
+		...defaultProps,
+	},
+	parameters: ((): SliderParameters => {
+		return {
+			defaultValue: 200,
+		};
+	})(),
+};
+
+export const LinearVisualSteps: Story = {
+	args: {
+		...defaultProps,
+		stepType: SliderStepType.LINEAR_VISUAL_STEP,
+	},
+	parameters: ((): SliderParameters => {
+		return {
+			defaultValue: 200,
+		};
+	})(),
+};
+
+export const AirBankMortgage: Story = {
+	args: {
+		...defaultProps,
+		stepType: SliderStepType.LINEAR_VISUAL_STEP,
+		min: 334_000,
+		max: 38_000_000,
+		steps: {
+			baseStep: 16_000,
+			breakpointList: [
+				{
+					step: 25_000,
+					bottomBreakpoint: 350_000,
+				},
+				{
+					step: 50_000,
+					bottomBreakpoint: 1_500_000,
+				},
+				{
+					step: 100_000,
+					bottomBreakpoint: 2_500_000,
+				},
+				{
+					step: 2_500_000,
+					bottomBreakpoint: 10_000_000,
+				},
+			],
+		},
+	},
+	parameters: ((): SliderParameters => {
+		return {
+			defaultValue: 3_000_000,
+		};
+	})(),
+};

package/src/components/slider/slider/slider.style.ts

@@ -0,0 +1,29 @@
+import { css } from 'styled-components';
+
+export const sliderWrapper = css`
+	display: flex;
+	align-items: center;
+	height: 24px; /* height of handle */
+`;
+
+export const wrapper = css`
+	display: flex;
+	flex-direction: column;
+	row-gap: ${({ theme }) => theme.spacing.xs};
+`;
+
+export const labelsWrapper = css`
+	display: flex;
+`;
+
+export const hintLeft = css`
+	display: flex;
+	flex: 1;
+	justify-content: left;
+`;
+
+export const hintRight = css`
+	display: flex;
+	flex: 1;
+	justify-content: right;
+`;

package/src/components/slider/slider/slider.tsx

@@ -0,0 +1,136 @@
+import 'rc-slider/assets/index.css';
+
+import RcSlider from 'rc-slider';
+import React, { useMemo } from 'react';
+import { Props, SliderMapFunction, SliderMapOnChangeFunction, SliderStepType } from './slider.types';
+import { hintLeft, hintRight, labelsWrapper, sliderWrapper, wrapper } from '@/components/slider/slider/slider.style';
+import { sliderFunctionDefault } from '@/components/slider/slider/sliderFunction/default/sliderFunctionDefault';
+import { sliderFunctionLinearVisualSteps } from '@/components/slider/slider/sliderFunction/linearVisualSteps/sliderFunctionLinearVisualSteps';
+import { getValueBySliderValue } from '@/components/slider/slider/sliderFunction/linearVisualSteps/valueBySliderValue';
+import { theme } from '@/style/styledComponents/theme';
+import FormHint from '@/components/form/hint/formHint';
+import { getSliderHandleBackgroundSvgBase64 } from '@/components/slider/slider/sliderHandleSvgHandler';
+
+const Slider: React.FC<Props> = (props) => {
+	const { disable = false, max, min, minMaxLabels, onChange, onFinalChange, steps, stepType, value } = props;
+
+	// function for mapping values to slider values (if he wants to use non-linearity)
+	const sliderMapFunction = useMemo<SliderMapFunction>(() => {
+		switch (stepType) {
+			case SliderStepType.DEFAULT:
+				return sliderFunctionDefault;
+			case SliderStepType.LINEAR_VISUAL_STEP:
+				return sliderFunctionLinearVisualSteps;
+			default:
+				throw new Error('unexpected SliderStepType in Slider sliderMapFunction');
+		}
+	}, [stepType]);
+
+	const { sliderMax, sliderMin, sliderStep, sliderValue } = sliderMapFunction({
+		min: min,
+		max: max,
+		value: value,
+		steps: steps,
+	});
+
+	// basically inverse function to sliderMapFunction (used for onChange and onFinalChange if not undefined). Unlike sliderMapFunction, only value is remapped here (not the min step, max step, etc.).
+	const sliderMapOnChangeFunction = useMemo<SliderMapOnChangeFunction | undefined>(() => {
+		switch (stepType) {
+			case SliderStepType.DEFAULT:
+				return undefined;
+			case SliderStepType.LINEAR_VISUAL_STEP:
+				return getValueBySliderValue;
+			default:
+				throw new Error('unexpected SliderStepType in Slider sliderMapOnChangeFunction');
+		}
+	}, [stepType]);
+
+	const handleBackgroundSvgBase64 = useMemo(() => {
+		return getSliderHandleBackgroundSvgBase64(disable);
+	}, [disable]);
+
+	return (
+		<div css={[wrapper]}>
+			<div css={[sliderWrapper]}>
+				<RcSlider
+					max={sliderMax}
+					min={sliderMin}
+					step={sliderStep}
+					styles={{
+						track: {
+							background: disable ? theme.colors.fg.disabled.light : `linear-gradient(270deg, ${theme.palette.pink600} 10.24%, ${theme.palette.blue600} 100%)`,
+							height: 4,
+							borderRadius: theme.borderRadius.xs,
+						},
+						rail: {
+							backgroundColor: disable ? theme.colors.bg.disabled.light : theme.colors.bg.brand.default.light,
+							height: 4,
+							borderRadius: theme.borderRadius.xs,
+						},
+						handle: {
+							height: 24,
+							width: 24,
+							border: 'none',
+							backgroundImage: `url("data:image/svg+xml;base64,${handleBackgroundSvgBase64}")`,
+							opacity: 1,
+							marginTop: -9,
+							boxShadow: 'none',
+							cursor: disable ? 'default' : 'pointer',
+						},
+					}}
+					value={sliderValue}
+					onChange={(valueParam) => {
+						if (typeof valueParam !== 'number') {
+							throw new TypeError('unexpected type in onChange');
+						}
+						if (disable) {
+							return;
+						}
+
+						onChange(
+							sliderMapOnChangeFunction === undefined
+								? valueParam
+								: sliderMapOnChangeFunction({
+										min: min,
+										max: max,
+										steps: steps,
+										sliderValue: valueParam,
+									}),
+						);
+					}}
+					onChangeComplete={(valueParam) => {
+						if (typeof valueParam !== 'number') {
+							throw new TypeError('unexpected type in onChangeComplete');
+						}
+						if (disable) {
+							return;
+						}
+
+						onFinalChange(
+							sliderMapOnChangeFunction === undefined
+								? valueParam
+								: sliderMapOnChangeFunction({
+										min: min,
+										max: max,
+										steps: steps,
+										sliderValue: valueParam,
+									}),
+						);
+					}}
+				/>
+			</div>
+			{minMaxLabels !== undefined && (
+				<div css={[labelsWrapper]}>
+					<div css={[hintLeft]}>
+						<FormHint>{minMaxLabels.min}</FormHint>
+					</div>
+					<div css={[hintRight]}>
+						<FormHint>{minMaxLabels.max}</FormHint>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default Slider;

package/src/components/slider/slider/slider.types.ts

@@ -0,0 +1,58 @@
+export interface SliderMapFunctionParam {
+	readonly max: number;
+	readonly min: number;
+	readonly steps: SliderSteps;
+	readonly value: number;
+}
+
+export interface SliderMapFunctionReturn {
+	readonly sliderMax: number;
+	readonly sliderMin: number;
+	readonly sliderStep: number | undefined;
+	readonly sliderValue: number;
+}
+
+export type SliderMapFunction = (param: SliderMapFunctionParam) => SliderMapFunctionReturn;
+
+export interface SliderMapOnChangeFunctionParam {
+	readonly max: number;
+	readonly min: number;
+	readonly sliderValue: number;
+	readonly steps: SliderSteps;
+}
+
+export type SliderMapOnChangeFunction = (param: SliderMapOnChangeFunctionParam) => number;
+
+export interface SliderBreakpoint {
+	readonly bottomBreakpoint: number;
+	readonly step: number;
+}
+
+export interface SliderSteps {
+	readonly baseStep: number; // on the left side
+	readonly breakpointList: SliderBreakpoint[]; // if empty, baseStep is used for the whole length
+}
+
+export enum SliderStepType {
+	DEFAULT = 'default', // step changes dynamically (visually steps are of different sizes)
+	LINEAR_VISUAL_STEP = 'linearVisualStep', // step is visually always the same (step can be shifted by different values)
+}
+
+export interface MinMaxLabels {
+	readonly max: string;
+	readonly min: string;
+}
+
+export interface Props {
+	readonly disable?: boolean | undefined;
+	readonly max: number;
+	readonly min: number;
+	readonly minMaxLabels: MinMaxLabels | undefined;
+	// it is triggered during movement
+	readonly onChange: (values: number) => void;
+	// it is triggered after the user drops the handle
+	readonly onFinalChange: (values: number) => void;
+	readonly stepType: SliderStepType;
+	readonly steps: SliderSteps;
+	readonly value: number;
+}

package/src/components/slider/slider/sliderFunction/default/sliderFunctionDefault.ts

@@ -0,0 +1,21 @@
+import { SliderMapFunction } from '@/components/slider/slider/slider.types';
+
+export const sliderFunctionDefault: SliderMapFunction = (param) => {
+	const { max, min, steps, value } = param;
+
+	const step = steps.breakpointList.reduce((accumulator, currentValue) => {
+		if (value < currentValue.bottomBreakpoint) {
+			return accumulator;
+		}
+
+		return currentValue.step;
+	}, steps.baseStep);
+
+	return {
+		sliderStep: step,
+		sliderValue: value,
+		sliderMax: max,
+		sliderMin: min,
+		sliderMarks: undefined,
+	};
+};

package/src/components/slider/slider/sliderFunction/default/sliderStep.test.ts

@@ -0,0 +1,90 @@
+import { getSliderStep } from '@/components/slider/slider/sliderFunction/default/sliderStep';
+import { SliderSteps } from '@/components/slider/slider/slider.types';
+
+describe('Running Test for slider default step', () => {
+	test('one step', () => {
+		const steps: SliderSteps = {
+			baseStep: 1,
+			breakpointList: [],
+		};
+
+		expect(
+			getSliderStep({
+				steps: steps,
+				value: 1,
+			}),
+		).toBe(1);
+
+		expect(
+			getSliderStep({
+				steps: steps,
+				value: 100,
+			}),
+		).toBe(1);
+	});
+
+	test('multiple step', () => {
+		const steps: SliderSteps = {
+			baseStep: 1,
+			breakpointList: [
+				{
+					step: 2,
+					bottomBreakpoint: 20,
+				},
+				{
+					step: 3,
+					bottomBreakpoint: 30,
+				},
+			],
+		};
+
+		expect(
+			getSliderStep({
+				steps: steps,
+				value: 1,
+			}),
+		).toBe(1);
+
+		expect(
+			getSliderStep({
+				steps: steps,
+				value: 19,
+			}),
+		).toBe(1);
+
+		expect(
+			getSliderStep({
+				steps: steps,
+				value: 20,
+			}),
+		).toBe(2);
+
+		expect(
+			getSliderStep({
+				steps: steps,
+				value: 21,
+			}),
+		).toBe(2);
+
+		expect(
+			getSliderStep({
+				steps: steps,
+				value: 29,
+			}),
+		).toBe(2);
+
+		expect(
+			getSliderStep({
+				steps: steps,
+				value: 30,
+			}),
+		).toBe(3);
+
+		expect(
+			getSliderStep({
+				steps: steps,
+				value: 300,
+			}),
+		).toBe(3);
+	});
+});

package/src/components/slider/slider/sliderFunction/default/sliderStep.ts

@@ -0,0 +1,18 @@
+import { SliderSteps } from '@/components/slider/slider/slider.types';
+
+interface GetSliderStepParam {
+	readonly steps: SliderSteps;
+	readonly value: number;
+}
+
+export const getSliderStep = (param: GetSliderStepParam): number => {
+	const { steps, value } = param;
+
+	return steps.breakpointList.reduce((accumulator, currentValue) => {
+		if (value < currentValue.bottomBreakpoint) {
+			return accumulator;
+		}
+
+		return currentValue.step;
+	}, steps.baseStep);
+};

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

@@ -0,0 +1,28 @@
+import { SliderMapFunction } from '@/components/slider/slider/slider.types';
+import { getSliderMax } from '@/components/slider/slider/sliderFunction/linearVisualSteps/sliderMax';
+import { getSliderValueByValue } from '@/components/slider/slider/sliderFunction/linearVisualSteps/sliderValueByValue';
+
+export const sliderFunctionLinearVisualSteps: SliderMapFunction = (param) => {
+	const { max, min, steps, value } = param;
+
+	const sliderMax = getSliderMax({
+		max: max,
+		steps: steps,
+		min: min,
+	});
+
+	const sliderValue = getSliderValueByValue({
+		value: value,
+		steps: steps,
+		min: min,
+		max: max,
+	});
+
+	return {
+		sliderStep: 1,
+		sliderValue: sliderValue,
+		sliderMax: sliderMax,
+		sliderMin: min,
+		sliderMarks: undefined,
+	};
+};