@d34dman/flowdrop 0.0.22 → 0.0.24

package/dist/components/form/FormTextarea.svelte

@@ -0,0 +1,94 @@
+<!--
+  FormTextarea Component
+  Multiline text input field for longer string values
+  
+  Features:
+  - Resizable textarea with minimum height
+  - Focus and hover states
+  - Proper ARIA attributes for accessibility
+-->
+
+<script lang="ts">
+	interface Props {
+		/** Field identifier */
+		id: string;
+		/** Current value */
+		value: string;
+		/** Placeholder text */
+		placeholder?: string;
+		/** Number of visible rows */
+		rows?: number;
+		/** Whether the field is required */
+		required?: boolean;
+		/** ARIA description ID */
+		ariaDescribedBy?: string;
+		/** Callback when value changes */
+		onChange: (value: string) => void;
+	}
+
+	let {
+		id,
+		value = "",
+		placeholder = "",
+		rows = 4,
+		required = false,
+		ariaDescribedBy,
+		onChange
+	}: Props = $props();
+
+	/**
+	 * Handle textarea changes
+	 */
+	function handleInput(event: Event): void {
+		const target = event.currentTarget as HTMLTextAreaElement;
+		onChange(target.value);
+	}
+</script>
+
+<textarea
+	{id}
+	class="form-textarea"
+	value={value ?? ""}
+	{placeholder}
+	{rows}
+	aria-describedby={ariaDescribedBy}
+	aria-required={required}
+	oninput={handleInput}
+></textarea>
+
+<style>
+	.form-textarea {
+		width: 100%;
+		padding: 0.625rem 0.875rem;
+		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
+		border-radius: 0.5rem;
+		font-size: 0.875rem;
+		font-family: inherit;
+		color: var(--color-ref-gray-900, #111827);
+		background-color: var(--color-ref-gray-50, #f9fafb);
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+		resize: vertical;
+		min-height: 5rem;
+		line-height: 1.5;
+	}
+
+	.form-textarea::placeholder {
+		color: var(--color-ref-gray-400, #9ca3af);
+	}
+
+	.form-textarea:hover {
+		border-color: var(--color-ref-gray-300, #d1d5db);
+		background-color: #ffffff;
+	}
+
+	.form-textarea:focus {
+		outline: none;
+		border-color: var(--color-ref-blue-500, #3b82f6);
+		background-color: #ffffff;
+		box-shadow:
+			0 0 0 3px rgba(59, 130, 246, 0.12),
+			0 1px 2px rgba(0, 0, 0, 0.04);
+	}
+</style>
+

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

@@ -0,0 +1,19 @@
+interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current value */
+    value: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Number of visible rows */
+    rows?: number;
+    /** Whether the field is required */
+    required?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+}
+declare const FormTextarea: import("svelte").Component<Props, {}, "">;
+type FormTextarea = ReturnType<typeof FormTextarea>;
+export default FormTextarea;

package/dist/components/form/FormToggle.svelte

@@ -0,0 +1,123 @@
+<!--
+  FormToggle Component
+  Toggle switch for boolean values
+  
+  Features:
+  - Smooth toggle animation
+  - On/Off labels with state-based coloring
+  - Focus-visible states for keyboard navigation
+-->
+
+<script lang="ts">
+	interface Props {
+		/** Field identifier */
+		id: string;
+		/** Current value */
+		value: boolean;
+		/** Label shown when toggle is on */
+		onLabel?: string;
+		/** Label shown when toggle is off */
+		offLabel?: string;
+		/** ARIA description ID */
+		ariaDescribedBy?: string;
+		/** Callback when value changes */
+		onChange: (value: boolean) => void;
+	}
+
+	let {
+		id,
+		value = false,
+		onLabel = "Enabled",
+		offLabel = "Disabled",
+		ariaDescribedBy,
+		onChange
+	}: Props = $props();
+
+	/**
+	 * Handle toggle changes
+	 */
+	function handleChange(event: Event): void {
+		const target = event.currentTarget as HTMLInputElement;
+		onChange(target.checked);
+	}
+</script>
+
+<label class="form-toggle">
+	<input
+		{id}
+		type="checkbox"
+		class="form-toggle__input"
+		checked={value}
+		aria-describedby={ariaDescribedBy}
+		onchange={handleChange}
+	/>
+	<span class="form-toggle__track">
+		<span class="form-toggle__thumb"></span>
+	</span>
+	<span class="form-toggle__label">
+		{value ? onLabel : offLabel}
+	</span>
+</label>
+
+<style>
+	.form-toggle {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		cursor: pointer;
+		padding: 0.5rem 0;
+	}
+
+	.form-toggle__input {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.form-toggle__track {
+		position: relative;
+		width: 2.75rem;
+		height: 1.5rem;
+		background-color: var(--color-ref-gray-300, #d1d5db);
+		border-radius: 0.75rem;
+		transition: background-color 0.2s;
+		flex-shrink: 0;
+	}
+
+	.form-toggle__thumb {
+		position: absolute;
+		top: 0.125rem;
+		left: 0.125rem;
+		width: 1.25rem;
+		height: 1.25rem;
+		background-color: #ffffff;
+		border-radius: 50%;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+		transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.form-toggle__input:checked + .form-toggle__track {
+		background-color: var(--color-ref-blue-500, #3b82f6);
+	}
+
+	.form-toggle__input:checked + .form-toggle__track .form-toggle__thumb {
+		transform: translateX(1.25rem);
+	}
+
+	.form-toggle__input:focus-visible + .form-toggle__track {
+		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+	}
+
+	.form-toggle__label {
+		font-size: 0.875rem;
+		color: var(--color-ref-gray-600, #4b5563);
+		font-weight: 500;
+		min-width: 4.5rem;
+	}
+
+	.form-toggle__input:checked ~ .form-toggle__label {
+		color: var(--color-ref-blue-600, #2563eb);
+	}
+</style>
+

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

@@ -0,0 +1,17 @@
+interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current value */
+    value: boolean;
+    /** Label shown when toggle is on */
+    onLabel?: string;
+    /** Label shown when toggle is off */
+    offLabel?: string;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: boolean) => void;
+}
+declare const FormToggle: import("svelte").Component<Props, {}, "">;
+type FormToggle = ReturnType<typeof FormToggle>;
+export default FormToggle;

package/dist/components/form/index.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Form Components Module
+ *
+ * Modular form components for dynamic form rendering based on JSON Schema.
+ * Designed for extensibility to support complex types like arrays and objects.
+ *
+ * @module form
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { FormField } from "./";
+ *   import type { FieldSchema } from "./";
+ *
+ *   const schema: FieldSchema = {
+ *     type: "string",
+ *     title: "Name",
+ *     description: "Enter your name"
+ *   };
+ *
+ *   let value = $state("");
+ * </script>
+ *
+ * <FormField
+ *   fieldKey="name"
+ *   {schema}
+ *   {value}
+ *   onChange={(v) => value = v}
+ * />
+ * ```
+ */
+export * from "./types.js";
+export { default as FormField } from "./FormField.svelte";
+export { default as FormFieldWrapper } from "./FormFieldWrapper.svelte";
+export { default as FormTextField } from "./FormTextField.svelte";
+export { default as FormTextarea } from "./FormTextarea.svelte";
+export { default as FormNumberField } from "./FormNumberField.svelte";
+export { default as FormRangeField } from "./FormRangeField.svelte";
+export { default as FormToggle } from "./FormToggle.svelte";
+export { default as FormSelect } from "./FormSelect.svelte";
+export { default as FormCheckboxGroup } from "./FormCheckboxGroup.svelte";
+export { default as FormArray } from "./FormArray.svelte";

package/dist/components/form/index.js

@@ -0,0 +1,46 @@
+/**
+ * Form Components Module
+ *
+ * Modular form components for dynamic form rendering based on JSON Schema.
+ * Designed for extensibility to support complex types like arrays and objects.
+ *
+ * @module form
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { FormField } from "./";
+ *   import type { FieldSchema } from "./";
+ *
+ *   const schema: FieldSchema = {
+ *     type: "string",
+ *     title: "Name",
+ *     description: "Enter your name"
+ *   };
+ *
+ *   let value = $state("");
+ * </script>
+ *
+ * <FormField
+ *   fieldKey="name"
+ *   {schema}
+ *   {value}
+ *   onChange={(v) => value = v}
+ * />
+ * ```
+ */
+// Types
+export * from "./types.js";
+// Main factory component
+export { default as FormField } from "./FormField.svelte";
+// Wrapper component
+export { default as FormFieldWrapper } from "./FormFieldWrapper.svelte";
+// Individual field components
+export { default as FormTextField } from "./FormTextField.svelte";
+export { default as FormTextarea } from "./FormTextarea.svelte";
+export { default as FormNumberField } from "./FormNumberField.svelte";
+export { default as FormRangeField } from "./FormRangeField.svelte";
+export { default as FormToggle } from "./FormToggle.svelte";
+export { default as FormSelect } from "./FormSelect.svelte";
+export { default as FormCheckboxGroup } from "./FormCheckboxGroup.svelte";
+export { default as FormArray } from "./FormArray.svelte";

package/dist/components/form/types.d.ts

@@ -0,0 +1,224 @@
+/**
+ * Form Field Types
+ * Shared types for form components in the FlowDrop workflow editor
+ *
+ * These types provide a foundation for dynamic form rendering based on JSON Schema
+ * and support extensibility for complex field types like arrays and objects.
+ */
+/**
+ * Supported field types for form rendering
+ * Can be extended to support complex types like 'array' and 'object'
+ */
+export type FieldType = "string" | "number" | "integer" | "boolean" | "select" | "array" | "object";
+/**
+ * Field format for specialized rendering
+ * - multiline: Renders as textarea
+ * - hidden: Field is hidden from UI but included in form submission
+ * - range: Renders as range slider for numeric values
+ */
+export type FieldFormat = "multiline" | "hidden" | "range" | string;
+/**
+ * Option type for select and checkbox group fields
+ */
+export interface FieldOption {
+    /** The value stored when this option is selected */
+    value: string;
+    /** The display label for this option */
+    label: string;
+}
+/**
+ * Base properties shared by all form fields
+ */
+export interface BaseFieldProps {
+    /** Unique identifier for the field (used for id and name attributes) */
+    id: string;
+    /** Current value of the field */
+    value: unknown;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Placeholder text for input fields */
+    placeholder?: string;
+    /** ARIA description ID for accessibility */
+    ariaDescribedBy?: string;
+    /** Callback when the field value changes */
+    onChange: (value: unknown) => void;
+}
+/**
+ * Properties for text input fields
+ */
+export interface TextFieldProps extends BaseFieldProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+/**
+ * Properties for multiline text fields (textarea)
+ */
+export interface TextareaFieldProps extends BaseFieldProps {
+    value: string;
+    /** Number of visible rows */
+    rows?: number;
+    onChange: (value: string) => void;
+}
+/**
+ * Properties for number input fields
+ */
+export interface NumberFieldProps extends BaseFieldProps {
+    value: number | string;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Step increment for the input */
+    step?: number;
+    onChange: (value: number | string) => void;
+}
+/**
+ * Properties for boolean toggle fields
+ */
+export interface ToggleFieldProps extends BaseFieldProps {
+    value: boolean;
+    /** Label shown when toggle is on */
+    onLabel?: string;
+    /** Label shown when toggle is off */
+    offLabel?: string;
+    onChange: (value: boolean) => void;
+}
+/**
+ * Properties for range slider fields
+ */
+export interface RangeFieldProps extends BaseFieldProps {
+    value: number | string;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Step increment for the slider */
+    step?: number;
+    onChange: (value: number) => void;
+}
+/**
+ * Properties for select dropdown fields
+ */
+export interface SelectFieldProps extends BaseFieldProps {
+    value: string;
+    /** Available options for selection */
+    options: FieldOption[] | string[];
+    onChange: (value: string) => void;
+}
+/**
+ * Properties for checkbox group fields (multiple selection)
+ */
+export interface CheckboxGroupFieldProps extends BaseFieldProps {
+    value: string[];
+    /** Available options for selection */
+    options: string[];
+    onChange: (value: string[]) => void;
+}
+/**
+ * Properties for array fields (dynamic lists)
+ */
+export interface ArrayFieldProps extends BaseFieldProps {
+    value: unknown[];
+    /** Schema for array items */
+    itemSchema: FieldSchema;
+    /** Minimum number of items required */
+    minItems?: number;
+    /** Maximum number of items allowed */
+    maxItems?: number;
+    /** Label for the add button */
+    addLabel?: string;
+    onChange: (value: unknown[]) => void;
+}
+/**
+ * Field schema definition derived from JSON Schema property
+ * Used to determine which field component to render
+ */
+export interface FieldSchema {
+    /** The field type from JSON Schema */
+    type: FieldType | string;
+    /** Display title for the field */
+    title?: string;
+    /** Description for help text */
+    description?: string;
+    /** Default value for the field */
+    default?: unknown;
+    /** Enum values for select/checkbox fields */
+    enum?: unknown[];
+    /** Whether multiple values can be selected */
+    multiple?: boolean;
+    /** Format hint for specialized rendering */
+    format?: FieldFormat;
+    /** Options for select type fields (alternative to enum) */
+    options?: FieldOption[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Minimum value for numbers */
+    minimum?: number;
+    /** Maximum value for numbers */
+    maximum?: number;
+    /** Step increment for number/range inputs */
+    step?: number;
+    /** Minimum length for strings */
+    minLength?: number;
+    /** Maximum length for strings */
+    maxLength?: number;
+    /** Validation pattern for strings */
+    pattern?: string;
+    /** Item schema for array fields */
+    items?: FieldSchema;
+    /** Minimum number of items for array fields */
+    minItems?: number;
+    /** Maximum number of items for array fields */
+    maxItems?: number;
+    /** Property schemas for object fields (future use) */
+    properties?: Record<string, FieldSchema>;
+    /** Required properties for object fields (future use) */
+    required?: string[];
+    /** Allow additional properties not defined by the schema */
+    [key: string]: unknown;
+}
+/**
+ * Props for the FormField factory component
+ * Renders the appropriate field component based on schema
+ */
+export interface FormFieldFactoryProps {
+    /** Unique key/id for the field */
+    fieldKey: string;
+    /** Field schema definition */
+    schema: FieldSchema;
+    /** Current field value */
+    value: unknown;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Animation delay index for staggered animations */
+    animationIndex?: number;
+    /** Callback when the field value changes */
+    onChange: (value: unknown) => void;
+}
+/**
+ * Props for the FormFieldWrapper component
+ * Provides label, description, and layout for field content
+ */
+export interface FormFieldWrapperProps {
+    /** Field identifier for label association */
+    id: string;
+    /** Display label text */
+    label: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Description/help text for the field */
+    description?: string;
+    /** Animation delay in milliseconds */
+    animationDelay?: number;
+}
+/**
+ * Type guard to check if options are FieldOption objects
+ */
+export declare function isFieldOptionArray(options: FieldOption[] | string[]): options is FieldOption[];
+/**
+ * Normalize options to FieldOption format
+ * Converts string arrays to FieldOption arrays for consistent handling
+ */
+export declare function normalizeOptions(options: FieldOption[] | string[] | unknown[]): FieldOption[];

package/dist/components/form/types.js

@@ -0,0 +1,29 @@
+/**
+ * Form Field Types
+ * Shared types for form components in the FlowDrop workflow editor
+ *
+ * These types provide a foundation for dynamic form rendering based on JSON Schema
+ * and support extensibility for complex field types like arrays and objects.
+ */
+/**
+ * Type guard to check if options are FieldOption objects
+ */
+export function isFieldOptionArray(options) {
+    return options.length > 0 && typeof options[0] === "object" && "value" in options[0];
+}
+/**
+ * Normalize options to FieldOption format
+ * Converts string arrays to FieldOption arrays for consistent handling
+ */
+export function normalizeOptions(options) {
+    if (!options || options.length === 0) {
+        return [];
+    }
+    if (isFieldOptionArray(options)) {
+        return options;
+    }
+    return options.map((opt) => ({
+        value: String(opt),
+        label: String(opt)
+    }));
+}