fix: removed import of inputcontrols in QuickForm.tsx and adjust playground to use them from components folder instead

Author: KasperBaun

packages/core/src/components/QuickForm.tsx

@@ -2,7 +2,6 @@
 import React from 'react';
 import { useQuickForm } from "../state/QuickFormContext";
 import { Ending, Submit, Intro, SlideRenderer } from "./index";
-import "./question/input-types/index";
 
 export const QuickForm: React.FC = () => {
     const { state, setIntroVisited } = useQuickForm();

packages/playground/Index.tsx

@@ -1,6 +1,5 @@
-import ReactDOM from 'react-dom';
 import { App } from './src/App';
+import { createRoot } from 'react-dom/client';
 
 const container = document.getElementById('root');
-
-ReactDOM.render(<App />, container);
+createRoot(container).render(<App />);

packages/playground/src/App.tsx

@@ -3,11 +3,8 @@ import { QuickFormDefinition } from '../../core/src/model';
 import testdata from "./data/allInputControlsMultipleSlidesTest.json";
 import { QuickFormProvider } from '../../core/src/state';
 import { NavigationButton, QuickForm } from '../../core/src/components';
-import "./components/buttons-input/ButtonsInput";
-import "./components/checkbox-input/CheckboxInput";
-import "./components/radio-input/RadioInput";
-import "./components/slider-input/SliderInput";
-import { QuickFormContainer } from './components/container/QuickFormContainer';
+import { QuickFormContainer } from './components';
+import "./components/index";
 
 const containerStyling: React.CSSProperties = {
     width: '100%',

packages/playground/src/components/baseinput/BaseInputComponent.tsx

@@ -0,0 +1,166 @@
+import { quickformtokens, useHandleEnterKeypress, useQuickForm } from "@eavfw/quickform-core";
+import { useFocusableQuestion } from "@eavfw/quickform-core/src/hooks/useFocusableQuestion";
+import { CSSProperties, ChangeEvent, InputHTMLAttributes, useEffect, useState } from "react";
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { QuestionModel } from "@eavfw/quickform-core/src/model";
+import { IconResolver, IconType } from "../../../../core/src/components/icons/IconResolver";
+
+import { trace } from "@opentelemetry/api";
+
+const tracer = trace.getTracer("quickform", "1.0.0");
+
+const useInputTextStyles = makeStyles({
+    inputContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative',
+        backgroundColor: 'transparent',
+        color: 'var(--on-surface)',
+        width: '100%',
+        ...shorthands.borderTop('none'),
+        ...shorthands.borderLeft('none'),
+        ...shorthands.borderRight('none'),
+        ...shorthands.borderBottom("1px", "solid", `${quickformtokens?.questionPlaceholderColor || "black"}`),
+
+        ':focus': {
+            ...shorthands.borderBottom("1px", "solid", `${quickformtokens?.primary || "blue"}`),
+            paddingBottom: '8px',
+        },
+    },
+    inputText: {
+        color: 'var(--on-surface)',
+        backgroundColor: 'transparent',
+        fontSize: quickformtokens?.questionInputFontSize || "16px",
+        marginTop: '8px',
+        paddingBottom: '9px',
+        width: '100%',
+        ...shorthands.border('none'),
+
+        '@media screen and (max-width: 599px)': {
+            fontSize: quickformtokens?.questionInputFontSize || "16px",
+            marginTop: '32px',
+        },
+
+    },
+
+    inputIcon: {
+        marginTop: '8px',
+        paddingBottom: '9px',
+    },
+    iconLeft: {
+        left: '0',
+        paddingRight: '15px'
+    },
+    iconRight: {
+        right: '0',
+        paddingLeft: '15px'
+    },
+});
+
+type BaseInputComponentProps = {
+    type: InputHTMLAttributes<HTMLInputElement>["type"],
+    questionModel: QuestionModel,
+    beforeIcon?: IconType;
+    afterIcon?: IconType
+    style?: CSSProperties
+    className?: string,
+}
+
+
+
+export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ questionModel, className, style, type, beforeIcon, afterIcon }) => {
+
+    const [text, setText] = useState<string>(questionModel!.output);
+    const ref = useFocusableQuestion<HTMLInputElement>(questionModel.logicalName);
+    const { answerQuestion } = useQuickForm();
+    const styles = useInputTextStyles();
+
+    const span = trace.getActiveSpan();
+
+    if (span) {
+        span.addEvent("BaseInputComponent:render");
+    }
+
+
+
+    const resize = () => {
+        const input = ref.current;
+        if (!input)
+            return;
+
+        const oldvalue = input.value;
+
+        if (!oldvalue || oldvalue === '')
+            input.value = input.placeholder;
+
+        const isOverflowed = input.scrollWidth > input.clientWidth;
+        input.value = oldvalue;
+        if (isOverflowed) {
+            var style = window.getComputedStyle(input, null).getPropertyValue('font-size');
+            input.style.fontSize = (parseFloat(style) - 1) + "px";
+            resize();
+        }
+    }
+
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+        console.log("BaseInputComponent:handleChange", event.target.value);
+        if (span) {
+            span.addEvent("BaseInputComponent:handleChange", { 'value': event.target.value });
+        }
+        //EXPLAIN: WHY IS THIS HERE? If no reason, lets remove.
+        if (event.target.value === "")
+            questionModel.errorMsg = "";
+
+
+        setText(() => event.target.value);
+        answerQuestion(questionModel.logicalName, event.target.value, true);
+        resize();
+    }
+
+    /**
+     * The input control is responsible of setting itself focused when becoming active.
+     * - We should also listen to inputcontrols being focused and if not active, trigger a reducer that sets it to active. Ultimately removing active from other questions. 
+     * This happens right now when an answer is given (intermediate or not), so not critical.
+     */
+    useEffect(() => {
+        if (questionModel.isActive)
+            ref.current?.focus();
+    }, [questionModel.isActive]);
+
+    /**
+     * While a base input component is active we should answer the question upon enter.
+     */
+    useHandleEnterKeypress("baseinput", !questionModel.isActive, () => {
+        answerQuestion(questionModel.logicalName, text, false);
+    });
+
+    return (
+        <div className={mergeClasses(styles.inputContainer, className)} style={style}>
+            {beforeIcon &&
+                <IconResolver
+                    type={beforeIcon}
+                    className={mergeClasses(styles.inputIcon, styles.iconLeft)}
+                    size={18}
+                    color={quickformtokens.primary}
+                />
+            }
+            <input
+                style={{ outline: 'none', }}
+                ref={ref}
+                type={type}
+                className={styles.inputText}
+                placeholder={questionModel.placeholder}
+                value={text}
+                onChange={handleChange}
+            />
+            {afterIcon &&
+                <IconResolver
+                    type={afterIcon}
+                    className={mergeClasses(styles.inputIcon, styles.iconRight)}
+                    size={18}
+                    color={quickformtokens.primary}
+                />
+            }
+        </div>
+    );
+}

packages/playground/src/components/email/EmailInput.tsx

@@ -0,0 +1,19 @@
+import { InputComponentType, registerInputComponent } from "@eavfw/quickform-core";
+import { BaseInputComponent } from "../baseinput/BaseInputComponent";
+import { emailInputSchema } from "./EmailInputSchema";
+import { IconType } from "../../../../core/src/components/icons/IconResolver";
+
+export type EmailProperties = {
+    inputType: "email";
+    defaultValue?: string;
+    beforeIcon?: IconType;
+    afterIcon?: IconType
+}
+
+export const EmailInput: InputComponentType<EmailProperties> = (props) => {
+    return <BaseInputComponent type="email" {...props} />
+}
+
+/* This property assignment grants QuickformDesigner metadata information about which properties the inputcomponent needs */
+EmailInput.inputSchema = emailInputSchema;
+registerInputComponent("email", EmailInput);

packages/playground/src/components/email/EmailInputSchema.ts

@@ -0,0 +1,58 @@
+import { InputComponentMetadata } from "@eavfw/quickform-core";
+import { InputPropertiesTypes } from "@eavfw/quickform-core/src/model";
+
+export const emailInputSchema: InputComponentMetadata<InputPropertiesTypes> = {
+    label: "Email",
+    uiSchema: {
+        paragraph: {
+            "ui:widget": "textarea"
+        }
+    },
+    schema: {
+        type: "object",
+
+        properties: {
+            text: {
+                title: "Text",
+                type: "string"
+            },
+            placeholder: {
+                title: "Placeholder",
+                type: "string"
+            },
+            paragraph: {
+                title: "Paragraph",
+                type: "string"
+            },
+            beforeIcon: {
+                enum: [
+                    "Phone",
+                    "Email",
+                    "User"
+                ],
+                // @ts-ignore
+                "enumNames": [
+                    "Phone",
+                    "Email",
+                    "User"
+                ]
+            },
+            afterIcon: {
+                enum: [
+                    "Phone",
+                    "Email",
+                    "User"
+                ],
+                // @ts-ignore
+                "enumNames": [
+                    "Phone",
+                    "Email",
+                    "User"
+                ]
+            }
+        }
+    },
+    field: {
+        type: "text",
+    }
+}

packages/playground/src/components/index.ts

@@ -0,0 +1,25 @@
+import { ButtonsInput } from './buttons-input/ButtonsInput';
+import { CheckboxInput } from './checkbox-input/CheckboxInput';
+import { EmailInput } from './email/EmailInput';
+import { MultilineInput } from './multiline/MultilineInput';
+import { OverviewList } from './overview-list/OverviewList';
+import { PhoneInput } from './phone/PhoneInput';
+import { QuickFormContainer } from './container/QuickFormContainer';
+import { RadioInput } from './radio-input/RadioInput';
+import { SliderInput } from './slider-input/SliderInput';
+import { TextInput } from './text/TextInput';
+import { ToggleOverviewButton } from './toggle-overview-button/ToggleOverviewButton';
+
+export {
+    ButtonsInput,
+    CheckboxInput,
+    EmailInput,
+    MultilineInput,
+    OverviewList,
+    PhoneInput,
+    QuickFormContainer,
+    RadioInput,
+    SliderInput,
+    TextInput,
+    ToggleOverviewButton
+};

packages/playground/src/components/multiline/MultilineInput.tsx

@@ -0,0 +1,78 @@
+"use client";
+import React, { ChangeEvent, useEffect, useRef, useState } from "react";
+import { makeStyles, shorthands } from "@griffel/react";
+import {  useQuickForm, InputComponentType, registerInputComponent, quickformtokens } from "@eavfw/quickform-core";
+import { multilineInputSchema } from "./MultilineInputSchema";
+import { MultilineProperties } from "../../../../core/src/model";
+
+const useInputTextStyles = makeStyles({
+    inputText: {
+        backgroundColor: 'transparent',
+        ...shorthands.border(`1px solid ${quickformtokens.onSurface}`),
+        ...shorthands.borderRadius('5px'),
+        color: quickformtokens.onSurface,
+        fontSize: quickformtokens.multilineTextFontSize,
+        marginTop: '15px',
+        paddingBottom: '9px',
+        width: '100%',
+        maxHeight: '8rem', // Set maximum height for three lines
+        height: '8rem',
+        resize: 'vertical',
+        ...shorthands.overflow('auto'),
+        '&:focus-visible': {
+            ...shorthands.borderBottom("2px", "solid", `${quickformtokens.onSurface}`),
+            ...shorthands.outline('none'),
+            paddingBottom: '8px'
+        },
+        '&::placeholder': {
+            color: quickformtokens.onSurface,
+            opacity: quickformtokens.mediumEmphasisOpacity,
+        },
+        '&::-ms-input-placeholder': {
+            color: quickformtokens.onSurface,
+            opacity: quickformtokens.mediumEmphasisOpacity,
+        },
+        '@media screen and (max-width: 599px)': {
+            fontSize: quickformtokens.multilineTextMobileFontSize,
+            marginTop: '32px',
+        },
+    },
+});
+
+export const MultilineInput: InputComponentType<MultilineProperties> = ({ questionModel }) => {
+    const styles = useInputTextStyles();
+    const { isFirstQuestionInCurrentSlide, answerQuestion, state } = useQuickForm();
+    const { placeholder, output } = questionModel;
+    const [text, setText] = useState<string>(output || '');
+    const ref = useRef<HTMLTextAreaElement>(null);
+
+    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+        const newValue = event.target.value.replace(/\r?\n/g, '\n'); // Normalize newline characters
+        setText(newValue);
+        answerQuestion(questionModel.logicalName, newValue, true);
+    };
+
+    /**
+     * The input control is responsible of setting itself focused when becoming active.
+     * - We should also listen to inputcontrols being focused and if not active, trigger a reducer that sets it to active. Ultimately removing active from other questions. 
+     * This happens right now when an answer is given (intermediate or not), so not critical.
+     */
+    useEffect(() => {
+        if (questionModel.isActive || ref.current && isFirstQuestionInCurrentSlide(questionModel.logicalName))
+            ref.current?.focus();
+    }, [ref, isFirstQuestionInCurrentSlide, questionModel.logicalName, questionModel.isActive]);
+
+    return (
+        <textarea onBlur={() => answerQuestion(questionModel.logicalName, text, false)}
+            ref={ref}
+            className={styles.inputText}
+            placeholder={placeholder}
+            value={text}
+            onChange={handleChange}
+            style={{ width: '100%' }}
+        />
+    );
+};
+
+MultilineInput.inputSchema = multilineInputSchema;
+registerInputComponent("multilinetext", MultilineInput);