@jfdevelops/react-multi-step-form 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist/types/field.d.ts

@@ -1,22 +1,23 @@
-import { AnyResolvedStep, StepNumbers, Updater, ValidStepKey } from '@jfdevelops/multi-step-form';
+import { AnyResolvedStep, fields, Override, Updater } from '@jfdevelops/multi-step-form';
 import { ReactNode } from 'react';
 export declare namespace Field {
-    type getFields<TResolvedStep extends AnyResolvedStep, TTargetStep extends StepNumbers<TResolvedStep>> = TResolvedStep[ValidStepKey<TTargetStep>]['fields'];
-    type childrenProps<TResolvedStep extends AnyResolvedStep, TStepNumbers extends StepNumbers<TResolvedStep>, TTargetStep extends TStepNumbers, TFields extends getFields<TResolvedStep, TTargetStep>, TField extends keyof TFields> = getFields<TResolvedStep, TTargetStep>[TField] & {
+    type sharedProps<TField extends string> = {
         /**
          * The name of the field.
          */
         name: TField;
+    };
+    export type childrenProps<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep, TField extends fields.getDeep<TResolvedStep, TTargetStep>, TValue extends fields.resolveDeepPath<TResolvedStep, TTargetStep, TField> = fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>> = sharedProps<TField> & Override<fields.get<TResolvedStep, TTargetStep>[fields.parentOf<TField>], 'defaultValue', TValue> & {
         /**
          * A useful wrapper around `update` to update the specific field.
          * @param value The new value for the field.
          */
-        onInputChange: (value: Updater<TFields[TField]['defaultValue']>) => void;
+        onInputChange: (value: Updater<TValue>) => void;
     };
-    type props<TResolvedStep extends AnyResolvedStep, TStepNumbers extends StepNumbers<TResolvedStep>, TTargetStep extends TStepNumbers, TFields extends getFields<TResolvedStep, TTargetStep>, TField extends keyof TFields> = {
-        name: TField;
-        children: (props: childrenProps<TResolvedStep, TStepNumbers, TTargetStep, TFields, TField>) => ReactNode;
+    export type props<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep, TField extends fields.getDeep<TResolvedStep, TTargetStep>> = sharedProps<TField> & {
+        children: (props: childrenProps<TResolvedStep, TTargetStep, TField>) => ReactNode;
     };
-    type component<TResolvedStep extends AnyResolvedStep, TStepNumbers extends StepNumbers<TResolvedStep>, TTargetStep extends TStepNumbers> = <TFields extends getFields<TResolvedStep, TTargetStep>, TField extends keyof TFields>(props: props<TResolvedStep, TStepNumbers, TTargetStep, TFields, TField>) => ReactNode;
+    export type component<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep> = <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(props: props<TResolvedStep, TTargetStep, TField>) => ReactNode;
+    export {};
 }
-export declare function createField<TResolvedStep extends AnyResolvedStep, TStepNumbers extends StepNumbers<TResolvedStep>, TTargetStep extends TStepNumbers>(propsCreator: <TFields extends Field.getFields<TResolvedStep, TTargetStep>, TField extends keyof TFields>(name: TField) => Field.childrenProps<TResolvedStep, TStepNumbers, TTargetStep, TFields, TField>): <TFields extends Field.getFields<TResolvedStep, TTargetStep>, TField extends keyof TFields>(props: Field.props<TResolvedStep, TStepNumbers, TTargetStep, TFields, TField>) => ReactNode;
+export declare function createField<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep>(propsCreator: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(name: TField) => Field.childrenProps<TResolvedStep, TTargetStep, TField>): Field.component<TResolvedStep, TTargetStep>;

package/dist/types/schema.d.ts

@@ -22,6 +22,7 @@ export declare namespace MultiStepFormSchema {
 export interface MultiStepFormSchemaOptions<TStep extends Step<TCasing>, TCasing extends CasingType, TStorageKey extends string, TFormAlias extends string, TFormEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<TResolvedStep>, TFormProps extends object, TResolvedStep extends ResolvedStep<TStep, TCasing> = ResolvedStep<TStep, TCasing>> extends MultiStepFormSchemaBaseOptions<TStep, TCasing, TStorageKey>, MultiStepFormSchemaConfig.Form<TResolvedStep, TFormAlias, TFormEnabledFor, TFormProps> {
 }
 export declare class MultiStepFormSchema<step extends Step<casing>, casing extends CasingType = DefaultCasing, storageKey extends string = DefaultStorageKey, formAlias extends string = MultiStepFormSchemaConfig.defaultFormAlias, formEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<resolvedStep> = MultiStepFormSchemaConfig.defaultEnabledFor, formProps extends object = ComponentPropsWithRef<'form'>, resolvedStep extends ResolvedStep<step, casing> = ResolvedStep<step, casing>, stepNumbers extends StepNumbers<resolvedStep> = StepNumbers<resolvedStep>> extends MultiStepFormSchemaCore<step, casing, ResolvedStepCore<step, casing>, StepNumbers<ResolvedStepCore<step, casing>>, storageKey> implements HelperFunctions<resolvedStep, stepNumbers> {
+    #private;
     stepSchema: MultiStepFormStepSchema<step, casing, storageKey, formAlias, formEnabledFor, formProps>;
     constructor(config: MultiStepFormSchemaOptions<step, Constrain<casing, CasingType>, storageKey, formAlias, formEnabledFor, formProps>);
     createComponent<chosenSteps extends HelperFnChosenSteps<resolvedStep, stepNumbers>, props = undefined>(options: CreateHelperFunctionOptionsBase<resolvedStep, stepNumbers, chosenSteps>, fn: CreateComponentCallback<resolvedStep, stepNumbers, chosenSteps, props>): CreatedMultiStepFormComponent<props>;

package/dist/types/step-schema.d.ts

@@ -1,4 +1,4 @@
-import { CasingType, Constrain, CreateHelperFunctionOptionsBase, DefaultCasing, DefaultStorageKey, Expand, GetCurrentStep, GetFieldsForStep, HelperFnChosenSteps, HelperFnInputBase, MultiStepFormSchemaStepConfig as MultiStepFormSchemaStepBaseConfig, MultiStepFormStepSchema as MultiStepFormStepSchemaBase, Relaxed, ResolvedStep as ResolvedCoreStep, Step, StepNumbers, StrippedResolvedStep, Updater, ValidStepKey } from '@jfdevelops/multi-step-form';
+import { CasingType, Constrain, CreateHelperFunctionOptionsBase, DefaultCasing, DefaultStorageKey, Expand, GetCurrentStep, GetFieldsForStep, HelperFnChosenSteps, HelperFnInputBase, MultiStepFormSchemaStepConfig as MultiStepFormSchemaStepBaseConfig, MultiStepFormStepSchema as MultiStepFormStepSchemaBase, Relaxed, ResolvedStep as ResolvedCoreStep, Step, StepNumbers, StrippedResolvedStep, UpdateFn, Updater, ValidStepKey } from '@jfdevelops/multi-step-form';
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { Field } from './field';
 import { MultiStepFormSchemaConfig } from './form-config';
@@ -15,16 +15,14 @@ export type CreateComponentFn<TResolvedStep extends AnyResolvedStep, TStepNumber
 export declare namespace StepSpecificComponent {
     type formComponent<TResolvedStep extends StrippedResolvedStep<AnyResolvedStep>, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TFormAlias extends string, TFormProps extends object, TFormEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<TResolvedStep>> = TFormEnabledFor extends MultiStepFormSchemaConfig.defaultEnabledFor ? MultiStepFormSchemaConfig.formCtx<TFormAlias, TFormProps> : TFormEnabledFor extends HelperFnChosenSteps.tupleNotation<ValidStepKey<TSteps>> ? TFormEnabledFor[number] extends keyof TResolvedStep ? TChosenSteps extends HelperFnChosenSteps.tupleNotation<ValidStepKey<TSteps>> ? TChosenSteps[number] extends keyof TResolvedStep ? TChosenSteps[number] extends TFormEnabledFor[number] ? MultiStepFormSchemaConfig.formCtx<TFormAlias, TFormProps> : {} : {} : {} : {} : keyof TFormEnabledFor extends keyof TResolvedStep ? TChosenSteps extends HelperFnChosenSteps.tupleNotation<ValidStepKey<TSteps>> ? TChosenSteps[number] extends keyof TResolvedStep ? TChosenSteps[number] extends keyof TFormEnabledFor ? MultiStepFormSchemaConfig.formCtx<TFormAlias, TFormProps> : {} : {} : {} : {};
     type onInputChange<TResolvedStep extends AnyResolvedStep, TStepNumbers extends StepNumbers<TResolvedStep>, TTargetStep extends TStepNumbers> = <CurrentStepData extends GetCurrentStep<TResolvedStep, TTargetStep>, Field extends keyof CurrentStepData>(field: Field, updater: Updater<CurrentStepData[Field], Relaxed<CurrentStepData[Field]>>) => void;
-    interface Input<TResolvedStep extends StrippedResolvedStep<AnyResolvedStep>, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>> extends HelperFnInputBase<TResolvedStep, TSteps, TChosenSteps> {
+    interface Input<TResolvedStep extends StrippedResolvedStep<AnyResolvedStep>, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TAdditionalCtx extends Record<string, unknown>, TStepNumber extends HelperFnChosenSteps.extractStepNumber<TResolvedStep, TSteps, TChosenSteps> = HelperFnChosenSteps.extractStepNumber<TResolvedStep, TSteps, TChosenSteps>> extends HelperFnInputBase<TResolvedStep, TSteps, TChosenSteps, never, TAdditionalCtx> {
         /**
          * A useful wrapper around `update` to update the specific field.
-         * @param field The field to update.
-         * @param updater The new value for the specified field.
          */
-        onInputChange: <CurrentStepData extends GetCurrentStep<TResolvedStep, HelperFnChosenSteps.extractStepNumber<TResolvedStep, TSteps, TChosenSteps>>, Field extends keyof CurrentStepData>(field: Field, updater: Updater<CurrentStepData[Field], Relaxed<CurrentStepData[Field]>>) => void;
-        Field: Field.component<TResolvedStep, TSteps, HelperFnChosenSteps.extractStepNumber<TResolvedStep, TSteps, TChosenSteps>>;
+        onInputChange: TStepNumber extends TSteps ? UpdateFn.stepSpecific<TResolvedStep, TSteps, ValidStepKey<TStepNumber>> : never;
+        Field: Field.component<TResolvedStep, ValidStepKey<HelperFnChosenSteps.extractStepNumber<TResolvedStep, TSteps, TChosenSteps>>>;
     }
-    type callback<TResolvedStep extends StrippedResolvedStep<AnyResolvedStep>, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TProps, TFormAlias extends string, TFormProps extends object, TFormEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<TResolvedStep>, TAdditionalInput extends object = {}> = CreateComponent<Input<TResolvedStep, TSteps, TChosenSteps> & formComponent<TResolvedStep, TSteps, TChosenSteps, TFormAlias, TFormProps, TFormEnabledFor> & TAdditionalInput, TProps>;
+    type callback<TResolvedStep extends StrippedResolvedStep<AnyResolvedStep>, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TProps, TFormAlias extends string, TFormProps extends object, TFormEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<TResolvedStep>, TAdditionalInput extends object, TAdditionalCtx extends Record<string, unknown>> = CreateComponent<Expand<Input<TResolvedStep, TSteps, TChosenSteps, TAdditionalCtx> & formComponent<TResolvedStep, TSteps, TChosenSteps, TFormAlias, TFormProps, TFormEnabledFor> & TAdditionalInput>, TProps>;
     const DEFAULT_FORM_INSTANCE_ALIAS = "form";
     type defaultFormInstanceAlias = typeof DEFAULT_FORM_INSTANCE_ALIAS;
     type formInstanceOptions<TAlias extends string, TRenderInput, TReturn> = {
@@ -57,16 +55,26 @@ export declare namespace StepSpecificComponent {
          */
         render: CreateFunction<[input: TRenderInput], TReturn>;
     };
-    type options<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TTargetStep extends HelperFnChosenSteps<TResolvedStep, TSteps>, TFormInstanceAlias extends string, TFormInstance> = {
+    type options<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TTargetStep extends HelperFnChosenSteps<TResolvedStep, TSteps>, TFormInstanceAlias extends string, TFormInstance, TCtx> = {
+        /**
+         * If set to `true`, you'll be able to open the {@linkcode console} to view logs.
+         */
+        debug?: boolean;
         useFormInstance?: formInstanceOptions<TFormInstanceAlias, HelperFnInputBase<TResolvedStep, TSteps, TTargetStep> & {
             /**
              * An object containing all the default values for the current step.
              */
             defaultValues: Expand<ExtractedDefaultValues<TResolvedStep, TSteps, TTargetStep>>;
         }, TFormInstance>;
+        /**
+         * A function to select the data that will be available in the `fn`'s ctx.
+         * @param input The available input to create the context with.
+         * @returns The created ctx.
+         */
+        ctxData?: (input: HelperFnInputBase<TResolvedStep, TSteps, 'all', HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TTargetStep>>) => TCtx;
     };
 }
-export type CreateStepSpecificComponentCallback<TResolvedStep extends StrippedResolvedStep<AnyResolvedStep>, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TProps, TFormAlias extends string, TFormProps extends object, TFormEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<TResolvedStep>, TAdditionalInput extends object = {}> = StepSpecificComponent.callback<TResolvedStep, TSteps, TChosenSteps, TProps, TFormAlias, TFormProps, TFormEnabledFor, TAdditionalInput>;
+export type CreateStepSpecificComponentCallback<TResolvedStep extends StrippedResolvedStep<AnyResolvedStep>, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TProps, TFormAlias extends string, TFormProps extends object, TFormEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<TResolvedStep>, TAdditionalInput extends object = {}, TAdditionalCtx extends Record<string, unknown> = {}> = StepSpecificComponent.callback<TResolvedStep, TSteps, TChosenSteps, TProps, TFormAlias, TFormProps, TFormEnabledFor, TAdditionalInput, TAdditionalCtx>;
 export type ExtractedDefaultValues<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TTargetStep extends HelperFnChosenSteps<TResolvedStep, TSteps>, TExtractedStepNumber extends number = HelperFnChosenSteps.extractStepNumber<TResolvedStep, TSteps, TTargetStep>, TFields extends GetFieldsForStep<TResolvedStep, ValidStepKey<TExtractedStepNumber>> = GetFieldsForStep<TResolvedStep, ValidStepKey<TExtractedStepNumber>>> = {
     [field in keyof TFields]: TFields[field]['defaultValue'];
 };
@@ -82,9 +90,9 @@ export interface StepSpecificCreateComponentFn<TResolvedStep extends AnyResolved
      * @param fn The callback function where the component is defined.
      * @returns The created component.
      */
-    <formInstance, formInstanceAlias extends string = StepSpecificComponent.defaultFormInstanceAlias, props = undefined>(options: StepSpecificComponent.options<TResolvedStep, TSteps, TTargetStep, formInstanceAlias, formInstance>, fn: CreateStepSpecificComponentCallback<TResolvedStep, TSteps, TTargetStep, props, TFormAlias, TFormProps, TFormEnabledFor, {
+    <formInstance, additionalCtx extends Record<string, unknown> = {}, formInstanceAlias extends string = StepSpecificComponent.defaultFormInstanceAlias, props = undefined>(options: StepSpecificComponent.options<TResolvedStep, TSteps, TTargetStep, formInstanceAlias, formInstance, additionalCtx>, fn: CreateStepSpecificComponentCallback<TResolvedStep, TSteps, TTargetStep, props, TFormAlias, TFormProps, TFormEnabledFor, {
         [_ in formInstanceAlias]: formInstance;
-    }>): CreatedMultiStepFormComponent<props>;
+    }, additionalCtx>): CreatedMultiStepFormComponent<props>;
 }
 export type ResolvedStep<TStep extends Step<TDefaultCasing>, TDefaultCasing extends CasingType = DefaultCasing, TResolvedStep extends ResolvedCoreStep<TStep, TDefaultCasing> = ResolvedCoreStep<TStep, TDefaultCasing>, TFormAlias extends string = MultiStepFormSchemaConfig.defaultFormAlias, TFormEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<TResolvedStep> = MultiStepFormSchemaConfig.defaultEnabledFor, TFormProps extends object = ComponentPropsWithRef<'form'>> = {
     [stepKey in keyof TResolvedStep]: TResolvedStep[stepKey] & (stepKey extends ValidStepKey<StepNumbers<TResolvedStep>> ? {
@@ -105,13 +113,12 @@ export interface HelperFunctions<TResolvedStep extends AnyResolvedStep, TStepNum
  */
 export declare function createDefaultValues<resolvedStep extends AnyResolvedStep, stepNumbers extends StepNumbers<resolvedStep>, targetStep extends ValidStepKey<stepNumbers>>(steps: resolvedStep, targetStep: targetStep): Expand<ExtractedDefaultValues<resolvedStep, stepNumbers, [targetStep]>>;
 export declare class MultiStepFormStepSchema<step extends Step<casing>, casing extends CasingType = DefaultCasing, storageKey extends string = DefaultStorageKey, formAlias extends string = MultiStepFormSchemaConfig.defaultFormAlias, formEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<resolvedStep> = MultiStepFormSchemaConfig.defaultEnabledFor, formProps extends object = ComponentPropsWithRef<'form'>, core extends ResolvedCoreStep<step, casing> = ResolvedCoreStep<step, casing>, resolvedStep extends ResolvedStep<step, casing, core, formAlias, formEnabledFor, formProps> = ResolvedStep<step, casing, core, formAlias, formEnabledFor, formProps>, stepNumbers extends StepNumbers<resolvedStep> = StepNumbers<resolvedStep>> extends MultiStepFormStepSchemaBase<step, casing> implements HelperFunctions<resolvedStep, stepNumbers> {
+    #private;
     value: resolvedStep;
     constructor(config: MultiStepFormSchemaStepConfig<step, Constrain<casing, CasingType>, storageKey, formAlias, formEnabledFor, formProps>);
     private createFormComponent;
     private createStepSpecificComponentImpl;
     private createStepSpecificComponentFactory;
-    private createComponentImpl;
-    private createComponentForStep;
     /**
      * A helper function to create a component for a specific step.
      * @param options The options for creating the step specific component.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jfdevelops/react-multi-step-form",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.11",
   "description": "",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -18,25 +18,30 @@
   ],
   "keywords": [],
   "author": "Joey Finkel",
-  "license": "ISC",
+  "license": "MIT",
   "devDependencies": {
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "@types/use-sync-external-store": "^1.5.0",
     "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser-playwright": "^4.0.8",
+    "playwright": "^1.56.1",
     "react": "^19.1.1",
     "tw-animate-css": "^1.4.0",
     "vite": "^7.1.5",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.8",
+    "vitest-browser-react": "^2.0.2"
   },
   "dependencies": {
     "use-sync-external-store": "^1.6.0",
-    "@jfdevelops/multi-step-form": "1.0.0-alpha.1"
+    "@jfdevelops/multi-step-form": "1.0.0-alpha.10"
   },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "watch": "vite build --watch",
-    "test": "vitest"
+    "test": "vitest",
+    "test:browser": "vitest --config=vite.config.ts"
   }
 }