Merge pull request #25 from EAVFW/kba/minor-fixes

Kba/minor fixes
EAVFW · Jun 26, 2024 · 4fe9e65 · 4fe9e65
2 parents 6f832e8 + 1ed19ed
commit 4fe9e65
Show file tree

Hide file tree

Showing 21 changed files with 492 additions and 176 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "release-designer": "npm run release --workspace packages/designer",
     "release-inputs": "npm run release --workspace packages/inputs",
     "release-querybuilder": "npm run release --workspace packages/querybuilder",
-    "eavfw-link": "npm link @eavfw/apps @eavfw/next @eavfw/expressions @eavfw/manifest @eavfw/hooks @eavfw/forms @eavfw/utils @eavfw/designer @eavfw/designer-core @eavfw/designer-nodes",
+   "eavfw-link": "npm link @eavfw/apps @eavfw/next @eavfw/expressions @eavfw/manifest @eavfw/hooks @eavfw/forms @eavfw/utils @eavfw/designer @eavfw/designer-core @eavfw/designer-nodes",
     "playground": "npm --workspace packages/playground run dev"
   },
   "config": {

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -2,7 +2,6 @@
   "version": "1.0.0-vnext.36",
   "name": "@eavfw/quickform-core",
   "dependencies": {
-    "classnames": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -11,9 +10,6 @@
     "@opentelemetry/api": "^1.8.0"
   },
   "devDependencies": {
-    "react-icons": "^4.11.0",
-    "@types/classnames": "^2.3.1",
-    "html-webpack-plugin": "^5.6.0"
   },
   "license": "MIT",
   "files": [

diff --git a/packages/core/src/components/icons/IconResolver.tsx b/packages/core/src/components/icons/IconResolver.tsx
@@ -4,16 +4,18 @@ import { UserIcon } from "./UserIcon";
 import { IconProps } from "./iconProps";
 import { Checkmark } from '../icons/Checkmark';
 
-export type IconType = "Email" | "Phone" | "User";
+export type IconType = "Email" | "Phone" | "User" | "Checkmark" | "None";
 export type IconResolverProps = {
     type?: IconType,
 } & IconProps
 
 export const IconResolver: React.FC<IconResolverProps> = ({ type, color, className, size, style }): JSX.Element => {
     switch (type) {
-        case "Email": return <EmailIcon className={className} color={color} size={size} style={style} />
-        case "Phone": return <TelephoneIcon className={className} color={color} size={size} style={style} />
-        case "User": return <UserIcon className={className} color={color} size={size} style={style} />
-        default: return <Checkmark className={className} color={color} size={size} style={style} />;
+        case "Email": return <EmailIcon className={className} color={color} size={size} style={style} />;
+        case "Phone": return <TelephoneIcon className={className} color={color} size={size} style={style} />;
+        case "User": return <UserIcon className={className} color={color} size={size} style={style} />;
+        case "Checkmark": return <Checkmark className={className} color={color} size={size} style={style} />;
+        case "None": return <></>;
+        default: return <></>;
     }
 }
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
@@ -15,6 +15,7 @@ export { QuickForm } from "./QuickForm";
 export { Spinner } from "./spinner/Spinner";
 export { Intro } from "./intro/Intro";
 export { QuickFormContainer } from "./container/QuickFormContainer";
+export { ModernQuickFormContainer } from "./modern-container/ModernQuickformContainer";
 export { SlideRenderer } from "./renderers/slide-renderer/SlideRenderer";
 export { QuestionHeading } from "./question/components/QuestionHeading";
 // import "./question/input-types";
diff --git a/packages/core/src/components/modern-container/ModernQuickformContainer.tsx b/packages/core/src/components/modern-container/ModernQuickformContainer.tsx
@@ -0,0 +1,70 @@
+"use client";
+import { ErrorPopup, quickformtokens, useQuickForm } from "../../index";
+import { makeStyles, shorthands } from "@griffel/react";
+import React, { PropsWithChildren } from "react";
+
+const useStyles = makeStyles({
+    root: {
+        ...shorthands.padding("20px", "20px", "20px", "20px"),
+        ...shorthands.margin("20px", "0px"),
+        ...shorthands.borderRadius("20px"),
+        boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px',
+        // backgroundColor: quickformtokens.background || "white"
+    }
+})
+
+type ModernQuickFormContainerProps = {
+    title: string,
+    subtitle: string,
+}
+
+export const ModernQuickFormContainer: React.FC<PropsWithChildren<ModernQuickFormContainerProps>> = ({ children, subtitle, title }) => {
+
+    const styles = useStyles();
+    const { state: { errorMsg }, cssVariables } = useQuickForm();
+    return (
+        <div
+            id="QuickForm"
+            className={styles.root}
+            style={cssVariables}
+        >
+            <ErrorPopup
+                message={errorMsg}
+            />
+            <Headline
+                text={title}
+                fontWeight={800}
+                color={quickformtokens.primary}
+                lineHeight={1.2}
+            />
+            <Headline
+                text={subtitle}
+                fontWeight={300}
+                color={"inherit"}
+                lineHeight={1.1}
+            />
+            <div>
+                {children}
+            </div>
+        </div >
+
+    )
+}
+
+const Headline: React.FC<{ text: string, fontWeight: number, color: string, lineHeight: number }> = ({ text, fontWeight, color, lineHeight }) => {
+    return (
+        <h1
+            style={
+                {
+                    textAlign: "center",
+                    fontSize: "36px",
+                    fontWeight: fontWeight,
+                    color: color,
+                    lineHeight: lineHeight,
+                    margin: 0
+                }
+            }>
+            {text}
+        </h1>
+    )
+}
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -14,17 +14,18 @@ export const SlideRenderer: React.FC = () => {
     const [className, setClassName] = useState(state.classes.slide);
 
     const currentSlide: SlideModel = state.slides[state.currIdx];
-    const buttonText: string = currentSlide.buttonText ?? "OK";
-    const showPressEnter: boolean = currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive) === false;
+    const buttonText: string = currentSlide?.buttonText ?? "OK";
+    // If not disabled by state.showPressEnter being set to false, and if the slide has questions, and all questions are not multilinetext, show the press enter message
+    const showPressEnter: boolean = (state.showPressEnter === false) ? false : (currentSlide?.questions !== undefined && currentSlide.questions.every(q => q.inputType !== "multilinetext" || !q.isActive));
 
     /* KBA - Leaving this for now - have to get back to it since we never actually set .isActive property on question.. so we cant use it to condition with at the moment.. */
     // const showPressEnter: boolean = currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive) === false;
-    console.log("showPressEnter", showPressEnter);
-    console.log("showPressEnterCondition", currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive));
-    console.log("showPressEnterCurrentSlide", currentSlide);
+    // console.log("showPressEnter", showPressEnter);
+    // console.log("showPressEnterCondition", currentSlide?.questions?.some(q => q.inputType === "multilinetext" && q.isActive));
+    // console.log("showPressEnterCurrentSlide", currentSlide);
 
     /* Listens to enter key pressed */
-    useHandleEnterKeypress("slide", !showPressEnter, goToNextSlide);
+    useHandleEnterKeypress("slide", showPressEnter === false, goToNextSlide);
 
     let nextAllowedEffectTime = useRef(new Date().getTime());
     useEffect(() => {
@@ -52,7 +53,7 @@ export const SlideRenderer: React.FC = () => {
                 showPressEnter={showPressEnter}
                 children={
                     <>
-                        {buttonText}<IconResolver type={currentSlide.icon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={24} />
+                        {buttonText}<IconResolver type={currentSlide?.icon ?? state.defaultSlideButtonIcon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={24} />
                     </>
                 }
             />

diff --git a/packages/core/src/components/slide/Slide.tsx b/packages/core/src/components/slide/Slide.tsx
@@ -16,7 +16,7 @@ export const Slide: React.FC<SlideProps> = ({ model, className }: SlideProps) =>
         // style={{ display: 'flex', flexDirection: 'column', width: "100%" }}
         >
             {
-                model.rows.map((row, rowIndex) => (
+                model?.rows?.map((row, rowIndex) => (
                     <div
                         id={"row" + rowIndex}
                         key={rowIndex}

diff --git a/packages/core/src/model/json-definitions/Layout.ts b/packages/core/src/model/json-definitions/Layout.ts
@@ -10,8 +10,22 @@ export type LayoutDefinition = {
     classes?: Partial<QuickformClassNames>,
     style?: React.CSSProperties;
     tokens?: Partial<QuickFormTokens>;
+    /**
+   * If enabled, when all questions for the slide is filled it auto advances to next slide
+   */
     autoAdvanceSlides?: boolean;
+    /**
+     * If enabled, question numbers are shown in the title
+     */
     enableQuestionNumbers?: boolean;
+    /**
+     * If enabled, the user is shown a message to press enter next to the button on the slide
+     */
+    showPressEnter?: boolean;
+    /**
+     * The icon used for the slide button
+     */
+    defaultSlideButtonIcon?: IconType;
     slides?: { [key: string]: SlideLayout };
 }
 

diff --git a/packages/core/src/services/defaults/DefaultModelTransformer.ts b/packages/core/src/services/defaults/DefaultModelTransformer.ts
@@ -92,7 +92,7 @@ function handleLayout(layout: LayoutDefinition, questions: QuickFormQuestionsDef
             const slideModel = new SlideModel();
             slideModel.displayName = slide.title;
             slideModel.buttonText = slide.buttonText ?? layout.defaultNextButtonText;
-            slideModel.icon = slide.icon;
+            slideModel.icon = slide.icon ?? layout.defaultSlideButtonIcon;
 
             if (slide.rows) {
                 slideModel.rows = processRows(slide.rows, slideModel, questions, payload);
@@ -153,15 +153,15 @@ function handleSubmit(submit: QuickFormSubmitDefinition, payload: any): SubmitMo
         Object.entries((schema?.properties ?? {}) as { [key: string]: any })
             .filter(([k, v]) => uiSchema?.[k]?.["ui:widget"] !== "hidden")
             .map(([k, v]) => [k, {
-              
+
                 inputType: v.type === "string" ? "text" : "dropdown",
                 options: v.type === "string" ? undefined : { "Y": "Yes", "N": "No" },
                 placeholder: uiSchema?.[k]?.["ui:placeholder"],
                 text: (uiSchema?.[k]?.["ui:label"] ?? true) ? v.title : undefined,
                 paragraph: v.description,
                 dataType: v.type,
                 ...uiSchema?.[k]?.["ui:inputProps"] ?? {}
-               
+
             } as QuestionJsonModel])
     );
 
@@ -173,7 +173,7 @@ function handleSubmit(submit: QuickFormSubmitDefinition, payload: any): SubmitMo
     });
 
     return {
-        text: uiSchema["ui:label"] === false ? '': schema?.title ?? submit?.text ?? "Submit QuickForm",
+        text: uiSchema["ui:label"] === false ? '' : schema?.title ?? submit?.text ?? "Submit QuickForm",
         paragraph: uiSchema["ui:label"] === false ? '' : schema?.description,
         buttonText: submit?.buttonText ?? "Submit",
         submitFields: submitFieldsArray,

diff --git a/packages/core/src/state/QuickformState.ts b/packages/core/src/state/QuickformState.ts
@@ -1,11 +1,15 @@
 import { SubmitStatus } from "../model/SubmitStatus";
 import { SlideModel } from "../model/SlideModel";
 import { LayoutDefinition, QuickFormModel } from "../model";
+import { IconType } from "../components/icons/IconResolver";
 
 export type QuickformClassNames = { slide: string, slideIsIn: string, slideIsOut: string };
 export type QuickformState = {
     autoAdvanceSlides?: boolean;
     enableQuestionNumbers?: boolean;
+    showPressEnter?: boolean;
+    defaultNextButtonText?: string;
+    defaultSlideButtonIcon?: IconType;
     currIdx: number;
     currStep: number;
     data: QuickFormModel;
@@ -28,6 +32,9 @@ export const defaultState = (data: QuickFormModel = defaultData, layout?: Layout
     const defState = {
         autoAdvanceSlides: layout?.autoAdvanceSlides ?? false,
         enableQuestionNumbers: layout?.enableQuestionNumbers ?? false,
+        showPressEnter: layout?.showPressEnter ?? undefined,
+        defaultNextButtonText: layout?.defaultNextButtonText ?? "Næste",
+        defaultSlideButtonIcon: layout?.defaultSlideButtonIcon ?? undefined,
         classes: layout?.classes ?? {},
         currIdx: 0,
         currStep: data.slides.length > 0 ? 1 : 0,
@@ -43,7 +50,7 @@ export const defaultState = (data: QuickFormModel = defaultData, layout?: Layout
         slides: data.slides,
         submitStatus: { isSubmitting: false, isSubmitError: false, isSubmitSuccess: false },
         totalSteps: data.slides.length,
-        payloadAugments:[]
+        payloadAugments: []
     };
 
     return defState;

diff --git a/packages/core/src/state/action-handlers/NavigationActionHandler.ts b/packages/core/src/state/action-handlers/NavigationActionHandler.ts
@@ -46,9 +46,9 @@ export class NavigationActionHandler {
 
     static handleNextSlideAction = (state: QuickformState) => {
         // Filter out questions that are explicitly not visible
-        const visibleQuestions = state.slides[state.currIdx].questions.filter(question => question.visible?.isVisible !== false);
+        const visibleQuestions = state.slides[state.currIdx]?.questions?.filter(question => question.visible?.isVisible !== false);
 
-        if (visibleQuestions.length === 0) {
+        if (visibleQuestions?.length === 0) {
             return { ...state, errorMsg: "No visible questions to answer." };
         }
 

diff --git a/packages/core/src/style/defaultQuickFormTokens.ts b/packages/core/src/style/defaultQuickFormTokens.ts
@@ -42,8 +42,9 @@ export const defaultQuickFormTokens: QuickFormTokens = {
     onPrimary: '#ffffff',
     onSecondary: '#000000',
 
-    fontFamily: 'var(--chivo), Monaco, Consolas',
+    fontFamily: 'Monaco, Consolas',
     headlineFontSize: '2rem',
+    subtitleFontSize: '1.5rem',
     paragraphFontSize: '1.3rem',
     paragraphMobileFontSize: '1.9rem',
     btnFontSize: '2rem',

diff --git a/packages/core/src/style/kbaQuickFormTokens.ts b/packages/core/src/style/kbaQuickFormTokens.ts
@@ -46,6 +46,7 @@ export const kbaQuickFormTokens: QuickFormTokens = {
     fontFamily: 'Monaco, "Lucida Console", monospace',
 
     headlineFontSize: '2rem',
+    subtitleFontSize: '1.5rem',
     paragraphFontSize: '1rem',
     paragraphMobileFontSize: '1rem',
     btnFontSize: '1.1rem',

diff --git a/packages/core/src/style/modernQuickFormTokens.ts b/packages/core/src/style/modernQuickFormTokens.ts
@@ -46,6 +46,7 @@ export const modernQuickFormTokens: QuickFormTokens = {
     fontFamily: 'Outfit, Monaco, monospace',
 
     headlineFontSize: '2rem',
+    subtitleFontSize: '1.5rem',
     paragraphFontSize: '1rem',
     paragraphMobileFontSize: '1rem',
     btnFontSize: '1.1rem',

diff --git a/packages/core/src/style/quickFormTokensDefinition.ts b/packages/core/src/style/quickFormTokensDefinition.ts
@@ -33,6 +33,7 @@ type QuickFormTokensBase = {
     /* Typography */
     fontFamily: string,
     headlineFontSize: FontSize;
+    subtitleFontSize: FontSize;
     paragraphFontSize: FontSize;
     paragraphMobileFontSize: FontSize;
     btnFontSize: FontSize,
@@ -81,7 +82,7 @@ export type QuickFormTokens = QuickFormTokensBase & {
  */
 export const defineQuickFormTokens = (...tokens: Array<Partial<QuickFormTokens>>) => {
     // Merges and overrides default tokens with provided ones in reverse order for precedence.
-    const mergedTokens = tokens.reduceRight((newTokens, currentToken) => ({
+    const mergedTokens = tokens.reduce((newTokens, currentToken) => ({
         ...newTokens,
         ...currentToken,
     }), defaultQuickFormTokens);

diff --git a/packages/designer/src/Components/Views/DesignerViews.tsx b/packages/designer/src/Components/Views/DesignerViews.tsx
@@ -19,6 +19,5 @@ export const DesignerViews = () => {
         {view === "ending" && <QuickFormEndingSettingsView />}
         {view === "layout" && <QuickFormLayoutView slideId={activeSlide} layout={quickformpayload.layout} dispatch={updateQuickFormPayload} />}
         {view === "questions" && <QuickFormQuestionsView dispatch={updateQuickFormPayload} questions={quickformpayload.questions} currentQuestion={activeQuestion} />}
-
     </>
 }