@eventideorg/design-system 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +208 -0
- package/dist/App.d.ts +1 -0
- package/dist/index.css +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2054 -0
- package/dist/main.d.ts +0 -0
- package/dist/ui/hooks/index.d.ts +1 -0
- package/dist/ui/index.d.ts +2 -0
- package/dist/ui/lib/utils.d.ts +2 -0
- package/dist/ui/ui/Badge.d.ts +9 -0
- package/dist/ui/ui/Button.d.ts +10 -0
- package/dist/ui/ui/Calendar.d.ts +8 -0
- package/dist/ui/ui/Card.d.ts +9 -0
- package/dist/ui/ui/Checkbox.d.ts +4 -0
- package/dist/ui/ui/Collapsible.d.ts +5 -0
- package/dist/ui/ui/Command.d.ts +18 -0
- package/dist/ui/ui/Dialog.d.ts +17 -0
- package/dist/ui/ui/FormSystem/FormBuilder/DragHandle.d.ts +7 -0
- package/dist/ui/ui/FormSystem/FormBuilder/FieldEditor.d.ts +9 -0
- package/dist/ui/ui/FormSystem/FormBuilder/FieldList.d.ts +9 -0
- package/dist/ui/ui/FormSystem/FormBuilder/FieldTypePicker.d.ts +7 -0
- package/dist/ui/ui/FormSystem/FormBuilder/FormBuilder.d.ts +2 -0
- package/dist/ui/ui/FormSystem/FormBuilder/NavigationRuleEditor.d.ts +12 -0
- package/dist/ui/ui/FormSystem/FormBuilder/SectionEditor.d.ts +15 -0
- package/dist/ui/ui/FormSystem/FormBuilder/SectionList.d.ts +14 -0
- package/dist/ui/ui/FormSystem/FormBuilder/SortableItem.d.ts +14 -0
- package/dist/ui/ui/FormSystem/FormBuilder/builderValidation.d.ts +13 -0
- package/dist/ui/ui/FormSystem/FormBuilder/index.d.ts +18 -0
- package/dist/ui/ui/FormSystem/FormBuilder/useFormBuilder.d.ts +22 -0
- package/dist/ui/ui/FormSystem/FormRunner/FormRunner.d.ts +2 -0
- package/dist/ui/ui/FormSystem/FormRunner/NavigationControls.d.ts +11 -0
- package/dist/ui/ui/FormSystem/FormRunner/ProgressBar.d.ts +10 -0
- package/dist/ui/ui/FormSystem/FormRunner/SectionRenderer.d.ts +9 -0
- package/dist/ui/ui/FormSystem/FormRunner/index.d.ts +9 -0
- package/dist/ui/ui/FormSystem/FormRunner/useFormRunner.d.ts +23 -0
- package/dist/ui/ui/FormSystem/InputRenderer.d.ts +9 -0
- package/dist/ui/ui/FormSystem/NavigationEngine.d.ts +65 -0
- package/dist/ui/ui/FormSystem/constants.d.ts +29 -0
- package/dist/ui/ui/FormSystem/index.d.ts +20 -0
- package/dist/ui/ui/FormSystem/types.d.ts +104 -0
- package/dist/ui/ui/FormSystem/validation.d.ts +9 -0
- package/dist/ui/ui/Input.d.ts +3 -0
- package/dist/ui/ui/InputFields/Checkbox.d.ts +9 -0
- package/dist/ui/ui/InputFields/ColorInput.d.ts +10 -0
- package/dist/ui/ui/InputFields/DatePicker.d.ts +19 -0
- package/dist/ui/ui/InputFields/DateTimePicker.d.ts +8 -0
- package/dist/ui/ui/InputFields/Divider.d.ts +5 -0
- package/dist/ui/ui/InputFields/EmailInput.d.ts +7 -0
- package/dist/ui/ui/InputFields/FieldWrapper.d.ts +16 -0
- package/dist/ui/ui/InputFields/FileInput.d.ts +12 -0
- package/dist/ui/ui/InputFields/Likert.d.ts +16 -0
- package/dist/ui/ui/InputFields/LocationInput.d.ts +24 -0
- package/dist/ui/ui/InputFields/NumberInput.d.ts +15 -0
- package/dist/ui/ui/InputFields/PasswordInput.d.ts +7 -0
- package/dist/ui/ui/InputFields/QuerySelect.d.ts +13 -0
- package/dist/ui/ui/InputFields/RadioInput.d.ts +10 -0
- package/dist/ui/ui/InputFields/Rating.d.ts +9 -0
- package/dist/ui/ui/InputFields/RichTextInput.d.ts +13 -0
- package/dist/ui/ui/InputFields/SelectInput.d.ts +11 -0
- package/dist/ui/ui/InputFields/StaticImage.d.ts +6 -0
- package/dist/ui/ui/InputFields/StaticText.d.ts +5 -0
- package/dist/ui/ui/InputFields/SwitchInput.d.ts +9 -0
- package/dist/ui/ui/InputFields/TelephoneInput.d.ts +12 -0
- package/dist/ui/ui/InputFields/TextInput.d.ts +7 -0
- package/dist/ui/ui/InputFields/TextareaInput.d.ts +7 -0
- package/dist/ui/ui/InputFields/TimePicker.d.ts +11 -0
- package/dist/ui/ui/InputFields/URLInput.d.ts +7 -0
- package/dist/ui/ui/InputFields/index.d.ts +51 -0
- package/dist/ui/ui/InputFields/types.d.ts +21 -0
- package/dist/ui/ui/Label.d.ts +4 -0
- package/dist/ui/ui/Popover.d.ts +10 -0
- package/dist/ui/ui/RadioGroup.d.ts +5 -0
- package/dist/ui/ui/Select.d.ts +15 -0
- package/dist/ui/ui/Separator.d.ts +4 -0
- package/dist/ui/ui/Switch.d.ts +6 -0
- package/dist/ui/ui/Textarea.d.ts +3 -0
- package/dist/ui/ui/index.d.ts +6 -0
- package/dist/vite.svg +1 -0
- package/package.json +107 -0
package/dist/main.d.ts
ADDED
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
declare const badgeVariants: (props?: ({
|
|
4
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
|
|
5
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
6
|
+
declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
|
|
7
|
+
asChild?: boolean;
|
|
8
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
declare const buttonVariants: (props?: ({
|
|
4
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
|
|
5
|
+
size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
6
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
|
+
declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
8
|
+
asChild?: boolean;
|
|
9
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { Button, buttonVariants };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { DayPicker, DayButton } from 'react-day-picker';
|
|
2
|
+
import { Button } from './Button';
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
|
|
5
|
+
buttonVariant?: React.ComponentProps<typeof Button>["variant"];
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export { Calendar, CalendarDayButton };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
declare function Card({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function CardAction({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function CardContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
|
|
2
|
+
declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export { Collapsible, CollapsibleTrigger, CollapsibleContent };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Command as CommandPrimitive } from 'cmdk';
|
|
2
|
+
import { Dialog } from './Dialog';
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
|
|
6
|
+
title?: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
showCloseButton?: boolean;
|
|
10
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Dialog as DialogPrimitive } from 'radix-ui';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
|
9
|
+
showCloseButton?: boolean;
|
|
10
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
|
|
13
|
+
showCloseButton?: boolean;
|
|
14
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
|
|
2
|
+
import { DraggableAttributes } from '@dnd-kit/core';
|
|
3
|
+
export interface DragHandleProps {
|
|
4
|
+
listeners?: SyntheticListenerMap;
|
|
5
|
+
attributes?: DraggableAttributes;
|
|
6
|
+
}
|
|
7
|
+
export declare function DragHandle({ listeners, attributes }: DragHandleProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FormField } from '../types';
|
|
2
|
+
export interface FieldEditorProps {
|
|
3
|
+
field: FormField;
|
|
4
|
+
onUpdate: (updates: Partial<FormField>) => void;
|
|
5
|
+
onRemove: () => void;
|
|
6
|
+
dragHandle?: React.ReactNode;
|
|
7
|
+
}
|
|
8
|
+
declare function FieldEditor({ field, onUpdate, onRemove, dragHandle }: FieldEditorProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { FieldEditor };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FormField } from '../types';
|
|
2
|
+
export interface FieldListProps {
|
|
3
|
+
fields: FormField[];
|
|
4
|
+
onMoveField: (oldIndex: number, newIndex: number) => void;
|
|
5
|
+
onUpdateField: (fieldId: string, updates: Partial<FormField>) => void;
|
|
6
|
+
onRemoveField: (fieldId: string) => void;
|
|
7
|
+
}
|
|
8
|
+
declare function FieldList({ fields, onMoveField, onUpdateField, onRemoveField, }: FieldListProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { FieldList };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { FieldType } from '../types';
|
|
2
|
+
export interface FieldTypePickerProps {
|
|
3
|
+
onSelect: (fieldType: FieldType) => void;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
}
|
|
6
|
+
declare function FieldTypePicker({ onSelect, disabled }: FieldTypePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export { FieldTypePicker };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { SectionNavigation, FormSection } from '../types';
|
|
2
|
+
export interface NavigationRuleEditorProps {
|
|
3
|
+
navigation: SectionNavigation;
|
|
4
|
+
allSections: FormSection[];
|
|
5
|
+
currentSectionId: string;
|
|
6
|
+
currentSectionFields: Array<{
|
|
7
|
+
id: string;
|
|
8
|
+
label: string;
|
|
9
|
+
}>;
|
|
10
|
+
onChange: (navigation: SectionNavigation) => void;
|
|
11
|
+
}
|
|
12
|
+
export declare function NavigationRuleEditor({ navigation, allSections, currentSectionId, currentSectionFields, onChange, }: NavigationRuleEditorProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { FormField, FormSection, SectionNavigation, FieldType } from '../types';
|
|
2
|
+
export interface SectionEditorProps {
|
|
3
|
+
section: FormSection;
|
|
4
|
+
allSections: FormSection[];
|
|
5
|
+
onUpdateTitle: (title: string) => void;
|
|
6
|
+
onUpdateDescription: (description: string) => void;
|
|
7
|
+
onUpdateNavigation: (navigation: SectionNavigation) => void;
|
|
8
|
+
onAddField: (fieldType: FieldType) => void;
|
|
9
|
+
onRemoveField: (fieldId: string) => void;
|
|
10
|
+
onMoveField: (oldIndex: number, newIndex: number) => void;
|
|
11
|
+
onUpdateField: (fieldId: string, updates: Partial<FormField>) => void;
|
|
12
|
+
onRemove: () => void;
|
|
13
|
+
dragHandle?: React.ReactNode;
|
|
14
|
+
}
|
|
15
|
+
export declare function SectionEditor({ section, allSections, onUpdateTitle, onUpdateDescription, onUpdateNavigation, onAddField, onRemoveField, onMoveField, onUpdateField, onRemove, dragHandle, }: SectionEditorProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { FormField, FormSection, SectionNavigation, FieldType } from '../types';
|
|
2
|
+
export interface SectionListProps {
|
|
3
|
+
sections: FormSection[];
|
|
4
|
+
onMoveSection: (oldIndex: number, newIndex: number) => void;
|
|
5
|
+
onUpdateSectionTitle: (sectionId: string, title: string) => void;
|
|
6
|
+
onUpdateSectionDescription: (sectionId: string, description: string) => void;
|
|
7
|
+
onUpdateSectionNavigation: (sectionId: string, navigation: SectionNavigation) => void;
|
|
8
|
+
onRemoveSection: (sectionId: string) => void;
|
|
9
|
+
onAddField: (sectionId: string, fieldType: FieldType) => void;
|
|
10
|
+
onRemoveField: (sectionId: string, fieldId: string) => void;
|
|
11
|
+
onMoveField: (sectionId: string, oldIndex: number, newIndex: number) => void;
|
|
12
|
+
onUpdateField: (sectionId: string, fieldId: string, updates: Partial<FormField>) => void;
|
|
13
|
+
}
|
|
14
|
+
export declare function SectionList({ sections, onMoveSection, onUpdateSectionTitle, onUpdateSectionDescription, onUpdateSectionNavigation, onRemoveSection, onAddField, onRemoveField, onMoveField, onUpdateField, }: SectionListProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
|
|
2
|
+
import { DraggableAttributes } from '@dnd-kit/core';
|
|
3
|
+
interface SortableItemProps {
|
|
4
|
+
id: string;
|
|
5
|
+
children: (props: {
|
|
6
|
+
setNodeRef: (node: HTMLElement | null) => void;
|
|
7
|
+
style: React.CSSProperties;
|
|
8
|
+
listeners: SyntheticListenerMap | undefined;
|
|
9
|
+
attributes: DraggableAttributes;
|
|
10
|
+
isDragging: boolean;
|
|
11
|
+
}) => React.ReactNode;
|
|
12
|
+
}
|
|
13
|
+
export declare function SortableItem({ id, children }: SortableItemProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { FormDefinition, BuilderValidationError } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Validates a FormDefinition and returns array of validation errors
|
|
4
|
+
* Checks for:
|
|
5
|
+
* - Empty sections (no fields)
|
|
6
|
+
* - Missing field labels (non-display-only fields)
|
|
7
|
+
* - Circular navigation paths
|
|
8
|
+
* - Unreachable sections
|
|
9
|
+
*
|
|
10
|
+
* @param definition - The form definition to validate
|
|
11
|
+
* @returns Array of validation errors (empty if valid)
|
|
12
|
+
*/
|
|
13
|
+
export declare function validateFormDefinition(definition: FormDefinition): BuilderValidationError[];
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export { FormBuilder } from './FormBuilder';
|
|
2
|
+
export { SectionList } from './SectionList';
|
|
3
|
+
export { SectionEditor } from './SectionEditor';
|
|
4
|
+
export { NavigationRuleEditor } from './NavigationRuleEditor';
|
|
5
|
+
export { FieldList } from './FieldList';
|
|
6
|
+
export { FieldEditor } from './FieldEditor';
|
|
7
|
+
export { FieldTypePicker } from './FieldTypePicker';
|
|
8
|
+
export { SortableItem } from './SortableItem';
|
|
9
|
+
export { DragHandle } from './DragHandle';
|
|
10
|
+
export { useFormBuilder } from './useFormBuilder';
|
|
11
|
+
export { validateFormDefinition } from './builderValidation';
|
|
12
|
+
export type { NavigationRuleEditorProps } from './NavigationRuleEditor';
|
|
13
|
+
export type { SectionEditorProps } from './SectionEditor';
|
|
14
|
+
export type { SectionListProps } from './SectionList';
|
|
15
|
+
export type { FieldListProps } from './FieldList';
|
|
16
|
+
export type { FieldEditorProps } from './FieldEditor';
|
|
17
|
+
export type { FieldTypePickerProps } from './FieldTypePicker';
|
|
18
|
+
export type { UseFormBuilderOptions, UseFormBuilderReturn } from './useFormBuilder';
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { FormDefinition, FormField, SectionNavigation, BuilderValidationError, FieldType } from '../types';
|
|
2
|
+
export interface UseFormBuilderOptions {
|
|
3
|
+
initialDefinition?: FormDefinition;
|
|
4
|
+
onChange: (definition: FormDefinition) => void;
|
|
5
|
+
}
|
|
6
|
+
export interface UseFormBuilderReturn {
|
|
7
|
+
definition: FormDefinition;
|
|
8
|
+
validationErrors: BuilderValidationError[];
|
|
9
|
+
updateTitle: (title: string) => void;
|
|
10
|
+
updateDescription: (description: string) => void;
|
|
11
|
+
addSection: () => void;
|
|
12
|
+
removeSection: (sectionId: string) => void;
|
|
13
|
+
moveSection: (oldIndex: number, newIndex: number) => void;
|
|
14
|
+
updateSectionTitle: (sectionId: string, title: string) => void;
|
|
15
|
+
updateSectionDescription: (sectionId: string, description: string) => void;
|
|
16
|
+
updateSectionNavigation: (sectionId: string, navigation: SectionNavigation) => void;
|
|
17
|
+
addField: (sectionId: string, fieldType: FieldType) => void;
|
|
18
|
+
removeField: (sectionId: string, fieldId: string) => void;
|
|
19
|
+
moveField: (sectionId: string, oldIndex: number, newIndex: number) => void;
|
|
20
|
+
updateField: (sectionId: string, fieldId: string, updates: Partial<FormField>) => void;
|
|
21
|
+
}
|
|
22
|
+
export declare function useFormBuilder({ initialDefinition, onChange, }: UseFormBuilderOptions): UseFormBuilderReturn;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export interface NavigationControlsProps {
|
|
2
|
+
isFirstSection: boolean;
|
|
3
|
+
isLastSection: boolean;
|
|
4
|
+
isSubmitting: boolean;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
onBack: () => void;
|
|
7
|
+
onNext: () => Promise<void>;
|
|
8
|
+
onSubmit: () => Promise<void>;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare function NavigationControls({ isFirstSection, isLastSection, isSubmitting, disabled, onBack, onNext, onSubmit, className, }: NavigationControlsProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export interface ProgressBarProps {
|
|
2
|
+
sections: Array<{
|
|
3
|
+
id: string;
|
|
4
|
+
title: string;
|
|
5
|
+
}>;
|
|
6
|
+
currentSectionId: string;
|
|
7
|
+
visitedSections: Set<string>;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare function ProgressBar({ sections, currentSectionId, visitedSections, className, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Control, FieldErrors } from 'react-hook-form';
|
|
2
|
+
import { FormSection } from '../types';
|
|
3
|
+
export interface SectionRendererProps {
|
|
4
|
+
section: FormSection;
|
|
5
|
+
control: Control<Record<string, unknown>>;
|
|
6
|
+
errors: FieldErrors<Record<string, unknown>>;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare function SectionRenderer({ section, control, errors: _errors, disabled, }: SectionRendererProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { FormRunner } from './FormRunner';
|
|
2
|
+
export { useFormRunner } from './useFormRunner';
|
|
3
|
+
export { ProgressBar } from './ProgressBar';
|
|
4
|
+
export { NavigationControls } from './NavigationControls';
|
|
5
|
+
export { SectionRenderer } from './SectionRenderer';
|
|
6
|
+
export type { UseFormRunnerOptions, UseFormRunnerReturn } from './useFormRunner';
|
|
7
|
+
export type { ProgressBarProps } from './ProgressBar';
|
|
8
|
+
export type { NavigationControlsProps } from './NavigationControls';
|
|
9
|
+
export type { SectionRendererProps } from './SectionRenderer';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Control, FieldErrors } from 'react-hook-form';
|
|
2
|
+
import { FormDefinition, FormSection } from '../types';
|
|
3
|
+
export interface UseFormRunnerOptions {
|
|
4
|
+
definition: FormDefinition;
|
|
5
|
+
initialValues?: Record<string, unknown>;
|
|
6
|
+
onSubmit: (values: Record<string, unknown>) => void | Promise<void>;
|
|
7
|
+
onSectionChange?: (sectionId: string, index: number) => void;
|
|
8
|
+
}
|
|
9
|
+
export interface UseFormRunnerReturn {
|
|
10
|
+
control: Control<Record<string, unknown>>;
|
|
11
|
+
errors: FieldErrors<Record<string, unknown>>;
|
|
12
|
+
currentSection: FormSection;
|
|
13
|
+
currentSectionIndex: number;
|
|
14
|
+
totalSections: number;
|
|
15
|
+
visitedSections: Set<string>;
|
|
16
|
+
isFirstSection: boolean;
|
|
17
|
+
isLastSection: boolean;
|
|
18
|
+
handleNext: () => Promise<void>;
|
|
19
|
+
handleBack: () => void;
|
|
20
|
+
handleSubmit: () => Promise<void>;
|
|
21
|
+
isSubmitting: boolean;
|
|
22
|
+
}
|
|
23
|
+
export declare function useFormRunner(options: UseFormRunnerOptions): UseFormRunnerReturn;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FormField } from './types';
|
|
2
|
+
export interface InputRendererProps {
|
|
3
|
+
field: FormField;
|
|
4
|
+
value: unknown;
|
|
5
|
+
onChange: (value: unknown) => void;
|
|
6
|
+
error?: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare function InputRenderer({ field, value, onChange, error, disabled, }: InputRendererProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { NavigationCondition, FormSection } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Evaluates a single navigation condition against form values.
|
|
4
|
+
*
|
|
5
|
+
* Operators:
|
|
6
|
+
* - equals: strict string equality
|
|
7
|
+
* - not_equals: negation of equals
|
|
8
|
+
* - contains: case-insensitive substring match
|
|
9
|
+
* - greater_than: numeric comparison
|
|
10
|
+
* - less_than: numeric comparison
|
|
11
|
+
* - is_empty: value is undefined, null, or empty string
|
|
12
|
+
* - is_not_empty: negation of is_empty
|
|
13
|
+
*
|
|
14
|
+
* @param condition - The condition to evaluate
|
|
15
|
+
* @param formValues - Current form values
|
|
16
|
+
* @returns true if condition passes, false otherwise
|
|
17
|
+
*/
|
|
18
|
+
export declare function evaluateCondition(condition: NavigationCondition, formValues: Record<string, unknown>): boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Resolves the next section ID based on navigation rules.
|
|
21
|
+
*
|
|
22
|
+
* Evaluates conditional rules in order (first match wins).
|
|
23
|
+
* Each rule's conditions are AND-ed (all must pass).
|
|
24
|
+
* Falls back to defaultNext if no rule matches.
|
|
25
|
+
*
|
|
26
|
+
* @param section - Current section with navigation rules
|
|
27
|
+
* @param formValues - Current form values
|
|
28
|
+
* @returns Next section ID, or null to end form
|
|
29
|
+
*/
|
|
30
|
+
export declare function resolveNextSection(section: FormSection, formValues: Record<string, unknown>): string | null;
|
|
31
|
+
/**
|
|
32
|
+
* Detects circular navigation in the form using DFS.
|
|
33
|
+
*
|
|
34
|
+
* Only follows defaultNext edges (conditional rules can't be statically analyzed).
|
|
35
|
+
* Returns cycle path if found.
|
|
36
|
+
*
|
|
37
|
+
* @param sections - All form sections
|
|
38
|
+
* @returns Object with hasCircular flag and optional path array
|
|
39
|
+
*/
|
|
40
|
+
export declare function detectCircularNavigation(sections: FormSection[]): {
|
|
41
|
+
hasCircular: boolean;
|
|
42
|
+
path?: string[];
|
|
43
|
+
};
|
|
44
|
+
/**
|
|
45
|
+
* Detects sections that are unreachable from the first section.
|
|
46
|
+
*
|
|
47
|
+
* Uses BFS following all possible edges (defaultNext + all conditional targets).
|
|
48
|
+
* First section is always the entry point.
|
|
49
|
+
*
|
|
50
|
+
* @param sections - All form sections
|
|
51
|
+
* @returns Array of unreachable section IDs
|
|
52
|
+
*/
|
|
53
|
+
export declare function detectUnreachableSections(sections: FormSection[]): string[];
|
|
54
|
+
/**
|
|
55
|
+
* Navigates back in the history stack.
|
|
56
|
+
*
|
|
57
|
+
* Pops the last entry from history and returns the new current section.
|
|
58
|
+
*
|
|
59
|
+
* @param history - Current navigation history (section IDs)
|
|
60
|
+
* @returns Object with previous section ID and updated history, or null if empty
|
|
61
|
+
*/
|
|
62
|
+
export declare function goBack(history: string[]): {
|
|
63
|
+
previousSectionId: string;
|
|
64
|
+
newHistory: string[];
|
|
65
|
+
} | null;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { LucideIcon } from 'lucide-react';
|
|
2
|
+
import { FieldType, FormField } from './types';
|
|
3
|
+
export interface FieldTypeMeta {
|
|
4
|
+
type: FieldType;
|
|
5
|
+
label: string;
|
|
6
|
+
icon: LucideIcon;
|
|
7
|
+
category: "input" | "choice" | "media" | "display";
|
|
8
|
+
hasOptions: boolean;
|
|
9
|
+
isDisplayOnly: boolean;
|
|
10
|
+
defaultField: Partial<FormField>;
|
|
11
|
+
}
|
|
12
|
+
export declare const FIELD_TYPE_REGISTRY: Record<FieldType, FieldTypeMeta>;
|
|
13
|
+
export declare const FIELD_CATEGORIES: ({
|
|
14
|
+
key: "input";
|
|
15
|
+
label: string;
|
|
16
|
+
} | {
|
|
17
|
+
key: "choice";
|
|
18
|
+
label: string;
|
|
19
|
+
} | {
|
|
20
|
+
key: "media";
|
|
21
|
+
label: string;
|
|
22
|
+
} | {
|
|
23
|
+
key: "display";
|
|
24
|
+
label: string;
|
|
25
|
+
})[];
|
|
26
|
+
export declare const COMPARISON_OPERATORS: {
|
|
27
|
+
value: import('./types').ComparisonOperator;
|
|
28
|
+
label: string;
|
|
29
|
+
}[];
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export type { FieldType, ComparisonOperator, FieldValidation, FieldOption, LikertConfig, RatingConfig, FileFieldConfig, LocationFieldConfig, FormField, NavigationCondition, ConditionalNavigation, SectionNavigation, FormSection, FormDefinition, FormRunnerProps, FormBuilderProps, NavigationState, BuilderValidationError, } from './types';
|
|
2
|
+
export { DISPLAY_ONLY_FIELD_TYPES } from './types';
|
|
3
|
+
export { FIELD_TYPE_REGISTRY, FIELD_CATEGORIES, COMPARISON_OPERATORS, } from './constants';
|
|
4
|
+
export type { FieldTypeMeta } from './constants';
|
|
5
|
+
export { InputRenderer } from './InputRenderer';
|
|
6
|
+
export type { InputRendererProps } from './InputRenderer';
|
|
7
|
+
export { evaluateCondition, resolveNextSection, detectCircularNavigation, detectUnreachableSections, goBack, } from './NavigationEngine';
|
|
8
|
+
export { fieldToRHFRules } from './validation';
|
|
9
|
+
export { validateFormDefinition } from './FormBuilder/builderValidation';
|
|
10
|
+
export { FormRunner } from './FormRunner';
|
|
11
|
+
export { useFormRunner } from './FormRunner';
|
|
12
|
+
export { ProgressBar } from './FormRunner';
|
|
13
|
+
export { NavigationControls } from './FormRunner';
|
|
14
|
+
export { SectionRenderer } from './FormRunner';
|
|
15
|
+
export type { UseFormRunnerOptions, UseFormRunnerReturn } from './FormRunner';
|
|
16
|
+
export type { ProgressBarProps } from './FormRunner';
|
|
17
|
+
export type { NavigationControlsProps } from './FormRunner';
|
|
18
|
+
export type { SectionRendererProps } from './FormRunner';
|
|
19
|
+
export { FormBuilder, SectionList, SectionEditor, NavigationRuleEditor, FieldList, FieldEditor, FieldTypePicker, SortableItem, DragHandle, useFormBuilder, } from './FormBuilder';
|
|
20
|
+
export type { NavigationRuleEditorProps, SectionEditorProps, SectionListProps, FieldListProps, FieldEditorProps, FieldTypePickerProps, UseFormBuilderOptions, UseFormBuilderReturn, } from './FormBuilder';
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
export type FieldType = "text" | "textarea" | "number" | "email" | "date" | "time" | "datetime" | "select" | "multiselect" | "radio" | "checkbox" | "rating" | "likert" | "file" | "location" | "rich_text" | "divider" | "static_text" | "static_image";
|
|
2
|
+
export declare const DISPLAY_ONLY_FIELD_TYPES: readonly FieldType[];
|
|
3
|
+
export type ComparisonOperator = "equals" | "not_equals" | "contains" | "greater_than" | "less_than" | "is_empty" | "is_not_empty";
|
|
4
|
+
export interface FieldValidation {
|
|
5
|
+
required?: boolean;
|
|
6
|
+
minLength?: number;
|
|
7
|
+
maxLength?: number;
|
|
8
|
+
min?: number;
|
|
9
|
+
max?: number;
|
|
10
|
+
pattern?: string;
|
|
11
|
+
patternMessage?: string;
|
|
12
|
+
}
|
|
13
|
+
export interface FieldOption {
|
|
14
|
+
label: string;
|
|
15
|
+
value: string;
|
|
16
|
+
}
|
|
17
|
+
export interface LikertConfig {
|
|
18
|
+
scale: FieldOption[];
|
|
19
|
+
statements: FieldOption[];
|
|
20
|
+
}
|
|
21
|
+
export interface RatingConfig {
|
|
22
|
+
maxStars: number;
|
|
23
|
+
}
|
|
24
|
+
export interface FileFieldConfig {
|
|
25
|
+
accept?: string;
|
|
26
|
+
multiple?: boolean;
|
|
27
|
+
maxSize?: number;
|
|
28
|
+
maxFiles?: number;
|
|
29
|
+
}
|
|
30
|
+
export interface LocationFieldConfig {
|
|
31
|
+
defaultCenter?: {
|
|
32
|
+
lat: number;
|
|
33
|
+
lng: number;
|
|
34
|
+
};
|
|
35
|
+
defaultZoom?: number;
|
|
36
|
+
}
|
|
37
|
+
export interface FormField {
|
|
38
|
+
id: string;
|
|
39
|
+
type: FieldType;
|
|
40
|
+
label: string;
|
|
41
|
+
helperText?: string;
|
|
42
|
+
placeholder?: string;
|
|
43
|
+
validation?: FieldValidation;
|
|
44
|
+
disabled?: boolean;
|
|
45
|
+
options?: FieldOption[];
|
|
46
|
+
likertConfig?: LikertConfig;
|
|
47
|
+
ratingConfig?: RatingConfig;
|
|
48
|
+
fileConfig?: FileFieldConfig;
|
|
49
|
+
locationConfig?: LocationFieldConfig;
|
|
50
|
+
content?: string;
|
|
51
|
+
imageUrl?: string;
|
|
52
|
+
imageAlt?: string;
|
|
53
|
+
}
|
|
54
|
+
export interface NavigationCondition {
|
|
55
|
+
fieldId: string;
|
|
56
|
+
operator: ComparisonOperator;
|
|
57
|
+
value: string | number | boolean;
|
|
58
|
+
}
|
|
59
|
+
export interface ConditionalNavigation {
|
|
60
|
+
conditions: NavigationCondition[];
|
|
61
|
+
targetSectionId: string;
|
|
62
|
+
}
|
|
63
|
+
export interface SectionNavigation {
|
|
64
|
+
defaultNext: string | null;
|
|
65
|
+
conditionalRules: ConditionalNavigation[];
|
|
66
|
+
}
|
|
67
|
+
export interface FormSection {
|
|
68
|
+
id: string;
|
|
69
|
+
title: string;
|
|
70
|
+
description?: string;
|
|
71
|
+
fields: FormField[];
|
|
72
|
+
navigation: SectionNavigation;
|
|
73
|
+
}
|
|
74
|
+
export interface FormDefinition {
|
|
75
|
+
id: string;
|
|
76
|
+
title: string;
|
|
77
|
+
description?: string;
|
|
78
|
+
sections: FormSection[];
|
|
79
|
+
version: number;
|
|
80
|
+
}
|
|
81
|
+
export interface FormRunnerProps {
|
|
82
|
+
definition: FormDefinition;
|
|
83
|
+
initialValues?: Record<string, unknown>;
|
|
84
|
+
onSubmit: (values: Record<string, unknown>) => void | Promise<void>;
|
|
85
|
+
onSectionChange?: (sectionId: string, index: number) => void;
|
|
86
|
+
disabled?: boolean;
|
|
87
|
+
className?: string;
|
|
88
|
+
}
|
|
89
|
+
export interface FormBuilderProps {
|
|
90
|
+
definition?: FormDefinition;
|
|
91
|
+
onChange: (definition: FormDefinition) => void;
|
|
92
|
+
className?: string;
|
|
93
|
+
}
|
|
94
|
+
export interface NavigationState {
|
|
95
|
+
currentSectionId: string;
|
|
96
|
+
history: string[];
|
|
97
|
+
visitedSections: Set<string>;
|
|
98
|
+
}
|
|
99
|
+
export interface BuilderValidationError {
|
|
100
|
+
type: "circular_navigation" | "unreachable_section" | "missing_field_label" | "empty_section" | "duplicate_field_id";
|
|
101
|
+
sectionId?: string;
|
|
102
|
+
fieldId?: string;
|
|
103
|
+
message: string;
|
|
104
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { RegisterOptions } from 'react-hook-form';
|
|
2
|
+
import { FormField } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Converts FormField validation rules to React Hook Form RegisterOptions
|
|
5
|
+
* Display-only fields (divider, static_text, static_image) return empty rules
|
|
6
|
+
* @param field - The form field to convert
|
|
7
|
+
* @returns RegisterOptions for use with react-hook-form register()
|
|
8
|
+
*/
|
|
9
|
+
export declare function fieldToRHFRules(field: FormField): RegisterOptions;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { BaseFieldProps } from './types';
|
|
2
|
+
interface CheckboxProps extends Omit<BaseFieldProps, "placeholder"> {
|
|
3
|
+
checked?: boolean;
|
|
4
|
+
defaultChecked?: boolean;
|
|
5
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
6
|
+
}
|
|
7
|
+
declare function Checkbox({ label, error, helperText, required, disabled, id: externalId, className, checked, defaultChecked, onCheckedChange, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export { Checkbox };
|
|
9
|
+
export type { CheckboxProps };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { BaseFieldProps } from './types';
|
|
2
|
+
interface ColorInputProps extends BaseFieldProps {
|
|
3
|
+
value?: string;
|
|
4
|
+
defaultValue?: string;
|
|
5
|
+
onChange?: (value: string) => void;
|
|
6
|
+
showHexInput?: boolean;
|
|
7
|
+
}
|
|
8
|
+
declare function ColorInput({ label, error, helperText, required, disabled, id, className, value, defaultValue, onChange, showHexInput, }: ColorInputProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { ColorInput };
|
|
10
|
+
export type { ColorInputProps };
|