all: sync with master, upd chlog

client/src/components/ui/Controls/Checkbox/checkbox.css

@@ -0,0 +1,113 @@
+.checkbox {
+    display: inline-block;
+    margin: 0;
+}
+
+.checkbox--single {
+    display: block;
+    margin: 2px auto 6px;
+}
+
+.checkbox--single .checkbox__label:before {
+    margin-right: 0;
+}
+
+.checkbox--settings .checkbox__label:before {
+    top: 2px;
+    margin-right: 20px;
+}
+
+.checkbox--settings .checkbox__label-title {
+    margin-bottom: 2px;
+    font-weight: 600;
+}
+
+.checkbox--form .checkbox__label:before {
+    top: 1px;
+    margin-right: 10px;
+}
+
+.checkbox__label {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 400;
+    user-select: none;
+    cursor: pointer;
+}
+
+.checkbox__label:before {
+    content: '';
+    position: relative;
+    top: 1px;
+    display: inline-block;
+    vertical-align: middle;
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    margin-right: 10px;
+    background-color: var(--checkbox-bg);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 12px 10px;
+    border-radius: 3px;
+    transition:
+        0.3s ease-in-out box-shadow,
+        0.3s ease-in-out opacity;
+}
+
+.checkbox__label .checkbox__label-text {
+    line-height: 1.3;
+}
+
+.checkbox__label .checkbox__label-text .md__paragraph {
+    display: inline-block;
+    vertical-align: baseline;
+    margin: 0;
+    text-align: left;
+    line-height: 1.3;
+}
+
+.checkbox__input {
+    position: absolute;
+    opacity: 0;
+}
+
+.checkbox__input:checked + .checkbox__label:before {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4zIDkuMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik0xMS44IDAuNUw1LjMgOC41IDAuNSA0LjIiLz48L3N2Zz4=);
+}
+
+.checkbox__input:focus + .checkbox__label:before {
+    box-shadow: 0 0 1px 1px rgba(74, 74, 74, 0.32);
+}
+
+.checkbox__input:disabled + .checkbox__label {
+    cursor: default;
+    color: var(--gray);
+}
+
+.checkbox__input:disabled + .checkbox__label:before {
+    opacity: 0.6;
+}
+
+.checkbox__label-text {
+    max-width: 515px;
+    line-height: 1.5;
+}
+
+.checkbox__label-text--long {
+    max-width: initial;
+}
+
+.checkbox__label-title {
+    display: block;
+    line-height: 1.5;
+}
+
+.checkbox__label-subtitle {
+    display: block;
+    line-height: 1.5;
+    color: var(--scolor);
+}

client/src/components/ui/Controls/Checkbox/index.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef, ReactNode } from 'react';
+import clsx from 'clsx';
+
+import './checkbox.css';
+
+type Props = {
+    title: string;
+    subtitle?: ReactNode;
+    value: boolean;
+    name?: string;
+    disabled?: boolean;
+    className?: string;
+    error?: string;
+    onChange: (value: boolean) => void;
+    onBlur?: () => void;
+};
+
+export const Checkbox = forwardRef<HTMLInputElement, Props>(
+    (
+        { title, subtitle, value, name, disabled, error, className = 'checkbox--form', onChange, onBlur, ...rest },
+        ref,
+    ) => (
+        <>
+            <label className={clsx('checkbox', className)}>
+                <span className="checkbox__marker" />
+                <input
+                    name={name}
+                    type="checkbox"
+                    className="checkbox__input"
+                    disabled={disabled}
+                    checked={value}
+                    onChange={(e) => onChange(e.target.checked)}
+                    onBlur={onBlur}
+                    ref={ref}
+                    {...rest}
+                />
+                <span className="checkbox__label">
+                    <span className="checkbox__label-text checkbox__label-text--long">
+                        <span className="checkbox__label-title">{title}</span>
+
+                        {subtitle && <span className="checkbox__label-subtitle">{subtitle}</span>}
+                    </span>
+                </span>
+            </label>
+            {error && <div className="form__message form__message--error">{error}</div>}
+        </>
+    ),
+);
+
+Checkbox.displayName = 'Checkbox';

client/src/components/ui/Controls/Input.tsx

@@ -0,0 +1,45 @@
+import React, { ComponentProps, forwardRef, ReactNode } from 'react';
+import clsx from 'clsx';
+
+type Props = ComponentProps<'input'> & {
+    label?: string;
+    desc?: string;
+    leftAddon?: ReactNode;
+    rightAddon?: ReactNode;
+    error?: string;
+    trimOnBlur?: boolean;
+};
+
+export const Input = forwardRef<HTMLInputElement, Props>(
+    ({ name, label, desc, className, leftAddon, rightAddon, error, trimOnBlur, onBlur, ...rest }, ref) => (
+        <div className={clsx('form-group', { 'has-error': !!error })}>
+            {label && (
+                <label className={clsx('form__label', { 'form__label--with-desc': !!desc })} htmlFor={name}>
+                    {label}
+                </label>
+            )}
+            {desc && <div className="form__desc form__desc--top">{desc}</div>}
+            <div className="input-group">
+                {leftAddon && <div>{leftAddon}</div>}
+                <input
+                    className={clsx('form-control', { 'is-invalid': !!error }, className)}
+                    ref={ref}
+                    onBlur={(e) => {
+                        if (trimOnBlur) {
+                            e.target.value = e.target.value.trim();
+                            rest.onChange(e);
+                        }
+                        if (onBlur) {
+                            onBlur(e);
+                        }
+                    }}
+                    {...rest}
+                />
+                {rightAddon && <div>{rightAddon}</div>}
+            </div>
+            {error && <div className="form__message form__message--error mt-1">{error}</div>}
+        </div>
+    ),
+);
+
+Input.displayName = 'Input';

client/src/components/ui/Controls/Radio.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef, ReactNode } from 'react';
+
+type Props<T> = {
+    name: string;
+    value: T;
+    onChange: (e: T) => void;
+    options: { label: string; desc?: ReactNode; value: T }[];
+    disabled?: boolean;
+    error?: string;
+};
+
+export const Radio = forwardRef<HTMLInputElement, Props<string | boolean | number | undefined>>(
+    ({ disabled, onChange, value, options, name, error, ...rest }, ref) => {
+        const getId = (label: string) => (name ? `${label}_${name}` : label);
+
+        return (
+            <div>
+                {options.map((o) => {
+                    const checked = value === o.value;
+
+                    return (
+                        <label
+                            key={`${getId(o.label)}`}
+                            htmlFor={getId(o.label)}
+                            className="custom-control custom-radio">
+                            <input
+                                id={getId(o.label)}
+                                data-testid={o.value}
+                                type="radio"
+                                className="custom-control-input"
+                                onChange={() => onChange(o.value)}
+                                checked={checked}
+                                disabled={disabled}
+                                ref={ref}
+                                {...rest}
+                            />
+
+                            <span className="custom-control-label">{o.label}</span>
+
+                            {o.desc && <span className="checkbox__label-subtitle">{o.desc}</span>}
+                        </label>
+                    );
+                })}
+                {!disabled && error && <span className="form__message form__message--error">{error}</span>}
+            </div>
+        );
+    },
+);
+
+Radio.displayName = 'Radio';

client/src/components/ui/Controls/Select.tsx

@@ -0,0 +1,27 @@
+import React, { ComponentProps, forwardRef } from 'react';
+import clsx from 'clsx';
+
+type SelectProps = ComponentProps<'select'> & {
+    label?: string;
+    error?: string;
+};
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+    ({ name, label, className, error, children, ...rest }, ref) => (
+        <div className={clsx('form-group', { 'has-error': !!error })}>
+            {label && (
+                <label className="form__label" htmlFor={name}>
+                    {label}
+                </label>
+            )}
+            <div className="input-group">
+                <select className={clsx('form-control custom-select', className)} ref={ref} {...rest}>
+                    {children}
+                </select>
+            </div>
+            {error && <div className="form__message form__message--error mt-1">{error}</div>}
+        </div>
+    ),
+);
+
+Select.displayName = 'Select';

client/src/components/ui/Controls/Textarea.tsx

@@ -0,0 +1,45 @@
+import React, { ComponentProps, forwardRef } from 'react';
+import clsx from 'clsx';
+import { trimLinesAndRemoveEmpty } from '../../../helpers/helpers';
+
+type Props = ComponentProps<'textarea'> & {
+    className?: string;
+    wrapperClassName?: string;
+    label?: string;
+    desc?: string;
+    error?: string;
+    trimOnBlur?: boolean;
+};
+
+export const Textarea = forwardRef<HTMLTextAreaElement, Props>(
+    ({ name, label, desc, className, wrapperClassName, error, trimOnBlur, onBlur, ...rest }, ref) => (
+        <div className={clsx('form-group', wrapperClassName, { 'has-error': !!error })}>
+            {label && (
+                <label className={clsx('form__label', { 'form__label--with-desc': !!desc })} htmlFor={name}>
+                    {label}
+                </label>
+            )}
+            {desc && <div className="form__desc form__desc--top">{desc}</div>}
+            <textarea
+                className={clsx(
+                    'form-control form-control--textarea form-control--textarea-small font-monospace',
+                    className,
+                )}
+                ref={ref}
+                onBlur={(e) => {
+                    if (trimOnBlur) {
+                        const normalizedValue = trimLinesAndRemoveEmpty(e.target.value);
+                        rest.onChange(normalizedValue);
+                    }
+                    if (onBlur) {
+                        onBlur(e);
+                    }
+                }}
+                {...rest}
+            />
+            {error && <div className="form__message form__message--error">{error}</div>}
+        </div>
+    ),
+);
+
+Textarea.displayName = 'Textarea';