procyon/procyon
procyon/procyon
3
1
Fork 0
Code Issues 3 Pull requests 10 Projects Releases Packages 11 Activity

Refactor Field components

Browse source 
Change-Id: I151330330c90a5a4c28d7acd41e6562953dc7af6
This commit is contained in:
Roman Jaroš 2023-05-23 19:40:51 +02:00
parent 94af44e625
commit e003b08d74
42 changed files with 275 additions and 352 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/api/package.json
View file

@ -16,10 +16,10 @@
"linkDirectory": false
},
"dependencies": {
"@treejs/auth": "^0.19.17",
"@treejs/constants": "^0.19.17",
"@treejs/types": "^0.19.17",
"@treejs/utils": "^0.19.17"
"@treejs/auth": "workspace:^",
"@treejs/constants": "workspace:^",
"@treejs/types": "workspace:^",
"@treejs/utils": "workspace:^"
},
"peerDependencies": {
"@reduxjs/toolkit": "1.8.3"

6
packages/auth/package.json
View file

@ -16,9 +16,9 @@
"linkDirectory": false
},
"dependencies": {
"@treejs/constants": "^0.19.17",
"@treejs/types": "^0.19.17",
"@treejs/utils": "^0.19.17"
"@treejs/constants": "workspace:^",
"@treejs/types": "workspace:^",
"@treejs/utils": "workspace:^"
},
"peerDependencies": {
"@reduxjs/toolkit": "1.8.3",

10
packages/components/package.json
View file

@ -16,11 +16,11 @@
"linkDirectory": false
},
"dependencies": {
"@treejs/constants": "^0.19.17",
"@treejs/hooks": "^0.19.17",
"@treejs/types": "^0.19.17",
"@treejs/localization": "^0.19.17",
"@treejs/utils": "^0.19.17"
"@treejs/constants": "workspace:^",
"@treejs/hooks": "workspace:^",
"@treejs/localization": "workspace:^",
"@treejs/types": "workspace:^",
"@treejs/utils": "workspace:^"
},
"peerDependencies": {
"@reduxjs/toolkit": "1.8.3",

29
packages/components/src/Checkbox.tsx
View file

@ -2,20 +2,18 @@ import React, { useCallback, useEffect, useState } from 'react';
import clsx from 'clsx';
import { StatusEnum } from '@treejs/types/common';
import { HTMLElementType } from '@treejs/types/form';
import { InputElementType } from '@treejs/types/form';
import CheckSquareIcon from './Icons/CheckSquare';
import SquareIcon from './Icons/Square';
export type CheckboxFieldProps<V = boolean> = {
checked?: boolean;
label?: string;
status?: StatusEnum;
title: string;
} & HTMLElementType<V>;
export type CheckboxProps<V = boolean> = Omit<
{ checked?: boolean; description?: string } & InputElementType<V>,
'value'
>;
const Checkbox: React.FC<CheckboxFieldProps> = (props) => {
const { title, label, name, status = StatusEnum.none } = props;
export const Checkbox: React.FC<CheckboxProps> = (props) => {
const { label, description, name, status = StatusEnum.none, disabled } = props;
const [checked, setChecked] = useState(false);
@ -50,7 +48,14 @@ const Checkbox: React.FC<CheckboxFieldProps> = (props) => {
return (
<div className="field-container checkbox-container">
<input id={name} name={name} className="hidden field-input" type="checkbox" onBlur={handleBlur} />
<input
id={name}
name={name}
className="hidden field-input"
type="checkbox"
onBlur={handleBlur}
disabled={disabled}
/>
{label && (
<label className="field-label mr-2 " htmlFor={name} onClick={handleClick}>
{label}
@ -60,10 +65,8 @@ const Checkbox: React.FC<CheckboxFieldProps> = (props) => {
{checked ? <CheckSquareIcon className={boxClassName} /> : <SquareIcon className={boxClassName} />}
</div>
<div className="cursor-pointer" onClick={handleClick}>
{title}
{description}
</div>
</div>
);
};
export default Checkbox;

35
packages/components/src/DatePicker/components/DatePicker.tsx
View file

@ -1,24 +1,25 @@
import React, { FocusEvent, useEffect, useState } from 'react';
import { format } from 'date-fns';
import { omit } from 'ramda';
import { format as formatFn } from 'date-fns';
import { ModalId } from '@treejs/components/Modal/context';
import { useModal } from '@treejs/components/Modal/hooks';
import { StatusEnum } from '@treejs/types/common';
import { HTMLElementType } from '@treejs/types/form';
import { InputElementType } from '@treejs/types/form';
import TextField from '../../TextField';
import DatePickerModal from './DatePickerModal';
import { TextField } from '../../TextField';
import { DatePickerModal } from './DatePickerModal';
export const DefaultDateFormat = 'dd.MM.yyyy';
export type DatePickerFieldProps<V = string> = {
export type DatePickerProps<V = string> = Omit<
{
format?: string;
status?: StatusEnum;
value?: Date;
} & HTMLElementType<V>;
} & InputElementType<V>,
'onFocus'
>;
const DatePicker: React.FC<DatePickerFieldProps<Date>> = (props) => {
const { onBlur, onChange, title, status, name } = props;
export const DatePicker: React.FC<DatePickerProps<Date>> = (props) => {
const { onBlur, onChange, label, name, format, ...others } = props;
const { closeModal, openModal, registerModal } = useModal();
@ -44,11 +45,11 @@ const DatePicker: React.FC<DatePickerFieldProps<Date>> = (props) => {
const handleOpenModal = (): void => {
registerModal({
id: name,
title,
title: label,
style: { width: 400 },
component: (
<DatePickerModal
format={props.format ?? DefaultDateFormat}
format={format ?? DefaultDateFormat}
name={name}
value={value}
closeModal={handleCloseModal}
@ -62,15 +63,13 @@ const DatePicker: React.FC<DatePickerFieldProps<Date>> = (props) => {
return (
<TextField
name={name}
title={title}
label={label}
onClick={handleOpenModal}
onFocus={handleOpenModal}
onBlur={handleBlur}
value={value ? format(value, props.format ?? DefaultDateFormat) : undefined}
status={status}
value={value ? formatFn(value, props.format ?? DefaultDateFormat) : undefined}
{...omit(['value', 'onClick'], others)}
readonly
/>
);
};
export default DatePicker;

6
packages/components/src/DatePicker/components/DatePickerModal.tsx
View file

@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
import Calendar from '../../Calendar/components/Calendar';
import { ModalId } from '../../Modal/context';
type IProps = {
export type DatePickerModalProps = {
closeModal: (id: ModalId) => void;
format: ModalId;
name: ModalId;
@ -11,7 +11,7 @@ type IProps = {
value: Date | undefined;
};
const DatePickerModal: React.FC<IProps> = (props) => {
export const DatePickerModal: React.FC<DatePickerModalProps> = (props) => {
const { onChange, closeModal, name, value } = props;
const setActiveOption = useCallback(
@ -24,5 +24,3 @@ const DatePickerModal: React.FC<IProps> = (props) => {
return <Calendar value={value} onDayClick={setActiveOption} hover />;
};
export default DatePickerModal;

6
packages/components/src/DatePicker/index.ts
View file

@ -1,5 +1 @@
import DatePicker, { DatePickerFieldProps } from './components/DatePicker';
export default DatePicker;
export { DatePickerFieldProps };
export { DatePicker, DatePickerProps } from './components/DatePicker';

4
packages/components/src/List.tsx
View file

@ -6,7 +6,7 @@ import scrollIntoView from 'scroll-into-view-if-needed';
import { Option } from '@treejs/types/options';
import { isNilOrEmpty } from '@treejs/utils';
import TextField from './TextField';
import { TextField } from './TextField';
type IProps = {
autoComplete?: boolean;
@ -130,7 +130,7 @@ const List: React.FC<IProps> = (props) => {
<div>
{autoComplete && (
<div className="pb-4">
<TextField name="search" title="Hledat" onChange={handleSearch} autoFocus />
<TextField name="search" label="Hledat" onChange={handleSearch} autoFocus />
</div>
)}
<div className="list-container" onMouseLeave={setCurrentOption(-1)}>

2
packages/components/src/Modal/context.tsx
View file

@ -11,7 +11,7 @@ export type Modal = {
overrideMaxWidth?: boolean;
width?: number | string;
};
title?: string;
title?: string | ReactNode;
};
export type AdditionalModalProps = {

6
packages/components/src/RadioButton/components/CustomOptions.tsx
View file

@ -3,9 +3,9 @@ import clsx from 'clsx';
import { Option } from '@treejs/types/options';
import { InnerOptionsProps, OptionViewProps } from '../types';
import { InnerOptionsProps, OptionViewProps } from '../components/RadioButton';
const CustomOptions: React.FC<OptionViewProps> = (props) => {
export const CustomOptions: React.FC<OptionViewProps> = (props) => {
const {
option: { code, name, disabled },
onClick,
@ -33,5 +33,3 @@ const CustomOptions: React.FC<OptionViewProps> = (props) => {
return render(code, name);
};
export default CustomOptions;

35
packages/components/src/RadioButton/components/RadioButton.tsx
View file

@ -4,34 +4,43 @@ import clsx from 'clsx';
import CircleIcon from '@treejs/components/Icons/Circle';
import CircleFillIcon from '@treejs/components/Icons/CircleFill';
import { StatusEnum } from '@treejs/types/common';
import { HTMLElementType } from '@treejs/types/form';
import { InputElementType } from '@treejs/types/form';
import { Option } from '@treejs/types/options';
import { OptionViewProps } from '../types';
export type OptionViewProps = {
icons?: { [key: string]: React.ReactNode };
};
export type RadioButtonFieldProps<V = Option> = {
export type InnerOptionsProps = {
onClick: ({ code, name }: Option, e: MouseEvent<HTMLDivElement>) => void;
option: Option;
value: string;
};
export type RadioButtonProps<V = Option> = Omit<
{
horizontal?: boolean;
options: Option[];
/**
* Horizontal prop is ignored and flex-direction is set to column for mobile
*/
responsive?: boolean;
status?: StatusEnum;
value?: string;
/**
* Is called per each item in options
*/
view?: React.ReactElement<OptionViewProps>;
} & HTMLElementType<V>;
} & InputElementType<V>,
'onFocus' | 'onBlur' | 'onChange' | 'disabled'
>;
const RadioButton: React.FC<RadioButtonFieldProps> = (props) => {
const { onClick, horizontal = false, title, options, view, status = StatusEnum.none, responsive } = props;
export const RadioButton: React.FC<RadioButtonProps> = (props) => {
const { onClick, horizontal = false, label, options, view, status = StatusEnum.none, responsive, name } = props;
const [value, setValue] = useState<Option['code'] | null>(null);
useEffect(() => {
if (props.value !== undefined) {
setValue(props.value);
if (props.value) {
setValue(props.value.code);
}
}, [props.value]);
@ -78,11 +87,11 @@ const RadioButton: React.FC<RadioButtonFieldProps> = (props) => {
</div>
);
});
}, [value, options, props.name, boxClassName]);
}, [value, options, name, boxClassName]);
return (
<div className="field-container radiobutton-container">
{title && <div className="field-label cursor-default mr-2 self-start">{title}</div>}
{label && <div className="field-label cursor-default mr-2 self-start">{label}</div>}
<div
className={clsx(
'flex',
@ -99,5 +108,3 @@ const RadioButton: React.FC<RadioButtonFieldProps> = (props) => {
</div>
);
};
export default RadioButton;

6
packages/components/src/RadioButton/index.ts
View file

@ -1,5 +1 @@
import RadioButton, { RadioButtonFieldProps } from './components/RadioButton';
export default RadioButton;
export { RadioButtonFieldProps };
export { RadioButton, RadioButtonProps } from './components/RadioButton';

13
packages/components/src/RadioButton/types.tsx
View file

@ -1,13 +0,0 @@
import React, { MouseEvent } from 'react';
import { Option } from '@treejs/types/options';
export type OptionViewProps = {
icons?: { [key: string]: React.ReactNode };
};
export type InnerOptionsProps = {
onClick: ({ code, name }: Option, e: MouseEvent<HTMLDivElement>) => void;
option: Option;
value: string;
};

5
packages/components/src/SelectBox/index.ts
View file

@ -1,5 +0,0 @@
import SelectBox, { SelectBoxFieldProps } from './components/SelectBox';
export default SelectBox;
export { SelectBoxFieldProps };

4
packages/components/src/SelectBox/types.ts
View file

@ -1,4 +0,0 @@
export interface IOption {
code: string;
name: string;
}

40
packages/components/src/SelectBox/components/SelectBox.tsx → packages/components/src/Selectbox/components/Selectbox.tsx
View file

@ -3,27 +3,26 @@ import { find, propEq, propOr } from 'ramda';
import { ModalId } from '@treejs/components/Modal/context';
import { useModal } from '@treejs/components/Modal/hooks';
import { StatusEnum } from '@treejs/types/common';
import { HTMLElementType } from '@treejs/types/form';
import { InputElementType } from '@treejs/types/form';
import { Option } from '@treejs/types/options';
import TextField from '../../TextField';
import { IOption } from '../types';
import SelectBoxModal from './SelectBoxModal';
import { TextField } from '../../TextField';
import { SelectboxModal } from './SelectboxModal';
export type SelectBoxFieldProps<V = IOption> = {
export type SelectBoxProps<V = Option> = Omit<
{
autoComplete?: boolean;
disabled?: boolean;
options: IOption[];
status?: StatusEnum;
value?: string;
} & HTMLElementType<V>;
options: Option[];
} & InputElementType<V>,
'onFocus' | 'onClick'
>;
const SelectBox: React.FC<SelectBoxFieldProps> = (props) => {
const { value, options, onBlur, onChange, name, title, autoComplete, disabled, status } = props;
export const Selectbox: React.FC<SelectBoxProps> = (props) => {
const { value, options, onBlur, onChange, name, label, autoComplete, ...others } = props;
const { openModal, closeModal, registerModal } = useModal();
const [selectedOption, setSelectedOption] = useState<IOption | null>(null);
const [selectedOption, setSelectedOption] = useState<Option | null>(null);
useEffect(() => {
if (value && options) {
@ -36,7 +35,7 @@ const SelectBox: React.FC<SelectBoxFieldProps> = (props) => {
onBlur?.(selectedOption ?? null, e);
};
const handleOptionClick = (option: IOption): void => {
const handleOptionClick = (option: Option): void => {
setSelectedOption(option);
onChange?.(option, null);
};
@ -53,10 +52,10 @@ const SelectBox: React.FC<SelectBoxFieldProps> = (props) => {
const handleOpenModal = (): void => {
registerModal({
id: name,
title,
title: label,
style: { width: 300 },
component: (
<SelectBoxModal
<SelectboxModal
autoComplete={autoComplete}
name={name}
options={options}
@ -72,17 +71,14 @@ const SelectBox: React.FC<SelectBoxFieldProps> = (props) => {
return (
<TextField
disabled={disabled}
{...others}
name={name}
title={title}
label={label}
onClick={handleOpenModal}
onFocus={handleOpenModal}
onBlur={handleBlur}
value={propOr('', 'name', selectedOption)}
status={status}
readonly
/>
);
};
export default SelectBox;

6
packages/components/src/SelectBox/components/SelectBoxModal.tsx → packages/components/src/Selectbox/components/SelectboxModal.tsx
View file

@ -10,7 +10,7 @@ import Button from '../../Button';
import { Grid } from '../../Grid';
import { ModalId } from '../../Modal/context';
type IProps = {
export type SelectboxModalProps = {
autoComplete?: boolean;
closeModal: (id: ModalId) => void;
name: ModalId;
@ -20,7 +20,7 @@ type IProps = {
selectedOption: Option | null;
};
const SelectBoxModal: React.FC<IProps> = (props) => {
export const SelectboxModal: React.FC<SelectboxModalProps> = (props) => {
const { name, options, autoComplete, selectedOption, onChange, onRemove, closeModal } = props;
const handleChange = (option: Option) => {
@ -50,5 +50,3 @@ const SelectBoxModal: React.FC<IProps> = (props) => {
</div>
);
};
export default SelectBoxModal;

1
packages/components/src/Selectbox/index.ts Normal file
View file

@ -0,0 +1 @@
export { Selectbox, SelectBoxProps } from './components/Selectbox';

32
packages/components/src/TextField.tsx
View file

@ -1,24 +1,18 @@
import React, { ReactElement, useCallback, useEffect, useState } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import clsx from 'clsx';
import { StatusEnum } from '@treejs/types/common';
import { HTMLElementType } from '@treejs/types/form';
import { InputElementType } from '@treejs/types/form';
import { isNilOrEmpty, masker } from '@treejs/utils';
export type TextFieldProps<V = string> = {
autoFocus?: boolean;
className?: string;
defaultValue?: string;
disabled?: boolean;
mask?: string;
readonly?: boolean;
status?: StatusEnum;
title?: string | ReactElement;
type?: 'text' | 'password';
value?: string;
} & Omit<HTMLElementType<V>, 'title'>;
} & InputElementType<V>;
const TextField: React.FC<TextFieldProps> = (props) => {
export const TextField: React.FC<TextFieldProps> = (props) => {
const {
type = 'text',
onClick,
@ -27,13 +21,11 @@ const TextField: React.FC<TextFieldProps> = (props) => {
onChange,
disabled,
name,
title,
label,
readonly,
status,
autoFocus,
defaultValue,
mask,
className,
} = props;
const inputRef = React.createRef<HTMLInputElement>();
@ -50,12 +42,6 @@ const TextField: React.FC<TextFieldProps> = (props) => {
[mask]
);
useEffect((): void => {
if (defaultValue) {
setValue(applyMask(defaultValue));
}
}, [defaultValue]);
useEffect((): void => {
if (props.value !== undefined) {
setValue(applyMask(props.value));
@ -111,10 +97,10 @@ const TextField: React.FC<TextFieldProps> = (props) => {
'field-container--error': status === StatusEnum.error,
})}
>
{title && <label className="field-label">{title}</label>}
{label && <label className="field-label">{label}</label>}
<input
className={clsx(className, 'field-input masked', {
'field-input--nolabel': !title,
className={clsx('field-input masked', {
'field-input--nolabel': !label,
})}
ref={inputRef}
autoComplete="off"
@ -133,5 +119,3 @@ const TextField: React.FC<TextFieldProps> = (props) => {
</div>
);
};
export default TextField;

4
packages/components/src/TimePicker/components/TimeList.tsx
View file

@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
import List from '@treejs/components/List';
import { Option } from '@treejs/types/options';
type IProps = {
export type TimeListProps = {
max: number;
min: number;
name: string;
@ -15,7 +15,7 @@ type IProps = {
value?: string;
};
const TimeList: React.FC<IProps> = ({ title, onChange, min, max, step, selectedCode, scrollToCode, name }) => {
const TimeList: React.FC<TimeListProps> = ({ title, onChange, min, max, step, selectedCode, scrollToCode, name }) => {
const handleChange = (option: Option) => {
onChange(option.code);
};

28
packages/components/src/TimePicker/components/TimePicker.tsx
View file

@ -2,14 +2,14 @@ import React, { FC, FocusEvent, useEffect, useState } from 'react';
import { format } from 'date-fns';
import { useModal } from '@treejs/components/Modal/hooks';
import { StatusEnum } from '@treejs/types/common';
import { HTMLElementType } from '@treejs/types/form';
import { InputElementType } from '@treejs/types/form';
import { Option } from '@treejs/types/options';
import TextField from '../../TextField';
import TimePickerModal from './TimePickerModal';
import { TextField } from '../../TextField';
import { TimePickerModal } from './TimePickerModal';
export type TimePickerFieldProps<V = string> = {
export type TimePickerProps<V = string> = Omit<
{
hour?: {
max?: number;
min?: number;
@ -21,12 +21,12 @@ export type TimePickerFieldProps<V = string> = {
step: number;
};
scrollToCode?: Option['code'];
status?: StatusEnum;
value?: Date;
} & HTMLElementType<V>;
} & InputElementType<V>,
'onFocus' | 'onClick'
>;
const TimePicker: FC<TimePickerFieldProps<Date>> = (props) => {
const { onBlur, onChange, title, status, name, hour, minute, scrollToCode } = props;
export const TimePicker: FC<TimePickerProps<Date>> = (props) => {
const { onBlur, onChange, label, name, hour, minute, scrollToCode, ...others } = props;
const { openModal, registerModal } = useModal();
@ -48,7 +48,7 @@ const TimePicker: FC<TimePickerFieldProps<Date>> = (props) => {
const handleOpenModal = (): void => {
registerModal({
id: name,
title,
title: label,
style: { width: 250 },
component: (
<TimePickerModal
@ -66,16 +66,14 @@ const TimePicker: FC<TimePickerFieldProps<Date>> = (props) => {
return (
<TextField
{...others}
name={name}
title={title}
label={label}
onClick={handleOpenModal}
onFocus={handleOpenModal}
onBlur={handleBlur}
value={value ? format(value, 'HH:mm') : ''}
status={status}
readonly
/>
);
};
export default TimePicker;

4
packages/components/src/TimePicker/components/TimePickerModal.tsx
View file

@ -29,7 +29,7 @@ export type TimePickerModalProps = {
value?: Date;
};
const TimePickerModal: React.FC<TimePickerModalProps> = (props) => {
export const TimePickerModal: React.FC<TimePickerModalProps> = (props) => {
const { onChange, modalName, scrollToCode } = props;
const { closeModal } = useModal();
@ -110,5 +110,3 @@ const TimePickerModal: React.FC<TimePickerModalProps> = (props) => {
</>
);
};
export default TimePickerModal;

6
packages/components/src/TimePicker/index.ts
View file

@ -1,5 +1 @@
import TimePicker, { TimePickerFieldProps } from './components/TimePicker';
export default TimePicker;
export { TimePickerFieldProps };
export { TimePicker, TimePickerProps } from './components/TimePicker';

6
packages/forms/package.json
View file

@ -17,9 +17,9 @@
},
"dependencies": {
"@hookform/resolvers": "2.8.8",
"@treejs/components": "^0.19.17",
"@treejs/types": "^0.19.17",
"@treejs/utils": "^0.19.17",
"@treejs/components": "workspace:^",
"@treejs/types": "workspace:^",
"@treejs/utils": "workspace:^",
"react-hook-form": "7.27.1"
},
"peerDependencies": {

12
packages/forms/src/components/Field.tsx
View file

@ -1,14 +1,14 @@
import React, { ReactElement } from 'react';
import TimePickerField from '@treejs/forms/components/fields/TimePickerField';
import { TimePickerField } from '@treejs/forms/components/fields/TimePickerField';
import { IField } from '@treejs/forms/types';
import { FIELD_TYPE } from '../constants';
import CheckboxField from './fields/CheckboxField';
import DatePickerField from './fields/DatePickerField';
import RadioButtonField from './fields/RadioButtonField';
import SelectBoxField from './fields/SelectBoxField';
import TextField from './fields/TextField';
import { CheckboxField } from './fields/CheckboxField';
import { DatePickerField } from './fields/DatePickerField';
import { RadioButtonField } from './fields/RadioButtonField';
import { SelectBoxField } from './fields/SelectBoxField';
import { TextField } from './fields/TextField';
type IProps<F> = F & IField;

17
packages/forms/src/components/fields/CheckboxField.tsx
View file

@ -1,14 +1,14 @@
import React, { useEffect } from 'react';
import React, { FC, useEffect } from 'react';
import { useController, useFormContext } from 'react-hook-form';
import CheckBoxComponent, { CheckboxFieldProps } from '@treejs/components/Checkbox';
import { Checkbox, CheckboxProps } from '@treejs/components/Checkbox';
import { StatusEnum } from '@treejs/types/common';
import { isNilOrEmpty } from '@treejs/utils';
type IProps = CheckboxFieldProps;
export type CheckboxFieldProps = CheckboxProps;
const CheckboxField = (props: IProps): React.ReactElement => {
const { name, title, label, checked } = props;
export const CheckboxField: FC<CheckboxFieldProps> = (props) => {
const { name, checked, ...others } = props;
const { control } = useFormContext();
const {
@ -24,18 +24,15 @@ const CheckboxField = (props: IProps): React.ReactElement => {
return (
<>
<CheckBoxComponent
<Checkbox
{...others}
name={name}
title={title}
checked={field.value}
onChange={field.onChange}
onBlur={field.onBlur}
label={label}
{...(error ? { status: StatusEnum.error } : {})}
/>
<div className="field-validationMessage">{error?.message}</div>
</>
);
};
export default CheckboxField;

17
packages/forms/src/components/fields/DatePickerField.tsx
View file

@ -1,14 +1,15 @@
import React, { useEffect } from 'react';
import React, { FC, useEffect } from 'react';
import { omit } from 'ramda';
import { useController, useFormContext } from 'react-hook-form';
import DatePickerComponent, { DatePickerFieldProps } from '@treejs/components/DatePicker';
import { DatePicker, DatePickerProps } from '@treejs/components/DatePicker';
import { StatusEnum } from '@treejs/types/common';
import { isNilOrEmpty } from '@treejs/utils';
type IProps = DatePickerFieldProps<string>;
export type DatePickerFieldProps = DatePickerProps<string>;
const DatePickerField = (props: IProps): React.ReactElement => {
const { name, title, value } = props;
export const DatePickerField: FC<DatePickerFieldProps> = (props) => {
const { name, value, ...others } = props;
const { control } = useFormContext();
const {
@ -24,9 +25,9 @@ const DatePickerField = (props: IProps): React.ReactElement => {
return (
<>
<DatePickerComponent
<DatePicker
{...omit(['onClick', 'onFocus'], others)}
name={field.name}
title={title}
value={field.value}
onChange={field.onChange}
onBlur={field.onBlur}
@ -36,5 +37,3 @@ const DatePickerField = (props: IProps): React.ReactElement => {
</>
);
};
export default DatePickerField;

23
packages/forms/src/components/fields/RadioButtonField.tsx
View file

@ -1,18 +1,16 @@
import React, { useCallback, useEffect } from 'react';
import React, { FC, useCallback, useEffect } from 'react';
import { is } from 'ramda';
import { useController, useFormContext } from 'react-hook-form';
import RadioButtonComponent, {
RadioButtonFieldProps as IRadioButtonProps,
} from '@treejs/components/RadioButton/components/RadioButton';
import { RadioButton, RadioButtonProps } from '@treejs/components/RadioButton';
import { StatusEnum } from '@treejs/types/common';
import { Option } from '@treejs/types/options';
import { isNilOrEmpty } from '@treejs/utils';
export type IProps = IRadioButtonProps;
export type RadioButtonFieldProps = RadioButtonProps;
const RadioButtonField = (props: IProps): React.ReactElement => {
const { name, title, options, horizontal, view: element, onClick, value, responsive } = props;
export const RadioButtonField: FC<RadioButtonFieldProps> = (props) => {
const { name, onClick, value, ...others } = props;
const { control } = useFormContext();
const {
@ -38,21 +36,14 @@ const RadioButtonField = (props: IProps): React.ReactElement => {
return (
<>
<RadioButtonComponent
<RadioButton
{...others}
name={name}
title={title}
value={field.value}
options={options}
onClick={handleClick}
onBlur={field.onBlur}
horizontal={horizontal}
view={element}
responsive={responsive}
{...(error ? { status: StatusEnum.error } : {})}
/>
<div className="field-validationMessage">{error?.message}</div>
</>
);
};
export default RadioButtonField;

23
packages/forms/src/components/fields/SelectBoxField.tsx
View file

@ -1,16 +1,16 @@
import React, { useCallback, useEffect } from 'react';
import React, { FC, useCallback, useEffect } from 'react';
import { is } from 'ramda';
import { useController, useFormContext } from 'react-hook-form';
import SelectBoxComponent, { SelectBoxFieldProps } from '@treejs/components/SelectBox';
import { IOption } from '@treejs/components/SelectBox/types';
import { Selectbox, SelectBoxProps } from '@treejs/components/Selectbox';
import { StatusEnum } from '@treejs/types/common';
import { Option } from '@treejs/types/options';
import { isNilOrEmpty } from '@treejs/utils';
export type IProps = SelectBoxFieldProps;
export type SelectBoxFieldProps = SelectBoxProps;
const SelectBox = (props: IProps): React.ReactElement => {
const { name, title, options, autoComplete, disabled, onChange, value } = props;
export const SelectBoxField: FC<SelectBoxFieldProps> = (props) => {
const { name, onChange, value, ...others } = props;
const { control } = useFormContext();
const {
@ -25,7 +25,7 @@ const SelectBox = (props: IProps): React.ReactElement => {
}, [value]);
const handleChange = useCallback(
(option: IOption, e: React.MouseEvent<HTMLInputElement>): void => {
(option: Option, e: React.MouseEvent<HTMLInputElement>): void => {
if (isNilOrEmpty(option)) {
field.onChange(null);
if (is(Function, onChange)) {
@ -43,20 +43,15 @@ const SelectBox = (props: IProps): React.ReactElement => {
return (
<>
<SelectBoxComponent
disabled={disabled}
<Selectbox
{...others}
name={field.name}
title={title}
value={field.value}
options={options}
onChange={handleChange}
onBlur={field.onBlur}
autoComplete={autoComplete}
{...(error ? { status: StatusEnum.error } : {})}
/>
<div className="field-validationMessage">{error?.message}</div>
</>
);
};
export default SelectBox;

12
packages/forms/src/components/fields/TextField.tsx
View file

@ -1,15 +1,11 @@
import React, { useEffect } from 'react';
import { useController, useFormContext } from 'react-hook-form';
import TextFieldComponent, { TextFieldProps } from '@treejs/components/TextField';
import { TextField as TextFieldComponent, TextFieldProps } from '@treejs/components/TextField';
import { StatusEnum } from '@treejs/types/common';
import { isNilOrEmpty } from '@treejs/utils';
type IProps = TextFieldProps;
const TextField: React.FC<IProps> = (props) => {
const { name, disabled, value, ...other } = props;
export const TextField: React.FC<TextFieldProps> = ({ name, disabled, value, ...other }) => {
const { control } = useFormContext();
const {
@ -26,17 +22,15 @@ const TextField: React.FC<IProps> = (props) => {
return (
<div className="form-field-container">
<TextFieldComponent
{...other}
name={name}
value={field.value}
onChange={field.onChange}
onBlur={field.onBlur}
disabled={disabled}
{...(error ? { status: StatusEnum.error } : {})}
{...other}
/>
<div className="field-validationMessage">{!disabled && error?.message}</div>
</div>
);
};
export default TextField;

19
packages/forms/src/components/fields/TimePickerField.tsx
View file

@ -1,13 +1,14 @@
import React, { useEffect } from 'react';
import React, { FC, useEffect } from 'react';
import { omit } from 'ramda';
import { useController, useFormContext } from 'react-hook-form';
import TimePickerComponent, { TimePickerFieldProps } from '@treejs/components/TimePicker/components/TimePicker';
import { TimePicker, TimePickerProps } from '@treejs/components/TimePicker/components/TimePicker';
import { StatusEnum } from '@treejs/types/common';
import { isNilOrEmpty } from '@treejs/utils';
type IProps = TimePickerFieldProps<string>;
export type TimePickerFieldProps = TimePickerProps<string>;
const TimePickerField: React.FC<IProps> = ({ name, title, value, minute, hour }): React.ReactElement => {
export const TimePickerField: FC<TimePickerFieldProps> = ({ name, value, ...others }) => {
const { control } = useFormContext();
const {
field,
@ -22,19 +23,15 @@ const TimePickerField: React.FC<IProps> = ({ name, title, value, minute, hour })
return (
<>
<TimePickerComponent
<TimePicker
{...(error ? { status: StatusEnum.error } : {})}
{...omit(['onClick', 'onFocus'], others)}
name={field.name}
title={title}
value={field.value}
onChange={field.onChange}
onBlur={field.onBlur}
minute={minute}
hour={hour}
{...(error ? { status: StatusEnum.error } : {})}
/>
<div className="field-validationMessage">{error?.message}</div>
</>
);
};
export default TimePickerField;

11
packages/types/src/form.ts
View file

@ -1,10 +1,15 @@
import React from 'react';
import React, { ReactNode } from 'react';
export type HTMLElementType<Value> = {
import { StatusEnum } from './common';
export type InputElementType<Value> = {
disabled?: boolean;
label?: string | ReactNode;
name: string;
onBlur?: (value: Value | null, e: React.FocusEvent) => void;
onChange?: (value: Value | null, e: React.MouseEvent | React.ChangeEvent | null) => void;
onClick?: (value: Value, e: React.MouseEvent) => void;
onFocus?: (value: Value, e: React.FocusEvent) => void;
title?: string;
status?: StatusEnum;
value?: Value;
};

30
pnpm-lock.yaml generated
View file

@ -189,16 +189,16 @@ importers:
specifier: 1.8.3
version: 1.8.3(react-redux@8.0.2)(react@17.0.2)
'@treejs/auth':
specifier: ^0.19.17
specifier: workspace:^
version: link:../auth
'@treejs/constants':
specifier: ^0.19.17
specifier: workspace:^
version: link:../constants
'@treejs/types':
specifier: ^0.19.17
specifier: workspace:^
version: link:../types
'@treejs/utils':
specifier: ^0.19.17
specifier: workspace:^
version: link:../utils
publishDirectory: dist
@ -208,13 +208,13 @@ importers:
specifier: 1.8.3
version: 1.8.3(react-redux@8.0.2)(react@17.0.2)
'@treejs/constants':
specifier: ^0.19.17
specifier: workspace:^
version: link:../constants
'@treejs/types':
specifier: ^0.19.17
specifier: workspace:^
version: link:../types
'@treejs/utils':
specifier: ^0.19.17
specifier: workspace:^
version: link:../utils
proxy-memoize:
specifier: 1.0.0
@ -227,19 +227,19 @@ importers:
specifier: 1.8.3
version: 1.8.3(react-redux@8.0.2)(react@17.0.2)
'@treejs/constants':
specifier: ^0.19.17
specifier: workspace:^
version: link:../constants
'@treejs/hooks':
specifier: ^0.19.17
specifier: workspace:^
version: link:../hooks
'@treejs/localization':
specifier: ^0.19.17
specifier: workspace:^
version: link:../localization
'@treejs/types':
specifier: ^0.19.17
specifier: workspace:^
version: link:../types
'@treejs/utils':
specifier: ^0.19.17
specifier: workspace:^
version: link:../utils
clsx:
specifier: ^1.2.1
@ -267,13 +267,13 @@ importers:
specifier: 2.8.8
version: 2.8.8(react-hook-form@7.27.1)
'@treejs/components':
specifier: ^0.19.17
specifier: workspace:^
version: link:../components
'@treejs/types':
specifier: ^0.19.17
specifier: workspace:^
version: link:../types
'@treejs/utils':
specifier: ^0.19.17
specifier: workspace:^
version: link:../utils
react-hook-form:
specifier: 7.27.1

4
stories/components/AddModal.stories.tsx
View file

@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react';
import Modals from '@treejs/components/Modal';
import AddModalButton from '@treejs/components/Modal/components/AddModalButton';
import { ModalWrapper } from '@treejs/components/Modal/context';
import TextField from '@treejs/components/TextField';
import { TextField } from '@treejs/components/TextField';
type Story = StoryObj<typeof AddModalButton>;
@ -46,7 +46,7 @@ export const Small: Story = {
modalTitle: 'Small modal',
component: (
<div>
<TextField name="search" title="Search" />
<TextField name="search" label="Search" />
</div>
),
style: {

10
stories/components/Checkbox.stories.tsx
View file

@ -1,6 +1,6 @@
import { StoryObj } from '@storybook/react';
import Checkbox from '@treejs/components/Checkbox';
import { Checkbox } from '@treejs/components/Checkbox';
type Story = StoryObj<typeof Checkbox>;
@ -18,20 +18,20 @@ export default {
export const Default: Story = {
args: {
title: 'Classic checkbox',
label: 'Classic checkbox',
},
};
export const WithLabel: Story = {
args: {
title: 'Classic checkbox',
label: 'Checkbox value',
label: 'Classic checkbox',
description: 'Checkbox value',
},
};
export const Checked: Story = {
args: {
title: 'Classic checkbox',
label: 'Classic checkbox',
checked: true,
},
};

4
stories/components/DatePicker.stories.tsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import { action } from '@storybook/addon-actions';
import { Meta, StoryObj } from '@storybook/react';
import DatePicker from '@treejs/components/DatePicker';
import { DatePicker } from '@treejs/components/DatePicker';
import Modals from '@treejs/components/Modal';
import { ModalWrapper } from '@treejs/components/Modal/context';
@ -41,7 +41,7 @@ const meta: Meta<typeof DatePicker> = {
export const Default: Story = {
args: {
name: 'datePicker',
title: 'Choose date',
label: 'Choose date',
onClick: action('click'),
},
};

16
stories/components/RadioButton.stories.tsx
View file

@ -3,8 +3,8 @@ import { Meta, StoryObj } from '@storybook/react';
import BuildingStoreIcon from '@treejs/components/Icons/BuildingStore';
import UserTieIcon from '@treejs/components/Icons/UserTie';
import RadioButton from '@treejs/components/RadioButton';
import CustomOptions from '@treejs/components/RadioButton/components/CustomOptions';
import { RadioButton } from '@treejs/components/RadioButton';
import { CustomOptions } from '@treejs/components/RadioButton/components/CustomOptions';
type Story = StoryObj<typeof RadioButton>;
@ -27,7 +27,7 @@ export default {
export const Default: Story = {
args: {
name: 'default',
title: 'Classic radio button',
label: 'Classic radio button',
options: [
{ name: 'item 1', code: 'item1' },
{ name: 'item 2', code: 'item2' },
@ -38,7 +38,7 @@ export const Default: Story = {
export const DefaultDisabled: Story = {
args: {
name: 'default',
title: 'Classic radio button',
label: 'Classic radio button',
options: [
{ name: 'item 1', code: 'item1', disabled: true },
{ name: 'item 2', code: 'item2' },
@ -50,7 +50,7 @@ export const HorizontalView: Story = {
args: {
name: 'horizontal',
horizontal: true,
title: 'Horizontal',
label: 'Horizontal',
options: [
{ name: 'item 1', code: 'item1' },
{ name: 'item 2', code: 'item2' },
@ -62,7 +62,7 @@ export const CustomRender: Story = {
args: {
name: 'custom',
horizontal: true,
title: 'Custom Render',
label: 'Custom Render',
options: [
{ name: 'Právnická osoba', code: 'legal' },
{ name: 'Fyzická osoba', code: 'natural' },
@ -75,7 +75,7 @@ export const DisabledCustomRender: Story = {
args: {
name: 'disabled',
horizontal: true,
title: 'Custom Render',
label: 'Custom Render',
options: [
{ name: 'Právnická osoba', code: 'legal', disabled: true },
{ name: 'Fyzická osoba', code: 'natural' },
@ -88,7 +88,7 @@ export const Responsive: Story = {
args: {
name: 'responsive',
responsive: true,
title: 'Responsive',
label: 'Responsive',
options: [
{ name: 'Právnická osoba', code: 'legal', disabled: true },
{ name: 'Fyzická osoba', code: 'natural' },

18
stories/components/SelectBox.stories.tsx → stories/components/Selectbox.stories.tsx
View file

@ -1,20 +1,20 @@
import React from 'react';
import { Meta, StoryObj } from '@storybook/react';
import Modals from '@treejs/components/Modal/components/Modals';
import { Modals } from '@treejs/components/Modal/components/Modals';
import { ModalWrapper } from '@treejs/components/Modal/context';
import SelectBox from '@treejs/components/SelectBox';
import { Selectbox } from '@treejs/components/Selectbox';
type Story = StoryObj<typeof SelectBox>;
type Story = StoryObj<typeof Selectbox>;
const description = `
\`import SelectBox from '@treejs/components/SelectBox';\`
\`import Selectbox from '@treejs/components/Selectbox';\`
You need to wrap this component with \`ModalWrapper\` component.
`;
export default {
component: SelectBox,
component: Selectbox,
parameters: {
docs: {
description: {
@ -35,8 +35,8 @@ export default {
export const Default: Story = {
args: {
name: 'selectBox',
title: 'Zvolte den v týdnu',
name: 'selectbox',
label: 'Zvolte den v týdnu',
options: [
{ name: 'Pondělí', code: 'po' },
{ name: 'Úterý', code: 'ut' },
@ -52,8 +52,8 @@ export const Default: Story = {
export const Atocomplete: Story = {
args: {
autoComplete: true,
name: 'selectBoxAutoComplete',
title: 'Zvolte den v týdnu',
name: 'selectboxAutoComplete',
label: 'Zvolte den v týdnu',
options: [
{ name: 'Pondělí', code: 'po' },
{ name: 'Úterý', code: 'ut' },

26
stories/components/TextField.stories.tsx
View file

@ -1,6 +1,6 @@
import { Meta, StoryObj } from '@storybook/react';
import TextField from '@treejs/components/TextField';
import { TextField } from '@treejs/components/TextField';
import { StatusEnum } from '../../packages/types/src/common';
@ -21,7 +21,7 @@ export default {
export const Default: Story = {
args: {
name: 'field',
title: 'TextField',
label: 'TextField',
},
};
@ -43,7 +43,7 @@ export const WithoutLabelAndDisabled: Story = {
export const DisabledWithValue: Story = {
args: {
name: 'field',
title: 'Disabled with value',
label: 'Disabled with value',
value: 'Value',
disabled: true,
},
@ -52,42 +52,42 @@ export const DisabledWithValue: Story = {
export const DisabledWithoutValue: Story = {
args: {
name: 'field',
title: 'Disabled without value',
label: 'Disabled without value',
disabled: true,
},
};
export const Error: Story = {
export const StatusError: Story = {
args: {
name: 'error',
title: 'Error',
label: 'Error',
value: ':-(',
status: StatusEnum.error,
},
};
export const Warning: Story = {
export const StatusWarning: Story = {
args: {
name: 'warning',
title: 'Warning',
label: 'Warning',
value: ':-O',
status: StatusEnum.warning,
},
};
export const Information: Story = {
export const StatusInformation: Story = {
args: {
name: 'info',
title: 'Information',
label: 'Information',
value: ';-)',
status: StatusEnum.info,
},
};
export const Success: Story = {
export const StatusSuccess: Story = {
args: {
name: 'success',
title: 'Success',
label: 'Success',
value: ':-)',
status: StatusEnum.success,
},
@ -96,7 +96,7 @@ export const Success: Story = {
export const WithMask: Story = {
args: {
name: 'withMask',
title: 'With mask',
label: 'With mask',
mask: '999 99',
value: '11111',
},

6
stories/components/TimePicker.stories.tsx
View file

@ -4,7 +4,7 @@ import { setHours } from 'date-fns';
import Modals from '@treejs/components/Modal/components/Modals';
import { ModalWrapper } from '@treejs/components/Modal/context';
import TimePicker from '@treejs/components/TimePicker';
import { TimePicker } from '@treejs/components/TimePicker';
type Story = StoryObj<typeof TimePicker>;
@ -38,7 +38,7 @@ const date = new Date();
export const Default: Story = {
args: {
name: 'datePicker',
title: 'Choose time',
label: 'Choose time',
value: setHours(date, 20),
},
};
@ -53,7 +53,7 @@ export const WithoutLabel: Story = {
export const RestrictedTimes: Story = {
args: {
name: 'datePicker',
title: 'Choose time',
label: 'Choose time',
value: setHours(date, 20),
minute: {
step: 5,

3
stories/components/Title.stories.tsx
View file

@ -1,8 +1,7 @@
import React from 'react';
import { Meta, StoryObj } from '@storybook/react';
import { Title } from '@treejs/components/Title';
import { TitleSizeEnum } from '@treejs/components/Title';
import { Title, TitleSizeEnum } from '@treejs/components/Title';
import { DirectionEnum } from '@treejs/types/common';
type Story = StoryObj<typeof Title>;

28
stories/form/components/ExampleForm.tsx
View file

@ -2,16 +2,16 @@ import React, { useCallback } from 'react';
import * as Yup from 'yup';
import Button from '@treejs/components/Button';
import { CheckboxFieldProps } from '@treejs/components/Checkbox';
import { DatePickerFieldProps } from '@treejs/components/DatePicker';
import { CheckboxProps } from '@treejs/components/Checkbox';
import { DatePickerProps } from '@treejs/components/DatePicker';
import { Grid } from '@treejs/components/Grid';
import { GridCol } from '@treejs/components/GridCol';
import BuildingStoreIcon from '@treejs/components/Icons/BuildingStore';
import { RadioButtonFieldProps } from '@treejs/components/RadioButton';
import { SelectBoxFieldProps } from '@treejs/components/SelectBox';
import { TextFieldProps } from '@treejs/components/TextField';
import { TimePickerFieldProps } from '@treejs/components/TimePicker';
import Field from '@treejs/forms/components/Field';
import { RadioButtonFieldProps } from '@treejs/forms/components/fields/RadioButtonField';
import { SelectBoxFieldProps } from '@treejs/forms/components/fields/SelectBoxField';
import { TimePickerFieldProps } from '@treejs/forms/components/fields/TimePickerField';
import Form from '@treejs/forms/components/Form';
import { FIELD_TYPE } from '@treejs/forms/constants';
import { FormSubmit } from '@treejs/forms/types';
@ -62,29 +62,29 @@ const ExampleForm = () => {
<Form<FormData> onSubmit={onSubmit} methods={formMethods}>
<Grid cols={3}>
<GridCol colSpan={3}>
<Field<TextFieldProps> name="text" title="Input" component={FIELD_TYPE.TEXT_FIELD} />
<Field<TextFieldProps> name="text" title={<BuildingStoreIcon />} component={FIELD_TYPE.TEXT_FIELD} />
<Field<CheckboxFieldProps>
<Field<TextFieldProps> name="text" label="Input" component={FIELD_TYPE.TEXT_FIELD} />
<Field<TextFieldProps> name="text" label={<BuildingStoreIcon />} component={FIELD_TYPE.TEXT_FIELD} />
<Field<CheckboxProps>
name="checkbox"
title="Checkbox"
label="Do you Agree?"
label="Checkbox"
description="Do you Agree?"
component={FIELD_TYPE.CHECKBOX}
/>
<Field<RadioButtonFieldProps>
name="radiobutton"
title="Radio Button"
label="Radio Button"
horizontal
options={radioOptions}
component={FIELD_TYPE.RADIO_BUTTON}
/>
<Field<SelectBoxFieldProps>
name="selectBox"
title="SelectBox"
label="SelectBox"
options={selectBoxOptions}
component={FIELD_TYPE.SELECT_BOX}
/>
<Field<DatePickerFieldProps> name="datePicker" title="DatePicker" component={FIELD_TYPE.DATE_PICKER} />
<Field<TimePickerFieldProps> name="timePicker" title="TimePicker" component={FIELD_TYPE.TIME_PICKER} />
<Field<DatePickerProps> name="datePicker" label="DatePicker" component={FIELD_TYPE.DATE_PICKER} />
<Field<TimePickerFieldProps> name="timePicker" label="TimePicker" component={FIELD_TYPE.TIME_PICKER} />
</GridCol>
<GridCol start={2} end={2}>
<Button type="submit" label="Send" status={StatusEnum.success} />