diff --git a/README.md b/README.md index edffb54..0a3f4af 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ | Project | Readme | Version | Dev Version | vnext Version | |--------------|:-----------------------------------------:|----------------------------------------------------------------------------------------------------:|--------------------------------------------------------------------------------------------------------:|---------------------------------------------------------------------------------------------------------:| -| Core | [Readme](src/core/readme.md) | ![npm](https://img.shields.io/npm/v/@eavfw/quickform-core?label=%40eavfw%2Fquickform-core) | ![npm](https://img.shields.io/npm/v/@eavfw/quickform-core/dev?label=%40eavfw%2Fquickform-core) | ![npm](https://img.shields.io/npm/v/@eavfw/quickform-core/vnext?label=%40eavfw%2Fquickform-core) | -| Designer | [Readme](src/designer/readme.md) | ![npm](https://img.shields.io/npm/v/@eavfw/quickform-designer?label=%40eavfw%2Fquickform-designer) | ![npm](https://img.shields.io/npm/v/@eavfw/quickform-designer/dev?label=%40eavfw%2Fquickform-designer) | ![npm](https://img.shields.io/npm/v/@eavfw/quickform-designer/vnext?label=%40eavfw%2Fquickform-designer) | +| Core | [Readme](packages/core/README.md) | ![npm](https://img.shields.io/npm/v/@eavfw/quickform-core?label=%40eavfw%2Fquickform-core) | ![npm](https://img.shields.io/npm/v/@eavfw/quickform-core/dev?label=%40eavfw%2Fquickform-core) | ![npm](https://img.shields.io/npm/v/@eavfw/quickform-core/vnext?label=%40eavfw%2Fquickform-core) | +| Designer | [Readme](packages/designer/README.md) | ![npm](https://img.shields.io/npm/v/@eavfw/quickform-designer?label=%40eavfw%2Fquickform-designer) | ![npm](https://img.shields.io/npm/v/@eavfw/quickform-designer/dev?label=%40eavfw%2Fquickform-designer) | ![npm](https://img.shields.io/npm/v/@eavfw/quickform-designer/vnext?label=%40eavfw%2Fquickform-designer) | diff --git a/packages/core/ExtendInputTypesREADME.md b/packages/core/ExtendInputTypesREADME.md new file mode 100644 index 0000000..a74583a --- /dev/null +++ b/packages/core/ExtendInputTypesREADME.md @@ -0,0 +1,82 @@ +# Extending QuickForm with Additional Input Types +To enhance QuickForm with new input types, follow these concise steps. +The guide includes TypeScript code snippets for clarity. + +## Step 1: Create New Input Components +Develop custom input components in React. These should accept `InputProps` to properly integrate with QuickForm's dynamic form system. + +Example for a custom input component: + +```typescript +import React, { FC, ChangeEvent, useState } from "react"; +import { InputProps } from "@eavfw/quickform-core"; + +const CustomInput: FC = ({ questionModel, onOutputChange }) => { + // Custom input logic here + return
Your Custom Input Markup
; +}; +``` + +## Step 2: TODO - How do we Implement Input Properties Parsing? +Extend the parseInputProperties function to handle your custom input types. This function converts QuestionJsonModel to specific properties for your input type. + +Example extension for parseInputProperties: + +```typescript +import { QuestionJsonModel, YourCustomProperties } from "@eavfw/quickform-core/src/model"; + +function parseInputProperties(questionJsonModel: QuestionJsonModel): YourCustomProperties | undefined { + // Add your custom case(s) here + switch (questionJsonModel.inputType) { + case "yourCustomType": + return { + // Your custom properties mapping + }; + default: + return undefined; + } +} +``` + +## Step 3: Register Input Components +Use `registerInputComponent` to add your custom input components to the QuickForm system. This makes your component available for rendering in forms. + +Example registration: + +```typescript +import { registerInputComponent } from "@eavfw/quickform-core"; +import { CustomInput } from "./path/to/your/CustomInput"; + +registerInputComponent("yourCustomType", CustomInput); +``` + +## Step 4: Import New Input Components in App.tsx +Ensure new input components are imported in your application's entry point to make them available for use. + +Example import in App.tsx: +```typescript +import "./path/to/your/CustomInput"; +``` + +## Step 5: Update QuickForm Definitions +Modify your QuickForm JSON definitions to use your new input types. Ensure the `inputType` in your definitions matches the key used in registerInputComponent. + +Example JSON definition snippet: + +```typescript +{ + "inputType": "yourCustomType", + "question": "Your Custom Question?", + "properties": { + // Custom properties for your input type + } +} +``` +## Step 6: Test Your Forms +After integrating new input types, thoroughly test your forms to ensure that custom inputs render correctly and function as intended. + +By following these steps, you can seamlessly integrate custom input types into QuickForm, broadening its capabilities and customizability. + +```typescript +Ensure to replace placeholders like `YourCustomProperties`, `yourCustomType`, and file paths with actual values relevant to your implementation. +``` \ No newline at end of file diff --git a/packages/core/README.md b/packages/core/README.md index e2e55e7..75b4322 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -1,4 +1,29 @@ # @eavfw/quickform-core +Core components for quickform rendering. -Core components for quickform rendering. \ No newline at end of file +# QuickForm +QuickForm is a dynamic form generator tool designed to simplify the creation of forms using JSON definition documents. +This powerful tool allows you to define your questions in a JSON format and have them rendered as one or more questions per slide, with a variety of input types available for each question. +QuickForm is built with flexibility and ease of use in mind. + +## Features + +- **Dynamic Form Creation**: Generate forms dynamically based on a JSON definition. +- **Multiple Question Types**: Support for various input types such as text, email, dropdown, radio buttons, sliders, and multiline text. +- **Customizable Slides**: Organize questions into slides, allowing for a segmented approach to form completion. +- **Intro and Ending Slides**: Ability to add introductory and concluding slides to provide context or instructions to the user. +- **Validation and Data Types**: Support for different data types (string, number, boolean) and validation based on input type. +- **Flexible Layouts**: Define custom layouts for questions, including rows and columns, for a tailored user experience. +- **Responsive Design**: Ensure your forms look great on any device with responsive design. + +## Installation +To get started with QuickForm, head on over to the playground package where you can start up a sandbox environment and get a feel for how QuickForm works. + +## Supported Input Types +- `` +- `` +- `` + +# Extending QuickForm with Additional Input Types +See [ExtendInputTypesREADME.md](./ExtendInputTypesREADME.md) \ No newline at end of file diff --git a/packages/core/src/components/question/InputComponentMapper.ts.ignore b/packages/core/src/components/question/InputComponentMapper.ts.ignore deleted file mode 100644 index 6f308a7..0000000 --- a/packages/core/src/components/question/InputComponentMapper.ts.ignore +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; -import { TextInput, MultilineInput, DropDownInput } from "./input-types/index"; -import { InputProps } from "../../model/InputType"; - -type InputComponentType = React.ComponentType; - -export type InputComponentDictionary = { - [key: string]: InputComponentType; -}; - -export const inputComponents: InputComponentDictionary = { - "text": TextInput, - // TODO - Create Radio - "radio": TextInput, - // TODO - Create Slider - "slider": TextInput, - "multilinetext": MultilineInput, - // TODO - Create Email - "email": TextInput, - "dropdown": DropDownInput, - "none": TextInput, -}; - -const RegisterComponent = (key: string, component: InputComponentType) => { - inputComponents[key] = component; -}; diff --git a/packages/core/src/components/question/input-types/index.ts b/packages/core/src/components/question/input-types/index.ts index d0308a7..b23e68d 100644 --- a/packages/core/src/components/question/input-types/index.ts +++ b/packages/core/src/components/question/input-types/index.ts @@ -9,9 +9,7 @@ // export * from './PhoneInput'; // export * from './RoleInput'; export * from './dropdown/DropDownInput'; -export * from '../../submit/Submit'; export * from './text/TextInput'; -export * from '../../ending/Ending'; export * from './multiline/MultilineInput'; 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 00815d3..b9dc380 100644 --- a/packages/core/src/components/question/input-types/text/TextInput.tsx +++ b/packages/core/src/components/question/input-types/text/TextInput.tsx @@ -3,11 +3,8 @@ import React from "react"; import { ChangeEvent, useEffect, useRef, useState } from "react"; import classNames from "classnames"; import styles from "./TextInput.module.css"; - import { useQuickForm } from "../../../../state/QuickFormContext"; import { InputProps } from "../../../../model/InputType"; -// import { useQuickForm } from "../../../../state/QuickFormContext"; -// import { isValidEmail } from "../../../../validation/isValidEmail"; export function TextInput({ questionModel, onOutputChange }: InputProps) { const [text, setText] = useState(questionModel!.output); diff --git a/packages/playground/README.md b/packages/playground/README.md index 4334e4d..98917fa 100644 --- a/packages/playground/README.md +++ b/packages/playground/README.md @@ -3,10 +3,7 @@ ## Introduction Welcome to the **QuickForms Playground**! This package is an integral part of the QuickForms project, designed to provide developers with a convenient and efficient environment for testing and developing QuickForms. -It simplifies the process of setting up a local development server, allowing you to focus on creating and refining your forms. - -## Name: Playground -The name "Playground" was chosen to reflect the package's purpose: a space where developers can experiment, test, and play with QuickForms features in a controlled and flexible environment. It's the perfect place to try out new ideas, debug issues, and see your forms in action. +It simplifies the process of setting up a local development server, allowing you to focus on creating and refining your forms. Use it to experiment, test, and play with QuickForms features in a controlled and flexible environment. It's the perfect place to try out new ideas, debug issues, and see your forms in action. ## Use Case The Playground is ideal for: diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx index 48b77ff..6be62ab 100644 --- a/packages/playground/src/App.tsx +++ b/packages/playground/src/App.tsx @@ -6,6 +6,7 @@ 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/toggle/ToggleInput"; export const App = () => { const [selectedTemplate, setSelectedTemplate] = useState(cleanTestData as QuickFormDefinition); diff --git a/packages/playground/src/components/toggle/ToggleInput.tsx b/packages/playground/src/components/toggle/ToggleInput.tsx index e69de29..d0a8925 100644 --- a/packages/playground/src/components/toggle/ToggleInput.tsx +++ b/packages/playground/src/components/toggle/ToggleInput.tsx @@ -0,0 +1,14 @@ +import React, { ChangeEvent, useState, FC } from "react"; +import { InputProps, registerInputComponent } from "@eavfw/quickform-core"; +import styles from "./Toggle.module.css"; + +export const ToggleInput: FC = ({ questionModel, onOutputChange }) => { + + return ( +
+ +
+ ) +} + +registerInputComponent("toggle", ToggleInput); \ No newline at end of file diff --git a/packages/playground/src/data/clean.json b/packages/playground/src/data/clean.json index 609faac..3b9dd7b 100644 --- a/packages/playground/src/data/clean.json +++ b/packages/playground/src/data/clean.json @@ -123,7 +123,7 @@ "type": "number", "lang": "DA" }, - "algaeRemoval": { + "removeAlgae": { "inputType": "toggle", "text": "Skal alger fjernes?", "paragraph": "Vælg 'Ja', hvis der er behov for fjernelse af alger, ellers vælg 'Nej'.", @@ -133,7 +133,7 @@ }, "lang": "DA" }, - "impregnation": { + "impregnateTiles": { "inputType": "toggle", "text": "Skal fliserne imprægneres?", "paragraph": "Vælg 'Ja', hvis fliserne skal imprægneres, ellers vælg 'Nej'.",