@lumeweb/portal-framework-ui 0.0.1 → 0.1.0

package/dist/esm/components/form/index.js

@@ -0,0 +1,99 @@
+import { __esmMin, __exportAll } from "../../_virtual/rolldown_runtime.js";
+import { adapters, init_adapters } from "./adapters.js";
+import { FormProvider, init_context, useFormContext } from "./context.js";
+import { Checkbox, registerCheckbox } from "./fields/Checkbox.js";
+import { DatePicker, registerDatePicker } from "./fields/DatePicker.js";
+import { EmailInput, registerEmailInput } from "./fields/EmailInput.js";
+import { FileInput, registerFileInput } from "./fields/FileInput.js";
+import { Input, registerInput } from "./fields/Input.js";
+import { RadioGroup, registerRadioGroup } from "./fields/RadioGroup.js";
+import { getFormComponent, registerFormComponent } from "./fields/registry.js";
+import { RichText, registerRichText } from "./fields/RichText.js";
+import { Select, registerSelect } from "./fields/Select.js";
+import { Slider, registerSlider } from "./fields/Slider.js";
+import { Textarea, registerTextarea } from "./fields/Textarea.js";
+import { FormFieldType } from "./fields/types.js";
+import { init_fields } from "./fields/index.js";
+import { FormGroup, init_FormGroup } from "./FormGroup.js";
+import { StepControlProvider, init_StepControlContext, useCreateStepControl, useOptionalStepControlContext, useStepControl, useStepControlContext } from "./StepControlContext.js";
+import { AdapterType, GroupOrder, LayoutType, init_types, isActionButtonsFunction, isFooterFunction, isHeaderFunction, isStepFormConfig, isSubmitLabelFunction } from "./types.js";
+import { FormRenderer, init_FormRenderer } from "./FormRenderer.js";
+import { init_register, registerAllFormComponents } from "./register.js";
+import { computeAutoSaveConfig } from "./utils/autoSave.js";
+import { SchemaForm, init_SchemaForm } from "./SchemaForm.js";
+import { createStepRetryHandler } from "./utils/stepRetry.js";
+import { getStepAnimationClasses } from "./utils/animationUtils.js";
+import { StepSchemaForm, init_StepSchemaForm } from "./StepSchemaForm.js";
+import { init_utils } from "./utils/index.js";
+import { WizardForm, init_WizardForm } from "./WizardForm.js";
+
+//#region src/components/form/index.ts
+var form_exports = /* @__PURE__ */ __exportAll({
+	AdapterType: () => AdapterType,
+	Checkbox: () => Checkbox,
+	DatePicker: () => DatePicker,
+	EmailInput: () => EmailInput,
+	FileInput: () => FileInput,
+	FormFieldType: () => FormFieldType,
+	FormGroup: () => FormGroup,
+	FormProvider: () => FormProvider,
+	FormRenderer: () => FormRenderer,
+	GroupOrder: () => GroupOrder,
+	Input: () => Input,
+	LayoutType: () => LayoutType,
+	RadioGroup: () => RadioGroup,
+	RichText: () => RichText,
+	SchemaForm: () => SchemaForm,
+	Select: () => Select,
+	Slider: () => Slider,
+	StepControlProvider: () => StepControlProvider,
+	StepSchemaForm: () => StepSchemaForm,
+	Textarea: () => Textarea,
+	WizardForm: () => WizardForm,
+	adapters: () => adapters,
+	computeAutoSaveConfig: () => computeAutoSaveConfig,
+	createStepRetryHandler: () => createStepRetryHandler,
+	getFormComponent: () => getFormComponent,
+	getStepAnimationClasses: () => getStepAnimationClasses,
+	isActionButtonsFunction: () => isActionButtonsFunction,
+	isFooterFunction: () => isFooterFunction,
+	isHeaderFunction: () => isHeaderFunction,
+	isStepFormConfig: () => isStepFormConfig,
+	isSubmitLabelFunction: () => isSubmitLabelFunction,
+	registerAllFormComponents: () => registerAllFormComponents,
+	registerCheckbox: () => registerCheckbox,
+	registerDatePicker: () => registerDatePicker,
+	registerEmailInput: () => registerEmailInput,
+	registerFileInput: () => registerFileInput,
+	registerFormComponent: () => registerFormComponent,
+	registerInput: () => registerInput,
+	registerRadioGroup: () => registerRadioGroup,
+	registerRichText: () => registerRichText,
+	registerSelect: () => registerSelect,
+	registerSlider: () => registerSlider,
+	registerTextarea: () => registerTextarea,
+	useCreateStepControl: () => useCreateStepControl,
+	useFormContext: () => useFormContext,
+	useOptionalStepControlContext: () => useOptionalStepControlContext,
+	useStepControl: () => useStepControl,
+	useStepControlContext: () => useStepControlContext
+});
+var init_form = __esmMin(() => {
+	init_adapters();
+	init_context();
+	init_fields();
+	init_FormGroup();
+	init_FormRenderer();
+	init_register();
+	init_SchemaForm();
+	init_StepControlContext();
+	init_StepSchemaForm();
+	init_types();
+	init_utils();
+	init_WizardForm();
+});
+
+//#endregion
+init_form();
+export { AdapterType, Checkbox, DatePicker, EmailInput, FileInput, FormFieldType, FormGroup, FormProvider, FormRenderer, GroupOrder, Input, LayoutType, RadioGroup, RichText, SchemaForm, Select, Slider, StepControlProvider, StepSchemaForm, Textarea, WizardForm, adapters, computeAutoSaveConfig, createStepRetryHandler, form_exports, getFormComponent, getStepAnimationClasses, init_form, isActionButtonsFunction, isFooterFunction, isHeaderFunction, isStepFormConfig, isSubmitLabelFunction, registerAllFormComponents, registerCheckbox, registerDatePicker, registerEmailInput, registerFileInput, registerFormComponent, registerInput, registerRadioGroup, registerRichText, registerSelect, registerSlider, registerTextarea, useCreateStepControl, useFormContext, useOptionalStepControlContext, useStepControl, useStepControlContext };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/form/index.ts"],"sourcesContent":["/**\n * Form System Documentation\n *\n * This module provides a flexible form system with support for multiple form adapters, automatic form rendering,\n * and integration with validation libraries like Zod. The system is built on top of React Hook Form and provides\n * Refine integration.\n *\n * Key Components:\n * - SchemaForm: Automatically renders forms based on configuration\n * - FormRenderer: Core component that handles field rendering\n * - Form adapters: Support for different form handling strategies (RHF, Refine)\n * - Form component registry: Central registration for all form input components\n *\n * Basic Usage:\n *\n * 1. Import SchemaForm and define your form configuration:\n *\n * ```tsx\n * import { SchemaForm, FormFieldType } from '@lumeweb/portal-framework-ui';\n *\n * const formConfig = {\n *   fields: [\n *     {\n *       name: 'email',\n *       type: FormFieldType.TEXT,\n *       label: 'Email',\n *       required: true\n *     }\n *   ],\n *   onSubmit: (values) => console.log(values)\n * };\n *\n * <SchemaForm config={formConfig} />\n * ```\n *\n * 2. Register form components (typically in your app initialization):\n *\n * ```ts\n * import { registerAllFormComponents } from '@lumeweb/portal-framework-ui';\n *\n * registerAllFormComponents();\n * ```\n *\n * Validation Example with Zod:\n *\n * ```ts\n * import { z } from 'zod';\n *\n * const schema = z.object({\n *   email: z.string().email(),\n *   password: z.string().min(8)\n * });\n *\n * const = {\n *   = {\n *   validationSchema: schema,\n *   // ...other config\n * };\n * ```\n *\n * Complex Example with All Features:\n *\n * ```tsx\n * import { SchemaForm, FormFieldType } from '@lumeweb/portal-framework-ui';\n * import { z } from 'zod';\n * import { CustomImageUploader } from './components/CustomImageUploader';\n *\n * // Zod schema with complex validation\n * const userSchema = z.object({\n *   username: z.string().min(3).max(20),\n *   email: z.string().email(),\n *   password: z.string().min(8).regex(/[A-Z]/).regex(/[0-9]/),\n *   role: z.enum(['user', 'admin', 'moderator']),\n *   newsletter: z.boolean().optional(),\n *   newsletterType: z.enum(['daily', 'weekly']).optional(),\n *   bio: z.string().max(500).optional(),\n *   avatar: z.instanceof(File).optional(),\n *   terms: z.boolean().refine(v => v, \"Must accept terms\"),\n *   preferences: z.object({\n *     darkMode: z.boolean(),\n *     notifications: z.enum(['all', 'none', 'mentions'])\n *   })\n * });\n *\n * const formConfig = {\n *   layout: 'grid',\n *   formClassName: 'grid grid-cols-2 gap-4',\n *   adapter: 'refine',\n *   resource: 'users',\n *   validationSchema: userSchema,\n *   refineCoreProps: {\n *     meta: { audit: true },\n *     successNotification: (data) => ({\n type: type: 'success',\n *       message: `User ${data.username} created successfully`\n *     })\n *   },\n *   fields: [\n *     {\n *       name: 'username',\n *       type: FormFieldType.TEXT,\n *       label: 'Username',\n *       required: true,\n *       description: '3-20 characters, letters and numbers only',\n *       inputClassName: 'col-span-1'\n *     },\n *     {\n *       name: 'email',\n *       type: FormFieldType.TEXT,\n *       label: 'Email',\n *       inputType: 'email',\n *       required: true\n *     },\n *     {\n *       name: 'password',\n *       type: FormFieldType.TEXT,\n *       label: 'Password',\n *       inputType: 'password',\n *       required: true,\n *       description: 'Minimum 8 characters with 1 uppercase letter and 1 number'\n *     },\n *     {\n *       name: 'role',\n *       type: FormFieldType.SELECT,\n *       label: 'User Role',\n *       options: ['user', 'admin', 'moderator'],\n *       required: true,\n *       className: 'col-span-2'\n *     },\n *     {\n *       name: 'newsletter',\n *       type: FormFieldType.SWITCH,\n *       label: 'Subscribe to newsletter',\n *       description: 'Receive our weekly updates'\n *     },\n *     {\n: 'news: 'newsletterType',\n *       type: FormFieldType.RADIO,\n *       label: 'Newsletter Frequency',\n *       options: ['daily', 'weekly'],\n *       dependencies: ['newsletter'],\n *       hidden: (values) => !values.newsletter\n *     },\n *     {\n *       name: 'bio',\n *       type: FormFieldType.TEXTAREA,\n *       label: 'Biography',\n *       placeholder: 'Tell us about yourself...',\n *       className: 'col-span-2'\n *     },\n *     {\n *       name: 'avatar',\n *       type: FormFieldType.CUSTOM,\n *       component: CustomImageUploader,\n *       label: 'Profile Picture',\n *       description: 'Upload a JPEG or PNG image',\n *       className: 'col-span-2'\n *     },\n *     {\n *       name: 'preferences.darkMode',\n *       type: FormFieldType.SWITCH,\n *       label: 'Dark Mode'\n *     },\n *     {\n *       name: 'preferences.notifications',\n *       type: FormFieldType.SELECT,\n *       label: 'Notification Settings',\n *       options: ['all', 'none', 'mentions']\n *     },\n *     {\n *       name: 'terms',\n *       type: FormFieldType.CHECKBOX,\n *       label: 'I accept the terms and conditions',\n *       required: true,\n *       className: 'col-span-2'\n *     }\n *   ],\n *   footer: (methods, closeDialog) => (\n *     <div className=\"flex gap-4 justify-end col-span-2 mt-6\">\n *       <Button variant=\"outline\" onClick={closeDialog}>\n *         Cancel\n *       </Button>\n *       <Button\n *         loading={methods.formState.isSubmitting}\n *         type=\"submit\"\n *       >\n *         Create User\n *       </Button>\n *     </div>\n *   ),\n *   actionButtonsLayout: 'horizontal',\n *   onSuccess: (values) => console.log('Form submitted:', values),\n *   onError: (error) => console.error('Form error:', error),\n *   closeOnSubmit: false\n * };\n *\n * <SchemaForm config={formConfig} />\n * ```\n *\n * Field Dependency Example:\n *\n * ```ts\n * // Show newsletter frequency only when newsletter is subscribed\n * {\n *   name: 'newsletter',\n *   type: FormFieldType.SWITCH,\n *   label: 'Subscribe to newsletter'\n * },\n * {\n *   name: 'frequency',\n *   type: FormFieldType.SELECT,\n *   label: 'Newsletter frequency',\n *   options: ['weekly', 'monthly'],\n *   requires: {\n *     'newsletter': true // Only show if newsletter is checked\n *   },\n *   show: (values) => values.newsletter === true // Alternative conditional\n * }\n * ```\n *\n * Multi-Step Form Example:\n *\n * ```tsx\n * const multiStepConfig = {\n *   type: 'form',\n *   title: 'Registration',\n *   formConfig: {\n *     steps: [\n *       {\n *         title: 'Personal Information',\n *         fields: [\n *           { name: 'firstName', type: FormFieldType.TEXT, label: 'First Name' },\n *           { name: 'email', type: FormFieldType.TEXT, label: 'Email' }\n *         ]\n *       },\n *       {\n *         title: 'Preferences',\n *         fields: [\n *           { name: 'newsletter', type: FormFieldType.SWITCH, label: 'Subscribe' },\n *           { name: 'theme', type: FormFieldType.SELECT,\n *             options: ['light', 'dark'], label: 'Theme' }\n *         ]\n *       }\n *     ],\n *     stepBehavior: {\n *       defaultStep: 0,\n *       isBackValidate: true // Validate when going back steps\n *     },\n *     onSubmit: (values) => handleRegistration(values)\n *   }\n * };\n *\n * openDialog(multiStepConfig);\n * ```\n *\n * Adapters:\n * - 'rhf': Default React Hook Form adapter\n * - 'refine': Form adapter for Refine integration\n *\n * Component Registration:\n * All form components must be registered before use. Use either:\n * - registerAllFormComponents() - registers all built-in components\n * - Individual component registrars (registerInput(), registerSelect(), etc)\n */\nexport * from \"./adapters\";\nexport * from \"./context\";\nexport * from \"./fields\";\nexport * from \"./FormGroup\";\nexport * from \"./FormRenderer\";\nexport * from \"./register\";\nexport * from \"./SchemaForm\";\nexport * from \"./StepControlContext\";\nexport * from \"./StepSchemaForm\";\nexport * from \"./types\";\nexport * from \"./utils\";\nexport * from \"./WizardForm\";\n"],"mappings":""}

package/dist/esm/components/form/register.d.ts

@@ -0,0 +1,5 @@
+//#region src/components/form/register.d.ts
+declare function registerAllFormComponents(): void;
+//#endregion
+export { registerAllFormComponents };
+//# sourceMappingURL=register.d.ts.map

package/dist/esm/components/form/register.js

@@ -0,0 +1,46 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { init_Checkbox, registerCheckbox } from "./fields/Checkbox.js";
+import { init_DatePicker, registerDatePicker } from "./fields/DatePicker.js";
+import { registerEmailInput } from "./fields/EmailInput.js";
+import { init_FileInput, registerFileInput } from "./fields/FileInput.js";
+import { init_Input, registerInput } from "./fields/Input.js";
+import { init_RadioGroup, registerRadioGroup } from "./fields/RadioGroup.js";
+import { init_RichText, registerRichText } from "./fields/RichText.js";
+import { init_Select, registerSelect } from "./fields/Select.js";
+import { init_Slider, registerSlider } from "./fields/Slider.js";
+import { init_Textarea, registerTextarea } from "./fields/Textarea.js";
+import { init_fields } from "./fields/index.js";
+import { init_Switch, registerSwitch } from "./fields/Switch.js";
+
+//#region src/components/form/register.ts
+function registerAllFormComponents() {
+	registerCheckbox();
+	registerDatePicker();
+	registerFileInput();
+	registerEmailInput();
+	registerInput();
+	registerRadioGroup();
+	registerSelect();
+	registerSlider();
+	registerSwitch();
+	registerTextarea();
+	registerRichText();
+}
+var init_register = __esmMin(() => {
+	init_fields();
+	init_Checkbox();
+	init_DatePicker();
+	init_FileInput();
+	init_Input();
+	init_RadioGroup();
+	init_RichText();
+	init_Select();
+	init_Slider();
+	init_Switch();
+	init_Textarea();
+});
+
+//#endregion
+init_register();
+export { init_register, registerAllFormComponents };
+//# sourceMappingURL=register.js.map

package/dist/esm/components/form/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","names":[],"sources":["../../../../src/components/form/register.ts"],"sourcesContent":["import { registerEmailInput } from \"src/components/form/fields\";\n\nimport { registerCheckbox } from \"./fields/Checkbox\";\nimport { registerDatePicker } from \"./fields/DatePicker\";\nimport { registerFileInput } from \"./fields/FileInput\";\nimport { registerInput } from \"./fields/Input\";\nimport { registerRadioGroup } from \"./fields/RadioGroup\";\nimport { registerRichText } from \"./fields/RichText\";\nimport { registerSelect } from \"./fields/Select\";\nimport { registerSlider } from \"./fields/Slider\";\nimport { registerSwitch } from \"./fields/Switch\";\nimport { registerTextarea } from \"./fields/Textarea\";\n\nexport function registerAllFormComponents() {\n  registerCheckbox();\n  registerDatePicker();\n  registerFileInput();\n  registerEmailInput();\n  registerInput();\n  registerRadioGroup();\n  registerSelect();\n  registerSlider();\n  registerSwitch();\n  registerTextarea();\n  registerRichText();\n}\n"],"mappings":";;;;;;;;;;;;;;;AAaA,SAAgB,4BAA4B;AAC1C,mBAAkB;AAClB,qBAAoB;AACpB,oBAAmB;AACnB,qBAAoB;AACpB,gBAAe;AACf,qBAAoB;AACpB,iBAAgB;AAChB,iBAAgB;AAChB,iBAAgB;AAChB,mBAAkB;AAClB,mBAAkB;;;cAxB4C;gBAEX;kBACI;iBACF;aACR;kBACU;gBACJ;cACJ;cACA;cACA;gBACI"}