@buerokratt-ria/common-gui-components 0.0.1

package/ui-components/FormElements/FormSelect/FormMultiselect.tsx

@@ -0,0 +1,124 @@
+import React, { FC, ReactNode, SelectHTMLAttributes, useId, useState } from 'react';
+import { useSelect } from 'downshift';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { MdArrowDropDown } from 'react-icons/md';
+
+import { Icon } from '../..';
+import './FormSelect.scss';
+
+type SelectOption = { label: string, value: string };
+
+type FormMultiselectProps = SelectHTMLAttributes<HTMLSelectElement> & {
+    label: ReactNode;
+    name: string;
+    placeholder?: string;
+    hideLabel?: boolean;
+    options: SelectOption[];
+    selectedOptions?: SelectOption[];
+    onSelectionChange?: (selection: SelectOption[] | null) => void;
+};
+
+const FormMultiselect: FC<FormMultiselectProps> = (
+    {
+        label,
+        hideLabel,
+        options,
+        disabled,
+        placeholder,
+        defaultValue,
+        selectedOptions,
+        onSelectionChange,
+        ...rest
+    },
+) => {
+    const id = useId();
+    const { t } = useTranslation();
+    const [selectedItems, setSelectedItems] = useState<SelectOption[]>(selectedOptions ?? []);
+    const {
+        isOpen,
+        getToggleButtonProps,
+        getLabelProps,
+        getMenuProps,
+        highlightedIndex,
+        getItemProps,
+    } = useSelect({
+        items: options,
+        stateReducer: (state, actionAndChanges) => {
+            const { changes, type } = actionAndChanges;
+            if (type === useSelect.stateChangeTypes.ItemClick) {
+                return {
+                    ...changes,
+                    isOpen: true,
+                    highlightedIndex: state.highlightedIndex,
+                };
+            } else {
+                return changes;
+            }
+        },
+        selectedItem: null,
+        onSelectedItemChange: ({ selectedItem }) => {
+            if (!selectedItem) {
+                return;
+            }
+            const index = selectedItems.findIndex((item) => item.value === selectedItem.value);
+            const items = [];
+            if (index > 0) {
+                items.push(
+                    ...selectedItems.slice(0, index),
+                    ...selectedItems.slice(index + 1)
+                );
+            } else if (index === 0) {
+                items.push(...selectedItems.slice(1));
+            } else {
+                items.push(...selectedItems, selectedItem);
+            }
+            setSelectedItems(items);
+            if (onSelectionChange) onSelectionChange(items);
+        },
+    });
+
+    const selectClasses = clsx(
+        'select',
+        disabled && 'select--disabled',
+    );
+
+    const placeholderValue = placeholder || t('global.choose');
+
+    return (
+        <div className={selectClasses} style={rest.style}>
+            {label && !hideLabel && <label htmlFor={id} className='select__label' {...getLabelProps()}>{label}</label>}
+            <div className='select__wrapper'>
+                <div className='select__trigger' {...getToggleButtonProps()}>
+                    {selectedItems.length > 0 ? `${placeholder ?? t('global.chosen')} (${selectedItems.length})` : placeholderValue}
+                    <Icon label='Dropdown icon' size='medium' icon={<MdArrowDropDown color='#5D6071' />} />
+                </div>
+
+                <ul className='select__menu' {...getMenuProps()}>
+                    {isOpen &&
+                        options.map((item, index) => (
+                            <li
+                                key={`${item.label}-${index}`}
+                                className={clsx('select__option', { 'select__option--selected': highlightedIndex === index })}
+                                {...getItemProps({
+                                    item,
+                                    index,
+                                })}
+                            >
+                                <input
+                                    type='checkbox'
+                                    checked={selectedItems.map((s) => s.value).includes(item.value)}
+                                    value={item.value}
+                                    onChange={() => null}
+                                />
+                                <span>{item.label}</span>
+                            </li>
+                        ))}
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+
+export default FormMultiselect;

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

@@ -0,0 +1,121 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.select {
+  $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 {
+    width: 100%;
+    position: relative;
+  }
+
+  &__trigger {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    appearance: none;
+    background-color: get-color(white);
+    border: 1px solid get-color(black-coral-6);
+    border-radius: $veera-radius-s;
+    color: get-color(black);
+    font-size: $veera-font-size-100;
+    height: 40px;
+    line-height: 24px;
+    padding: get-spacing(paldiski);
+
+    .icon {
+      font-size: $veera-font-size-250;
+    }
+
+    &[aria-expanded=true] {
+      border-color: get-color(sapphire-blue-10);
+      border-radius: 3px;
+
+      + #{$self}__menu {
+        display: block;
+      }
+
+      +#{$self}__menu_up {
+         display: block;
+      }
+
+      .icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &__menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: get-color(white);
+    border-radius: 4px;
+    border: 1px solid get-color(black-coral-2);
+    border-top: 1;
+    z-index: 9998;
+    max-height: 320px;
+    overflow: auto;
+    margin-top: 3px;
+  }
+
+  &__menu_up {
+     display: none;
+     position: absolute;
+     top: auto;
+     left: 0;
+     right: 0;
+     bottom: 100%;
+     background-color: get-color(white);
+     border-radius: 4px;
+     border: 1px solid get-color(black-coral-2);
+     border-top: 1;
+     z-index: 9998;
+     max-height: 320px;
+     overflow: auto;
+     margin-bottom: 3px;
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 15px;
+
+    span {
+      display: block;
+    }
+
+    &[aria-selected=true] {
+      background-color: get-color(sapphire-blue-10);
+      color: get-color(white);
+
+      &:hover,
+      &:focus {
+        background-color: get-color(sapphire-blue-10);
+        color: get-color(white);
+      }
+    }
+
+    &:hover,
+    &:focus {
+      background-color: get-color(black-coral-0);
+      color: get-color(black-coral-20);
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+import React, {forwardRef, ReactNode, SelectHTMLAttributes, useEffect, useId, useState} from 'react';
+import { useSelect } from 'downshift';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { MdArrowDropDown } from 'react-icons/md';
+
+import { Icon } from '../..';
+import './FormSelect.scss';
+import { ControllerRenderProps } from 'react-hook-form';
+
+type FormSelectProps = Partial<ControllerRenderProps> & SelectHTMLAttributes<HTMLSelectElement> & {
+    label: ReactNode;
+    name: string;
+    hideLabel?: boolean;
+    direction?: 'down' | 'up';
+    defaultValue?: string | null;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    onSelectionChange?: (selection: { label: string, value: string } | null) => void;
+}
+
+const itemToString = (item: ({ label: string, value: string } | null)) => {
+    return item ? item.value : '';
+};
+
+const FormSelect= forwardRef<HTMLSelectElement, FormSelectProps>((
+    {
+        label,
+        hideLabel,
+        direction = 'down',
+        options,
+        disabled,
+        placeholder,
+        defaultValue,
+        onSelectionChange,
+        ...rest
+    },
+    ref
+) => {
+    const id = useId();
+    const { t } = useTranslation();
+    const defaultSelected = options.find((o) => o.value === defaultValue) || null;
+    const [selectedItem, setSelectedItem] = useState<{ label: string, value: string } | null>(defaultSelected);
+    const {
+        isOpen,
+        getToggleButtonProps,
+        getLabelProps,
+        getMenuProps,
+        highlightedIndex,
+        getItemProps,
+    } = useSelect({
+        id,
+        items: options,
+        itemToString,
+        selectedItem,
+        onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
+            setSelectedItem(newSelectedItem ?? null);
+            if (onSelectionChange) onSelectionChange(newSelectedItem ?? null);
+        },
+    });
+
+    useEffect(() => {
+        const updatedSelection = options.find((o) => o.value === defaultValue) || placeholderValue;
+        setSelectedItem(updatedSelection);
+    }, [defaultValue, options]);
+
+    const selectClasses = clsx(
+        'select',
+        disabled && 'select--disabled',
+    );
+
+    const placeholderValue = placeholder || t('global.choose');
+
+    return (
+        <div className={selectClasses} style={rest.style}>
+            {label && !hideLabel && <label htmlFor={id} className='select__label' {...getLabelProps()}>{label}</label>}
+            <div className='select__wrapper' >
+                <div className='select__trigger' {...getToggleButtonProps()}>
+                    {selectedItem?.label ?? placeholderValue}
+                    <Icon label='Dropdown icon' size='medium' icon={<MdArrowDropDown color='#5D6071' />} />
+                </div>
+                <ul ref={ref} className={direction === 'down' ? 'select__menu' : 'select__menu_up'} {...getMenuProps()}>
+                    {isOpen && (
+                        options.map((item, index) => (
+                            <li className={clsx('select__option', { 'select__option--selected': highlightedIndex === index })}
+                                key={`${item.value}${index}`} {...getItemProps({ item, index })}>
+                                {item.label}
+                            </li>
+                        ))
+                    )}
+                </ul>
+            </div>
+        </div>
+    );
+});
+
+
+export default FormSelect;

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

@@ -0,0 +1,109 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.textarea {
+  $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;
+  }
+
+  &__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;
+    }
+  }
+
+  &__max-length-top {
+    position: absolute;
+    top: 10px;
+    right: 8px;
+    font-size: $veera-font-size-80;
+    color: get-color(black-coral-12);
+    pointer-events: none;
+  }
+
+  &__max-length-bottom {
+    position: absolute;
+    bottom: 10px;
+    right: 8px;
+    font-size: $veera-font-size-80;
+    color: get-color(black-coral-12);
+    pointer-events: none;
+  }
+
+  textarea {
+    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-80;
+    line-height: $veera-line-height-500;
+    height: 40px;
+    min-height: 40px;
+    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);
+    }
+  }
+
+  &--maxlength-shown {
+    textarea {
+      padding-right: 70px;
+    }
+  }
+}

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

@@ -0,0 +1,154 @@
+import React, {ChangeEvent, forwardRef, useEffect, useId, useState} from 'react';
+import TextareaAutosize, {
+    TextareaAutosizeProps,
+} from 'react-textarea-autosize';
+import {
+    createRegexRenderer,
+    RichTextarea,
+    RichTextareaProps,
+} from 'rich-textarea';
+import clsx from 'clsx';
+
+import './FormTextarea.scss';
+
+type TextareaProps = TextareaAutosizeProps &
+    RichTextareaProps & {
+    label: string;
+    name: string;
+    hideLabel?: boolean;
+    showMaxLength?: boolean;
+    maxLengthBottom?: boolean;
+    useRichText?: boolean;
+};
+
+const FormTextarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+    (
+        {
+            label,
+            name,
+            maxLength = 2000,
+            minRows = 3,
+            maxRows = 3,
+            disabled,
+            hideLabel,
+            showMaxLength,
+            maxLengthBottom,
+            defaultValue,
+            useRichText,
+            onChange,
+            ...rest
+        },
+        ref
+    ) => {
+        const id = useId();
+        const [initial, setInitial] = useState<boolean>(true);
+        const [currentLength, setCurrentLength] = useState(
+            (typeof defaultValue === 'string' && defaultValue.length) || 0
+        );
+        const textareaClasses = clsx(
+            'textarea',
+            disabled && 'textarea--disabled',
+            showMaxLength && 'textarea--maxlength-shown'
+        );
+
+        const handleOnChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+            if (showMaxLength) {
+                setCurrentLength(e.target.value.length);
+            }
+        };
+
+        useEffect(() => {
+            if(!initial) return;
+            if(showMaxLength && defaultValue && typeof defaultValue === 'string') {
+                setInitial(false);
+                setCurrentLength(defaultValue.toString().length)
+            }
+        }, [defaultValue]);
+
+        return (
+            <div className={textareaClasses}>
+                {label && !hideLabel && (
+                    <label htmlFor={id} className="textarea__label">
+                        {label}
+                    </label>
+                )}
+                <div className="textarea__wrapper">
+                    {useRichText ? (
+                        <RichTextarea
+                            id={id}
+                            style={{ width: '100%', height: '95px' }}
+                            maxLength={maxLength === -1 ? undefined : maxLength}
+                            ref={ref}
+                            defaultValue={defaultValue ?? ''}
+                            aria-label={hideLabel ? label : undefined}
+                            onChange={(e) => {
+                                if (onChange) onChange(e);
+                                handleOnChange(e);
+                            }}
+                            onFocus={(e) =>
+                                e.currentTarget.setSelectionRange(
+                                    e.currentTarget.value.length,
+                                    e.currentTarget.value.length
+                                )
+                            }
+                        >
+                            {createRegexRenderer([
+                                [
+                                    /https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+/g,
+                                    ({ children, key, value }) => (
+                                        <a
+                                            style={{
+                                                color: 'blue',
+                                                textDecoration: 'underline',
+                                                cursor: 'pointer',
+                                            }}
+                                            key={key}
+                                            href={value}
+                                            target="_blank"
+                                        >
+                                            {children}
+                                        </a>
+                                    ),
+                                ],
+                            ])}
+                        </RichTextarea>
+                    ) : (
+                        <TextareaAutosize
+                            id={id}
+                            maxLength={maxLength === -1 ? undefined : maxLength}
+                            minRows={minRows}
+                            maxRows={maxRows === -1 ? undefined : maxRows}
+                            ref={ref}
+                            defaultValue={defaultValue}
+                            aria-label={hideLabel ? label : undefined}
+                            onChange={(e) => {
+                                if (onChange) onChange(e);
+                                handleOnChange(e);
+                            }}
+                            {...rest}
+                            onFocus={(e) =>
+                                e.currentTarget.setSelectionRange(
+                                    e.currentTarget.value.length,
+                                    e.currentTarget.value.length
+                                )
+                            }
+                        />
+                    )}
+                    {showMaxLength && (
+                        <div
+                            className={
+                                maxLengthBottom
+                                    ? 'textarea__max-length-bottom'
+                                    : 'textarea__max-length-top'
+                            }
+                        >
+                            {currentLength}/{maxLength}
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+);
+
+export default FormTextarea;

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

@@ -0,0 +1,69 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.switch {
+  $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;
+  }
+
+  &__button {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    height: 40px;
+    isolation: isolate;
+    padding: 4px;
+    border-radius: 20px;
+    background-color: get-color(black-coral-1);
+    font-size: $veera-font-size-80;
+    line-height: $veera-line-height-500;
+    color: get-color(black-coral-12);
+    position: relative;
+    transition: background-color .25s ease-out;
+
+    &[aria-checked=true] {
+      background-color: var(--active-color, get-color(sapphire-blue-10));
+      color: get-color(sapphire-blue-10);
+
+      #{$self} {
+        &__off {
+          color: get-color(white);
+          background: none;
+        }
+
+        &__on {
+          color: var(--active-color, get-color(sapphire-blue-10));
+          background-color: get-color(white);
+        }
+      }
+    }
+  }
+
+  &__thumb {
+    display: none;
+  }
+
+  &__on,
+  &__off {
+    display: flex;
+    border-radius: 20px;
+    padding: 5.5px 10px;
+    font-weight: $veera-font-weight-delta;
+    transition: all .25s ease-out;
+  }
+
+  &__off {
+    font-weight: $veera-font-weight-delta;
+    background-color: get-color(white);
+  }
+}