@jfdevelops/react-multi-step-form 1.0.0-alpha.32 → 1.0.0-alpha.34
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/dist/create-context.cjs +6 -8
- package/dist/create-context.cjs.map +1 -1
- package/dist/create-context.d.cts +19 -21
- package/dist/create-context.d.mts +19 -21
- package/dist/create-context.mjs +12 -14
- package/dist/create-context.mjs.map +1 -1
- package/dist/field.cjs.map +1 -1
- package/dist/field.d.cts +15 -15
- package/dist/field.d.mts +15 -15
- package/dist/field.mjs.map +1 -1
- package/dist/form-config.cjs +38 -6
- package/dist/form-config.cjs.map +1 -1
- package/dist/form-config.d.cts +52 -18
- package/dist/form-config.d.mts +52 -18
- package/dist/form-config.mjs +38 -6
- package/dist/form-config.mjs.map +1 -1
- package/dist/hooks/use-multi-step-form-data.cjs +4 -22
- package/dist/hooks/use-multi-step-form-data.cjs.map +1 -1
- package/dist/hooks/use-multi-step-form-data.d.cts +12 -10
- package/dist/hooks/use-multi-step-form-data.d.mts +12 -10
- package/dist/hooks/use-multi-step-form-data.mjs +5 -22
- package/dist/hooks/use-multi-step-form-data.mjs.map +1 -1
- package/dist/hooks/use-selector.cjs.map +1 -1
- package/dist/hooks/use-selector.d.cts +18 -4
- package/dist/hooks/use-selector.d.mts +18 -4
- package/dist/hooks/use-selector.mjs.map +1 -1
- package/dist/index.cjs +2 -3
- package/dist/index.d.cts +3 -3
- package/dist/index.d.mts +3 -3
- package/dist/index.mjs +3 -3
- package/dist/schema.cjs +87 -10
- package/dist/schema.cjs.map +1 -1
- package/dist/schema.d.cts +66 -25
- package/dist/schema.d.mts +66 -25
- package/dist/schema.mjs +88 -11
- package/dist/schema.mjs.map +1 -1
- package/dist/selector.cjs.map +1 -1
- package/dist/selector.d.cts +8 -8
- package/dist/selector.d.mts +8 -8
- package/dist/selector.mjs.map +1 -1
- package/dist/step-schema.cjs +54 -56
- package/dist/step-schema.cjs.map +1 -1
- package/dist/step-schema.d.cts +62 -61
- package/dist/step-schema.d.mts +62 -61
- package/dist/step-schema.mjs +57 -58
- package/dist/step-schema.mjs.map +1 -1
- package/dist/utils.cjs +12 -0
- package/dist/utils.cjs.map +1 -1
- package/dist/utils.d.cts +12 -0
- package/dist/utils.d.mts +12 -0
- package/dist/utils.mjs +13 -2
- package/dist/utils.mjs.map +1 -1
- package/package.json +2 -2
package/dist/step-schema.d.cts
CHANGED
|
@@ -1,36 +1,38 @@
|
|
|
1
|
+
import { CreateComponent, CreateComponentCallback, CreatedMultiStepFormComponent } from "./utils.cjs";
|
|
2
|
+
import { MultiStepFormSchemaConfig } from "./form-config.cjs";
|
|
1
3
|
import { UseSelector } from "./hooks/use-selector.cjs";
|
|
2
4
|
import { field } from "./field.cjs";
|
|
3
5
|
import { selector } from "./selector.cjs";
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
import { CasingType, Constrain, CreateHelperFunctionOptionsBase, DefaultCasing, DefaultStorageKey, Expand, GetCurrentStep, GetFieldsForStep, HelperFnChosenSteps, HelperFnInputBase, MultiStepFormSchemaStepConfig, MultiStepFormStepSchema, Relaxed, ResetFn, ResolvedStep, Step, StepNumbers, StrippedResolvedStep, UpdateFn, Updater, ValidStepKey } from "@jfdevelops/multi-step-form-core";
|
|
7
|
-
import { ComponentPropsWithRef, ReactNode } from "react";
|
|
6
|
+
import { Expand, HelperFn, HelperFnChosenSteps, HelperFnInput, MultiStepFormStepSchema, ResetFn, UpdateFn, fields, steps } from "@jfdevelops/multi-step-form-core";
|
|
7
|
+
import { StepSchema } from "@jfdevelops/multi-step-form-core/_internals";
|
|
8
8
|
|
|
9
9
|
//#region src/step-schema.d.ts
|
|
10
|
-
|
|
11
|
-
type CreateFunction<TArgs extends any[], TReturn = void> = (...args: TArgs) => TReturn;
|
|
12
|
-
type CreateComponent<TInput, TProps> = CreateFunction<[input: TInput, props: TProps], ReactNode>;
|
|
13
|
-
type CreateComponentCallback<TResolvedStep extends StrippedResolvedStep<AnyResolvedStep$1>, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TProps> = CreateComponent<HelperFnInputBase<TResolvedStep, TSteps, TChosenSteps>, TProps>;
|
|
14
|
-
type CreatedMultiStepFormComponent<TProps> = TProps extends undefined ? () => ReactNode : (props: TProps) => ReactNode;
|
|
15
|
-
type CreateComponentFn<TResolvedStep extends AnyResolvedStep$1, TStepNumbers extends StepNumbers<TResolvedStep>> = <chosenSteps extends HelperFnChosenSteps<TResolvedStep, TStepNumbers>, props = undefined>(options: CreateHelperFunctionOptionsBase<TResolvedStep, TStepNumbers, chosenSteps>, fn: CreateComponentCallback<TResolvedStep, TStepNumbers, chosenSteps, props>) => CreatedMultiStepFormComponent<props>;
|
|
10
|
+
type CreateComponentFn<def extends StepSchema.Config, value extends steps.instantiateSteps<def>> = <targetStep extends steps.StepNumbers<value>, props = undefined>(options: HelperFn.BaseOptions<value, [targetStep]>, fn: CreateComponentCallback<value, [targetStep], props>) => CreatedMultiStepFormComponent<props>;
|
|
16
11
|
declare namespace StepSpecificComponent {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
type instantiateFormComponentForAllSteps<def extends StepSchema.Config, value = MultiStepFormSchemaConfig.instantiateFormConfig<def>> = MultiStepFormSchemaConfig.EnabledForSteps.get<value> extends MultiStepFormSchemaConfig.defaultEnabledFor ? MultiStepFormSchemaConfig.instantiateFormConfig<def> : {};
|
|
13
|
+
type instantiateFormComponentForTuple<def extends StepSchema.Config, steps$1 extends steps$1.instantiateSteps, chosenSteps extends HelperFnChosenSteps.tupleNotation<steps$1.StepNumbers<steps$1>>> = MultiStepFormSchemaConfig.EnabledForSteps.get<def> extends HelperFnChosenSteps.tupleNotation<steps$1.StepNumbers<steps$1>> ? chosenSteps[number] extends steps$1.StepNumbers<steps$1> ? chosenSteps[number] extends MultiStepFormSchemaConfig.EnabledForSteps.get<def>[number] ? MultiStepFormSchemaConfig.instantiateFormConfig<def> : {} : {} : {};
|
|
14
|
+
type instantiateFormComponentForObject<def extends StepSchema.Config, steps$1 extends steps$1.instantiateSteps, chosenSteps extends HelperFnChosenSteps.tupleNotation<steps$1.StepNumbers<steps$1>>> = MultiStepFormSchemaConfig.EnabledForSteps.get<def> extends HelperFnChosenSteps.objectNotation<steps$1.StepNumbers<steps$1>> ? chosenSteps[number] extends steps$1.StepNumbers<steps$1> ? chosenSteps[number] extends keyof MultiStepFormSchemaConfig.EnabledForSteps.get<def> ? MultiStepFormSchemaConfig.instantiateFormConfig<def> : {} : {} : {};
|
|
15
|
+
type instantiateFormComponent<def extends StepSchema.Config, steps$1 extends steps$1.instantiateSteps<def>, chosenSteps extends HelperFnChosenSteps.tupleNotation<steps$1.StepNumbers<steps$1>>> = {
|
|
16
|
+
all: instantiateFormComponentForAllSteps<def>;
|
|
17
|
+
tuple: instantiateFormComponentForTuple<def, steps$1, chosenSteps>;
|
|
18
|
+
object: instantiateFormComponentForObject<def, steps$1, chosenSteps>;
|
|
19
|
+
};
|
|
20
|
+
export type formComponent<def extends StepSchema.Config, steps$1 extends steps$1.instantiateSteps<def>, chosenSteps extends HelperFnChosenSteps.tupleNotation<steps$1.StepNumbers<steps$1>>> = instantiateFormComponent<def, steps$1, chosenSteps>[MultiStepFormSchemaConfig.EnabledForSteps.resolveType<def, steps$1>];
|
|
21
|
+
export type updateWrappers<value extends steps$1.instantiateSteps, targetStep extends steps$1.StepNumbers<value>> = {
|
|
20
22
|
/**
|
|
21
23
|
* A useful wrapper around `update` to update the specific field.
|
|
22
24
|
*/
|
|
23
|
-
onInputChange: UpdateFn.stepSpecific<
|
|
25
|
+
onInputChange: UpdateFn.stepSpecific<value, targetStep>;
|
|
24
26
|
/**
|
|
25
27
|
* A useful wrapper for `update` to reset a specific field's value to its
|
|
26
28
|
* original config value.
|
|
27
29
|
* @resetFn
|
|
28
30
|
*/
|
|
29
|
-
reset: ResetFn.stepSpecific<
|
|
30
|
-
}
|
|
31
|
-
type buildCurrentStep<
|
|
32
|
-
export type input<
|
|
33
|
-
Field: field.component<
|
|
31
|
+
reset: ResetFn.stepSpecific<value, targetStep>;
|
|
32
|
+
};
|
|
33
|
+
type buildCurrentStep<def extends StepSchema.Config, value extends steps$1.instantiateSteps<def>, targetStep extends steps$1.StepNumbers<value>> = Expand<{ [key in targetStep]: HelperFnChosenSteps.currentStep<value, [key]> }>;
|
|
34
|
+
export type input<def extends StepSchema.Config, value extends steps$1.instantiateSteps<def>, targetStep extends steps$1.StepNumbers<value>, additionalCtx extends Record<string, unknown>> = HelperFnInput.BaseInput<value, [targetStep], never, additionalCtx> & updateWrappers<value, targetStep> & {
|
|
35
|
+
Field: field.component<buildCurrentStep<def, value, targetStep>>;
|
|
34
36
|
/**
|
|
35
37
|
* A hook for reactively selecting a value from the form context.
|
|
36
38
|
* The selector function receives the contextual data for the currently rendered step, and returns any derived value.
|
|
@@ -42,7 +44,7 @@ declare namespace StepSpecificComponent {
|
|
|
42
44
|
* @example
|
|
43
45
|
* const someValue = useSelector(ctx => ctx.fields.username.value);
|
|
44
46
|
*/
|
|
45
|
-
useSelector: UseSelector<
|
|
47
|
+
useSelector: UseSelector<buildCurrentStep<def, value, targetStep>>;
|
|
46
48
|
/**
|
|
47
49
|
* A component for reactively displaying a value from the form context.
|
|
48
50
|
* Unlike `useSelector`, this component only re-renders itself, not the parent component.
|
|
@@ -56,16 +58,16 @@ declare namespace StepSpecificComponent {
|
|
|
56
58
|
* {(value) => <p>First name: {value}</p>}
|
|
57
59
|
* </Selector>
|
|
58
60
|
*/
|
|
59
|
-
Selector: selector.component<
|
|
61
|
+
Selector: selector.component<buildCurrentStep<def, value, targetStep>>;
|
|
60
62
|
};
|
|
61
|
-
export type callback<
|
|
63
|
+
export type callback<def extends StepSchema.Config, value extends steps$1.instantiateSteps<def>, targetStep extends steps$1.StepNumbers<value>, props, additionalCtx extends Record<string, unknown> = {}> = CreateComponent<Expand<input<def, value, targetStep, additionalCtx> & formComponent<def, value, [targetStep]> & additionalCtx>, props>;
|
|
62
64
|
export const DEFAULT_FORM_INSTANCE_ALIAS = "form";
|
|
63
65
|
export type defaultFormInstanceAlias = typeof DEFAULT_FORM_INSTANCE_ALIAS;
|
|
64
|
-
export type formInstanceOptions<
|
|
66
|
+
export type formInstanceOptions<alias extends string, input, ret> = {
|
|
65
67
|
/**
|
|
66
68
|
* The name of the return value of the `render` method.
|
|
67
69
|
*/
|
|
68
|
-
alias?:
|
|
70
|
+
alias?: alias;
|
|
69
71
|
/**
|
|
70
72
|
* A function that renders/creates the form instance. This function will be called
|
|
71
73
|
* at the top level of the component, ensuring hooks are called in a valid React context.
|
|
@@ -89,64 +91,63 @@ declare namespace StepSpecificComponent {
|
|
|
89
91
|
* - In development, hook calls are logged to console.debug
|
|
90
92
|
* - The hook must be called at the component top level (enforced by the framework)
|
|
91
93
|
*/
|
|
92
|
-
render:
|
|
94
|
+
render: (input: input) => ret;
|
|
93
95
|
};
|
|
94
|
-
export
|
|
95
|
-
/**
|
|
96
|
-
* A function to select the data that will be available in the `fn`'s ctx.
|
|
97
|
-
* @param input The available input to create the context with.
|
|
98
|
-
* @returns The created ctx.
|
|
99
|
-
*/
|
|
100
|
-
ctxData?: (input: HelperFnInputBase<TResolvedStep, TSteps, 'all', HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TTargetStep>>) => TCtx;
|
|
101
|
-
}
|
|
102
|
-
export type options<TResolvedStep extends AnyResolvedStep$1, TSteps extends StepNumbers<TResolvedStep>, TTargetStep extends HelperFnChosenSteps<TResolvedStep, TSteps>, TFormInstanceAlias extends string, TFormInstance, TCtx> = CtxSelector<TResolvedStep, TSteps, TTargetStep, TCtx> & {
|
|
96
|
+
export type options<value extends steps$1.instantiateSteps, targetStep extends steps$1.StepNumbers<value>, formAlias extends string, formInstance, additionalCtx extends Record<string, unknown> = {}> = HelperFn.CtxDataSelector<value, [targetStep], additionalCtx> & {
|
|
103
97
|
/**
|
|
104
98
|
* If set to `true`, you'll be able to open the {@linkcode console} to view logs.
|
|
105
99
|
*/
|
|
106
100
|
debug?: boolean;
|
|
107
|
-
useFormInstance?: formInstanceOptions<
|
|
101
|
+
useFormInstance?: formInstanceOptions<formAlias, Pick<HelperFnInput.BaseInput<value, [targetStep]>, 'ctx'> & {
|
|
108
102
|
/**
|
|
109
103
|
* An object containing all the default values for the current step.
|
|
110
104
|
*/
|
|
111
|
-
defaultValues: Expand<
|
|
112
|
-
},
|
|
105
|
+
defaultValues: Expand<fields.getDefaultValues<value, [targetStep]>>;
|
|
106
|
+
}, formInstance>;
|
|
113
107
|
};
|
|
114
108
|
export {};
|
|
115
109
|
}
|
|
116
|
-
|
|
117
|
-
type ExtractedDefaultValues<TResolvedStep extends AnyResolvedStep$1, 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'] };
|
|
118
|
-
interface StepSpecificCreateComponentFn<TResolvedStep extends AnyResolvedStep$1, TSteps extends StepNumbers<TResolvedStep>, TTargetStep extends HelperFnChosenSteps<TResolvedStep, TSteps>, TFormAlias extends string, TFormProps extends object, TFormEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<TResolvedStep>> {
|
|
110
|
+
interface StepSpecificCreateComponentFn<def extends StepSchema.Config, value extends steps.instantiateSteps<def>, targetStep extends steps.StepNumbers<value>> {
|
|
119
111
|
/**
|
|
120
112
|
* A utility function to easily create a component for the current step.
|
|
121
113
|
* @param fn The callback function where the component is defined.
|
|
122
114
|
*/
|
|
123
|
-
<props = undefined>(fn:
|
|
115
|
+
<props = undefined>(fn: StepSpecificComponent.callback<def, value, targetStep, props>): CreatedMultiStepFormComponent<props>;
|
|
124
116
|
/**
|
|
125
117
|
* A utility function to easily create a component for the current step.
|
|
126
118
|
* @param options Specific config options for creating a component for the current step.
|
|
127
119
|
* @param fn The callback function where the component is defined.
|
|
128
120
|
* @returns The created component.
|
|
129
121
|
*/
|
|
130
|
-
<formInstance, additionalCtx extends Record<string, unknown> = {}, formInstanceAlias extends string = StepSpecificComponent.defaultFormInstanceAlias, props = undefined>(options: StepSpecificComponent.options<
|
|
122
|
+
<formInstance, additionalCtx extends Record<string, unknown> = {}, formInstanceAlias extends string = StepSpecificComponent.defaultFormInstanceAlias, props = undefined>(options: StepSpecificComponent.options<value, targetStep, MultiStepFormSchemaConfig.inferFormAlias<value>, formInstance, additionalCtx>, fn: StepSpecificComponent.callback<def, value, targetStep, MultiStepFormSchemaConfig.inferFormProps<value>, { [_ in formInstanceAlias]: formInstance }>): CreatedMultiStepFormComponent<props>;
|
|
131
123
|
}
|
|
132
|
-
|
|
133
|
-
createComponent:
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
124
|
+
interface HelperFunctions<def extends StepSchema.Config, value extends steps.instantiateSteps<def>> {
|
|
125
|
+
createComponent: CreateComponentFn<def, value>;
|
|
126
|
+
}
|
|
127
|
+
declare namespace MultiStepFormStepSchema$1 {
|
|
128
|
+
type config<def extends StepSchema.Config, value extends steps.instantiateSteps<def>> = def & {
|
|
129
|
+
/**
|
|
130
|
+
* The form configuration.
|
|
131
|
+
*
|
|
132
|
+
* This is a private property and is not meant to be used directly.
|
|
133
|
+
* If you want to configure the form, do so with the {@linkcode instantiateFormConfig} method.
|
|
134
|
+
* @private
|
|
135
|
+
* @internal
|
|
136
|
+
*/
|
|
137
|
+
form?: MultiStepFormSchemaConfig.FormConfig<def, value>;
|
|
138
|
+
};
|
|
139
|
+
}
|
|
140
|
+
declare module '@jfdevelops/multi-step-form-core' {
|
|
141
|
+
namespace steps {
|
|
142
|
+
interface ExtendedStepSpecificFunctions<def extends StepSchema.Config, value extends steps.instantiateSteps<def>, key$1 extends steps.StepNumbers<value>> {
|
|
143
|
+
createComponent: StepSpecificCreateComponentFn<def, value, key$1>;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
138
146
|
}
|
|
139
|
-
|
|
140
|
-
* Creates a default values object for the target step.
|
|
141
|
-
* @param steps The steps schema.
|
|
142
|
-
* @param targetStep The step to create the default values for.
|
|
143
|
-
* @returns An object containing the field names and their default values.
|
|
144
|
-
*/
|
|
145
|
-
declare function createDefaultValues<resolvedStep extends AnyResolvedStep$1, stepNumbers extends StepNumbers<resolvedStep>, targetStep extends ValidStepKey<stepNumbers>>(steps: resolvedStep, targetStep: targetStep): Expand<ExtractedDefaultValues<resolvedStep, stepNumbers, [targetStep]>>;
|
|
146
|
-
declare class MultiStepFormStepSchema$1<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 ResolvedStep<step, casing> = ResolvedStep<step, casing>, resolvedStep extends ResolvedStep$1<step, casing, core, formAlias, formEnabledFor, formProps> = ResolvedStep$1<step, casing, core, formAlias, formEnabledFor, formProps>, stepNumbers extends StepNumbers<resolvedStep> = StepNumbers<resolvedStep>> extends MultiStepFormStepSchema<step, casing> implements HelperFunctions<resolvedStep, stepNumbers> {
|
|
147
|
+
declare class MultiStepFormStepSchema$1<const def extends StepSchema.Config, value extends steps.instantiateSteps<def> = steps.instantiateSteps<def>> extends MultiStepFormStepSchema<def, value> implements HelperFunctions<def, value> {
|
|
147
148
|
#private;
|
|
148
|
-
value:
|
|
149
|
-
constructor(config:
|
|
149
|
+
value: value;
|
|
150
|
+
constructor(config: MultiStepFormStepSchema$1.config<def, value>);
|
|
150
151
|
private createFormComponent;
|
|
151
152
|
private createResolvedCtx;
|
|
152
153
|
private createStepSpecificComponentImpl;
|
|
@@ -158,9 +159,9 @@ declare class MultiStepFormStepSchema$1<step extends Step<casing>, casing extend
|
|
|
158
159
|
* any props that the component should have. This function must return a valid `JSX` element.
|
|
159
160
|
* @returns The created component for the step.
|
|
160
161
|
*/
|
|
161
|
-
createComponent<chosenSteps extends HelperFnChosenSteps<
|
|
162
|
-
createDefaultValues<targetStep extends
|
|
162
|
+
createComponent<chosenSteps extends HelperFnChosenSteps.main<value, steps.StepNumbers<value>>, props = undefined>(options: HelperFn.BaseOptions<value, chosenSteps>, fn: CreateComponentCallback<value, chosenSteps, props>): CreatedMultiStepFormComponent<props>;
|
|
163
|
+
createDefaultValues<targetStep extends steps.StepNumbers<value>>(targetStep: targetStep): Expand<fields.getDefaultValues<value, targetStep, fields.getFieldsForStep<value, targetStep>>>;
|
|
163
164
|
}
|
|
164
165
|
//#endregion
|
|
165
|
-
export {
|
|
166
|
+
export { CreateComponentFn, HelperFunctions, MultiStepFormStepSchema$1 as MultiStepFormStepSchema, StepSpecificComponent, StepSpecificCreateComponentFn };
|
|
166
167
|
//# sourceMappingURL=step-schema.d.cts.map
|
package/dist/step-schema.d.mts
CHANGED
|
@@ -1,36 +1,38 @@
|
|
|
1
|
+
import { CreateComponent, CreateComponentCallback, CreatedMultiStepFormComponent } from "./utils.mjs";
|
|
2
|
+
import { MultiStepFormSchemaConfig } from "./form-config.mjs";
|
|
1
3
|
import { UseSelector } from "./hooks/use-selector.mjs";
|
|
2
4
|
import { field } from "./field.mjs";
|
|
3
5
|
import { selector } from "./selector.mjs";
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
import { CasingType, Constrain, CreateHelperFunctionOptionsBase, DefaultCasing, DefaultStorageKey, Expand, GetCurrentStep, GetFieldsForStep, HelperFnChosenSteps, HelperFnInputBase, MultiStepFormSchemaStepConfig, MultiStepFormStepSchema, Relaxed, ResetFn, ResolvedStep, Step, StepNumbers, StrippedResolvedStep, UpdateFn, Updater, ValidStepKey } from "@jfdevelops/multi-step-form-core";
|
|
7
|
-
import { ComponentPropsWithRef, ReactNode } from "react";
|
|
6
|
+
import { Expand, HelperFn, HelperFnChosenSteps, HelperFnInput, MultiStepFormStepSchema, ResetFn, UpdateFn, fields, steps } from "@jfdevelops/multi-step-form-core";
|
|
7
|
+
import { StepSchema } from "@jfdevelops/multi-step-form-core/_internals";
|
|
8
8
|
|
|
9
9
|
//#region src/step-schema.d.ts
|
|
10
|
-
|
|
11
|
-
type CreateFunction<TArgs extends any[], TReturn = void> = (...args: TArgs) => TReturn;
|
|
12
|
-
type CreateComponent<TInput, TProps> = CreateFunction<[input: TInput, props: TProps], ReactNode>;
|
|
13
|
-
type CreateComponentCallback<TResolvedStep extends StrippedResolvedStep<AnyResolvedStep$1>, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TProps> = CreateComponent<HelperFnInputBase<TResolvedStep, TSteps, TChosenSteps>, TProps>;
|
|
14
|
-
type CreatedMultiStepFormComponent<TProps> = TProps extends undefined ? () => ReactNode : (props: TProps) => ReactNode;
|
|
15
|
-
type CreateComponentFn<TResolvedStep extends AnyResolvedStep$1, TStepNumbers extends StepNumbers<TResolvedStep>> = <chosenSteps extends HelperFnChosenSteps<TResolvedStep, TStepNumbers>, props = undefined>(options: CreateHelperFunctionOptionsBase<TResolvedStep, TStepNumbers, chosenSteps>, fn: CreateComponentCallback<TResolvedStep, TStepNumbers, chosenSteps, props>) => CreatedMultiStepFormComponent<props>;
|
|
10
|
+
type CreateComponentFn<def extends StepSchema.Config, value extends steps.instantiateSteps<def>> = <targetStep extends steps.StepNumbers<value>, props = undefined>(options: HelperFn.BaseOptions<value, [targetStep]>, fn: CreateComponentCallback<value, [targetStep], props>) => CreatedMultiStepFormComponent<props>;
|
|
16
11
|
declare namespace StepSpecificComponent {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
type instantiateFormComponentForAllSteps<def extends StepSchema.Config, value = MultiStepFormSchemaConfig.instantiateFormConfig<def>> = MultiStepFormSchemaConfig.EnabledForSteps.get<value> extends MultiStepFormSchemaConfig.defaultEnabledFor ? MultiStepFormSchemaConfig.instantiateFormConfig<def> : {};
|
|
13
|
+
type instantiateFormComponentForTuple<def extends StepSchema.Config, steps$1 extends steps$1.instantiateSteps, chosenSteps extends HelperFnChosenSteps.tupleNotation<steps$1.StepNumbers<steps$1>>> = MultiStepFormSchemaConfig.EnabledForSteps.get<def> extends HelperFnChosenSteps.tupleNotation<steps$1.StepNumbers<steps$1>> ? chosenSteps[number] extends steps$1.StepNumbers<steps$1> ? chosenSteps[number] extends MultiStepFormSchemaConfig.EnabledForSteps.get<def>[number] ? MultiStepFormSchemaConfig.instantiateFormConfig<def> : {} : {} : {};
|
|
14
|
+
type instantiateFormComponentForObject<def extends StepSchema.Config, steps$1 extends steps$1.instantiateSteps, chosenSteps extends HelperFnChosenSteps.tupleNotation<steps$1.StepNumbers<steps$1>>> = MultiStepFormSchemaConfig.EnabledForSteps.get<def> extends HelperFnChosenSteps.objectNotation<steps$1.StepNumbers<steps$1>> ? chosenSteps[number] extends steps$1.StepNumbers<steps$1> ? chosenSteps[number] extends keyof MultiStepFormSchemaConfig.EnabledForSteps.get<def> ? MultiStepFormSchemaConfig.instantiateFormConfig<def> : {} : {} : {};
|
|
15
|
+
type instantiateFormComponent<def extends StepSchema.Config, steps$1 extends steps$1.instantiateSteps<def>, chosenSteps extends HelperFnChosenSteps.tupleNotation<steps$1.StepNumbers<steps$1>>> = {
|
|
16
|
+
all: instantiateFormComponentForAllSteps<def>;
|
|
17
|
+
tuple: instantiateFormComponentForTuple<def, steps$1, chosenSteps>;
|
|
18
|
+
object: instantiateFormComponentForObject<def, steps$1, chosenSteps>;
|
|
19
|
+
};
|
|
20
|
+
export type formComponent<def extends StepSchema.Config, steps$1 extends steps$1.instantiateSteps<def>, chosenSteps extends HelperFnChosenSteps.tupleNotation<steps$1.StepNumbers<steps$1>>> = instantiateFormComponent<def, steps$1, chosenSteps>[MultiStepFormSchemaConfig.EnabledForSteps.resolveType<def, steps$1>];
|
|
21
|
+
export type updateWrappers<value extends steps$1.instantiateSteps, targetStep extends steps$1.StepNumbers<value>> = {
|
|
20
22
|
/**
|
|
21
23
|
* A useful wrapper around `update` to update the specific field.
|
|
22
24
|
*/
|
|
23
|
-
onInputChange: UpdateFn.stepSpecific<
|
|
25
|
+
onInputChange: UpdateFn.stepSpecific<value, targetStep>;
|
|
24
26
|
/**
|
|
25
27
|
* A useful wrapper for `update` to reset a specific field's value to its
|
|
26
28
|
* original config value.
|
|
27
29
|
* @resetFn
|
|
28
30
|
*/
|
|
29
|
-
reset: ResetFn.stepSpecific<
|
|
30
|
-
}
|
|
31
|
-
type buildCurrentStep<
|
|
32
|
-
export type input<
|
|
33
|
-
Field: field.component<
|
|
31
|
+
reset: ResetFn.stepSpecific<value, targetStep>;
|
|
32
|
+
};
|
|
33
|
+
type buildCurrentStep<def extends StepSchema.Config, value extends steps$1.instantiateSteps<def>, targetStep extends steps$1.StepNumbers<value>> = Expand<{ [key in targetStep]: HelperFnChosenSteps.currentStep<value, [key]> }>;
|
|
34
|
+
export type input<def extends StepSchema.Config, value extends steps$1.instantiateSteps<def>, targetStep extends steps$1.StepNumbers<value>, additionalCtx extends Record<string, unknown>> = HelperFnInput.BaseInput<value, [targetStep], never, additionalCtx> & updateWrappers<value, targetStep> & {
|
|
35
|
+
Field: field.component<buildCurrentStep<def, value, targetStep>>;
|
|
34
36
|
/**
|
|
35
37
|
* A hook for reactively selecting a value from the form context.
|
|
36
38
|
* The selector function receives the contextual data for the currently rendered step, and returns any derived value.
|
|
@@ -42,7 +44,7 @@ declare namespace StepSpecificComponent {
|
|
|
42
44
|
* @example
|
|
43
45
|
* const someValue = useSelector(ctx => ctx.fields.username.value);
|
|
44
46
|
*/
|
|
45
|
-
useSelector: UseSelector<
|
|
47
|
+
useSelector: UseSelector<buildCurrentStep<def, value, targetStep>>;
|
|
46
48
|
/**
|
|
47
49
|
* A component for reactively displaying a value from the form context.
|
|
48
50
|
* Unlike `useSelector`, this component only re-renders itself, not the parent component.
|
|
@@ -56,16 +58,16 @@ declare namespace StepSpecificComponent {
|
|
|
56
58
|
* {(value) => <p>First name: {value}</p>}
|
|
57
59
|
* </Selector>
|
|
58
60
|
*/
|
|
59
|
-
Selector: selector.component<
|
|
61
|
+
Selector: selector.component<buildCurrentStep<def, value, targetStep>>;
|
|
60
62
|
};
|
|
61
|
-
export type callback<
|
|
63
|
+
export type callback<def extends StepSchema.Config, value extends steps$1.instantiateSteps<def>, targetStep extends steps$1.StepNumbers<value>, props, additionalCtx extends Record<string, unknown> = {}> = CreateComponent<Expand<input<def, value, targetStep, additionalCtx> & formComponent<def, value, [targetStep]> & additionalCtx>, props>;
|
|
62
64
|
export const DEFAULT_FORM_INSTANCE_ALIAS = "form";
|
|
63
65
|
export type defaultFormInstanceAlias = typeof DEFAULT_FORM_INSTANCE_ALIAS;
|
|
64
|
-
export type formInstanceOptions<
|
|
66
|
+
export type formInstanceOptions<alias extends string, input, ret> = {
|
|
65
67
|
/**
|
|
66
68
|
* The name of the return value of the `render` method.
|
|
67
69
|
*/
|
|
68
|
-
alias?:
|
|
70
|
+
alias?: alias;
|
|
69
71
|
/**
|
|
70
72
|
* A function that renders/creates the form instance. This function will be called
|
|
71
73
|
* at the top level of the component, ensuring hooks are called in a valid React context.
|
|
@@ -89,64 +91,63 @@ declare namespace StepSpecificComponent {
|
|
|
89
91
|
* - In development, hook calls are logged to console.debug
|
|
90
92
|
* - The hook must be called at the component top level (enforced by the framework)
|
|
91
93
|
*/
|
|
92
|
-
render:
|
|
94
|
+
render: (input: input) => ret;
|
|
93
95
|
};
|
|
94
|
-
export
|
|
95
|
-
/**
|
|
96
|
-
* A function to select the data that will be available in the `fn`'s ctx.
|
|
97
|
-
* @param input The available input to create the context with.
|
|
98
|
-
* @returns The created ctx.
|
|
99
|
-
*/
|
|
100
|
-
ctxData?: (input: HelperFnInputBase<TResolvedStep, TSteps, 'all', HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TTargetStep>>) => TCtx;
|
|
101
|
-
}
|
|
102
|
-
export type options<TResolvedStep extends AnyResolvedStep$1, TSteps extends StepNumbers<TResolvedStep>, TTargetStep extends HelperFnChosenSteps<TResolvedStep, TSteps>, TFormInstanceAlias extends string, TFormInstance, TCtx> = CtxSelector<TResolvedStep, TSteps, TTargetStep, TCtx> & {
|
|
96
|
+
export type options<value extends steps$1.instantiateSteps, targetStep extends steps$1.StepNumbers<value>, formAlias extends string, formInstance, additionalCtx extends Record<string, unknown> = {}> = HelperFn.CtxDataSelector<value, [targetStep], additionalCtx> & {
|
|
103
97
|
/**
|
|
104
98
|
* If set to `true`, you'll be able to open the {@linkcode console} to view logs.
|
|
105
99
|
*/
|
|
106
100
|
debug?: boolean;
|
|
107
|
-
useFormInstance?: formInstanceOptions<
|
|
101
|
+
useFormInstance?: formInstanceOptions<formAlias, Pick<HelperFnInput.BaseInput<value, [targetStep]>, 'ctx'> & {
|
|
108
102
|
/**
|
|
109
103
|
* An object containing all the default values for the current step.
|
|
110
104
|
*/
|
|
111
|
-
defaultValues: Expand<
|
|
112
|
-
},
|
|
105
|
+
defaultValues: Expand<fields.getDefaultValues<value, [targetStep]>>;
|
|
106
|
+
}, formInstance>;
|
|
113
107
|
};
|
|
114
108
|
export {};
|
|
115
109
|
}
|
|
116
|
-
|
|
117
|
-
type ExtractedDefaultValues<TResolvedStep extends AnyResolvedStep$1, 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'] };
|
|
118
|
-
interface StepSpecificCreateComponentFn<TResolvedStep extends AnyResolvedStep$1, TSteps extends StepNumbers<TResolvedStep>, TTargetStep extends HelperFnChosenSteps<TResolvedStep, TSteps>, TFormAlias extends string, TFormProps extends object, TFormEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<TResolvedStep>> {
|
|
110
|
+
interface StepSpecificCreateComponentFn<def extends StepSchema.Config, value extends steps.instantiateSteps<def>, targetStep extends steps.StepNumbers<value>> {
|
|
119
111
|
/**
|
|
120
112
|
* A utility function to easily create a component for the current step.
|
|
121
113
|
* @param fn The callback function where the component is defined.
|
|
122
114
|
*/
|
|
123
|
-
<props = undefined>(fn:
|
|
115
|
+
<props = undefined>(fn: StepSpecificComponent.callback<def, value, targetStep, props>): CreatedMultiStepFormComponent<props>;
|
|
124
116
|
/**
|
|
125
117
|
* A utility function to easily create a component for the current step.
|
|
126
118
|
* @param options Specific config options for creating a component for the current step.
|
|
127
119
|
* @param fn The callback function where the component is defined.
|
|
128
120
|
* @returns The created component.
|
|
129
121
|
*/
|
|
130
|
-
<formInstance, additionalCtx extends Record<string, unknown> = {}, formInstanceAlias extends string = StepSpecificComponent.defaultFormInstanceAlias, props = undefined>(options: StepSpecificComponent.options<
|
|
122
|
+
<formInstance, additionalCtx extends Record<string, unknown> = {}, formInstanceAlias extends string = StepSpecificComponent.defaultFormInstanceAlias, props = undefined>(options: StepSpecificComponent.options<value, targetStep, MultiStepFormSchemaConfig.inferFormAlias<value>, formInstance, additionalCtx>, fn: StepSpecificComponent.callback<def, value, targetStep, MultiStepFormSchemaConfig.inferFormProps<value>, { [_ in formInstanceAlias]: formInstance }>): CreatedMultiStepFormComponent<props>;
|
|
131
123
|
}
|
|
132
|
-
|
|
133
|
-
createComponent:
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
124
|
+
interface HelperFunctions<def extends StepSchema.Config, value extends steps.instantiateSteps<def>> {
|
|
125
|
+
createComponent: CreateComponentFn<def, value>;
|
|
126
|
+
}
|
|
127
|
+
declare namespace MultiStepFormStepSchema$1 {
|
|
128
|
+
type config<def extends StepSchema.Config, value extends steps.instantiateSteps<def>> = def & {
|
|
129
|
+
/**
|
|
130
|
+
* The form configuration.
|
|
131
|
+
*
|
|
132
|
+
* This is a private property and is not meant to be used directly.
|
|
133
|
+
* If you want to configure the form, do so with the {@linkcode instantiateFormConfig} method.
|
|
134
|
+
* @private
|
|
135
|
+
* @internal
|
|
136
|
+
*/
|
|
137
|
+
form?: MultiStepFormSchemaConfig.FormConfig<def, value>;
|
|
138
|
+
};
|
|
139
|
+
}
|
|
140
|
+
declare module '@jfdevelops/multi-step-form-core' {
|
|
141
|
+
namespace steps {
|
|
142
|
+
interface ExtendedStepSpecificFunctions<def extends StepSchema.Config, value extends steps.instantiateSteps<def>, key$1 extends steps.StepNumbers<value>> {
|
|
143
|
+
createComponent: StepSpecificCreateComponentFn<def, value, key$1>;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
138
146
|
}
|
|
139
|
-
|
|
140
|
-
* Creates a default values object for the target step.
|
|
141
|
-
* @param steps The steps schema.
|
|
142
|
-
* @param targetStep The step to create the default values for.
|
|
143
|
-
* @returns An object containing the field names and their default values.
|
|
144
|
-
*/
|
|
145
|
-
declare function createDefaultValues<resolvedStep extends AnyResolvedStep$1, stepNumbers extends StepNumbers<resolvedStep>, targetStep extends ValidStepKey<stepNumbers>>(steps: resolvedStep, targetStep: targetStep): Expand<ExtractedDefaultValues<resolvedStep, stepNumbers, [targetStep]>>;
|
|
146
|
-
declare class MultiStepFormStepSchema$1<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 ResolvedStep<step, casing> = ResolvedStep<step, casing>, resolvedStep extends ResolvedStep$1<step, casing, core, formAlias, formEnabledFor, formProps> = ResolvedStep$1<step, casing, core, formAlias, formEnabledFor, formProps>, stepNumbers extends StepNumbers<resolvedStep> = StepNumbers<resolvedStep>> extends MultiStepFormStepSchema<step, casing> implements HelperFunctions<resolvedStep, stepNumbers> {
|
|
147
|
+
declare class MultiStepFormStepSchema$1<const def extends StepSchema.Config, value extends steps.instantiateSteps<def> = steps.instantiateSteps<def>> extends MultiStepFormStepSchema<def, value> implements HelperFunctions<def, value> {
|
|
147
148
|
#private;
|
|
148
|
-
value:
|
|
149
|
-
constructor(config:
|
|
149
|
+
value: value;
|
|
150
|
+
constructor(config: MultiStepFormStepSchema$1.config<def, value>);
|
|
150
151
|
private createFormComponent;
|
|
151
152
|
private createResolvedCtx;
|
|
152
153
|
private createStepSpecificComponentImpl;
|
|
@@ -158,9 +159,9 @@ declare class MultiStepFormStepSchema$1<step extends Step<casing>, casing extend
|
|
|
158
159
|
* any props that the component should have. This function must return a valid `JSX` element.
|
|
159
160
|
* @returns The created component for the step.
|
|
160
161
|
*/
|
|
161
|
-
createComponent<chosenSteps extends HelperFnChosenSteps<
|
|
162
|
-
createDefaultValues<targetStep extends
|
|
162
|
+
createComponent<chosenSteps extends HelperFnChosenSteps.main<value, steps.StepNumbers<value>>, props = undefined>(options: HelperFn.BaseOptions<value, chosenSteps>, fn: CreateComponentCallback<value, chosenSteps, props>): CreatedMultiStepFormComponent<props>;
|
|
163
|
+
createDefaultValues<targetStep extends steps.StepNumbers<value>>(targetStep: targetStep): Expand<fields.getDefaultValues<value, targetStep, fields.getFieldsForStep<value, targetStep>>>;
|
|
163
164
|
}
|
|
164
165
|
//#endregion
|
|
165
|
-
export {
|
|
166
|
+
export { CreateComponentFn, HelperFunctions, MultiStepFormStepSchema$1 as MultiStepFormStepSchema, StepSpecificComponent, StepSpecificCreateComponentFn };
|
|
166
167
|
//# sourceMappingURL=step-schema.d.mts.map
|