@arquimedes.co/eureka-forms 2.0.23 → 2.0.24-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

@@ -144,9 +144,9 @@ function CustomTextfield(_a) {
     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("div", __assign({ style: {
+    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: '-3px',
+                                top: '1px',
                                 right: '-32px',
                                 fontSize: '12px',
                                 color: helperTextColor,

package/dist/Shared/RoundedTextField/RoundedTextField.stories.d.ts

@@ -21,4 +21,17 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
+export declare const Empty: Story;
+export declare const EmptyLabel: Story;
 export declare const Default: Story;
+export declare const Focused: Story;
+export declare const FocusedNoLabel: Story;
+export declare const WithValue: Story;
+export declare const Multiline: Story;
+export declare const WithHelperText: Story;
+export declare const WithValueandLabel: Story;
+export declare const WithMaxLength: Story;
+export declare const Full: Story;
+export declare const Error: Story;
+export declare const ErrorColor: Story;
+export declare const DifferentColors: Story;

package/dist/Shared/RoundedTextField/RoundedTextField.stories.js

@@ -1,5 +1,54 @@
+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 RoundedTextField from './RoundedTextField';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+import { within, userEvent } from '@storybook/testing-library';
 var meta = {
     component: RoundedTextField,
     tags: ['autodocs'],
@@ -20,6 +69,156 @@ var meta = {
     },
 };
 export default meta;
+export var Empty = {
+    args: {},
+};
+export var EmptyLabel = {
+    args: {
+        label: 'Label',
+    },
+};
 export var Default = {
+    args: {
+        label: 'Label',
+    },
+    play: function (_a) {
+        var canvasElement = _a.canvasElement;
+        return __awaiter(void 0, void 0, void 0, function () {
+            var canvas, emailInput;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        canvas = within(canvasElement);
+                        emailInput = canvas.getByRole('textbox');
+                        return [4 /*yield*/, userEvent.click(emailInput)];
+                    case 1:
+                        _b.sent();
+                        return [4 /*yield*/, userEvent.type(emailInput, 'example-email@email.com', {
+                                delay: 100,
+                            })];
+                    case 2:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
+    render: function Component(args) {
+        var _a = useArgs(), setArgs = _a[1];
+        var onValueChange = function (event) {
+            var _a;
+            var value = event.target.value;
+            (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, event);
+            setArgs({ value: value });
+        };
+        return (_jsx(RoundedTextField, __assign({}, args, { ref: undefined, onChange: 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, emailInput;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        canvas = within(canvasElement);
+                        emailInput = canvas.getByRole('textbox');
+                        return [4 /*yield*/, userEvent.click(emailInput)];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
+};
+export var FocusedNoLabel = {
     args: {},
+    play: function (_a) {
+        var canvasElement = _a.canvasElement;
+        return __awaiter(void 0, void 0, void 0, function () {
+            var canvas, emailInput;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        canvas = within(canvasElement);
+                        emailInput = canvas.getByRole('textbox');
+                        return [4 /*yield*/, userEvent.click(emailInput)];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
+};
+export var WithValue = {
+    args: {
+        value: 'Textinput Value',
+    },
+};
+export var Multiline = {
+    args: {
+        value: 'TextArea Value',
+        multiline: true,
+        minRows: 4,
+    },
+};
+export var WithHelperText = {
+    args: {
+        helperText: 'Helper text',
+    },
+};
+export var WithValueandLabel = {
+    args: {
+        label: 'Label',
+        value: 'Textinput Value',
+    },
+};
+export var WithMaxLength = {
+    args: {
+        value: 'Value',
+        maxLength: 10,
+    },
+};
+export var Full = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        maxLength: 10,
+    },
+};
+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',
+        maxLength: 10,
+        helperTextColor: 'green',
+        outlineColor: 'purple',
+        backgroundColor: 'red',
+        textColor: 'blue',
+    },
 };

package/dist/index.js

@@ -24,4 +24,8 @@ if (values) {
         console.error('Invalid data-values JSON', error);
     }
 }
-ReactDOM.render(_jsx("div", __assign({ className: styles.eurekaForm }, { children: _jsx(App, { isWidget: false, apiKey: window.location.pathname.replace('/', ''), valuesData: dataValues }) })), document.getElementById('eureka-root'));
+ReactDOM.render(_jsx("div", __assign({ className: styles.eurekaForm }, { children: _jsx(App, { isWidget: false, apiKey: window.location.pathname.replace('/', ''), valuesData: dataValues, scrollToTop: function () {
+            location.href = '#';
+            location.href = '#eureka-root';
+            location.href = '#';
+        } }) })), document.getElementById('eureka-root'));

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "2.0.23",
+    "version":"2.0.24-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
@@ -66,6 +66,7 @@
         "@storybook/react": "^7.6.4",
         "@storybook/react-webpack5": "^7.6.4",
         "@storybook/test": "^7.6.4",
+        "@storybook/testing-library": "^0.2.2",
         "@testing-library/dom": "^9.3.3",
         "@testing-library/jest-dom": "^6.1.5",
         "@testing-library/react": "^12.1.5",
@@ -90,9 +91,11 @@
         "jest-environment-jsdom": "^29.7.0",
         "jest-junit": "^16.0.0",
         "prettier": "^3.1.0",
+        "react-docgen-typescript": "^2.2.2",
         "react-refresh": "^0.11.0",
         "react-scripts": "5.0.1",
         "storybook": "^7.6.4",
+        "storybook-mock-date-decorator": "^1.0.1",
         "ts-jest": "^29.1.1"
     },
     "peerDependencies": {