@ebrains/components 0.9.2-beta → 0.9.3-beta

package/dist/collection/shared-ui/eds-form/eds-form.js

@@ -0,0 +1,441 @@
+import { h } from "@stencil/core";
+import { sendAnalytics } from "../../utils/analytics";
+import { parseData } from "../../utils/sharedUtils";
+import { validateFormFields } from "../../utils/eds-form/formValidators";
+import { validateInputField } from "../../utils/eds-form/validateInput";
+import { getFormInitData } from "../../utils/eds-form/formUtils";
+/**
+ * `EdsFormV2` is a comprehensive form component designed to handle form submission with validation,
+ * error handling, and customizable fields.
+ *
+ * Key Features:
+ * - Configurable validation for fields, including dynamic field validation.
+ * - Optionally includes a submit button, which can display a loading state during submission.
+ * - Supports file upload, hidden fields, and dynamic field parsing.
+ * - Emits `form` event when the form is submitting/validating or there are field updates.
+ *
+ * This component is ideal for implementing complex forms with specific validation and submission behaviors.
+ */
+export class EdsForm {
+    constructor() {
+        this.name = 'eds-form';
+        this.setFormUrl = true;
+        this.formBtn = true;
+        this.formBtnLabel = 'Submit';
+        this.errorMessage = 'Some fields in your form are incorrect.';
+        this.fields = [];
+        this.initData = {};
+        this.values = {};
+        this.isSubmitting = false;
+        this.hasError = false;
+        this.errors = {};
+        this.parsedFields = [];
+    }
+    componentWillLoad() {
+        this.parseFields(this.fields);
+        // Emit context for each eds-link element after the component is fully loaded
+        const links = this.el.querySelectorAll('eds-button');
+        links.forEach((link) => {
+            this.emitContext(link);
+        });
+    }
+    componentDidLoad() {
+        if (this.shouldFormProcessInitData) {
+            this.populateFormWithInitData(this.initData);
+        }
+    }
+    get shouldFormProcessInitData() {
+        return !!this.initData;
+    }
+    parseFields(newValue) {
+        this.parsedFields = parseData(newValue);
+    }
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    isFieldVisible(field) {
+        if (!field.condition) {
+            return true;
+        }
+        const parentValue = this.values[field.condition.field];
+        return parentValue === field.condition.value;
+    }
+    validateForm() {
+        const { errors, hasError } = validateFormFields(this.parsedFields, this.formEl, this.values, (field, values) => {
+            if (!field.condition) {
+                return true;
+            }
+            const parentValue = values[field.condition.field];
+            return parentValue === field.condition.value;
+        });
+        this.errors = errors;
+        this.hasError = hasError;
+    }
+    populateFormWithInitData(initData) {
+        const { updatedValues } = getFormInitData({
+            initData,
+            parsedFields: this.parsedFields,
+            currentValues: this.values,
+            formEl: this.formEl,
+            isFieldVisible: (field, values) => {
+                if (!field.condition) {
+                    return true;
+                }
+                const parentValue = values[field.condition.field];
+                return parentValue === field.condition.value;
+            }
+        });
+        this.values = updatedValues;
+    }
+    getFormData() {
+        const formData = new FormData();
+        // Add the form name
+        formData.append('form_name', this.name);
+        // Add the form URL
+        if (this.setFormUrl && typeof window !== 'undefined') {
+            formData.set('form_url', window.location.href);
+        }
+        // Get all input elements within `eds-input-field`
+        const elements = Array.from(this.formEl.querySelectorAll('eds-input-field'));
+        elements.forEach((element) => {
+            if (element.shadowRoot) {
+                // Get input/textarea/select from the shadow DOM
+                const input = element.shadowRoot.querySelector('input, textarea, select');
+                if (input && input.name) {
+                    if (input.type === 'checkbox' || input.type === 'radio') {
+                        // Handle checkboxes and radio buttons
+                        const checkboxes = Array.from(element.shadowRoot.querySelectorAll(`input[name="${input.name}"]:checked`));
+                        const values = checkboxes.map((checkbox) => checkbox.value);
+                        formData.append(input.name, values.join(',')); // Join multiple values with a comma
+                    }
+                    else if (input.type === 'file') {
+                        // Handle file uploads.
+                        const fileInput = input;
+                        if (fileInput.files && fileInput.files.length > 0) {
+                            // If multiple files are allowed, you can append them all.
+                            Array.from(fileInput.files).forEach((file) => {
+                                // You can either append each file under the same name (if your backend expects an array)
+                                // or you can give them unique names. Here we use the same name.
+                                formData.append(fileInput.name, file);
+                            });
+                        }
+                    }
+                    else {
+                        // Handle other input types
+                        formData.append(input.name, input.value);
+                    }
+                }
+            }
+        });
+        return formData;
+    }
+    makeFormData() {
+        const formData = new FormData();
+        // Add the form name
+        formData.append('form_name', this.name);
+        // Add the form URL
+        if (this.setFormUrl && typeof window !== 'undefined') {
+            formData.set('form_url', window.location.href);
+        }
+        Object.keys(this.values).forEach((key) => {
+            // Append each key-value pair to the FormData object.
+            formData.append(key, this.values[key]);
+        });
+        return formData;
+    }
+    handleChange(e, field) {
+        const target = e.target;
+        if (target.type === 'checkbox') {
+            // Get the current comma separated string or default to an empty string.
+            const currentStr = this.values[field.name] || '';
+            // Convert the string into an array. If the string is empty, we get an empty array.
+            let valuesArray = currentStr ? currentStr.split(',') : [];
+            if (target.checked) {
+                // Only add if it's not already in the array.
+                if (!valuesArray.includes(target.value)) {
+                    valuesArray.push(target.value);
+                }
+            }
+            else {
+                // Remove the value from the array if the checkbox is unchecked.
+                valuesArray = valuesArray.filter((item) => item !== target.value);
+            }
+            // Reassemble the comma separated string and update your form values.
+            this.values = Object.assign(Object.assign({}, this.values), { [field.name]: valuesArray.join(',') });
+        }
+        else {
+            // Handle non-checkbox input normally.
+            this.values = Object.assign(Object.assign({}, this.values), { [field.name]: target.value });
+        }
+        // Emit the updated form state.
+        this.form.emit({
+            event: 'change',
+            field: field.name,
+            value: target.type === 'checkbox' ? this.values[field.name] : target.value,
+            message: `${field.name} updated`,
+            data: this.makeFormData()
+        });
+    }
+    handleInput(e, field) {
+        const target = e.target;
+        // Update the field's value in state.
+        //this.values = { ...this.values, [field.name]: target.value };
+        // Create a copy of the current errors.
+        const newErrors = Object.assign({}, this.errors);
+        // Use the utility to validate the field.
+        const fieldErrors = validateInputField(field, target.value, this.formEl);
+        if (fieldErrors.length > 0) {
+            newErrors[field.name] = fieldErrors;
+        }
+        else {
+            delete newErrors[field.name];
+        }
+        // Update the errors state and the hasError flag.
+        this.errors = newErrors;
+        this.hasError = Object.keys(newErrors).length > 0;
+    }
+    handleSubmit() {
+        var _a, _b;
+        if (this.isSubmitting) {
+            return;
+        }
+        this.isSubmitting = true;
+        this.validateForm();
+        if (this.hasError) {
+            this.isSubmitting = false;
+            this.form.emit({
+                event: 'submit',
+                validated: false,
+                success: false,
+                message: this.errorMessage,
+                data: this.makeFormData()
+            }); // Emit form status submit false validation error
+            sendAnalytics({
+                category: 'ui-component',
+                parentContext: null,
+                tag: this.el.tagName.toLowerCase(),
+                name: `${(_a = this.formBtnLabel) === null || _a === void 0 ? void 0 : _a.toLowerCase()}/non-validated` || '',
+                action: 'click'
+            });
+            return;
+        }
+        // Log each entry in FormData to see file details
+        /*formData.forEach((value, key) => {
+          if (value instanceof File) {
+            console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
+          } else {
+            console.log(`Field: ${key}, Value: ${value}`);
+          }
+        });*/
+        this.form.emit({
+            event: 'submit',
+            success: true,
+            validated: true,
+            message: 'Form data validated successfully',
+            data: this.getFormData()
+        });
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: `${(_b = this.formBtnLabel) === null || _b === void 0 ? void 0 : _b.toLowerCase()}/validated` || '',
+            action: 'click'
+        });
+        // Reset form states
+        this.errors = {};
+        this.formEl.reset();
+        this.isSubmitting = false;
+        return;
+    }
+    render() {
+        const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
+        const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
+        return (h("form", { key: '90512ed881a2380f190d82f06b7bee4ae05e9ecf', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '15184e8e234572b2d5bf538259eea923dce2719b' }, h("slot", { key: 'f583356adf08622d9c7a4d957cd17a70287a619c' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
+            var _a, _b;
+            if (!this.isFieldVisible(field)) {
+                return null;
+            }
+            return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, placeholder: field.placeholder, value: this.values[field.name] || null, type: field.type, icon: field.icon || null, disabled: field.disabled, required: field.required, maxLength: field.maxlength, hint: field.hint, link: field.link, message: field.message, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleInput(e, field), onChange: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
+        })), this.formBtn && (h("div", { key: 'b60ae579201c95ce875f2e576cda679226aa0402', class: "mt-20" }, h("eds-button", { key: '7d603382885467496204956b66e156ef9f5bbb4d', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+    }
+    static get is() { return "eds-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-form.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the form, used for grouping inputs and identifying the form."
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "'eds-form'"
+            },
+            "setFormUrl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, includes the current form URL in the submission data."
+                },
+                "attribute": "set-form-url",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "formBtn": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, includes a submit button in the form."
+                },
+                "attribute": "form-btn",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "formBtnLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, includes a submit button in the form."
+                },
+                "attribute": "form-btn-label",
+                "reflect": false,
+                "defaultValue": "'Submit'"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The message displayed when the form submission fails."
+                },
+                "attribute": "error-message",
+                "reflect": false,
+                "defaultValue": "'Some fields in your form are incorrect.'"
+            },
+            "fields": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | any[]",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A JSON string representing the fields in the form.\nExample:\n```json\n[\n  { \"name\": \"email\", \"label\": \"Email\", \"type\": \"text\", \"required\": true },\n  { \"name\": \"password\", \"label\": \"Password\", \"type\": \"password\", \"required\": true }\n]\n```"
+                },
+                "attribute": "fields",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "initData": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: any }",
+                    "resolved": "{ [key: string]: any; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The init data the form will attempt to populate in the provided fields."
+                },
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "values": {},
+            "isSubmitting": {},
+            "hasError": {},
+            "errors": {},
+            "parsedFields": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "form",
+                "name": "form",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    event: 'input' | 'change' | 'submit';\n    validated?: boolean;\n    field?: string;\n    value?: any;\n    message?: string;\n    success?: boolean;\n    data: any;\n  }",
+                    "resolved": "{ event: \"input\" | \"change\" | \"submit\"; validated?: boolean; field?: string; value?: any; message?: string; success?: boolean; data: any; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "fields",
+                "methodName": "parseFields"
+            }];
+    }
+}

package/dist/collection/shared-ui/eds-form/eds-form.stories.js

@@ -0,0 +1,82 @@
+import { html } from "lit-html";
+export default {
+    title: 'Shared UI/Form',
+    component: 'eds-form',
+    argTypes: {
+        name: { control: 'text', description: 'Form name', defaultValue: 'extended-form' },
+        fields: { control: 'object', description: 'Form fields as JSON array' },
+        formBtn: { control: 'boolean', description: 'Show form button', defaultValue: true },
+        formBtnLabel: {
+            control: 'text',
+            description: 'Form button Label',
+            defaultValue: 'Validate'
+        }
+    }
+};
+const Template = (args) => html `
+  <eds-form
+    name="${args.name}"
+    .fields="${JSON.stringify(args.fields)}"
+    form-btn="${args.formBtn}"
+    form-btn-label="${args.formBtnLabel}"
+  ></eds-form>
+`;
+export const Default = Template.bind({});
+Default.args = {
+    name: 'extended-form',
+    fields: [
+        { name: 'username', label: 'Username', type: 'text', required: true, maxlength: 10, placeholder: 'Username' },
+        { name: 'email', label: 'Email', type: 'email', required: true },
+        { name: 'number', label: 'Number', type: 'number', required: true },
+        { name: 'password', label: 'Password', type: 'password', required: true, maxlength: 50 },
+        { name: 'date', label: 'Date', type: 'date', required: true },
+        { name: 'file', label: 'File', type: 'file', required: false },
+        { name: 'hiddenField', type: 'hidden', value: 'hiddenValue' },
+        { name: 'bio', label: 'Biography', type: 'textarea', required: true, maxlength: 300 },
+        {
+            name: 'role',
+            label: 'Role',
+            type: 'select',
+            required: true,
+            options: [
+                { label: 'Admin', value: 'admin' },
+                { label: 'Editor', value: 'editor' },
+                { label: 'Viewer', value: 'viewer' }
+            ]
+        },
+        {
+            name: 'preferences',
+            type: 'checkbox',
+            label: 'Select your preferences',
+            required: true,
+            options: [
+                { value: 'option1', label: 'Option 1' },
+                { value: 'option2', label: 'Option 2' },
+                { value: 'option3', label: 'Option 3' }
+            ]
+        },
+        {
+            name: 'gender',
+            type: 'radio',
+            label: 'Select your gender',
+            required: true,
+            options: [
+                { value: 'female', label: 'Female' },
+                { value: 'male', label: 'Male' }
+            ]
+        },
+        { name: 'newsletter', label: 'Newsletter', type: 'checkbox', value: 'subscribe', required: true },
+        { name: 'range', label: 'Range bar', type: 'range', min: '0', max: '10', step: '1', required: true },
+        {
+            name: 'enable-me',
+            label: "I'm disabled - enable me",
+            type: 'text',
+            required: true,
+            maxlength: 10,
+            placeholder: 'Enable me from this story input fields',
+            disabled: true
+        }
+    ],
+    formBtn: true,
+    formBtnLabel: 'Validate'
+};

package/dist/collection/shared-ui/eds-frame/eds-frame.css

@@ -0,0 +1,116 @@
+.bg-inverse {
+    background-color: var(--white);
+  }
+  .min-h-156 {
+    min-height: 156px;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .rounded-full {
+    border-radius: 9999px;
+  }
+  .rounded-lg {
+    border-radius: 16px;
+  }
+  .rounded-md {
+    border-radius: 12px;
+  }
+  .border-soft {
+    border-color: rgba(0, 0, 0, .15 );
+  }
+  .border-softer {
+    border-color: rgba(0, 0, 0, .1 );
+  }
+  .border-softest {
+    border-color: rgba(0, 0, 0, .05 );
+  }
+  .effect-focus-within {
+    outline-width: 3px;
+    outline-offset: 2px;
+    outline-color: var(--green-500);
+  }
+  .effect-focus-within:focus-within {
+    outline-style: solid;
+  }
+  .relative {
+    position: relative;
+  }
+  .flex {
+    display: flex;
+  }
+  .grow {
+    flex-grow: 1;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .border-2 {
+    border-width: 2px;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .h-full {
+    height: 100%;
+  }
+  .h-auto {
+    height: auto;
+  }
+  .effect-height {
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      transition-property: height;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .py-8 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .px-12 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+  .f-ui-02 {
+    font-family: var(--f-ui-02-fontFamily);
+    font-weight: var(--f-ui-02-fontWeight);
+    font-size: var(--f-ui-02-fontSize);
+    line-height: var(--f-ui-02-lineHeight);
+    letter-spacing: var(--f-ui-02-letterSpacing);
+  }
+  .ml-auto {
+    margin-left: auto;
+  }
+  .border-t-2 {
+    border-top-width: 2px;
+  }
+  .border {
+    border: 1px solid rgba(0, 0, 0, .1 );
+  }
+  .border-2 {
+    border: 1px solid rgba(0, 0, 0, .1 );
+  }
+  .container {
+    width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .container > * {
+    --container-outer-gutter: 0;
+    --breakout-container-outer-gutter: 0;
+  }
+  .ml-8 {
+    margin-left: 0.5rem;
+  }
+  .mr-8 {
+    margin-right: 0.5rem;
+  }
+  .mt-16 {
+    margin-top: 1rem;
+  }
+