@soyfri/shared-library 1.4.7 → 1.4.9
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/{Input-C__f2Up9.js → Input-DFHs7cJ_.js} +39 -5
- package/Input-DFHs7cJ_.js.map +1 -0
- package/{Input-CwSfAvKP.cjs → Input-c8MwNNPg.cjs} +39 -5
- package/Input-c8MwNNPg.cjs.map +1 -0
- package/components/DateTimePicker/DateTimePicker.cjs +12 -3
- package/components/DateTimePicker/DateTimePicker.cjs.map +1 -1
- package/components/DateTimePicker/DateTimePicker.d.ts +3 -0
- package/components/DateTimePicker/DateTimePicker.js +12 -3
- package/components/DateTimePicker/DateTimePicker.js.map +1 -1
- package/components/Input/Input.cjs +1 -1
- package/components/Input/Input.js +1 -1
- package/components/InputGroup/InputGroup.cjs +1 -1
- package/components/InputGroup/InputGroup.js +1 -1
- package/package.json +5 -7
- package/Input-C__f2Up9.js.map +0 -1
- package/Input-CwSfAvKP.cjs.map +0 -1
- package/README.md +0 -243
- package/components/Input/InputVariants.styles.d.ts +0 -30
- package/palette.d.ts +0 -1
|
@@ -34,10 +34,44 @@ import { forwardRef } from "react";
|
|
|
34
34
|
import { TextField } from "@mui/material";
|
|
35
35
|
import { styled } from "@mui/system";
|
|
36
36
|
import { Controller } from "react-hook-form";
|
|
37
|
-
const StyledTextField = styled(TextField)(({ theme }) => {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
const StyledTextField = styled(TextField)(({ theme }) => ({
|
|
38
|
+
"& .MuiInputBase-root": {
|
|
39
|
+
maxHeight: "34px",
|
|
40
|
+
padding: "8px 10px",
|
|
41
|
+
borderRadius: "10px",
|
|
42
|
+
display: "flex",
|
|
43
|
+
alignItems: "center",
|
|
44
|
+
fontSize: "14px"
|
|
45
|
+
},
|
|
46
|
+
"& .MuiInputBase-input": {
|
|
47
|
+
padding: "0 !important",
|
|
48
|
+
height: "18px",
|
|
49
|
+
display: "flex",
|
|
50
|
+
alignItems: "center",
|
|
51
|
+
marginTop: "-4px"
|
|
52
|
+
},
|
|
53
|
+
"& .MuiInputLabel-root": {
|
|
54
|
+
top: "50%",
|
|
55
|
+
transform: "translate(14px, -50%)",
|
|
56
|
+
"&.MuiInputLabel-shrink": {
|
|
57
|
+
transform: "translate(1px, -200%) scale(0.75)",
|
|
58
|
+
fontSize: "16px !important",
|
|
59
|
+
"> legend": {
|
|
60
|
+
display: "none"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
"& .MuiInputLabel-root.Mui-error": {
|
|
65
|
+
top: "25%"
|
|
66
|
+
},
|
|
67
|
+
"& .MuiInputBase-root > fieldset > legend": {
|
|
68
|
+
display: "none"
|
|
69
|
+
},
|
|
70
|
+
"& .MuiOutlinedInput-notchedOutline": {
|
|
71
|
+
border: "0.7px solid",
|
|
72
|
+
borderColor: "#e0e0e0"
|
|
73
|
+
}
|
|
74
|
+
}));
|
|
41
75
|
const Input = forwardRef((_a, ref) => {
|
|
42
76
|
var _b = _a, {
|
|
43
77
|
type = "text",
|
|
@@ -134,4 +168,4 @@ const Input = forwardRef((_a, ref) => {
|
|
|
134
168
|
export {
|
|
135
169
|
Input as I
|
|
136
170
|
};
|
|
137
|
-
//# sourceMappingURL=Input-
|
|
171
|
+
//# sourceMappingURL=Input-DFHs7cJ_.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input-DFHs7cJ_.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { TextField, TextFieldProps } from '@mui/material';\nimport { styled } from '@mui/system';\nimport { Controller, Control, RegisterOptions } from 'react-hook-form';\n\n\n\n\ninterface BaseInputProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'variant' | 'type' | 'inputProps' | 'slotProps' | 'error' | 'helperText'> {\n type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color';\n variant?: 'outlined' | 'filled' | 'standard';\n min?: number;\n max?: number;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>; \n slotProps?: TextFieldProps['slotProps']; \n disabled?: boolean;\n readOnly?: boolean;\n error?: boolean;\n helperText?: string;\n}\n\ninterface RHFInputProps extends BaseInputProps {\n name: string;\n control: Control<any>;\n validation?: RegisterOptions;\n value?: string | number;\n onChange?: (value: string | number) => void;\n}\n\ninterface StandardInputPropsWithOptionalName extends BaseInputProps {\n name?: string; \n control?: never;\n validation?: never;\n value: string | number;\n onChange: (value: string | number) => void;\n}\n\nexport type InputProps = RHFInputProps | StandardInputPropsWithOptionalName;\n\n\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n }\n },\n '& .MuiInputLabel-root.Mui-error': {\n top: '25%'\n \n },\n '& .MuiInputBase-root > fieldset > legend':{\n display: 'none',\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(({\n type = 'text',\n variant = 'outlined',\n min,\n max,\n inputProps: customInputProps, \n slotProps: customSlotProps, \n \n value, \n onChange,\n ...rest \n}, ref) => {\n const isRHFMode = 'control' in rest && rest.control !== undefined;\n\n \n const htmlInputProps: React.InputHTMLAttributes<HTMLInputElement> = {\n ...customInputProps, \n };\n\n if (type === 'number') {\n htmlInputProps.min = min !== undefined ? min : Number.NEGATIVE_INFINITY;\n if (max !== undefined) {\n htmlInputProps.max = max;\n }\n }\n\n \n const finalSlotProps: TextFieldProps['slotProps'] = {\n ...customSlotProps,\n htmlInput: {\n ...customSlotProps?.htmlInput,\n ...htmlInputProps,\n },\n };\n\n \n const handleChangeInternal = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, rhfOnChange?: (...event: any[]) => void) => {\n const rawValue = event.target.value;\n let newValue: string | number;\n\n if (type === 'number') {\n newValue = rawValue === '' || rawValue === '-' ? rawValue : parseFloat(rawValue);\n \n if (isNaN(newValue as number) && rawValue !== '' && rawValue !== '-') newValue = rawValue;\n } else {\n newValue = rawValue;\n }\n\n if (isRHFMode) {\n rhfOnChange?.(newValue); \n } else {\n \n (onChange as (value: string | number) => void)?.(newValue); \n }\n };\n\n \n if (isRHFMode) {\n const rhfProps = rest as RHFInputProps;\n return (\n <Controller\n name={rhfProps.name}\n control={rhfProps.control}\n rules={rhfProps.validation}\n render={({ field, fieldState: { error } }) => {\n return (\n <StyledTextField\n fullWidth={true}\n value={field.value ?? ''}\n onChange={(e) => handleChangeInternal(e, field.onChange)} \n onBlur={field.onBlur}\n type={type}\n variant={variant}\n slotProps={finalSlotProps} \n inputRef={field.ref}\n error={!!error}\n helperText={error?.message}\n {...rest}\n />\n );\n }}\n />\n );\n } else {\n \n const standardProps = rest as StandardInputPropsWithOptionalName;\n return (\n <StyledTextField\n fullWidth={true}\n name={standardProps.name} \n value={value ?? ''} \n onChange={(e) => handleChangeInternal(e)} \n type={type}\n variant={variant}\n slotProps={finalSlotProps} \n inputRef={ref} \n error={standardProps.error}\n helperText={standardProps.helperText}\n {...rest} \n />\n );\n }\n});\n\nexport default Input;"],"names":["_a"],"mappings":"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"}
|
|
@@ -35,10 +35,44 @@ const React = require("react");
|
|
|
35
35
|
const material = require("@mui/material");
|
|
36
36
|
const system = require("@mui/system");
|
|
37
37
|
const reactHookForm = require("react-hook-form");
|
|
38
|
-
const StyledTextField = system.styled(material.TextField)(({ theme }) => {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
const StyledTextField = system.styled(material.TextField)(({ theme }) => ({
|
|
39
|
+
"& .MuiInputBase-root": {
|
|
40
|
+
maxHeight: "34px",
|
|
41
|
+
padding: "8px 10px",
|
|
42
|
+
borderRadius: "10px",
|
|
43
|
+
display: "flex",
|
|
44
|
+
alignItems: "center",
|
|
45
|
+
fontSize: "14px"
|
|
46
|
+
},
|
|
47
|
+
"& .MuiInputBase-input": {
|
|
48
|
+
padding: "0 !important",
|
|
49
|
+
height: "18px",
|
|
50
|
+
display: "flex",
|
|
51
|
+
alignItems: "center",
|
|
52
|
+
marginTop: "-4px"
|
|
53
|
+
},
|
|
54
|
+
"& .MuiInputLabel-root": {
|
|
55
|
+
top: "50%",
|
|
56
|
+
transform: "translate(14px, -50%)",
|
|
57
|
+
"&.MuiInputLabel-shrink": {
|
|
58
|
+
transform: "translate(1px, -200%) scale(0.75)",
|
|
59
|
+
fontSize: "16px !important",
|
|
60
|
+
"> legend": {
|
|
61
|
+
display: "none"
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
"& .MuiInputLabel-root.Mui-error": {
|
|
66
|
+
top: "25%"
|
|
67
|
+
},
|
|
68
|
+
"& .MuiInputBase-root > fieldset > legend": {
|
|
69
|
+
display: "none"
|
|
70
|
+
},
|
|
71
|
+
"& .MuiOutlinedInput-notchedOutline": {
|
|
72
|
+
border: "0.7px solid",
|
|
73
|
+
borderColor: "#e0e0e0"
|
|
74
|
+
}
|
|
75
|
+
}));
|
|
42
76
|
const Input = React.forwardRef((_a, ref) => {
|
|
43
77
|
var _b = _a, {
|
|
44
78
|
type = "text",
|
|
@@ -133,4 +167,4 @@ const Input = React.forwardRef((_a, ref) => {
|
|
|
133
167
|
}
|
|
134
168
|
});
|
|
135
169
|
exports.Input = Input;
|
|
136
|
-
//# sourceMappingURL=Input-
|
|
170
|
+
//# sourceMappingURL=Input-c8MwNNPg.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input-c8MwNNPg.cjs","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { TextField, TextFieldProps } from '@mui/material';\nimport { styled } from '@mui/system';\nimport { Controller, Control, RegisterOptions } from 'react-hook-form';\n\n\n\n\ninterface BaseInputProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'variant' | 'type' | 'inputProps' | 'slotProps' | 'error' | 'helperText'> {\n type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color';\n variant?: 'outlined' | 'filled' | 'standard';\n min?: number;\n max?: number;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>; \n slotProps?: TextFieldProps['slotProps']; \n disabled?: boolean;\n readOnly?: boolean;\n error?: boolean;\n helperText?: string;\n}\n\ninterface RHFInputProps extends BaseInputProps {\n name: string;\n control: Control<any>;\n validation?: RegisterOptions;\n value?: string | number;\n onChange?: (value: string | number) => void;\n}\n\ninterface StandardInputPropsWithOptionalName extends BaseInputProps {\n name?: string; \n control?: never;\n validation?: never;\n value: string | number;\n onChange: (value: string | number) => void;\n}\n\nexport type InputProps = RHFInputProps | StandardInputPropsWithOptionalName;\n\n\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n }\n },\n '& .MuiInputLabel-root.Mui-error': {\n top: '25%'\n \n },\n '& .MuiInputBase-root > fieldset > legend':{\n display: 'none',\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(({\n type = 'text',\n variant = 'outlined',\n min,\n max,\n inputProps: customInputProps, \n slotProps: customSlotProps, \n \n value, \n onChange,\n ...rest \n}, ref) => {\n const isRHFMode = 'control' in rest && rest.control !== undefined;\n\n \n const htmlInputProps: React.InputHTMLAttributes<HTMLInputElement> = {\n ...customInputProps, \n };\n\n if (type === 'number') {\n htmlInputProps.min = min !== undefined ? min : Number.NEGATIVE_INFINITY;\n if (max !== undefined) {\n htmlInputProps.max = max;\n }\n }\n\n \n const finalSlotProps: TextFieldProps['slotProps'] = {\n ...customSlotProps,\n htmlInput: {\n ...customSlotProps?.htmlInput,\n ...htmlInputProps,\n },\n };\n\n \n const handleChangeInternal = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, rhfOnChange?: (...event: any[]) => void) => {\n const rawValue = event.target.value;\n let newValue: string | number;\n\n if (type === 'number') {\n newValue = rawValue === '' || rawValue === '-' ? rawValue : parseFloat(rawValue);\n \n if (isNaN(newValue as number) && rawValue !== '' && rawValue !== '-') newValue = rawValue;\n } else {\n newValue = rawValue;\n }\n\n if (isRHFMode) {\n rhfOnChange?.(newValue); \n } else {\n \n (onChange as (value: string | number) => void)?.(newValue); \n }\n };\n\n \n if (isRHFMode) {\n const rhfProps = rest as RHFInputProps;\n return (\n <Controller\n name={rhfProps.name}\n control={rhfProps.control}\n rules={rhfProps.validation}\n render={({ field, fieldState: { error } }) => {\n return (\n <StyledTextField\n fullWidth={true}\n value={field.value ?? ''}\n onChange={(e) => handleChangeInternal(e, field.onChange)} \n onBlur={field.onBlur}\n type={type}\n variant={variant}\n slotProps={finalSlotProps} \n inputRef={field.ref}\n error={!!error}\n helperText={error?.message}\n {...rest}\n />\n );\n }}\n />\n );\n } else {\n \n const standardProps = rest as StandardInputPropsWithOptionalName;\n return (\n <StyledTextField\n fullWidth={true}\n name={standardProps.name} \n value={value ?? ''} \n onChange={(e) => handleChangeInternal(e)} \n type={type}\n variant={variant}\n slotProps={finalSlotProps} \n inputRef={ref} \n error={standardProps.error}\n helperText={standardProps.helperText}\n {...rest} \n />\n );\n }\n});\n\nexport default Input;"],"names":["styled","TextField","forwardRef","jsx","Controller","_a"],"mappings":"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"}
|
|
@@ -86,7 +86,10 @@ const DateTimePicker = (_a) => {
|
|
|
86
86
|
cancelButtonText,
|
|
87
87
|
acceptButtonText,
|
|
88
88
|
minutesStep,
|
|
89
|
-
minTime
|
|
89
|
+
minTime,
|
|
90
|
+
viewRenderers,
|
|
91
|
+
timeSteps,
|
|
92
|
+
ampm
|
|
90
93
|
} = _b, rest = __objRest(_b, [
|
|
91
94
|
"label",
|
|
92
95
|
"selectedDateTime",
|
|
@@ -102,7 +105,10 @@ const DateTimePicker = (_a) => {
|
|
|
102
105
|
"cancelButtonText",
|
|
103
106
|
"acceptButtonText",
|
|
104
107
|
"minutesStep",
|
|
105
|
-
"minTime"
|
|
108
|
+
"minTime",
|
|
109
|
+
"viewRenderers",
|
|
110
|
+
"timeSteps",
|
|
111
|
+
"ampm"
|
|
106
112
|
]);
|
|
107
113
|
var _a2, _b2, _c;
|
|
108
114
|
const [error, setError] = React.useState(null);
|
|
@@ -154,6 +160,8 @@ const DateTimePicker = (_a) => {
|
|
|
154
160
|
readOnly,
|
|
155
161
|
minTime,
|
|
156
162
|
format: inputFormat ? inputFormat : "DD/MM/YYYY HH:mm",
|
|
163
|
+
viewRenderers,
|
|
164
|
+
timeSteps,
|
|
157
165
|
sx: {
|
|
158
166
|
"& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root": {
|
|
159
167
|
maxHeight: "28px",
|
|
@@ -189,7 +197,8 @@ const DateTimePicker = (_a) => {
|
|
|
189
197
|
})
|
|
190
198
|
})
|
|
191
199
|
}),
|
|
192
|
-
localeText: __spreadValues({}, customLocaleText)
|
|
200
|
+
localeText: __spreadValues({}, customLocaleText),
|
|
201
|
+
ampm: false
|
|
193
202
|
}, rest)
|
|
194
203
|
)
|
|
195
204
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimePicker.cjs","sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField, TextFieldProps } from '@mui/material';\n\n// Define las props para el DateTimePicker\nexport interface DateTimePickerProps {\n label: string;\n selectedDateTime: Dayjs | null;\n onDateTimeChange: (dateTime: Dayjs | null) => void;\n minDateTime?: Dayjs;\n maxDateTime?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n inputFormat?: string;\n slotProps?: any;\n clearButtonText?: string;\n cancelButtonText?: string;\n acceptButtonText?: string;\n minutesStep?: number;\n minTime?: Dayjs;\n customClass?: string;\n}\n\n// 1. Crear un componente estilizado para el TextField\n// Este componente tendrá los mismos estilos de altura, padding y label que tu Input.tsx\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Custom Material UI DateTimePicker component.\n * Allows selecting a date and time, and updates a Dayjs state.\n */\nexport const DateTimePicker: React.FC<DateTimePickerProps> = ({\n label,\n selectedDateTime,\n onDateTimeChange,\n minDateTime,\n maxDateTime,\n disabled,\n readOnly,\n customClass= '',\n inputFormat,\n slotProps,\n clearButtonText,\n cancelButtonText,\n acceptButtonText,\n minutesStep,\n minTime,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate':\n case 'invalidDate': {\n return 'Formato de fecha/hora inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas/horas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas/horas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n const customLocaleText = useMemo(() => {\n const text: Record<string, string> = {};\n if (clearButtonText) text.clearButtonLabel = clearButtonText;\n if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;\n if (acceptButtonText) text.okButtonLabel = acceptButtonText;\n return text;\n }, [clearButtonText, cancelButtonText, acceptButtonText]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs}>\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDateTimePicker\n className={customClass}\n label={label}\n value={selectedDateTime}\n onChange={onDateTimeChange}\n minDateTime={minDateTime}\n maxDateTime={maxDateTime}\n minutesStep={minutesStep}\n disabled={disabled}\n readOnly={readOnly}\n minTime={minTime}\n format={inputFormat ? inputFormat: 'DD/MM/YYYY HH:mm'}\n sx={{\n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px',\n },\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n }}\n slotProps={{\n ...slotProps,\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n localeText={{ ...customLocaleText }}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DateTimePicker;"],"names":["styled","TextField","useMemo","jsx","LocalizationProvider","AdapterDayjs","Box","MuiDateTimePicker","_a","_b"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"DateTimePicker.cjs","sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField, TextFieldProps } from '@mui/material';\n\n// Define las props para el DateTimePicker\nexport interface DateTimePickerProps {\n label: string;\n selectedDateTime: Dayjs | null;\n onDateTimeChange: (dateTime: Dayjs | null) => void;\n minDateTime?: Dayjs;\n maxDateTime?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n inputFormat?: string;\n slotProps?: any;\n clearButtonText?: string;\n cancelButtonText?: string;\n acceptButtonText?: string;\n minutesStep?: number;\n minTime?: Dayjs;\n customClass?: string;\n viewRenderers?: any\n timeSteps?: any\n ampm?: boolean;\n}\n\n// 1. Crear un componente estilizado para el TextField\n// Este componente tendrá los mismos estilos de altura, padding y label que tu Input.tsx\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Custom Material UI DateTimePicker component.\n * Allows selecting a date and time, and updates a Dayjs state.\n */\nexport const DateTimePicker: React.FC<DateTimePickerProps> = ({\n label,\n selectedDateTime,\n onDateTimeChange,\n minDateTime,\n maxDateTime,\n disabled,\n readOnly,\n customClass= '',\n inputFormat,\n slotProps,\n clearButtonText,\n cancelButtonText,\n acceptButtonText,\n minutesStep,\n minTime,\n viewRenderers,\n timeSteps,\n ampm,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate':\n case 'invalidDate': {\n return 'Formato de fecha/hora inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas/horas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas/horas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n const customLocaleText = useMemo(() => {\n const text: Record<string, string> = {};\n if (clearButtonText) text.clearButtonLabel = clearButtonText;\n if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;\n if (acceptButtonText) text.okButtonLabel = acceptButtonText;\n return text;\n }, [clearButtonText, cancelButtonText, acceptButtonText]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs}>\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDateTimePicker\n className={customClass}\n label={label}\n value={selectedDateTime}\n onChange={onDateTimeChange}\n minDateTime={minDateTime}\n maxDateTime={maxDateTime}\n minutesStep={minutesStep}\n disabled={disabled}\n readOnly={readOnly}\n minTime={minTime}\n format={inputFormat ? inputFormat: 'DD/MM/YYYY HH:mm'}\n viewRenderers={viewRenderers}\n timeSteps={timeSteps}\n sx={{\n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px',\n },\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n }}\n slotProps={{\n ...slotProps,\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n localeText={{ ...customLocaleText }}\n ampm={false}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DateTimePicker;"],"names":["styled","TextField","useMemo","jsx","LocalizationProvider","AdapterDayjs","Box","MuiDateTimePicker","_a","_b"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,kBAAkBA,OAAAA,OAAOC,SAAAA,SAAS,EAAE,CAAC,EAAE,aAAa;AAAA,EACxD,wBAAwB;AAAA,IACtB,WAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAc;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA;AAAA,EAEZ,yBAAyB;AAAA,IACvB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,yBAAyB;AAAA,IACvB,KAAK;AAAA,IACL,WAAW;AAAA,IACX,0BAA0B;AAAA,MACxB,WAAW;AAAA,MACX,UAAU;AAAA,MACV,YAAY;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,sCAAsC;AAAA,IACpC,QAAQ;AAAA,IACR,aAAa;AAAA,EAAA;AAEjB,EAAE;AAMK,MAAM,iBAAgD,CAAC,OAoBxD;AApBwD,eAC5D;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAlB4D,IAmBzD,iBAnByD,IAmBzD;AAAA,IAlBH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;;AAGA,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAqC,IAAI;AAEzE,QAAM,eAAeC,MAAAA,QAAQ,MAAM;AACjC,YAAQ,OAAA;AAAA,MACN,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK,eAAe;AAClB,eAAO;AAAA,MACT;AAAA,MACA,KAAK,iBAAiB;AACpB,eAAO;AAAA,MACT;AAAA,MACA,KAAK,eAAe;AAClB,eAAO;AAAA,MACT;AAAA,MACA,SAAS;AACP,eAAO;AAAA,MACT;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,mBAAmBA,MAAAA,QAAQ,MAAM;AACrC,UAAM,OAA+B,CAAA;AACrC,QAAI,sBAAsB,mBAAmB;AAC7C,QAAI,uBAAuB,oBAAoB;AAC/C,QAAI,uBAAuB,gBAAgB;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,kBAAkB,gBAAgB,CAAC;AAExD,SACEC,2BAAAA,IAACC,qBAAAA,sBAAA,EAAqB,aAAaC,aAAAA,cACjC,UAAAF,2BAAAA;AAAAA,IAACG,SAAAA;AAAAA,IAAA;AAAA,MACG,IAAI;AAAA,QACA,OAAO;AAAA,QACP,SAAS;AAAA,QACT,cAAc;AAAA,QACd,WAAW;AAAA,MAAA;AAAA,MAInB,UAAAH,2BAAAA;AAAAA,QAACI,iBAAAA;AAAAA,QAAA;AAAA,UACC,WAAW;AAAA,UACX;AAAA,UACA,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,QAAQ,cAAc,cAAa;AAAA,UACnC;AAAA,UACA;AAAA,UACA,IAAI;AAAA,YACF,8DAA8D;AAAA,cAC5D,WAAW;AAAA,cACX,cAAc;AAAA,YAAA;AAAA,YAEhB,yBAAyB;AAAA;AAAA,cAEvB,KAAK;AAAA,cACL,WAAW;AAAA;AAAA,cAGX,0BAA0B;AAAA,gBACxB,WAAW;AAAA;AAAA,gBACX,UAAU;AAAA,gBACV,YAAY;AAAA,kBACV,SAAS;AAAA;AAAA,gBAAA;AAAA,cACX;AAAA,YACF;AAAA,YAEF,mDAAkD;AAAA,cAChD,SAAS;AAAA;AAAA,YAAA;AAAA,UACX;AAAA,UAEF,WAAW,iCACN,YADM;AAAA;AAAA,YAGT,WAAW,iCACN,uCAAW,YADL;AAAA,cAET,YAAY,kBAAgBC,MAAA,uCAAW,cAAX,gBAAAA,IAAsB;AAAA,cAClD,OAAO,CAAC,CAAC,kBAAgBC,MAAA,uCAAW,cAAX,gBAAAA,IAAsB;AAAA,cAC/C,YAAY,kCACP,4CAAW,cAAX,mBAAsB,aADf;AAAA,gBAEV,gBAAgB;AAAA,cAAA;AAAA,YAClB;AAAA,UACF;AAAA,UAEF,YAAY,mBAAK;AAAA,UACjB,MAAM;AAAA,WACF;AAAA,MAAA;AAAA,IACN;AAAA,EAAA,GAEF;AAEJ;;"}
|
|
@@ -84,7 +84,10 @@ const DateTimePicker = (_a) => {
|
|
|
84
84
|
cancelButtonText,
|
|
85
85
|
acceptButtonText,
|
|
86
86
|
minutesStep,
|
|
87
|
-
minTime
|
|
87
|
+
minTime,
|
|
88
|
+
viewRenderers,
|
|
89
|
+
timeSteps,
|
|
90
|
+
ampm
|
|
88
91
|
} = _b, rest = __objRest(_b, [
|
|
89
92
|
"label",
|
|
90
93
|
"selectedDateTime",
|
|
@@ -100,7 +103,10 @@ const DateTimePicker = (_a) => {
|
|
|
100
103
|
"cancelButtonText",
|
|
101
104
|
"acceptButtonText",
|
|
102
105
|
"minutesStep",
|
|
103
|
-
"minTime"
|
|
106
|
+
"minTime",
|
|
107
|
+
"viewRenderers",
|
|
108
|
+
"timeSteps",
|
|
109
|
+
"ampm"
|
|
104
110
|
]);
|
|
105
111
|
var _a2, _b2, _c;
|
|
106
112
|
const [error, setError] = React__default.useState(null);
|
|
@@ -152,6 +158,8 @@ const DateTimePicker = (_a) => {
|
|
|
152
158
|
readOnly,
|
|
153
159
|
minTime,
|
|
154
160
|
format: inputFormat ? inputFormat : "DD/MM/YYYY HH:mm",
|
|
161
|
+
viewRenderers,
|
|
162
|
+
timeSteps,
|
|
155
163
|
sx: {
|
|
156
164
|
"& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root": {
|
|
157
165
|
maxHeight: "28px",
|
|
@@ -187,7 +195,8 @@ const DateTimePicker = (_a) => {
|
|
|
187
195
|
})
|
|
188
196
|
})
|
|
189
197
|
}),
|
|
190
|
-
localeText: __spreadValues({}, customLocaleText)
|
|
198
|
+
localeText: __spreadValues({}, customLocaleText),
|
|
199
|
+
ampm: false
|
|
191
200
|
}, rest)
|
|
192
201
|
)
|
|
193
202
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimePicker.js","sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField, TextFieldProps } from '@mui/material';\n\n// Define las props para el DateTimePicker\nexport interface DateTimePickerProps {\n label: string;\n selectedDateTime: Dayjs | null;\n onDateTimeChange: (dateTime: Dayjs | null) => void;\n minDateTime?: Dayjs;\n maxDateTime?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n inputFormat?: string;\n slotProps?: any;\n clearButtonText?: string;\n cancelButtonText?: string;\n acceptButtonText?: string;\n minutesStep?: number;\n minTime?: Dayjs;\n customClass?: string;\n}\n\n// 1. Crear un componente estilizado para el TextField\n// Este componente tendrá los mismos estilos de altura, padding y label que tu Input.tsx\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Custom Material UI DateTimePicker component.\n * Allows selecting a date and time, and updates a Dayjs state.\n */\nexport const DateTimePicker: React.FC<DateTimePickerProps> = ({\n label,\n selectedDateTime,\n onDateTimeChange,\n minDateTime,\n maxDateTime,\n disabled,\n readOnly,\n customClass= '',\n inputFormat,\n slotProps,\n clearButtonText,\n cancelButtonText,\n acceptButtonText,\n minutesStep,\n minTime,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate':\n case 'invalidDate': {\n return 'Formato de fecha/hora inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas/horas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas/horas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n const customLocaleText = useMemo(() => {\n const text: Record<string, string> = {};\n if (clearButtonText) text.clearButtonLabel = clearButtonText;\n if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;\n if (acceptButtonText) text.okButtonLabel = acceptButtonText;\n return text;\n }, [clearButtonText, cancelButtonText, acceptButtonText]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs}>\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDateTimePicker\n className={customClass}\n label={label}\n value={selectedDateTime}\n onChange={onDateTimeChange}\n minDateTime={minDateTime}\n maxDateTime={maxDateTime}\n minutesStep={minutesStep}\n disabled={disabled}\n readOnly={readOnly}\n minTime={minTime}\n format={inputFormat ? inputFormat: 'DD/MM/YYYY HH:mm'}\n sx={{\n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px',\n },\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n }}\n slotProps={{\n ...slotProps,\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n localeText={{ ...customLocaleText }}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DateTimePicker;"],"names":["React","MuiDateTimePicker","_a","_b"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"DateTimePicker.js","sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField, TextFieldProps } from '@mui/material';\n\n// Define las props para el DateTimePicker\nexport interface DateTimePickerProps {\n label: string;\n selectedDateTime: Dayjs | null;\n onDateTimeChange: (dateTime: Dayjs | null) => void;\n minDateTime?: Dayjs;\n maxDateTime?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n inputFormat?: string;\n slotProps?: any;\n clearButtonText?: string;\n cancelButtonText?: string;\n acceptButtonText?: string;\n minutesStep?: number;\n minTime?: Dayjs;\n customClass?: string;\n viewRenderers?: any\n timeSteps?: any\n ampm?: boolean;\n}\n\n// 1. Crear un componente estilizado para el TextField\n// Este componente tendrá los mismos estilos de altura, padding y label que tu Input.tsx\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Custom Material UI DateTimePicker component.\n * Allows selecting a date and time, and updates a Dayjs state.\n */\nexport const DateTimePicker: React.FC<DateTimePickerProps> = ({\n label,\n selectedDateTime,\n onDateTimeChange,\n minDateTime,\n maxDateTime,\n disabled,\n readOnly,\n customClass= '',\n inputFormat,\n slotProps,\n clearButtonText,\n cancelButtonText,\n acceptButtonText,\n minutesStep,\n minTime,\n viewRenderers,\n timeSteps,\n ampm,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate':\n case 'invalidDate': {\n return 'Formato de fecha/hora inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas/horas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas/horas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n const customLocaleText = useMemo(() => {\n const text: Record<string, string> = {};\n if (clearButtonText) text.clearButtonLabel = clearButtonText;\n if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;\n if (acceptButtonText) text.okButtonLabel = acceptButtonText;\n return text;\n }, [clearButtonText, cancelButtonText, acceptButtonText]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs}>\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDateTimePicker\n className={customClass}\n label={label}\n value={selectedDateTime}\n onChange={onDateTimeChange}\n minDateTime={minDateTime}\n maxDateTime={maxDateTime}\n minutesStep={minutesStep}\n disabled={disabled}\n readOnly={readOnly}\n minTime={minTime}\n format={inputFormat ? inputFormat: 'DD/MM/YYYY HH:mm'}\n viewRenderers={viewRenderers}\n timeSteps={timeSteps}\n sx={{\n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px',\n },\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n }}\n slotProps={{\n ...slotProps,\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n localeText={{ ...customLocaleText }}\n ampm={false}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DateTimePicker;"],"names":["React","MuiDateTimePicker","_a","_b"],"mappings":"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"}
|
|
@@ -23,7 +23,7 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
23
23
|
const React = require("react");
|
|
24
24
|
const material = require("@mui/material");
|
|
25
25
|
const DatePicker = require("@mui/x-date-pickers/DatePicker");
|
|
26
|
-
const Input = require("../../Input-
|
|
26
|
+
const Input = require("../../Input-c8MwNNPg.cjs");
|
|
27
27
|
const Select = require("../../Select-BO2N56sm.cjs");
|
|
28
28
|
const DatePicker$1 = require("../../DatePicker-BoqxWAhj.cjs");
|
|
29
29
|
const InputGroup = ({ children }) => {
|
|
@@ -21,7 +21,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
21
21
|
import { Children, isValidElement, cloneElement } from "react";
|
|
22
22
|
import { Box, TextField, Select } from "@mui/material";
|
|
23
23
|
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
|
|
24
|
-
import { I as Input } from "../../Input-
|
|
24
|
+
import { I as Input } from "../../Input-DFHs7cJ_.js";
|
|
25
25
|
import { S as Select$1 } from "../../Select-BcLkyHSE.js";
|
|
26
26
|
import { D as DatePicker$1 } from "../../DatePicker-BSNboVhN.js";
|
|
27
27
|
const InputGroup = ({ children }) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@soyfri/shared-library",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.9",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"author": "",
|
|
10
10
|
"license": "ISC",
|
|
11
11
|
"description": "",
|
|
12
|
-
"
|
|
12
|
+
"dependencies": {
|
|
13
13
|
"@emotion/react": "^11.14.0",
|
|
14
14
|
"@emotion/styled": "^11.14.0",
|
|
15
15
|
"@mui/icons-material": "^7.1.0",
|
|
@@ -17,17 +17,15 @@
|
|
|
17
17
|
"@mui/material": "^7.1.2",
|
|
18
18
|
"@mui/x-date-pickers": "^8.5.3",
|
|
19
19
|
"@mui/x-date-pickers-pro": "^8.5.3",
|
|
20
|
-
"react": "^19.1.0",
|
|
21
|
-
"react-dom": "^19.1.0",
|
|
22
|
-
"react-hook-form": "^7.62.0"
|
|
23
|
-
},
|
|
24
|
-
"dependencies": {
|
|
25
20
|
"@storybook/test": "^8.6.14",
|
|
26
21
|
"@tailwindcss/cli": "^4.1.7",
|
|
27
22
|
"@vitejs/plugin-react": "^5.0.3",
|
|
28
23
|
"autoprefixer": "^10.4.21",
|
|
29
24
|
"dayjs": "^1.11.13",
|
|
30
25
|
"postcss": "^8.5.3",
|
|
26
|
+
"react": "^19.1.0",
|
|
27
|
+
"react-dom": "^19.1.0",
|
|
28
|
+
"react-hook-form": "^7.62.0",
|
|
31
29
|
"tailwindcss": "^4.1.7"
|
|
32
30
|
},
|
|
33
31
|
"overrides": {
|
package/Input-C__f2Up9.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Input-C__f2Up9.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { TextField, TextFieldProps } from '@mui/material';\nimport { styled } from '@mui/system';\nimport { Controller, Control, RegisterOptions } from 'react-hook-form';\n\n\n\n\ninterface BaseInputProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'variant' | 'type' | 'inputProps' | 'slotProps' | 'error' | 'helperText'> {\n type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color';\n variant?: 'outlined' | 'filled' | 'standard';\n min?: number;\n max?: number;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n slotProps?: TextFieldProps['slotProps'];\n disabled?: boolean;\n readOnly?: boolean;\n error?: boolean;\n helperText?: string;\n}\n\ninterface RHFInputProps extends BaseInputProps {\n name: string;\n control: Control<any>;\n validation?: RegisterOptions;\n value?: string | number;\n onChange?: (value: string | number) => void;\n}\n\ninterface StandardInputPropsWithOptionalName extends BaseInputProps {\n name?: string;\n control?: never;\n validation?: never;\n value: string | number;\n onChange: (value: string | number) => void;\n}\n\nexport type InputProps = RHFInputProps | StandardInputPropsWithOptionalName;\n\n\nconst StyledTextField = styled(TextField)(({ theme }) => (\n console.log(theme.components?.MuiTextField?.styleOverrides?.root),\n {\n // '& .MuiInputBase-root': {\n // maxHeight: '34px',\n // padding: '8px 10px',\n // borderRadius: '10px',\n // display: 'flex',\n // alignItems: 'center',\n // fontSize: '14px',\n // },\n // '& .MuiInputBase-input': {\n // padding: '0 !important',\n // height: '18px',\n // display: 'flex',\n // alignItems: 'center',\n // marginTop: '-4px'\n // },\n // '& .MuiInputLabel-root': {\n // top: '50%',\n // transform: 'translate(14px, -50%)',\n // '&.MuiInputLabel-shrink': {\n // transform: 'translate(1px, -200%) scale(0.75)',\n // fontSize: '16px !important',\n // '> legend': {\n // display: 'none',\n // }\n // }\n // },\n // '& .MuiInputLabel-root.Mui-error': {\n // top: '25%'\n\n // },\n // '& .MuiInputBase-root > fieldset > legend': {\n // display: 'none',\n // },\n // '& .MuiOutlinedInput-notchedOutline': {\n // border: '0.7px solid',\n // borderColor: '#e0e0e0',\n // },\n ...theme.components?.MuiTextField?.styleOverrides?.root,\n }));\n\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(({\n type = 'text',\n variant = 'outlined',\n min,\n max,\n inputProps: customInputProps,\n slotProps: customSlotProps,\n\n value,\n onChange,\n ...rest\n}, ref) => {\n const isRHFMode = 'control' in rest && rest.control !== undefined;\n\n\n const htmlInputProps: React.InputHTMLAttributes<HTMLInputElement> = {\n ...customInputProps,\n };\n\n if (type === 'number') {\n htmlInputProps.min = min !== undefined ? min : Number.NEGATIVE_INFINITY;\n if (max !== undefined) {\n htmlInputProps.max = max;\n }\n }\n\n\n const finalSlotProps: TextFieldProps['slotProps'] = {\n ...customSlotProps,\n htmlInput: {\n ...customSlotProps?.htmlInput,\n ...htmlInputProps,\n },\n };\n\n\n const handleChangeInternal = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, rhfOnChange?: (...event: any[]) => void) => {\n const rawValue = event.target.value;\n let newValue: string | number;\n\n if (type === 'number') {\n newValue = rawValue === '' || rawValue === '-' ? rawValue : parseFloat(rawValue);\n\n if (isNaN(newValue as number) && rawValue !== '' && rawValue !== '-') newValue = rawValue;\n } else {\n newValue = rawValue;\n }\n\n if (isRHFMode) {\n rhfOnChange?.(newValue);\n } else {\n\n (onChange as (value: string | number) => void)?.(newValue);\n }\n };\n\n\n if (isRHFMode) {\n const rhfProps = rest as RHFInputProps;\n return (\n <Controller\n name={rhfProps.name}\n control={rhfProps.control}\n rules={rhfProps.validation}\n render={({ field, fieldState: { error } }) => {\n return (\n <StyledTextField\n fullWidth={true}\n value={field.value ?? ''}\n onChange={(e) => handleChangeInternal(e, field.onChange)}\n onBlur={field.onBlur}\n type={type}\n variant={variant}\n slotProps={finalSlotProps}\n inputRef={field.ref}\n error={!!error}\n helperText={error?.message}\n {...rest}\n />\n );\n }}\n />\n );\n } else {\n\n const standardProps = rest as StandardInputPropsWithOptionalName;\n return (\n <StyledTextField\n fullWidth={true}\n name={standardProps.name}\n value={value ?? ''}\n onChange={(e) => handleChangeInternal(e)}\n type={type}\n variant={variant}\n slotProps={finalSlotProps}\n inputRef={ref}\n error={standardProps.error}\n helperText={standardProps.helperText}\n {...rest}\n />\n );\n }\n});\n\nexport default Input;"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,kBAAkB,OAAO,SAAS,EAAE,CAAC,EAAE,MAAA,MAAM;;AACjD,iBAAQ,KAAI,uBAAM,eAAN,mBAAkB,iBAAlB,mBAAgC,mBAAhC,mBAAgD,IAAI,GAChE,oBAsCK,uBAAM,eAAN,mBAAkB,iBAAlB,mBAAgC,mBAAhC,mBAAgD;AAAA,CACnD;AAGG,MAAM,QAAQ,WAAyC,CAAC,IAW5D,QAAQ;AAXoD,eAC7D;AAAA,WAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,IAEX;AAAA,IACA;AAAA,MAT6D,IAU1D,iBAV0D,IAU1D;AAAA,IATH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA;AAGA,QAAM,YAAY,aAAa,QAAQ,KAAK,YAAY;AAGxD,QAAM,iBAA8D,mBAC/D;AAGL,MAAI,SAAS,UAAU;AACrB,mBAAe,MAAM,QAAQ,SAAY,MAAM,OAAO;AACtD,QAAI,QAAQ,QAAW;AACrB,qBAAe,MAAM;AAAA,IACvB;AAAA,EACF;AAGA,QAAM,iBAA8C,iCAC/C,kBAD+C;AAAA,IAElD,WAAW,kCACN,mDAAiB,YACjB;AAAA,EACL;AAIF,QAAM,uBAAuB,CAAC,OAAkE,gBAA4C;AAC1I,UAAM,WAAW,MAAM,OAAO;AAC9B,QAAI;AAEJ,QAAI,SAAS,UAAU;AACrB,iBAAW,aAAa,MAAM,aAAa,MAAM,WAAW,WAAW,QAAQ;AAE/E,UAAI,MAAM,QAAkB,KAAK,aAAa,MAAM,aAAa,IAAK,YAAW;AAAA,IACnF,OAAO;AACL,iBAAW;AAAA,IACb;AAEA,QAAI,WAAW;AACb,iDAAc;AAAA,IAChB,OAAO;AAEJ,2CAAgD;AAAA,IACnD;AAAA,EACF;AAGA,MAAI,WAAW;AACb,UAAM,WAAW;AACjB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,SAAS;AAAA,QACf,SAAS,SAAS;AAAA,QAClB,OAAO,SAAS;AAAA,QAChB,QAAQ,CAAC,EAAE,OAAO,YAAY,EAAE,MAAA,QAAc;;AAC5C,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,cACX,QAAOA,MAAA,MAAM,UAAN,OAAAA,MAAe;AAAA,cACtB,UAAU,CAAC,MAAM,qBAAqB,GAAG,MAAM,QAAQ;AAAA,cACvD,QAAQ,MAAM;AAAA,cACd;AAAA,cACA;AAAA,cACA,WAAW;AAAA,cACX,UAAU,MAAM;AAAA,cAChB,OAAO,CAAC,CAAC;AAAA,cACT,YAAY,+BAAO;AAAA,eACf;AAAA,UAAA;AAAA,QAGV;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,OAAO;AAEL,UAAM,gBAAgB;AACtB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,MAAM,cAAc;AAAA,QACpB,OAAO,wBAAS;AAAA,QAChB,UAAU,CAAC,MAAM,qBAAqB,CAAC;AAAA,QACvC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO,cAAc;AAAA,QACrB,YAAY,cAAc;AAAA,SACtB;AAAA,IAAA;AAAA,EAGV;AACF,CAAC;"}
|
package/Input-CwSfAvKP.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Input-CwSfAvKP.cjs","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { TextField, TextFieldProps } from '@mui/material';\nimport { styled } from '@mui/system';\nimport { Controller, Control, RegisterOptions } from 'react-hook-form';\n\n\n\n\ninterface BaseInputProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'variant' | 'type' | 'inputProps' | 'slotProps' | 'error' | 'helperText'> {\n type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color';\n variant?: 'outlined' | 'filled' | 'standard';\n min?: number;\n max?: number;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n slotProps?: TextFieldProps['slotProps'];\n disabled?: boolean;\n readOnly?: boolean;\n error?: boolean;\n helperText?: string;\n}\n\ninterface RHFInputProps extends BaseInputProps {\n name: string;\n control: Control<any>;\n validation?: RegisterOptions;\n value?: string | number;\n onChange?: (value: string | number) => void;\n}\n\ninterface StandardInputPropsWithOptionalName extends BaseInputProps {\n name?: string;\n control?: never;\n validation?: never;\n value: string | number;\n onChange: (value: string | number) => void;\n}\n\nexport type InputProps = RHFInputProps | StandardInputPropsWithOptionalName;\n\n\nconst StyledTextField = styled(TextField)(({ theme }) => (\n console.log(theme.components?.MuiTextField?.styleOverrides?.root),\n {\n // '& .MuiInputBase-root': {\n // maxHeight: '34px',\n // padding: '8px 10px',\n // borderRadius: '10px',\n // display: 'flex',\n // alignItems: 'center',\n // fontSize: '14px',\n // },\n // '& .MuiInputBase-input': {\n // padding: '0 !important',\n // height: '18px',\n // display: 'flex',\n // alignItems: 'center',\n // marginTop: '-4px'\n // },\n // '& .MuiInputLabel-root': {\n // top: '50%',\n // transform: 'translate(14px, -50%)',\n // '&.MuiInputLabel-shrink': {\n // transform: 'translate(1px, -200%) scale(0.75)',\n // fontSize: '16px !important',\n // '> legend': {\n // display: 'none',\n // }\n // }\n // },\n // '& .MuiInputLabel-root.Mui-error': {\n // top: '25%'\n\n // },\n // '& .MuiInputBase-root > fieldset > legend': {\n // display: 'none',\n // },\n // '& .MuiOutlinedInput-notchedOutline': {\n // border: '0.7px solid',\n // borderColor: '#e0e0e0',\n // },\n ...theme.components?.MuiTextField?.styleOverrides?.root,\n }));\n\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(({\n type = 'text',\n variant = 'outlined',\n min,\n max,\n inputProps: customInputProps,\n slotProps: customSlotProps,\n\n value,\n onChange,\n ...rest\n}, ref) => {\n const isRHFMode = 'control' in rest && rest.control !== undefined;\n\n\n const htmlInputProps: React.InputHTMLAttributes<HTMLInputElement> = {\n ...customInputProps,\n };\n\n if (type === 'number') {\n htmlInputProps.min = min !== undefined ? min : Number.NEGATIVE_INFINITY;\n if (max !== undefined) {\n htmlInputProps.max = max;\n }\n }\n\n\n const finalSlotProps: TextFieldProps['slotProps'] = {\n ...customSlotProps,\n htmlInput: {\n ...customSlotProps?.htmlInput,\n ...htmlInputProps,\n },\n };\n\n\n const handleChangeInternal = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, rhfOnChange?: (...event: any[]) => void) => {\n const rawValue = event.target.value;\n let newValue: string | number;\n\n if (type === 'number') {\n newValue = rawValue === '' || rawValue === '-' ? rawValue : parseFloat(rawValue);\n\n if (isNaN(newValue as number) && rawValue !== '' && rawValue !== '-') newValue = rawValue;\n } else {\n newValue = rawValue;\n }\n\n if (isRHFMode) {\n rhfOnChange?.(newValue);\n } else {\n\n (onChange as (value: string | number) => void)?.(newValue);\n }\n };\n\n\n if (isRHFMode) {\n const rhfProps = rest as RHFInputProps;\n return (\n <Controller\n name={rhfProps.name}\n control={rhfProps.control}\n rules={rhfProps.validation}\n render={({ field, fieldState: { error } }) => {\n return (\n <StyledTextField\n fullWidth={true}\n value={field.value ?? ''}\n onChange={(e) => handleChangeInternal(e, field.onChange)}\n onBlur={field.onBlur}\n type={type}\n variant={variant}\n slotProps={finalSlotProps}\n inputRef={field.ref}\n error={!!error}\n helperText={error?.message}\n {...rest}\n />\n );\n }}\n />\n );\n } else {\n\n const standardProps = rest as StandardInputPropsWithOptionalName;\n return (\n <StyledTextField\n fullWidth={true}\n name={standardProps.name}\n value={value ?? ''}\n onChange={(e) => handleChangeInternal(e)}\n type={type}\n variant={variant}\n slotProps={finalSlotProps}\n inputRef={ref}\n error={standardProps.error}\n helperText={standardProps.helperText}\n {...rest}\n />\n );\n }\n});\n\nexport default Input;"],"names":["styled","TextField","forwardRef","jsx","Controller","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,kBAAkBA,OAAAA,OAAOC,SAAAA,SAAS,EAAE,CAAC,EAAE,MAAA,MAAM;;AACjD,iBAAQ,KAAI,uBAAM,eAAN,mBAAkB,iBAAlB,mBAAgC,mBAAhC,mBAAgD,IAAI,GAChE,oBAsCK,uBAAM,eAAN,mBAAkB,iBAAlB,mBAAgC,mBAAhC,mBAAgD;AAAA,CACnD;AAGG,MAAM,QAAQC,MAAAA,WAAyC,CAAC,IAW5D,QAAQ;AAXoD,eAC7D;AAAA,WAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,IAEX;AAAA,IACA;AAAA,MAT6D,IAU1D,iBAV0D,IAU1D;AAAA,IATH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA;AAGA,QAAM,YAAY,aAAa,QAAQ,KAAK,YAAY;AAGxD,QAAM,iBAA8D,mBAC/D;AAGL,MAAI,SAAS,UAAU;AACrB,mBAAe,MAAM,QAAQ,SAAY,MAAM,OAAO;AACtD,QAAI,QAAQ,QAAW;AACrB,qBAAe,MAAM;AAAA,IACvB;AAAA,EACF;AAGA,QAAM,iBAA8C,iCAC/C,kBAD+C;AAAA,IAElD,WAAW,kCACN,mDAAiB,YACjB;AAAA,EACL;AAIF,QAAM,uBAAuB,CAAC,OAAkE,gBAA4C;AAC1I,UAAM,WAAW,MAAM,OAAO;AAC9B,QAAI;AAEJ,QAAI,SAAS,UAAU;AACrB,iBAAW,aAAa,MAAM,aAAa,MAAM,WAAW,WAAW,QAAQ;AAE/E,UAAI,MAAM,QAAkB,KAAK,aAAa,MAAM,aAAa,IAAK,YAAW;AAAA,IACnF,OAAO;AACL,iBAAW;AAAA,IACb;AAEA,QAAI,WAAW;AACb,iDAAc;AAAA,IAChB,OAAO;AAEJ,2CAAgD;AAAA,IACnD;AAAA,EACF;AAGA,MAAI,WAAW;AACb,UAAM,WAAW;AACjB,WACEC,2BAAAA;AAAAA,MAACC,cAAAA;AAAAA,MAAA;AAAA,QACC,MAAM,SAAS;AAAA,QACf,SAAS,SAAS;AAAA,QAClB,OAAO,SAAS;AAAA,QAChB,QAAQ,CAAC,EAAE,OAAO,YAAY,EAAE,MAAA,QAAc;;AAC5C,iBACED,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,cACX,QAAOE,MAAA,MAAM,UAAN,OAAAA,MAAe;AAAA,cACtB,UAAU,CAAC,MAAM,qBAAqB,GAAG,MAAM,QAAQ;AAAA,cACvD,QAAQ,MAAM;AAAA,cACd;AAAA,cACA;AAAA,cACA,WAAW;AAAA,cACX,UAAU,MAAM;AAAA,cAChB,OAAO,CAAC,CAAC;AAAA,cACT,YAAY,+BAAO;AAAA,eACf;AAAA,UAAA;AAAA,QAGV;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,OAAO;AAEL,UAAM,gBAAgB;AACtB,WACEF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,MAAM,cAAc;AAAA,QACpB,OAAO,wBAAS;AAAA,QAChB,UAAU,CAAC,MAAM,qBAAqB,CAAC;AAAA,QACvC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO,cAAc;AAAA,QACrB,YAAY,cAAc;AAAA,SACtB;AAAA,IAAA;AAAA,EAGV;AACF,CAAC;;"}
|
package/README.md
DELETED
|
@@ -1,243 +0,0 @@
|
|
|
1
|
-
# @soyfri/shared-library
|
|
2
|
-
|
|
3
|
-
Una librería de componentes React reutilizables construida con Material-UI, TypeScript y Tailwind CSS, diseñada para proporcionar componentes UI consistentes y bien documentados.
|
|
4
|
-
|
|
5
|
-
## 📋 Tabla de Contenidos
|
|
6
|
-
|
|
7
|
-
- [Características](#características)
|
|
8
|
-
- [Instalación](#instalación)
|
|
9
|
-
- [Uso](#uso)
|
|
10
|
-
- [Componentes Disponibles](#componentes-disponibles)
|
|
11
|
-
- [Desarrollo](#desarrollo)
|
|
12
|
-
- [Scripts Disponibles](#scripts-disponibles)
|
|
13
|
-
- [Storybook](#storybook)
|
|
14
|
-
- [Testing](#testing)
|
|
15
|
-
- [Tecnologías](#tecnologías)
|
|
16
|
-
- [Estructura del Proyecto](#estructura-del-proyecto)
|
|
17
|
-
|
|
18
|
-
## ✨ Características
|
|
19
|
-
|
|
20
|
-
- 🎨 **Componentes tipados**: Todos los componentes están construidos con TypeScript para mayor seguridad de tipos
|
|
21
|
-
- 📚 **Documentación con Storybook**: Cada componente incluye historias interactivas y documentación
|
|
22
|
-
- 🎯 **Material-UI**: Basado en Material-UI para un diseño consistente y accesible
|
|
23
|
-
- 🌈 **Tailwind CSS**: Integración con Tailwind para estilos utilitarios
|
|
24
|
-
- 🧪 **Testing**: Configurado con Vitest y Playwright para testing de componentes
|
|
25
|
-
- 📦 **Build optimizado**: Configuración con Rollup para generar builds ESM y CommonJS
|
|
26
|
-
|
|
27
|
-
## 📦 Instalación
|
|
28
|
-
|
|
29
|
-
```bash
|
|
30
|
-
npm install @soyfri/shared-library
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
## 🚀 Uso
|
|
34
|
-
|
|
35
|
-
```tsx
|
|
36
|
-
import { Button, Table, Select } from '@soyfri/shared-library';
|
|
37
|
-
import '@soyfri/shared-library/dist/styles.css';
|
|
38
|
-
|
|
39
|
-
function App() {
|
|
40
|
-
return (
|
|
41
|
-
<div>
|
|
42
|
-
<Button variant="contained" color="primary">
|
|
43
|
-
Mi Botón
|
|
44
|
-
</Button>
|
|
45
|
-
</div>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
## 🧩 Componentes Disponibles
|
|
51
|
-
|
|
52
|
-
### Button
|
|
53
|
-
Componente de botón personalizable basado en Material-UI con soporte para iconos, diferentes tamaños y estados.
|
|
54
|
-
|
|
55
|
-
**Características:**
|
|
56
|
-
- Variantes: `text`, `outlined`, `contained`
|
|
57
|
-
- Tamaños: `small`, `medium`, `large`
|
|
58
|
-
- Soporte para iconos de inicio y fin
|
|
59
|
-
- Estados de carga
|
|
60
|
-
- Completamente tipado
|
|
61
|
-
|
|
62
|
-
### Table
|
|
63
|
-
Componente de tabla flexible con paginación interna y externa, ordenamiento y renderizado personalizado de columnas.
|
|
64
|
-
|
|
65
|
-
**Características:**
|
|
66
|
-
- Paginación interna automática
|
|
67
|
-
- Paginación externa controlada
|
|
68
|
-
- Columnas personalizables con renderizado custom
|
|
69
|
-
- Soporte para componentes complejos en celdas
|
|
70
|
-
- Completamente tipado con generics
|
|
71
|
-
|
|
72
|
-
### Select
|
|
73
|
-
Componente select avanzado con soporte para selección múltiple, filtros, agrupación y renderizado personalizado.
|
|
74
|
-
|
|
75
|
-
**Características:**
|
|
76
|
-
- Selección simple y múltiple
|
|
77
|
-
- Filtrado de opciones
|
|
78
|
-
- Agrupación de opciones
|
|
79
|
-
- Renderizado personalizado con avatars
|
|
80
|
-
- Placeholder configurable
|
|
81
|
-
|
|
82
|
-
### Avatar
|
|
83
|
-
Componente para mostrar avatares de usuarios con soporte para imágenes y texto.
|
|
84
|
-
|
|
85
|
-
### Icon
|
|
86
|
-
Wrapper para iconos de Material-UI con propiedades consistentes.
|
|
87
|
-
|
|
88
|
-
### Stat
|
|
89
|
-
Componente para mostrar estadísticas con diferentes plantillas de visualización.
|
|
90
|
-
|
|
91
|
-
**Características:**
|
|
92
|
-
- Plantilla simple
|
|
93
|
-
- Plantilla con chip
|
|
94
|
-
- Plantilla con lista de chips
|
|
95
|
-
- Colores personalizables
|
|
96
|
-
|
|
97
|
-
### Column
|
|
98
|
-
Componente auxiliar para definir columnas en el componente Table.
|
|
99
|
-
|
|
100
|
-
## 🛠️ Desarrollo
|
|
101
|
-
|
|
102
|
-
### Prerrequisitos
|
|
103
|
-
|
|
104
|
-
- Node.js (versión 18 o superior)
|
|
105
|
-
- npm o yarn
|
|
106
|
-
|
|
107
|
-
### Configuración del entorno de desarrollo
|
|
108
|
-
|
|
109
|
-
1. Clona el repositorio:
|
|
110
|
-
```bash
|
|
111
|
-
git clone <repository-url>
|
|
112
|
-
cd shared-library
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
2. Instala las dependencias:
|
|
116
|
-
```bash
|
|
117
|
-
npm install
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
3. Inicia el entorno de desarrollo:
|
|
121
|
-
```bash
|
|
122
|
-
npm run dev
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
## 📜 Scripts Disponibles
|
|
126
|
-
|
|
127
|
-
- `npm run build` - Construye la librería para producción
|
|
128
|
-
- `npm run dev` - Inicia el modo de desarrollo con watch
|
|
129
|
-
- `npm run build:css` - Construye los estilos CSS
|
|
130
|
-
- `npm run watch:css` - Observa cambios en los estilos CSS
|
|
131
|
-
- `npm run clean` - Limpia la carpeta dist
|
|
132
|
-
- `npm run prepare` - Limpia y construye la librería
|
|
133
|
-
- `npm run storybook` - Inicia Storybook en modo desarrollo
|
|
134
|
-
- `npm run build-storybook` - Construye Storybook para producción
|
|
135
|
-
- `npm run dist` - Ejecuta el script de distribución personalizado
|
|
136
|
-
|
|
137
|
-
## 📚 Storybook
|
|
138
|
-
|
|
139
|
-
La librería incluye Storybook para documentación interactiva y desarrollo de componentes.
|
|
140
|
-
|
|
141
|
-
### Iniciar Storybook
|
|
142
|
-
|
|
143
|
-
```bash
|
|
144
|
-
npm run storybook
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
Esto abrirá Storybook en `http://localhost:6006` donde podrás:
|
|
148
|
-
|
|
149
|
-
- Ver todos los componentes disponibles
|
|
150
|
-
- Interactuar con las propiedades de cada componente
|
|
151
|
-
- Ver ejemplos de uso
|
|
152
|
-
- Acceder a la documentación detallada
|
|
153
|
-
|
|
154
|
-
### Construir Storybook
|
|
155
|
-
|
|
156
|
-
```bash
|
|
157
|
-
npm run build-storybook
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
## 🧪 Testing
|
|
161
|
-
|
|
162
|
-
La librería está configurada con Vitest y Playwright para testing de componentes.
|
|
163
|
-
|
|
164
|
-
### Configuración de Testing
|
|
165
|
-
|
|
166
|
-
- **Vitest**: Para unit tests y testing de componentes
|
|
167
|
-
- **Playwright**: Para testing de browser
|
|
168
|
-
- **Storybook Test Addon**: Para testing de historias de Storybook
|
|
169
|
-
|
|
170
|
-
## 🔧 Tecnologías
|
|
171
|
-
|
|
172
|
-
### Dependencias Principales
|
|
173
|
-
|
|
174
|
-
- **React 19.1.0**: Librería de UI
|
|
175
|
-
- **Material-UI 7.1.0**: Sistema de diseño y componentes
|
|
176
|
-
- **TypeScript 5.8.3**: Tipado estático
|
|
177
|
-
- **Tailwind CSS 4.1.7**: Framework de CSS utilitario
|
|
178
|
-
|
|
179
|
-
### Herramientas de Desarrollo
|
|
180
|
-
|
|
181
|
-
- **Storybook 9.0.8**: Documentación y desarrollo de componentes
|
|
182
|
-
- **Rollup**: Bundler para la construcción de la librería
|
|
183
|
-
- **Vitest**: Framework de testing
|
|
184
|
-
- **Playwright**: Testing de browser
|
|
185
|
-
- **Prettier**: Formateo de código
|
|
186
|
-
|
|
187
|
-
## 📁 Estructura del Proyecto
|
|
188
|
-
|
|
189
|
-
```
|
|
190
|
-
shared-library/
|
|
191
|
-
├── .storybook/ # Configuración de Storybook
|
|
192
|
-
├── src/
|
|
193
|
-
│ ├── components/ # Componentes de la librería
|
|
194
|
-
│ │ ├── Avatar/
|
|
195
|
-
│ │ ├── Button/
|
|
196
|
-
│ │ ├── Column/
|
|
197
|
-
│ │ ├── Icon/
|
|
198
|
-
│ │ ├── Select/
|
|
199
|
-
│ │ ├── Stat/
|
|
200
|
-
│ │ └── Table/
|
|
201
|
-
│ ├── index.ts # Punto de entrada principal
|
|
202
|
-
│ └── styles.css # Estilos globales
|
|
203
|
-
├── dist/ # Archivos construidos
|
|
204
|
-
├── package.json
|
|
205
|
-
├── tsconfig.json
|
|
206
|
-
├── tailwind.config.js
|
|
207
|
-
├── rollup.config.cjs
|
|
208
|
-
└── vitest.config.ts
|
|
209
|
-
```
|
|
210
|
-
|
|
211
|
-
### Estructura de Componentes
|
|
212
|
-
|
|
213
|
-
Cada componente sigue una estructura consistente:
|
|
214
|
-
|
|
215
|
-
```
|
|
216
|
-
ComponentName/
|
|
217
|
-
├── ComponentName.tsx # Implementación del componente
|
|
218
|
-
├── ComponentName.stories.tsx # Historias de Storybook
|
|
219
|
-
├── ComponentName.definition.ts # Definiciones de código (opcional)
|
|
220
|
-
├── index.ts # Exportaciones
|
|
221
|
-
└── types.ts # Tipos específicos (opcional)
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
## 🤝 Contribución
|
|
225
|
-
|
|
226
|
-
Para contribuir al proyecto:
|
|
227
|
-
|
|
228
|
-
1. Fork el repositorio
|
|
229
|
-
2. Crea una rama para tu feature (`git checkout -b feature/nueva-funcionalidad`)
|
|
230
|
-
3. Commit tus cambios (`git commit -am 'Agrega nueva funcionalidad'`)
|
|
231
|
-
4. Push a la rama (`git push origin feature/nueva-funcionalidad`)
|
|
232
|
-
5. Crea un Pull Request
|
|
233
|
-
|
|
234
|
-
## 📄 Licencia
|
|
235
|
-
|
|
236
|
-
ISC License
|
|
237
|
-
|
|
238
|
-
---
|
|
239
|
-
|
|
240
|
-
**Versión actual:** 1.0.1
|
|
241
|
-
|
|
242
|
-
Para más información y ejemplos detallados, consulta la documentación en Storybook ejecutando `npm run storybook`.
|
|
243
|
-
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
export declare const CustomInputSelfService: {
|
|
2
|
-
'& .MuiFilledInput-root': {
|
|
3
|
-
overflow: string;
|
|
4
|
-
borderRadius: string;
|
|
5
|
-
backgroundColor: string;
|
|
6
|
-
border: string;
|
|
7
|
-
borderColor: string;
|
|
8
|
-
color: string;
|
|
9
|
-
fontWeight: import("csstype").Property.FontWeight | undefined;
|
|
10
|
-
transition: string;
|
|
11
|
-
'&:hover': {
|
|
12
|
-
backgroundColor: string;
|
|
13
|
-
};
|
|
14
|
-
'&.Mui-focused': {
|
|
15
|
-
backgroundColor: string;
|
|
16
|
-
boxShadow: string;
|
|
17
|
-
borderColor: string;
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
width: string;
|
|
21
|
-
height: string;
|
|
22
|
-
"& .MuiFormLabel-root": {
|
|
23
|
-
color: string;
|
|
24
|
-
fontWeight: import("csstype").Property.FontWeight | undefined;
|
|
25
|
-
fontSize: string;
|
|
26
|
-
};
|
|
27
|
-
".MuiSelect-icon ": {
|
|
28
|
-
fill: string;
|
|
29
|
-
};
|
|
30
|
-
};
|
package/palette.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const theme: import('@mui/material/styles').Theme;
|