From 5c835c58ebb6e3045a6bd0813493080e5830af9f Mon Sep 17 00:00:00 2001 From: Kasper Baun Date: Fri, 26 Apr 2024 09:16:16 +0200 Subject: [PATCH 1/4] fix: removed unused files in playground - added icons to baseinputcomponent --- .../core/src/components/icons/EmailIcon.tsx | 6 +- .../src/components/icons/IconResolver.tsx | 18 ++ .../core/src/components/icons/UserIcon.tsx | 6 +- .../baseinput/BaseInputComponent.tsx | 53 ++++- .../question/input-types/email/EmailInput.tsx | 12 +- .../input-types/email/EmailInputSchema.ts | 32 ++- .../question/input-types/phone/PhoneInput.tsx | 12 +- .../input-types/phone/PhoneInputSchema.ts | 26 +++ .../question/input-types/text/TextInput.tsx | 11 +- .../input-types/text/TextInputSchema.ts | 26 +++ packages/playground/src/App copy.tsx | 83 -------- packages/playground/src/App.tsx | 9 +- packages/playground/src/App_OLD.tsx | 68 ------- .../allInputControlsMultipleSlidesTest2.json | 190 ------------------ .../src/data/allInputControlsTest.json | 75 +++---- packages/playground/src/data/carp.json | 181 ----------------- packages/playground/src/data/clean.json | 168 ---------------- packages/playground/src/data/dummydata.json | 93 --------- packages/playground/src/data/dummydata.ts | 183 ----------------- .../src/data/testDataWithColumnsAndrows.json | 175 ---------------- .../{dummydata copy.json => testdata.json} | 0 .../playground/src/templates/TemplateOne.tsx | 38 ---- .../src/templates/TemplateThree.tsx | 182 ----------------- .../playground/src/templates/TemplateTwo.tsx | 126 ------------ .../src/views/EditorQuickformView.tsx | 6 +- 25 files changed, 224 insertions(+), 1555 deletions(-) create mode 100644 packages/core/src/components/icons/IconResolver.tsx delete mode 100644 packages/playground/src/App copy.tsx delete mode 100644 packages/playground/src/App_OLD.tsx delete mode 100644 packages/playground/src/data/allInputControlsMultipleSlidesTest2.json delete mode 100644 packages/playground/src/data/carp.json delete mode 100644 packages/playground/src/data/clean.json delete mode 100644 packages/playground/src/data/dummydata.json delete mode 100644 packages/playground/src/data/dummydata.ts delete mode 100644 packages/playground/src/data/testDataWithColumnsAndrows.json rename packages/playground/src/data/{dummydata copy.json => testdata.json} (100%) delete mode 100644 packages/playground/src/templates/TemplateOne.tsx delete mode 100644 packages/playground/src/templates/TemplateThree.tsx delete mode 100644 packages/playground/src/templates/TemplateTwo.tsx diff --git a/packages/core/src/components/icons/EmailIcon.tsx b/packages/core/src/components/icons/EmailIcon.tsx index f08c2d4..d979e73 100644 --- a/packages/core/src/components/icons/EmailIcon.tsx +++ b/packages/core/src/components/icons/EmailIcon.tsx @@ -1,9 +1,9 @@ import React from "react"; import { IconProps } from "./iconProps"; -export const EmailIcon: React.FC = ({ color = "green", size = 100, style }) => { +export const EmailIcon: React.FC = ({ color = "green", size = 100, style, className }) => { return ( -
+
= ({ color = "green", size = 100, st xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/core/src/components/icons/IconResolver.tsx b/packages/core/src/components/icons/IconResolver.tsx new file mode 100644 index 0000000..6eb6f34 --- /dev/null +++ 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 = ({ type, color, className, size }) => { + switch (type) { + case "Email": return + case "Phone": return + case "User": return + default: return + } +} \ No newline at end of file diff --git a/packages/core/src/components/icons/UserIcon.tsx b/packages/core/src/components/icons/UserIcon.tsx index 1241110..a6a0625 100644 --- a/packages/core/src/components/icons/UserIcon.tsx +++ b/packages/core/src/components/icons/UserIcon.tsx @@ -1,9 +1,9 @@ import React from "react"; import { IconProps } from "./iconProps"; -export const UserIcon: React.FC = ({ color = "green", size = 100, style }) => { +export const UserIcon: React.FC = ({ color = "green", size = 100, style, className }) => { return ( -
+
= ({ color = "green", size = 100, sty xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx index 2b2df70..fa569bb 100644 --- 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: { @@ -40,9 +39,31 @@ const useInputTextStyles = makeStyles({ }, }, + + inputIcon: { + marginTop: '8px', + paddingBottom: '9px', + }, + iconLeft: { + left: '0', + paddingRight: '15px' + }, + iconRight: { + right: '0', + paddingLeft: '15px' + }, }); -export const BaseInputComponent = ({ questionModel, className, style, type }: { type: InputHTMLAttributes["type"], questionModel: QuestionModel, className?: string, style?: CSSProperties }) => { +type BaseInputComponentProps = { + type: InputHTMLAttributes["type"], + questionModel: QuestionModel, + beforeIcon?: IconType; + afterIcon?: IconType + style?: CSSProperties + className?: string, +} + +export const BaseInputComponent: React.FC = ({ questionModel, className, style, type, beforeIcon, afterIcon }) => { const [text, setText] = useState(questionModel!.output); const ref = useFocusableQuestion(questionModel.logicalName); @@ -79,6 +100,14 @@ export const BaseInputComponent = ({ questionModel, className, style, type }: { return (
+ {beforeIcon && + + } + {afterIcon && + + }
); -} \ No newline at end of file +} diff --git a/packages/core/src/components/question/input-types/email/EmailInput.tsx b/packages/core/src/components/question/input-types/email/EmailInput.tsx index 82ef18c..ee08e0e 100644 --- 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 = (props) => { return } diff --git a/packages/core/src/components/question/input-types/email/EmailInputSchema.ts b/packages/core/src/components/question/input-types/email/EmailInputSchema.ts index 1006886..9e8587e 100644 --- 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 = { label: "Email", @@ -23,10 +23,36 @@ export const emailInputSchema: InputComponentMetadata = { 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", } -} \ No newline at end of file +} diff --git a/packages/core/src/components/question/input-types/phone/PhoneInput.tsx b/packages/core/src/components/question/input-types/phone/PhoneInput.tsx index 93fccbc..3b903c0 100644 --- 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 = (props) => { return } diff --git a/packages/core/src/components/question/input-types/phone/PhoneInputSchema.ts b/packages/core/src/components/question/input-types/phone/PhoneInputSchema.ts index d78e3dd..3c04805 100644 --- 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 = { 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 index ae760cc..e92f6eb 100644 --- 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 = (props) => { return diff --git a/packages/core/src/components/question/input-types/text/TextInputSchema.ts b/packages/core/src/components/question/input-types/text/TextInputSchema.ts index 7cfb12e..c61e552 100644 --- 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 = { 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/playground/src/App copy.tsx b/packages/playground/src/App copy.tsx deleted file mode 100644 index d8a673f..0000000 --- a/packages/playground/src/App copy.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React from 'react'; -import { useState } from 'react'; -import { QuickFormDefinition } from '../../core/src/model'; -import testdata from "./data/allInputControlsTest.json"; -import { QuickFormProvider } from '../../core/src/state'; -import { Editor } from '@monaco-editor/react'; -import { Button, QuickForm } from '../../core/src/components'; -// import "./components/slider/SliderInput"; -import "./components/buttons-input/ButtonsInput"; -import "./components/checkbox-input/CheckboxInput"; -import "./components/radio-input/RadioInput"; -import "./components/slider-input/SliderInput"; - -export const App = () => { - const [selectedTemplate, setSelectedTemplate] = useState(testdata as QuickFormDefinition); - const [hackToChangeQuickForm, setHackToChangeQuickForm] = useState(0); - const [editorValue, setEditorValue] = useState(JSON.stringify(testdata)); - - const onChangeEditorValue = (value: string) => { - setEditorValue(value); - } - - const updateQuickForm = () => { - setSelectedTemplate(() => JSON.parse(editorValue)); - setHackToChangeQuickForm(() => hackToChangeQuickForm + 1); - } - - return ( -
- -
- { - setTimeout(() => editor.getAction('editor.action.formatDocument').run(), 100); - }} - theme="vs-dark" - /> - -
- -
- {/*

- BEREGN PRISEN FOR RENSNING AF FLISER -

-

- Få prisen med det samme - -

*/} - - - -
- -
- ); -}; - -const containerStyling: React.CSSProperties = { - width: '100%', - minHeight: '1200px', - padding: '10px', - display: 'flex', -} - -const editorStyling: React.CSSProperties = { - margin: 'auto', - width: '50%', - height: '80vh' -} - -const quickformStyling: React.CSSProperties = { - display: 'flex', - flexDirection: "column", - marginTop: '20px', - justifyContent: 'center', - alignItems: 'center', - width: '50%' -} \ No newline at end of file diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx index 321c20b..1fa007a 100644 --- a/packages/playground/src/App.tsx +++ b/packages/playground/src/App.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { QuickFormDefinition } from '../../core/src/model'; -import testdata from "./data/allInputControlsMultipleSlidesTest2.json"; +import testdata from "./data/allInputControlsTest.json"; import { QuickFormProvider } from '../../core/src/state'; import { NavigationButton, QuickForm } from '../../core/src/components'; import "./components/buttons-input/ButtonsInput"; @@ -28,11 +28,4 @@ const containerStyling: React.CSSProperties = { display: 'flex', justifyContent: 'center', alignItems: 'center', -} - -const quickformStyling: React.CSSProperties = { - display: 'flex', - flexDirection: "column", - marginTop: '20px', - } \ No newline at end of file diff --git a/packages/playground/src/App_OLD.tsx b/packages/playground/src/App_OLD.tsx deleted file mode 100644 index 71e931e..0000000 --- a/packages/playground/src/App_OLD.tsx +++ /dev/null @@ -1,68 +0,0 @@ -// import { useState } from 'react'; -// import { QuickFormProvider } from "../../core/src/state/QuickformProvider"; -// import testDataWithColumnsAndRows from "./data/testDataWithColumnsAndrows.json"; -// import { TemplateOne } from "./templates/TemplateOne"; -// import { TemplateTwo, testDataTwo } from "./templates/TemplateTwo"; -// import { TemplateThree, testDataThree } from './templates/TemplateThree'; - -// export const App = () => { -// const [selectedTemplate, setSelectedTemplate] = useState('templateThree'); - -// const temp1 = -// -// ; -// const temp2 = -// -// ; -// const temp3 = -// -// ; - - -// const renderTemplate = () => { -// switch (selectedTemplate) { -// case 'templateOne': return temp1; -// case 'templateTwo': return temp2; -// case "templateThree": return temp3; -// default: -// return temp1; -// } -// }; - -// return ( -//
-//
-// -//
-//
-// {renderTemplate()} -//
-//
-// ); -// }; - -// const containerStyling: React.CSSProperties = { -// width: '100%', -// height: '800px', -// padding: '10px' -// } - -// const selectSwitchStyling: React.CSSProperties = { -// margin: 'auto', -// width: '100%' -// } - -// const quickformStyling: React.CSSProperties = { -// display: 'flex', -// marginTop: '20px', -// justifyContent: 'center', -// width: '100%' -// } diff --git a/packages/playground/src/data/allInputControlsMultipleSlidesTest2.json b/packages/playground/src/data/allInputControlsMultipleSlidesTest2.json deleted file mode 100644 index cd3e1a3..0000000 --- a/packages/playground/src/data/allInputControlsMultipleSlidesTest2.json +++ /dev/null @@ -1,190 +0,0 @@ -{ - "layout": { - "autoAdvanceSlides": false, - "slides": { - "slide1": { - "title": "Test titel", - "rows": { - "row1": { - "columns": { - "col1": { - "rows": { - "row1_1": { - "type": "question", - "ref": "textTest" - }, - "row1_2": { - "type": "question", - "ref": "multilineTest" - }, - "row1_3": { - "type": "question", - "ref": "emailTest" - }, - "row1_4": { - "type": "question", - "ref": "sliderTest" - } - } - } - } - } - } - }, - "slide2": { - "rows": { - "row1": { - "columns": { - "col1": { - "rows": { - "row2_1": { - "type": "question", - "ref": "phoneTest" - }, - "row2_2": { - "type": "question", - "ref": "radioTest" - }, - "row2_3": { - "type": "question", - "ref": "buttonsTest" - }, - "row2_4": { - "type": "question", - "ref": "checkboxTest" - } - } - } - } - } - } - } - } - }, - "submit": { - "text": "", - "buttonText": "Beregn", - "paragraphs": [ - "Gennemgå venligst dine oplysninger før indsendelse.", - "Sørg for, at alle detaljer er korrekte for at modtage et nøjagtigt tilbud." - ], - "submitUrl": "https://httpbin.org/post", - "submitMethod": "POST", - "submitFields": { - "uiSchema": { - "name": { - "ui:placeholder": "Indtast dit navn", - "ui:label": "Navn" - }, - "phone": { - "ui:placeholder": "Indtast dit telefonnummer", - "ui:label": "Telefon" - }, - "email": { - "ui:placeholder": "Indtast din e-mail", - "ui:label": "E-mail" - } - }, - "schema": { - "$schema": "http://json-schema.org/draft-04/schema#", - "type": "object", - "properties": { - "name": { - "type": "string", - "title": "Navn", - "inputType": "text" - }, - "phone": { - "type": "string", - "format": "tel", - "title": "Telefon", - "inputType": "phone" - }, - "email": { - "type": "string", - "format": "email", - "title": "E-mail", - "inputType": "email" - } - }, - "required": [ - "name", - "phone", - "email" - ] - } - } - }, - "ending": { - "inputType": "ending", - "text": "Tak for at du brugte vores service", - "paragraph": "Vi vil kontakte dig snarest med dit tilbud." - }, - "questions": { - "sliderTest": { - "inputType": "slider", - "text": "Slider test", - "paragraph": "Test af slider", - "placeholder": "1", - "min": 1, - "max": 200, - "step": 1, - "type": "number", - "lang": "DA" - }, - "checkboxTest": { - "inputType": "checkbox", - "text": "Checkbox test", - "paragraph": "Test af checkbox", - "type": "boolean", - "lang": "DA" - }, - "radioTest": { - "inputType": "radio", - "text": "Radio test", - "paragraph": "Test af radio", - "options": { - "yes": "Ja", - "no": "Nej" - }, - "lang": "DA" - }, - "buttonsTest": { - "inputType": "buttons", - "text": "Buttons test", - "paragraph": "Test af buttons", - "options": { - "yes": "Ja", - "no": "Nej" - }, - "lang": "DA" - }, - "multilineTest": { - "inputType": "multilinetext", - "text": "Multilinetext test", - "paragraph": "Test af multilinetext", - "lang": "DA" - }, - "nameTest": { - "inputType": "text", - "text": "Text test", - "paragraph": "Test af text", - "placeholder": "Skriv noget..", - "lang": "DA" - }, - "phoneTest": { - "inputType": "phone", - "text": "Phone test", - "paragraph": "Test af phone", - "placeholder": "Skriv nogle tal..", - "lang": "DA" - }, - "emailTest": { - "inputType": "email", - "text": "Email test", - "paragraph": "Test af email", - "placeholder": "Indtast din e-mail", - "lang": "DA" - } - } -} \ No newline at end of file diff --git a/packages/playground/src/data/allInputControlsTest.json b/packages/playground/src/data/allInputControlsTest.json index 70cbbc1..f37ef22 100644 --- a/packages/playground/src/data/allInputControlsTest.json +++ b/packages/playground/src/data/allInputControlsTest.json @@ -3,7 +3,7 @@ "autoAdvanceSlides": false, "slides": { "slide1": { - "title": "Test titel", + "title": "Test-titel for slide", "rows": { "row1": { "columns": { @@ -15,15 +15,15 @@ }, "row1_2": { "type": "question", - "ref": "multilineTest" + "ref": "emailTest" }, "row1_3": { "type": "question", - "ref": "emailTest" + "ref": "phoneTest" }, "row1_4": { "type": "question", - "ref": "phoneTest" + "ref": "multilineTest" }, "row1_5": { "type": "question", @@ -49,6 +49,11 @@ } } }, + "intro": { + "text": "Playground Request Form", + "paragraph": "Tryk på start for at fortsætte...", + "buttonText": "Start" + }, "submit": { "text": "", "buttonText": "Beregn", @@ -79,20 +84,17 @@ "properties": { "name": { "type": "string", - "title": "Navn", - "inputType": "text" + "title": "Navn" }, "phone": { "type": "string", "format": "tel", - "title": "Telefon", - "inputType": "phone" + "title": "Telefon" }, "email": { "type": "string", "format": "email", - "title": "E-mail", - "inputType": "email" + "title": "E-mail" } }, "required": [ @@ -106,17 +108,42 @@ "ending": { "inputType": "ending", "text": "Tak for at du brugte vores service", - "paragraph": "Vi vil kontakte dig snarest med dit tilbud." + "paragraph": "Vi vil kontakte dig snarest." }, "questions": { + "textTest": { + "inputType": "text", + "text": "Text test", + "paragraph": "Test af text", + "placeholder": "Skriv noget..", + "lang": "DA", + "afterIcon": "User" + }, + "emailTest": { + "inputType": "email", + "text": "Email test", + "paragraph": "Test af email", + "placeholder": "Indtast din e-mail", + "lang": "DA", + "beforeIcon": "Email" + }, + "phoneTest": { + "inputType": "phone", + "text": "Phone test", + "paragraph": "Test af phone", + "placeholder": "Skriv nogle tal..", + "lang": "DA", + "beforeIcon": "Phone" + }, "sliderTest": { + "defaultValue": 100, "inputType": "slider", "text": "Slider test", "paragraph": "Test af slider", "placeholder": "1", "min": 1, "max": 200, - "step": 10, + "step": 1, "type": "number", "lang": "DA" }, @@ -135,7 +162,8 @@ "yes": "Ja", "no": "Nej" }, - "lang": "DA" + "lang": "DA", + "direction": "horizontal" }, "buttonsTest": { "inputType": "buttons", @@ -152,27 +180,6 @@ "text": "Multilinetext test", "paragraph": "Test af multilinetext", "lang": "DA" - }, - "nameTest": { - "inputType": "text", - "text": "Text test", - "paragraph": "Test af text", - "placeholder": "Skriv noget..", - "lang": "DA" - }, - "phoneTest": { - "inputType": "phone", - "text": "Phone test", - "paragraph": "Test af phone", - "placeholder": "Skriv nogle tal..", - "lang": "DA" - }, - "emailTest": { - "inputType": "email", - "text": "Email test", - "paragraph": "Test af email", - "placeholder": "Indtast din e-mail", - "lang": "DA" } } } \ No newline at end of file diff --git a/packages/playground/src/data/carp.json b/packages/playground/src/data/carp.json deleted file mode 100644 index 1d37105..0000000 --- a/packages/playground/src/data/carp.json +++ /dev/null @@ -1,181 +0,0 @@ -{ - "layout": { - "slides": { - "slide1": { - "title": "Beregn prisen for rengøring af fliser", - "rows": { - "row1": { - "columns": { - "col1": { - "rows": { - "row1_1": { - "type": "question", - "ref": "areaToClean" - }, - "row1_2": { - "type": "question", - "ref": "removeAlgae" - }, - "row1_3": { - "type": "question", - "ref": "impregnateTiles", - "visible": { - "type": "JSEval", - "rule": "getCurrentSlide().questions.find(q => q.logicalName === 'removeAlgae').output === 'hest'" - } - }, - "row1_4": { - "type": "question", - "ref": "testPhone" - } - } - } - } - } - } - }, - "slide2": { - "title": "Indtast dine oplysninger", - "rows": { - "row2": { - "columns": { - "col1": { - "rows": { - "row2_1": { - "type": "question", - "ref": "name" - }, - "row2_2": { - "type": "question", - "ref": "phone" - }, - "row2_3": { - "type": "question", - "ref": "email" - } - } - } - } - } - } - } - } - }, - "submit": { - "text": "", - "buttonText": "Beregn", - "paragraphs": [ - "Gennemgå venligst dine oplysninger før indsendelse.", - "Sørg for, at alle detaljer er korrekte for at modtage et nøjagtigt tilbud." - ], - "submitUrl": "https://httpbin.org/post", - "submitMethod": "POST", - "submitFields": { - "uiSchema": { - "name": { - "ui:placeholder": "Indtast dit navn", - "ui:label": "Navn" - }, - "phone": { - "ui:placeholder": "Indtast dit telefonnummer", - "ui:label": "Telefon" - }, - "email": { - "ui:placeholder": "Indtast din e-mail", - "ui:label": "E-mail" - } - }, - "schema": { - "$schema": "http://json-schema.org/draft-04/schema#", - "type": "object", - "properties": { - "name": { - "type": "string", - "title": "Navn" - }, - "phone": { - "type": "string", - "format": "tel", - "title": "Telefon" - }, - "email": { - "type": "string", - "format": "email", - "title": "E-mail" - } - }, - "required": [ - "areaToClean", - "name", - "phone", - "email" - ] - } - } - }, - "ending": { - "inputType": "ending", - "text": "Tak for at du brugte vores service", - "paragraph": "Vi vil kontakte dig snarest med dit tilbud." - }, - "questions": { - "areaToClean": { - "inputType": "slider", - "text": "Hvor mange kvadratmeter skal renses?", - "paragraph": "", - "placeholder": "20 m2", - "min": 1, - "max": 200, - "step": 10, - "type": "number", - "lang": "DA" - }, - "removeAlgae": { - "inputType": "text", - "text": "Skal alger fjernes?", - "paragraph": "Vælg 'Ja', hvis der er behov for fjernelse af alger, ellers vælg 'Nej'.", - "options": { - "yes": "Ja", - "no": "Nej" - }, - "lang": "DA" - }, - "impregnateTiles": { - "inputType": "multilinetext", - "text": "Skal fliserne imprægneres?", - "paragraph": "Vælg 'Ja', hvis fliserne skal imprægneres, ellers vælg 'Nej'.", - "options": { - "yes": "Ja", - "no": "Nej" - }, - "lang": "DA" - }, - "testPhone": { - "inputType": "phone", - "text": "Indtast telefonnummer", - "paragraph": "Skal være et gyldigt dansk telefonnummer", - "lang": "DA" - }, - "name": { - "inputType": "text", - "text": "Hvad er dit navn?", - "paragraph": "Indtast venligst dit fulde navn.", - "placeholder": "Indtast dit navn", - "lang": "DA" - }, - "phone": { - "inputType": "phone", - "text": "Hvad er dit telefonnummer?", - "paragraph": "Indtast venligst dit telefonnummer til kontaktformål.", - "placeholder": "Indtast dit telefonnummer", - "lang": "DA" - }, - "email": { - "inputType": "email", - "text": "Hvad er din e-mailadresse?", - "paragraph": "Indtast venligst din e-mail for at modtage tilbuddet.", - "placeholder": "Indtast din e-mail", - "lang": "DA" - } - } -} \ No newline at end of file diff --git a/packages/playground/src/data/clean.json b/packages/playground/src/data/clean.json deleted file mode 100644 index 3b9dd7b..0000000 --- a/packages/playground/src/data/clean.json +++ /dev/null @@ -1,168 +0,0 @@ -{ - "layout": { - "slides": { - "slide1": { - "title": "Beregn prisen for rengøring af fliser", - "rows": { - "row1": { - "columns": { - "col1": { - "rows": { - "row1_1": { - "type": "question", - "ref": "areaToClean" - }, - "row1_2": { - "type": "question", - "ref": "removeAlgae" - }, - "row1_3": { - "type": "question", - "ref": "impregnateTiles" - } - } - } - } - } - } - }, - "slide2": { - "title": "Indtast dine oplysninger", - "rows": { - "row2": { - "columns": { - "col1": { - "rows": { - "row2_1": { - "type": "question", - "ref": "name" - }, - "row2_2": { - "type": "question", - "ref": "phone" - }, - "row2_3": { - "type": "question", - "ref": "email" - } - } - } - } - } - } - } - } - }, - "submit": { - "text": "", - "buttonText": "Beregn", - "paragraphs": [ - "Gennemgå venligst dine oplysninger før indsendelse.", - "Sørg for, at alle detaljer er korrekte for at modtage et nøjagtigt tilbud." - ], - "submitUrl": "https://httpbin.org/post", - "submitMethod": "POST", - "submitFields": { - "uiSchema": { - - "name": { - "ui:placeholder": "Indtast dit navn", - "ui:label": "Navn" - }, - "phone": { - "ui:placeholder": "Indtast dit telefonnummer", - "ui:label": "Telefon" - }, - "email": { - "ui:placeholder": "Indtast din e-mail", - "ui:label": "E-mail" - } - }, - "schema": { - "$schema": "http://json-schema.org/draft-04/schema#", - "type": "object", - "properties": { - "name": { - "type": "string", - "title": "Navn" - }, - "phone": { - "type": "string", - "format": "tel", - "title": "Telefon" - }, - "email": { - "type": "string", - "format": "email", - "title": "E-mail" - } - }, - "required": [ - "areaToClean", - "name", - "phone", - "email" - ] - } - } - }, - "ending": { - "inputType": "ending", - "text": "Tak for at du brugte vores service", - "paragraph": "Vi vil kontakte dig snarest med dit tilbud." - }, - "questions": { - "areaToClean": { - "inputType": "slider", - "text": "Hvor mange kvadratmeter skal renses?", - "paragraph": "", - "placeholder": "20 m2", - "min": 1, - "max": 200, - "step": 10, - "type": "number", - "lang": "DA" - }, - "removeAlgae": { - "inputType": "toggle", - "text": "Skal alger fjernes?", - "paragraph": "Vælg 'Ja', hvis der er behov for fjernelse af alger, ellers vælg 'Nej'.", - "options": { - "yes": "Ja", - "no": "Nej" - }, - "lang": "DA" - }, - "impregnateTiles": { - "inputType": "toggle", - "text": "Skal fliserne imprægneres?", - "paragraph": "Vælg 'Ja', hvis fliserne skal imprægneres, ellers vælg 'Nej'.", - "options": { - "yes": "Ja", - "no": "Nej" - }, - "lang": "DA" - }, - "name": { - "inputType": "text", - "text": "Hvad er dit navn?", - "paragraph": "Indtast venligst dit fulde navn.", - "placeholder": "Indtast dit navn", - "lang": "DA" - }, - "phone": { - "inputType": "text", - "text": "Hvad er dit telefonnummer?", - "paragraph": "Indtast venligst dit telefonnummer til kontaktformål.", - "placeholder": "Indtast dit telefonnummer", - "lang": "DA" - }, - "email": { - "inputType": "text", - "text": "Hvad er din e-mailadresse?", - "paragraph": "Indtast venligst din e-mail for at modtage tilbuddet.", - "placeholder": "Indtast din e-mail", - "lang": "DA" - } - } -} \ No newline at end of file diff --git a/packages/playground/src/data/dummydata.json b/packages/playground/src/data/dummydata.json deleted file mode 100644 index 40aeef7..0000000 --- a/packages/playground/src/data/dummydata.json +++ /dev/null @@ -1,93 +0,0 @@ -{ - "submit": { - "text": "Example Submit Text", - "paragraph": "Example paragraph describing the submit action.", - "buttonText": "Submit", - "submitFields": { - "fullName": { - "logicalName": "fullName", - "inputType": "text", - "text": "What is your name?", - "placeholder": "Enter your name", - "paragraph": "We need your name for identification.", - "answered": false, - "output": {} - }, - "email": { - "logicalName": "email", - "inputType": "email", - "text": "What is your email?", - "placeholder": "Enter your email", - "paragraph": "We need your email for contact.", - "answered": false, - "output": {} - } - } - }, - "ending": { - "text": "Thanks for choosing DummyData", - "paragraph": "The form has now been submitted." - }, - "questions": { - "contact": { - "inputType": "text", - "text": "Contact number", - "placeholder": "e.g., +1234567890", - "paragraph": "Please provide a contact number for order updates." - }, - "billingAddress": { - "inputType": "text", - "text": "Billing address", - "placeholder": "Street, City, Zip Code", - "paragraph": "Enter the address associated with your payment method." - }, - "email": { - "inputType": "email", - "text": "Email address", - "placeholder": "yourname@example.com", - "paragraph": "Provide your email for order confirmation and receipts." - }, - "orderInstructions": { - "inputType": "text", - "text": "Special instructions for order", - "placeholder": "Any specific details", - "paragraph": "Include any special instructions for your order here." - }, - "pickupTime": { - "inputType": "time", - "text": "Preferred pickup time", - "placeholder": "HH:MM", - "paragraph": "Select a convenient time for pickup." - }, - "deliveryDate": { - "inputType": "date", - "text": "Desired delivery date", - "placeholder": "YYYY-MM-DD", - "paragraph": "Choose a date for your delivery." - }, - "recipientName": { - "inputType": "text", - "text": "Recipient's name", - "placeholder": "Full name", - "paragraph": "Enter the name of the person receiving the delivery." - }, - "productPreference": { - "inputType": "text", - "text": "Product preference", - "placeholder": "Specify product type", - "paragraph": "Mention your preference for specific products or brands." - }, - "paymentMethod": { - "inputType": "text", - "text": "Preferred payment method", - "placeholder": "Credit card, PayPal, etc.", - "paragraph": "Indicate your preferred method of payment." - }, - "feedback": { - "inputType": "textarea", - "text": "Customer feedback", - "placeholder": "Your feedback here", - "paragraph": "We value your feedback, please share your experience with us." - } - } -} \ No newline at end of file diff --git a/packages/playground/src/data/dummydata.ts b/packages/playground/src/data/dummydata.ts deleted file mode 100644 index 81fd9a1..0000000 --- a/packages/playground/src/data/dummydata.ts +++ /dev/null @@ -1,183 +0,0 @@ -import { QuickFormDefinition } from "@eavfw/quickform-core/src/model/json-definitions/QuickFormDefinition"; - - - -export const newDummyForm = { - "layout": { - "slides": { - "slide1": { - "title": "Ship name and owners", - "rows": { - "row1": { - "columns": { - "col1": { - "rows": { - "row1_1": { - type: "question", - "ref": "shipName" - }, - "row1_2": { - type: "question", - "ref": "shipOwners" - } - } - } - } - } - } - }, - "slide2": { - "title": "Date and Cargo", - "rows": { - "row2": { - "columns": { - "col1": { - "rows": { - "row2_1": { - type: "question", - "ref": "dateSelector" - }, - "row2_2": { - type: "question", - "ref": "cargo" - } - } - } - } - } - } - }, - "slide3": { - "title": "Bill of Lading", - "rows": { - "row3": { - "columns": { - "col1": { - "rows": { - "row3_1": { - type: "question", - "ref": "billOfLading" - } - } - } - } - } - } - } - } - }, - "intro": { - "text": "Company LOI Request Form", - "paragraph": "Click to start processing the request", - "buttonText": "Start", - }, - "submit": { - "text": "Submit LOI.", - "buttonText": "Submit", - "paragraphs": [ - "Who should sign the LOI?", - "To speed up the process, you may provide the signing information already now.", - "When ready we will send the digital loi for signature to this person." - ], - "submitUrl": "https://httpbin.org/post", - "submitMethod": "POST", - "submitFields": { - "uiSchema": { - "fullname": { "ui:placeholder": "Full name of the signing person.", "ui:label": false }, - "title": { "ui:placeholder": "Title of the signing person.", "ui:label": false }, - "email": { "ui:placeholder": "Email of the signing person", "ui:label": false }, - "phone": { "ui:placeholder": "SMS number of the signing person", "ui:label": false } - - }, - "schema": { - "$schema": "http://json-schema.org/draft-04/schema#", - "type": "object", - "title": "Who should sign the LOI?", - "description": "To speed up the process, you may provide the signing information already now. When ready we will send the digital loi for signature to this person.", - "properties": { - - - - - "fullname": { - "type": "string", - "description": "Whats the name of the person who is signing the LOI?", - }, - "title": { - "type": "string", - "description": "Whats the title of the person who is signing the LOI?", - }, - "email": { - "type": "string", - "format": "email", - "description": "Please provide us with the email of the signer." - }, - "phone": { - "type": "string", - "format": "tel", - "description": "If provided we will send an sms with the signing request." - }, - "sendBeforeApproved": { - "title": "Send to charteres", - "type": "boolean", - "description": "Want to speed up the process? You may send it for signatur at your chatereres. Please note if we find errors, the charteres might recieve notification that the LOI have been updated.\nIf not selected, we will send the digital signatur request when approved the document" - } - }, - "required": [ - "fullname", - "title", - "email" - ] - } - } - - - }, - "ending": { - "inputType": "ending", - "text": "Thanks for choosing Company", - "paragraph": "Looking forward to chartering with you." - }, - "questions": { - "shipOwners": { - "inputType": "multilinetext", - "text": "What is the name of the ships owner?", - "paragraph": "Please provide the name of the company that owns the ship", - "placeholder": "European Vessels A/S", - "lang": "EN" - }, - "dateSelector": { - "inputType": "text", - "text": "What is the date of your journey?", - "paragraph": "Please enter the date of your journey.", - "placeholder": "01/01/2000", - }, - "shipName": { - "inputType": "text", - "text": "What is the name of your ship?", - "paragraph": "Please provide the name of your ship.", - "placeholder": "M/S Vessel", - "lang": "EN" - }, - "cargo": { - "inputType": "text", - "text": "What type of cargo are you carrying?", - "paragraph": "Please select the type of cargo you are carrying on this journey.", - "placeholder": "Oil", - "lang": "EN" - }, - "billOfLading": { - "inputType": "dropdown", - "text": "Has the Bill of Lading been verified?", - "paragraph": "Please confirm whether the Bill of Lading details have been verified and are accurate.", - "placeholder": "Verified/Not Verified", - "minItems": 1, - "maxItems": 1, - "options": { - "A": "Verified", - "B": "Not verified" - }, - "lang": "EN" - }, - } -} as QuickFormDefinition; diff --git a/packages/playground/src/data/testDataWithColumnsAndrows.json b/packages/playground/src/data/testDataWithColumnsAndrows.json deleted file mode 100644 index 7295a98..0000000 --- a/packages/playground/src/data/testDataWithColumnsAndrows.json +++ /dev/null @@ -1,175 +0,0 @@ -{ - "layout": { - "slides": { - "slide1": { - "displayName": "Slide number one", - "rows": { - "row1": { - "columns": { - "col1": { - "rows": { - "row1_1": { - "questionRefLogicalName": "feedback" - }, - "row1_2": { - "questionRefLogicalName": "paymentMethod" - } - } - }, - "col2": { - "rows": { - "row2_1": { - "questionRefLogicalName": "productPreference" - } - } - } - } - } - } - }, - "slide2": { - "displayName": "Slide number two", - "rows": { - "row2": { - "columns": { - "col2": { - "rows": { - "row2_1": { - "questionRefLogicalName": "recipientName" - }, - "row2_2": { - "questionRefLogicalName": "deliveryDate" - }, - "row2_3": { - "questionRefLogicalName": "pickupTime" - } - } - } - } - } - } - }, - "slide3": { - "displayName": "Slide number three", - "rows": { - "row3": { - "columns": { - "col3": { - "rows": { - "row3_1": { - "questionRefLogicalName": "contact" - }, - "row3_2": { - "questionRefLogicalName": "billingAddress" - }, - "row3_3": { - "questionRefLogicalName": "email" - }, - "row3_4": { - "questionRefLogicalName": "orderInstructions" - } - } - } - } - } - } - } - } - }, - "intro": { - "text": "Playground Request Form", - "paragraph": "Click to start processing the request.", - "buttonText": "Start" - }, - "submit": { - "text": "Example Submit Text", - "paragraph": "Example paragraph describing the submit action.", - "buttonText": "Submit", - "submitFields": { - "fullName": { - "logicalName": "question1", - "inputType": "text", - "text": "What is your name?", - "placeholder": "Enter your name", - "paragraph": "We need your name for identification.", - "answered": false, - "output": {} - }, - "email": { - "logicalName": "question2", - "inputType": "email", - "text": "What is your email?", - "placeholder": "Enter your email", - "paragraph": "We need your email for contact.", - "answered": false, - "output": {} - } - } - }, - "ending": { - "text": "Thanks for choosing DummyData", - "paragraph": "The form has now been submitted." - }, - "questions": { - "contact": { - "inputType": "text", - "text": "Contact number", - "placeholder": "e.g., +1234567890", - "paragraph": "Please provide a contact number for order updates." - }, - "billingAddress": { - "inputType": "text", - "text": "Billing address", - "placeholder": "Street, City, Zip Code", - "paragraph": "Enter the address associated with your payment method." - }, - "email": { - "inputType": "email", - "text": "Email address", - "placeholder": "yourname@example.com", - "paragraph": "Provide your email for order confirmation and receipts." - }, - "orderInstructions": { - "inputType": "text", - "text": "Special instructions for order", - "placeholder": "Any specific details", - "paragraph": "Include any special instructions for your order here." - }, - "pickupTime": { - "inputType": "time", - "text": "Preferred pickup time", - "placeholder": "HH:MM", - "paragraph": "Select a convenient time for pickup." - }, - "deliveryDate": { - "inputType": "date", - "text": "Desired delivery date", - "placeholder": "YYYY-MM-DD", - "paragraph": "Choose a date for your delivery." - }, - "recipientName": { - "inputType": "text", - "text": "Recipient's name", - "placeholder": "Full name", - "paragraph": "Enter the name of the person receiving the delivery." - }, - "productPreference": { - "inputType": "text", - "text": "Product preference", - "placeholder": "Specify product type", - "paragraph": "Mention your preference for specific products or brands." - }, - "paymentMethod": { - "inputType": "text", - "text": "Preferred payment method", - "placeholder": "Credit card, PayPal, etc.", - "paragraph": "Indicate your preferred method of payment." - }, - "feedback": { - "inputType": "textarea", - "text": "Customer feedback", - "placeholder": "Your feedback here", - "paragraph": "We value your feedback, please share your experience with us." - } - } -} \ No newline at end of file diff --git a/packages/playground/src/data/dummydata copy.json b/packages/playground/src/data/testdata.json similarity index 100% rename from packages/playground/src/data/dummydata copy.json rename to packages/playground/src/data/testdata.json diff --git a/packages/playground/src/templates/TemplateOne.tsx b/packages/playground/src/templates/TemplateOne.tsx deleted file mode 100644 index f71a27d..0000000 --- a/packages/playground/src/templates/TemplateOne.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { QuickForm, Heading, Paragraph } from "../../../core/src/components" - -export const TemplateOne: React.FC = () => { - return ( -
-
- Beregn prisen for gulvslibning - Få prisen med det samme -
- -
- -
- -
- ) -} - -const containerStyle: React.CSSProperties = { - display: 'flex', - flexDirection: 'column', - width: '800px', - height: '600px', - borderRadius: '10px', - boxShadow: '0px 0px 3px 1px', -} - -const formHeading: React.CSSProperties = { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - marginTop: '10px' -}; - -const formContent = { - height: '100%', - width: '100%', -}; \ No newline at end of file diff --git a/packages/playground/src/templates/TemplateThree.tsx b/packages/playground/src/templates/TemplateThree.tsx deleted file mode 100644 index 748b5be..0000000 --- a/packages/playground/src/templates/TemplateThree.tsx +++ /dev/null @@ -1,182 +0,0 @@ -import { QuickForm } from "../../../core/src/components" -import { NavigationButton } from "../../../core/src/components/navigation-button/NavigationButton"; -import { OverviewList } from "../components/overview-list/OverviewList"; - -export const TemplateThree: React.FC = () => { - return ( -
- -
- -
- -
- - -
- -
- ) -} - -const containerStyle: React.CSSProperties = { - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - -} - -const formContent: React.CSSProperties = { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignContent: 'space-around', - height: '100%', - width: '100%', - minWidth: '500px', - minHeight: '500px', -}; - -const navbuttonStyle: React.CSSProperties = { - display: 'flex', - justifyContent: 'end', - marginRight: '10px', - marginBottom: '10px', - width: '100%', -} - -const overviewContainer: React.CSSProperties = { - display: 'flex', - minWidth: '300px', - minHeight: '300px' -}; - -export const testDataThree = { - "layout": { - "slides": { - "slide1": { - "displayName": "Ship name and owners", - "rows": { - "row1": { - "columns": { - "col1": { - "rows": { - "row1_1": { - "questionRefLogicalName": "shipName" - }, - "row1_2": { - "questionRefLogicalName": "shipOwners" - } - } - } - } - } - } - }, - "slide2": { - "displayName": "Date and Cargo", - "rows": { - "row2": { - "columns": { - "col1": { - "rows": { - "row2_1": { - "questionRefLogicalName": "dateSelector" - }, - "row2_2": { - "questionRefLogicalName": "cargo" - } - } - } - } - } - } - }, - "slide3": { - "displayName": "Bill of Lading", - "rows": { - "row3": { - "columns": { - "col1": { - "rows": { - "row3_1": { - "questionRefLogicalName": "billOfLading" - } - } - } - } - } - } - } - } - }, - "intro": { - "text": "Company LOI Request Form", - "paragraph": "Click to start processing the request", - "buttonText": "Start", - }, - "submit": { - "text": "Submit LOI.", - "buttonText": "Submit", - "paragraph": "Example paragraph describing the submit action.", - "submitFields": { - "shipName": { - "inputType": "text", - "text": "What is the name of your ship?", - "paragraph": "Please provide the name of your ship.", - "placeholder": "M/S Vessel", - "lang": "EN" - } - } - - }, - "ending": { - "inputType": "ending", - "text": "Thanks for choosing Company", - "paragraph": "Looking forward to chartering with you." - }, - "questions": { - "shipOwners": { - "inputType": "multilinetext", - "text": "What is the name of the ships owner?", - "paragraph": "Please provide the name of the company that owns the ship", - "placeholder": "European Vessels A/S", - "lang": "EN" - }, - "dateSelector": { - "inputType": "text", - "text": "What is the date of your journey?", - "paragraph": "Please enter the date of your journey.", - "placeholder": "01/01/2000", - }, - "shipName": { - "inputType": "text", - "text": "What is the name of your ship?", - "paragraph": "Please provide the name of your ship.", - "placeholder": "M/S Vessel", - "lang": "EN" - }, - "cargo": { - "inputType": "text", - "text": "What type of cargo are you carrying?", - "paragraph": "Please select the type of cargo you are carrying on this journey.", - "placeholder": "Oil", - "lang": "EN" - }, - "billOfLading": { - "inputType": "dropdown", - "text": "Has the Bill of Lading been verified?", - "paragraph": "Please confirm whether the Bill of Lading details have been verified and are accurate.", - "placeholder": "Verified/Not Verified", - "minItems": 1, - "maxItems": 1, - "options": { - "A": "Verified", - "B": "Not verified" - }, - "lang": "EN" - }, - } -} - diff --git a/packages/playground/src/templates/TemplateTwo.tsx b/packages/playground/src/templates/TemplateTwo.tsx deleted file mode 100644 index 73ac6bf..0000000 --- a/packages/playground/src/templates/TemplateTwo.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import { QuickForm } from "../../../core/src/components" -import { NavigationButton } from "../../../core/src/components/navigation-button/NavigationButton"; -import { OverviewList } from "../components/overview-list/OverviewList"; - -export const TemplateTwo: React.FC = () => { - return ( -
- -
- -
- -
- - -
- -
- ) -} - -const containerStyle: React.CSSProperties = { - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - -} - -const formContent: React.CSSProperties = { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignContent: 'space-around', - height: '100%', - width: '100%', - minWidth: '500px', - minHeight: '500px', -}; - -const navbuttonStyle: React.CSSProperties = { - display: 'flex', - justifyContent: 'end', - marginRight: '10px', - marginBottom: '10px', - width: '100%', -} - -const overviewContainer: React.CSSProperties = { - display: 'flex', - minWidth: '300px', - minHeight: '300px' -}; - -export const testDataTwo = { - "intro": { - "text": "Company LOI Request Form", - "paragraph": "Click to start processing the request", - "buttonText": "Start", - }, - "submit": { - "text": "Submit LOI.", - "buttonText": "Submit", - "paragraph": "Example paragraph describing the submit action.", - "submitFields": { - "shipName": { - "inputType": "text", - "text": "What is the name of your ship?", - "paragraph": "Please provide the name of your ship.", - "placeholder": "M/S Vessel", - "lang": "EN" - } - } - - }, - "ending": { - "inputType": "ending", - "text": "Thanks for choosing Company", - "paragraph": "Looking forward to chartering with you." - }, - "questions": { - "shipOwners": { - "inputType": "multilinetext", - "text": "What is the name of the ships owner?", - "paragraph": "Please provide the name of the company that owns the ship", - "placeholder": "European Vessels A/S", - "lang": "EN" - }, - "dateSelector": { - "inputType": "text", - "text": "What is the date of your journey?", - "paragraph": "Please enter the date of your journey.", - "placeholder": "01/01/2000", - }, - "shipName": { - "inputType": "text", - "text": "What is the name of your ship?", - "paragraph": "Please provide the name of your ship.", - "placeholder": "M/S Vessel", - "lang": "EN" - }, - "cargo": { - "inputType": "text", - "text": "What type of cargo are you carrying?", - "paragraph": "Please select the type of cargo you are carrying on this journey.", - "placeholder": "Oil", - "lang": "EN" - }, - "billOfLading": { - "inputType": "dropdown", - "text": "Has the Bill of Lading been verified?", - "paragraph": "Please confirm whether the Bill of Lading details have been verified and are accurate.", - "placeholder": "Verified/Not Verified", - "minItems": "1", - "maxItems": "1", - "options": { - "A": "Verified", - "B": "Not verified" - }, - "lang": "EN" - }, - - - } -} - diff --git a/packages/playground/src/views/EditorQuickformView.tsx b/packages/playground/src/views/EditorQuickformView.tsx index 94410f6..1073fb7 100644 --- a/packages/playground/src/views/EditorQuickformView.tsx +++ b/packages/playground/src/views/EditorQuickformView.tsx @@ -2,16 +2,16 @@ import React from 'react' import { useState } from 'react'; import { QuickFormDefinition } from '../../../core/src/model'; -import carp from "./../data/carp.json"; +import testdata from "./../data/allInputControlsTest.json"; import { QuickFormProvider } from '../../../core/src/state'; import { Editor } from '@monaco-editor/react'; import { Button, QuickForm } from '../../../core/src/components'; import "./components/slider/SliderInput"; export default function EditorQuickformView() { - const [selectedTemplate, setSelectedTemplate] = useState(carp as QuickFormDefinition); + const [selectedTemplate, setSelectedTemplate] = useState(testdata as QuickFormDefinition); const [hackToChangeQuickForm, setHackToChangeQuickForm] = useState(0); - const [editorValue, setEditorValue] = useState(JSON.stringify(carp)); + const [editorValue, setEditorValue] = useState(JSON.stringify(testdata)); const onChangeEditorValue = (value: string) => { setEditorValue(value); From 03ae775fd9f93e23be4c003c26c1bc8cbaa23644 Mon Sep 17 00:00:00 2001 From: Kasper Baun Date: Fri, 26 Apr 2024 17:08:36 +0200 Subject: [PATCH 2/4] fix: added the option to disable intro in Designer --- packages/core/src/components/index.ts | 2 +- .../baseinput/BaseInputComponent.tsx | 8 +- .../Views/QuickFormIntroSettingsView.tsx | 82 ++++++++++++------- packages/designer/src/QuickFormDesigner.tsx | 10 +-- packages/playground/src/App.tsx | 6 +- 5 files changed, 66 insertions(+), 42 deletions(-) diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts index 5dc2dec..b67d9d3 100644 --- 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 index fa569bb..81619b0 100644 --- a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx +++ b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx @@ -17,24 +17,24 @@ 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', }, diff --git a/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx index f0d4a1d..f926c5e 100644 --- a/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx +++ b/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx @@ -4,8 +4,10 @@ import { FieldTemplate } from "./rjsf/FieldTemplate"; import { BaseInputTemplate } from "./rjsf/BaseInputTemplate"; import { useQuickFormDefinition } from "../../Contexts/QuickFormDefContext"; import { useViewStyles } from "../Styles/useViewStyles.styles"; -import { mergeClasses } from "@fluentui/react-components"; -import { JSONSchema7, JSONSchema7Definition } from "json-schema"; +import { Button, Label, ToggleButton, mergeClasses } from "@fluentui/react-components"; +import { JSONSchema7 } from "json-schema"; +import { useEffect, useState } from "react"; + const introSlideSchema = { label: "Intro Settings", @@ -20,12 +22,11 @@ const introSlideSchema = { schema: { type: "object", required: ["text"], - properties: { + properties: { text: { title: "Text", - description:"The headline displayed to the end user when first loading the form", + description: "The headline displayed to the end user when first loading the form", type: "string" - }, paragraph: { title: "Paragraph", @@ -38,33 +39,56 @@ const introSlideSchema = { }, } } -} as { label: string, uiSchema: any, schema: JSONSchema7 }; - +}; export const QuickFormIntroSettingsView = () => { - - const { quickformpayload: { intro }, updateQuickFormPayload:dispatch } = useQuickFormDefinition(); + const { quickformpayload: { intro }, updateQuickFormPayload: dispatch } = useQuickFormDefinition(); const styles = useViewStyles(); - + const [enableIntro, setEnableIntro] = useState(intro != null); + + const handleToggleIntroClicked = () => { + const currentEnableIntro = enableIntro; + setEnableIntro(!enableIntro); + dispatch(old => { + if (old.intro && currentEnableIntro === true) { + delete old.intro; + } + + return { ...old } + + }) + } + + useEffect(() => { + dispatch(old => { + if (!enableIntro) { + delete old.intro; + } + return { ...old }; + }); + }, [enableIntro, dispatch]); + return (
-
{ - console.log("change", [a, b]); - - dispatch(old => { - old.intro = {...old.intro, ...a.formData } - return { ...old }; - }); - }} - > - <> - -
+
+ {/* */} +
+ {enableIntro && ( +
{ + dispatch(old => { + return { ...old, intro: { ...old.intro, ...a.formData } }; + }); + }} + > +
+ )}
- ) - -} \ No newline at end of file + ); +}; \ No newline at end of file diff --git a/packages/designer/src/QuickFormDesigner.tsx b/packages/designer/src/QuickFormDesigner.tsx index aae1817..8d1e97a 100644 --- a/packages/designer/src/QuickFormDesigner.tsx +++ b/packages/designer/src/QuickFormDesigner.tsx @@ -7,7 +7,6 @@ import { NavDrawer } from "./Components/Drawers/NavDrawer"; import { QuickFormSettingsViewHeader } from "./Components/Header/QuickFormSettingsViewHeader"; import { QuickFormDesignerProvider } from "./Contexts/QuickFormDefContext"; import { useQuickFormDesignerStyles } from "./QuickFormDesigner.styles"; - import initial from "@eavfw/designer/src/PageDesigner/defaultPageContent"; import { Button, Tooltip } from "@fluentui/react-components"; import { DesignerViews } from "./Components/Views/DesignerViews"; @@ -16,10 +15,9 @@ import { DesignerViews } from "./Components/Views/DesignerViews"; const QuickFormDesigner = ({ entityName, attributeName, ...props }: PageDesignEditorProps) => { - const styles = useQuickFormDesignerStyles(); const [isOpen, setIsOpen] = useState(true); - + return
@@ -32,7 +30,7 @@ const QuickFormDesigner = ({ entityName, attributeName, ...props }: PageDesignEd - +
{!isOpen && @@ -44,6 +42,4 @@ const QuickFormDesigner = ({ entityName, attributeName, ...props }: PageDesignEd
} -RegistereControl("QuickFormDesigner", QuickFormDesigner); - - +RegistereControl("QuickFormDesigner", QuickFormDesigner); \ No newline at end of file diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx index 1fa007a..f9edaa0 100644 --- a/packages/playground/src/App.tsx +++ b/packages/playground/src/App.tsx @@ -11,7 +11,11 @@ import "./components/slider-input/SliderInput"; export const App = () => { return (
- +
From 7aa33a3388d537a572a26027666d170032de434f Mon Sep 17 00:00:00 2001 From: Kasper Baun Date: Mon, 29 Apr 2024 09:31:31 +0200 Subject: [PATCH 3/4] fix: cleaned up unused code in intro settings --- packages/designer/package.json | 4 ++-- .../src/Components/Views/QuickFormIntroSettingsView.tsx | 5 +---- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/designer/package.json b/packages/designer/package.json index f134fa1..0cf4928 100644 --- a/packages/designer/package.json +++ b/packages/designer/package.json @@ -12,12 +12,12 @@ "@eavfw/forms": "^1.2.0-vnext.5", "@eavfw/utils": "^1.0.3-vnext.3", "@eavfw/designer-core": "^1.1.1", + "@eavfw/designer-nodes": "^1.1.1", + "@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", diff --git a/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx index f926c5e..6b788c5 100644 --- a/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx +++ b/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx @@ -4,8 +4,7 @@ import { FieldTemplate } from "./rjsf/FieldTemplate"; import { BaseInputTemplate } from "./rjsf/BaseInputTemplate"; import { useQuickFormDefinition } from "../../Contexts/QuickFormDefContext"; import { useViewStyles } from "../Styles/useViewStyles.styles"; -import { Button, Label, ToggleButton, mergeClasses } from "@fluentui/react-components"; -import { JSONSchema7 } from "json-schema"; +import { Button, mergeClasses } from "@fluentui/react-components"; import { useEffect, useState } from "react"; @@ -71,9 +70,7 @@ export const QuickFormIntroSettingsView = () => { return (
- {/* */}
{enableIntro && (
Date: Tue, 30 Apr 2024 13:34:10 +0200 Subject: [PATCH 4/4] feat: add support for react 18.2 --- packages/core/package.json | 4 +- packages/designer/package.json | 8 +- .../Views/rjsf/BaseInputTemplate.tsx | 32 +++--- packages/inputs/select/package.json | 4 +- packages/querybuilder/package.json | 8 +- .../querybuilder/src/VisibilityQueryField.tsx | 108 +++++++++--------- 6 files changed, 81 insertions(+), 83 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index 9fa40f2..e1c4311 100644 --- 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" } -} \ No newline at end of file +} diff --git a/packages/designer/package.json b/packages/designer/package.json index 0cf4928..ecad778 100644 --- 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", @@ -12,12 +12,10 @@ "@eavfw/forms": "^1.2.0-vnext.5", "@eavfw/utils": "^1.0.3-vnext.3", "@eavfw/designer-core": "^1.1.1", - "@eavfw/designer-nodes": "^1.1.1", - "@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" } -} \ No newline at end of file +} diff --git a/packages/designer/src/Components/Views/rjsf/BaseInputTemplate.tsx b/packages/designer/src/Components/Views/rjsf/BaseInputTemplate.tsx index e9aac7e..2cd456e 100644 --- a/packages/designer/src/Components/Views/rjsf/BaseInputTemplate.tsx +++ b/packages/designer/src/Components/Views/rjsf/BaseInputTemplate.tsx @@ -64,21 +64,23 @@ export function BaseInputTemplate< return ( <> - ( - - {labelValue( - , - hideLabel - )} - - ) - }} > + ( + + {labelValue( + , + hideLabel + )} + + ) + }} > = T & { [P in K]-?: T[P] } -const QueryBuilderFluentFix = QueryBuilderFluent as React.FC; +const QueryBuilderFluentFix = QueryBuilderFluent as React.FC; function hasInputType(entry: [string, QuestionJsonModel]): entry is [string, WithRequired] { return !!entry[1].inputType; @@ -35,24 +35,24 @@ const useVisibilityQueryFieldStyles = makeStyles({ type Overwrite = Pick> & U; -function isSelectField(field: WithRequired, 'field'>, type: FieldTypes): field is Overwrite,'field'>, { field: InputComponentSelectFieldMetadata }> { +function isSelectField(field: WithRequired, 'field'>, type: FieldTypes): field is Overwrite, 'field'>, { field: InputComponentSelectFieldMetadata }> { return type === "select" || type === "multiselect"; } class ErrorBoundary extends React.Component<{ children: React.ReactNode, resetRule: () => void }, { hasError: boolean }> { - constructor(props:any) { + constructor(props: any) { super(props); this.state = { hasError: false }; } - static getDerivedStateFromError(error:any) { + static getDerivedStateFromError(error: any) { // Update state so the next render will show the fallback UI. return { hasError: true }; } - componentDidCatch(error:any, errorInfo:any) { + componentDidCatch(error: any, errorInfo: any) { // You can also log the error to an error reporting service - console.log("ERROR",error, errorInfo); + console.log("ERROR", error, errorInfo); } render() { @@ -73,7 +73,7 @@ export const VisibilityQueryField = () => { const { view, activeQuestion, activeSlide, quickformpayload: { layout, questions }, updateQuickFormPayload } = useQuickFormDefinition(); - const [{ isOpen, value, query, fields }, setState] = useState(()=>({ + const [{ isOpen, value, query, fields }, setState] = useState(() => ({ isOpen: false, value: formatQuery(questions[activeQuestion!].visible?.engine === "react-querybuilder" && questions[activeQuestion!].visible?.rule ? questions[activeQuestion!].visible?.rule : { combinator: 'and', rules: [] }, 'cel'), query: questions[activeQuestion!].visible?.engine === "react-querybuilder" && questions[activeQuestion!].visible?.rule ? questions[activeQuestion!].visible?.rule : { combinator: 'and', rules: [] }, @@ -86,8 +86,8 @@ export const VisibilityQueryField = () => { return ({ name: q.logicalName!, label: q.schemaName!, - valueEditorType: type , - ...(isSelectField(metadata,type) ? { values: metadata.field.listValuesProvider(q) } : {}) + valueEditorType: type, + ...(isSelectField(metadata, type) ? { values: metadata.field.listValuesProvider(q) } : {}) // label2: `Question ${q.schemaName}`, // tooltip: q.text, // fieldSettings: { @@ -128,52 +128,52 @@ export const VisibilityQueryField = () => { const setOpen = (open: boolean) => setState(old => { old.isOpen = open; return { ...old }; }); return (<> - setState(old => { old.query = { combinator: 'and', rules: [] }; return { ...old } })}> - setOpen(data.open)}> - - - - Dialog title - - - setState(old => { old.query = { combinator: 'and', rules: [] }; return { ...old } })}> + setOpen(data.open)}> + + + + Dialog title + + + { - setState(old => { old.query = q; old.value = formatQuery(q, { format:'cel', parseNumbers: true }); return { ...old }; }); - const json = formatQuery(q, { format: 'json', parseNumbers: true }); - - updateQuickFormPayload((old) => { - old.questions[activeQuestion!].visible = { - engine: "react-querybuilder", - rule: JSON.parse(json) - }; - - return { ...old }; - }); - } - } /> - - - - - - - - - - - - - - - setOpen(true)} size="small" appearance="transparent" icon={}>}> + showNotToggle + validator={defaultValidator} + operators={[...defaultOperators, { name: "is-visible", value: "is-visible", label: "is visible", arity: "unary" }]} + controlClassnames={{ queryBuilder: 'queryBuilder-branches' }} + fields={fields} + query={query} onQueryChange={(q) => { + setState(old => { old.query = q; old.value = formatQuery(q, { format: 'cel', parseNumbers: true }); return { ...old }; }); + const json = formatQuery(q, { format: 'json', parseNumbers: true }); + + updateQuickFormPayload((old) => { + old.questions[activeQuestion!].visible = { + engine: "react-querybuilder", + rule: JSON.parse(json) + }; + + return { ...old }; + }); + } + } /> + + + + + + + + + + + + + + + setOpen(true)} size="small" appearance="transparent" icon={}>}>