feat: Moved DropDown to its own package as example of registering inp…

…ut controls outside core
EAVFW · Mar 5, 2024 · 0f35c8e · 0f35c8e
1 parent 9f1452f
commit 0f35c8e
Show file tree

Hide file tree

Showing 30 changed files with 553 additions and 85 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,13 +16,18 @@
     "link": "concurrently  \"npm:link-*\"",
     "link-core": "npm --workspace packages/core link",
     "link-designer": "npm --workspace packages/designer link",
+    "link-inputs": "npm run link --workspace packages/inputs",
+
     "publish": "npm-run-all --continue-on-error publish-*",
     "publish-core": "npm --workspace packages/core publish --access public",
     "publish-designer": "npm --workspace packages/designer publish --access public",
+
     "release": "npm-run-all --continue-on-error release-*",
     "release-core": "npm run release --workspace packages/core",
     "release-designer": "npm run release --workspace packages/designer",
+
     "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": {
@@ -31,7 +36,8 @@
   "private": true,
   "workspaces": {
     "packages": [
-      "packages/*"
+      "packages/*",
+      "packages/inputs/*"
     ]
   },
   "repository": {

diff --git a/packages/core/src/components/question/input-types/index.ts b/packages/core/src/components/question/input-types/index.ts
@@ -8,7 +8,7 @@
 // export * from './LastNameInput';
 // export * from './PhoneInput';
 // export * from './RoleInput';
-export * from './dropdown/DropDownInput';
+//export * from './dropdown/DropDownInput';
 export * from './text/TextInput';
 export * from './multiline/MultilineInput';
 

diff --git a/packages/core/src/components/renderers/conditional-render/ConditionalRender.tsx b/packages/core/src/components/renderers/conditional-render/ConditionalRender.tsx
@@ -1,4 +1,4 @@
-
+"use client";
 import { useEffect, useState } from "react";
 import { useQuickForm } from "../../../state";
 

diff --git a/packages/core/src/hooks/index.ts b/packages/core/src/hooks/index.ts
@@ -1,3 +1,4 @@
 export { useHandleEnterKeypress} from "./useHandleEnterKeypress";
 export { useHandleScroll } from "./useHandleScroll";
 export { useDelayedClickListener } from "./useDelayedClickListenerCallback";
+export { useKeyPressHandler } from "./useKeyPressHandler";
diff --git a/packages/core/src/hooks/useKeyPressHandler.ts b/packages/core/src/hooks/useKeyPressHandler.ts
@@ -1,4 +1,5 @@
-import { useEffect } from "react";
+"use client"
+import { useEffect } from "react";
 
 
 export function useKeyPressHandler(keys: string[], onclick: (e: KeyboardEvent, key: string) => void) {

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1,4 +1,5 @@
 export * from "./components";
 export * from "./state";
 export * from "./services";
+export * from "./hooks";
 export type { QuickFormDefinition, InputProps } from "./model";
diff --git a/packages/core/src/model/InputType.ts b/packages/core/src/model/InputType.ts
@@ -4,7 +4,7 @@ export type InputProps<TProps = InputPropertiesTypes> = {
     questionModel: QuestionModel<TProps>;
 }
 
-const Dropdown = "dropdown";
+//const Dropdown = "dropdown";
 const Email = "email";
 const Multilinetext = "multilinetext";
 const Radio = "radio";
@@ -14,7 +14,7 @@ const Buttons = "buttons";
 
 export interface InputTypeMap {
     [Buttons]: ButtonsProperties;
-    [Dropdown]: DropDownProperties;
+
     [Email]: EmailProperties;
     [Multilinetext]: MultilineProperties;
     [Radio]: RadioProperties;
@@ -24,7 +24,7 @@ export interface InputTypeMap {
 
 export type InputPropertiesTypes =
     ButtonsProperties |
-    DropDownProperties |
+
     EmailProperties |
     MultilineProperties |
     RadioProperties |
@@ -39,14 +39,7 @@ export type ButtonsProperties = {
     }
 }
 
-export type DropDownProperties = {
-    inputType: typeof Dropdown;
-    maxItems?: number;
-    minItems?: number;
-    options: {
-        [key: string]: string;
-    }
-}
+
 
 export type EmailProperties = {
     inputType: typeof Email;

diff --git a/packages/core/src/model/QuestionModel.ts b/packages/core/src/model/QuestionModel.ts
@@ -2,7 +2,7 @@ import { InputPropertiesTypes, InputTypeMap } from "./InputType";
 
 export type QuestionModel<TProps = InputPropertiesTypes> = {
     logicalName: string;
-    inputType: keyof InputTypeMap | "text";
+    inputType: keyof InputTypeMap | "text" | string;
     text: string;
     placeholder: string;
     paragraph: string;

diff --git a/packages/core/src/model/json-definitions/JsonDataModels.ts b/packages/core/src/model/json-definitions/JsonDataModels.ts
@@ -1,4 +1,4 @@
-import { ButtonsProperties, DropDownProperties, EmailProperties, MultilineProperties, RadioProperties, SliderProperties, TextProperties } from "../InputType";
+import { ButtonsProperties, EmailProperties, MultilineProperties, RadioProperties, SliderProperties, TextProperties } from "../InputType";
 
 type QuickFormQuestionDefinition = {
 
@@ -67,7 +67,7 @@ type QuickFormQuestionDefinition = {
 export type QuestionJsonModel =
     QuickFormQuestionDefinition |
     QuickFormQuestionDefinition & ButtonsProperties |
-    QuickFormQuestionDefinition & DropDownProperties |
+  //  QuickFormQuestionDefinition & DropDownProperties |
     QuickFormQuestionDefinition & EmailProperties |
     QuickFormQuestionDefinition & MultilineProperties |
     QuickFormQuestionDefinition & RadioProperties |

diff --git a/packages/core/src/services/defaults/DefaultInputTypeResolver.ts b/packages/core/src/services/defaults/DefaultInputTypeResolver.ts
@@ -1,28 +1,48 @@
 import { FC } from "react";
-import { DropDownProperties, RadioProperties, SliderProperties, ButtonsProperties, InputPropertiesTypes, InputProps } from "../../model";
+import {  RadioProperties, SliderProperties, ButtonsProperties, InputPropertiesTypes, InputProps } from "../../model";
 import { QuestionJsonModel } from "../../model/json-definitions/JsonDataModels";
 import { registerQuickFormService } from "../QuickFormServices";
 //import { TextInput, MultilineInput, DropDownInput } from "../../components/question/input-types/index";
 
+function getDefaultValue(schema: JSONSchema7Definition) {
+    if (typeof schema === "boolean")
+        return undefined;
+    if (typeof schema === "string")
+        return undefined;
+    if (typeof schema === "object")
+        return schema.default;
+}
 function parseInputProperties(questionJsonModel: QuestionJsonModel): InputPropertiesTypes {
+    if (!questionJsonModel.inputType)
+        return {};
+
+    const comp = resolveInputComponent(questionJsonModel.inputType)?.quickform?.schema?.properties;
+    if (comp) {
+        return Object.fromEntries(Object.entries(comp)
+            .filter(([k, _]) => !(k === "text" || k === "paragraph" || k === "placeholder"))
+            .map(([k, schema]) => [k, questionJsonModel[k as keyof (QuestionJsonModel)] ?? getDefaultValue(schema)])) as InputPropertiesTypes;
+    }
+
     let inputProperties: InputPropertiesTypes;
 
+
     switch (questionJsonModel.inputType) {
+
         case "buttons":
             inputProperties = {
                 inputType: questionJsonModel.inputType,
                 options: (questionJsonModel as (QuestionJsonModel & ButtonsProperties)).options
             };
             break;
 
-        case "dropdown":
-            inputProperties = {
-                inputType: questionJsonModel.inputType,
-                options: (questionJsonModel as (QuestionJsonModel & DropDownProperties)).options,
-                minItems: (questionJsonModel as (QuestionJsonModel & DropDownProperties)).minItems ?? 1,
-                maxItems: (questionJsonModel as (QuestionJsonModel & DropDownProperties)).maxItems ?? 1,
-            };
-            break;
+        //case "dropdown":
+        //    inputProperties = {
+        //        inputType: questionJsonModel.inputType,
+        //        options: (questionJsonModel as (QuestionJsonModel & DropDownProperties)).options,
+        //        minItems: (questionJsonModel as (QuestionJsonModel & DropDownProperties)).minItems ?? 1,
+        //        maxItems: (questionJsonModel as (QuestionJsonModel & DropDownProperties)).maxItems ?? 1,
+        //    };
+        //    break;
 
         case "radio":
             inputProperties = {
@@ -42,6 +62,8 @@ function parseInputProperties(questionJsonModel: QuestionJsonModel): InputProper
             break;
 
         default:
+
+
             inputProperties = {}
 ;
     }

diff --git a/packages/core/src/services/index.ts b/packages/core/src/services/index.ts
@@ -1 +1,2 @@
-export * from "./defaults";
+export * from "./defaults";
+export * from "./QuickFormServices";
diff --git a/packages/designer/src/Components/Drawers/NavDrawer.tsx b/packages/designer/src/Components/Drawers/NavDrawer.tsx
@@ -27,7 +27,7 @@ import { QuestionJsonModel } from "@eavfw/quickform-core/src/model/json-definiti
 import { CaretUpFilled, CaretDownFilled } from "@fluentui/react-icons"
 const useNavDrawerStyles = makeStyles({
     actions: {
-        backgroundColor: tokens.colorBrandBackground,
+        backgroundColor: tokens.colorNeutralBackground1Hover,
         position: "absolute",
         right:0
     }
@@ -144,6 +144,9 @@ export const NavDrawer = ({
                                                                 ?? old.questions[Object.keys(old.questions)[index - 1]];
                                                             oq.order = index;
                                                             const q = old.questions[key]; q.order = index - 1;
+
+                                                            old.questions = Object.fromEntries(Object.entries(old.questions).map(([k, q], i) => [k, q, q.order ?? i] as [string, QuestionJsonModel, number]).sort(([k, a, i], [k1, b, j]) => i - j))
+
                                                             return { ...old };
                                                         })
                                                     }}
@@ -158,6 +161,10 @@ export const NavDrawer = ({
                                                                 ?? old.questions[Object.keys(old.questions)[index + 1]];
                                                             oq.order = index;
                                                             const q = old.questions[key]; q.order = index + 1;
+
+                                                            old.questions = Object.fromEntries(Object.entries(old.questions).map(([k, q], i) => [k, q, q.order ?? i] as [string, QuestionJsonModel, number]).sort(([k, a, i], [k1, b, j]) => i - j))
+
+
                                                             return { ...old };
                                                         })
                                                     }}