Merge pull request #17 from EAVFW/kba/nullable-intro-designer

Kba/nullable intro designer
EAVFW · Apr 30, 2024 · 3d0a2f7 · 3d0a2f7
2 parents 193eb09 + 3542c07
commit 3d0a2f7
Show file tree

Hide file tree

Showing 34 changed files with 367 additions and 1,679 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0",
+  "version": "1.0.0-vnext.36",
   "name": "@eavfw/quickform-core",
   "dependencies": {
     "classnames": "^2.5.1",
@@ -28,4 +28,4 @@
   "scripts": {
     "release": "semantic-release -e semantic-release-monorepo"
   }
-}
+}
diff --git a/packages/core/src/components/icons/EmailIcon.tsx b/packages/core/src/components/icons/EmailIcon.tsx
@@ -1,17 +1,17 @@
 import React from "react";
 import { IconProps } from "./iconProps";
 
-export const EmailIcon: React.FC<IconProps> = ({ color = "green", size = 100, style }) => {
+export const EmailIcon: React.FC<IconProps> = ({ color = "green", size = 100, style, className }) => {
     return (
-        <div style={{ textAlign: 'center', height: size, ...style }}>
+        <div className={className} style={{ textAlign: 'center', height: size, ...style }}>
             <svg
                 width={size}
                 height={size}
                 viewBox="0 0 512 512"
                 xmlns="http://www.w3.org/2000/svg"
             >
                 <path
-                    stroke={color}
+                    fill={color}
                     d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"
                 />
             </svg>

diff --git a/packages/core/src/components/icons/IconResolver.tsx b/packages/core/src/components/icons/IconResolver.tsx
@@ -0,0 +1,18 @@
+import { EmailIcon } from "./EmailIcon";
+import { TelephoneIcon } from "./TelephoneIcon";
+import { UserIcon } from "./UserIcon";
+import { IconProps } from "./iconProps";
+
+export type IconType = "Email" | "Phone" | "User";
+export type IconResolverProps = {
+    type: IconType,
+} & IconProps
+
+export const IconResolver: React.FC<IconResolverProps> = ({ type, color, className, size }) => {
+    switch (type) {
+        case "Email": return <EmailIcon className={className} color={color} size={size} />
+        case "Phone": return <TelephoneIcon className={className} color={color} size={size} />
+        case "User": return <UserIcon className={className} color={color} size={size} />
+        default: return <UserIcon className={className} color={color} size={size} />
+    }
+}
diff --git a/packages/core/src/components/icons/UserIcon.tsx b/packages/core/src/components/icons/UserIcon.tsx
@@ -1,17 +1,17 @@
 import React from "react";
 import { IconProps } from "./iconProps";
 
-export const UserIcon: React.FC<IconProps> = ({ color = "green", size = 100, style }) => {
+export const UserIcon: React.FC<IconProps> = ({ color = "green", size = 100, style, className }) => {
     return (
-        <div style={{ textAlign: 'center', height: size, ...style }}>
+        <div className={className} style={{ textAlign: 'center', height: size, ...style }}>
             <svg
                 width={size}
                 height={size}
                 viewBox="0 0 448 512"
                 xmlns="http://www.w3.org/2000/svg"
             >
                 <path
-                    stroke={color}
+                    fill={color}
                     d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"
                 />
             </svg>

diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
@@ -16,4 +16,4 @@ export { Spinner } from "./spinner/Spinner";
 export { Intro } from "./intro/Intro";
 export { QuickFormContainer } from "./container/QuickFormContainer";
 export { SlideRenderer } from "./renderers/slide-renderer/SlideRenderer";
-import "./question/input-types";
+// import "./question/input-types";
diff --git a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
@@ -1,11 +1,10 @@
 "use client";
-import { ChangeEvent, useState } from "react";
-import { QuestionModel } from "../../../../model";
+import { quickformtokens, useQuickForm } from "@eavfw/quickform-core";
+import { useFocusableQuestion } from "@eavfw/quickform-core/src/hooks/useFocusableQuestion";
+import { CSSProperties, ChangeEvent, InputHTMLAttributes, useState } from "react";
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import React, { CSSProperties, InputHTMLAttributes } from "react";
-import { useQuickForm } from "../../../../state/QuickFormContext";
-import { useFocusableQuestion } from "../../../../hooks/useFocusableQuestion";
-import { quickformtokens } from "../../../../style/quickFormTokensDefinition";
+import { QuestionModel } from "@eavfw/quickform-core/src/model";
+import { IconResolver, IconType } from "../../../icons/IconResolver";
 
 const useInputTextStyles = makeStyles({
     inputContainer: {
@@ -18,31 +17,53 @@ const useInputTextStyles = makeStyles({
         ...shorthands.borderTop('none'),
         ...shorthands.borderLeft('none'),
         ...shorthands.borderRight('none'),
-        ...shorthands.borderBottom("1px", "solid", `${quickformtokens.questionPlaceholderColor}`),
+        ...shorthands.borderBottom("1px", "solid", `${quickformtokens?.questionPlaceholderColor || "black"}`),
 
         ':focus': {
-            ...shorthands.borderBottom("1px", "solid", `${quickformtokens.primary}`),
+            ...shorthands.borderBottom("1px", "solid", `${quickformtokens?.primary || "blue"}`),
             paddingBottom: '8px',
         },
     },
     inputText: {
         color: 'var(--on-surface)',
         backgroundColor: 'transparent',
-        fontSize: quickformtokens.questionInputFontSize,
+        fontSize: quickformtokens?.questionInputFontSize || "16px",
         marginTop: '8px',
         paddingBottom: '9px',
         width: '100%',
         ...shorthands.border('none'),
 
         '@media screen and (max-width: 599px)': {
-            fontSize: quickformtokens.questionInputFontSize,
+            fontSize: quickformtokens?.questionInputFontSize || "16px",
             marginTop: '32px',
         },
 
     },
+
+    inputIcon: {
+        marginTop: '8px',
+        paddingBottom: '9px',
+    },
+    iconLeft: {
+        left: '0',
+        paddingRight: '15px'
+    },
+    iconRight: {
+        right: '0',
+        paddingLeft: '15px'
+    },
 });
 
-export const BaseInputComponent = ({ questionModel, className, style, type }: { type: InputHTMLAttributes<HTMLInputElement>["type"], questionModel: QuestionModel, className?: string, style?: CSSProperties }) => {
+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);
@@ -79,6 +100,14 @@ export const BaseInputComponent = ({ questionModel, className, style, type }: {
 
     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}
@@ -88,6 +117,14 @@ export const BaseInputComponent = ({ questionModel, className, style, type }: {
                 value={text}
                 onChange={handleChange}
             />
+            {afterIcon &&
+                <IconResolver
+                    type={afterIcon}
+                    className={mergeClasses(styles.inputIcon, styles.iconRight)}
+                    size={18}
+                    color={quickformtokens.primary}
+                />
+            }
         </div>
     );
-}
+}
diff --git a/packages/core/src/components/question/input-types/email/EmailInput.tsx b/packages/core/src/components/question/input-types/email/EmailInput.tsx
@@ -1,9 +1,17 @@
 "use client";
-import { InputComponentType, registerInputComponent } from "../../../../services/defaults/DefaultInputTypeResolver";
+import { InputComponentType, registerInputComponent } from "@eavfw/quickform-core";
 import { BaseInputComponent } from "../baseinput/BaseInputComponent";
 import { emailInputSchema } from "./EmailInputSchema";
+import { IconType } from "../../../icons/IconResolver";
 
-export const EmailInput: InputComponentType = (props) => {
+export type EmailProperties = {
+    inputType: "email";
+    defaultValue?: string;
+    beforeIcon?: IconType;
+    afterIcon?: IconType
+}
+
+export const EmailInput: InputComponentType<EmailProperties> = (props) => {
     return <BaseInputComponent type="email" {...props} />
 }
 

diff --git a/packages/core/src/components/question/input-types/email/EmailInputSchema.ts b/packages/core/src/components/question/input-types/email/EmailInputSchema.ts
@@ -1,5 +1,5 @@
-import { InputPropertiesTypes } from "../../../../model";
-import { InputComponentMetadata } from "./../../../../services/defaults/DefaultInputTypeResolver";
+import { InputComponentMetadata } from "@eavfw/quickform-core";
+import { InputPropertiesTypes } from "@eavfw/quickform-core/src/model";
 
 export const emailInputSchema: InputComponentMetadata<InputPropertiesTypes> = {
     label: "Email",
@@ -23,10 +23,36 @@ export const emailInputSchema: InputComponentMetadata<InputPropertiesTypes> = {
             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",
     }
-}
+}
diff --git a/packages/core/src/components/question/input-types/phone/PhoneInput.tsx b/packages/core/src/components/question/input-types/phone/PhoneInput.tsx
@@ -1,9 +1,17 @@
 "use client";
-import { InputComponentType, registerInputComponent } from "../../../../services/defaults/DefaultInputTypeResolver";
+import { InputComponentType, registerInputComponent } from "@eavfw/quickform-core";
 import { BaseInputComponent } from "../baseinput/BaseInputComponent";
 import { phoneInputSchema } from "./PhoneInputSchema";
+import { IconType } from "../../../icons/IconResolver";
 
-export const PhoneInput: InputComponentType = (props) => {
+export type PhoneProperties = {
+    inputType: "phone";
+    defaultValue?: string;
+    beforeIcon?: IconType;
+    afterIcon?: IconType
+}
+
+export const PhoneInput: InputComponentType<PhoneProperties> = (props) => {
     return <BaseInputComponent type="tel" {...props} />
 }
 

diff --git a/packages/core/src/components/question/input-types/phone/PhoneInputSchema.ts b/packages/core/src/components/question/input-types/phone/PhoneInputSchema.ts
@@ -23,6 +23,32 @@ export const phoneInputSchema: InputComponentMetadata<InputPropertiesTypes> = {
             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: {

diff --git a/packages/core/src/components/question/input-types/text/TextInput.tsx b/packages/core/src/components/question/input-types/text/TextInput.tsx
@@ -1,9 +1,16 @@
 "use client";
 import React from "react";
-import { TextProperties } from "../../../../model/InputType";
-import { InputComponentType, registerInputComponent } from "../../../../services/defaults/DefaultInputTypeResolver";
 import { textInputSchema } from "./TextInputSchema";
 import { BaseInputComponent } from "../baseinput/BaseInputComponent";
+import { InputComponentType, registerInputComponent } from "@eavfw/quickform-core";
+import { IconType } from "../../../icons/IconResolver";
+
+export type TextProperties = {
+    inputType: "text";
+    defaultValue?: string;
+    beforeIcon?: IconType;
+    afterIcon?: IconType
+}
 
 export const TextInput: InputComponentType<TextProperties> = (props) => {
     return <BaseInputComponent type="text" {...props} />

diff --git a/packages/core/src/components/question/input-types/text/TextInputSchema.ts b/packages/core/src/components/question/input-types/text/TextInputSchema.ts
@@ -23,6 +23,32 @@ export const textInputSchema: InputComponentMetadata<InputPropertiesTypes> = {
             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: {

diff --git a/packages/designer/package.json b/packages/designer/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0",
+  "version": "1.0.0-vnext.13",
   "name": "@eavfw/quickform-designer",
   "dependencies": {
     "react": "18.2.0",
@@ -15,9 +15,7 @@
     "@fluentui/react-components": "^9.46.1",
     "pako": "^2.0.4",
     "@craftjs/core": "^0.2.4",
-
     "@eavfw/designer-nodes": "^1.1.1",
-
     "@rjsf/core": "^5.17.1",
     "@rjsf/fluentui-rc": "^5.17.1",
     "@rjsf/validator-ajv8": "^5.17.1",
@@ -40,4 +38,4 @@
   "scripts": {
     "release": "semantic-release -e semantic-release-monorepo"
   }
-}
+}