@ebrains/components 0.0.1-alpha.0

package/dist/collection/components/eds-form/eds-form.js

@@ -0,0 +1,482 @@
+import { h } from "@stencil/core";
+/**
+ * `EdsForm` is a comprehensive form component designed to handle form submission with validation,
+ * error handling, and customizable fields. It offers several options for handling alerts and
+ * success/error messages and supports various input types and configurations.
+ *
+ * Key Features:
+ * - Configurable validation for fields, including dynamic field validation.
+ * - Customizable success and error messages displayed upon submission.
+ * - Optionally includes a submit button, which can display a loading state during submission.
+ * - Supports file upload, hidden fields, and dynamic field parsing.
+ * - Emits `formSubmitting` event when the form is submitting.
+ *
+ * This component is ideal for implementing complex forms with specific validation and submission behaviors.
+ */
+export class EdsForm {
+    constructor() {
+        this.handleChange = (e, field) => {
+            if (field.type === 'text') {
+                const target = e.target;
+                const { name, type, required, maxlength } = field;
+                const value = target.value;
+                const fieldErrors = this.validateField(name, value, type, required, maxlength);
+                if (fieldErrors.length > 0) {
+                    this.errors = Object.assign(Object.assign({}, this.errors), { [name]: fieldErrors });
+                    this.hasError = true;
+                }
+                else {
+                    delete this.errors[name];
+                    this.hasError = Object.keys(this.errors).length > 0;
+                }
+                this.alertMessage = null;
+            }
+        };
+        this.handleSubmit = async (e) => {
+            e.preventDefault();
+            if (this.isSubmitting) {
+                return;
+            }
+            this.validateForm();
+            if (this.hasError) {
+                this.alertMessage = this.errorMessage;
+                return;
+            }
+            this.isSubmitting = true;
+            this.formSubmitted = false;
+            this.alertMessage = null;
+            this.errors = {};
+            const formData = await this.getFormData();
+            // 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}`);
+              }
+            });*/
+            if (this.setFormUrl && typeof window !== 'undefined') {
+                formData.set('form_url', window.location.href);
+            }
+            /*const formDataObject = Object.fromEntries((formData as any).entries());
+            console.log(JSON.stringify(formDataObject));*/
+            const headers = this.coupleAuth
+                ? { Authorization: `Bearer ${this.authUser.token}` } // Include the Keycloak token
+                : {};
+            try {
+                const response = await fetch(this.endpoint, {
+                    method: 'POST',
+                    body: formData,
+                    headers
+                });
+                // Check if the response status indicates an error
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    this.hasError = true;
+                    this.alertMessage = errorData.error || this.errorMessage;
+                    return;
+                }
+                const data = await response.json();
+                this.formSubmitted = true;
+                this.alertMessage = data.message || this.successMessage;
+                this.formEl.reset();
+            }
+            catch (err) {
+                this.hasError = true;
+                //when api is unreachable will trigger the error message
+                this.alertMessage = `${this.errorMessage}:: ${err}`;
+            }
+            finally {
+                this.isSubmitting = false;
+                this.formSubmitting.emit(this.isSubmitting);
+            }
+        };
+        this.smallAlert = false;
+        this.setFormUrl = true;
+        this.submitBtn = true;
+        this.submitBtnLabel = 'Submit';
+        this.successMessage = 'Your message has been sent.';
+        this.errorMessage = 'Some fields in your form are incorrect.';
+        this.endpoint = undefined;
+        this.name = 'form';
+        this.fields = undefined;
+        this.coupleAuth = false;
+        this.formSubmitted = false;
+        this.hasError = false;
+        this.errors = {};
+        this.isSubmitting = false;
+        this.alertMessage = null;
+        this.isAuthenticated = false;
+        this.authUser = undefined;
+    }
+    onAuthStatusChanged(event) {
+        var _a;
+        this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
+        this.authUser = event.detail.user;
+    }
+    componentDidLoad() {
+        // 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);
+        });
+    }
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    // Validate individual fields dynamically
+    validateField(name, value, type, required, maxLength) {
+        const errors = [];
+        if (required && !value) {
+            errors.push(`${name} is required.`);
+        }
+        if (maxLength && typeof value === 'string' && value.length > maxLength) {
+            errors.push(`${name} must be at most ${maxLength} characters.`);
+        }
+        if (type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.toString())) {
+            errors.push('Invalid email format.');
+        }
+        return errors;
+    }
+    validateFieldGroup(name, _type, required) {
+        const groupElements = Array.from(this.formEl.querySelectorAll(`[name="${name}"]`));
+        const isChecked = groupElements.some((el) => el.checked);
+        const errors = [];
+        if (required && !isChecked) {
+            errors.push(`At least one option in ${name} is required.`);
+        }
+        return errors;
+    }
+    validateSingleBox(name, required) {
+        const errors = [];
+        const checkboxElement = this.formEl.querySelector(`[name='${name}']`);
+        if (required && checkboxElement && !checkboxElement.checked) {
+            errors.push(`${name} is required.`);
+        }
+        return errors;
+    }
+    validateForm() {
+        this.errors = {};
+        this.hasError = false;
+        this.parseFields.forEach((field) => {
+            if (field.type !== 'hidden') {
+                if ((field.type === 'checkbox' || field.type === 'radio') && !field.options) {
+                    // Single checkbox validation
+                    const fieldErrors = this.validateSingleBox(field.name, field.required);
+                    if (fieldErrors.length > 0) {
+                        this.errors[field.name] = fieldErrors;
+                        this.hasError = true;
+                    }
+                }
+                else if (field.options && (field.type === 'checkbox' || field.type === 'radio')) {
+                    const fieldErrors = this.validateFieldGroup(field.name, field.type, field.required);
+                    if (fieldErrors.length > 0) {
+                        this.errors[field.name] = fieldErrors;
+                        this.hasError = true;
+                    }
+                }
+                else {
+                    const fieldElement = this.findFieldElement(field.name);
+                    if (fieldElement) {
+                        const value = fieldElement.value;
+                        const fieldErrors = this.validateField(field.name, value, field.type, field.required, field.maxlength);
+                        if (fieldErrors.length > 0) {
+                            this.errors[field.name] = fieldErrors;
+                            this.hasError = true;
+                        }
+                    }
+                }
+            }
+        });
+    }
+    // Helper function to find elements in the shadow DOM
+    findFieldElement(name) {
+        const elements = Array.from(this.formEl.querySelectorAll('eds-input-field')); // Get all elements
+        for (const element of elements) {
+            if (element.shadowRoot) {
+                const shadowField = element.shadowRoot.querySelector(`[name="${name}"]`);
+                if (shadowField) {
+                    return shadowField;
+                }
+            }
+        }
+        return null;
+    }
+    async getFormData() {
+        const formData = new FormData();
+        // Add the form name
+        formData.append('form_name', this.name);
+        // 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 {
+                        // Handle other input types
+                        formData.append(input.name, input.value);
+                    }
+                }
+            }
+        });
+        return formData;
+    }
+    get parseFields() {
+        return JSON.parse(this.fields);
+    }
+    render() {
+        const hiddenFields = this.parseFields.filter((field) => field.type === 'hidden');
+        const otherFields = this.parseFields.filter((field) => field.type !== 'hidden');
+        return (h("form", { key: '8c3e1ba967145566e669ae821bc373d727f47ff7', ref: (el) => (this.formEl = el), enctype: "multipart/form-data", autocomplete: "on", method: "post", onSubmit: this.handleSubmit }, h("div", { key: '0cebec16d61d15b296fca220af6228744042aa30' }, h("slot", { key: '20c166f9d5905b228cb876d74b48c9d229d294e5' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
+            var _a, _b;
+            return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, type: field.type, icon: field.icon || null, required: field.required, maxLength: field.maxlength, hint: field.hint, 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 />'),
+                // @ts-ignore
+                onInput: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
+        })), this.submitBtn && (h("div", { key: 'e7f2bfd9a6a9f5822553b421fc5e6e5cee53682c', class: "mt-20" }, h("eds-button", { key: 'da2663e6d033fd610e2a8b6bc66b1316b3f40f71', intent: "primary", label: this.submitBtnLabel, disabled: this.isSubmitting || (this.coupleAuth && !this.isAuthenticated), loading: this.isSubmitting, onClick: (e) => this.handleSubmit(e) }))), this.alertMessage && (this.formSubmitted || this.hasError) && (h("div", { key: '19c6803d24e9dd3d7299fe31f3536b48b1839eaa', class: "mt-20" }, h("eds-alert", { key: '0e613546e7a9d58ada6ce9dbf2a6da4b2a608359', message: this.alertMessage, intent: this.hasError ? 'error' : 'success', direction: "horizontal" })))));
+    }
+    static get is() { return "eds-form"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-form.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "smallAlert": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, displays a small alert for messages."
+                },
+                "attribute": "small-alert",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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"
+            },
+            "submitBtn": {
+                "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": "submit-btn",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "submitBtnLabel": {
+                "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": "submit-btn-label",
+                "reflect": false,
+                "defaultValue": "'Submit'"
+            },
+            "successMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The message displayed when the form submission is successful."
+                },
+                "attribute": "success-message",
+                "reflect": false,
+                "defaultValue": "'Your message has been sent.'"
+            },
+            "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.'"
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The API endpoint where the form data will be submitted."
+                },
+                "attribute": "endpoint",
+                "reflect": false
+            },
+            "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": "'form'"
+            },
+            "fields": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "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
+            },
+            "coupleAuth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Couping Auth and Submit button state\nSubmit button's state (disabled) is coupled with the Users' auth state - if user auth true then submit btn is enabled\nThis useful when the component is used as Survey and more types."
+                },
+                "attribute": "couple-auth",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "formSubmitted": {},
+            "hasError": {},
+            "errors": {},
+            "isSubmitting": {},
+            "alertMessage": {},
+            "isAuthenticated": {},
+            "authUser": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "formSubmitting",
+                "name": "formSubmitting",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an event when the form's submission state changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "authStatusChanged",
+                "method": "onAuthStatusChanged",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/eds-form/eds-form.stories.js

@@ -0,0 +1,89 @@
+import { html } from "lit-html";
+export default {
+    title: 'Components/Form',
+    component: 'eds-form',
+    argTypes: {
+        name: { control: 'text', description: 'Form name', defaultValue: 'extended-form' },
+        endpoint: { control: 'text', description: 'Endpoint URL', defaultValue: 'http://127.0.0.1:5000/api/data' },
+        fields: { control: 'object', description: 'Form fields as JSON array' },
+        successMessage: {
+            control: 'text',
+            description: 'Message on successful form submission',
+            defaultValue: 'Form submitted successfully!'
+        },
+        errorMessage: {
+            control: 'text',
+            description: 'Message on form submission error',
+            defaultValue: 'Please fix the errors in the form.'
+        },
+        submitBtn: { control: 'boolean', description: 'Show submit button', defaultValue: true },
+        smallAlert: { control: 'boolean', description: 'Show small alert message', defaultValue: false },
+        setFormUrl: { control: 'boolean', description: 'Include the current URL in the form data', defaultValue: true }
+    }
+};
+const Template = (args) => html `
+  <eds-form
+    name="${args.name}"
+    endpoint="${args.endpoint}"
+    .fields="${JSON.stringify(args.fields)}"
+    success-message="${args.successMessage}"
+    error-message="${args.errorMessage}"
+    ?submit-btn="${args.submitBtn}"
+    ?small-alert="${args.smallAlert}"
+    ?set-form-url="${args.setFormUrl}"
+  ></eds-form>
+`;
+export const Default = Template.bind({});
+Default.args = {
+    name: 'extended-form',
+    endpoint: 'http://127.0.0.1:5000/api/data',
+    fields: [
+        { name: 'username', label: 'Username', type: 'text', required: true, maxlength: 10 },
+        { 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 }
+    ],
+    successMessage: 'Form submitted successfully!',
+    errorMessage: 'Please fix the errors in the form.',
+    submitBtn: true,
+    smallAlert: false,
+    setFormUrl: true
+};