From a2d70b4e31c4724ed194cd01829131105ab450b0 Mon Sep 17 00:00:00 2001
From: AlexthePear <alopp5570@csu.fullerton.edu>
Date: Wed, 28 Feb 2024 00:29:31 -0800
Subject: [PATCH 01/25] testing

---
 db.kv                                         | Bin 0 -> 4096 bytes
 db.kv-shm                                     | Bin 0 -> 32768 bytes
 db.kv-wal                                     | Bin 0 -> 111272 bytes
 src/lib/components/form_editor.svelte         |   4 ++
 src/routes/forms/demoformeditor/+page.svelte  |   8 +++
 .../forms/demoformeditor/demo_form_editor.ts  |  59 ++++++++++++++++++
 6 files changed, 71 insertions(+)
 create mode 100644 db.kv
 create mode 100644 db.kv-shm
 create mode 100644 db.kv-wal
 create mode 100644 src/routes/forms/demoformeditor/+page.svelte
 create mode 100644 src/routes/forms/demoformeditor/demo_form_editor.ts

diff --git a/db.kv b/db.kv
new file mode 100644
index 0000000000000000000000000000000000000000..9a472209435d88229f65ab7a0ca30d67df87a462
GIT binary patch
literal 4096
zcmWFz^vNtqRY=P(%1ta$FlG>7U}9o$P*7lCU|@t|AVoG{WY9}{#S79dK(-m98b?E5
nGz3ONU^E0qLtr!nMnhmU1V%$(Gz3ONU^E0qLtr!nC=3ArNJIx=

literal 0
HcmV?d00001

diff --git a/db.kv-shm b/db.kv-shm
new file mode 100644
index 0000000000000000000000000000000000000000..a1eba0a55acd8aa71b2ef395503aec95fc307e4d
GIT binary patch
literal 32768
zcmeI)OD+Ua6b9f!wQlX%XcWd~NbJZyj7-dJ!8$}(1Pd?{TOi?FNhduO6LP*k`BS$Z
zxmEQo;Pfx2G0Q^4<S0+Z+3x-0>iFSlcz1j9cK>?){CF|F9NnCs^*?-mws+h2b1w7O
z+dAJJi`gza$S!4v*->^m`~6LMZ1;Y<&Mkxh0RjXF5FkK+009C72oNAZfB*pk1PBly
zK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAVA<x2(+ma
zLZGHVo3|naY6^6*66-OEo!E<mngss3tiT{vV<Wa=8vAirR>6<g6ll}sgg{M!Hdj#y
z)D&nFMTJ03fi_E52-Fl9$69R0cI-wUZ6dW0AV7cs0RjXF5FkK+009C72oNAZfB*pk
W1PBlyK!5-N0t5&UAVA>%3VZ=-Cn=f$

literal 0
HcmV?d00001

diff --git a/db.kv-wal b/db.kv-wal
new file mode 100644
index 0000000000000000000000000000000000000000..a90e8b25563fc93b9d111478aa3ddd4fab2f7e25
GIT binary patch
literal 111272
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
Q>OD={FG^9gc_gFqUkN?dUjP6A

literal 0
HcmV?d00001

diff --git a/src/lib/components/form_editor.svelte b/src/lib/components/form_editor.svelte
index 1cd4e0c..69bd87a 100644
--- a/src/lib/components/form_editor.svelte
+++ b/src/lib/components/form_editor.svelte
@@ -90,6 +90,10 @@
 	/> -->
 
 	<!-- TODO: Make editor inputs for each type of question. -->
+	{#each data.questions.data as question}
+		<QuestionInput data={question} />
+	{/each}
+	<!-- <button on:click|preventDefault={}></button>	 -->
 
 	<button type="submit">Submit</button>
 </form>
diff --git a/src/routes/forms/demoformeditor/+page.svelte b/src/routes/forms/demoformeditor/+page.svelte
new file mode 100644
index 0000000..729c9f1
--- /dev/null
+++ b/src/routes/forms/demoformeditor/+page.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import FormEditor from '$lib/components/form_editor.svelte';
+    import { demoForm } from './demo_form_editor';
+</script>
+
+
+<FormEditor action="" method="POST" data={demoForm} />
diff --git a/src/routes/forms/demoformeditor/demo_form_editor.ts b/src/routes/forms/demoformeditor/demo_form_editor.ts
new file mode 100644
index 0000000..bc1e0be
--- /dev/null
+++ b/src/routes/forms/demoformeditor/demo_form_editor.ts
@@ -0,0 +1,59 @@
+import type { Form } from '$lib/form';
+import { QuestionType } from '$lib/form';
+
+export const demoForm: Form = {
+	id: 'demo_form_id',
+	questions: {
+		data: [
+			{
+				type: QuestionType.BOOLEAN,
+				name: 'Age Check',
+				content: 'Are you over 18 years old?',
+				required: false,
+				value: true,
+				style: 'checkbox'
+			},
+			{
+				type: QuestionType.TEXT,
+				name: 'FRQ',
+				content: 'How do you feel about this form?',
+				required: false,
+				value: 'Sample Text'
+			},
+			{
+				type: QuestionType.SINGLE_TEXT_SELECT,
+				name: 'multiple choice',
+				content: 'please pick one',
+				required: false,
+				allowCustomChoice: false,
+				choices: ['choice 1', 'choice 2', 'choice 3', 'choice 4']
+			},
+			{
+				type: QuestionType.COLOR,
+				name: 'Color Question',
+				content: 'Pick a color',
+				required: false,
+				value: '#000000'
+			},
+			{
+				type: QuestionType.NUMBER,
+				name: 'Number Question',
+				content: 'Pick a number',
+				required: false,
+				min: 0,
+				max: 100,
+				placeholder: 'select a number'
+			},
+			{
+				type: QuestionType.TEXTAREA,
+				name: 'Text Area Question',
+				content: 'text area?',
+				required: false,
+				minLength: 0,
+				maxLength: 1_000,
+				placeholder: 'write here',
+				value: ''
+			}
+		]
+	}
+};

From bd7db6208effedeffa10fdd30094fcdd406f6d0b Mon Sep 17 00:00:00 2001
From: AlexthePear <alopp5570@csu.fullerton.edu>
Date: Wed, 20 Mar 2024 23:23:09 -0700
Subject: [PATCH 02/25] Implemented Demo_form_editor to display editor
 components.

---
 .../question_input_editor.svelte              | 43 ++++++++++++++--
 .../question_input/question_input.svelte      |  4 +-
 .../boolean_question_input_editor.svelte      | 51 +++++++++++++++++++
 src/lib/{store => db}/index.ts                |  0
 src/lib/{store => db}/kv/index.ts             |  0
 src/lib/{store => db}/kv/kv.ts                |  0
 src/lib/{store => db}/store.ts                |  0
 src/lib/stores/drafts/drafts.ts               |  6 +++
 src/routes/demo/demo_form.ts                  |  1 +
 src/routes/forms/demoformeditor/+page.svelte  |  7 ++-
 .../forms/demoformeditor/demo_form_editor.ts  |  6 ++-
 11 files changed, 107 insertions(+), 11 deletions(-)
 rename src/lib/{store => db}/index.ts (100%)
 rename src/lib/{store => db}/kv/index.ts (100%)
 rename src/lib/{store => db}/kv/kv.ts (100%)
 rename src/lib/{store => db}/store.ts (100%)
 create mode 100644 src/lib/stores/drafts/drafts.ts

diff --git a/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte b/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
index f40e9bf..4ea9e04 100644
--- a/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
+++ b/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
@@ -1,11 +1,46 @@
 <script lang="ts">
-	// import type { Question } from '$lib/form';
-	// import QuestionInput from '$lib/components/form/question_input/question_input.svelte';
-
-	// export let value: Question;
+	import { QuestionType } from '$lib/form';
+	import AvailabilityQuestionInputEditor from '$lib/components/questions/availability/availability_question_input_editor.svelte';
+	import BooleanQuestionInputEditor from '$lib/components/questions/boolean/boolean_question_input_editor.svelte';
+	import ColorQuestionInputEditor from '$lib/components/questions/color/color_question_input_editor.svelte';
+	import DateQuestionInputEditor from '$lib/components/questions/date/date_question_input_editor.svelte';
+	import DatetimeQuestionInputEditor from '$lib/components/questions/datetime/datetime_question_input_editor.svelte';
+	import NumberQuestionInputEditor from '$lib/components/questions/number/number_question_input_editor.svelte';
+	import RadioGroupQuestionInputEditor from '$lib/components/questions/radio_group/radio_group_question_input_editor.svelte';
+	import SelectQuestionInputEditor from '$lib/components/questions/select/select_question_input_editor.svelte';
+	import TextQuestionInputEditor from '$lib/components/questions/text/text_question_input_editor.svelte';
+	import TextareaQuestionInputEditor from '$lib/components/questions/textarea/textarea_question_input_editor.svelte';
+	import TimeQuestionInputEditor from '$lib/components/questions/time/time_question_input_editor.svelte';
 </script>
 
 <!-- TODO: Reconcile changes made in
 https://github.com/acmcsufoss/form/pull/new/question-input-editor -->
 
 <!-- TODO: Make a new PR out of this current branch. -->
+
+<!-- Uncomment finished questions to see if it renders -->
+<div>
+	{#if $$props.type === QuestionType.BOOLEAN}
+		<BooleanQuestionInputEditor {...$$props} />
+		<!-- {:else if $$props.type === QuestionType.TEXT}
+		<TextQuestionInputEditor {...$$props} />
+	{:else if $$props.type === QuestionType.RADIO_GROUP}
+		<RadioGroupQuestionInputEditor {...$$props} />
+	{:else if $$props.type === QuestionType.NUMBER}
+		<NumberQuestionInputEditor {...$$props} />
+	{:else if $$props.type === QuestionType.COLOR}
+		<ColorQuestionInputEditor {...$$props} />
+	{:else if $$props.type === QuestionType.TEXTAREA}
+		<TextareaQuestionInputEditor {...$$props} />
+	{:else if $$props.type === QuestionType.DATE}
+		<DateQuestionInputEditor {...$$props} />
+	{:else if $$props.type === QuestionType.AVAILABILITY}
+		<AvailabilityQuestionInputEditor {...$$props} />
+	{:else if $$props.type === QuestionType.DATETIME}
+		<DatetimeQuestionInputEditor {...$$props} />
+	{:else if $$props.type === QuestionType.TIME}
+		<TimeQuestionInputEditor {...$$props} />
+	{:else if $$props.type === QuestionType.SELECT}
+		<SelectQuestionInputEditor {...$$props} /> -->
+	{/if}
+</div>
diff --git a/src/lib/components/question_input/question_input.svelte b/src/lib/components/question_input/question_input.svelte
index e5bf2bd..c89e435 100644
--- a/src/lib/components/question_input/question_input.svelte
+++ b/src/lib/components/question_input/question_input.svelte
@@ -6,7 +6,7 @@
 	import DateQuestionInput from '$lib/components/questions/date/date_question_input.svelte';
 	import DatetimeQuestionInput from '$lib/components/questions/datetime/datetime_question_input.svelte';
 	import NumberQuestionInput from '$lib/components/questions/number/number_question_input.svelte';
-	import SingleTextSelectQuestionInput from '$lib/components/questions/radio_group/radio_group_question_input.svelte';
+	import RadioGroupQuestionInput from '$lib/components/questions/radio_group/radio_group_question_input.svelte';
 	import TextQuestionInput from '$lib/components/questions/text/text_question_input.svelte';
 	import TextareaQuestionInput from '$lib/components/questions/textarea/textarea_question_input.svelte';
 	import TimeQuestionInput from '$lib/components/questions/time/time_question_input.svelte';
@@ -19,7 +19,7 @@
 	{:else if $$props.type === QuestionType.TEXT}
 		<TextQuestionInput {...$$props} />
 	{:else if $$props.type === QuestionType.RADIO_GROUP}
-		<SingleTextSelectQuestionInput {...$$props} />
+		<RadioGroupQuestionInput {...$$props} />
 	{:else if $$props.type === QuestionType.NUMBER}
 		<NumberQuestionInput {...$$props} />
 	{:else if $$props.type === QuestionType.COLOR}
diff --git a/src/lib/components/questions/boolean/boolean_question_input_editor.svelte b/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
index e69de29..ad20c4b 100644
--- a/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
+++ b/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { QuestionType, type BooleanQuestion, type SelectQuestion } from '$lib/form';
+	import BooleanQuestionInput from './boolean_question_input.svelte';
+	import TextQuestionInput from '../text/text_question_input.svelte';
+	import TextareaQuestionInput from '../textarea/textarea_question_input.svelte';
+	import SelectQuestionInput from '../select/select_question_input.svelte';
+	import { drafts } from '$lib/stores/drafts/drafts';
+	const data = $$props as BooleanQuestion;
+
+	/* 
+    type: QuestionType.BOOLEAN,
+		name: 'internal name',
+		content: 'Are you 18 years old?',
+		required: false,
+		style: 'checkbox',
+		value: false */
+	// var mySelect: SelectQuestion = {
+	// 	type: QuestionType.SELECT,
+	// options: [
+	// 	{ content: 'checkbox', value: 'checkbox' },
+	// 	{ content: 'radio', value: 'radio' }
+	// ],
+	// 	name: 'booleanStyleSelector',
+	// 	content: 'Choose A Style'
+	// };
+</script>
+
+<TextQuestionInput
+	bind:value={data.content}
+	content="Question Title"
+	placeholder="Question Title"
+/>
+<TextQuestionInput
+	content="Internal Question Name"
+	bind:value={data.name}
+	placeholder="Internal Question Name"
+/>
+<SelectQuestionInput
+	name={'style'}
+	content={'Choose a Style'}
+	options={[
+		{ content: 'checkbox', value: 'checkbox' },
+		{ content: 'radio', value: 'radio' }
+	]}
+	bind:value={data.style}
+/>
+<BooleanQuestionInput bind:value={data.required} content="Required" />
+<details>
+	<summary>Sample</summary>
+	<BooleanQuestionInput {...data} />
+</details>
diff --git a/src/lib/store/index.ts b/src/lib/db/index.ts
similarity index 100%
rename from src/lib/store/index.ts
rename to src/lib/db/index.ts
diff --git a/src/lib/store/kv/index.ts b/src/lib/db/kv/index.ts
similarity index 100%
rename from src/lib/store/kv/index.ts
rename to src/lib/db/kv/index.ts
diff --git a/src/lib/store/kv/kv.ts b/src/lib/db/kv/kv.ts
similarity index 100%
rename from src/lib/store/kv/kv.ts
rename to src/lib/db/kv/kv.ts
diff --git a/src/lib/store/store.ts b/src/lib/db/store.ts
similarity index 100%
rename from src/lib/store/store.ts
rename to src/lib/db/store.ts
diff --git a/src/lib/stores/drafts/drafts.ts b/src/lib/stores/drafts/drafts.ts
new file mode 100644
index 0000000..931a733
--- /dev/null
+++ b/src/lib/stores/drafts/drafts.ts
@@ -0,0 +1,6 @@
+import { writable } from 'svelte/store';
+import type { Form } from '$lib/form';
+
+export const drafts = writable<Map<string, Form>>(new Map());
+
+// TODO: Dream about the solution
diff --git a/src/routes/demo/demo_form.ts b/src/routes/demo/demo_form.ts
index f9ad39e..938031d 100644
--- a/src/routes/demo/demo_form.ts
+++ b/src/routes/demo/demo_form.ts
@@ -1,6 +1,7 @@
 import type { Form } from '$lib/form';
 import { QuestionType } from '$lib/form';
 
+// TODO: Add more questions to cover all question types.
 export const demoForm: Form = {
 	id: 'demo_form_id',
 	discordChannelID: '',
diff --git a/src/routes/forms/demoformeditor/+page.svelte b/src/routes/forms/demoformeditor/+page.svelte
index 729c9f1..0384a8a 100644
--- a/src/routes/forms/demoformeditor/+page.svelte
+++ b/src/routes/forms/demoformeditor/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import FormEditor from '$lib/components/form_editor.svelte';
-    import { demoForm } from './demo_form_editor';
+	import FormEditor from '$lib/components/form_editor/form_editor.svelte';
+	import { demoForm } from './demo_form_editor';
 </script>
 
-
-<FormEditor action="" method="POST" data={demoForm} />
+<FormEditor action={''} method={''} value={demoForm} />
diff --git a/src/routes/forms/demoformeditor/demo_form_editor.ts b/src/routes/forms/demoformeditor/demo_form_editor.ts
index bc1e0be..938031d 100644
--- a/src/routes/forms/demoformeditor/demo_form_editor.ts
+++ b/src/routes/forms/demoformeditor/demo_form_editor.ts
@@ -1,8 +1,12 @@
 import type { Form } from '$lib/form';
 import { QuestionType } from '$lib/form';
 
+// TODO: Add more questions to cover all question types.
 export const demoForm: Form = {
 	id: 'demo_form_id',
+	discordChannelID: '',
+	startDate: '',
+	endDate: null,
 	questions: {
 		data: [
 			{
@@ -21,7 +25,7 @@ export const demoForm: Form = {
 				value: 'Sample Text'
 			},
 			{
-				type: QuestionType.SINGLE_TEXT_SELECT,
+				type: QuestionType.RADIO_GROUP,
 				name: 'multiple choice',
 				content: 'please pick one',
 				required: false,

From a602b35d073c79326772dfa54c0ef5aa814cbf7e Mon Sep 17 00:00:00 2001
From: AlexthePear <alopp5570@csu.fullerton.edu>
Date: Tue, 26 Mar 2024 00:41:36 -0700
Subject: [PATCH 03/25] Testing reactivity

---
 .../components/form_editor/form_editor.svelte  | 14 ++++++++++----
 .../question_input_editor.svelte               |  6 +++++-
 .../question_list_editor/add_item.svelte       |  3 ++-
 .../boolean/boolean_question_input.svelte      |  2 +-
 .../boolean_question_input_editor.svelte       | 18 +++++-------------
 .../select/select_question_input.svelte        |  2 +-
 .../select/select_question_input_editor.svelte | 12 +++---------
 .../questions/text/text_question_input.svelte  |  2 +-
 src/lib/resources/store.ts                     |  2 +-
 9 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/lib/components/form_editor/form_editor.svelte b/src/lib/components/form_editor/form_editor.svelte
index 96eb30d..0339cf2 100644
--- a/src/lib/components/form_editor/form_editor.svelte
+++ b/src/lib/components/form_editor/form_editor.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Form } from '$lib/store';
-	import { QuestionType } from '$lib/form';
+	import { QuestionType, type QuestionList } from '$lib/form';
 	import QuestionInput from '$lib/components/question_input/question_input.svelte';
 	import QuestionListEditor from './question_list_editor/question_list_editor.svelte';
 
@@ -8,7 +8,14 @@
 	export let method: string;
 	export let value: Form;
 
+	var questions: any = value.questions;
 	// TODO: Add discord data: channels, threads, guilds, roles.
+	function addItem() {
+		questions.append();
+	}
+	function handleSumbit(event: MouseEvent) {
+		console.log(questions);
+	}
 </script>
 
 <form {action} {method}>
@@ -65,9 +72,8 @@
 		bind:value={value.questions.shuffled}
 	/>
 
-	<QuestionListEditor bind:value={value.questions} />
-
-	<button type="submit">Submit</button>
+	<QuestionListEditor bind:value={questions} />
+	<button type="submit" on:click={handleSumbit}>Submit</button>
 </form>
 
 <style>
diff --git a/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte b/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
index 4ea9e04..0f6db5e 100644
--- a/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
+++ b/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
@@ -11,6 +11,9 @@
 	import TextQuestionInputEditor from '$lib/components/questions/text/text_question_input_editor.svelte';
 	import TextareaQuestionInputEditor from '$lib/components/questions/textarea/textarea_question_input_editor.svelte';
 	import TimeQuestionInputEditor from '$lib/components/questions/time/time_question_input_editor.svelte';
+	import BooleanQuestionInput from '$lib/components/questions/boolean/boolean_question_input.svelte';
+
+	export var data1: any = $$props;
 </script>
 
 <!-- TODO: Reconcile changes made in
@@ -21,6 +24,7 @@ https://github.com/acmcsufoss/form/pull/new/question-input-editor -->
 <!-- Uncomment finished questions to see if it renders -->
 <div>
 	{#if $$props.type === QuestionType.BOOLEAN}
+		<!-- <svelte:component this={BooleanQuestionInputEditor} bind:data={data1} /> -->
 		<BooleanQuestionInputEditor {...$$props} />
 		<!-- {:else if $$props.type === QuestionType.TEXT}
 		<TextQuestionInputEditor {...$$props} />
@@ -41,6 +45,6 @@ https://github.com/acmcsufoss/form/pull/new/question-input-editor -->
 	{:else if $$props.type === QuestionType.TIME}
 		<TimeQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.SELECT}
-		<SelectQuestionInputEditor {...$$props} /> -->
+		<SelectQuestionInputEditor {...$$props} />  -->
 	{/if}
 </div>
diff --git a/src/lib/components/form_editor/question_list_editor/add_item.svelte b/src/lib/components/form_editor/question_list_editor/add_item.svelte
index b52fea6..25065c6 100644
--- a/src/lib/components/form_editor/question_list_editor/add_item.svelte
+++ b/src/lib/components/form_editor/question_list_editor/add_item.svelte
@@ -6,7 +6,8 @@
 
 	let type = QuestionType.TEXT;
 
-	function add() {
+	function add(e: MouseEvent) {
+		e.preventDefault();
 		// TODO: Add a helper function to create a blank question object for each type.
 		addAction({ type });
 	}
diff --git a/src/lib/components/questions/boolean/boolean_question_input.svelte b/src/lib/components/questions/boolean/boolean_question_input.svelte
index dd7c933..50a3e63 100644
--- a/src/lib/components/questions/boolean/boolean_question_input.svelte
+++ b/src/lib/components/questions/boolean/boolean_question_input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { BooleanQuestion } from '$lib/form';
 
-	const data = $$props as BooleanQuestion;
+	export var data = $$props as BooleanQuestion;
 </script>
 
 <fieldset>
diff --git a/src/lib/components/questions/boolean/boolean_question_input_editor.svelte b/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
index ad20c4b..b3d42fb 100644
--- a/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
+++ b/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { QuestionType, type BooleanQuestion, type SelectQuestion } from '$lib/form';
 	import BooleanQuestionInput from './boolean_question_input.svelte';
-	import TextQuestionInput from '../text/text_question_input.svelte';
+	import input from '../text/text_question_input.svelte';
 	import TextareaQuestionInput from '../textarea/textarea_question_input.svelte';
 	import SelectQuestionInput from '../select/select_question_input.svelte';
 	import { drafts } from '$lib/stores/drafts/drafts';
-	const data = $$props as BooleanQuestion;
+	export var data = $$props as BooleanQuestion;
 
 	/* 
     type: QuestionType.BOOLEAN,
@@ -25,16 +25,8 @@
 	// };
 </script>
 
-<TextQuestionInput
-	bind:value={data.content}
-	content="Question Title"
-	placeholder="Question Title"
-/>
-<TextQuestionInput
-	content="Internal Question Name"
-	bind:value={data.name}
-	placeholder="Internal Question Name"
-/>
+<input bind:value={data.content} name="temp" placeholder="Question Title" />
+<input bind:value={data.name} placeholder="Internal Question Name" />
 <SelectQuestionInput
 	name={'style'}
 	content={'Choose a Style'}
@@ -47,5 +39,5 @@
 <BooleanQuestionInput bind:value={data.required} content="Required" />
 <details>
 	<summary>Sample</summary>
-	<BooleanQuestionInput {...data} />
+	<BooleanQuestionInput bind:data />
 </details>
diff --git a/src/lib/components/questions/select/select_question_input.svelte b/src/lib/components/questions/select/select_question_input.svelte
index 33ebf02..802cef5 100644
--- a/src/lib/components/questions/select/select_question_input.svelte
+++ b/src/lib/components/questions/select/select_question_input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { SelectQuestion } from '$lib/form';
 
-	const data = $$props as SelectQuestion;
+	export var data = $$props as SelectQuestion;
 </script>
 
 <fieldset>
diff --git a/src/lib/components/questions/select/select_question_input_editor.svelte b/src/lib/components/questions/select/select_question_input_editor.svelte
index ffdd4bb..e3563a4 100644
--- a/src/lib/components/questions/select/select_question_input_editor.svelte
+++ b/src/lib/components/questions/select/select_question_input_editor.svelte
@@ -5,15 +5,7 @@
 
 	var newOption: string = '';
 
-	let data: SelectQuestion = {
-		type: QuestionType.SELECT,
-		options: [
-			{ value: '55', content: 'Apple' },
-			{ value: '66', content: 'Bananna' }
-		],
-		name: '',
-		content: ''
-	};
+	export var data = $$props as SelectQuestion;
 
 	// let other: TextQuestion = {
 	// 	type: QuestionType.TEXT,
@@ -44,6 +36,8 @@
 	}
 </script>
 
+<input bind:value={data.content} />
+
 <form on:submit|preventDefault={addOptions}>
 	<input type="text" bind:value={newOption} /><button type="submit">➕</button>
 </form>
diff --git a/src/lib/components/questions/text/text_question_input.svelte b/src/lib/components/questions/text/text_question_input.svelte
index 82e2538..c39cffa 100644
--- a/src/lib/components/questions/text/text_question_input.svelte
+++ b/src/lib/components/questions/text/text_question_input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { TextQuestion } from '$lib/form';
 
-	const data = $$props as TextQuestion;
+	export const data = $$props as TextQuestion;
 </script>
 
 <fieldset>
diff --git a/src/lib/resources/store.ts b/src/lib/resources/store.ts
index 1ece1a6..0f377bc 100644
--- a/src/lib/resources/store.ts
+++ b/src/lib/resources/store.ts
@@ -1,5 +1,5 @@
 import { openKv } from '@deno/kv';
-import { KvStore } from '$lib/store/kv';
+import { KvStore } from '$lib/db/kv';
 import { DENO_KV_ACCESS_TOKEN, DENO_KV_CONNECT_URL } from '$env/static/private';
 
 const kvPath = DENO_KV_CONNECT_URL || './.denokv';

From 3cc2108e5210b7a831c457aaf9951bb8897c7ad0 Mon Sep 17 00:00:00 2001
From: keillor <69380836+keillor@users.noreply.github.com>
Date: Mon, 1 Apr 2024 01:22:24 -0700
Subject: [PATCH 04/25] - Created BaseEditor w/ slot at the end to   simpliy
 creating the editors - worked on BooleanQuestionInputEditor   and w/ new
 BaseEditor

---
 .../components/form_editor/form_editor.svelte |  4 +++
 .../questions/base/base_editor.svelte         | 14 ++++++++
 .../boolean_question_input_editor.svelte      | 34 +++++++++----------
 3 files changed, 35 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/components/questions/base/base_editor.svelte

diff --git a/src/lib/components/form_editor/form_editor.svelte b/src/lib/components/form_editor/form_editor.svelte
index 0339cf2..cb5e59d 100644
--- a/src/lib/components/form_editor/form_editor.svelte
+++ b/src/lib/components/form_editor/form_editor.svelte
@@ -3,6 +3,8 @@
 	import { QuestionType, type QuestionList } from '$lib/form';
 	import QuestionInput from '$lib/components/question_input/question_input.svelte';
 	import QuestionListEditor from './question_list_editor/question_list_editor.svelte';
+	import BaseEditor from '../questions/base/base_editor.svelte';
+	import BooleanQuestionInputEditor from '../questions/boolean/boolean_question_input_editor.svelte';
 
 	export let action: string;
 	export let method: string;
@@ -14,6 +16,7 @@
 		questions.append();
 	}
 	function handleSumbit(event: MouseEvent) {
+		event.preventDefault();
 		console.log(questions);
 	}
 </script>
@@ -73,6 +76,7 @@
 	/>
 
 	<QuestionListEditor bind:value={questions} />
+	<BooleanQuestionInputEditor bind:data={questions[0]} />
 	<button type="submit" on:click={handleSumbit}>Submit</button>
 </form>
 
diff --git a/src/lib/components/questions/base/base_editor.svelte b/src/lib/components/questions/base/base_editor.svelte
new file mode 100644
index 0000000..2dfc654
--- /dev/null
+++ b/src/lib/components/questions/base/base_editor.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { QuestionBase } from '$lib/form';
+	import BooleanQuestionInput from '../boolean/boolean_question_input.svelte';
+	/*  type: QuestionType;
+	    name: string;
+      content: string;
+      required?: boolean; */
+	export let data = $$props as QuestionBase;
+</script>
+
+<input type="text" bind:value={data.content} placeholder="Question Title" />
+<input type="text" bind:value={data.name} placeholder="Internal Question Name" />
+<input type="checkbox" bind:value={data.required} placeholder="Question Required" />
+<slot />
diff --git a/src/lib/components/questions/boolean/boolean_question_input_editor.svelte b/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
index b3d42fb..ac47e64 100644
--- a/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
+++ b/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { QuestionType, type BooleanQuestion, type SelectQuestion } from '$lib/form';
+	import type { QuestionType, BooleanQuestion, SelectQuestion } from '$lib/form';
 	import BooleanQuestionInput from './boolean_question_input.svelte';
 	import input from '../text/text_question_input.svelte';
 	import TextareaQuestionInput from '../textarea/textarea_question_input.svelte';
 	import SelectQuestionInput from '../select/select_question_input.svelte';
 	import { drafts } from '$lib/stores/drafts/drafts';
+	import BaseEditor from '../base/base_editor.svelte';
 	export var data = $$props as BooleanQuestion;
 
 	/* 
@@ -25,19 +26,18 @@
 	// };
 </script>
 
-<input bind:value={data.content} name="temp" placeholder="Question Title" />
-<input bind:value={data.name} placeholder="Internal Question Name" />
-<SelectQuestionInput
-	name={'style'}
-	content={'Choose a Style'}
-	options={[
-		{ content: 'checkbox', value: 'checkbox' },
-		{ content: 'radio', value: 'radio' }
-	]}
-	bind:value={data.style}
-/>
-<BooleanQuestionInput bind:value={data.required} content="Required" />
-<details>
-	<summary>Sample</summary>
-	<BooleanQuestionInput bind:data />
-</details>
+<BaseEditor bind:data>
+	<SelectQuestionInput
+		name={'style'}
+		content={'Choose a Style'}
+		options={[
+			{ content: 'checkbox', value: 'checkbox' },
+			{ content: 'radio', value: 'radio' }
+		]}
+		bind:value={data.style}
+	/>
+	<details>
+		<summary>Sample</summary>
+		<BooleanQuestionInput bind:data />
+	</details>
+</BaseEditor>

From c52dbe82bb42efee28828cbda589c1f54c15620b Mon Sep 17 00:00:00 2001
From: AlexthePear <alopp5570@csu.fullerton.edu>
Date: Mon, 1 Apr 2024 02:35:23 -0700
Subject: [PATCH 05/25] Finished Color Question

---
 .../components/form_editor/form_editor.svelte  |  3 ++-
 .../question_input_editor.svelte               |  9 ++++-----
 .../boolean_question_input_editor.svelte       |  1 -
 .../color/color_question_input.svelte          |  4 ++--
 .../color/color_question_input_editor.svelte   | 18 ++++++++++++++++++
 .../questions/text/text_question_input.svelte  |  2 +-
 .../textarea/textarea_question_input.svelte    |  2 +-
 src/lib/form/form.ts                           |  2 +-
 8 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/form_editor/form_editor.svelte b/src/lib/components/form_editor/form_editor.svelte
index cb5e59d..f2ae4fd 100644
--- a/src/lib/components/form_editor/form_editor.svelte
+++ b/src/lib/components/form_editor/form_editor.svelte
@@ -5,6 +5,7 @@
 	import QuestionListEditor from './question_list_editor/question_list_editor.svelte';
 	import BaseEditor from '../questions/base/base_editor.svelte';
 	import BooleanQuestionInputEditor from '../questions/boolean/boolean_question_input_editor.svelte';
+	import QuestionInputEditor from './question_input_editor/question_input_editor.svelte';
 
 	export let action: string;
 	export let method: string;
@@ -76,7 +77,7 @@
 	/>
 
 	<QuestionListEditor bind:value={questions} />
-	<BooleanQuestionInputEditor bind:data={questions[0]} />
+	<QuestionInputEditor bind:data={questions[0]} />
 	<button type="submit" on:click={handleSumbit}>Submit</button>
 </form>
 
diff --git a/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte b/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
index 0f6db5e..9c99f9b 100644
--- a/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
+++ b/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
@@ -13,7 +13,7 @@
 	import TimeQuestionInputEditor from '$lib/components/questions/time/time_question_input_editor.svelte';
 	import BooleanQuestionInput from '$lib/components/questions/boolean/boolean_question_input.svelte';
 
-	export var data1: any = $$props;
+	export var data: any = $$props;
 </script>
 
 <!-- TODO: Reconcile changes made in
@@ -24,16 +24,15 @@ https://github.com/acmcsufoss/form/pull/new/question-input-editor -->
 <!-- Uncomment finished questions to see if it renders -->
 <div>
 	{#if $$props.type === QuestionType.BOOLEAN}
-		<!-- <svelte:component this={BooleanQuestionInputEditor} bind:data={data1} /> -->
-		<BooleanQuestionInputEditor {...$$props} />
+		<BooleanQuestionInputEditor bind:data />
+	{:else if $$props.type === QuestionType.COLOR}
+		<ColorQuestionInputEditor bind:data />
 		<!-- {:else if $$props.type === QuestionType.TEXT}
 		<TextQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.RADIO_GROUP}
 		<RadioGroupQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.NUMBER}
 		<NumberQuestionInputEditor {...$$props} />
-	{:else if $$props.type === QuestionType.COLOR}
-		<ColorQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.TEXTAREA}
 		<TextareaQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.DATE}
diff --git a/src/lib/components/questions/boolean/boolean_question_input_editor.svelte b/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
index ac47e64..47717ce 100644
--- a/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
+++ b/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
@@ -7,7 +7,6 @@
 	import { drafts } from '$lib/stores/drafts/drafts';
 	import BaseEditor from '../base/base_editor.svelte';
 	export var data = $$props as BooleanQuestion;
-
 	/* 
     type: QuestionType.BOOLEAN,
 		name: 'internal name',
diff --git a/src/lib/components/questions/color/color_question_input.svelte b/src/lib/components/questions/color/color_question_input.svelte
index 427ef42..c218860 100644
--- a/src/lib/components/questions/color/color_question_input.svelte
+++ b/src/lib/components/questions/color/color_question_input.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { ColorQuestion } from '$lib/form';
 
-	const data = $$props as ColorQuestion;
+	export let data = $$props as ColorQuestion;
 </script>
 
 <fieldset>
 	<legend>{data.content}</legend>
-	<input name={data.name} type="color" required={data.required} value={data.value} />
+	<input name={data.name} type="color" required={data.required} bind:value={data.value} />
 </fieldset>
diff --git a/src/lib/components/questions/color/color_question_input_editor.svelte b/src/lib/components/questions/color/color_question_input_editor.svelte
index e69de29..ee8e899 100644
--- a/src/lib/components/questions/color/color_question_input_editor.svelte
+++ b/src/lib/components/questions/color/color_question_input_editor.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { QuestionType, ColorQuestion, SelectQuestion } from '$lib/form';
+	import ColorQuestionInput from './color_question_input.svelte';
+	import input from '../text/text_question_input.svelte';
+	import TextQuestionInput from '../text/text_question_input.svelte';
+	import { drafts } from '$lib/stores/drafts/drafts';
+	import BaseEditor from '../base/base_editor.svelte';
+	import TextareaQuestionInput from '../textarea/textarea_question_input.svelte';
+	export let data = $$props as ColorQuestion;
+</script>
+
+<BaseEditor bind:data>
+	<input type="color" name="color-" bind:value={data.value} />
+	<details>
+		<summary>Sample</summary>
+		<ColorQuestionInput bind:data />
+	</details>
+</BaseEditor>
diff --git a/src/lib/components/questions/text/text_question_input.svelte b/src/lib/components/questions/text/text_question_input.svelte
index c39cffa..bbbf749 100644
--- a/src/lib/components/questions/text/text_question_input.svelte
+++ b/src/lib/components/questions/text/text_question_input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { TextQuestion } from '$lib/form';
 
-	export const data = $$props as TextQuestion;
+	export let data = $$props as TextQuestion;
 </script>
 
 <fieldset>
diff --git a/src/lib/components/questions/textarea/textarea_question_input.svelte b/src/lib/components/questions/textarea/textarea_question_input.svelte
index 898bd15..0028d8d 100644
--- a/src/lib/components/questions/textarea/textarea_question_input.svelte
+++ b/src/lib/components/questions/textarea/textarea_question_input.svelte
@@ -2,7 +2,7 @@
 	import type { TextareaQuestion } from '$lib/form';
 	import { adjustableTextareaHeight } from './adjustable_textarea_height';
 
-	const data = $$props as TextareaQuestion;
+	export let data = $$props as TextareaQuestion;
 </script>
 
 <fieldset>
diff --git a/src/lib/form/form.ts b/src/lib/form/form.ts
index 225c65a..335c672 100644
--- a/src/lib/form/form.ts
+++ b/src/lib/form/form.ts
@@ -419,7 +419,7 @@ export interface ColorQuestion extends QuestionBase {
 	type: QuestionType.COLOR;
 
 	/**
-	 * value is the value value for the color input.
+	 * value is the value for the color input.
 	 */
 	value?: string;
 }

From a9b9f1a674a3871f314b93551c543730b9ca5f5d Mon Sep 17 00:00:00 2001
From: AlexthePear <alopp5570@csu.fullerton.edu>
Date: Mon, 1 Apr 2024 02:41:07 -0700
Subject: [PATCH 06/25] added exports and binds where I could

---
 .../questions/availability/availability_question_input.svelte | 2 +-
 src/lib/components/questions/date/date_question_input.svelte  | 4 ++--
 .../questions/datetime/datetime_question_input.svelte         | 4 ++--
 .../components/questions/number/number_question_input.svelte  | 2 +-
 src/lib/components/questions/time/time_question_input.svelte  | 4 ++--
 .../questions/timezone/timezone_question_input.svelte         | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/questions/availability/availability_question_input.svelte b/src/lib/components/questions/availability/availability_question_input.svelte
index 7203350..0058a20 100644
--- a/src/lib/components/questions/availability/availability_question_input.svelte
+++ b/src/lib/components/questions/availability/availability_question_input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { AvailablityQuestion } from '$lib/form';
 
-	const data = $$props as AvailablityQuestion;
+	export let data = $$props as AvailablityQuestion;
 </script>
 
 <fieldset>
diff --git a/src/lib/components/questions/date/date_question_input.svelte b/src/lib/components/questions/date/date_question_input.svelte
index 89b66cd..02a25a9 100644
--- a/src/lib/components/questions/date/date_question_input.svelte
+++ b/src/lib/components/questions/date/date_question_input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { DateQuestion } from '$lib/form';
 
-	const data = $$props as DateQuestion;
+	export let data = $$props as DateQuestion;
 </script>
 
 <fieldset>
@@ -12,6 +12,6 @@
 		required={data.required}
 		min={data.min}
 		max={data.max}
-		value={data.value}
+		bind:value={data.value}
 	/>
 </fieldset>
diff --git a/src/lib/components/questions/datetime/datetime_question_input.svelte b/src/lib/components/questions/datetime/datetime_question_input.svelte
index 49e0182..c572199 100644
--- a/src/lib/components/questions/datetime/datetime_question_input.svelte
+++ b/src/lib/components/questions/datetime/datetime_question_input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { DatetimeQuestion } from '$lib/form';
 
-	const data = $$props as DatetimeQuestion;
+	export let data = $$props as DatetimeQuestion;
 </script>
 
 <fieldset>
@@ -10,7 +10,7 @@
 		name={data.name}
 		type="datetime-local"
 		required={data.required}
-		value={data.value}
+		bind:value={data.value}
 		min={data.min}
 		max={data.max}
 	/>
diff --git a/src/lib/components/questions/number/number_question_input.svelte b/src/lib/components/questions/number/number_question_input.svelte
index 605ee60..d09f2be 100644
--- a/src/lib/components/questions/number/number_question_input.svelte
+++ b/src/lib/components/questions/number/number_question_input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { NumberQuestion } from '$lib/form';
 
-	const data = $$props as NumberQuestion;
+	export let data = $$props as NumberQuestion;
 </script>
 
 <fieldset>
diff --git a/src/lib/components/questions/time/time_question_input.svelte b/src/lib/components/questions/time/time_question_input.svelte
index 32c8602..d28ab28 100644
--- a/src/lib/components/questions/time/time_question_input.svelte
+++ b/src/lib/components/questions/time/time_question_input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { TimeQuestion } from '$lib/form';
 
-	const data = $$props as TimeQuestion;
+	export let data = $$props as TimeQuestion;
 </script>
 
 <fieldset>
@@ -10,7 +10,7 @@
 		name={data.name}
 		type="time"
 		required={data.required}
-		value={data.value}
+		bind:value={data.value}
 		min={data.min}
 		max={data.max}
 	/>
diff --git a/src/lib/components/questions/timezone/timezone_question_input.svelte b/src/lib/components/questions/timezone/timezone_question_input.svelte
index 41e7254..4364850 100644
--- a/src/lib/components/questions/timezone/timezone_question_input.svelte
+++ b/src/lib/components/questions/timezone/timezone_question_input.svelte
@@ -2,7 +2,7 @@
 	import type { TimezoneQuestion } from '$lib/form';
 	import { TIMEZONES } from '$lib/timezones';
 
-	const data = $$props as TimezoneQuestion;
+	export let data = $$props as TimezoneQuestion;
 
 	let localTimezoneID = '';
 	if (Intl.DateTimeFormat) {

From dd8329978ece4903c5fa4e1cdf30191d9c146cc3 Mon Sep 17 00:00:00 2001
From: AlexthePear <alopp5570@csu.fullerton.edu>
Date: Mon, 1 Apr 2024 02:41:31 -0700
Subject: [PATCH 07/25] did it for radio_group_question

---
 .../questions/radio_group/radio_group_question_input.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/questions/radio_group/radio_group_question_input.svelte b/src/lib/components/questions/radio_group/radio_group_question_input.svelte
index 226fcb3..2047a8c 100644
--- a/src/lib/components/questions/radio_group/radio_group_question_input.svelte
+++ b/src/lib/components/questions/radio_group/radio_group_question_input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { RadioGroupQuestion } from '$lib/form';
 
-	const data = $$props as RadioGroupQuestion;
+	export let data = $$props as RadioGroupQuestion;
 </script>
 
 <fieldset>

From e12a5281e0f7ff82af466401d7bbf50d6a9fb0e0 Mon Sep 17 00:00:00 2001
From: AlexthePear <alopp5570@csu.fullerton.edu>
Date: Mon, 1 Apr 2024 02:50:31 -0700
Subject: [PATCH 08/25] Added some slight styling

---
 .../components/form_editor/form_editor.svelte | 35 ++++++++++++++++++-
 .../boolean_question_input_editor.svelte      |  4 ++-
 .../color/color_question_input_editor.svelte  |  4 ++-
 3 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/form_editor/form_editor.svelte b/src/lib/components/form_editor/form_editor.svelte
index f2ae4fd..6e0d5ba 100644
--- a/src/lib/components/form_editor/form_editor.svelte
+++ b/src/lib/components/form_editor/form_editor.svelte
@@ -77,7 +77,6 @@
 	/>
 
 	<QuestionListEditor bind:value={questions} />
-	<QuestionInputEditor bind:data={questions[0]} />
 	<button type="submit" on:click={handleSumbit}>Submit</button>
 </form>
 
@@ -90,4 +89,38 @@
 		margin: 0 auto;
 		max-width: 400px;
 	}
+	/* :global(fieldset) {
+		border: none;
+		min-width: 0;
+		margin: 0px;
+		padding: 0px;
+		max-width: 100%;
+		width: 100%;
+		display: block;
+	} */
+	:global(legend) {
+		font-size: 13px;
+		font-weight: bold;
+		margin-bottom: 10px;
+		font-family: 'Poppins';
+	}
+
+	:global(.question) {
+		padding: 20px 15px;
+		width: calc(100% - 30px);
+		margin: 10px auto;
+		background-color: #ffffff;
+		border-radius: 10px;
+		border-color: #c5c8c9;
+		border-width: 0;
+		border-style: solid;
+	}
+
+	/* :global(label) {
+		display: flex;
+	} */
+
+	/* :global(input) {
+		display: flex;
+	} */
 </style>
diff --git a/src/lib/components/questions/boolean/boolean_question_input_editor.svelte b/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
index 47717ce..6b70a9b 100644
--- a/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
+++ b/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
@@ -37,6 +37,8 @@
 	/>
 	<details>
 		<summary>Sample</summary>
-		<BooleanQuestionInput bind:data />
+		<div class="question">
+			<BooleanQuestionInput bind:data />
+		</div>
 	</details>
 </BaseEditor>
diff --git a/src/lib/components/questions/color/color_question_input_editor.svelte b/src/lib/components/questions/color/color_question_input_editor.svelte
index ee8e899..6970891 100644
--- a/src/lib/components/questions/color/color_question_input_editor.svelte
+++ b/src/lib/components/questions/color/color_question_input_editor.svelte
@@ -13,6 +13,8 @@
 	<input type="color" name="color-" bind:value={data.value} />
 	<details>
 		<summary>Sample</summary>
-		<ColorQuestionInput bind:data />
+		<div class="question">
+			<ColorQuestionInput bind:data />
+		</div>
 	</details>
 </BaseEditor>

From 1159116a1647da604bd7ccdb45c100d4e848e4be Mon Sep 17 00:00:00 2001
From: AlexthePear <alopp5570@csu.fullerton.edu>
Date: Mon, 1 Apr 2024 03:23:33 -0700
Subject: [PATCH 09/25] Added NumberQuestionInputEditor to render on
 demoFormEditor

---
 .../question_input_editor.svelte               |  4 ++--
 .../number/number_question_input_editor.svelte | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte b/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
index 9c99f9b..57d6123 100644
--- a/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
+++ b/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
@@ -27,12 +27,12 @@ https://github.com/acmcsufoss/form/pull/new/question-input-editor -->
 		<BooleanQuestionInputEditor bind:data />
 	{:else if $$props.type === QuestionType.COLOR}
 		<ColorQuestionInputEditor bind:data />
+	{:else if $$props.type === QuestionType.NUMBER}
+		<NumberQuestionInputEditor {...$$props} />
 		<!-- {:else if $$props.type === QuestionType.TEXT}
 		<TextQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.RADIO_GROUP}
 		<RadioGroupQuestionInputEditor {...$$props} />
-	{:else if $$props.type === QuestionType.NUMBER}
-		<NumberQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.TEXTAREA}
 		<TextareaQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.DATE}
diff --git a/src/lib/components/questions/number/number_question_input_editor.svelte b/src/lib/components/questions/number/number_question_input_editor.svelte
index e69de29..341fb0d 100644
--- a/src/lib/components/questions/number/number_question_input_editor.svelte
+++ b/src/lib/components/questions/number/number_question_input_editor.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { NumberQuestion } from '$lib/form';
+	import BaseEditor from '../base/base_editor.svelte';
+	import NumberQuestionInput from './number_question_input.svelte';
+	export var data = $$props as NumberQuestion;
+</script>
+
+<BaseEditor bind:data>
+	<input type="number" bind:value={data.min} />
+	<input type="number" bind:value={data.max} />
+	<input type="number" bind:value={data.step} />
+	<input type="number" bind:value={data.value} />
+	<input type="text" bind:value={data.placeholder} />
+	<details>
+		<summary>Sample</summary>
+		<NumberQuestionInput bind:data />
+	</details>
+</BaseEditor>

From cc1ffc48272acb20f8367ab8c7184d0bcadabb50 Mon Sep 17 00:00:00 2001
From: AlexthePear <alop5570@gmail.com>
Date: Tue, 9 Apr 2024 00:23:12 -0700
Subject: [PATCH 10/25] minor improvements and re'form'atting

---
 src/lib/components/form/form.svelte           |  7 ------
 .../components/form_editor/form_editor.svelte |  2 +-
 .../question_input_editor.svelte              |  4 +--
 .../questions/base/base_editor.svelte         | 25 ++++++++++++++++---
 .../boolean_question_input_editor.svelte      | 17 ++++++++++---
 .../select_question_input_editor.svelte       |  9 ++++---
 .../timezone/timezone_question_input.svelte   | 14 ++++++-----
 .../forms/demoformeditor/demo_form_editor.ts  |  6 +++++
 8 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/form/form.svelte b/src/lib/components/form/form.svelte
index cf1889d..5551bbe 100644
--- a/src/lib/components/form/form.svelte
+++ b/src/lib/components/form/form.svelte
@@ -121,13 +121,6 @@
 		font-weight: 400;
 	}
 
-	:global(.Question-Header) {
-		font-size: 13px;
-		font-weight: bold;
-		margin-bottom: 10px;
-		font-family: 'Poppins';
-	}
-
 	:global(.question) {
 		padding: 20px 15px;
 		width: calc(100% - 30px);
diff --git a/src/lib/components/form_editor/form_editor.svelte b/src/lib/components/form_editor/form_editor.svelte
index 6e0d5ba..5d2e1d4 100644
--- a/src/lib/components/form_editor/form_editor.svelte
+++ b/src/lib/components/form_editor/form_editor.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Form } from '$lib/store';
+	import type { Form } from '$lib/form';
 	import { QuestionType, type QuestionList } from '$lib/form';
 	import QuestionInput from '$lib/components/question_input/question_input.svelte';
 	import QuestionListEditor from './question_list_editor/question_list_editor.svelte';
diff --git a/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte b/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
index 57d6123..df24303 100644
--- a/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
+++ b/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
@@ -42,8 +42,8 @@ https://github.com/acmcsufoss/form/pull/new/question-input-editor -->
 	{:else if $$props.type === QuestionType.DATETIME}
 		<DatetimeQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.TIME}
-		<TimeQuestionInputEditor {...$$props} />
+		<TimeQuestionInputEditor {...$$props} /> -->
 	{:else if $$props.type === QuestionType.SELECT}
-		<SelectQuestionInputEditor {...$$props} />  -->
+		<SelectQuestionInputEditor {...$$props} />
 	{/if}
 </div>
diff --git a/src/lib/components/questions/base/base_editor.svelte b/src/lib/components/questions/base/base_editor.svelte
index 2dfc654..2bd59ab 100644
--- a/src/lib/components/questions/base/base_editor.svelte
+++ b/src/lib/components/questions/base/base_editor.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
-	import type { QuestionBase } from '$lib/form';
+	import type { QuestionBase, TextQuestion } from '$lib/form';
+	import { QuestionType } from '$lib/form';
 	import BooleanQuestionInput from '../boolean/boolean_question_input.svelte';
+	import TextQuestionInput from '../text/text_question_input.svelte';
+
 	/*  type: QuestionType;
 	    name: string;
       content: string;
@@ -8,7 +11,21 @@
 	export let data = $$props as QuestionBase;
 </script>
 
-<input type="text" bind:value={data.content} placeholder="Question Title" />
-<input type="text" bind:value={data.name} placeholder="Internal Question Name" />
-<input type="checkbox" bind:value={data.required} placeholder="Question Required" />
+<!-- Copied From TextQuestionInput -->
+<fieldset>
+	<legend>Question Title</legend>
+	<input type="text" bind:value={data.content} placeholder="Question Title" />
+</fieldset>
+
+<fieldset>
+	<legend>Internal Question</legend>
+	<input type="text" bind:value={data.name} placeholder="Internal Question Name" />
+</fieldset>
+
+<fieldset>
+	<legend>Question Required</legend>
+	<input type="checkbox" bind:value={data.required} placeholder="Question Required" />
+</fieldset>
+
+
 <slot />
diff --git a/src/lib/components/questions/boolean/boolean_question_input_editor.svelte b/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
index 6b70a9b..bddae47 100644
--- a/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
+++ b/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
@@ -6,7 +6,7 @@
 	import SelectQuestionInput from '../select/select_question_input.svelte';
 	import { drafts } from '$lib/stores/drafts/drafts';
 	import BaseEditor from '../base/base_editor.svelte';
-	export var data = $$props as BooleanQuestion;
+	export let data: BooleanQuestion;
 	/* 
     type: QuestionType.BOOLEAN,
 		name: 'internal name',
@@ -26,7 +26,7 @@
 </script>
 
 <BaseEditor bind:data>
-	<SelectQuestionInput
+	<!-- <SelectQuestionInput
 		name={'style'}
 		content={'Choose a Style'}
 		options={[
@@ -34,7 +34,18 @@
 			{ content: 'radio', value: 'radio' }
 		]}
 		bind:value={data.style}
-	/>
+	/> -->
+	<fieldset>
+		<legend>Choose a Style</legend>
+		<select name={'style'} bind:value={data.style}>
+			{#each [
+				{ content: 'checkbox', value: 'checkbox' },
+				{ content: 'radio', value: 'radio' }
+			] as option}
+				<option value={option.value}>{option.content}</option>
+			{/each}
+		</select>
+	</fieldset>
 	<details>
 		<summary>Sample</summary>
 		<div class="question">
diff --git a/src/lib/components/questions/select/select_question_input_editor.svelte b/src/lib/components/questions/select/select_question_input_editor.svelte
index e3563a4..40cb71c 100644
--- a/src/lib/components/questions/select/select_question_input_editor.svelte
+++ b/src/lib/components/questions/select/select_question_input_editor.svelte
@@ -38,12 +38,13 @@
 
 <input bind:value={data.content} />
 
-<form on:submit|preventDefault={addOptions}>
-	<input type="text" bind:value={newOption} /><button type="submit">➕</button>
-</form>
+<input type="text" bind:value={newOption} /><button on:click|preventDefault={addOptions}>➕</button>
 
 {#each data.options as option (option.content)}
-	<p><button on:click={() => removeOption(option)}>🗑️</button>{option.content}</p>
+	<button on:click={() => removeOption(option)}>🗑️</button><input
+		name={option.value}
+		bind:value={option.content}
+	/> <br />
 {/each}
 
 <SelectQuestionInput {data} />
diff --git a/src/lib/components/questions/timezone/timezone_question_input.svelte b/src/lib/components/questions/timezone/timezone_question_input.svelte
index 4364850..1d341d6 100644
--- a/src/lib/components/questions/timezone/timezone_question_input.svelte
+++ b/src/lib/components/questions/timezone/timezone_question_input.svelte
@@ -10,9 +10,11 @@
 	}
 </script>
 
-<label class="Question-Header" for={data.name}>{data.content}</label>
-<select name={data.name} required={data.required} value={data.default || localTimezoneID}>
-	{#each TIMEZONES as choice}
-		<option value={choice.id}>{choice.text}</option>
-	{/each}
-</select>
+<fieldset>
+	<legend>{data.content}</legend>
+	<select name={data.name} required={data.required} value={data.default || localTimezoneID}>
+		{#each TIMEZONES as choice}
+			<option value={choice.id}>{choice.text}</option>
+		{/each}
+	</select>
+</fieldset>
diff --git a/src/routes/forms/demoformeditor/demo_form_editor.ts b/src/routes/forms/demoformeditor/demo_form_editor.ts
index 938031d..73ad96e 100644
--- a/src/routes/forms/demoformeditor/demo_form_editor.ts
+++ b/src/routes/forms/demoformeditor/demo_form_editor.ts
@@ -57,6 +57,12 @@ export const demoForm: Form = {
 				maxLength: 1_000,
 				placeholder: 'write here',
 				value: ''
+			},
+			{
+				type: QuestionType.SELECT,
+				name: 'Select Question',
+				content: 'Pick an option',
+				options: [{ value: 'text', content: 'test' }]
 			}
 		]
 	}

From 00c6ebefc77866f1f8ab64aaa0db37b97c7e71a7 Mon Sep 17 00:00:00 2001
From: AlexthePear <alop5570@gmail.com>
Date: Tue, 9 Apr 2024 00:28:54 -0700
Subject: [PATCH 11/25] Fixed Timezone

---
 src/lib/form/form.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/form/form.ts b/src/lib/form/form.ts
index 335c672..419fe3f 100644
--- a/src/lib/form/form.ts
+++ b/src/lib/form/form.ts
@@ -592,9 +592,9 @@ export interface TimezoneQuestion extends QuestionBase {
 	type: QuestionType.TIMEZONE;
 
 	/**
-	 * default is the default value for the timezone question.
+	 * value is the timezone.
 	 */
-	default?: TimezoneQuestionValue['value'];
+	value?: TimezoneQuestionValue['value'];
 }
 
 /**

From 6e52537a7ac5dd560f7c5d144b48ba915b4966ad Mon Sep 17 00:00:00 2001
From: keillor <69380836+keillor@users.noreply.github.com>
Date: Wed, 10 Apr 2024 22:20:26 -0700
Subject: [PATCH 12/25] added fieldset to color

---
 .../questions/color/color_question_input_editor.svelte      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/questions/color/color_question_input_editor.svelte b/src/lib/components/questions/color/color_question_input_editor.svelte
index 6970891..72d29fb 100644
--- a/src/lib/components/questions/color/color_question_input_editor.svelte
+++ b/src/lib/components/questions/color/color_question_input_editor.svelte
@@ -10,7 +10,11 @@
 </script>
 
 <BaseEditor bind:data>
-	<input type="color" name="color-" bind:value={data.value} />
+	<!-- Copied From BaseEditor -->
+	<fieldset>
+		<legend>Default Color</legend>
+		<input type="color" name="color-" bind:value={data.value} />
+	</fieldset>
 	<details>
 		<summary>Sample</summary>
 		<div class="question">

From 71648c0d77dba50f6b8f153620ea6129a712208f Mon Sep 17 00:00:00 2001
From: keillor <69380836+keillor@users.noreply.github.com>
Date: Wed, 10 Apr 2024 23:07:23 -0700
Subject: [PATCH 13/25] TextQuestion

---
 .../text/text_question_input_editor.svelte    | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/src/lib/components/questions/text/text_question_input_editor.svelte b/src/lib/components/questions/text/text_question_input_editor.svelte
index e69de29..da38b2c 100644
--- a/src/lib/components/questions/text/text_question_input_editor.svelte
+++ b/src/lib/components/questions/text/text_question_input_editor.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import BaseEditor from '../base/base_editor.svelte';
+	import type { QuestionType, TextQuestion } from '$lib/form';
+	import TextQuestionInput from './text_question_input.svelte';
+
+	export var data = $$props as TextQuestion;
+	/*var data: TextQuestion = {
+		type: QuestionType.TEXT, //NA
+		required: false, //base
+		name: '', //base
+		content: '', // base
+		minLength: 0,
+		maxLength: 100,
+		value: '', //
+		placeholder: '',
+		pattern: '',
+		choices: ['sample', 'default', 'should appear']
+	};*/
+</script>
+
+<BaseEditor bind:data>
+	<!-- Copied from BaseEditor -->
+	<fieldset>
+		<legend>Min Length</legend>
+		<input type="number" bind:value={data.minLength} />
+	</fieldset>
+	<fieldset>
+		<legend>Max Length</legend>
+		<input type="number" bind:value={data.maxLength} />
+	</fieldset>
+	<fieldset>
+		<legend>Default Value</legend>
+		<input type="text" bind:value={data.value} />
+	</fieldset>
+	<fieldset>
+		<legend>Placeholder</legend>
+		<input type="text" bind:value={data.placeholder} />
+	</fieldset>
+	<fieldset>
+		<legend>Regex Pattern</legend>
+		<input type="text" bind:value={data.pattern} />
+	</fieldset>
+	<fieldset>
+		<legend>Choices (COMMING SOON)</legend>
+	</fieldset>
+	<details>
+		<summary>Sample</summary>
+		<div class="question">
+			<TextQuestionInput bind:data />
+		</div>
+	</details>
+</BaseEditor>

From 26bdc86da8118f8beefc64724dcd2db1aa874f57 Mon Sep 17 00:00:00 2001
From: keillor <69380836+keillor@users.noreply.github.com>
Date: Wed, 10 Apr 2024 23:14:48 -0700
Subject: [PATCH 14/25] created textarea w/ fieldset

---
 .../textarea_question_input_editor.svelte     | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/lib/components/questions/textarea/textarea_question_input_editor.svelte b/src/lib/components/questions/textarea/textarea_question_input_editor.svelte
index e69de29..cbbc718 100644
--- a/src/lib/components/questions/textarea/textarea_question_input_editor.svelte
+++ b/src/lib/components/questions/textarea/textarea_question_input_editor.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { TextareaQuestion } from '$lib/form';
+	import BaseEditor from '../base/base_editor.svelte';
+	import TextareaQuestionInput from './textarea_question_input.svelte';
+
+	export var data = $$props as TextareaQuestion;
+</script>
+
+<BaseEditor bind:data>
+	<fieldset>
+		<legend>Min Length</legend>
+		<input type="number" bind:value={data.minLength} />
+	</fieldset>
+	<fieldset>
+		<legend>Max Length</legend>
+		<input type="number" bind:value={data.maxLength} />
+	</fieldset>
+	<fieldset>
+		<legend>Default Value</legend>
+		<input type="text" bind:value={data.value} />
+	</fieldset>
+	<fieldset>
+		<legend>Placeholder</legend>
+		<input type="text" bind:value={data.placeholder} />
+	</fieldset>
+	<details>
+		<summary>Sample</summary>
+		<div class="question">
+			<TextareaQuestionInput bind:data />
+		</div>
+	</details>
+</BaseEditor>

From 34b4d6b62e60840a0ea59fc558f830c3c7c92d41 Mon Sep 17 00:00:00 2001
From: keillor <69380836+keillor@users.noreply.github.com>
Date: Wed, 10 Apr 2024 23:55:26 -0700
Subject: [PATCH 15/25] added regular date question

---
 src/routes/forms/demoformeditor/demo_form_editor.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/routes/forms/demoformeditor/demo_form_editor.ts b/src/routes/forms/demoformeditor/demo_form_editor.ts
index 73ad96e..19fe57b 100644
--- a/src/routes/forms/demoformeditor/demo_form_editor.ts
+++ b/src/routes/forms/demoformeditor/demo_form_editor.ts
@@ -63,6 +63,15 @@ export const demoForm: Form = {
 				name: 'Select Question',
 				content: 'Pick an option',
 				options: [{ value: 'text', content: 'test' }]
+			},
+			{
+				type: QuestionType.DATE,
+				name: 'justDate',
+				content: 'Pick a date (jk you can only pick today)',
+				required: false,
+				value: '2024-04-10',
+				min: '2024-04-10',
+				max: '2024-04-10'
 			}
 		]
 	}

From 935563a5f6f0d2df242b2511980777239a88d69e Mon Sep 17 00:00:00 2001
From: keillor <69380836+keillor@users.noreply.github.com>
Date: Wed, 10 Apr 2024 23:55:36 -0700
Subject: [PATCH 16/25] created date question

---
 .../date/date_question_input_editor.svelte    | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/lib/components/questions/date/date_question_input_editor.svelte b/src/lib/components/questions/date/date_question_input_editor.svelte
index e69de29..8160bb2 100644
--- a/src/lib/components/questions/date/date_question_input_editor.svelte
+++ b/src/lib/components/questions/date/date_question_input_editor.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { DateQuestion } from '$lib/form';
+	import BaseEditor from '../base/base_editor.svelte';
+	import DateQuestionInput from './date_question_input.svelte';
+	export let data = $$props as DateQuestion;
+
+	/* type: QuestionType.DATE,
+				name: 'justDate',
+				content: 'Pick a date (jk you can only pick today)',
+				required: false,
+				value: new Date().toISOString(),
+				min: new Date().toISOString(),
+				max: new Date().toISOString() */
+</script>
+
+<BaseEditor bind:data>
+	<fieldset>
+		<legend>Min Date</legend>
+		<input type="date" bind:value={data.min} />
+	</fieldset>
+	<fieldset>
+		<legend>Max Date</legend>
+		<input type="date" bind:value={data.max} />
+	</fieldset>
+	<fieldset>
+		<legend>Default Date</legend>
+		<input type="date" bind:value={data.value} />
+	</fieldset>
+	<details>
+		<summary>Sample</summary>
+		<div class="question">
+			<DateQuestionInput bind:data />
+		</div>
+	</details>
+</BaseEditor>

From 86a8bab202648b232d5487cb0ad588467032f4e6 Mon Sep 17 00:00:00 2001
From: keillor <69380836+keillor@users.noreply.github.com>
Date: Thu, 11 Apr 2024 00:08:55 -0700
Subject: [PATCH 17/25] created datetime editor

---
 .../datetime_question_input_editor.svelte     | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/lib/components/questions/datetime/datetime_question_input_editor.svelte b/src/lib/components/questions/datetime/datetime_question_input_editor.svelte
index e69de29..fffe168 100644
--- a/src/lib/components/questions/datetime/datetime_question_input_editor.svelte
+++ b/src/lib/components/questions/datetime/datetime_question_input_editor.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { DateQuestion, DatetimeQuestion } from '$lib/form';
+	import BaseEditor from '../base/base_editor.svelte';
+	import DatetimeQuestionInput from './datetime_question_input.svelte';
+	export let data = $$props as DatetimeQuestion;
+
+	/* type: QuestionType.DATE,
+				name: 'justDate',
+				content: 'Pick a date (jk you can only pick today)',
+				required: false,
+				value: new Date().toISOString(),
+				min: new Date().toISOString(),
+				max: new Date().toISOString() */
+</script>
+
+<BaseEditor bind:data>
+	<fieldset>
+		<legend>Min Date/Time</legend>
+		<input type="datetime-local" bind:value={data.min} />
+	</fieldset>
+	<fieldset>
+		<legend>Max Date/Time</legend>
+		<input type="datetime-local" bind:value={data.max} />
+	</fieldset>
+	<fieldset>
+		<legend>Default Date/Time</legend>
+		<input type="datetime-local" bind:value={data.value} />
+	</fieldset>
+	<details>
+		<summary>Sample</summary>
+		<div class="question">
+			<DatetimeQuestionInput bind:data />
+		</div>
+	</details>
+</BaseEditor>

From a1a72006efc26f979d01d68e974617dab2b3ece4 Mon Sep 17 00:00:00 2001
From: keillor <69380836+keillor@users.noreply.github.com>
Date: Thu, 11 Apr 2024 00:09:10 -0700
Subject: [PATCH 18/25] added datetime to demo questions

---
 src/routes/forms/demoformeditor/demo_form_editor.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/routes/forms/demoformeditor/demo_form_editor.ts b/src/routes/forms/demoformeditor/demo_form_editor.ts
index 19fe57b..190f5d1 100644
--- a/src/routes/forms/demoformeditor/demo_form_editor.ts
+++ b/src/routes/forms/demoformeditor/demo_form_editor.ts
@@ -72,6 +72,15 @@ export const demoForm: Form = {
 				value: '2024-04-10',
 				min: '2024-04-10',
 				max: '2024-04-10'
+			},
+			{
+				type: QuestionType.DATETIME,
+				name: 'justDate',
+				content: 'Pick a date (jk you can only pick today)',
+				required: false,
+				value: '2024-04-10T11:11:11',
+				min: '2024-04-10T11:11:11',
+				max: '2024-04-10T11:11:11'
 			}
 		]
 	}

From de0194e2b1bcb7bd6136d68934005e8e0670d29e Mon Sep 17 00:00:00 2001
From: keillor <69380836+keillor@users.noreply.github.com>
Date: Thu, 11 Apr 2024 00:17:46 -0700
Subject: [PATCH 19/25] added sample time question

---
 src/routes/forms/demoformeditor/demo_form_editor.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/routes/forms/demoformeditor/demo_form_editor.ts b/src/routes/forms/demoformeditor/demo_form_editor.ts
index 190f5d1..fe2503c 100644
--- a/src/routes/forms/demoformeditor/demo_form_editor.ts
+++ b/src/routes/forms/demoformeditor/demo_form_editor.ts
@@ -81,6 +81,15 @@ export const demoForm: Form = {
 				value: '2024-04-10T11:11:11',
 				min: '2024-04-10T11:11:11',
 				max: '2024-04-10T11:11:11'
+			},
+			{
+				type: QuestionType.TIME,
+				name: 'just time',
+				content: 'just time',
+				required: false,
+				value: '11:11:11',
+				min: '11:11:11',
+				max: '11:11:11'
 			}
 		]
 	}

From b523f151fd90ef24ae563a1f17f210d950908a69 Mon Sep 17 00:00:00 2001
From: keillor <69380836+keillor@users.noreply.github.com>
Date: Thu, 11 Apr 2024 00:18:01 -0700
Subject: [PATCH 20/25] more uncommented questions

---
 .../question_input_editor.svelte                 | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte b/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
index df24303..cdcddce 100644
--- a/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
+++ b/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
@@ -29,20 +29,24 @@ https://github.com/acmcsufoss/form/pull/new/question-input-editor -->
 		<ColorQuestionInputEditor bind:data />
 	{:else if $$props.type === QuestionType.NUMBER}
 		<NumberQuestionInputEditor {...$$props} />
-		<!-- {:else if $$props.type === QuestionType.TEXT}
+	{:else if $$props.type === QuestionType.TEXT}
 		<TextQuestionInputEditor {...$$props} />
-	{:else if $$props.type === QuestionType.RADIO_GROUP}
-		<RadioGroupQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.TEXTAREA}
 		<TextareaQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.DATE}
 		<DateQuestionInputEditor {...$$props} />
-	{:else if $$props.type === QuestionType.AVAILABILITY}
-		<AvailabilityQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.DATETIME}
 		<DatetimeQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.TIME}
-		<TimeQuestionInputEditor {...$$props} /> -->
+		<TimeQuestionInputEditor {...$$props} />
+		<!-- 
+	{:else if $$props.type === QuestionType.RADIO_GROUP}
+		<RadioGroupQuestionInputEditor {...$$props} />
+	
+	{:else if $$props.type === QuestionType.AVAILABILITY}
+		<AvailabilityQuestionInputEditor {...$$props} />
+	
+	 -->
 	{:else if $$props.type === QuestionType.SELECT}
 		<SelectQuestionInputEditor {...$$props} />
 	{/if}

From 281e6297f945216a1256c58fedb1f46649aba65a Mon Sep 17 00:00:00 2001
From: keillor <69380836+keillor@users.noreply.github.com>
Date: Thu, 11 Apr 2024 00:18:14 -0700
Subject: [PATCH 21/25] created time question input editor

---
 .../time/time_question_input_editor.svelte    | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/lib/components/questions/time/time_question_input_editor.svelte b/src/lib/components/questions/time/time_question_input_editor.svelte
index e69de29..726a8da 100644
--- a/src/lib/components/questions/time/time_question_input_editor.svelte
+++ b/src/lib/components/questions/time/time_question_input_editor.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { TimeQuestion } from '$lib/form';
+	import BaseEditor from '../base/base_editor.svelte';
+	import TimeQuestionInput from './time_question_input.svelte';
+
+	export let data = $$props as TimeQuestion;
+</script>
+
+<BaseEditor bind:data>
+	<fieldset>
+		<legend>Min Time</legend>
+		<input type="time" bind:value={data.min} />
+	</fieldset>
+	<fieldset>
+		<legend>Max Time</legend>
+		<input type="time" bind:value={data.max} />
+	</fieldset>
+	<fieldset>
+		<legend>Default Time</legend>
+		<input type="time" bind:value={data.value} />
+	</fieldset>
+	<details>
+		<summary>Sample</summary>
+		<div class="question">
+			<TimeQuestionInput bind:data />
+		</div>
+	</details>
+</BaseEditor>

From 72ad8263498647d8d6db971895146c60cc45cac9 Mon Sep 17 00:00:00 2001
From: keillor <69380836+keillor@users.noreply.github.com>
Date: Thu, 11 Apr 2024 00:29:59 -0700
Subject: [PATCH 22/25] fixed number input editor

---
 .../number_question_input_editor.svelte       | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/questions/number/number_question_input_editor.svelte b/src/lib/components/questions/number/number_question_input_editor.svelte
index 341fb0d..9bb232a 100644
--- a/src/lib/components/questions/number/number_question_input_editor.svelte
+++ b/src/lib/components/questions/number/number_question_input_editor.svelte
@@ -6,11 +6,26 @@
 </script>
 
 <BaseEditor bind:data>
-	<input type="number" bind:value={data.min} />
-	<input type="number" bind:value={data.max} />
-	<input type="number" bind:value={data.step} />
-	<input type="number" bind:value={data.value} />
-	<input type="text" bind:value={data.placeholder} />
+	<fieldset>
+		<legend>Min</legend>
+		<input type="number" bind:value={data.min} />
+	</fieldset>
+	<fieldset>
+		<legend>Max</legend>
+		<input type="number" bind:value={data.max} />
+	</fieldset>
+	<fieldset>
+		<legend>Step by</legend>
+		<input type="number" bind:value={data.step} />
+	</fieldset>
+	<fieldset>
+		<legend>Default Value</legend>
+		<input type="number" bind:value={data.value} />
+	</fieldset>
+	<fieldset>
+		<legend>Placeholder</legend>
+		<input type="number" bind:value={data.placeholder} />
+	</fieldset>
 	<details>
 		<summary>Sample</summary>
 		<NumberQuestionInput bind:data />

From 8b00d82471ec1bdd0ccb957b696c0e7159a91403 Mon Sep 17 00:00:00 2001
From: Alexander Peras <128564378+AlexthePear@users.noreply.github.com>
Date: Thu, 11 Apr 2024 21:25:19 -0700
Subject: [PATCH 23/25] WIP

---
 .../number_question_input_editor.svelte       | 29 +++++++++++++++----
 .../select_question_input_editor.svelte       |  6 ++--
 .../timezone_question_input_editor.svelte     | 18 ++++++++++++
 3 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/questions/number/number_question_input_editor.svelte b/src/lib/components/questions/number/number_question_input_editor.svelte
index 341fb0d..33a3389 100644
--- a/src/lib/components/questions/number/number_question_input_editor.svelte
+++ b/src/lib/components/questions/number/number_question_input_editor.svelte
@@ -6,11 +6,30 @@
 </script>
 
 <BaseEditor bind:data>
-	<input type="number" bind:value={data.min} />
-	<input type="number" bind:value={data.max} />
-	<input type="number" bind:value={data.step} />
-	<input type="number" bind:value={data.value} />
-	<input type="text" bind:value={data.placeholder} />
+	<!--Copied from number_question_input -->
+	<fieldset>
+		<legend>min</legend>
+		<input type="number" bind:value={data.min} />
+	</fieldset>
+	<fieldset>
+		<legend>max</legend>
+		<input type="number" bind:value={data.max} />
+	</fieldset>
+
+	<fieldset>
+		<legend>step</legend>
+		<input type="number" bind:value={data.step} />
+	</fieldset>
+
+	<fieldset>
+		<legend>Defualt value</legend>
+		<input type="number" bind:value={data.value} />
+	</fieldset>
+	<fieldset>
+		<legend>placeholder</legend>
+		<input type="text" bind:value={data.placeholder} />
+	</fieldset>
+
 	<details>
 		<summary>Sample</summary>
 		<NumberQuestionInput bind:data />
diff --git a/src/lib/components/questions/select/select_question_input_editor.svelte b/src/lib/components/questions/select/select_question_input_editor.svelte
index 40cb71c..d14b040 100644
--- a/src/lib/components/questions/select/select_question_input_editor.svelte
+++ b/src/lib/components/questions/select/select_question_input_editor.svelte
@@ -46,5 +46,7 @@
 		bind:value={option.content}
 	/> <br />
 {/each}
-
-<SelectQuestionInput {data} />
+<details>
+	<summary>Sample</summary>
+	<SelectQuestionInput {data} />
+</details>
diff --git a/src/lib/components/questions/timezone/timezone_question_input_editor.svelte b/src/lib/components/questions/timezone/timezone_question_input_editor.svelte
index e69de29..2c542c3 100644
--- a/src/lib/components/questions/timezone/timezone_question_input_editor.svelte
+++ b/src/lib/components/questions/timezone/timezone_question_input_editor.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { TimezoneQuestion } from '$lib/form';
+	import { TIMEZONES } from '$lib/timezones';
+	import BaseEditor from '../base/base_editor.svelte';
+	import TimezoneQuestionInput from './timezone_question_input.svelte';
+	export let data = $$props as TimezoneQuestion;
+</script>
+
+<BaseEditor bind:data>
+	<fieldset>
+		<legend>Defualt Timezone ID</legend>
+		<input type="text" bind:value={data.value} />
+	</fieldset>
+	<details>
+		<summary> Time </summary>
+		<TimezoneQuestionInput bind:data />
+	</details>
+</BaseEditor>

From e46e8f42625aedbcfbfe607a3ef3db934b7ea041 Mon Sep 17 00:00:00 2001
From: Alexander Peras <128564378+AlexthePear@users.noreply.github.com>
Date: Thu, 11 Apr 2024 16:23:45 -0700
Subject: [PATCH 24/25] Fixed error with timezone_question_input still using
 data.defualt instead of data.value

---
 .../questions/timezone/timezone_question_input.svelte           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/questions/timezone/timezone_question_input.svelte b/src/lib/components/questions/timezone/timezone_question_input.svelte
index 1d341d6..077e22d 100644
--- a/src/lib/components/questions/timezone/timezone_question_input.svelte
+++ b/src/lib/components/questions/timezone/timezone_question_input.svelte
@@ -12,7 +12,7 @@
 
 <fieldset>
 	<legend>{data.content}</legend>
-	<select name={data.name} required={data.required} value={data.default || localTimezoneID}>
+	<select name={data.name} required={data.required} value={data.value || localTimezoneID}>
 		{#each TIMEZONES as choice}
 			<option value={choice.id}>{choice.text}</option>
 		{/each}

From 6d26cdb66e60196e6cca8a1ab09e8e02ed85ea27 Mon Sep 17 00:00:00 2001
From: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date: Thu, 11 Apr 2024 17:17:55 -0700
Subject: [PATCH 25/25] make list input reactive

---
 .../form_editor/question_list_editor/add_item.svelte          | 3 ++-
 src/lib/components/list_input/list_input.svelte               | 4 ++--
 src/lib/components/question_input/question_input.svelte       | 4 ++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/form_editor/question_list_editor/add_item.svelte b/src/lib/components/form_editor/question_list_editor/add_item.svelte
index 25065c6..2ef8229 100644
--- a/src/lib/components/form_editor/question_list_editor/add_item.svelte
+++ b/src/lib/components/form_editor/question_list_editor/add_item.svelte
@@ -8,8 +8,9 @@
 
 	function add(e: MouseEvent) {
 		e.preventDefault();
+		const data = { type };
 		// TODO: Add a helper function to create a blank question object for each type.
-		addAction({ type });
+		addAction(data);
 	}
 
 	// function makeDefault(type: QuestionType): Question {
diff --git a/src/lib/components/list_input/list_input.svelte b/src/lib/components/list_input/list_input.svelte
index c65a1f7..b21cd32 100644
--- a/src/lib/components/list_input/list_input.svelte
+++ b/src/lib/components/list_input/list_input.svelte
@@ -5,11 +5,11 @@
 	export let value: ItemProps[] = [];
 
 	function deleteItem(i: number): void {
-		value.splice(i, 1);
+		value = value.filter((_, index) => index !== i);
 	}
 
 	function addItem(item: ItemProps): void {
-		value.push(item);
+		value = [...value, item];
 	}
 
 	// TODO: Make sortable items.
diff --git a/src/lib/components/question_input/question_input.svelte b/src/lib/components/question_input/question_input.svelte
index c89e435..e5bf2bd 100644
--- a/src/lib/components/question_input/question_input.svelte
+++ b/src/lib/components/question_input/question_input.svelte
@@ -6,7 +6,7 @@
 	import DateQuestionInput from '$lib/components/questions/date/date_question_input.svelte';
 	import DatetimeQuestionInput from '$lib/components/questions/datetime/datetime_question_input.svelte';
 	import NumberQuestionInput from '$lib/components/questions/number/number_question_input.svelte';
-	import RadioGroupQuestionInput from '$lib/components/questions/radio_group/radio_group_question_input.svelte';
+	import SingleTextSelectQuestionInput from '$lib/components/questions/radio_group/radio_group_question_input.svelte';
 	import TextQuestionInput from '$lib/components/questions/text/text_question_input.svelte';
 	import TextareaQuestionInput from '$lib/components/questions/textarea/textarea_question_input.svelte';
 	import TimeQuestionInput from '$lib/components/questions/time/time_question_input.svelte';
@@ -19,7 +19,7 @@
 	{:else if $$props.type === QuestionType.TEXT}
 		<TextQuestionInput {...$$props} />
 	{:else if $$props.type === QuestionType.RADIO_GROUP}
-		<RadioGroupQuestionInput {...$$props} />
+		<SingleTextSelectQuestionInput {...$$props} />
 	{:else if $$props.type === QuestionType.NUMBER}
 		<NumberQuestionInput {...$$props} />
 	{:else if $$props.type === QuestionType.COLOR}