@arquimedes.co/eureka-forms 2.0.99 → 3.0.1-refactor

package/dist/Shared/RoundedDatePicker/RoundedDatePicker.js

@@ -1,351 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { cloneElement } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import CalendarTodayRoundedIcon from '@material-ui/icons/CalendarTodayRounded';
-import { DatePicker, DateTimePicker, } from '@material-ui/pickers';
-import { getLocale } from '../../Form/Form';
-import { format } from 'date-fns';
-var useDatePickerStyles = function (props) {
-    return makeStyles(function () { return ({
-        root: {
-            borderRadius: props.borderRadius,
-            cursor: props.cantEdit ? 'default' : 'pointer',
-            height: props.height,
-            backgroundColor: props.backgroundColor,
-            '& input, textarea': {
-                cursor: props.cantEdit ? 'default' : 'pointer',
-                padding: props.padding,
-                fontWeight: props.fontWeight,
-                color: props.textColor,
-                fontSize: props.fontSize,
-                '&::placeholder': {
-                    fontSize: props.fontSize,
-                },
-                borderRadius: props.borderRadius,
-            },
-            '& .EF-MuiOutlinedInput-notchedOutline': {
-                borderColor: props.outlineColor,
-                '& span': {
-                    fontSize: '0.75rem',
-                },
-            },
-            '&.Mui-error .EF-MuiOutlinedInput-notchedOutline': {
-                borderColor: props.outlineColor,
-            },
-            '&.Mui-focused .EF-MuiOutlinedInput-notchedOutline': {
-                borderColor: props.focusColor,
-                borderWidth: 2,
-            },
-            '&:hover .EF-MuiOutlinedInput-notchedOutline': {
-                borderColor: props.cantEdit
-                    ? props.outlineColor
-                    : props.focusColor,
-            },
-            '& .EF-MuiInputAdornment-root': {
-                width: 5,
-                '& button': {
-                    marginLeft: -25,
-                    fontSize: 18,
-                    padding: 16,
-                },
-            },
-            '&.Erk-MuiOutlinedInput-adornedEnd': {
-                paddingRight: 11,
-            },
-            '& .Mui-error': {
-                color: props.errorColor,
-            },
-            '&.Mui-disabled': {
-                cursor: 'default',
-            },
-        },
-    }); });
-};
-var useDatePickerLabelStyles = function (props) {
-    return makeStyles(function () { return ({
-        root: {
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            maxWidth: 'calc(100% - 50px)',
-            marginTop: props.height != '40px' ? '-4px' : '0px',
-            textOverflow: 'ellipsis',
-            fontSize: props.fontSize,
-            color: props.textColor + '8a',
-            '&.Mui-focused': {
-                color: props.focusColor,
-            },
-            '&.EF-MuiInputLabel-shrink': {
-                marginTop: '0px',
-                maxWidth: 'calc(100% - 5px)',
-            },
-            '& .Mui-error': {
-                color: props.errorColor,
-            },
-            '&.Mui-error': {
-                color: props.errorColor,
-            },
-        },
-    }); });
-};
-var useDatePickerHelperTextStyles = function (props) {
-    return makeStyles(function () { return ({
-        root: {
-            color: props.helperTextColor,
-            '&.Mui-error': {
-                color: props.errorColor,
-            },
-        },
-    }); });
-};
-var useDatePickerDialogStyles = function (props) {
-    return makeStyles(function () { return ({
-        datePicker: {
-            '& .EF-MuiPickersModal-dialogRoot': {
-                color: props.textColor,
-                '& .EF-MuiDialogActions-root': {
-                    '& .EF-MuiButton-root:hover': {
-                        backgroundColor: props.hoverColor,
-                    },
-                    '& .EF-MuiButton-label': {
-                        color: props.focusColor,
-                    },
-                    '& .EF-MuiTouchRipple-root': {
-                        color: props.focusColor,
-                    },
-                },
-            },
-            //Days labels
-            '& .EF-MuiPickersDay-day': {
-                color: props.textColor,
-            },
-            // Selected day label
-            '& .EF-MuiPickersDay-daySelected': {
-                color: props.backgroundColor,
-                backgroundColor: props.focusColor,
-            },
-            //Title
-            '& .EF-MuiPickersDatePickerRoot-toolbar': {
-                color: props.backgroundColor,
-                backgroundColor: props.focusColor,
-            },
-            //Title
-            '& .EF-MuiPickersToolbar-toolbar': {
-                color: props.backgroundColor,
-                backgroundColor: props.focusColor,
-            },
-            '& .EF-MuiPickerDTTabs-tabs': {
-                color: props.backgroundColor,
-                backgroundColor: props.focusColor,
-            },
-            '& .EF-MuiPickersYear-yearSelected, .EF-MuiPickersYear-root:focus': {
-                color: props.focusColor,
-            },
-            '& .EF-MuiTabs-indicator': {
-                backgroundColor: props.contrastColor,
-            },
-            '& .EF-MuiPickersClockNumber-clockNumber': {
-                color: props.accentColor,
-            },
-            '& .EF-MuiPickersClockNumber-clockNumberSelected': {
-                color: props.backgroundColor,
-            },
-            '& .EF-MuiPickersClock-pin, .EF-MuiPickersClockPointer-pointer': {
-                backgroundColor: props.focusColor,
-            },
-            '& .EF-MuiPickersClockPointer-noPoint': {
-                backgroundColor: props.focusColor,
-            },
-            '& .EF-MuiPickersClockPointer-thumb': {
-                borderColor: props.focusColor,
-            },
-            '& .EF-MuiPickersDay-dayDisabled': {
-                color: 'rgba(0, 0, 0, 0.38)',
-                pointerEvents: 'all',
-            },
-            '& .EF-MuiPickersDay-current': {
-                color: props.backgroundColor,
-                backgroundColor: props.secondaryColor,
-            },
-            '& .EF-MuiPickersDay-hidden': {
-                opacity: 0.4,
-                pointerEvents: 'none',
-            },
-            '& .EF-MuiPickersDay-hidden.EF-MuiPickersDay-current': {
-                opacity: 0.8,
-                pointerEvents: 'none',
-            },
-        },
-    }); });
-};
-function CustomDatePicker(_a) {
-    var ref = _a.ref, _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? '#98c1d9' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? '#ffffff' : _e, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.contrastColor, contrastColor = _g === void 0 ? '#ee6c4d' : _g, _h = _a.accentColor, accentColor = _h === void 0 ? '#293241' : _h, _j = _a.errorColor, errorColor = _j === void 0 ? '#cc2936' : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.padding, padding = _l === void 0 ? '6px 0px 6px 12px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, _o = _a.shrunkenFontSize, shrunkenFontSize = _o === void 0 ? '1rem' : _o, _p = _a.helperTextColor, helperTextColor = _p === void 0 ? '#989898' : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '300' : _q, _r = _a.height, height = _r === void 0 ? '31px' : _r, _s = _a.cantEdit, cantEdit = _s === void 0 ? false : _s, _t = _a.pickTime, pickTime = _t === void 0 ? false : _t, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["ref", "focusColor", "secondaryColor", "outlineColor", "backgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "height", "cantEdit", "pickTime", "onChange", "required"]);
-    var classes = useDatePickerStyles({
-        padding: padding,
-        cantEdit: cantEdit,
-        textColor: textColor,
-        focusColor: focusColor,
-        hoverColor: focusColor + '0a',
-        outlineColor: outlineColor,
-        errorColor: errorColor,
-        backgroundColor: backgroundColor,
-        borderRadius: borderRadius,
-        fontSize: fontSize,
-        shrunkenFontSize: shrunkenFontSize,
-        fontWeight: fontWeight,
-        helperTextColor: helperTextColor,
-        height: height,
-    })();
-    var labelClasses = useDatePickerLabelStyles({
-        padding: padding,
-        cantEdit: cantEdit,
-        textColor: textColor,
-        focusColor: focusColor,
-        hoverColor: focusColor + '0a',
-        errorColor: errorColor,
-        outlineColor: outlineColor,
-        backgroundColor: backgroundColor,
-        borderRadius: borderRadius,
-        fontSize: fontSize,
-        shrunkenFontSize: shrunkenFontSize,
-        fontWeight: fontWeight,
-        helperTextColor: helperTextColor,
-        height: height,
-    })();
-    var datePicker = useDatePickerDialogStyles({
-        padding: padding,
-        cantEdit: cantEdit,
-        textColor: textColor,
-        secondaryColor: secondaryColor,
-        accentColor: accentColor,
-        contrastColor: contrastColor,
-        focusColor: focusColor,
-        hoverColor: focusColor + '0a',
-        errorColor: errorColor,
-        outlineColor: outlineColor,
-        backgroundColor: backgroundColor,
-        borderRadius: borderRadius,
-        fontSize: fontSize,
-        shrunkenFontSize: shrunkenFontSize,
-        fontWeight: fontWeight,
-        helperTextColor: helperTextColor,
-        height: height,
-    })().datePicker;
-    var helperTextStyles = useDatePickerHelperTextStyles({
-        padding: padding,
-        textColor: textColor,
-        focusColor: focusColor,
-        errorColor: errorColor,
-        outlineColor: outlineColor,
-        backgroundColor: backgroundColor,
-        borderRadius: borderRadius,
-        fontSize: fontSize,
-        shrunkenFontSize: shrunkenFontSize,
-        fontWeight: fontWeight,
-        helperTextColor: helperTextColor,
-        height: height,
-    })();
-    if (pickTime) {
-        return (_jsx(DateTimePicker, __assign({}, others, { ref: ref, inputVariant: "outlined", "data-testid": "date-picker", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'Pp', { locale: getLocale() }), format: "Pp", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
-                disableEnforceFocus: true,
-                className: datePicker,
-                cancelLabel: '',
-            } //Fixes the typescript declaration of the library: https://material-ui-pickers.dev/api/KeyboardDatePicker
-            , InputProps: {
-                required: required,
-                classes: classes,
-                disabled: cantEdit,
-                endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: {
-                        color: '#757575',
-                        fontSize: 20,
-                    } })),
-            }, FormHelperTextProps: {
-                classes: helperTextStyles,
-            }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {
-                if (!day) {
-                    return dayComponent;
-                }
-                return (_jsx("div", __assign({ onClick: function () {
-                        onChange(day);
-                    } }, { children: cloneElement(dayComponent) })));
-            }, variant: "dialog" })));
-    }
-    else {
-        return (_jsx(DatePicker, __assign({}, others, { ref: ref, "data-testid": "date-picker", inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: function (date) {
-                if (!date || (!others.value && date))
-                    onChange(date);
-            }, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
-                disableEnforceFocus: true,
-                className: datePicker,
-                cancelLabel: '',
-            } //Fixes the typescript declaration of the library: https://material-ui-pickers.dev/api/KeyboardDatePicker
-            , InputProps: {
-                required: required,
-                classes: classes,
-                disabled: cantEdit,
-                endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: {
-                        color: '#757575',
-                        fontSize: 20,
-                    } })),
-            }, FormHelperTextProps: {
-                classes: helperTextStyles,
-            }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {
-                if (!day) {
-                    return dayComponent;
-                }
-                return (_jsx("div", __assign({ onClick: function () {
-                        onChange(day);
-                    } }, { children: cloneElement(dayComponent) })));
-            }, variant: "dialog" })));
-    }
-}
-/**
- * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
- */
-var RoundedDatePicker = /** @class */ (function (_super) {
-    __extends(RoundedDatePicker, _super);
-    function RoundedDatePicker() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    RoundedDatePicker.prototype.render = function () {
-        return _jsx(CustomDatePicker, __assign({}, this.props));
-    };
-    return RoundedDatePicker;
-}(React.Component));
-export default RoundedDatePicker;

package/dist/Shared/RoundedDatePicker/RoundedDatePicker.stories.js

@@ -1,223 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useArgs } from '@storybook/preview-api';
-import RoundedDatePicker from './RoundedDatePicker';
-import { within, screen } from '@storybook/testing-library';
-import { userEvent } from '@storybook/testing-library';
-var meta = {
-    component: RoundedDatePicker,
-    tags: ['autodocs'],
-    args: {
-        focusColor: '#3d5a7f',
-        secondaryColor: '#98c1d9',
-        helperTextColor: '#989898',
-        outlineColor: '#0000003b',
-        backgroundColor: '#ffffff',
-        textColor: '#293241',
-        contrastColor: '#ee6c4d',
-        accentColor: '#293241',
-        errorColor: '#cc2936',
-        fontSize: '1rem',
-        fontWeight: '300',
-        cantEdit: false,
-    },
-    parameters: {
-        date: new Date('07-21-2021'),
-    },
-};
-export default meta;
-export var Empty = {
-    args: {
-        value: null,
-    },
-};
-export var Default = {
-    args: {
-        label: 'Label',
-        value: new Date('07-21-2021'),
-    },
-};
-export var ValueAndLabel = {
-    args: {
-        label: 'Label',
-        value: null,
-    },
-    render: function Component(args) {
-        var _a = useArgs(), setArgs = _a[1];
-        var onValueChange = function (value) {
-            var _a;
-            (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, value);
-            setArgs({ value: value });
-        };
-        return (_jsx(RoundedDatePicker, __assign({}, args, { ref: args.ref, onChange: onValueChange })));
-    },
-};
-export var Full = {
-    args: {
-        label: 'Label',
-        value: null,
-        helperText: 'Helper text',
-    },
-};
-export var FullDateTime = {
-    args: {
-        label: 'Label',
-        value: null,
-        helperText: 'Helper text',
-        pickTime: true,
-    },
-};
-export var Error = {
-    args: {
-        label: 'Label',
-        value: null,
-        helperText: 'Helper text',
-        error: true,
-    },
-};
-export var Menu = {
-    args: {
-        label: 'Label',
-        value: null,
-    },
-    play: function (_a) {
-        var canvasElement = _a.canvasElement;
-        return __awaiter(void 0, void 0, void 0, function () {
-            var canvas, selector;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        canvas = within(canvasElement);
-                        selector = canvas.getByTestId('date-picker');
-                        return [4 /*yield*/, userEvent.click(selector)];
-                    case 1:
-                        _b.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    },
-};
-export var DateTimeDateMenu = {
-    args: {
-        label: 'Label',
-        value: null,
-        pickTime: true,
-    },
-    play: function (_a) {
-        var canvasElement = _a.canvasElement;
-        return __awaiter(void 0, void 0, void 0, function () {
-            var canvas, selector;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        canvas = within(canvasElement);
-                        selector = canvas.getByTestId('date-picker');
-                        return [4 /*yield*/, userEvent.click(selector)];
-                    case 1:
-                        _b.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    },
-};
-export var DateTimeTimeMenu = {
-    args: {
-        label: 'Label',
-        value: null,
-        pickTime: true,
-    },
-    play: function (_a) {
-        var canvasElement = _a.canvasElement;
-        return __awaiter(void 0, void 0, void 0, function () {
-            var canvas, selector, time;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        canvas = within(canvasElement);
-                        selector = canvas.getByTestId('date-picker');
-                        return [4 /*yield*/, userEvent.click(selector)];
-                    case 1:
-                        _b.sent();
-                        time = screen.getByText('12', {
-                            selector: 'h3',
-                        });
-                        return [4 /*yield*/, userEvent.click(time)];
-                    case 2:
-                        _b.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    },
-};
-export var ErrorColor = {
-    args: {
-        label: 'Label',
-        value: null,
-        helperText: 'Helper text',
-        error: true,
-        errorColor: 'blue',
-    },
-};
-export var DifferentColors = {
-    args: {
-        label: 'Label',
-        value: null,
-        helperText: 'Helper text',
-        helperTextColor: 'green',
-        outlineColor: 'purple',
-        backgroundColor: 'red',
-        textColor: 'blue',
-    },
-    render: function Component(args) {
-        return _jsx(RoundedDatePicker, __assign({}, args, { ref: args.ref }));
-    },
-};

package/dist/Shared/RoundedPhoneInput/RoundedPhoneInput.d.ts

@@ -1,43 +0,0 @@
-import React from 'react';
-import { TextFieldProps } from '@material-ui/core/TextField';
-interface StyleProps {
-    /** The color of the text */
-    textColor?: string;
-    /** The color of the outline when selected and hovered on */
-    focusColor?: string;
-    /** The color of the error to display */
-    errorColor?: string;
-    /** The color of the outline when it is not selected */
-    outlineColor?: string;
-    /** The backgroundColor of the input */
-    backgroundColor?: string;
-    /** The borderRadius of the input */
-    borderRadius?: number;
-    /** If input is readOnly */
-    readOnly?: boolean;
-    /** The padding of the input */
-    padding?: string;
-    /** The size of the font to display the input in */
-    fontSize?: number | string;
-    /** The weight of the font of the value and the placeholder */
-    fontWeight?: number | string;
-    /** Cant edit */
-    cantEdit?: boolean;
-    /** The color of the helper text when not error */
-    helperTextColor?: string;
-    /** The max length of the string */
-    maxLength?: number;
-}
-interface RoundedPhoneInputProps extends StyleProps {
-    /** The value of the phoneinput */
-    value?: string;
-    onChange: (value: string) => void;
-    inputRef?: any;
-}
-/**
- * Generic phoneinput with apps designs. Is class due to the use in the react-hook-forms library
- */
-declare class RoundedPhoneInput extends React.Component<RoundedPhoneInputProps & Omit<TextFieldProps, 'onChange'>> {
-    render(): JSX.Element;
-}
-export default RoundedPhoneInput;