tycho-components 0.0.3 → 0.0.5-SNAPSHOT
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AppColorpicker/AppColorpicker.d.ts +10 -0
- package/dist/AppColorpicker/AppColorpicker.js +21 -0
- package/{src/AppColorpicker/index.tsx → dist/AppColorpicker/index.d.ts} +0 -1
- package/dist/AppColorpicker/index.js +2 -0
- package/dist/AppEditable/AppEditable.d.ts +14 -0
- package/dist/AppEditable/AppEditable.js +80 -0
- package/dist/AppEditable/AppEditableField.d.ts +7 -0
- package/dist/AppEditable/AppEditableField.js +1 -0
- package/dist/AppEditable/FormField.d.ts +14 -0
- package/dist/AppEditable/FormField.js +8 -0
- package/dist/AppEditable/FormFieldOption.d.ts +7 -0
- package/dist/AppEditable/FormFieldOption.js +20 -0
- package/{src/AppEditable/index.tsx → dist/AppEditable/index.d.ts} +0 -1
- package/dist/AppEditable/index.js +2 -0
- package/dist/AppModal/AppModal.d.ts +20 -0
- package/dist/AppModal/AppModal.js +22 -0
- package/dist/AppModal/AppModalConfirm.d.ts +11 -0
- package/dist/AppModal/AppModalConfirm.js +20 -0
- package/dist/AppModal/AppModalRemove.d.ts +9 -0
- package/dist/AppModal/AppModalRemove.js +20 -0
- package/{src/AppModal/index.tsx → dist/AppModal/index.d.ts} +0 -1
- package/dist/AppModal/index.js +2 -0
- package/dist/AppToast/AppToast.d.ts +2 -0
- package/dist/AppToast/AppToast.js +78 -0
- package/dist/AppToast/ToastMessage.d.ts +8 -0
- package/dist/AppToast/ToastMessage.js +4 -0
- package/{src/AppToast/index.tsx → dist/AppToast/index.d.ts} +0 -1
- package/dist/AppToast/index.js +2 -0
- package/dist/Dummy/Dummy.d.ts +9 -0
- package/dist/Dummy/Dummy.js +8 -0
- package/{src/Dummy/index.tsx → dist/Dummy/index.d.ts} +0 -1
- package/dist/Dummy/index.js +2 -0
- package/dist/Participants/ParticipantCreate/ParticipantCreate.d.ts +9 -0
- package/dist/Participants/ParticipantCreate/ParticipantCreate.js +41 -0
- package/{src/Participants/ParticipantCreate/index.tsx → dist/Participants/ParticipantCreate/index.d.ts} +0 -1
- package/dist/Participants/ParticipantCreate/index.js +2 -0
- package/dist/Participants/ParticipantRemove/ParticipantRemove.d.ts +11 -0
- package/dist/Participants/ParticipantRemove/ParticipantRemove.js +26 -0
- package/{src/Participants/ParticipantRemove/index.tsx → dist/Participants/ParticipantRemove/index.d.ts} +0 -1
- package/dist/Participants/ParticipantRemove/index.js +2 -0
- package/dist/Participants/Participants.d.ts +9 -0
- package/dist/Participants/Participants.js +57 -0
- package/{src/Participants/index.tsx → dist/Participants/index.d.ts} +0 -1
- package/dist/Participants/index.js +2 -0
- package/dist/Participants/types/Participant.d.ts +27 -0
- package/dist/Participants/types/Participant.js +17 -0
- package/dist/Participants/types/ParticipantService.d.ts +11 -0
- package/dist/Participants/types/ParticipantService.js +12 -0
- package/dist/configs/CommonContext.d.ts +10 -0
- package/dist/configs/CommonContext.js +10 -0
- package/dist/configs/CookieStorage.d.ts +10 -0
- package/dist/configs/CookieStorage.js +28 -0
- package/dist/configs/Localization.d.ts +64 -0
- package/dist/configs/Localization.js +28 -0
- package/dist/configs/MessageUtils.d.ts +20 -0
- package/dist/configs/MessageUtils.js +30 -0
- package/dist/configs/Storage.d.ts +9 -0
- package/dist/configs/Storage.js +16 -0
- package/dist/configs/api.d.ts +2 -0
- package/dist/configs/api.js +38 -0
- package/dist/configs/localization/CommonTexts.d.ts +27 -0
- package/dist/configs/localization/CommonTexts.js +27 -0
- package/dist/configs/localization/ParticipantsTexts.d.ts +34 -0
- package/dist/configs/localization/ParticipantsTexts.js +34 -0
- package/dist/configs/store/actions.d.ts +4 -0
- package/dist/configs/store/actions.js +9 -0
- package/dist/configs/store/reducer.d.ts +3 -0
- package/dist/configs/store/reducer.js +19 -0
- package/dist/configs/store/store.d.ts +3 -0
- package/dist/configs/store/store.js +6 -0
- package/dist/configs/store/types.d.ts +13 -0
- package/dist/configs/store/types.js +4 -0
- package/{src/index.ts → dist/index.d.ts} +2 -1
- package/dist/index.js +9 -0
- package/package.json +34 -23
- package/.eslintignore +0 -2
- package/.eslintrc.cjs +0 -28
- package/.eslintrc.json +0 -31
- package/.gitlab-ci.yml +0 -14
- package/.storybook/main.ts +0 -32
- package/.storybook/preview-head.html +0 -4
- package/.storybook/preview.css +0 -6
- package/.storybook/preview.tsx +0 -29
- package/src/AppColorpicker/AppColorpicker.tsx +0 -69
- package/src/AppEditable/AppEditable.tsx +0 -280
- package/src/AppEditable/AppEditableField.ts +0 -7
- package/src/AppEditable/FormField.ts +0 -26
- package/src/AppEditable/FormFieldOption.ts +0 -38
- package/src/AppModal/AppModal.tsx +0 -95
- package/src/AppModal/AppModalConfirm.tsx +0 -61
- package/src/AppModal/AppModalRemove.tsx +0 -56
- package/src/AppToast/AppToast.tsx +0 -94
- package/src/AppToast/ToastMessage.ts +0 -9
- package/src/Dummy/Dummy.stories.tsx +0 -21
- package/src/Dummy/Dummy.tsx +0 -16
- package/src/Participants/ParticipantCreate/ParticipantCreate.tsx +0 -83
- package/src/Participants/ParticipantRemove/ParticipantRemove.tsx +0 -51
- package/src/Participants/Participants.stories.tsx +0 -45
- package/src/Participants/Participants.tsx +0 -145
- package/src/Participants/types/Participant.ts +0 -43
- package/src/Participants/types/ParticipantService.ts +0 -18
- package/src/TextField/TextField.stories.tsx +0 -54
- package/src/TextField/TextField.tsx +0 -172
- package/src/TextField/TextFieldTheme.ts +0 -70
- package/src/TextField/index.tsx +0 -3
- package/src/TextField/inputRefManager.ts +0 -24
- package/src/TextField/styles.scss +0 -36
- package/src/configs/CommonContext.tsx +0 -23
- package/src/configs/CookieStorage.ts +0 -36
- package/src/configs/Localization.ts +0 -28
- package/src/configs/MessageUtils.ts +0 -60
- package/src/configs/Storage.ts +0 -21
- package/src/configs/api.ts +0 -49
- package/src/configs/localization/CommonTexts.ts +0 -27
- package/src/configs/localization/ParticipantsTexts.ts +0 -40
- package/src/configs/store/actions.ts +0 -12
- package/src/configs/store/reducer.ts +0 -22
- package/src/configs/store/store.ts +0 -9
- package/src/configs/store/types.ts +0 -16
- package/src/react-app-env.d.ts +0 -5
- package/src/vite-env.d.ts +0 -13
- package/stories/Configure.mdx +0 -171
- package/stories/StorybookUtils.tsx +0 -40
- package/tsconfig.json +0 -31
- package/tsconfig.node.json +0 -10
- package/vite.config.ts +0 -26
- /package/{src → dist}/AppColorpicker/style.scss +0 -0
- /package/{src → dist}/AppEditable/style.scss +0 -0
- /package/{src → dist}/AppModal/style.scss +0 -0
- /package/{src → dist}/AppToast/style.scss +0 -0
- /package/{src → dist}/Dummy/styles.scss +0 -0
- /package/{src → dist}/Participants/ParticipantCreate/style.scss +0 -0
- /package/{src → dist}/Participants/ParticipantRemove/style.scss +0 -0
- /package/{src → dist}/Participants/style.scss +0 -0
- /package/{src → dist}/new-styles/base/_borders.scss +0 -0
- /package/{src → dist}/new-styles/base/_colors.scss +0 -0
- /package/{src → dist}/new-styles/base/_displays.scss +0 -0
- /package/{src → dist}/new-styles/base/_margins.css +0 -0
- /package/{src → dist}/new-styles/base/_spacing.scss +0 -0
- /package/{src → dist}/new-styles/base/_tokens.scss +0 -0
- /package/{src → dist}/new-styles/base/_typographs.scss +0 -0
- /package/{src → dist}/new-styles/main.scss +0 -0
- /package/{src → dist}/styles/_variables.scss +0 -0
- /package/{src → dist}/styles/bootstrap.min.css +0 -0
- /package/{src → dist}/styles/main.scss +0 -0
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FieldValue } from '../AppEditable/FormFieldOption';
|
|
2
|
+
import FormField from '../AppEditable/FormField';
|
|
3
|
+
import './style.scss';
|
|
4
|
+
type AppColorpickerProps = {
|
|
5
|
+
item: Record<string, unknown>;
|
|
6
|
+
field: FormField;
|
|
7
|
+
handleSave: (value: FieldValue, field: FormField) => void;
|
|
8
|
+
};
|
|
9
|
+
export default function AppColorpicker({ field, item, handleSave, }: AppColorpickerProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
3
|
+
import { HexColorPicker } from 'react-colorful';
|
|
4
|
+
import { useTranslation } from 'react-i18next';
|
|
5
|
+
import './style.scss';
|
|
6
|
+
const defaultColor = '#FFFFFF';
|
|
7
|
+
export default function AppColorpicker({ field, item, handleSave, }) {
|
|
8
|
+
const { t } = useTranslation('common');
|
|
9
|
+
const [openColor, setOpenColor] = useState(false);
|
|
10
|
+
const [color, setColor] = useState(defaultColor);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (item[field.name])
|
|
13
|
+
setColor(item[field.name]);
|
|
14
|
+
else
|
|
15
|
+
setColor(defaultColor);
|
|
16
|
+
}, [item]);
|
|
17
|
+
return (_jsxs("div", { className: "color-picker-container", children: [_jsx("div", { className: "swatch", style: { backgroundColor: color }, onClick: () => setOpenColor(!openColor), onKeyDown: () => setOpenColor(!openColor), role: "link", "aria-label": "open color picker", tabIndex: 0 }), openColor && (_jsxs(_Fragment, { children: [_jsx(HexColorPicker, { color: color, onChange: setColor }), _jsxs("div", { className: "buttons", children: [_jsx("button", { type: "button", className: "easy-edit-button", name: "save", onClick: () => {
|
|
18
|
+
handleSave(color, field);
|
|
19
|
+
setOpenColor(false);
|
|
20
|
+
}, children: t('button.confirm') }), _jsx("button", { type: "button", className: "easy-edit-button", name: "cancel", onClick: () => setOpenColor(false), children: t('button.cancel') })] })] }))] }));
|
|
21
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import AppEditableField from './AppEditableField';
|
|
2
|
+
import FormField from './FormField';
|
|
3
|
+
import './style.scss';
|
|
4
|
+
type Props = {
|
|
5
|
+
translation: string;
|
|
6
|
+
item: Record<string, unknown>;
|
|
7
|
+
fields: FormField[];
|
|
8
|
+
save?: (field: AppEditableField) => void;
|
|
9
|
+
group?: string;
|
|
10
|
+
className?: string;
|
|
11
|
+
reference?: string;
|
|
12
|
+
};
|
|
13
|
+
export default function AppEditable({ translation, fields, item, save, group, className, reference, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
|
|
3
|
+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
4
|
+
import { format } from 'date-fns-tz';
|
|
5
|
+
import EasyEdit from 'react-easy-edit';
|
|
6
|
+
import { useTranslation } from 'react-i18next';
|
|
7
|
+
import Switch from 'react-switch';
|
|
8
|
+
import AppColorpicker from '../AppColorpicker';
|
|
9
|
+
import './style.scss';
|
|
10
|
+
export default function AppEditable({ translation, fields, item, save, group, className, reference, }) {
|
|
11
|
+
const { t } = useTranslation([translation, 'common']);
|
|
12
|
+
const formatDate = (date, fmt) => {
|
|
13
|
+
if (!date)
|
|
14
|
+
return '';
|
|
15
|
+
return format(date, fmt);
|
|
16
|
+
};
|
|
17
|
+
const handleSave = (value, field) => {
|
|
18
|
+
save &&
|
|
19
|
+
save({
|
|
20
|
+
uid: item.uid,
|
|
21
|
+
name: field.name,
|
|
22
|
+
type: field.type,
|
|
23
|
+
value,
|
|
24
|
+
ref: reference ? item[reference] : undefined,
|
|
25
|
+
});
|
|
26
|
+
};
|
|
27
|
+
const getDateValue = (field) => {
|
|
28
|
+
const v = getValue(field);
|
|
29
|
+
return !v ? null : formatDate(new Date(v), 'yyyy-MM-dd');
|
|
30
|
+
};
|
|
31
|
+
const getValue = (field) => {
|
|
32
|
+
if (field.name.indexOf('.') === -1) {
|
|
33
|
+
if (!isEmptyValue(item, field.name))
|
|
34
|
+
return item[field.name];
|
|
35
|
+
return field.default !== undefined ? field.default : null;
|
|
36
|
+
}
|
|
37
|
+
const splits = field.name.split('.');
|
|
38
|
+
let val = item;
|
|
39
|
+
for (const split of splits) {
|
|
40
|
+
if (typeof val === 'object' && val !== null && split in val) {
|
|
41
|
+
val = val[split];
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
val = undefined;
|
|
45
|
+
break;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
if (val !== undefined && val !== '')
|
|
49
|
+
return val;
|
|
50
|
+
return field.default !== undefined ? field.default : null;
|
|
51
|
+
};
|
|
52
|
+
const isEmptyValue = (thisItem, thisName) => thisItem[thisName] === undefined || thisItem[thisName] === '';
|
|
53
|
+
const getValueToDisplay = (field) => {
|
|
54
|
+
const value = getValue(field);
|
|
55
|
+
if (field.options && field.options.length > 0) {
|
|
56
|
+
const option = field.options.find((op) => op.value === value);
|
|
57
|
+
if (option)
|
|
58
|
+
return option.label;
|
|
59
|
+
}
|
|
60
|
+
// Fallback — if value is a string, number, or boolean, display it.
|
|
61
|
+
if (typeof value === 'string' ||
|
|
62
|
+
typeof value === 'number' ||
|
|
63
|
+
typeof value === 'boolean') {
|
|
64
|
+
return value;
|
|
65
|
+
}
|
|
66
|
+
return null;
|
|
67
|
+
};
|
|
68
|
+
const getLabelValueForList = (options) => {
|
|
69
|
+
return options.map((op) => ({
|
|
70
|
+
label: t(op.label),
|
|
71
|
+
value: op.value,
|
|
72
|
+
}));
|
|
73
|
+
};
|
|
74
|
+
return (_jsx(_Fragment, { children: fields.map((field, idx) => (_jsxs("div", { className: `editable-container ${className || ''}`, children: [_jsxs("div", { className: "title", children: [_jsxs("h6", { children: [field.title
|
|
75
|
+
? field.title
|
|
76
|
+
: t(`${translation}:${group || ''}.field.${field.name}`), field.required && _jsx("span", { children: "*" })] }), field.tooltip && (_jsx(FontAwesomeIcon, { icon: faQuestionCircle, className: "info", title: field.tooltip }))] }), field.type === 'display' ? (_jsx("span", { children: getValueToDisplay(field) ?? '--' })) : null, field.type === 'code' ? (_jsx("div", { className: "textarea-code", children: _jsx(EasyEdit, { type: "textarea", onSave: (value) => handleSave(JSON.parse(value), field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel'), value: JSON.stringify(getValue(field) || {}), placeholder: t('common:placeholder.input') }) })) : null, (field.type === 'text' ||
|
|
77
|
+
field.type === 'number' ||
|
|
78
|
+
field.type === 'locale' ||
|
|
79
|
+
field.type === 'year') && (_jsx(EasyEdit, { type: "text", onSave: (value) => handleSave(value, field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel'), value: getValue(field), placeholder: t('common:placeholder.input') })), field.type === 'textarea' ? (_jsx(EasyEdit, { type: "textarea", onSave: (value) => handleSave(value, field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel'), value: getValue(field), placeholder: t('common:placeholder.input') })) : null, field.type === 'select' || field.type === 'list' ? (_jsx(EasyEdit, { type: "select", options: getLabelValueForList(field.options || []), onSave: (value) => handleSave(value, field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel'), placeholder: t('common:placeholder.input'), value: getValue(field) })) : null, field.type === 'range' ? (_jsx(EasyEdit, { type: "range", onSave: (value) => handleSave(value, field), attributes: { name: 'awesome-range', min: 0, max: 100, step: 1 }, placeholder: t('common:placeholder.input'), value: getValue(field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel') })) : null, field.type === 'switch' ? (_jsx(Switch, { onChange: (checked) => handleSave(checked, field), checked: getValue(field) || false })) : null, field.type === 'date' && (_jsx(EasyEdit, { type: "date", onSave: (value) => handleSave(new Date(value), field), placeholder: t('common:placeholder.input'), value: getDateValue(field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel') })), field.type === 'password' && (_jsx(EasyEdit, { type: "password", onSave: (value) => handleSave(value, field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel'), value: getValue(field), placeholder: t('common:placeholder.input') })), field.type === 'color' ? (_jsx(AppColorpicker, { item: item, field: field, handleSave: handleSave })) : null] }, idx.valueOf()))) }));
|
|
80
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import FormFieldOption from './FormFieldOption';
|
|
2
|
+
export type FieldOperations = 'create' | 'update' | 'delete';
|
|
3
|
+
export default interface FormField {
|
|
4
|
+
name: string;
|
|
5
|
+
title?: string;
|
|
6
|
+
type: string;
|
|
7
|
+
required?: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
options?: FormFieldOption[];
|
|
10
|
+
tooltip?: string;
|
|
11
|
+
default?: string | boolean | number;
|
|
12
|
+
role?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare const validateFormField: (entity: Record<string, unknown>, fields: FormField[]) => FormField[];
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type FieldValue = string | number | boolean | Date | null;
|
|
2
|
+
export default interface FormFieldOption {
|
|
3
|
+
label: string;
|
|
4
|
+
value: FieldValue;
|
|
5
|
+
}
|
|
6
|
+
export declare const convertEnum: (values: Record<string, string | number | boolean>) => FormFieldOption[];
|
|
7
|
+
export declare const convertList: (values: Array<Record<string, unknown>>, keyAttr: string, valueAttr: string) => FormFieldOption[];
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export const convertEnum = (values) => {
|
|
2
|
+
let fields = [{ label: '', value: '' }];
|
|
3
|
+
Object.keys(values).forEach((key) => {
|
|
4
|
+
fields = [...fields, { label: String(values[key]), value: key }];
|
|
5
|
+
});
|
|
6
|
+
return fields;
|
|
7
|
+
};
|
|
8
|
+
export const convertList = (values, keyAttr, valueAttr) => {
|
|
9
|
+
let fields = [{ label: '', value: '' }];
|
|
10
|
+
values.forEach((value) => {
|
|
11
|
+
fields = [
|
|
12
|
+
...fields,
|
|
13
|
+
{
|
|
14
|
+
label: String(value[keyAttr]),
|
|
15
|
+
value: value[valueAttr],
|
|
16
|
+
},
|
|
17
|
+
];
|
|
18
|
+
});
|
|
19
|
+
return fields;
|
|
20
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './style.scss';
|
|
3
|
+
type Props = {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
title: string;
|
|
6
|
+
close: () => void;
|
|
7
|
+
confirm?: () => void;
|
|
8
|
+
cancel?: () => void;
|
|
9
|
+
subtitle?: string;
|
|
10
|
+
className?: string;
|
|
11
|
+
disableConfirm?: boolean;
|
|
12
|
+
hideFooter?: boolean;
|
|
13
|
+
disableCancel?: boolean;
|
|
14
|
+
disableClose?: boolean;
|
|
15
|
+
confirmLabel?: string;
|
|
16
|
+
closeLabel?: string;
|
|
17
|
+
onEntered?: () => void;
|
|
18
|
+
};
|
|
19
|
+
export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box, Fade, Modal } from '@mui/material';
|
|
3
|
+
import cx from 'classnames';
|
|
4
|
+
import { useTranslation } from 'react-i18next';
|
|
5
|
+
import { Button, Icon } from 'tycho-storybook';
|
|
6
|
+
import './style.scss';
|
|
7
|
+
export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, }) {
|
|
8
|
+
const { t } = useTranslation('common');
|
|
9
|
+
const getClassNames = cx('modal-container', className);
|
|
10
|
+
return (_jsx(Modal, { open: true, children: _jsx(Fade, { in: true, onEntered: () => onEntered && onEntered(), children: _jsxs(Box, { className: getClassNames, sx: style, children: [_jsxs("div", { className: "header", children: [_jsxs("div", { className: "titles", children: [_jsx("span", { className: "title", children: title }), subtitle && _jsx("span", { className: "subtitle", children: subtitle })] }), !disableClose && (_jsx(Icon, { name: "close", onClick: close, className: "pointer" }))] }), _jsx("div", { className: "body", children: children }), !hideFooter ? (_jsxs("div", { className: "footer", children: [!disableCancel && (_jsx(Button, { onClick: cancel || close, text: closeLabel || t('button.cancel'), color: "danger" })), confirm && (_jsx(Button, { onClick: confirm, disabled: disableConfirm, text: confirmLabel || t('button.confirm') }))] })) : null] }) }) }));
|
|
11
|
+
}
|
|
12
|
+
const style = {
|
|
13
|
+
position: 'absolute',
|
|
14
|
+
top: '40%',
|
|
15
|
+
left: '50%',
|
|
16
|
+
transform: 'translate(-50%, -50%)',
|
|
17
|
+
width: '50%',
|
|
18
|
+
maxWidth: '1080px',
|
|
19
|
+
borderRadius: 'var(--radius-200)',
|
|
20
|
+
boxShadow: 24,
|
|
21
|
+
bgcolor: 'var(--background-default)',
|
|
22
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import './style.scss';
|
|
2
|
+
type Props = {
|
|
3
|
+
title: string;
|
|
4
|
+
subtitle: string;
|
|
5
|
+
onClose: () => void;
|
|
6
|
+
onConfirm: () => void;
|
|
7
|
+
closeLabel?: string;
|
|
8
|
+
confirmLabel?: string;
|
|
9
|
+
};
|
|
10
|
+
export default function AppModalConfirm({ title, subtitle, onClose, onConfirm, closeLabel, confirmLabel, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box, Modal } from '@mui/material';
|
|
3
|
+
import { useTranslation } from 'react-i18next';
|
|
4
|
+
import { Button, Icon } from 'tycho-storybook';
|
|
5
|
+
import './style.scss';
|
|
6
|
+
export default function AppModalConfirm({ title, subtitle, onClose, onConfirm, closeLabel, confirmLabel, }) {
|
|
7
|
+
const { t } = useTranslation('header');
|
|
8
|
+
return (_jsx(Modal, { open: true, children: _jsxs(Box, { className: "modal-container modal-remove", sx: style, children: [_jsxs("div", { className: "body", children: [_jsx(Icon, { name: "warning", size: "large", filled: true }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "title", children: title }), _jsx("span", { className: "subtitle", children: subtitle })] })] }), _jsxs("div", { className: "footer", children: [_jsx(Button, { onClick: onClose, text: closeLabel || t('modal.button.cancel'), mode: "tonal" }), _jsx(Button, { onClick: onConfirm, text: confirmLabel || t('modal.button.confirm') })] })] }) }));
|
|
9
|
+
}
|
|
10
|
+
const style = {
|
|
11
|
+
position: 'absolute',
|
|
12
|
+
top: '40%',
|
|
13
|
+
left: '50%',
|
|
14
|
+
transform: 'translate(-50%, -50%)',
|
|
15
|
+
width: '30%',
|
|
16
|
+
maxWidth: '580px',
|
|
17
|
+
borderRadius: 'var(--radius-200)',
|
|
18
|
+
boxShadow: 24,
|
|
19
|
+
bgcolor: 'var(--background-default)',
|
|
20
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import './style.scss';
|
|
2
|
+
type Props = {
|
|
3
|
+
title: string;
|
|
4
|
+
subtitle: string;
|
|
5
|
+
onClose: () => void;
|
|
6
|
+
onConfirm: () => void;
|
|
7
|
+
};
|
|
8
|
+
export default function AppModalRemove({ title, subtitle, onClose, onConfirm, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box, Modal } from '@mui/material';
|
|
3
|
+
import { useTranslation } from 'react-i18next';
|
|
4
|
+
import { Button, Icon } from 'tycho-storybook';
|
|
5
|
+
import './style.scss';
|
|
6
|
+
export default function AppModalRemove({ title, subtitle, onClose, onConfirm, }) {
|
|
7
|
+
const { t } = useTranslation('common');
|
|
8
|
+
return (_jsx(Modal, { open: true, children: _jsxs(Box, { className: "modal-container modal-remove", sx: style, children: [_jsxs("div", { className: "body", children: [_jsx(Icon, { name: "warning", size: "large", filled: true }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "title", children: title }), _jsx("span", { className: "subtitle", children: subtitle })] })] }), _jsxs("div", { className: "footer", children: [_jsx(Button, { onClick: onClose, text: t('button.cancel'), mode: "tonal" }), _jsx(Button, { onClick: onConfirm, text: t('button.confirm') })] })] }) }));
|
|
9
|
+
}
|
|
10
|
+
const style = {
|
|
11
|
+
position: 'absolute',
|
|
12
|
+
top: '40%',
|
|
13
|
+
left: '50%',
|
|
14
|
+
transform: 'translate(-50%, -50%)',
|
|
15
|
+
width: '30%',
|
|
16
|
+
maxWidth: '580px',
|
|
17
|
+
borderRadius: 'var(--radius-200)',
|
|
18
|
+
boxShadow: 24,
|
|
19
|
+
bgcolor: 'var(--background-default)',
|
|
20
|
+
};
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import CommonContext from '../configs/CommonContext';
|
|
3
|
+
import { message } from '../configs/store/actions';
|
|
4
|
+
import { useContext, useEffect } from 'react';
|
|
5
|
+
import ReactLoading from 'react-loading';
|
|
6
|
+
import { ToastContainer, toast } from 'react-toastify';
|
|
7
|
+
import 'react-toastify/dist/ReactToastify.css';
|
|
8
|
+
import { EMPTY_TOAST } from './ToastMessage';
|
|
9
|
+
export default function AppToast() {
|
|
10
|
+
const { dispatch, state } = useContext(CommonContext);
|
|
11
|
+
const handleClose = () => {
|
|
12
|
+
toast.dismiss();
|
|
13
|
+
dispatch(message(EMPTY_TOAST));
|
|
14
|
+
};
|
|
15
|
+
const handleClipboard = () => {
|
|
16
|
+
navigator.clipboard.writeText(state.message.value);
|
|
17
|
+
};
|
|
18
|
+
const getLoading = () => (_jsxs("div", { className: "d-flex", children: [_jsx(ReactLoading, { type: "spinningBubbles", color: "blue", height: 24, width: 24 }), _jsx("span", { className: "ms-3", children: "Loading..." })] }));
|
|
19
|
+
const attachCloseToEscape = () => {
|
|
20
|
+
const closeOnEscape = (e) => {
|
|
21
|
+
if (e.keyCode === 27)
|
|
22
|
+
handleClose();
|
|
23
|
+
};
|
|
24
|
+
window.addEventListener('keydown', closeOnEscape);
|
|
25
|
+
return () => window.removeEventListener('keydown', closeOnEscape);
|
|
26
|
+
};
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
attachCloseToEscape();
|
|
29
|
+
}, []);
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (state.toastLoading) {
|
|
32
|
+
toast(getLoading(), {
|
|
33
|
+
position: 'top-right',
|
|
34
|
+
autoClose: false,
|
|
35
|
+
hideProgressBar: false,
|
|
36
|
+
closeOnClick: false,
|
|
37
|
+
pauseOnHover: true,
|
|
38
|
+
draggable: false,
|
|
39
|
+
progress: undefined,
|
|
40
|
+
theme: 'light',
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
toast.dismiss();
|
|
45
|
+
}
|
|
46
|
+
}, [state.toastLoading]);
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
if (state.message && state.message.value !== '') {
|
|
49
|
+
switch (state.message.type) {
|
|
50
|
+
case 'error':
|
|
51
|
+
toast.error(state.message.value, {
|
|
52
|
+
onClose: () => handleClose(),
|
|
53
|
+
onClick: () => handleClipboard(),
|
|
54
|
+
});
|
|
55
|
+
break;
|
|
56
|
+
case 'warning':
|
|
57
|
+
toast.warning(state.message.value, {
|
|
58
|
+
onClose: () => handleClose(),
|
|
59
|
+
});
|
|
60
|
+
break;
|
|
61
|
+
case 'success':
|
|
62
|
+
toast.success(state.message.value, {
|
|
63
|
+
onClose: () => handleClose(),
|
|
64
|
+
});
|
|
65
|
+
break;
|
|
66
|
+
default:
|
|
67
|
+
toast(state.message.value, {
|
|
68
|
+
onClose: () => handleClose(),
|
|
69
|
+
});
|
|
70
|
+
break;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
dispatch(message(EMPTY_TOAST));
|
|
75
|
+
}
|
|
76
|
+
}, [state.message]);
|
|
77
|
+
return _jsx(ToastContainer, { closeOnClick: true });
|
|
78
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import './styles.scss';
|
|
2
|
+
export declare const DummyModes: readonly ["white", "blue"];
|
|
3
|
+
type DummyModes = (typeof DummyModes)[number];
|
|
4
|
+
export type Props = {
|
|
5
|
+
className?: string;
|
|
6
|
+
mode?: DummyModes;
|
|
7
|
+
};
|
|
8
|
+
export default function Dummy({ className, mode }: Props): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import cx from 'classnames';
|
|
3
|
+
import './styles.scss';
|
|
4
|
+
export const DummyModes = ['white', 'blue'];
|
|
5
|
+
export default function Dummy({ className, mode = 'blue' }) {
|
|
6
|
+
const getClassNames = cx('ds-dummy', className, mode);
|
|
7
|
+
return _jsx("div", { className: getClassNames, children: "aaaa" });
|
|
8
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import Participant from '../types/Participant';
|
|
2
|
+
import './style.scss';
|
|
3
|
+
type Props = {
|
|
4
|
+
document: string;
|
|
5
|
+
onClose: () => void;
|
|
6
|
+
onCreate: (p: Participant) => void;
|
|
7
|
+
};
|
|
8
|
+
export default function ParticipantCreate({ document, onClose, onCreate, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { yupResolver } from '@hookform/resolvers/yup';
|
|
3
|
+
import { useContext } from 'react';
|
|
4
|
+
import { useForm } from 'react-hook-form';
|
|
5
|
+
import { useTranslation } from 'react-i18next';
|
|
6
|
+
import * as yup from 'yup';
|
|
7
|
+
import AppModal from '../../AppModal';
|
|
8
|
+
import CommonContext from '../../configs/CommonContext';
|
|
9
|
+
import { toastLoading } from '../../configs/store/actions';
|
|
10
|
+
import ParticipantService from '../types/ParticipantService';
|
|
11
|
+
import './style.scss';
|
|
12
|
+
import { TextField } from 'tycho-storybook';
|
|
13
|
+
export default function ParticipantCreate({ document, onClose, onCreate, }) {
|
|
14
|
+
const { t } = useTranslation('participants');
|
|
15
|
+
const { dispatch, state } = useContext(CommonContext);
|
|
16
|
+
const createdForm = useForm({
|
|
17
|
+
resolver: yupResolver(getFormSchema(t)),
|
|
18
|
+
mode: 'onChange',
|
|
19
|
+
});
|
|
20
|
+
const handleAdd = () => {
|
|
21
|
+
if (state.toastLoading)
|
|
22
|
+
return;
|
|
23
|
+
dispatch(toastLoading(true));
|
|
24
|
+
ParticipantService.add(document, createdForm.getValues())
|
|
25
|
+
.then((r) => {
|
|
26
|
+
onCreate(r.data);
|
|
27
|
+
})
|
|
28
|
+
.finally(() => {
|
|
29
|
+
dispatch(toastLoading(false));
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
return (_jsx(AppModal, { title: t('modal.add.title'), className: "modal-participant", close: onClose, confirm: handleAdd, disableConfirm: !createdForm.formState.isValid, children: _jsxs("div", { className: "participant-container", children: [_jsx(TextField, { label: t('modal.input.code'), attr: "code",
|
|
33
|
+
// @ts-ignore
|
|
34
|
+
createdForm: createdForm, showEndAdornment: false, placeholder: t('common:generic.placeholder'), required: true }), _jsx(TextField, { label: t('modal.input.name'), attr: "name",
|
|
35
|
+
// @ts-ignore
|
|
36
|
+
createdForm: createdForm, showEndAdornment: false, placeholder: t('common:generic.placeholder') })] }) }));
|
|
37
|
+
}
|
|
38
|
+
const getFormSchema = (t) => yup.object().shape({
|
|
39
|
+
code: yup.string().required(t('common:validation.required')),
|
|
40
|
+
name: yup.string().required(t('common:validation.required')),
|
|
41
|
+
});
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import Participant from '../types/Participant';
|
|
2
|
+
import './style.scss';
|
|
3
|
+
type Props = {
|
|
4
|
+
participant: Participant;
|
|
5
|
+
participants: Participant[];
|
|
6
|
+
document: string;
|
|
7
|
+
onClose: () => void;
|
|
8
|
+
onChange: (p: Participant[]) => void;
|
|
9
|
+
};
|
|
10
|
+
export default function ParticipantRemove({ participant, participants, document, onClose, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useContext } from 'react';
|
|
3
|
+
import { useTranslation } from 'react-i18next';
|
|
4
|
+
import AppModalRemove from '../../AppModal/AppModalRemove';
|
|
5
|
+
import CommonContext from '../../configs/CommonContext';
|
|
6
|
+
import { toastLoading } from '../../configs/store/actions';
|
|
7
|
+
import ParticipantService from '../types/ParticipantService';
|
|
8
|
+
import './style.scss';
|
|
9
|
+
export default function ParticipantRemove({ participant, participants, document, onClose, onChange, }) {
|
|
10
|
+
const { t } = useTranslation('participants');
|
|
11
|
+
const { dispatch, state } = useContext(CommonContext);
|
|
12
|
+
const handleRemove = () => {
|
|
13
|
+
if (state.toastLoading || !participant)
|
|
14
|
+
return;
|
|
15
|
+
dispatch(toastLoading(true));
|
|
16
|
+
ParticipantService.remove(document, participant.code)
|
|
17
|
+
.then(() => {
|
|
18
|
+
const list = participants?.filter((p) => p.code !== participant.code) || [];
|
|
19
|
+
onChange(list);
|
|
20
|
+
})
|
|
21
|
+
.finally(() => {
|
|
22
|
+
dispatch(toastLoading(false));
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
return (_jsx(AppModalRemove, { title: t('modal.remove.title'), subtitle: t('modal.remove.description'), onClose: onClose, onConfirm: handleRemove }));
|
|
26
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import './style.scss';
|
|
2
|
+
import Participant from './types/Participant';
|
|
3
|
+
type Props = {
|
|
4
|
+
document: string;
|
|
5
|
+
onChange: (p: Participant[]) => void;
|
|
6
|
+
participants: Participant[];
|
|
7
|
+
};
|
|
8
|
+
export default function Participants({ document, participants, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|