@jfdevelops/react-multi-step-form 1.0.0-alpha.15 → 1.0.0-alpha.16

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@jfdevelops/react-multi-step-form",
-  "version": "1.0.0-alpha.15",
+  "version": "1.0.0-alpha.16",
   "description": "",
   "repository": "https://github.com/jfdevelops/multi-step-form",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.d.cts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    }
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist"
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "use-sync-external-store": "^1.6.0",
-    "@jfdevelops/multi-step-form-core": "1.0.0-alpha.12"
+    "@jfdevelops/multi-step-form-core": "1.0.0-alpha.13"
   },
   "publishConfig": {
     "access": "public",
@@ -44,7 +44,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "watch": "vite build --watch"
+    "build": "tsdown",
+    "watch": "tsdown --watch"
   }
 }

package/dist/create-context.d.ts

@@ -1,156 +0,0 @@
-import { ComponentProps, ReactNode } from 'react';
-import { UseMultiStepFormData } from './hooks/use-multi-step-form-data';
-import { MultiStepFormSchema, AnyMultiStepFormSchema } from './schema';
-import { CreatedMultiStepFormComponent, CreateFunction } from './step-schema';
-type BaseOptions<TSchema extends AnyMultiStepFormSchema, TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>> = {
-    /**
-     * The step to return data from.
-     */
-    targetStep: TTargetStep;
-};
-export type UseCurrentStepOptions<TSchema extends AnyMultiStepFormSchema, TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>, props, isDataGuaranteed extends boolean = false> = BaseOptions<TSchema, TTargetStep> & {
-    /**
-     * Determines if the result should follow "strictness".
-     * The result will change based on the value for this option.
-     *
-     * - `true`: `data` is **defined** and `hasData` isn't available.
-     * - `false`: `data` _can be_ `undefined`, but the `hasData` property is available
-     * to help with type narrowing.
-     *
-     * @default false
-     * @example
-     * ### `true`
-     * ```tsx
-     * function MyComponent() {
-     *  const { data, NoCurrentData } = useCurrentStep({
-     *    stepNumber: 1,
-     *    isDataGuaranteed: true,
-     *  })
-     *
-     * // Notice how `NoCurrentData` is still available
-     * // Do things with `data` here
-     * }
-     * ```
-     *
-     * ### `false` - The default
-     * ```tsx
-     * function MyComponent() {
-     *  const { data, NoCurrentData, hasData } = useCurrentStep({
-     *    stepNumber: 1,
-     *  })
-     *
-     *  if (!hasData) {
-     *    return <NoCurrentData />
-     *  }
-     *
-     * // Do things with `data` here
-     * }
-     * ```
-     */
-    isDataGuaranteed?: isDataGuaranteed;
-    /**
-     * An optional transformation function to provide a custom not found message.
-     */
-    notFoundMessage?: CreateFunction<[
-        ctx: BaseOptions<TSchema, TTargetStep>,
-        props: props
-    ], ReactNode>;
-};
-export interface UseCurrentStepBaseResult<TData = unknown, TProps = undefined> {
-    /**
-     * The current step's data.
-     */
-    data: TData | undefined;
-    /**
-     * Boolean indicating if the current step has data.
-     */
-    hasData: boolean;
-    /**
-     * Component to render some sort of error if `data` isn't defined.
-     */
-    NoCurrentData: CreatedMultiStepFormComponent<TProps extends undefined ? Omit<ComponentProps<'div'>, 'children'> : TProps>;
-}
-export interface UseCurrentStepErrorResult<TData = unknown, TProps = undefined> extends UseCurrentStepBaseResult<TData, TProps> {
-    data: undefined;
-    hasData: false;
-}
-export interface UseCurrentStepSuccessResult<TData = unknown, TProps = undefined> extends UseCurrentStepBaseResult<TData, TProps> {
-    data: TData;
-    hasData: true;
-}
-export type UseCurrentStepResult<TSchema extends AnyMultiStepFormSchema, TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>, props, isDataGuaranteed extends boolean = false> = isDataGuaranteed extends true ? Omit<UseCurrentStepSuccessResult<MultiStepFormSchema.getData<TSchema, TTargetStep>, props>, 'hasData'> : UseCurrentStepErrorResult<MultiStepFormSchema.getData<TSchema, TTargetStep>, props> | UseCurrentStepSuccessResult<MultiStepFormSchema.getData<TSchema, TTargetStep>, props>;
-export type UseProgressBaseOptions<TSchema extends AnyMultiStepFormSchema, TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>> = BaseOptions<TSchema, TTargetStep> & {
-    /**
-     * The total amount of steps that are in the form.
-     *
-     * @default schema.stepData.steps.value.length
-     */
-    totalSteps?: number;
-    /**
-     * The highest value the progress indicator should go.
-     *
-     * @default 100
-     */
-    maxProgressValue?: number;
-};
-export type UseProgressOptions<TSchema extends AnyMultiStepFormSchema, TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>, props> = UseProgressBaseOptions<TSchema, TTargetStep> & {
-    /**
-     * An optional transformation function to provide a custom progress text.
-     */
-    progressTextTransformer?: CreateFunction<[
-        ctx: Required<UseProgressBaseOptions<TSchema, TTargetStep>>,
-        props
-    ], ReactNode>;
-};
-export type UseProgressResult<props> = {
-    /**
-     * The value of the progress indicator.
-     */
-    value: number;
-    /**
-     * The highest value the progress indicator can be.
-     *
-     * @default 100
-     */
-    maxProgressValue: number;
-    ProgressText: CreatedMultiStepFormComponent<props extends undefined ? Omit<ComponentProps<'div'>, 'children'> : props>;
-};
-export type CreateHOC<TContext, TProps> = (ctx: TContext, props: TProps) => CreatedMultiStepFormComponent<TProps>;
-export type MultiStepFormContextResult<TSchema extends AnyMultiStepFormSchema, TResolvedStep extends MultiStepFormSchema.resolvedStep<TSchema> = MultiStepFormSchema.resolvedStep<TSchema>> = {
-    useMultiStepFormData: UseMultiStepFormData<TSchema>;
-    /**
-     * Gets the data for the specified step.
-     *
-     * @returns The data for the given step number.
-     */
-    useCurrentStepData: <targetStep extends keyof TResolvedStep, props = undefined, isDataGuaranteed extends boolean = false>(options: UseCurrentStepOptions<TSchema, targetStep, props, isDataGuaranteed>) => UseCurrentStepResult<TSchema, targetStep, props, isDataGuaranteed>;
-    useProgress: <targetStep extends keyof TResolvedStep, props = undefined>(options: UseProgressOptions<TSchema, targetStep, props>) => UseProgressResult<props>;
-    /**
-     * A hook that can be used to check if the form can be restarted. If no {@linkcode cb}
-     * is provided, the return value will be dictated by if there is an object stored in
-     * {@link MultiStepFormSchema#storage}.
-     * @param cb A callback function to provide custom logic for if the form can restart.
-     * @returns A boolean indicating if the form can restart.
-     */
-    useCanRestartForm: (cb?: (canRestart: boolean) => boolean) => boolean;
-    /**
-     * A HOC for creating a custom progress text for `useProgress`.
-     * @param options Options for creating the HOC.
-     * @param cb The callback function for creating the HOC.
-     * @returns A HOC for the `progressTextTransformer` option of the `useProgress` hook.
-     */
-    withProgressText: <targetStep extends keyof TResolvedStep, props = undefined>(options: UseProgressBaseOptions<TSchema, targetStep>, cb: (ctx: Required<UseProgressBaseOptions<TSchema, targetStep>>, props: props) => ReactNode) => CreatedMultiStepFormComponent<props>;
-    /**
-     * A HOC for creating a custom not found component for when a step's data is `undefined`.
-     * @param options Options for creating the HOC.
-     * @param cb The callback function for creating the HOC.
-     * @returns A HOC for the `notFoundMessage` option of the `useCurrentStep` hook.
-     */
-    withNoStepDataFound: <targetStep extends keyof TResolvedStep, props = undefined>(options: BaseOptions<TSchema, targetStep>, cb: (ctx: BaseOptions<TSchema, targetStep>, props: props) => ReactNode) => CreatedMultiStepFormComponent<props>;
-};
-/**
- * Create multi step form context with a {@linkcode MultiStepFormSchema} instance.
- * @param schema The {@linkcode MultiStepFormSchema} instance.
- */
-export declare function createMultiStepFormContext<schema extends AnyMultiStepFormSchema, resolvedStep extends MultiStepFormSchema.resolvedStep<schema> = MultiStepFormSchema.resolvedStep<schema>>(schema: schema): MultiStepFormContextResult<schema>;
-export {};

package/dist/field.d.ts

@@ -1,23 +0,0 @@
-import { AnyResolvedStep, fields, Override, Updater } from '@jfdevelops/multi-step-form-core';
-import { ReactNode } from 'react';
-export declare namespace Field {
-    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<TValue>) => void;
-    };
-    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;
-    };
-    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, TTargetStep extends keyof TResolvedStep>(propsCreator: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(name: TField) => Field.childrenProps<TResolvedStep, TTargetStep, TField>): Field.component<TResolvedStep, TTargetStep>;

package/dist/form-config.d.ts

@@ -1,161 +0,0 @@
-import { Expand, HelperFnChosenSteps, StepNumbers, ValidStepKey } from '@jfdevelops/multi-step-form-core';
-import { ComponentPropsWithRef, JSX } from 'react';
-import { AnyResolvedStep, CreatedMultiStepFormComponent } from './step-schema';
-export declare namespace MultiStepFormSchemaConfig {
-    export const DEFAULT_FORM_ALIAS = "Form";
-    export type defaultEnabledFor = HelperFnChosenSteps.defaultStringOption;
-    export type defaultFormAlias = typeof DEFAULT_FORM_ALIAS;
-    export type formEnabledFor<TResolvedStep extends AnyResolvedStep> = HelperFnChosenSteps<TResolvedStep, StepNumbers<TResolvedStep>>;
-    type strippedResolvedSteps<T extends AnyResolvedStep> = {
-        [_ in keyof T]: Expand<Omit<T[_], 'createComponent' | 'createHelperFn'>>;
-    };
-    export type AvailableStepForForm<TResolvedStep extends AnyResolvedStep, TEnabledFor extends formEnabledFor<TResolvedStep>> = TEnabledFor extends defaultEnabledFor ? strippedResolvedSteps<TResolvedStep> : TEnabledFor extends [
-        ValidStepKey<StepNumbers<TResolvedStep>>,
-        ...ValidStepKey<StepNumbers<TResolvedStep>>[]
-    ] ? TEnabledFor[number] extends keyof TResolvedStep ? Pick<strippedResolvedSteps<TResolvedStep>, TEnabledFor[number]> : never : keyof TEnabledFor extends keyof TResolvedStep ? Expand<Pick<strippedResolvedSteps<TResolvedStep>, Extract<keyof TResolvedStep, keyof TEnabledFor>>> : never;
-    export type formCtx<TAlias extends string, TProps> = {
-        [_ in TAlias]: CreatedMultiStepFormComponent<TProps>;
-    };
-    export type renderFnData<TResolvedStep extends AnyResolvedStep, TEnabledFor extends formEnabledFor<TResolvedStep>> = {
-        /**
-         * The id for the form, either a custom one or the default one.
-         */
-        id: string;
-        /**
-         * The chosen steps that are available.
-         */
-        steps: Expand<AvailableStepForForm<TResolvedStep, TEnabledFor>>;
-    };
-    /**
-     * The configuration options for the `form` option.
-     */
-    export interface FormConfig<TResolvedStep extends AnyResolvedStep, TAlias extends string, TFormEnabledFor extends formEnabledFor<TResolvedStep>, TCustomFormProps extends object> {
-        /**
-         * The `id` for the form component.
-         *
-         * If there is no value provided, the default id will the **current step key**.
-         *
-         * @default `${currentStep}`
-         */
-        id?: string;
-        /**
-         * The "name" of the form component.
-         * @default 'Form'
-         * @example
-         * ```tsx
-         * const schema = createMultiStepFormSchema({
-         *  steps: {
-         *    step1: {
-         *      title: 'Step 1',
-         *      fields: {
-         *        firstName: {
-         *          defaultValue: ''
-         *       }
-         *     }
-         *   },
-         *   form: {
-         *    alias: 'MyCustomForm',
-         *    render() {
-         *      // return custom form component here
-         *     }
-         *   }
-         *  }
-         * })
-         *
-         * const Step1 = schema.stepSchema.step1.createComponent(
-         *  ({ ctx, MyCustomForm }, props: { children: ReactNode }) =>
-         *     // Notice how the form is available with its alias
-         *     <MyCustomFormName>{children}</MyCustomFormName>
-         *  )
-         * ```
-         */
-        alias?: TAlias;
-        /**
-         * If the form component should be accessible for each step when calling `createComponent`.
-         *
-         * If no value is given, the form will be accessible for all the steps.
-         */
-        enabledForSteps?: TFormEnabledFor;
-        /**
-         *
-         * @param data The data that is available for creating the custom form.
-         * @param props Props that can be used for the custom form.
-         * @returns An {@see JSX.Element} that is the custom form.
-         * @example
-         * ### With custom props
-         * ```tsx
-         * type CustomProps = {
-         *   title: string;
-         *   description?: string;
-         *   children: ReactNode;
-         * };
-         *
-         * const schema = createMultiStepFormSchema({
-         *  steps: {
-         *    step1: {
-         *      title: 'Step 1',
-         *      fields: {
-         *        firstName: {
-         *          defaultValue: ''
-         *       }
-         *     }
-         *   },
-         *   form: {
-         *    alias: 'MyCustomForm',
-         *    render(data, props: CustomProps) {
-         *      return (
-         *         <div>
-         *          <h1>{props.title}</h1>
-         *          <p>{props.description}</p>
-         *          <form>{props.children}</form>
-         *         </div>
-         *       );
-         *     }
-         *   }
-         *  }
-         * })
-         * ```
-         * ### Without custom props
-         * ```tsx
-         * const schema = createMultiStepFormSchema({
-         *  steps: {
-         *    step1: {
-         *      title: 'Step 1',
-         *      fields: {
-         *        firstName: {
-         *          defaultValue: ''
-         *       }
-         *     }
-         *   },
-         *   form: {
-         *    alias: 'MyCustomForm',
-         *    render(data, props) {
-         *      // The default type for `props` will be `ComponentPropsWithRef<'form'>`
-         *      // return custom form component here
-         *     }
-         *   }
-         *  }
-         * })
-         * ```
-         */
-        render: (data: renderFnData<TResolvedStep, TFormEnabledFor>, props: TCustomFormProps) => JSX.Element;
-    }
-    export interface Form<TResolvedStep extends AnyResolvedStep, TAlias extends string, TFormEnabledFor extends formEnabledFor<TResolvedStep>, TCustomFormProps extends object> {
-        form?: FormConfig<TResolvedStep, TAlias, TFormEnabledFor, TCustomFormProps>;
-    }
-    /**
-     * Compares {@linkcode enabledFor} to the {@linkcode target} to determine if the form
-     * should be available.
-     * @param target The target steps the form _should_ be available for.
-     * @param enabledFor The steps that the form _is_ enabled for.
-     * @returns A boolean representing if the form should be available.
-     */
-    export function isFormAvailable<TResolvedStep extends AnyResolvedStep, TTarget extends HelperFnChosenSteps<TResolvedStep, StepNumbers<TResolvedStep>>, TEnabledFor extends formEnabledFor<TResolvedStep>>(target: TTarget, enabledFor: TEnabledFor): boolean;
-    /**
-     * Creates a form component with a default id.
-     * @param id The default id for the form.
-     * @returns A form component with a default {@linkcode id}.
-     */
-    export function createDefaultForm(id: string): (props: Omit<ComponentPropsWithRef<"form">, "id">) => import("react/jsx-runtime").JSX.Element;
-    export {};
-}

package/dist/hooks/use-multi-step-form-data.d.ts

@@ -1,26 +0,0 @@
-import { AnyMultiStepFormSchema, MultiStepFormSchema } from '../schema';
-export type UseMultiStepFormDataOptions<TSchema extends AnyMultiStepFormSchema, TTarget extends keyof MultiStepFormSchema.resolvedStep<TSchema> = keyof MultiStepFormSchema.resolvedStep<TSchema>> = {
-    targetStep: TTarget;
-};
-export type UseMultiStepFormData<TSchema extends AnyMultiStepFormSchema, TResolvedStep extends MultiStepFormSchema.resolvedStep<TSchema> = MultiStepFormSchema.resolvedStep<TSchema>> = {
-    /**
-     * Returns the entire {@linkcode MultiStepFormSchema instance}.
-     */
-    (): TSchema;
-    /**
-     * Returns the data for the target step.
-     * @param stepNumber The step number to return.
-     * @throws {TypeError} If `options.stepNumber` is invalid.
-     */
-    <targetStep extends keyof TResolvedStep>(options: UseMultiStepFormDataOptions<TSchema, targetStep>): MultiStepFormSchema.getData<TSchema, targetStep>;
-    /**
-     * Returns the specified data from the {@linkcode MultiStepFormSchema} instance via the callback's return.
-     */
-    <data>(selector: (schema: TSchema) => data): data;
-};
-export declare function throwIfInvalidStepNumber<schema extends AnyMultiStepFormSchema>(schema: schema, targetStep: unknown): MultiStepFormSchema.stepNumbers<schema>;
-export declare function createMultiStepFormDataHook<schema extends AnyMultiStepFormSchema>(schema: schema): UseMultiStepFormData<schema>;
-declare function useMultiStepFormData<schema extends AnyMultiStepFormSchema>(schema: schema): schema;
-declare function useMultiStepFormData<schema extends AnyMultiStepFormSchema, targetStep extends keyof MultiStepFormSchema.resolvedStep<schema>>(schema: schema, options: UseMultiStepFormDataOptions<schema, targetStep>): MultiStepFormSchema.getData<schema, targetStep>;
-declare function useMultiStepFormData<schema extends AnyMultiStepFormSchema, data>(schema: schema, selector: (schema: schema) => data): data;
-export { useMultiStepFormData };