@buerokratt-ria/common-gui-components 0.0.1

package/ui-components/FormElements/FormCheckbox/index.tsx

@@ -0,0 +1,39 @@
+import React, { forwardRef, InputHTMLAttributes, useId } from 'react';
+
+import './FormCheckbox.scss';
+
+type FormCheckboxType = InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+    name: string;
+    hideLabel?: boolean;
+    item: {
+        label: string;
+        value: string;
+        checked?: boolean;
+    };
+}
+
+const FormCheckbox = forwardRef<HTMLInputElement, FormCheckboxType>((
+    {
+        label,
+        name,
+        hideLabel,
+        item,
+        ...rest
+    },
+    ref,
+) => {
+    const uid = useId();
+
+    return (
+        <div className='checkbox'>
+            {label && !hideLabel && <label className='checkbox__label'>{label}</label>}
+            <div className='checkbox__item'>
+                <input ref={ref} type='checkbox' name={name} id={uid} value={item.value} defaultChecked={item.checked} {...rest} />
+                <label htmlFor={uid}>{item.label}</label>
+            </div>
+        </div>
+    );
+});
+
+export default FormCheckbox;

package/ui-components/FormElements/FormCheckboxes/FormCheckboxes.scss

@@ -0,0 +1,63 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.checkboxes {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: get-spacing(paldiski);
+
+  &__label {
+    display: block;
+    flex: 0 0 185px;
+    font-size: $veera-font-size-100;
+    line-height: 24px;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__item {
+    input[type=checkbox] {
+      display: none;
+
+      + label {
+        display: block;
+        padding-left: 32px;
+        position: relative;
+        font-size: $veera-font-size-100;
+        line-height: $veera-line-height-500;
+
+        &::before {
+          content: '';
+          display: block;
+          width: 16px;
+          height: 16px;
+          box-shadow: inset 0 0 0 1px get-color(black-coral-2);
+          border-radius: 2px;
+          position: absolute;
+          left: 4px;
+          top: 4px;
+        }
+      }
+
+      &:checked {
+        + label {
+          &::before {
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxNCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuNzQ5NzkgOC4xMjkwNkwxLjYyMjI5IDUuMDAxNTZMMC41NjEwMzUgNi4wNjI4MUw0Ljc0OTc5IDEwLjI1MTZMMTMuNzQ5OCAxLjI1MTU2TDEyLjY4ODUgMC4xOTAzMDhMNC43NDk3OSA4LjEyOTA2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
+            background-color: get-color(sapphire-blue-10);
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: 13px 10px;
+            box-shadow: inset 0 0 0 1px get-color(sapphire-blue-10);
+          }
+        }
+      }
+    }
+  }
+}

package/ui-components/FormElements/FormCheckboxes/index.tsx

@@ -0,0 +1,44 @@
+import React, { ChangeEvent, FC, useId, useState } from 'react';
+
+import './FormCheckboxes.scss';
+
+type FormCheckboxesType = {
+    label: string;
+    name: string;
+    hideLabel?: boolean;
+    onValuesChange?: (values: Record<string, any>) => void;
+    items: {
+        label: string;
+        value: string;
+    }[];
+}
+
+const FormCheckboxes: FC<FormCheckboxesType> = ({ label, name, hideLabel, onValuesChange, items }) => {
+    const id = useId();
+    const [selectedValues, setSelectedValues] = useState<Record<string, any>>({});
+
+    const handleValuesChange = (e: ChangeEvent<HTMLInputElement>) => {
+        setSelectedValues((prevState) => ({
+            ...prevState,
+            [e.target.name]: [e.target.value],
+        }));
+        if (onValuesChange) onValuesChange(selectedValues);
+    };
+
+    return (
+        <fieldset className='checkboxes' role='group'>
+    {label && !hideLabel && <label className='checkboxes__label'>{label}</label>}
+        <div className='checkboxes__wrapper'>
+        {items.map((item, index) => (
+                <div key={`${item.value}-${index}`} className='checkboxes__item'>
+    <input type='checkbox' name={name} id={`${id}-${item.value}`} value={item.value}
+    onChange={handleValuesChange} />
+    <label htmlFor={`${id}-${item.value}`}>{item.label}</label>
+    </div>
+))}
+    </div>
+    </fieldset>
+);
+};
+
+    export default FormCheckboxes;

package/ui-components/FormElements/FormDatepicker/FormDatepicker.scss

@@ -0,0 +1,154 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.datepicker {
+  $self: &;
+  display: flex;
+  align-items: center;
+  gap: get-spacing(paldiski);
+  width: 100%;
+
+  &__label {
+    flex: 0 0 185px;
+    font-size: $veera-font-size-100;
+    line-height: 24px;
+  }
+
+  &__wrapper_column {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+    position: relative;
+    width: 125px;
+
+    .icon {
+      position: absolute;
+      right: 8px;
+      top: 8px;
+      pointer-events: none;
+    }
+  }
+
+  &__wrapper_row {
+    display: flex;
+    flex-direction: row;
+    gap: 7px;
+    position: relative;
+    width: 125px;
+  
+    .icon {
+      position: absolute;
+      right: 8px;
+      top: 8px;
+      pointer-events: none;
+    }
+  }
+
+  &__error {
+    width: 100%;
+    margin-right: 6px;
+    display: flex;
+    align-items: center;
+    gap: get-spacing(paldiski);
+    color: get-color(black-coral-20);
+    border-radius: $veera-radius-s;
+    background-color: get-color(jasper-3);
+    font-size: 13px;
+    line-height: 20px;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+
+    &::before {
+      content: '';
+      display: block;
+      background-color: get-color(jasper-3);
+      border-left: 16px solid transparent;
+      border-right: 16px solid transparent;
+      border-bottom: 25px;
+    }
+  }
+
+  input {
+    width: 100%;
+    display: block;
+    appearance: none;
+    background-color: get-color(white);
+    border: 1px solid get-color(black-coral-6);
+    border-radius: $veera-radius-s;
+    color: var(--color-black);
+    font-size: $veera-font-size-100;
+    height: 40px;
+    line-height: 24px;
+    padding: get-spacing(paldiski);
+
+    &::placeholder {
+      color: get-color(black-coral-6);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: get-color(sapphire-blue-10);
+    }
+  }
+
+  &--error {
+    input {
+      border-color: get-color(jasper-10);
+    }
+  }
+
+  &--disabled & {
+    input {
+      background-color: get-color(black-coral-0);
+    }
+  }
+}
+
+.react-datepicker {
+  font-family: inherit;
+  font-size: 14px;
+  border: 1px solid get-color(black-coral-6);
+  border-radius: 4px;
+
+  &-popper[data-placement^=bottom] {
+    padding: 0;
+  }
+
+  &-wrapper {
+    display: block;
+  }
+
+  &__input-container {
+    display: block;
+  }
+
+  &__triangle {
+    &::before,
+    &::after {
+      content: none !important;
+    }
+  }
+
+  &__navigation {
+    width: 50px;
+    height: 50px;
+    top: 0;
+
+    &:hover {
+      background-color: var(--color-bg);
+    }
+
+    &--previous {
+      border-top-left-radius: 4px;
+      border-right: 1px solid var(--color-gray);
+      left: 0;
+    }
+
+    &--next {
+      border-top-right-radius: 4px;
+      border-left: 1px solid var(--color-gray);
+      right: 0;
+    }
+  }
+}

package/ui-components/FormElements/FormDatepicker/index.tsx

@@ -0,0 +1,123 @@
+import React, { forwardRef, useId } from 'react';
+import ReactDatePicker, { registerLocale } from 'react-datepicker';
+import clsx from 'clsx';
+import { et } from 'date-fns/locale';
+import { ControllerRenderProps } from 'react-hook-form';
+import {
+    MdChevronRight,
+    MdChevronLeft,
+    MdOutlineToday,
+    MdOutlineSchedule,
+} from 'react-icons/md';
+
+import { Icon } from '../..';
+import 'react-datepicker/dist/react-datepicker.css';
+import './FormDatepicker.scss';
+
+registerLocale('et-EE', et);
+
+type FormDatepickerProps = ControllerRenderProps & {
+    label: string;
+    name: string;
+    hideLabel?: boolean;
+    disabled?: boolean;
+    minTime?: Date;
+    maxTime?: Date;
+    placeholder?: string;
+    timePicker?: boolean;
+    direction?: 'row' | 'column';
+};
+
+const FormDatepicker = forwardRef<any, FormDatepickerProps>(
+    (
+        {
+            label,
+            name,
+            hideLabel,
+            maxTime,
+            minTime,
+            disabled,
+            placeholder,
+            timePicker,
+            direction = 'column',
+            ...rest
+        },
+        ref
+    ) => {
+        const id = useId();
+        const { value, onChange } = rest;
+
+        const datepickerClasses = clsx(
+            'datepicker',
+            disabled && 'datepicker--disabled'
+        );
+
+        const validMinTime = minTime ? new Date(minTime) : new Date().setHours(0, 0, 0);
+        const validMaxTime = maxTime ? new Date(maxTime) : new Date().setHours(23, 45, 0);
+
+        const handleChange = (date: Date) => {
+            if (timePicker) {
+                if (date < validMinTime) {
+                    onChange(validMinTime);
+                } else if (date > validMaxTime) {
+                    onChange(validMaxTime);
+                } else {
+                    onChange(date);
+                }
+            } else {
+                onChange(date);
+            }
+        };
+
+        return (
+            <div className={datepickerClasses}>
+                {label && !hideLabel && (
+                    <label htmlFor={id} className="datepicker__label">
+                        {label}
+                    </label>
+                )}
+                <div
+                    className={
+                        direction === 'column'
+                            ? 'datepicker__wrapper_column'
+                            : 'datepicker__wrapper_row'
+                    }
+                >
+                    <ReactDatePicker
+                        selected={new Date(value)}
+                        dateFormat={timePicker ? 'HH:mm:ss' : 'dd.MM.yyyy'}
+                        locale="et-EE"
+                        placeholderText={placeholder}
+                        previousMonthButtonLabel={<MdChevronLeft />}
+                        nextMonthButtonLabel={<MdChevronRight />}
+                        aria-label={hideLabel ? label : undefined}
+                        showTimeSelect={timePicker}
+                        showTimeSelectOnly={timePicker}
+                        timeIntervals={15}
+                        timeFormat="HH:mm:ss"
+                        timeInputLabel=""
+                        minTime={validMinTime}
+                        maxTime={validMaxTime}
+                        portalId="overlay-root"
+                        disabled={disabled}
+                        {...rest}
+                        onChange={handleChange}
+                    />
+                    <Icon
+                        icon={
+                            timePicker ? (
+                                <MdOutlineSchedule color="#5D6071" fontSize={20} />
+                            ) : (
+                                <MdOutlineToday color="#5D6071" fontSize={20} />
+                            )
+                        }
+                        size="medium"
+                    />
+                </div>
+            </div>
+        );
+    }
+);
+
+
+export default FormDatepicker;

package/ui-components/FormElements/FormInput/FormInput.scss

@@ -0,0 +1,90 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.input {
+  $self: &;
+  display: flex;
+  align-items: center;
+  gap: get-spacing(paldiski);
+  width: 100%;
+
+  &__label {
+    flex: 0 0 185px;
+    font-size: $veera-font-size-100;
+    line-height: 24px;
+  }
+
+  &__wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+    position: relative;
+
+    .icon {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+    }
+  }
+
+  &__error {
+    width: 100%;
+    margin-right: 6px;
+    display: flex;
+    align-items: center;
+    gap: get-spacing(paldiski);
+    color: get-color(black-coral-20);
+    border-radius: $veera-radius-s;
+    background-color: get-color(jasper-3);
+    font-size: 13px;
+    line-height: 20px;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+
+    &::before {
+      content: '';
+      display: block;
+      background-color: get-color(jasper-3);
+      border-left: 16px solid transparent;
+      border-right: 16px solid transparent;
+      border-bottom: 25px;
+    }
+  }
+
+  input {
+    width: 100%;
+    display: block;
+    appearance: none;
+    background-color: get-color(white);
+    border: 1px solid get-color(black-coral-6);
+    border-radius: $veera-radius-s;
+    color: var(--color-black);
+    font-size: $veera-font-size-100;
+    height: 40px;
+    line-height: 24px;
+    padding: get-spacing(paldiski);
+
+    &::placeholder {
+      color: get-color(black-coral-6);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: get-color(sapphire-blue-10);
+    }
+  }
+
+  &--error {
+    input {
+      border-color: get-color(jasper-10);
+    }
+  }
+
+  &--disabled & {
+    input {
+      background-color: get-color(black-coral-0);
+    }
+  }
+}

package/ui-components/FormElements/FormInput/index.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef, InputHTMLAttributes, PropsWithChildren, useId } from 'react';
+import clsx from 'clsx';
+import './FormInput.scss';
+import { CHAT_INPUT_LENGTH } from '../../../constants/config';
+
+type InputProps = PropsWithChildren<InputHTMLAttributes<HTMLInputElement>> & {
+    label: string;
+    name: string;
+    hideLabel?: boolean;
+    maxLength?: number;
+    className?: string;
+};
+
+const FieldInput = forwardRef<HTMLInputElement, InputProps>(
+    (
+        { label, name, disabled, hideLabel, maxLength, className, children, ...rest },
+        ref
+    ) => {
+        const id = useId();
+
+        const inputClasses = clsx('input', disabled && 'input--disabled');
+
+        return (
+            <div className={`${inputClasses} ${className}`}>
+                {label && !hideLabel && (
+                    <label htmlFor={id} className="input__label">
+                        {label}
+                    </label>
+                )}
+                <div className="input__wrapper">
+                    <input
+                        className={inputClasses}
+                        name={name}
+                        maxLength={CHAT_INPUT_LENGTH}
+                        id={id}
+                        ref={ref}
+                        aria-label={hideLabel ? label : undefined}
+                        {...rest}
+                    />
+                    {children}
+                </div>
+            </div>
+        );
+    }
+);
+
+export default FieldInput;

package/ui-components/FormElements/FormRadios/FormRadios.scss

@@ -0,0 +1,72 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.radios {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: get-spacing(paldiski);
+
+  &__label {
+    display: block;
+    flex: 0 0 185px;
+    font-size: $veera-font-size-100;
+    line-height: 24px;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__item {
+    input[type=radio] {
+      display: none;
+
+      + label {
+        display: block;
+        padding-left: 32px;
+        position: relative;
+        font-size: $veera-font-size-100;
+        line-height: $veera-line-height-500;
+
+        &::before {
+          content: '';
+          display: block;
+          width: 16px;
+          height: 16px;
+          box-shadow: inset 0 0 0 1px get-color(black-coral-2);
+          border-radius: 50%;
+          position: absolute;
+          left: 4px;
+          top: 4px;
+        }
+      }
+
+      &:checked {
+        + label {
+          &::before {
+            width: 20px;
+            height: 20px;
+            box-shadow: inset 0 0 0 1px #8F91A8;
+          }
+
+          &::after {
+            content: '';
+            display: block;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background-color: get-color(sapphire-blue-10);
+            position: absolute;
+            top: 9px;
+            left: 9px;
+          }
+        }
+      }
+    }
+  }
+}

package/ui-components/FormElements/FormRadios/index.tsx

@@ -0,0 +1,36 @@
+import { FC, useId } from 'react';
+
+import './FormRadios.scss';
+
+type FormRadiosType = {
+    label: string;
+    name: string;
+    hideLabel?: boolean;
+    items: {
+        label: string;
+        value: string;
+    }[];
+    onChange: (selectedValue: string) => void;
+}
+
+const FormRadios: FC<FormRadiosType> = ({ label, name, hideLabel, items, onChange }) => {
+    const id = useId();
+
+    return (
+        <fieldset className='radios' role='group'>
+            {label && !hideLabel && <label className='radios__label'>{label}</label>}
+            <div className='radios__wrapper'>
+                {items.map((item, index) => (
+                    <div key={`${item.value}-${index}`} className='radios__item'>
+                        <input type='radio' name={name} id={`${id}-${item.value}`} value={item.value} onChange={(event) => {
+                            onChange(event.target.value);
+                        }} />
+                        <label htmlFor={`${id}-${item.value}`}>{item.label}</label>
+                    </div>
+                ))}
+            </div>
+        </fieldset>
+    );
+};
+
+export default FormRadios;