@arquimedes.co/eureka-forms 3.0.3-refactor → 3.0.4-refactor

package/dist/Icons/@ErkIcon.d.ts

@@ -1,4 +1,3 @@
-import './@ErkIcon.css';
 export interface IconProps {
     fill?: string;
     contrast?: string;
@@ -6,9 +5,10 @@ export interface IconProps {
     style?: React.CSSProperties;
     className?: string;
     size?: number;
+    onClick?: () => void;
+    preserveAspectRatio?: 'none';
 }
 export declare function useIconProps(props: IconProps): IconProps & {
     width?: number;
     height?: number;
-    color?: string;
 };

package/dist/Icons/@ErkIcon.js

@@ -1,9 +1,8 @@
-import './@ErkIcon.css';
 export function useIconProps(props) {
     return {
-        color: props.fill,
         width: props.size,
         height: props.size,
+        fill: 'currentColor',
         className: 'ErkIcon',
         ...props,
     };

package/dist/Shared/ErkDatePicker/ErkDatePicker.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MobileDatePickerProps as MuiDatePickerProps, PickerValidDate } from '@mui/x-date-pickers';
 import { ErkTextFieldProps } from '../ErkTextField/ErkTextField';
-interface ErkDatePickerProps extends Omit<MuiDatePickerProps<PickerValidDate>, 'ref' | 'onChange'>, Pick<ErkTextFieldProps, 'error' | 'required' | 'helperText'> {
+interface ErkDatePickerProps extends Omit<MuiDatePickerProps<PickerValidDate>, 'ref' | 'onChange'>, Pick<ErkTextFieldProps, 'error' | 'required' | 'helperText' | 'size'> {
     onChange?: (date: Date | null) => void;
     /** If it should display the timePicker */
     pickTime?: boolean;

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

@@ -22,7 +22,7 @@ const StyledDatePicker = styled(MuiDatePicker)(({ ...props }) => ({
     },
 }));
 const StyledDateTimeToolBar = styled(MuiDateTimePickerToolbar)(({ theme }) => ({
-    '&.MuiPickersToolbar-root': {
+    '&.Erk-MuiPickersToolbar-root': {
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.primary.contrastText,
         '& span': {
@@ -30,17 +30,17 @@ const StyledDateTimeToolBar = styled(MuiDateTimePickerToolbar)(({ theme }) => ({
             textTransform: 'capitalize',
             color: theme.palette.primary.contrastText,
         },
-        '& .MuiDateTimePickerToolbar-dateContainer': {
+        '& .Erk-MuiDateTimePickerToolbar-dateContainer': {
             '& span': {
                 fontSize: '1.1rem',
             },
         },
-        '& .MuiDateTimePickerToolbar-timeDigitsContainer': {
+        '& .Erk-MuiDateTimePickerToolbar-timeDigitsContainer': {
             '& span': {
                 fontSize: '2.3rem',
             },
         },
-        '& .MuiDateTimePickerToolbar-ampmSelection': {
+        '& .Erk-MuiDateTimePickerToolbar-ampmSelection': {
             '& span': {
                 color: theme.palette.primary.contrastText + '8b',
                 '&.Mui-selected': {
@@ -51,13 +51,13 @@ const StyledDateTimeToolBar = styled(MuiDateTimePickerToolbar)(({ theme }) => ({
         },
     },
     cursor: 'default',
-    '& .MuiTypography-root': {
+    '& .Erk-MuiTypography-root': {
         textTransform: 'capitalize',
         color: theme.palette.primary.contrastText,
     },
 }));
 const StyledDateToolBar = styled(MuiDatePickerToolbar)(({ theme }) => ({
-    '&.MuiPickersToolbar-root': {
+    '&.Erk-MuiPickersToolbar-root': {
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.primary.contrastText,
         '& span': {
@@ -67,55 +67,36 @@ const StyledDateToolBar = styled(MuiDatePickerToolbar)(({ theme }) => ({
         },
     },
     cursor: 'default',
-    '& .MuiTypography-root': {
+    '& .Erk-MuiTypography-root': {
         textTransform: 'capitalize',
         color: theme.palette.primary.contrastText,
     },
 }));
 const StyledDialog = styled(MuiDialog)(({ theme }) => ({
-    '& .MuiDialog-paper': {
+    '& .Erk-MuiDialog-paper': {
         borderRadius: '5px',
         backgroundColor: 'transparent',
     },
     '& .Erk-MuiDialogActions-root': {
         '& .Erk-MuiButtonBase-root': { fontWeight: 700 },
     },
-    '& .MuiDialogContent-root': { scrollbarColor: theme.palette.primary.main + ' white' },
-    '& .MuiDayCalendar-weekDayLabel': {
-        cursor: 'default',
-    },
-    '& .MuiPickersCalendarHeader-root': {
-        marginTop: 5,
-    },
-    '& .MuiDateCalendar-root': {
-        height: 'fit-content',
-    },
-    '& .MuiPickersSlideTransition-root': {
-        minHeight: '195px',
-    },
-    '& .MuiClock-root': {
-        marginTop: '34px',
-        marginBottom: '30px',
-    },
-    '& .MuiTimeClock-arrowSwitcher': {
-        top: 5,
-    },
+    '& .Erk-MuiDialogContent-root': { scrollbarColor: theme.palette.primary.main + ' white' },
 }));
 const StyledDay = styled(MuiPickerDay)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '0.9rem',
     lineHeight: 'normal',
-    '&.MuiPickersDay-today': {
+    '&.Erk-MuiPickersDay-today': {
         backgroundColor: theme.palette.primary.main + '33',
     },
-    '&.MuiPickersDay-dayOutsideMonth': {
+    '&.Erk-MuiPickersDay-dayOutsideMonth': {
         color: 'rgb(0,0,0,0.4)',
         '&.Mui-selected': {
             color: theme.palette.primary.contrastText,
         },
     },
 }));
-function CustomDatePicker({ error, required, disabled, readOnly, helperText, pickTime = false, ...others }) {
+function CustomDatePicker({ error, required, disabled, readOnly, helperText, size = 'small', pickTime = false, ...others }) {
     if (pickTime) {
         return (_jsx(StyledDateTimePicker, { ampm: true, ...others, disabled: disabled ?? readOnly, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, slotProps: {
                 actionBar: {
@@ -123,8 +104,30 @@ function CustomDatePicker({ error, required, disabled, readOnly, helperText, pic
                 },
                 layout: {
                     sx: {
+                        //Pasar esto al componente de layout?
                         backgroundColor: '#ffffff',
                         textTransform: 'capitalize',
+                        '& .Erk-MuiDayCalendar-weekDayLabel': {
+                            gridColumn: 1,
+                            gridRow: 2,
+                        },
+                        '& .Erk-MuiPickersLayout-root': {
+                            backgroundColor: 'red',
+                        },
+                        '& .Erk-MuiPickersCalendarHeader-root': {
+                            marginTop: '5px',
+                        },
+                        '& .Erk-MuiDateCalendar-root': {
+                            height: 'fit-content',
+                        },
+                        '& .Erk-MuiClock-root': {
+                            fontSize: 16,
+                            marginTop: '34px',
+                            marginBottom: '30px',
+                        },
+                        '& .Erk-MuiTimeClock-arrowSwitcher': {
+                            top: 5,
+                        },
                     },
                 },
                 monthButton: {
@@ -139,12 +142,13 @@ function CustomDatePicker({ error, required, disabled, readOnly, helperText, pic
                 },
                 textField: {
                     error,
+                    size,
                     disabled,
                     helperText,
                     placeholder: '',
                     InputProps: {
                         disabled: disabled ?? readOnly,
-                        endAdornment: _jsx(CalendarIcon, { fill: "#000000a0" }),
+                        endAdornment: _jsx(CalendarIcon, { fill: "#000000a0", size: 22 }),
                     },
                 },
             }, slots: {
@@ -163,6 +167,15 @@ function CustomDatePicker({ error, required, disabled, readOnly, helperText, pic
                     sx: {
                         backgroundColor: '#ffffff',
                         textTransform: 'capitalize',
+                        '& .Erk-MuiDayCalendar-weekDayLabel': {
+                            cursor: 'default',
+                        },
+                        '& .Erk-MuiPickersCalendarHeader-root': {
+                            marginTop: '5px',
+                        },
+                        '& .Erk-MuiDateCalendar-root': {
+                            height: 'fit-content',
+                        },
                     },
                 },
                 monthButton: {
@@ -176,16 +189,17 @@ function CustomDatePicker({ error, required, disabled, readOnly, helperText, pic
                     toolbarPlaceholder: '– –',
                 },
                 textField: {
+                    size,
                     error,
                     disabled,
                     helperText,
                     placeholder: '',
                     InputProps: {
                         disabled: disabled ?? readOnly,
-                        endAdornment: _jsx(CalendarIcon, { fill: "#000000a0" }),
+                        endAdornment: _jsx(CalendarIcon, { fill: "#000000a0", size: 22 }),
                     },
                 },
-            }, localeText: {}, slots: {
+            }, slots: {
                 day: StyledDay,
                 dialog: StyledDialog,
                 toolbar: StyledDateToolBar,

package/dist/Shared/ErkPhoneInput/EkrPhoneInput.d.ts

@@ -6,6 +6,7 @@ interface ErkPhoneInputProps {
     onChange: (value: string) => void;
     inputRef?: any;
     readOnly?: boolean;
+    defaultCountry?: string;
 }
 /**
  * Generic phoneinput with apps designs. Is class due to the use in the react-hook-forms library

package/dist/Shared/ErkPhoneInput/EkrPhoneInput.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import parse from 'libphonenumber-js/max';
 import { defaultCountries, FlagImage, parseCountry, usePhoneInput } from 'react-international-phone';
-import { useAppSelector } from '../../hooks';
 import isoCountries from 'i18n-iso-countries';
 import es from 'i18n-iso-countries/langs/es.json';
 import { InputAdornment, Select, styled } from '@mui/material';
@@ -30,12 +29,11 @@ const StyledSelect = styled(Select)(({ theme }) => ({
         borderBottom: 'none',
     },
 }));
-function CustomPhoneInput({ value, onChange, inputRef, readOnly = false, disabled = false, ...others }) {
-    const defaultCountry = useAppSelector((state) => state.global.countryCode);
+function CustomPhoneInput({ value, onChange, inputRef, readOnly = false, disabled = false, defaultCountry, ...others }) {
     const { inputValue, handlePhoneValueChange, inputRef: phoneRef, country, setCountry, } = usePhoneInput({
         value: '+' + value,
         inputRef,
-        defaultCountry: defaultCountry.toLowerCase(),
+        defaultCountry: (defaultCountry ?? 'CO').toLowerCase(),
         disableDialCodePrefill: true,
         disableDialCodeAndPrefix: true,
         onChange: (data) => onChange(data.phone.replace('+', '')),
@@ -49,7 +47,7 @@ function CustomPhoneInput({ value, onChange, inputRef, readOnly = false, disable
         };
     })
         .sort((a, b) => a.name.localeCompare(b.name)), []);
-    return (_jsx("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: _jsx(StyledTextField, { ...others, value: inputValue, readOnly: readOnly, disabled: disabled, fullWidth: true, size: "small", variant: "outlined", onChange: handlePhoneValueChange, type: "tel", padding: "6px 12px 6px 6px", autoComplete: "tel", inputRef: phoneRef, onPaste: (e) => {
+    return (_jsx("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: _jsx(StyledTextField, { ...others, value: inputValue, readOnly: readOnly, disabled: disabled, fullWidth: true, variant: "outlined", onChange: handlePhoneValueChange, type: "tel", padding: "6px 12px 6px 6px", autoComplete: "tel", inputRef: phoneRef, onPaste: (e) => {
                 const value = e.clipboardData.getData('Text');
                 if (!value.startsWith('+')) {
                     const phone = parse('+' + value);

package/dist/Shared/ErkTextField/ErkTextField.d.ts

@@ -1,6 +1,7 @@
 import { OutlinedTextFieldProps as MuiTextFieldProps } from '@mui/material';
 import React, { CSSProperties } from 'react';
 interface StyleProps {
+    fontSize?: CSSProperties['fontSize'];
     padding?: CSSProperties['padding'];
     readOnly?: boolean;
 }
@@ -10,10 +11,10 @@ export declare const StyledTextField: import("@emotion/styled").StyledComponent<
 export type ErkTextFieldSlotProps = Omit<ErkTextFieldProps, 'value' | 'onChange'>;
 export interface ErkTextFieldProps extends Omit<MuiTextFieldProps, 'variant' | 'onChange'>, StyleProps {
     /** The value of the textfield */
-    value?: string;
+    value?: string | number;
     onChange?: (value: string) => void;
     /** The icon to display */
-    IconComponent?: React.ElementType;
+    IconComponent?: React.ElementType | React.ReactNode;
     /** The max length of the string */
     maxLength?: number;
 }

package/dist/Shared/ErkTextField/ErkTextField.js

@@ -1,23 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled, TextField as MuiTextField, } from '@mui/material';
+import { styled, TextField as MuiTextField, useTheme, } from '@mui/material';
 import React, { useCallback, useMemo } from 'react';
-import { useAppSelector } from '../../hooks';
-export const StyledTextField = styled(MuiTextField)(({ theme, padding = '6px 12px', ...props }) => ({
+export const StyledTextField = styled(MuiTextField)(({ theme, label, size, fontSize = '1rem', padding = '6px 12px', ...props }) => ({
     borderRadius: 10,
     opacity: props.disabled ? 0.5 : 1,
-    backgroundColor: theme.palette.stepBackgroundColor.default,
+    marginTop: label ? 5 : undefined,
+    minHeight: size === 'small' ? 31 : size === 'medium' ? 40 : undefined,
     '& input, textarea': {
+        fontSize,
         cursor: props.disabled || props.readOnly ? 'default' : 'text',
         padding,
         fontWeight: 400,
         color: theme.palette.text.primary,
-        fontSize: '1rem',
-        lineHeight: '1.188em', //Esto.
-        height: '1.188em', //Esto.
+        lineHeight: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
+        height: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
         borderRadius: 10,
     },
     '& .Erk-MuiFormLabel-root:not(.Erk-MuiInputLabel-shrink)': {
-        transform: 'translate(12px, 5px) scale(1)', //Quitando esto y el height queda con height de 40px
+        transform: `translate(12px, ${size === 'small' ? 5 : 9}px) scale(1)`,
     },
     '& label': {
         color: theme.palette.text.primary + '8a',
@@ -56,6 +56,7 @@ export const StyledTextField = styled(MuiTextField)(({ theme, padding = '6px 12p
         position: 'relative',
         marginRight: props.maxLength ? 40 : 14,
         overflow: 'hidden',
+        minHeight: 20,
         textOverflow: 'ellipsis',
     },
     '& .Erk-MuiFormHelperText-root.Mui-error': {
@@ -65,37 +66,41 @@ export const StyledTextField = styled(MuiTextField)(({ theme, padding = '6px 12p
         padding: 0,
     },
     '& .Erk-MuiInputAdornment-root': {
-        paddingTop: 2,
+        paddingTop: size === 'small' ? 2 : 0,
         marginRight: 0,
     },
 }));
-function CustomTextfield({ value = '', onChange, IconComponent, ...others }) {
+function CustomTextfield({ onChange, value = '', IconComponent, size = 'small', ...others }) {
     const { readOnly, disabled, maxLength } = others;
-    const { descriptionTextColor } = useAppSelector((state) => state.global.formStyle);
+    const { palette } = useTheme();
     const handleChange = useCallback((event) => {
         onChange?.(event.target.value);
     }, [onChange]);
     const inputProps = useMemo(() => ({
+        ...others.inputProps,
         spellCheck: true,
         endAdornment: IconComponent,
         disabled: !!readOnly || !!disabled,
-    }), [disabled, readOnly, IconComponent]);
-    const length = maxLength ? value?.length : null;
+    }), [others.inputProps, IconComponent, readOnly, disabled]);
+    const length = maxLength ? value.toString()?.length : null;
     if (maxLength) {
         inputProps.inputProps = { maxLength };
     }
-    return (_jsxs("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: [_jsx(StyledTextField, { ...others, value: value, fullWidth: true, size: "small", variant: "outlined", onChange: handleChange, slotProps: { input: inputProps } }), length !== null && (_jsxs("div", { style: others.helperText
+    const helperText = others.helperText ?? (others.error === false ? ' ' : undefined);
+    return (_jsxs("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: [_jsx(StyledTextField, { ...others, value: value, fullWidth: true, size: size, helperText: helperText, variant: "outlined", onChange: handleChange, slotProps: { input: inputProps } }), length !== null && (_jsxs("div", { style: helperText
                     ? {
                         position: 'absolute',
                         bottom: '3px',
                         right: '8px',
+                        minHeight: '20px',
                         fontSize: '12px',
-                        color: descriptionTextColor,
+                        color: palette.helperText.primary,
                     }
                     : {
                         fontSize: '12px',
-                        color: descriptionTextColor,
+                        color: palette.helperText.primary,
                         textAlign: 'right',
+                        minHeight: '20px',
                         paddingRight: '8px',
                         paddingTop: '2px',
                         paddingBottom: '2px',

package/dist/index.css

@@ -2,3 +2,13 @@ body {
     margin: 0;
     font-size: 16px;
 }
+
+.ErkIcon {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+    display: inline-block;
+    font-size: 1.5rem;
+    flex-shrink: 0;
+    user-select: none;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.3-refactor",
+  "version":"3.0.4-refactor",
   "scripts": {
     "watch": "tsc --noEmit --watch --project tsconfig.app.json",
     "start": "vite",

package/dist/Icons/@ErkIcon.css

@@ -1,9 +0,0 @@
-.ErkIcon {
-    width: 1em;
-    height: 1em;
-    fill: currentColor;
-    display: inline-block;
-    font-size: 1.5rem;
-    flex-shrink: 0;
-    user-select: none;
-}