@d34dman/flowdrop 0.0.24 → 0.0.25

package/dist/components/form/FormField.svelte

@@ -5,33 +5,40 @@
   Features:
   - Automatically selects the correct field component based on schema
   - Wraps fields with FormFieldWrapper for consistent layout
-  - Supports all current field types (string, number, boolean, select, checkbox group, range)
+  - Supports all current field types (string, number, boolean, select, checkbox group, range, json, markdown, template)
   - Extensible architecture for future complex types (array, object)
   
   Type Resolution Order:
   1. format: 'hidden' -> skip rendering (return nothing)
-  2. enum with multiple: true -> FormCheckboxGroup
-  3. enum -> FormSelect
-  4. format: 'multiline' -> FormTextarea
-  5. format: 'range' (number/integer) -> FormRangeField
-  6. type: 'string' -> FormTextField
-  7. type: 'number' or 'integer' -> FormNumberField
-  8. type: 'boolean' -> FormToggle
-  9. type: 'select' or has options -> FormSelect
-  10. fallback -> FormTextField
+  2. format: 'json' or 'code' -> FormCodeEditor (CodeMirror JSON editor)
+  3. format: 'markdown' -> FormMarkdownEditor (SimpleMDE Markdown editor)
+  4. format: 'template' -> FormTemplateEditor (CodeMirror with Twig/Liquid syntax)
+  5. enum with multiple: true -> FormCheckboxGroup
+  6. enum -> FormSelect
+  7. format: 'multiline' -> FormTextarea
+  8. format: 'range' (number/integer) -> FormRangeField
+  9. type: 'string' -> FormTextField
+  10. type: 'number' or 'integer' -> FormNumberField
+  11. type: 'boolean' -> FormToggle
+  12. type: 'select' or has options -> FormSelect
+  13. type: 'object' (without format) -> FormCodeEditor (for JSON objects)
+  14. fallback -> FormTextField
 -->
 
 <script lang="ts">
-	import FormFieldWrapper from "./FormFieldWrapper.svelte";
-	import FormTextField from "./FormTextField.svelte";
-	import FormTextarea from "./FormTextarea.svelte";
-	import FormNumberField from "./FormNumberField.svelte";
-	import FormRangeField from "./FormRangeField.svelte";
-	import FormToggle from "./FormToggle.svelte";
-	import FormSelect from "./FormSelect.svelte";
-	import FormCheckboxGroup from "./FormCheckboxGroup.svelte";
-	import FormArray from "./FormArray.svelte";
-	import type { FieldSchema, FieldOption } from "./types.js";
+	import FormFieldWrapper from './FormFieldWrapper.svelte';
+	import FormTextField from './FormTextField.svelte';
+	import FormTextarea from './FormTextarea.svelte';
+	import FormNumberField from './FormNumberField.svelte';
+	import FormRangeField from './FormRangeField.svelte';
+	import FormToggle from './FormToggle.svelte';
+	import FormSelect from './FormSelect.svelte';
+	import FormCheckboxGroup from './FormCheckboxGroup.svelte';
+	import FormArray from './FormArray.svelte';
+	import FormCodeEditor from './FormCodeEditor.svelte';
+	import FormMarkdownEditor from './FormMarkdownEditor.svelte';
+	import FormTemplateEditor from './FormTemplateEditor.svelte';
+	import type { FieldSchema, FieldOption } from './types.js';
 
 	interface Props {
 		/** Unique key/id for the field */
@@ -48,19 +55,14 @@
 		onChange: (value: unknown) => void;
 	}
 
-	let {
-		fieldKey,
-		schema,
-		value,
-		required = false,
-		animationIndex = 0,
-		onChange
-	}: Props = $props();
+	let { fieldKey, schema, value, required = false, animationIndex = 0, onChange }: Props = $props();
 
 	/**
 	 * Computed description ID for ARIA association
 	 */
-	const descriptionId = $derived(schema.description && schema.title ? `${fieldKey}-description` : undefined);
+	const descriptionId = $derived(
+		schema.description && schema.title ? `${fieldKey}-description` : undefined
+	);
 
 	/**
 	 * Animation delay based on index
@@ -77,62 +79,77 @@
 	 */
 	const fieldType = $derived.by(() => {
 		// Hidden fields should not be rendered
-		if (schema.format === "hidden") {
-			return "hidden";
+		if (schema.format === 'hidden') {
+			return 'hidden';
+		}
+
+		// JSON/code editor for format: "json" or "code"
+		if (schema.format === 'json' || schema.format === 'code') {
+			return 'code-editor';
+		}
+
+		// Markdown editor for format: "markdown"
+		if (schema.format === 'markdown') {
+			return 'markdown-editor';
+		}
+
+		// Template editor for format: "template" (Twig/Liquid syntax)
+		if (schema.format === 'template') {
+			return 'template-editor';
 		}
 
 		// Enum with multiple selection -> checkbox group
 		if (schema.enum && schema.multiple) {
-			return "checkbox-group";
+			return 'checkbox-group';
 		}
 
 		// Enum with single selection -> select
 		if (schema.enum) {
-			return "select-enum";
+			return 'select-enum';
 		}
 
 		// Multiline string -> textarea
-		if (schema.type === "string" && schema.format === "multiline") {
-			return "textarea";
+		if (schema.type === 'string' && schema.format === 'multiline') {
+			return 'textarea';
 		}
 
 		// Range slider for number/integer with format: "range"
-		if ((schema.type === "number" || schema.type === "integer") && schema.format === "range") {
-			return "range";
+		if ((schema.type === 'number' || schema.type === 'integer') && schema.format === 'range') {
+			return 'range';
 		}
 
 		// String -> text field
-		if (schema.type === "string") {
-			return "text";
+		if (schema.type === 'string') {
+			return 'text';
 		}
 
 		// Number or integer -> number field
-		if (schema.type === "number" || schema.type === "integer") {
-			return "number";
+		if (schema.type === 'number' || schema.type === 'integer') {
+			return 'number';
 		}
 
 		// Boolean -> toggle
-		if (schema.type === "boolean") {
-			return "toggle";
+		if (schema.type === 'boolean') {
+			return 'toggle';
 		}
 
 		// Select type or has options -> select
-		if (schema.type === "select" || schema.options) {
-			return "select-options";
+		if (schema.type === 'select' || schema.options) {
+			return 'select-options';
 		}
 
 		// Future: Array type support
-		if (schema.type === "array") {
-			return "array";
+		if (schema.type === 'array') {
+			return 'array';
 		}
 
-		// Future: Object type support
-		if (schema.type === "object") {
-			return "object";
+		// Object type without specific format -> CodeMirror JSON editor
+		if (schema.type === 'object') {
+			return 'code-editor';
 		}
 
 		// Fallback to text
-		return "text";
+		return 'text';
 	});
 
 	/**
@@ -154,7 +171,7 @@
 	/**
 	 * Get current value as the appropriate type
 	 */
-	const stringValue = $derived(String(value ?? ""));
+	const stringValue = $derived(String(value ?? ''));
 	const numberValue = $derived(value as number | string);
 	const booleanValue = $derived(Boolean(value ?? schema.default ?? false));
 	const arrayValue = $derived.by((): string[] => {
@@ -171,7 +188,7 @@
 	});
 </script>
 
-{#if fieldType !== "hidden"}
+{#if fieldType !== 'hidden'}
 	<FormFieldWrapper
 		id={fieldKey}
 		label={fieldLabel}
@@ -179,7 +196,7 @@
 		description={schema.title ? schema.description : undefined}
 		{animationDelay}
 	>
-		{#if fieldType === "checkbox-group"}
+		{#if fieldType === 'checkbox-group'}
 			<FormCheckboxGroup
 				id={fieldKey}
 				value={arrayValue}
@@ -187,7 +204,7 @@
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "select-enum"}
+		{:else if fieldType === 'select-enum'}
 			<FormSelect
 				id={fieldKey}
 				value={stringValue}
@@ -196,36 +213,36 @@
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "textarea"}
+		{:else if fieldType === 'textarea'}
 			<FormTextarea
 				id={fieldKey}
 				value={stringValue}
-				placeholder={schema.placeholder ?? ""}
+				placeholder={schema.placeholder ?? ''}
 				{required}
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "text"}
+		{:else if fieldType === 'text'}
 			<FormTextField
 				id={fieldKey}
 				value={stringValue}
-				placeholder={schema.placeholder ?? ""}
+				placeholder={schema.placeholder ?? ''}
 				{required}
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "number"}
+		{:else if fieldType === 'number'}
 			<FormNumberField
 				id={fieldKey}
 				value={numberValue}
-				placeholder={schema.placeholder ?? ""}
+				placeholder={schema.placeholder ?? ''}
 				min={schema.minimum}
 				max={schema.maximum}
 				{required}
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "range"}
+		{:else if fieldType === 'range'}
 			<FormRangeField
 				id={fieldKey}
 				value={numberValue}
@@ -236,14 +253,14 @@
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "toggle"}
+		{:else if fieldType === 'toggle'}
 			<FormToggle
 				id={fieldKey}
 				value={booleanValue}
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "select-options"}
+		{:else if fieldType === 'select-options'}
 			<FormSelect
 				id={fieldKey}
 				value={stringValue}
@@ -252,27 +269,62 @@
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "array" && schema.items}
+		{:else if fieldType === 'array' && schema.items}
 			<FormArray
 				id={fieldKey}
 				value={arrayItems}
 				itemSchema={schema.items}
 				minItems={schema.minItems}
 				maxItems={schema.maxItems}
-				addLabel={`Add ${schema.items.title ?? "Item"}`}
+				addLabel={`Add ${schema.items.title ?? 'Item'}`}
+				onChange={(val) => onChange(val)}
+			/>
+		{:else if fieldType === 'code-editor'}
+			<FormCodeEditor
+				id={fieldKey}
+				{value}
+				placeholder={schema.placeholder ?? '{}'}
+				{required}
+				height={(schema.height as string | undefined) ?? '200px'}
+				darkTheme={(schema.darkTheme as boolean | undefined) ?? false}
+				autoFormat={(schema.autoFormat as boolean | undefined) ?? true}
+				ariaDescribedBy={descriptionId}
+				onChange={(val) => onChange(val)}
+			/>
+		{:else if fieldType === 'markdown-editor'}
+			<FormMarkdownEditor
+				id={fieldKey}
+				value={stringValue}
+				placeholder={schema.placeholder ?? 'Write your markdown here...'}
+				{required}
+				height={(schema.height as string | undefined) ?? '300px'}
+				showToolbar={(schema.showToolbar as boolean | undefined) ?? true}
+				showStatusBar={(schema.showStatusBar as boolean | undefined) ?? true}
+				spellChecker={(schema.spellChecker as boolean | undefined) ?? false}
+				ariaDescribedBy={descriptionId}
+				onChange={(val) => onChange(val)}
+			/>
+		{:else if fieldType === 'template-editor'}
+			<FormTemplateEditor
+				id={fieldKey}
+				value={stringValue}
+				placeholder={schema.placeholder ??
+					'Enter your template here...\nUse {{ variable }} for dynamic values.'}
+				{required}
+				height={(schema.height as string | undefined) ?? '250px'}
+				darkTheme={(schema.darkTheme as boolean | undefined) ?? false}
+				variableHints={(schema.variableHints as string[] | undefined) ?? []}
+				placeholderExample={(schema.placeholderExample as string | undefined) ??
+					'Hello {{ name }}, your order #{{ order_id }} is ready!'}
+				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "object"}
-			<!-- Future: Object field component -->
-			<div class="form-field__unsupported">
-				<p>Object fields are not yet supported. Coming soon!</p>
-			</div>
 		{:else}
 			<!-- Fallback to text input -->
 			<FormTextField
 				id={fieldKey}
 				value={stringValue}
-				placeholder={schema.placeholder ?? ""}
+				placeholder={schema.placeholder ?? ''}
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
@@ -294,4 +346,3 @@
 		margin: 0;
 	}
 </style>
-

package/dist/components/form/FormField.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FieldSchema } from "./types.js";
+import type { FieldSchema } from './types.js';
 interface Props {
     /** Unique key/id for the field */
     fieldKey: string;