Merge commit '3c7783c510ef0b348d8c56e0a49e6b477d8ad6f8' into vnext

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

packages/core/src/components/QuickForm.tsx

@@ -1,7 +1,7 @@
 import "../style/QuickForm.css";
 import React from "react";
 import { useQuickForm } from "../state/QuickFormContext";
-import { Ending, ErrorMessage, Submit } from "./index";
+import { Ending, Submit } from "./index";
 import { Intro } from "./intro/Intro";
 import { SlideRenderer } from "./slide-renderer/SlideRenderer";
 
@@ -21,7 +21,6 @@ export const QuickForm: React.FC = () => {
 
     return (
         <div className="container">
-            {state.errorMsg && state.errorMsg !== "" && <ErrorMessage message={state.errorMsg} />}
             <SlideRenderer />
         </div>
     );

packages/core/src/components/error-message/ErrorMessage.tsx

@@ -9,9 +9,15 @@ type ErrorProps = {
 
 export const ErrorMessage: React.FC<ErrorProps> = ({ message }: ErrorProps) => {
   const [isVisible, setIsVisible] = useState(false);
-  const { dispatch } = useQuickForm();
+  const { dispatch, state } = useQuickForm();
 
-  useDelayedClickListener(() => dispatch({ type: "SET_ERROR_MSG", msg: "" }));
+  const resetErrorMessage = () => {
+    if (state.errorMsg !== "") {
+      dispatch({ type: "SET_ERROR_MSG", msg: "" })
+    }
+  }
+
+  useDelayedClickListener(resetErrorMessage);
 
   useEffect(() => {
     if (message) {

packages/core/src/components/question/input-types/multiline/MultilineInput.tsx

@@ -6,15 +6,7 @@ import { useQuickForm } from "../../../../state/QuickFormContext";
 import React from "react";
 import { InputProps } from "../../../../model/index";
 
-export type MultilineInput = {
-    readonly placeholder?: string;
-    readonly className?: string;
-    readonly value?: string;
-    readonly onChange?: ChangeEventHandler<HTMLTextAreaElement>;
-    readonly width?: string;
-    readonly focus?: boolean;
-    readonly maxLength?: number;
-}
+
 
 export function MultilineInput({ questionModel, onOutputChange }: InputProps) {
     const { isFirstQuestionInCurrentSlide } = useQuickForm();
@@ -45,9 +37,19 @@ export function MultilineInput({ questionModel, onOutputChange }: InputProps) {
     );
 }
 
+type MultilineInputProps = {
+    readonly placeholder?: string;
+    readonly className?: string;
+    readonly value?: string;
+    readonly onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    readonly width?: string;
+    readonly focus?: boolean;
+    readonly maxLength?: number;
+}
+
 const QuestionTextArea = forwardRef(
     (
-        { placeholder, className, value, onChange, width, focus = true, maxLength }: MultilineInput,
+        { placeholder, className, value, onChange, width, focus = true, maxLength }: MultilineInputProps,
         passedRef: ForwardedRef<HTMLTextAreaElement>
     ) => {
         const textareaRef = (passedRef as RefObject<HTMLTextAreaElement>) ?? useRef<HTMLTextAreaElement>(null);

packages/core/src/components/slide-renderer/SlideRenderer.tsx

@@ -6,39 +6,16 @@ import { Slide } from '../slide/Slide';
 
 
 export const SlideRenderer: React.FC = () => {
-    const { state, goToNextSlide, answerQuestion } = useQuickForm();
+    const { state, answerQuestion } = useQuickForm();
     const currentSlide = state.slides[state.currIdx];
-    // const [allQuestionsAnswered, setAllQuestionsAnswered] = useState(false);
-
-    // useEffect(() => {
-    //     // This effect runs whenever currentSlide changes, to reset our check.
-    //     setAllQuestionsAnswered(currentSlide.isAnswered);
-    // }, [currentSlide]);
-
-    // useEffect(() => {
-    //     // This effect attempts to navigate to the next slide if all questions are answered.
-    //     if (allQuestionsAnswered) {
-    //         goToNextSlide();
-    //     }
-    // }, [allQuestionsAnswered, goToNextSlide]);
 
+    /* If all questions are answered, goToNextSlide() is called by the answerQuestion function (dispatch) */
     const handleGoToNextSlideClicked = () => {
         for (var q of currentSlide.questions) {
             if (typeof q.output !== "undefined" && q.output !== "") {
                 answerQuestion(q.logicalName!, q.output);
             }
         }
-
-        // // Check outside the loop, after state has a chance to update
-        // const allAnswered = !currentSlide.questions.some(q => q.answered === false);
-        // setAllQuestionsAnswered(allAnswered);
-
-        // if (!allAnswered) {
-        //     console.log("Not all question have been answered on slide: ", currentSlide);
-        // } else {
-        //     console.log("All questions answered for slide: ", currentSlide);
-        //     // We no longer directly call goToNextSlide here
-        // }
     };
 
     /* Listens to enter key pressed */
@@ -53,7 +30,7 @@ export const SlideRenderer: React.FC = () => {
         >
             <Slide model={currentSlide} />
             <Button
-                style={{ display: 'flex', alignItems: 'center', justifyContent: 'start'}}
+                style={{ display: 'flex', alignItems: 'center', justifyContent: 'start' }}
                 onClick={handleGoToNextSlideClicked}
                 showPressEnter={!enterKeyDisabled}
                 children={"Ok"} />

packages/core/src/hooks/useHandleEnterKeypress.ts

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { useEffect } from "react";
 
 export function useHandleEnterKeypress(inputType: "multilinetext" | string, disabled?: boolean, customFunc?: () => void) {

packages/core/src/hooks/useHandleScroll.ts

@@ -1,10 +1,10 @@
-"use client"
+"use client";
 import { useEffect, useRef } from "react";
 import { useQuickForm } from "../state/QuickFormContext";
 
 export function useHandleScroll() {
     const timerIdRef = useRef<number>();
-    const { goToNextSlide: goToNextQuestion, goToPrevSlide: goToPreviousQuestion, state: { submitStatus } } = useQuickForm();
+    const { goToNextSlide, goToPrevSlide, state: { submitStatus } } = useQuickForm();
 
     useEffect(() => {
         function handleScroll(event: WheelEvent) {
@@ -17,15 +17,15 @@ export function useHandleScroll() {
             timerIdRef.current = window.setTimeout(() => {
                 if (event.deltaY > 0) {
                     //   handleOkClick();
-                    goToNextQuestion();
+                    goToNextSlide();
                 } else if (event.deltaY <= -1) {
                     //   setErrorMsg({});
                     //   setQuestionNum((prevValue) =>
                     //     prevValue.now - 1 < 0
                     //       ? { ...prevValue }
                     //       : { prev: prevValue.now, now: prevValue.now - 1 }
                     //   );
-                    goToPreviousQuestion();
+                    goToPrevSlide();
                 }
             }, 32);
         }
@@ -37,6 +37,5 @@ export function useHandleScroll() {
         };
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        //   }, [isSubmitting , isSubmitOK]);
     }, [])
-}
+}

packages/core/src/hooks/useKeyPressHandler.ts

@@ -3,17 +3,15 @@
 
 export function useKeyPressHandler(keys: string[], onclick: (e: KeyboardEvent, key: string) => void) {
 
-
     useEffect(() => {
         function handleKeypress(event: KeyboardEvent) {
-
-
+            event.preventDefault();
             keys.filter(v => v.toLowerCase() === event.key.toLowerCase() && onclick(event, v));
         }
 
         document.addEventListener("keypress", handleKeypress);
 
-        return function() {
+        return function () {
             document.removeEventListener("keypress", handleKeypress);
         };
 

packages/core/src/model/InputType.ts

@@ -1,48 +1,49 @@
-// "intro" | "submit" | "ending"| "text" ;
-// | "phone" | "email" | "dropdown" | "cpr" | "bankaccount"
-// |  "firstName" | "lastName" | "industry" | "role" | "goal" | "email";
-
 import { QuestionModel } from "./QuestionModel";
 
-//export type InputTypes =
-//    "text" |
-//    "multilinetext" |
-//    "dropdown"
-//    // "radio" |
-//    // "slider" |
-//    // "select";
-//    ;
-
 export type InputProps = {
     questionModel: QuestionModel;
     onOutputChange(output: string): void;
 }
 
 const Dropdown = "dropdown";
+const Email = "email";
+const Multilinetext = "multilinetext";
 const Radio = "radio";
 const Slider = "slider";
-const Multilinetext = "multilinetext";
 const Text = "text";
-const Email = "email";
 
 export interface InputTypeMap {
     [Dropdown]: DropDownProperties;
+    [Email]: EmailProperties;
+    [Multilinetext]: MultilineProperties;
     [Radio]: RadioProperties;
     [Slider]: SliderProperties;
+    [Text]: TextProperties;
 }
 
 export type DropDownProperties = {
     inputType: typeof Dropdown;
     maxItems?: number;
     minItems?: number;
-    options?: {
+    options: {
         [key: string]: string;
     }
 }
 
+export type EmailProperties = {
+    inputType: typeof Email;
+}
+
+export type MultilineProperties = {
+    inputType: typeof Multilinetext;
+}
+
 export type RadioProperties = {
     inputType: typeof Radio;
-    options: any;
+    options: {
+        [key: string]: string;
+    }
+    direction?: "horizontal" | "vertical";
 }
 
 export type SliderProperties = {
@@ -52,17 +53,6 @@ export type SliderProperties = {
     step: number;
 }
 
-export type MultilineProperties = {
-    inputType: typeof Multilinetext;
-    rows?: any;
-}
-
 export type TextProperties = {
     inputType: typeof Text;
-    rows?: any;
 }
-
-export type EmailProperties = {
-    inputType: typeof Email;
-    rows?: any;
-}

packages/core/src/model/QuestionModel.ts

@@ -10,7 +10,7 @@ export class QuestionModel {
     placeholder: string = "";
     paragraph: string = "";
     dataType: "string" | "number" | "boolean" = "string"
-    answered?: boolean = false;
+    answered: boolean = false;
     output: any = {};
     inputProperties?: DropDownProperties | RadioProperties | SliderProperties | undefined;
 

packages/core/src/services/defaults/DefaultInputTypeResolver.ts

@@ -1,22 +1,11 @@
+import { FC } from "react";
 import { DropDownProperties, RadioProperties, SliderProperties } from "../../model";
 import { QuestionJsonModel } from "../../model/json/JsonDataModels";
 import { registerQuickFormService } from "../QuickFormServices";
 
 function parseInputProperties(questionJsonModel: QuestionJsonModel): DropDownProperties | RadioProperties | SliderProperties | undefined {
     let inputProperties: DropDownProperties | RadioProperties | SliderProperties | undefined;
-    // switch (value.inputType) {
-    //     case "dropdown":
-    //         inputProperties = value as DropDownProperties;
-    //         break;
-    //     case "radio":
-    //         inputProperties = value as RadioProperties;
-    //         break;
-    //     case "slider":
-    //         inputProperties = value as SliderProperties;
-    //         break;
-    //     default:
-    //         inputProperties = {};
-    // }
+
     switch (questionJsonModel.inputType) {
         case "dropdown":
             inputProperties = {
@@ -32,6 +21,7 @@ function parseInputProperties(questionJsonModel: QuestionJsonModel): DropDownPro
             inputProperties = {
                 inputType: questionJsonModel.inputType,
                 options: (questionJsonModel as (QuestionJsonModel & RadioProperties)).options,
+                direction: (questionJsonModel as (QuestionJsonModel & RadioProperties)).direction
             };
             break;
         case "slider":
@@ -51,25 +41,26 @@ function parseInputProperties(questionJsonModel: QuestionJsonModel): DropDownPro
 
 registerQuickFormService("inputTypePropertiesTransformer", parseInputProperties);
 
-import React from "react";
 import { TextInput, MultilineInput, DropDownInput } from "../../components/question/input-types/index";
 import { InputProps } from "../../model/InputType";
 
-export type InputComponentType = React.ComponentType<InputProps>;
+export type InputComponentType = FC<InputProps>;
 
 export type InputComponentDictionary = {
     [key: string]: InputComponentType;
 };
 
 const inputComponents: InputComponentDictionary = {
-    "text": TextInput,
     // TODO - Create Radio
     "radio": TextInput,
-    // TODO - Create Slider
-    "slider": TextInput,
-    "multilinetext": MultilineInput,
     // TODO - Create Email
     "email": TextInput,
+    // TODO - Create Toggle
+    "toggle": TextInput,
+
+    "text": TextInput,
+    "slider": TextInput,
+    "multilinetext": MultilineInput,
     "dropdown": DropDownInput,
     "none": TextInput,
 };

packages/core/src/services/defaults/DefaultQuestionTransformer.ts

@@ -7,24 +7,24 @@ function mapJsonQuestionToModelQuestion(key: string, question: QuestionJsonModel
     const parseInputProperties = resolveQuickFormService("inputTypePropertiesTransformer");
     const logger = resolveQuickFormService("logger");
 
-   
+
 
     if (question.inputType === "dropdown" && question.dataType === "boolean")
-        value = value === true ? 'Y' : value===false? 'N':'';
+        value = value === true ? 'Y' : value === false ? 'N' : '';
 
 
     logger.log("Transforming Question {key}: {@question} with value {@value}", key, question, value);
 
     return {
         logicalName: question.logicalName ?? key,
         inputType: question.inputType,
-        dataType: question.dataType??"string",
+        dataType: question.dataType ?? "string",
         text: question.text,
-        placeholder: question.placeholder??'',
+        placeholder: question.placeholder ?? '',
         paragraph: question.paragraph,
-        answered: typeof (value) !== undefined && value !== '',
-        inputProperties: parseInputProperties(question), 
-        output: value ?? '', 
+        answered: typeof (value) !== "undefined" && value !== '' && value !== null,
+        inputProperties: parseInputProperties(question),
+        output: value ?? '',
     } as QuestionModel;
 }
 registerQuickFormService("questionTransformer", mapJsonQuestionToModelQuestion);

packages/core/tsconfig.json

@@ -4,7 +4,7 @@
     "lib": [ "dom", "dom.iterable", "esnext" ],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": true,
+    "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,