@flowdrop/flowdrop 1.0.0

package/dist/components/form/FormUISchemaRenderer.svelte

@@ -0,0 +1,136 @@
+<!--
+  FormUISchemaRenderer Component
+  Recursively renders UISchema elements: VerticalLayout, Group, and Control.
+
+  This component bridges the UISchema tree and the existing FormField components.
+  It resolves Control scopes to property keys and delegates field rendering to FormField.
+
+  Rendering logic:
+  - Control -> resolve scope to key, render FormField
+  - VerticalLayout -> vertical flex container with recursive children
+  - Group -> FormFieldset wrapping recursive children
+-->
+
+<script lang="ts">
+	import type { UISchemaElement } from '../../types/uischema.js';
+	import type { ConfigSchema, WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
+	import type { FieldSchema } from './types.js';
+	import { resolveScopeToKey } from '../../utils/uischema.js';
+	import FormField from './FormField.svelte';
+	import FormFieldset from './FormFieldset.svelte';
+	import Self from './FormUISchemaRenderer.svelte';
+
+	interface Props {
+		/** The UISchema element to render */
+		element: UISchemaElement;
+		/** The data schema (for resolving field definitions) */
+		schema: ConfigSchema;
+		/** Current form values */
+		values: Record<string, unknown>;
+		/** Required field keys from the schema */
+		requiredFields?: string[];
+		/** Base animation index for staggered animations */
+		animationIndexBase?: number;
+		/** Callback when a field value changes */
+		onFieldChange: (key: string, value: unknown) => void;
+		/** Convert a property to FieldSchema (handles template variable injection etc.) */
+		toFieldSchema: (property: Record<string, unknown>) => FieldSchema;
+		/** Current workflow node (optional, passed through to FormField) */
+		node?: WorkflowNode;
+		/** All workflow nodes (optional, passed through to FormField) */
+		nodes?: WorkflowNode[];
+		/** All workflow edges (optional, passed through to FormField) */
+		edges?: WorkflowEdge[];
+		/** Workflow ID (optional, passed through to FormField) */
+		workflowId?: string;
+		/** Auth provider (optional, passed through to FormField) */
+		authProvider?: AuthProvider;
+	}
+
+	let {
+		element,
+		schema,
+		values,
+		requiredFields = [],
+		animationIndexBase = 0,
+		onFieldChange,
+		toFieldSchema,
+		node,
+		nodes,
+		edges,
+		workflowId,
+		authProvider
+	}: Props = $props();
+
+	function isRequired(key: string): boolean {
+		return requiredFields.includes(key);
+	}
+</script>
+
+{#if element.type === 'Control'}
+	{@const key = resolveScopeToKey(element.scope)}
+	{#if key && schema.properties[key]}
+		{@const fieldSchema = toFieldSchema(schema.properties[key] as Record<string, unknown>)}
+		<FormField
+			fieldKey={key}
+			schema={fieldSchema}
+			value={values[key]}
+			required={isRequired(key)}
+			animationIndex={animationIndexBase}
+			{node}
+			{nodes}
+			{edges}
+			{workflowId}
+			{authProvider}
+			onChange={(val) => onFieldChange(key, val)}
+		/>
+	{/if}
+{:else if element.type === 'VerticalLayout'}
+	<div class="form-uischema-layout form-uischema-layout--vertical">
+		{#each element.elements as child, idx (idx)}
+			<Self
+				element={child}
+				{schema}
+				{values}
+				{requiredFields}
+				animationIndexBase={animationIndexBase + idx}
+				{onFieldChange}
+				{toFieldSchema}
+				{node}
+				{nodes}
+				{edges}
+				{workflowId}
+				{authProvider}
+			/>
+		{/each}
+	</div>
+{:else if element.type === 'Group'}
+	<FormFieldset group={element}>
+		<div class="form-uischema-layout form-uischema-layout--vertical">
+			{#each element.elements as child, idx (idx)}
+				<Self
+					element={child}
+					{schema}
+					{values}
+					{requiredFields}
+					animationIndexBase={animationIndexBase + idx}
+					{onFieldChange}
+					{toFieldSchema}
+					{node}
+					{nodes}
+					{edges}
+					{workflowId}
+					{authProvider}
+				/>
+			{/each}
+		</div>
+	</FormFieldset>
+{/if}
+
+<style>
+	.form-uischema-layout--vertical {
+		display: flex;
+		flex-direction: column;
+		gap: var(--fd-space-2xl);
+	}
+</style>

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

@@ -0,0 +1,32 @@
+import type { UISchemaElement } from '../../types/uischema.js';
+import type { ConfigSchema, WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
+import type { FieldSchema } from './types.js';
+interface Props {
+    /** The UISchema element to render */
+    element: UISchemaElement;
+    /** The data schema (for resolving field definitions) */
+    schema: ConfigSchema;
+    /** Current form values */
+    values: Record<string, unknown>;
+    /** Required field keys from the schema */
+    requiredFields?: string[];
+    /** Base animation index for staggered animations */
+    animationIndexBase?: number;
+    /** Callback when a field value changes */
+    onFieldChange: (key: string, value: unknown) => void;
+    /** Convert a property to FieldSchema (handles template variable injection etc.) */
+    toFieldSchema: (property: Record<string, unknown>) => FieldSchema;
+    /** Current workflow node (optional, passed through to FormField) */
+    node?: WorkflowNode;
+    /** All workflow nodes (optional, passed through to FormField) */
+    nodes?: WorkflowNode[];
+    /** All workflow edges (optional, passed through to FormField) */
+    edges?: WorkflowEdge[];
+    /** Workflow ID (optional, passed through to FormField) */
+    workflowId?: string;
+    /** Auth provider (optional, passed through to FormField) */
+    authProvider?: AuthProvider;
+}
+declare const FormUISchemaRenderer: import("svelte").Component<Props, {}, "">;
+type FormUISchemaRenderer = ReturnType<typeof FormUISchemaRenderer>;
+export default FormUISchemaRenderer;

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

@@ -0,0 +1,50 @@
+/**
+ * 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 type { FieldType, FieldFormat, FieldOption, OneOfItem, BaseFieldProps, TextFieldProps, TextareaFieldProps, NumberFieldProps, ToggleFieldProps, RangeFieldProps, SelectFieldProps, CheckboxGroupFieldProps, ArrayFieldProps, CodeEditorFieldProps, MarkdownEditorFieldProps, TemplateEditorFieldProps, AutocompleteFieldProps, FieldSchema, FormFieldFactoryProps, FormFieldWrapperProps, SchemaFormProps, AutocompleteConfig } from './types.js';
+export { isFieldOptionArray, isOneOfArray, oneOfToOptions, normalizeOptions, getSchemaOptions } 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';
+export { default as FormCodeEditor } from './FormCodeEditor.svelte';
+export { default as FormMarkdownEditor } from './FormMarkdownEditor.svelte';
+export { default as FormTemplateEditor } from './FormTemplateEditor.svelte';
+export { default as FormAutocomplete } from './FormAutocomplete.svelte';
+export { default as FormFieldset } from './FormFieldset.svelte';
+export { default as FormUISchemaRenderer } from './FormUISchemaRenderer.svelte';
+export { createTemplateAutocomplete } from './templateAutocomplete.js';

package/dist/components/form/index.js

@@ -0,0 +1,54 @@
+/**
+ * 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 { isFieldOptionArray, isOneOfArray, oneOfToOptions, normalizeOptions, getSchemaOptions } 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';
+export { default as FormCodeEditor } from './FormCodeEditor.svelte';
+export { default as FormMarkdownEditor } from './FormMarkdownEditor.svelte';
+export { default as FormTemplateEditor } from './FormTemplateEditor.svelte';
+export { default as FormAutocomplete } from './FormAutocomplete.svelte';
+// UISchema rendering components
+export { default as FormFieldset } from './FormFieldset.svelte';
+export { default as FormUISchemaRenderer } from './FormUISchemaRenderer.svelte';
+// Template autocomplete utilities
+export { createTemplateAutocomplete } from './templateAutocomplete.js';

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

@@ -0,0 +1,29 @@
+/**
+ * Template Variable Autocomplete Extension for CodeMirror
+ * Provides autocomplete suggestions for {{ variable }} syntax in template editors.
+ *
+ * Features:
+ * - Triggers on `{{` to show top-level variables
+ * - Triggers on `.` to show child properties for objects
+ * - Triggers on `[` to show array index options
+ * - Supports deep nesting (e.g., `user.address.city`)
+ *
+ * @module components/form/templateAutocomplete
+ */
+import type { Extension } from '@codemirror/state';
+import type { VariableSchema } from '../../types/index.js';
+/**
+ * Creates a CodeMirror extension for template variable autocomplete.
+ *
+ * @param schema - The variable schema containing available variables
+ * @returns A CodeMirror extension that provides autocomplete
+ *
+ * @example
+ * ```typescript
+ * const extensions = [
+ *   // ... other extensions
+ *   createTemplateAutocomplete(variableSchema)
+ * ];
+ * ```
+ */
+export declare function createTemplateAutocomplete(schema: VariableSchema): Extension;

package/dist/components/form/templateAutocomplete.js

@@ -0,0 +1,254 @@
+/**
+ * Template Variable Autocomplete Extension for CodeMirror
+ * Provides autocomplete suggestions for {{ variable }} syntax in template editors.
+ *
+ * Features:
+ * - Triggers on `{{` to show top-level variables
+ * - Triggers on `.` to show child properties for objects
+ * - Triggers on `[` to show array index options
+ * - Supports deep nesting (e.g., `user.address.city`)
+ *
+ * @module components/form/templateAutocomplete
+ */
+import { autocompletion } from '@codemirror/autocomplete';
+import { getChildVariables, getArrayIndexSuggestions, isArrayVariable, hasChildren } from '../../services/variableService.js';
+/**
+ * Icon type hints for different variable types in autocomplete dropdown.
+ */
+const TYPE_ICONS = {
+    string: '𝑆',
+    number: '#',
+    integer: '#',
+    float: '#',
+    boolean: '☑',
+    array: '[]',
+    object: '{}',
+    mixed: '⋯'
+};
+/**
+ * Extracts the current variable path being typed inside {{ }}.
+ * Returns null if cursor is not inside a template expression.
+ *
+ * @param text - The full document text
+ * @param pos - Current cursor position
+ * @returns Object with the path and start position, or null
+ *
+ * @example
+ * For text "Hello {{ user.name }}" with cursor after "user."
+ * Returns { path: "user.", startPos: 9 }
+ */
+function extractVariablePath(text, pos) {
+    // Look backwards from cursor to find the opening {{
+    let openBracePos = -1;
+    let searchPos = pos - 1;
+    while (searchPos >= 0) {
+        // Check for opening {{
+        if (text[searchPos] === '{' && searchPos > 0 && text[searchPos - 1] === '{') {
+            openBracePos = searchPos - 1;
+            break;
+        }
+        // Check for closing }} - means we're outside an expression
+        if (text[searchPos] === '}' && searchPos > 0 && text[searchPos - 1] === '}') {
+            return null;
+        }
+        searchPos--;
+    }
+    if (openBracePos === -1) {
+        return null;
+    }
+    // Check if there's a closing }} after cursor (still inside expression)
+    const afterCursor = text.slice(pos);
+    const closingMatch = afterCursor.match(/^\s*\}\}/);
+    const hasClosing = closingMatch !== null;
+    // Extract the content between {{ and cursor
+    const contentStart = openBracePos + 2;
+    const content = text.slice(contentStart, pos).trimStart();
+    return {
+        path: content,
+        startPos: contentStart +
+            (text.slice(contentStart, pos).length - text.slice(contentStart, pos).trimStart().length),
+        isInsideExpression: true
+    };
+}
+/**
+ * Determines the completion type based on the current input.
+ *
+ * @param path - The current variable path being typed
+ * @returns The type of completion to provide
+ */
+function getCompletionType(path) {
+    // Empty or only whitespace - show top-level variables
+    if (path.trim() === '') {
+        return { type: 'top-level' };
+    }
+    // Ends with [ - show array indices
+    if (path.endsWith('[')) {
+        const parentPath = path.slice(0, -1);
+        return { type: 'array-index', parentPath };
+    }
+    // Ends with . - show child properties
+    if (path.endsWith('.')) {
+        const parentPath = path.slice(0, -1);
+        return { type: 'property', parentPath };
+    }
+    // Otherwise, we're typing a variable name - show matching options
+    const lastDotIndex = path.lastIndexOf('.');
+    const lastBracketIndex = path.lastIndexOf('[');
+    const lastSeparator = Math.max(lastDotIndex, lastBracketIndex);
+    if (lastSeparator === -1) {
+        // Typing at top level
+        return { type: 'top-level' };
+    }
+    // Extract parent path based on separator
+    if (lastDotIndex > lastBracketIndex) {
+        // Last separator was a dot
+        return { type: 'property', parentPath: path.slice(0, lastDotIndex) };
+    }
+    else {
+        // Last separator was a bracket
+        return { type: 'array-index', parentPath: path.slice(0, lastBracketIndex) };
+    }
+}
+/**
+ * Converts a TemplateVariable to a CodeMirror Completion object.
+ *
+ * @param variable - The template variable
+ * @param prefix - Prefix to add to the completion label
+ * @returns A CodeMirror Completion object
+ */
+function variableToCompletion(variable, prefix = '') {
+    const icon = TYPE_ICONS[variable.type] ?? TYPE_ICONS.mixed;
+    const hasChildProps = variable.properties && Object.keys(variable.properties).length > 0;
+    const isArray = variable.type === 'array';
+    // Add indicator if variable can be drilled into
+    let suffix = '';
+    if (hasChildProps)
+        suffix = '.';
+    else if (isArray)
+        suffix = '[';
+    return {
+        label: `${prefix}${variable.name}`,
+        displayLabel: `${icon} ${variable.label ?? variable.name}${suffix ? ' ' + suffix : ''}`,
+        detail: variable.type,
+        info: variable.description,
+        type: 'variable',
+        boost: hasChildProps || isArray ? 1 : 0 // Boost drillable variables
+    };
+}
+/**
+ * Creates the completion source function for template variables.
+ *
+ * @param schema - The variable schema containing available variables
+ * @returns A completion source function for CodeMirror
+ */
+function createTemplateCompletionSource(schema) {
+    return (context) => {
+        const { state, pos } = context;
+        const text = state.doc.toString();
+        // Check if we're inside a {{ }} expression
+        const pathInfo = extractVariablePath(text, pos);
+        if (!pathInfo) {
+            // Check if user just typed {{
+            const beforeCursor = text.slice(Math.max(0, pos - 2), pos);
+            if (beforeCursor === '{{') {
+                // Show top-level variables
+                const options = Object.values(schema.variables).map((v) => variableToCompletion(v));
+                return {
+                    from: pos,
+                    options,
+                    validFor: /^[\w.[\]]*$/
+                };
+            }
+            return null;
+        }
+        const { path, startPos } = pathInfo;
+        const completionType = getCompletionType(path);
+        let options = [];
+        let from = pos;
+        switch (completionType.type) {
+            case 'top-level': {
+                // Show all top-level variables
+                const currentWord = path.trim();
+                options = Object.values(schema.variables)
+                    .filter((v) => currentWord === '' || v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
+                    .map((v) => variableToCompletion(v));
+                // Calculate from position for replacement
+                from = startPos + (path.length - path.trimStart().length);
+                break;
+            }
+            case 'property': {
+                // Show child properties of the parent
+                const children = getChildVariables(schema, completionType.parentPath);
+                const currentWord = path.slice(path.lastIndexOf('.') + 1);
+                options = children
+                    .filter((v) => currentWord === '' || v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
+                    .map((v) => variableToCompletion(v));
+                // From should be right after the last dot
+                from = startPos + path.lastIndexOf('.') + 1;
+                break;
+            }
+            case 'array-index': {
+                // Check if the parent is actually an array
+                if (isArrayVariable(schema, completionType.parentPath)) {
+                    const indices = getArrayIndexSuggestions(5);
+                    const currentIndex = path.slice(path.lastIndexOf('[') + 1);
+                    options = indices
+                        .filter((idx) => currentIndex === '' || idx.startsWith(currentIndex))
+                        .map((idx) => ({
+                        label: idx,
+                        displayLabel: idx === '*]' ? '* (all items)' : `[${idx}`,
+                        detail: idx === '*]' ? 'Iterate all items' : `Index ${idx.slice(0, -1)}`,
+                        type: 'keyword'
+                    }));
+                    // From should be right after the [
+                    from = startPos + path.lastIndexOf('[') + 1;
+                }
+                break;
+            }
+        }
+        if (options.length === 0) {
+            return null;
+        }
+        return {
+            from,
+            options,
+            validFor: /^[\w\]*]*$/
+        };
+    };
+}
+/**
+ * Creates a CodeMirror extension for template variable autocomplete.
+ *
+ * @param schema - The variable schema containing available variables
+ * @returns A CodeMirror extension that provides autocomplete
+ *
+ * @example
+ * ```typescript
+ * const extensions = [
+ *   // ... other extensions
+ *   createTemplateAutocomplete(variableSchema)
+ * ];
+ * ```
+ */
+export function createTemplateAutocomplete(schema) {
+    return autocompletion({
+        override: [createTemplateCompletionSource(schema)],
+        activateOnTyping: true,
+        defaultKeymap: true,
+        optionClass: () => 'cm-template-autocomplete-option',
+        icons: false, // We use our own icons in displayLabel
+        addToOptions: [
+            {
+                render: (completion) => {
+                    const el = document.createElement('span');
+                    el.className = 'cm-template-autocomplete-info';
+                    if (completion.info) {
+                        el.textContent = String(completion.info);
+                    }
+                    return el;
+                },
+                position: 100
+            }
+        ]
+    });
+}