@arquimedes.co/eureka-forms 3.0.11-refactor → 3.0.14-refactor

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.
@@ -54,7 +54,7 @@ function TermComponent({ term, tempError }) {
54
54
  setShowDialog(false);
55
55
  }, children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }), _jsx("div", { className: styles.dialogTitle, style: {
56
56
  borderBottom: '1px solid ' + formStyle.primaryColor,
57
- }, children: term.clickEffect.title }), _jsx("div", { className: styles.dialogContentContainer, children: term.clickEffect.text }), _jsx(ErkButton, { text: 'Aceptar', padding: "20px 15px", backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, fontSize: 20, onClick: () => {
57
+ }, children: term.clickEffect.title }), _jsx("div", { className: styles.dialogContentContainer, children: term.clickEffect.text }), _jsx(ErkButton, { text: 'Aceptar', sx: { padding: '20px 15px', fontSize: '20px' }, onClick: () => {
58
58
  setShowDialog(false);
59
59
  if (!postview) {
60
60
  field.onChange(true);
@@ -100,7 +100,7 @@ function CBRIncidentsStep({ step, editable, ...others }) {
100
100
  }
101
101
  }
102
102
  onChange(tempIncidents);
103
- }, ...others }, index))) }), _jsxs("div", { className: styles.btnContainer, children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(ErkButton, { disabled: !editable || postview, text: step.addBtnLabel + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: () => {
103
+ }, ...others }, index))) }), _jsxs("div", { className: styles.btnContainer, children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(ErkButton, { disabled: !editable || postview, text: step.addBtnLabel + (step.required ? ' *' : ''), sx: { padding: '5px 15px' }, onClick: () => {
104
104
  if (editable && !postview) {
105
105
  handleAddIncident();
106
106
  }
@@ -74,8 +74,6 @@ function CBRPropertyStepComponent(props) {
74
74
  },
75
75
  }, open: true, children: _jsxs("div", { className: styles.confirmationContainer, style: { color: formStyle.textColor }, children: [_jsx("div", { className: styles.closeIcon, onClick: () => {
76
76
  setShowWarning(undefined);
77
- }, children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }), _jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.warningContainer, style: { color: formStyle.primaryColor }, children: _jsx(WarningIcon, { style: { fontSize: '160px' } }) }), _jsxs("div", { className: styles.messageContainer, children: ["La garant\u00EDa de su inmueble expir\u00F3 el d\u00EDa ", showWarning.toLocaleDateString(), "."] }), _jsx("div", { className: styles.btnContainer, children: _jsx(ErkButton, { text: 'Continuar', color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: () => {
78
- setShowWarning(undefined);
79
- } }) })] })] }) }))] }));
77
+ }, children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }), _jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.warningContainer, style: { color: formStyle.primaryColor }, children: _jsx(WarningIcon, { style: { fontSize: '160px' } }) }), _jsxs("div", { className: styles.messageContainer, children: ["La garant\u00EDa de su inmueble expir\u00F3 el d\u00EDa ", showWarning.toLocaleDateString(), "."] }), _jsx("div", { className: styles.btnContainer, children: _jsx(ErkButton, { text: 'Continuar', sx: { padding: '5px 15px' }, onClick: () => setShowWarning(undefined) }) })] })] }) }))] }));
80
78
  }
81
79
  export default CBRPropertyStepComponent;
@@ -35,7 +35,7 @@ function CheckBoxStep({ step, editable }) {
35
35
  height: step.size < 4 ? 31 : undefined,
36
36
  minHeight: 31,
37
37
  alignItems: step.isList ? 'start' : 'center',
38
- }, children: [step.label && !step.isList && renderLabel(true), _jsx(ErkCheckBox, { ...field, padding: "0px", size: "1.6rem", inputRef: ref, error: !!error, checked: value, onChange: onChange, "data-testid": step.id, readOnly: !editable || postview }), step.label && step.isList && renderLabel()] }), (step.description ?? !!error) && (_jsx("div", { className: styles.descriptionPar, style: {
38
+ }, children: [step.label && !step.isList && renderLabel(true), _jsx(ErkCheckBox, { ...field, padding: "0px", inputRef: ref, error: !!error, checked: value, onChange: onChange, "data-testid": step.id, readOnly: !editable || postview }), step.label && step.isList && renderLabel()] }), (step.description ?? !!error) && (_jsx("div", { className: styles.descriptionPar, style: {
39
39
  color: error ? formStyle.errorColor : formStyle.descriptionTextColor,
40
40
  }, children: error ? 'Este campo es obligatorio' : step.description }))] }) }), renderNested()] }));
41
41
  }
@@ -26,6 +26,6 @@ function MaterialEntityValueDialog({ type, entity, message, entityValue, handleC
26
26
  },
27
27
  }, open: true, children: _jsxs("div", { className: styles.confirmationContainer, style: { color: formStyle.textColor }, children: [_jsx("div", { className: styles.closeIcon, onClick: () => handleClose(), children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }), _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.contentContainer, children: [_jsx("div", { className: styles.warningContainer, style: {
28
28
  color: type === 'INFO' ? formStyle.primaryColor : formStyle.errorColor,
29
- }, children: type === 'INFO' ? (_jsx(InfoIcon, { style: { fontSize: '160px' } })) : (_jsx(WarningIcon, { style: { fontSize: '160px' } })) }), _jsx("div", { className: styles.messageContainer, children: _jsx(Editor, { editorClassName: 'Erk-Forms-Dialog', editorState: editorState, readOnly: true, toolbarHidden: true }) })] }), _jsx("div", { className: styles.btnContainer, children: _jsx(ErkButton, { text: 'Continuar', color: formStyle.primaryContrastColor, backgroundColor: type === 'INFO' ? formStyle.primaryColor : formStyle.errorColor, fontSize: '1.2rem', height: undefined, padding: '16px 20px', onClick: () => handleClose() }) })] })] }) }));
29
+ }, children: type === 'INFO' ? (_jsx(InfoIcon, { style: { fontSize: '160px' } })) : (_jsx(WarningIcon, { style: { fontSize: '160px' } })) }), _jsx("div", { className: styles.messageContainer, children: _jsx(Editor, { editorClassName: 'Erk-Forms-Dialog', editorState: editorState, readOnly: true, toolbarHidden: true }) })] }), _jsx("div", { className: styles.btnContainer, children: _jsx(ErkButton, { text: 'Continuar', onClick: () => handleClose(), sx: { padding: '16px 20px', fontSize: '1.2rem' } }) })] })] }) }));
30
30
  }
31
31
  export default MaterialEntityValueDialog;
@@ -142,7 +142,7 @@ function FileUploadStep({ step, editable }) {
142
142
  }
143
143
  inputRef.current.value = '';
144
144
  }
145
- }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", { className: styles.btnContainer, children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(ErkButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: () => {
145
+ }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", { className: styles.btnContainer, children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(ErkButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), sx: { padding: '5px 15px' }, onClick: () => {
146
146
  if (editable && !postview) {
147
147
  const input = inputRef.current;
148
148
  if (input !== null) {
@@ -61,7 +61,7 @@ function MapperComponent({ form, step, error, value, loading, inputRef, editable
61
61
  return (_jsxs("div", { className: container, style: { color: formStyle.textColor }, "data-testid": step.id, id: step.id, children: [step.label && _jsx("div", { className: styles.titleLbl, children: step.label }), step.description && (_jsx("p", { className: styles.descriptionPar, style: {
62
62
  margin: step.description ? '10px 0px' : '0px 0px 5px 0px',
63
63
  }, children: step.description })), mapElements(), _jsx("input", { id: step.id + '-input', ref: inputRef, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false &&
64
- (!step.max || elements.filter((elem) => !elem.deleted).length < step.max) && (_jsxs("div", { className: styles.btnContainer, children: [!customAdd && (_jsx(ErkButton, { disabled: !editable || postview, text: step.addBtnLabel + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: () => {
64
+ (!step.max || elements.filter((elem) => !elem.deleted).length < step.max) && (_jsxs("div", { className: styles.btnContainer, children: [!customAdd && (_jsx(ErkButton, { disabled: !editable || postview, text: step.addBtnLabel + (step.required ? ' *' : ''), sx: { padding: '5px 15px' }, onClick: () => {
65
65
  if (editable && !postview) {
66
66
  handleAddElement();
67
67
  }
@@ -1,31 +1,25 @@
1
- import React from 'react';
2
1
  import { ButtonProps as MuiButtonProps } from '@mui/material';
3
- interface ButtonProps extends Omit<MuiButtonProps, 'color'> {
2
+ declare module '@mui/material/Button' {
3
+ interface ButtonPropsColorOverrides {
4
+ inherit: false;
5
+ }
6
+ }
7
+ export interface ErkButtonProps extends Omit<MuiButtonProps, 'color' | 'onSubmit' | 'ref'> {
4
8
  /** Button text */
5
- text: string;
6
- /** Background Color */
7
- backgroundColor?: string;
8
- /** Font Color */
9
- color?: string;
9
+ text?: string;
10
+ /** The color of the button */
11
+ color?: 'primary' | 'secondary' | 'error' | 'warning';
10
12
  /** Button Click Handle */
11
13
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
12
14
  /** If button is disabled */
13
15
  disabled?: boolean;
14
- /** Text font size */
15
- fontSize?: number | string;
16
- /** Button padding '0 13px 0 13px' format */
17
- padding?: string;
18
- /** border radius */
19
- borderRadius?: number;
20
- /** Component height */
21
- height?: number;
22
- /** If text is bold */
23
- bold?: boolean;
24
- /** The width of the button */
25
- width?: string;
16
+ /** If the button es loading */
17
+ loading?: boolean;
18
+ /** The href to redirect */
19
+ buttonRef?: React.Ref<HTMLButtonElement>;
26
20
  }
27
21
  /**
28
22
  * Generic capta button
29
23
  */
30
- declare function ErkButton({ text, color, ...props }: ButtonProps): JSX.Element;
24
+ declare function ErkButton({ text, color, loading, children, disabled, buttonRef, ...props }: ErkButtonProps): JSX.Element;
31
25
  export default ErkButton;
@@ -1,31 +1,31 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Button as MuiButton, styled } from '@mui/material';
3
- const StyledButton = styled(MuiButton)(({ height = 28, bold = false, fontColor = '#ffffff', fontSize = '1rem', borderRadius = 10, width = 'fit-content', padding = '0 13px 0 13px', backgroundColor = '#3d5a7f', }) => ({
4
- width,
3
+ import Loader from '../Loader/Loader';
4
+ const StyledButton = styled(MuiButton)(({ theme, color }) => ({
5
+ width: 'fit-content',
5
6
  textTransform: 'none',
6
7
  fontFamily: 'inherit',
7
- fontSize,
8
- borderRadius,
9
- padding,
10
- height: height,
8
+ fontSize: '1rem',
9
+ borderRadius: 10,
10
+ padding: '0 13px 0 13px',
11
+ minHeight: 28,
11
12
  boxShadow: 'none',
12
- backgroundColor,
13
- color: fontColor,
14
- '&:hover': {
15
- boxShadow: 'none',
16
- backgroundColor,
17
- },
13
+ '&:hover': { boxShadow: 'none' },
18
14
  '&:disabled': {
19
- backgroundColor,
20
- color: fontColor,
15
+ backgroundColor: theme.palette[color ?? 'primary']?.main,
16
+ color: theme.palette[color ?? 'primary']?.contrastText,
21
17
  opacity: 0.5,
22
18
  },
23
- fontWeight: bold ? 'bold' : 'normal',
19
+ fontWeight: 'normal',
24
20
  }));
25
21
  /**
26
22
  * Generic capta button
27
23
  */
28
- function ErkButton({ text, color, ...props }) {
29
- return (_jsx(StyledButton, { text: '', fontColor: color, variant: "contained", ...props, children: text }));
24
+ function ErkButton({ text, color = 'primary', loading, children, disabled, buttonRef, ...props }) {
25
+ return (_jsxs(StyledButton, { text: '', ref: buttonRef, variant: "contained", disabled: disabled ?? loading, color: color, ...props, children: [loading && _jsx(Loader, { size: 20, color: 'white' }), text && (_jsx("label", { style: {
26
+ visibility: loading ? 'hidden' : 'visible',
27
+ fontSize: 'inherit',
28
+ cursor: 'inherit',
29
+ }, children: text })), _jsx("div", { style: { visibility: loading ? 'hidden' : 'visible' }, children: children })] }));
30
30
  }
31
31
  export default ErkButton;
@@ -5,15 +5,7 @@ declare const meta: {
5
5
  tags: string[];
6
6
  args: {
7
7
  text: string;
8
- backgroundColor: string;
9
- color: string;
10
8
  disabled: false;
11
- fontSize: string;
12
- padding: string;
13
- borderRadius: number;
14
- height: number;
15
- bold: false;
16
- width: string;
17
9
  };
18
10
  };
19
11
  export default meta;
@@ -4,15 +4,7 @@ const meta = {
4
4
  tags: ['autodocs'],
5
5
  args: {
6
6
  text: 'Label',
7
- backgroundColor: '#3d5a7f',
8
- color: '#ffffff',
9
7
  disabled: false,
10
- fontSize: '1rem',
11
- padding: '0 13px 0 13px',
12
- borderRadius: 10,
13
- height: 28,
14
- bold: false,
15
- width: 'fit-content',
16
8
  },
17
9
  };
18
10
  export default meta;
@@ -30,7 +22,5 @@ export const Disabled = {
30
22
  export const DifferentColors = {
31
23
  args: {
32
24
  text: 'Label',
33
- backgroundColor: 'red',
34
- color: 'blue',
35
25
  },
36
26
  };
@@ -1,7 +1,7 @@
1
- import React, { CSSProperties } from 'react';
1
+ import React from 'react';
2
2
  import { CheckboxProps as MuiCheckboxProps } from '@mui/material';
3
3
  interface StyleProps {
4
- size?: CSSProperties['fontSize'];
4
+ size?: 'small' | 'medium';
5
5
  padding?: string;
6
6
  error?: number;
7
7
  }
@@ -3,9 +3,10 @@ import React from 'react';
3
3
  import CheckboxUncheckedIcon from '../../Icons/CheckboxUncheckedIcon';
4
4
  import CheckboxCheckedIcon from '../../Icons/CheckboxCheckedIcon';
5
5
  import { FormControl, Checkbox as MuiCheckbox, styled } from '@mui/material';
6
- const StyledCheckbox = styled(MuiCheckbox)(({ theme, size = '1.5rem', padding = '9px', disabled, readOnly, error }) => ({
7
- padding: padding,
8
- fontSize: size,
6
+ const StyledCheckbox = styled(MuiCheckbox, { shouldForwardProp: (prop) => prop !== 'size' })(({ theme, padding = '0px', size = 'small', disabled, readOnly, error }) => ({
7
+ padding,
8
+ width: size === 'small' ? 26 : 32,
9
+ height: size === 'small' ? 26 : 32,
9
10
  opacity: disabled ? 0.5 : 1,
10
11
  pointerEvents: readOnly ? 'none' : undefined,
11
12
  color: error ? theme.palette.error.main : '#787878',
@@ -17,7 +18,7 @@ const StyledCheckbox = styled(MuiCheckbox)(({ theme, size = '1.5rem', padding =
17
18
  * Generic capta checkbox
18
19
  */
19
20
  function CustomCheckBox({ onChange, error = false, readOnly = false, disabled = false, ...others }) {
20
- return (_jsx(FormControl, { error: true, children: _jsx(StyledCheckbox, { ...others, error: +error, readOnly: readOnly, disabled: disabled, inputProps: { disabled: disabled || readOnly }, icon: _jsx(CheckboxUncheckedIcon, { style: { fontSize: 'inherit' } }), checkedIcon: _jsx(CheckboxCheckedIcon, { style: { fontSize: 'inherit' } }), onChange: (event) => onChange?.(typeof event === 'boolean' ? event : event.target.checked) }) }));
21
+ return (_jsx(FormControl, { error: true, children: _jsx(StyledCheckbox, { ...others, error: +error, readOnly: readOnly, disabled: disabled, inputProps: { disabled: disabled || readOnly }, icon: _jsx(CheckboxUncheckedIcon, {}), checkedIcon: _jsx(CheckboxCheckedIcon, {}), onChange: (event) => onChange?.(typeof event === 'boolean' ? event : event.target.checked) }) }));
21
22
  }
22
23
  /**
23
24
  * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
@@ -3,9 +3,6 @@ import ErkCheckBox from './ErkCheckBox';
3
3
  declare const meta: {
4
4
  component: typeof ErkCheckBox;
5
5
  tags: string[];
6
- args: {
7
- size: string;
8
- };
9
6
  };
10
7
  export default meta;
11
8
  type Story = StoryObj<typeof meta>;
@@ -2,9 +2,6 @@ import ErkCheckBox from './ErkCheckBox';
2
2
  const meta = {
3
3
  component: ErkCheckBox,
4
4
  tags: ['autodocs'],
5
- args: {
6
- size: '1.5rem',
7
- },
8
5
  };
9
6
  export default meta;
10
7
  export const Uncheked = {
@@ -14,6 +14,9 @@ const StyledSelect = styled(Select)(() => ({
14
14
  input: {
15
15
  padding: 0,
16
16
  },
17
+ '& .Erk-MuiSelect-select': {
18
+ height: '20px',
19
+ },
17
20
  '& .Erk-MuiSelect-select.Erk-MuiInputBase-inputSizeSmall': {
18
21
  paddingBottom: 0,
19
22
  borderBottom: 'none',
@@ -52,6 +52,6 @@ export default function ErkSmartSelect({ options, value = '', onChange, label, g
52
52
  }, renderInput: (params) => (_jsx(StyledTextField, { ...params, size: size, label: label, labelMargin: 0, name: others.name, readOnly: readOnly, disabled: disabled, inputRef: inputRef, error: others.error, onBlur: others.onBlur, required: others.required, helperText: others.helperText })) }));
53
53
  }
54
54
  else {
55
- return (_jsxs(ErkSelect, { ...others, labelMargin: 0, inputRef: inputRef, onChange: (value) => onChange?.(options?.find((option) => getValueString(option) === value)), value: loading ? '' : getValueString(value), label: label, IconComponent: loading ? () => _jsx(CircularProgress, { size: 22 }) : IconComponent, children: [_jsx(ErkMenuItem, { value: '', "data-testid": 'smart-select-empty', children: _jsx("em", { children: options ? 'Sin Seleccionar' : 'Cargando...' }) }, 'EMPTY'), options?.map((option) => (_jsx(ErkMenuItem, { value: getValueString(option), "data-testid": 'smart-select-' + getValueString(option), children: option.label }, getValueString(option)))), options === undefined && value && !loading && (_jsx(ErkMenuItem, { value: getValueString(value), children: value.label ?? '' }, getValueString(value)))] }));
55
+ return (_jsxs(ErkSelect, { ...others, labelMargin: 0, inputRef: inputRef, onChange: (value) => onChange?.(options?.find((option) => getValueString(option) === value)), value: loading ? '' : getValueString(value), label: label, IconComponent: loading ? () => _jsx(CircularProgress, { size: 22 }) : IconComponent, children: [options?.map((option) => (_jsx(ErkMenuItem, { value: getValueString(option), "data-testid": 'smart-select-' + getValueString(option), children: option.label }, getValueString(option)))), options === undefined && value && !loading && (_jsx(ErkMenuItem, { value: getValueString(value), children: value.label ?? '' }, getValueString(value)))] }));
56
56
  }
57
57
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@arquimedes.co/eureka-forms",
3
3
  "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
4
- "version":"3.0.11-refactor",
4
+ "version":"3.0.14-refactor",
5
5
  "scripts": {
6
6
  "watch": "tsc --noEmit --watch --project tsconfig.app.json",
7
7
  "start": "vite",