fix: Added readmes for adding input types and for core

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) |

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<InputProps> = ({ questionModel, onOutputChange }) => {
+    // Custom input logic here
+    return <div>Your Custom Input Markup</div>;
+};
+```
+
+## 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.
+```

packages/core/README.md

@@ -1,4 +1,29 @@
 
 # @eavfw/quickform-core
+Core components for quickform rendering.
 
-Core components for quickform rendering.
+# 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
+- `<TextInput />`
+- `<MultilineInput />`
+- `<DropDownInput />`
+
+# Extending QuickForm with Additional Input Types
+See [ExtendInputTypesREADME.md](./ExtendInputTypesREADME.md)

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';
 
 

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<string>(questionModel!.output);

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:  

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<QuickFormDefinition>(cleanTestData as QuickFormDefinition);

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<InputProps> = ({ questionModel, onOutputChange }) => {
+
+    return (
+        <div>
+
+        </div>
+    )
+}
+
+registerInputComponent("toggle", ToggleInput);

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'.",