@akinon/akiform-builder 0.0.1

package/dist/src/FormBuilderWatch.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { FormField } from './types';
+type FormBuilderWatchProps = {
+    builderFields: FormField[];
+    isDebounced?: boolean;
+    handleChange: (data: any) => void;
+};
+/**
+ * Reasons why seperate FormBuilderWatch component is created from FormBuilder:
+ * 1. FormBuilderWatch is a controlled component, value of form fields is controlled. In any given time, value of any field can be forced from parent. It's directly working with value instead of defaultValues. Also there is no way to change defaultValues after first render.
+ * 2. FormBuilderWatch is watching form changes and calls the given callback function. It's not using form methods like handleSubmit, reset, etc.
+ * 3. It's meticulously designed to not create loop. Since it's controlled and watching form changes, it's easy to create infinite loop. For example, callback can be called as result of form change, and parent can react to this change by returning same values to form.
+ */
+export declare const FormBuilderWatch: ({ builderFields, handleChange, isDebounced }: FormBuilderWatchProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=FormBuilderWatch.d.ts.map

package/dist/src/FormBuilderWatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBuilderWatch.d.ts","sourceRoot":"","sources":["../../src/FormBuilderWatch.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,KAAK,qBAAqB,GAAG;IAC3B,aAAa,EAAE,SAAS,EAAE,CAAC;IAE3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,iDAI1B,qBAAqB,sBAuEvB,CAAC"}

package/dist/src/RenderField.d.ts

@@ -0,0 +1,5 @@
+import { Control } from '@akinon/akiform';
+import React from 'react';
+import { FormField } from './types';
+export declare function RenderField(field: FormField, control: Control): React.JSX.Element | "unsupported field type" | undefined;
+//# sourceMappingURL=RenderField.d.ts.map

package/dist/src/RenderField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderField.d.ts","sourceRoot":"","sources":["../../src/RenderField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAY,MAAM,iBAAiB,CAAC;AAMpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAGL,SAAS,EAIV,MAAM,SAAS,CAAC;AAGjB,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,4DAuF7D"}

package/dist/src/component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FormBuilderProps } from './types';
+export declare const FormBuilder: React.FC<FormBuilderProps>;
+//# sourceMappingURL=component.d.ts.map

package/dist/src/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/component.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4ClD,CAAC"}

package/dist/src/hook.d.ts

@@ -0,0 +1,3 @@
+import { FormBuilderMethods, FormField } from './types';
+export declare const useFormBuilder: (fields: FormField[]) => FormBuilderMethods;
+//# sourceMappingURL=hook.d.ts.map

package/dist/src/hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../src/hook.ts"],"names":[],"mappings":"AAQA,OAAO,EAAmB,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzE,eAAO,MAAM,cAAc,WAAY,SAAS,EAAE,KAAG,kBAkCpD,CAAC"}

package/dist/src/index.d.ts

@@ -0,0 +1,7 @@
+import { transformToFormFields } from '../transformers';
+import { FormBuilder } from './component';
+import { useFormBuilder } from './hook';
+export { FormBuilderWatch } from './FormBuilderWatch';
+export { FormBuilder, transformToFormFields, useFormBuilder };
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,cAAc,EAAE,CAAC;AAC9D,cAAc,SAAS,CAAC"}

package/dist/src/types.d.ts

@@ -0,0 +1,73 @@
+/// <reference types="react" />
+import { Control, FieldArrayWithId, FormProps, UseFormReturn } from '@akinon/akiform';
+import { AnySchema } from '@akinon/akival';
+export type FieldType = 'input' | 'number' | 'select' | 'checkbox' | 'datepicker' | 'field-array' | 'area';
+export interface BaseField<T = any> {
+    type: FieldType;
+    key: string;
+    label: string;
+    defaultValue?: T;
+    value?: T;
+    validation?: AnySchema;
+}
+export interface FieldArrayField extends BaseField {
+    type: 'field-array';
+    config: FieldArrayConfig;
+}
+interface FieldArrayConfig {
+    name: string;
+    keyName?: string;
+    fields: FormField[];
+}
+export interface InputField extends BaseField<string> {
+    type: 'input';
+    placeholder?: string;
+}
+export interface NumberField extends BaseField<number> {
+    type: 'number';
+    placeholder?: string;
+}
+export interface SelectField extends BaseField<string | number> {
+    type: 'select';
+    options: Array<{
+        key: string;
+        value: string | number;
+        label: string;
+    }>;
+    placeholder?: string;
+}
+export interface CheckboxField extends BaseField<boolean> {
+    type: 'checkbox';
+}
+export interface DatePickerField extends BaseField<Date> {
+    type: 'datepicker';
+}
+export type FormField = InputField | NumberField | SelectField | CheckboxField | DatePickerField | FieldArrayField;
+export interface FormBuilderProps extends FormProps {
+    builderFields: FormField[];
+    children?: React.ReactNode;
+    hasDevTool: boolean;
+}
+export interface FormBuilderMethods {
+    register: UseFormReturn['register'];
+    handleSubmit: UseFormReturn['handleSubmit'];
+    watch: UseFormReturn['watch'];
+    reset: UseFormReturn['reset'];
+    control: Control;
+    formState: UseFormReturn['formState'];
+    getValues: UseFormReturn['getValues'];
+    setValue: UseFormReturn['setValue'];
+    trigger: UseFormReturn['trigger'];
+    fieldArrays: Array<{
+        name: string;
+        fields: FieldArrayWithId<any>[];
+        append: (value: any) => void;
+        remove: (index?: number | number[]) => void;
+        prepend: (value: any) => void;
+        insert: (index: number, value: any) => void;
+        swap: (indexA: number, indexB: number) => void;
+        move: (from: number, to: number) => void;
+    }>;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@akinon/akiform-builder",
+  "description": "Form builder library for form operations.",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@akinon/ui-button": "0.0.1",
+    "@akinon/ui-input": "0.0.1",
+    "@akinon/ui-date-picker": "0.0.1",
+    "@akinon/ui-input-number": "0.0.1",
+    "@akinon/ui-checkbox": "0.0.1",
+    "@akinon/ui-select": "0.0.1"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0",
+    "eslint-config-custom": "0.1.0",
+    "@akinon/vite-config": "^0.1.0",
+    "tsconfig": "0.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@akinon/akiform": "0.0.0",
+    "@akinon/akival": "0.0.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "vite build",
+    "lint": "eslint *.ts*",
+    "test": "vitest run",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest watch",
+    "typecheck": "tsc --noEmit"
+  }
+}