@m4l/components 0.1.40 → 0.1.41

package/src/components/hook-form/RHFCheckbox/styles.tsx

@@ -1,15 +0,0 @@
-import { styled } from '@mui/material/styles';
-import { Skeleton as MUISkeleton } from '@mui/material';
-
-export const WrapperSKTRHFCheckbox = styled('div')(() => ({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: '8px',
-}));
-
-export const SKTCheckSkeleton = styled(MUISkeleton)(() => ({
-    width: '20px',
-    height: '20px',
-    borderRadius: '4px',
-}));

package/src/components/hook-form/RHFCheckbox/subcomponents/Skeleton/index.tsx

@@ -1,10 +0,0 @@
-import { Skeleton as MUISkeleton } from '@mui/material';
-import { WrapperSkeletonCheckBox } from './styles';
-
-export const SkeletonCheckBox = () => {
-    return (
-        <WrapperSkeletonCheckBox>
-            <MUISkeleton variant="rounded" width={'18px'} height={'18px'} />
-        </WrapperSkeletonCheckBox>
-    );
-};

package/src/components/hook-form/RHFCheckbox/subcomponents/Skeleton/styles.tsx

@@ -1,9 +0,0 @@
-import { styled } from '@mui/material';
-
-export const WrapperSkeletonCheckBox = styled('div')(() => ({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '36px',
-    height: '36px',
-}));

package/src/components/hook-form/RHFCheckbox/types.ts

@@ -1,11 +0,0 @@
-import { FormControlLabelProps } from '@mui/material';
-
-export interface RHFCheckboxProps extends Omit<FormControlLabelProps, 'control'> {
-    name: string;
-    sizeCheck?: 'small' | 'medium';
-}
-
-export interface RHFMultiCheckboxProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
-    name: string;
-    options: string[];
-}

package/src/components/hook-form/RHFDateTime/index.tsx

@@ -1,85 +0,0 @@
-// form
-import { useFormContext, Controller } from 'react-hook-form';
-// @mui
-import { TextField, TextFieldProps } from '@mui/material';
-// types
-import { RHFDateTimeProps } from './types';
-
-import { DateTimePicker } from '@mui/x-date-pickers';
-import { useModuleSkeleton } from '@m4l/core';
-import { SkeletonRHFDateTime } from './subcomponents/Skeleton';
-import { useFormatter } from '@m4l/graphics';
-import { KeyboardEvent } from 'react';
-
-// import type { DateTimePickerProps } from '@mui/x-date-pickers';
-
-// ----------------------------------------------------------------------
-
-export function RHFDateTime(props: RHFDateTimeProps & TextFieldProps) {
-    const {
-        name,
-        autoComplete = 'off',
-        skeletonWidth = '50%',
-        skeletonHeight = 14,
-        withMask = true,
-    } = props;
-
-    const isSkeleton = useModuleSkeleton();
-    const { control } = useFormContext();
-
-    const {
-        dateFormatter: { datetimeFormat, datetimeMask },
-    } = useFormatter();
-
-    if (isSkeleton) {
-        return (
-            <SkeletonRHFDateTime skeletonWidth={skeletonWidth} skeletonHeight={skeletonHeight} />
-        );
-    }
-
-    return (
-        <Controller
-            name={name}
-            control={control}
-            render={({ field: { value, onChange }, fieldState: { error } }) => {
-                return (
-                    <DateTimePicker
-                        ampm={false}
-                        {...(() => {
-                            //Se implementa esta modalidad de paso de props, por el bug quue tiene el componente con las propiedades
-                            //inputFormat, mask, las cuales si les asigna undefined, falla
-                            return withMask
-                                ? { inputFormat: datetimeFormat, mask: datetimeMask }
-                                : {};
-                        })()}
-                        label=""
-                        value={value}
-                        onChange={(newValue: any) => {
-                            // if (!isNaN(newValue)) {
-                            onChange(newValue);
-                            // } else {
-                            //onChange(undefined);
-                            // }
-                        }}
-                        renderInput={params => {
-                            const checkKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-                                if (e.code === 'Enter') e.preventDefault();
-                            };
-
-                            return (
-                                <TextField
-                                    {...params}
-                                    autoComplete={autoComplete}
-                                    fullWidth
-                                    error={!!error}
-                                    helperText={error?.message}
-                                    onKeyDown={checkKeyDown}
-                                />
-                            );
-                        }}
-                    />
-                );
-            }}
-        />
-    );
-}

package/src/components/hook-form/RHFDateTime/subcomponents/Skeleton/index.tsx

@@ -1,14 +0,0 @@
-import { Skeleton } from '@mui/material';
-import { SKTRHFWrapperTextField } from './styles';
-
-import { SkeletonRHFDateTimeProps } from './types';
-
-export const SkeletonRHFDateTime = (props: SkeletonRHFDateTimeProps) => {
-    const { skeletonWidth, skeletonHeight } = props;
-    return (
-        <SKTRHFWrapperTextField>
-            <Skeleton variant="text" width={skeletonWidth} height={skeletonHeight} />
-            <Skeleton variant="circular" width={'20px'} height={'20px'} />
-        </SKTRHFWrapperTextField>
-    );
-};

package/src/components/hook-form/RHFDateTime/subcomponents/Skeleton/styles.tsx

@@ -1,12 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const SKTRHFWrapperTextField = styled('div')(({ theme }) => ({
-    display: 'flex',
-    width: '100%',
-    height: '42.25px',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    border: `1px solid ${theme.palette.divider}`,
-    padding: '0 14px',
-    borderRadius: theme.spacing(0.5),
-}));

package/src/components/hook-form/RHFDateTime/subcomponents/Skeleton/types.ts

@@ -1,3 +0,0 @@
-import { RHFDateTimeProps } from '../../types';
-
-export type SkeletonRHFDateTimeProps = Pick<RHFDateTimeProps, 'skeletonWidth' | 'skeletonHeight'>;

package/src/components/hook-form/RHFMultiCheckbox/index.tsx

@@ -1,44 +0,0 @@
-// form
-import { useFormContext, Controller } from 'react-hook-form';
-// @mui
-import { Checkbox, FormControlLabel, FormGroup } from '@mui/material';
-import { RHFMultiCheckboxProps } from './types';
-
-// ----------------------------------------------------------------------
-
-// ----------------------------------------------------------------------
-
-export function RHFMultiCheckbox({ name, options, ...other }: RHFMultiCheckboxProps) {
-    const { control } = useFormContext();
-
-    return (
-        <Controller
-            name={name}
-            control={control}
-            render={({ field }) => {
-                const onSelected = (option: string) =>
-                    field.value.includes(option)
-                        ? field.value.filter((value: string) => value !== option)
-                        : [...field.value, option];
-
-                return (
-                    <FormGroup>
-                        {options.map(option => (
-                            <FormControlLabel
-                                key={option}
-                                control={
-                                    <Checkbox
-                                        checked={field.value.includes(option)}
-                                        onChange={() => field.onChange(onSelected(option))}
-                                    />
-                                }
-                                label={option}
-                                {...other}
-                            />
-                        ))}
-                    </FormGroup>
-                );
-            }}
-        />
-    );
-}

package/src/components/hook-form/RHFMultiCheckbox/styles.tsx

@@ -1,5 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperSKTRHFCheckbox = styled('div')(() => ({
-    display: 'flex',
-}));

package/src/components/hook-form/RHFMultiCheckbox/types.ts

@@ -1,12 +0,0 @@
-import { FormControlLabelProps } from '@mui/material';
-
-export interface RHFCheckboxProps extends Omit<FormControlLabelProps, 'control'> {
-    name: string;
-    sizeCheck?: 'small' | 'medium';
-    isSkeleton?: boolean;
-}
-
-export interface RHFMultiCheckboxProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
-    name: string;
-    options: string[];
-}

package/src/components/hook-form/RHFPeriod/index.tsx

@@ -1,32 +0,0 @@
-import { Wrapper } from './styles';
-import { RHFPeriodProps } from './types';
-import { Controller, useFormContext } from 'react-hook-form';
-import { ErrorLabel } from '../../ErrorLabel';
-import { Period } from '../../Period';
-
-export const RHFPeriod = (props: RHFPeriodProps) => {
-    const { name, readOnly, skeletonWidth, skeletonHeight } = props;
-    const { control } = useFormContext();
-
-    return (
-        <Controller
-            name={name}
-            control={control}
-            render={({ field: { onChange, value }, fieldState: { error } }) => {
-                return (
-                    <Wrapper>
-                        <Period
-                            value={value}
-                            onChange={onChange}
-                            error={!!error}
-                            readOnly={readOnly}
-                            skeletonWidth={skeletonWidth}
-                            skeletonHeight={skeletonHeight}
-                        />
-                        {error && <ErrorLabel message={error.message || ''} />}
-                    </Wrapper>
-                );
-            }}
-        />
-    );
-};

package/src/components/hook-form/RHFPeriod/styles.tsx

@@ -1,10 +0,0 @@
-import { styled } from '@mui/material';
-
-export const Wrapper = styled('div')(({ theme }) => ({
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-    gap: theme.spacing(1),
-}));

package/src/components/hook-form/RHFPeriod/types.ts

@@ -1,7 +0,0 @@
-import { PeriodProps, PeriodVariant } from '../../../components/Period/types';
-
-export interface RHFPeriodProps
-    extends Pick<PeriodProps, 'readOnly' | 'skeletonWidth' | 'skeletonHeight'> {
-    name: string;
-    variant?: PeriodVariant;
-}

package/src/components/hook-form/RHFRadioGroup.tsx

@@ -1,54 +0,0 @@
-// form
-import { useFormContext, Controller } from 'react-hook-form';
-// @mui
-import {
-    Radio,
-    RadioGroup,
-    FormHelperText,
-    RadioGroupProps,
-    FormControlLabel,
-} from '@mui/material';
-
-// ----------------------------------------------------------------------
-
-interface IProps {
-    name: string;
-    options: string[];
-    getOptionLabel?: string[];
-}
-
-export function RHFRadioGroup({
-    name,
-    options,
-    getOptionLabel,
-    ...other
-}: IProps & RadioGroupProps) {
-    const { control } = useFormContext();
-
-    return (
-        <Controller
-            name={name}
-            control={control}
-            render={({ field, fieldState: { error } }) => (
-                <div>
-                    <RadioGroup {...field} row {...other}>
-                        {options.map((option, index) => (
-                            <FormControlLabel
-                                key={option}
-                                value={option}
-                                control={<Radio />}
-                                label={getOptionLabel?.length ? getOptionLabel[index] : option}
-                            />
-                        ))}
-                    </RadioGroup>
-
-                    {!!error && (
-                        <FormHelperText error sx={{ px: 2 }}>
-                            {error.message}
-                        </FormHelperText>
-                    )}
-                </div>
-            )}
-        />
-    );
-}

package/src/components/hook-form/RHFSelect.tsx

@@ -1,35 +0,0 @@
-// form
-import { useFormContext, Controller } from 'react-hook-form';
-// @mui
-import { TextField, TextFieldProps } from '@mui/material';
-
-// ----------------------------------------------------------------------
-
-interface IProps {
-    name: string;
-    children: any;
-}
-
-export function RHFSelect({ name, children, ...other }: IProps & TextFieldProps) {
-    const { control } = useFormContext();
-
-    return (
-        <Controller
-            name={name}
-            control={control}
-            render={({ field, fieldState: { error } }) => (
-                <TextField
-                    {...field}
-                    select
-                    fullWidth
-                    SelectProps={{ native: true }}
-                    error={!!error}
-                    helperText={error?.message}
-                    {...other}
-                >
-                    {children}
-                </TextField>
-            )}
-        />
-    );
-}

package/src/components/hook-form/RHFSwitch.tsx

@@ -1,29 +0,0 @@
-// form
-import { useFormContext, Controller } from 'react-hook-form';
-// @mui
-import { Switch, FormControlLabel, FormControlLabelProps } from '@mui/material';
-
-// ----------------------------------------------------------------------
-
-type IProps = Omit<FormControlLabelProps, 'control'>;
-
-interface Props extends IProps {
-    name: string;
-}
-
-export default function RHFSwitch({ name, ...other }: Props) {
-    const { control } = useFormContext();
-
-    return (
-        <FormControlLabel
-            control={
-                <Controller
-                    name={name}
-                    control={control}
-                    render={({ field }) => <Switch {...field} checked={field.value} />}
-                />
-            }
-            {...other}
-        />
-    );
-}

package/src/components/hook-form/RHFTextField/index.tsx

@@ -1,79 +0,0 @@
-// form
-import { useFormContext, Controller } from 'react-hook-form';
-// @mui
-import { TextField, TextFieldProps } from '@mui/material';
-// types
-import { RHFTextFieldProps } from './types';
-import { forwardRef } from 'react';
-import { useModuleSkeleton } from '@m4l/core';
-import { SkeletonTextField } from './subcomponents/Skeleton';
-
-// ----------------------------------------------------------------------
-export const RHFTextField = forwardRef<HTMLInputElement, RHFTextFieldProps & TextFieldProps>(
-    (props, inputRef) => {
-        // export function RHFTextField(props: RHFTextFieldProps & TextFieldProps) {
-        const {
-            name: nameRHF,
-            autoComplete = 'off',
-            skeletonWidth = '100%',
-            skeletonHeight = '18px',
-            type,
-            skeletonVariant = 'text',
-            ...other
-        } = props;
-
-        const isSkeleton = useModuleSkeleton();
-
-        const { control } = useFormContext();
-
-        if (isSkeleton) {
-            return (
-                <SkeletonTextField
-                    skeletonWidth={skeletonWidth}
-                    skeletonHeight={skeletonHeight}
-                    skeletonVariant={skeletonVariant}
-                />
-            );
-        }
-
-        return (
-            <Controller
-                name={nameRHF}
-                control={control}
-                render={({
-                    field: { onChange, onBlur, value, name, ref },
-                    fieldState: { error },
-                }) => {
-                    const onInternalChange = (event: any) => {
-                        if (type === 'number') {
-                            if (event.target.value) {
-                                onChange(Number(event.target.value));
-                                return;
-                            }
-                        }
-                        onChange(event);
-                    };
-                    return (
-                        <TextField
-                            // hiddenLabel
-                            inputRef={inputRef}
-                            autoComplete={autoComplete}
-                            onChange={onInternalChange}
-                            onBlur={onBlur}
-                            value={value || ''}
-                            name={name}
-                            ref={ref}
-                            fullWidth
-                            error={!!error}
-                            helperText={error?.message}
-                            type={type}
-                            {...other} /*  */
-                        />
-                    );
-                }}
-            />
-        );
-    },
-);
-
-RHFTextField.displayName = 'RHFTextField';

package/src/components/hook-form/RHFTextField/styles.tsx

@@ -1,10 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const SKTRHFWrapperTextField = styled('div')(({ theme }) => ({
-    display: 'flex',
-    width: '100%',
-    alignItems: 'center',
-    border: `1px solid ${theme.palette.divider}`,
-    padding: '12px 14px',
-    borderRadius: theme.spacing(1),
-}));

package/src/components/hook-form/RHFTextField/subcomponents/Skeleton/index.tsx

@@ -1,22 +0,0 @@
-import { Skeleton as MUISkeleton } from '@mui/material';
-import { WrapperSkeletonRHFTextField } from './styles';
-import { SkeletonTextFieldProps } from './types';
-
-export const SkeletonTextField = (props: SkeletonTextFieldProps) => {
-
-    const { skeletonWidth, skeletonHeight, skeletonVariant } = props;
-    if (skeletonVariant === 'text') {
-        return (
-            <WrapperSkeletonRHFTextField>
-                <MUISkeleton variant="text" width={skeletonWidth} height={skeletonHeight} />
-            </WrapperSkeletonRHFTextField>
-        );
-    }
-
-    return (
-        <WrapperSkeletonRHFTextField>
-            <MUISkeleton variant="text" width={skeletonWidth} height={skeletonHeight} />
-            <MUISkeleton variant="circular" width={'20px'} height={'20px'} />
-        </WrapperSkeletonRHFTextField>
-    );
-};

package/src/components/hook-form/RHFTextField/subcomponents/Skeleton/styles.tsx

@@ -1,12 +0,0 @@
-import { styled } from '@mui/material';
-
-export const WrapperSkeletonRHFTextField = styled('div')(({ theme }) => ({
-    display: 'flex',
-    width: '100%',
-    height: '42.25px',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    border: `1px solid ${theme.palette.divider}`,
-    padding: '12px 14px',
-    borderRadius: theme.spacing(1),
-}));

package/src/components/hook-form/RHFTextField/subcomponents/Skeleton/types.tsx

@@ -1,3 +0,0 @@
-import { RHFTextFieldProps } from '../../types';
-
-export type SkeletonTextFieldProps = Omit<RHFTextFieldProps, 'name'>;

package/src/components/hook-form/RHFTextFieldPassword/index.tsx

@@ -1,39 +0,0 @@
-import { useEnvironment } from '@m4l/core';
-import { InputAdornment } from '@mui/material';
-import { useState } from 'react';
-import { IconButton } from '../../mui_extended/IconButton';
-import { RHFTextField } from '../RHFTextField';
-import { RHFTextFieldPasswordProps } from './types';
-
-// ----------------------------------------------------------------------
-export const RHFTextFieldPassword = (props: RHFTextFieldPasswordProps) => {
-    const { name, label, skeletonWidth, skeletonHeight } = props;
-    const [showPassword, setShowPassword] = useState(false);
-    const { host_static_assets, environment_assets } = useEnvironment();
-
-    return (
-        <RHFTextField
-            name={name}
-            label={label}
-            type={showPassword ? 'text' : 'password'}
-            skeletonVariant={'password'}
-            autoComplete="on"
-            skeletonWidth={skeletonWidth}
-            skeletonHeight={skeletonHeight}
-            InputProps={{
-                endAdornment: (
-                    <InputAdornment position="end">
-                        <IconButton
-                            onClick={() => setShowPassword(!showPassword)}
-                            src={
-                                showPassword
-                                    ? `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye.svg`
-                                    : `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye_off.svg`
-                            }
-                        />
-                    </InputAdornment>
-                ),
-            }}
-        />
-    );
-};

package/src/components/hook-form/RHFTextFieldPassword/styles.tsx

@@ -1,10 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const SKTRHFWrapperTextField = styled('div')(({ theme }) => ({
-    display: 'flex',
-    width: '100%',
-    alignItems: 'center',
-    border: `1px solid ${theme.palette.divider}`,
-    padding: '12px 14px',
-    borderRadius: theme.spacing(1),
-}));

package/src/components/hook-form/RHFTextFieldPassword/types.ts

@@ -1,5 +0,0 @@
-import { RHFTextFieldProps } from '../RHFTextField/types';
-
-export interface RHFTextFieldPasswordProps extends RHFTextFieldProps {
-    label: string;
-}