@arquimedes.co/eureka-forms 2.0.34-test → 2.0.36-test

package/dist/Shared/RoundedSmartSelect/RoundedSmartSelect.stories.js

@@ -0,0 +1,318 @@
+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 RoundedSmartSelect from './RoundedSmartSelect';
+import { within, userEvent, screen } from '@storybook/testing-library';
+var meta = {
+    component: RoundedSmartSelect,
+    tags: ['autodocs'],
+    args: {
+        searchable: false,
+        focusColor: '#3d5a7f',
+        helperTextColor: '#989898',
+        outlineColor: '#0000003b',
+        backgroundColor: '#ffffff',
+        color: '#293241',
+        readOnly: false,
+        borderRadius: 10,
+        fontSize: '1rem',
+        errorColor: '#cc2936',
+        fontWeight: '300',
+        cantEdit: false,
+    },
+};
+export default meta;
+export var Empty = {
+    args: {
+        label: 'Label',
+    },
+};
+export var Default = {
+    args: {
+        label: 'Label',
+        options: [
+            {
+                label: 'Option',
+                value: 'option',
+            },
+        ],
+    },
+    play: function (_a) {
+        var canvasElement = _a.canvasElement;
+        return __awaiter(void 0, void 0, void 0, function () {
+            var canvas, selector, option;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        canvas = within(canvasElement);
+                        selector = canvas.getByTestId('smart-select');
+                        return [4 /*yield*/, userEvent.click(selector)];
+                    case 1:
+                        _b.sent();
+                        option = screen.getByTestId('smart-select-option');
+                        return [4 /*yield*/, userEvent.click(option)];
+                    case 2:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
+    render: function Component(args) {
+        var _a = useArgs(), setArgs = _a[1];
+        var onValueChange = function (value) {
+            var _a;
+            (_a = args.handleUpdate) === null || _a === void 0 ? void 0 : _a.call(args, value);
+            setArgs({ value: value });
+        };
+        return (_jsx(RoundedSmartSelect, __assign({}, args, { ref: undefined, handleUpdate: onValueChange })));
+    },
+};
+export var Focused = {
+    args: {
+        label: 'Label',
+    },
+    play: function (_a) {
+        var canvasElement = _a.canvasElement;
+        return __awaiter(void 0, void 0, void 0, function () {
+            var canvas, selector, option;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        canvas = within(canvasElement);
+                        selector = canvas.getByTestId('smart-select');
+                        return [4 /*yield*/, userEvent.click(selector)];
+                    case 1:
+                        _b.sent();
+                        option = screen.getByTestId('smart-select-empty');
+                        return [4 /*yield*/, userEvent.click(option)];
+                    case 2:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
+};
+export var FocusedSearchable = {
+    args: {
+        label: 'Label',
+        searchable: 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('smart-select');
+                        return [4 /*yield*/, userEvent.click(selector)];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
+};
+export var SearchableWithOptions = {
+    args: {
+        label: 'Label',
+        searchable: true,
+        options: [
+            {
+                label: 'Option',
+                value: 'option',
+            },
+        ],
+    },
+    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('smart-select');
+                        return [4 /*yield*/, userEvent.click(selector)];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
+};
+export var SearchableWithSearchAndOptions = {
+    args: {
+        label: 'Label',
+        searchable: true,
+        value: 'Opt',
+        options: [
+            {
+                label: 'Option',
+                value: 'option',
+            },
+        ],
+    },
+    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('smart-select');
+                        return [4 /*yield*/, userEvent.click(selector)];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
+};
+export var Loading = {
+    args: {
+        label: 'Label',
+        loading: true,
+    },
+};
+export var LoadingOpened = {
+    args: {
+        label: 'Label',
+        loading: 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('smart-select');
+                        return [4 /*yield*/, userEvent.click(selector)];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
+};
+export var SearchableLoadingOpened = {
+    args: {
+        label: 'Label',
+        searchable: true,
+        loading: 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('smart-select');
+                        return [4 /*yield*/, userEvent.click(selector)];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
+};
+export var WithValueandLabel = {
+    args: {
+        label: 'Label',
+        value: 'Textinput Value',
+    },
+};
+export var Full = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+    },
+};
+export var Error = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+export var ErrorColor = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        error: true,
+        errorColor: 'blue',
+    },
+};
+export var DifferentColors = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        helperTextColor: 'green',
+        outlineColor: 'purple',
+        backgroundColor: 'red',
+        color: 'blue',
+    },
+};

package/dist/Shared/RoundedTextField/RoundedTextField.js

@@ -0,0 +1,175 @@
+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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+var useTextfieldStyles = function (props) {
+    return makeStyles(function () { return ({
+        root: {
+            borderRadius: props.borderRadius,
+            '& input, textarea': {
+                cursor: props.cantEdit ? 'default' : 'text',
+                padding: props.multiline ? props.padding : props.padding,
+                fontWeight: props.fontWeight,
+                color: props.textColor,
+                fontSize: props.fontSize,
+                '&::placeholder': {
+                    fontSize: props.fontSize,
+                },
+                backgroundColor: props.backgroundColor,
+                borderRadius: props.borderRadius,
+            },
+            '& label': {
+                marginTop: props.multiline ? '0px' : '-4px',
+                fontSize: props.fontSize,
+                color: props.textColor + '8a',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                maxWidth: 'calc(100% - 22px)',
+            },
+            '& label.EF-MuiInputLabel-shrink': {
+                marginTop: '0px',
+                maxWidth: 'calc(100% - 5px)',
+            },
+            '& input + fieldset': {
+                borderRadius: props.borderRadius,
+            },
+            '& .EF-MuiInput-underline:after': {
+                borderBottomColor: props.outlineColor,
+            },
+            '& .EF-MuiOutlinedInput-root': {
+                borderRadius: props.borderRadius,
+                '&.Mui-focused fieldset': {
+                    borderColor: props.focusColor,
+                    borderWidth: props.readOnly ? 1 : 2,
+                },
+                '& .EF-MuiOutlinedInput-notchedOutline': {
+                    borderColor: props.outlineColor,
+                    '& legend': {
+                        fontSize: 'calc(' + props.fontSize + ' * 0.75)',
+                    },
+                },
+            },
+            '& .EF-MuiOutlinedInput-root:hover .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.cantEdit
+                    ? props.outlineColor
+                    : props.focusColor,
+            },
+            '& label.Mui-focused': {
+                color: props.focusColor,
+            },
+            '& .Mui-error': {
+                color: props.errorColor,
+            },
+            '& .EF-MuiOutlinedInput-adornedEnd': {
+                paddingRight: '7px',
+            },
+            '& .EF-MuiFormHelperText-root': {
+                color: props.helperTextColor,
+                position: 'relative',
+                marginRight: props.maxLength ? 40 : 14,
+            },
+            '& .EF-MuiFormHelperText-root.Mui-error': {
+                color: props.errorColor,
+            },
+            '& .EF-MuiOutlinedInput-multiline': {
+                padding: 0,
+                backgroundColor: props.backgroundColor,
+            },
+        },
+    }); });
+};
+function CustomTextfield(_a) {
+    var _b;
+    var _c = _a.focusColor, focusColor = _c === void 0 ? '#3d5a7f' : _c, _d = _a.helperTextColor, helperTextColor = _d === void 0 ? '#989898' : _d, _e = _a.outlineColor, outlineColor = _e === void 0 ? '#0000003b' : _e, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? 'white' : _f, _g = _a.textColor, textColor = _g === void 0 ? '#293241' : _g, _h = _a.readOnly, readOnly = _h === void 0 ? false : _h, _j = _a.borderRadius, borderRadius = _j === void 0 ? 10 : _j, _k = _a.padding, padding = _k === void 0 ? '6px 12px' : _k, _l = _a.fontSize, fontSize = _l === void 0 ? '1rem' : _l, _m = _a.errorColor, errorColor = _m === void 0 ? '#cc2936' : _m, _o = _a.fontWeight, fontWeight = _o === void 0 ? '300' : _o, _p = _a.multiline, multiline = _p === void 0 ? false : _p, _q = _a.cantEdit, cantEdit = _q === void 0 ? false : _q, maxLength = _a.maxLength, value = _a.value, icon = _a.icon, others = __rest(_a, ["focusColor", "helperTextColor", "outlineColor", "backgroundColor", "textColor", "readOnly", "borderRadius", "padding", "fontSize", "errorColor", "fontWeight", "multiline", "cantEdit", "maxLength", "value", "icon"]);
+    var classes = useTextfieldStyles({
+        padding: padding,
+        textColor: textColor,
+        errorColor: errorColor,
+        focusColor: focusColor,
+        outlineColor: outlineColor,
+        helperTextColor: helperTextColor,
+        backgroundColor: backgroundColor,
+        borderRadius: borderRadius,
+        readOnly: readOnly,
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        multiline: multiline,
+        cantEdit: cantEdit,
+        maxLength: maxLength,
+    })();
+    var length = maxLength ? (_b = value === null || value === void 0 ? void 0 : value.length) !== null && _b !== void 0 ? _b : null : null;
+    var inputProps = {
+        readOnly: readOnly,
+        disabled: cantEdit,
+        endAdornment: icon,
+    };
+    if (maxLength) {
+        inputProps.inputProps = { maxLength: maxLength };
+    }
+    return (_jsxs("div", __assign({ style: { position: 'relative', width: '100%', maxWidth: '100%' } }, { children: [_jsx(TextField, __assign({ classes: classes }, others, { value: value !== null && value !== void 0 ? value : '', multiline: multiline, variant: "outlined", size: "small", fullWidth: true, InputProps: inputProps, helperText: others.helperText ? (_jsxs(React.Fragment, { children: [others.helperText, length !== null && (_jsxs("label", __assign({ style: {
+                                position: 'absolute',
+                                top: '1px',
+                                right: '-32px',
+                                fontSize: '12px',
+                                color: helperTextColor,
+                            } }, { children: [length, "/", maxLength] })))] })) : undefined })), length !== null && !others.helperText && (_jsxs("div", __assign({ style: {
+                    fontSize: '12px',
+                    color: helperTextColor,
+                    textAlign: 'right',
+                    paddingRight: '8px',
+                    paddingTop: '2px',
+                    paddingBottom: '2px',
+                } }, { children: [length, "/", maxLength] })))] })));
+}
+/**
+ * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
+ */
+var RoundedTextField = /** @class */ (function (_super) {
+    __extends(RoundedTextField, _super);
+    function RoundedTextField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RoundedTextField.prototype.render = function () {
+        return _jsx(CustomTextfield, __assign({}, this.props));
+    };
+    return RoundedTextField;
+}(React.Component));
+export default RoundedTextField;