@jfdevelops/multi-step-form-core 1.0.0-alpha.11

package/dist/_internals.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _internals = require("./types-C4Mgnku6.cjs");
+exports.MultiStepFormStepSchemaInternal = _internals.MultiStepFormStepSchemaInternal;
+exports.isValidStepKey = _internals.isValidStepKey;
+Object.defineProperty(exports, "path", {
+  enumerable: true,
+  get: () => _internals.path
+});
+//# sourceMappingURL=_internals.cjs.map

package/dist/_internals.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"_internals.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/_internals.mjs

@@ -0,0 +1,7 @@
+import { a, b, p } from "./types-CYf1_lBe.js";
+export {
+  a as MultiStepFormStepSchemaInternal,
+  b as isValidStepKey,
+  p as path
+};
+//# sourceMappingURL=_internals.mjs.map

package/dist/_internals.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"_internals.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/errors/invalid-key.d.ts

@@ -0,0 +1,18 @@
+export declare namespace InvalidKeyError {
+    type defaultMessages = {
+        invalid: string;
+        valid: string;
+    };
+    type keys<TInvalid extends unknown[], TValid extends unknown[]> = {
+        invalid: TInvalid;
+        valid: TValid;
+    };
+    type options<TInvalid extends unknown[], TValid extends unknown[]> = {
+        messages: defaultMessages;
+        keys: keys<TInvalid, TValid>;
+        formatter: Intl.ListFormat;
+    };
+}
+export declare class InvalidKeyError<invalidKeys extends unknown[], validKeys extends unknown[]> extends Error {
+    constructor(invalidKeys: invalidKeys, validKeys: validKeys, message?: string | ((options: InvalidKeyError.options<invalidKeys, validKeys>) => string));
+}

package/dist/index.cjs

@@ -0,0 +1,673 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _internals = require("./types-C4Mgnku6.cjs");
+const CASING_TYPES = [
+  "sentence",
+  "title",
+  "camel",
+  "lower",
+  "upper",
+  "pascal",
+  "snake",
+  "screaming-snake",
+  "flat",
+  "kebab"
+];
+const DEFAULT_CASING = "title";
+function changeCasing(input, type) {
+  const words = input.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[-_]+/g, " ").trim().split(/\s+/).map((w) => w.toLowerCase());
+  switch (type) {
+    case "sentence":
+      return words[0].charAt(0).toUpperCase() + words[0].slice(1) + (words.length > 1 ? " " + words.slice(1).join(" ") : "");
+    case "title":
+      return words.map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+    case "camel":
+      return words[0] + words.slice(1).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("");
+    case "pascal":
+      return words.map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("");
+    case "lower":
+      return words.join(" ");
+    case "upper":
+      return words.join(" ").toUpperCase();
+    case "snake":
+      return words.join("_");
+    case "screaming-snake":
+      return words.join("_").toUpperCase();
+    case "kebab":
+      return words.join("-");
+    case "flat":
+      return words.join("");
+    default:
+      return input;
+  }
+}
+function quote(str, quoteChar = '"') {
+  const startsWithQuote = str.startsWith(quoteChar);
+  const endsWithQuote = str.endsWith(quoteChar);
+  if (startsWithQuote && endsWithQuote) {
+    return str;
+  }
+  const trimmed = str.replace(/^['"]|['"]$/g, "");
+  return `${quoteChar}${trimmed}${quoteChar}`;
+}
+function isCasingValid(value) {
+  if (typeof value !== "string") {
+    return false;
+  }
+  const isValid = CASING_TYPES.includes(value);
+  return isValid;
+}
+function setCasingType(input, fallback = DEFAULT_CASING) {
+  if (isCasingValid(input)) {
+    return input;
+  }
+  return fallback;
+}
+const FIELD_TYPES = [
+  "string",
+  "string.phone",
+  "string.email",
+  "string.time",
+  "number",
+  "number.counter",
+  "date",
+  "dateTime",
+  "boolean.switch"
+];
+const DEFAULT_FIELD_TYPE = "string";
+function isFieldType(value) {
+  return typeof value === "string" && FIELD_TYPES.includes(value);
+}
+const WINDOW_UNDEFINED_MESSAGE = '"window" in undefined. No storage is available';
+const DEFAULT_STORAGE_KEY = "MultiStepForm";
+class MultiStepFormStorage {
+  key;
+  store;
+  data;
+  log;
+  shouldRunActions;
+  throwWhenUndefined;
+  constructor(config) {
+    const { key, data, store, throwWhenUndefined = false } = config;
+    this.log = new _internals.MultiStepFormLogger({
+      prefix: DEFAULT_STORAGE_KEY
+    });
+    this.key = key;
+    this.data = data;
+    this.throwWhenUndefined = throwWhenUndefined;
+    if (store) {
+      this.store = store;
+      this.shouldRunActions = true;
+      if (typeof window === "undefined") {
+        this.shouldRunActions = false;
+        this.log.warn(WINDOW_UNDEFINED_MESSAGE);
+      }
+    } else if (typeof window !== "undefined") {
+      this.store = window.localStorage;
+      this.shouldRunActions = true;
+    } else {
+      this.shouldRunActions = false;
+      this.log.warn(WINDOW_UNDEFINED_MESSAGE);
+    }
+  }
+  throwOnEmptyStore() {
+    if (!this.throwWhenUndefined) {
+      return;
+    }
+    _internals.invariant(this.store, () => {
+      if (this.shouldRunActions) {
+        return WINDOW_UNDEFINED_MESSAGE;
+      }
+      return "No storage available";
+    });
+  }
+  resolveValue(value) {
+    if (typeof value === "object") {
+      return value;
+    }
+    if (typeof value === "function") {
+      return value(this.data);
+    }
+    this.log.error(
+      `The updater value must be a function or object. Was a ${typeof value}`,
+      { throw: true }
+    );
+  }
+  hasKey() {
+    return this.store.getItem(this.key) !== null;
+  }
+  get() {
+    this.throwOnEmptyStore();
+    if (!this.shouldRunActions) {
+      return;
+    }
+    const item = this.store.getItem(this.key);
+    if (item) {
+      const parsed = JSON.parse(item);
+      return parsed;
+    }
+  }
+  remove() {
+    this.throwOnEmptyStore();
+    if (!this.shouldRunActions) {
+      return;
+    }
+    this.store.removeItem(this.key);
+  }
+  add(value) {
+    this.throwOnEmptyStore();
+    if (!this.shouldRunActions) {
+      return;
+    }
+    const resolvedValue = JSON.stringify(this.resolveValue(value));
+    this.store.setItem(this.key, resolvedValue);
+  }
+}
+class Subscribable {
+  listeners = /* @__PURE__ */ new Set();
+  constructor() {
+    this.subscribe = this.subscribe.bind(this);
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    this.onSubscribe();
+    return () => {
+      this.listeners.delete(listener);
+      this.onUnsubscribe();
+    };
+  }
+  hasListeners() {
+    return this.listeners.size > 0;
+  }
+  onSubscribe() {
+  }
+  onUnsubscribe() {
+  }
+}
+const AS_TYPES = [
+  "string",
+  "number",
+  "array.string",
+  "array.string.untyped"
+];
+const VALIDATED_STEP_REGEX = /^step\d+$/i;
+function assertObjectFields(obj, checks) {
+  if (typeof obj !== "object" || obj === null) return false;
+  for (const key of Object.keys(checks)) {
+    if (!(key in obj)) return false;
+    const checkFn = checks[key];
+    const value = obj[key];
+    if (!checkFn(value)) return false;
+  }
+  return true;
+}
+function createFieldLabel(label, fieldName, casingType) {
+  return label ?? changeCasing(fieldName, casingType);
+}
+function createStepFields(options) {
+  const resolvedFields = {};
+  const { fields, defaultCasing, validateFields } = options;
+  for (const [name, values] of Object.entries(fields)) {
+    _internals.invariant(
+      typeof name === "string",
+      `Each key for the "fields" option must be a string. Key ${name} was a ${typeof name}`
+    );
+    _internals.invariant(
+      typeof values === "object",
+      `The value for key ${name} must be an object. Was ${typeof values}`
+    );
+    const {
+      defaultValue,
+      label,
+      nameTransformCasing,
+      type = DEFAULT_FIELD_TYPE
+    } = values;
+    if (validateFields) {
+      resolvedFields[name] = defaultValue;
+    } else {
+      const casing = nameTransformCasing ?? defaultCasing;
+      resolvedFields[name] = {
+        ...resolvedFields[name],
+        nameTransformCasing: casing,
+        type,
+        defaultValue,
+        label: createFieldLabel(label, name, casing)
+        // TODO add more fields here
+      };
+    }
+  }
+  if (validateFields) {
+    const validatedFields = _internals.runStandardValidation(
+      validateFields,
+      resolvedFields
+    );
+    _internals.invariant(
+      typeof validatedFields === "object",
+      `The result of the validated fields must be an object, was (${typeof validatedFields}). This is probably an internal error, so open up an issue about it`
+    );
+    _internals.invariant(
+      !!validatedFields,
+      "The result of the validated fields must be defined. This is probably an internal error, so open up an issue about it"
+    );
+    for (const [name, defaultValue] of Object.entries(validatedFields)) {
+      const currentField = fields[name];
+      _internals.invariant(
+        currentField,
+        `No field found in the fields config for "${name}"`
+      );
+      const {
+        label,
+        type = DEFAULT_FIELD_TYPE,
+        nameTransformCasing
+      } = currentField;
+      const casing = nameTransformCasing ?? defaultCasing;
+      resolvedFields[name] = {
+        ...resolvedFields[name],
+        nameTransformCasing: casing,
+        type,
+        defaultValue,
+        label: createFieldLabel(label, name, casing)
+      };
+    }
+  }
+  return resolvedFields;
+}
+function createStep(stepsConfig) {
+  const resolvedSteps = {};
+  _internals.invariant(!!stepsConfig, "The steps config must be defined", TypeError);
+  _internals.invariant(
+    typeof stepsConfig === "object",
+    `The steps config must be an object, was (${typeof stepsConfig})`,
+    TypeError
+  );
+  for (const [stepKey, stepValue] of Object.entries(stepsConfig)) {
+    _internals.invariant(
+      typeof stepKey === "string",
+      `Each key for the step config must be a string. Key "${stepKey}" was ${typeof stepKey} `,
+      TypeError
+    );
+    _internals.invariant(
+      VALIDATED_STEP_REGEX.test(stepKey),
+      `The key "${stepKey}" isn't formatted properly. Each key in the step config must be the following format: "step{number}"`
+    );
+    const validStepKey = stepKey;
+    const {
+      fields,
+      title,
+      nameTransformCasing: defaultCasing = DEFAULT_CASING,
+      description,
+      validateFields
+    } = stepValue;
+    const currentStep = validStepKey.toString().replace("step", "");
+    _internals.invariant(
+      fields,
+      `Missing fields for step ${currentStep} (${String(validStepKey)})`,
+      TypeError
+    );
+    _internals.invariant(
+      typeof fields === "object",
+      "Fields must be an object",
+      TypeError
+    );
+    _internals.invariant(
+      Object.keys(fields).length > 0,
+      `The fields config for step ${currentStep} (${String(
+        validStepKey
+      )}) is empty. Please add a field`
+    );
+    _internals.invariant(
+      typeof fields === "object",
+      `The "fields" property must be an object. Was ${typeof fields}`
+    );
+    const resolvedFields = createStepFields({
+      defaultCasing,
+      fields,
+      validateFields
+    });
+    resolvedSteps[validStepKey] = {
+      ...resolvedSteps[validStepKey],
+      title,
+      nameTransformCasing: defaultCasing,
+      // Only add the description if it's defined
+      ...typeof description === "string" ? { description } : {},
+      fields: resolvedFields
+    };
+  }
+  return resolvedSteps;
+}
+class MultiStepFormStepSchema extends Subscribable {
+  /**
+   * The original config before any validation or transformations have been applied.
+   */
+  original;
+  /**
+   * The resolved step values.
+   */
+  value;
+  steps;
+  defaultNameTransformationCasing;
+  //@ts-ignore
+  firstStep;
+  lastStep;
+  stepNumbers;
+  storage;
+  #internal;
+  constructor(config) {
+    super();
+    const { steps, nameTransformCasing, storage } = config;
+    this.defaultNameTransformationCasing = setCasingType(
+      nameTransformCasing
+    );
+    this.original = steps;
+    this.value = createStep(this.original);
+    this.storage = new MultiStepFormStorage({
+      data: this.value,
+      key: storage?.key ?? DEFAULT_STORAGE_KEY,
+      store: storage?.store,
+      throwWhenUndefined: storage?.throwWhenUndefined ?? false
+    });
+    this.#internal = new _internals.MultiStepFormStepSchemaInternal({
+      getValue: () => this.value,
+      setValue: (next) => this.handlePostUpdate(next)
+    });
+    this.value = this.#internal.enrichValues(this.value);
+    this.stepNumbers = Object.keys(this.value).map(
+      (key) => Number.parseInt(key.replace("step", ""))
+    );
+    this.firstStep = this.first();
+    this.lastStep = this.last();
+    this.steps = {
+      first: this.firstStep.step,
+      last: this.lastStep.step,
+      value: this.stepNumbers,
+      as: (asType) => {
+        _internals.invariant(
+          typeof asType === "string",
+          `The type of the target transformation type must be a string, was ${typeof asType}`
+        );
+        if (asType === "string") {
+          return this.stepNumbers.map((value) => `'${value}'`).join(" | ");
+        }
+        if (asType === "number") {
+          return this.stepNumbers.join(" | ");
+        }
+        if (asType.includes("array.string")) {
+          return this.stepNumbers.map((value) => `${value}`);
+        }
+        throw new Error(
+          `Transformation type "${asType}" is not supported. Available transformations include: ${AS_TYPES.map(
+            (value) => `"${value}"`
+          ).join(", ")}`
+        );
+      },
+      isValidStepNumber: (stepNumber) => this.stepNumbers.includes(stepNumber),
+      isValidStepKey: (value) => _internals.isValidStepKey(this.value, value)
+    };
+    this.sync();
+  }
+  /**
+   * @internal
+   */
+  __getStorage() {
+    return this.storage;
+  }
+  getSnapshot() {
+    return this;
+  }
+  /**
+   * Syncs the values from storage to {@linkcode value}.
+   */
+  sync() {
+    const storageValues = this.__getStorage().get();
+    if (storageValues) {
+      const enrichedValues = this.#internal.enrichValues(storageValues);
+      this.value = { ...enrichedValues };
+    }
+  }
+  notify() {
+    for (const listener of this.listeners) {
+      listener({
+        defaultNameTransformationCasing: this.defaultNameTransformationCasing,
+        original: this.original,
+        steps: this.steps,
+        value: this.value
+      });
+    }
+  }
+  /**
+   * Gets the data for a specific step.
+   * @param options The options for getting the step data.
+   * @returns The step data for the target step.
+   */
+  get(options) {
+    return _internals.getStep(this.value)(options);
+  }
+  /**
+   * Gets the data for the first step.
+   * @returns The data for the first step.
+   */
+  first() {
+    const firstStep = Math.min(...this.stepNumbers);
+    return this.get({ step: firstStep });
+  }
+  /**
+   * Gets the data for the last step.
+   * @returns The data for the last step.
+   */
+  last() {
+    const lastStep = Math.max(...this.stepNumbers);
+    return this.get({ step: lastStep });
+  }
+  handlePostUpdate(next) {
+    this.value = { ...next };
+    this.__getStorage().add(this.value);
+    this.sync();
+    this.notify();
+  }
+  update(options) {
+    this.#internal.update(options);
+  }
+  // Implementation
+  createHelperFn(options, fn) {
+    const { stepData, ...rest } = options;
+    return this.#internal.createStepHelperFn(stepData)(rest, fn);
+  }
+  /**
+   * Validates that a given object is the proper shape for step data.
+   * @param value
+   */
+  static hasData(value, options) {
+    if (value === null || typeof value !== "object") {
+      return false;
+    }
+    return assertObjectFields(value, {
+      title: (v) => typeof v === "string",
+      fields: (v) => {
+        if (v === null || typeof v !== "object") {
+          return false;
+        }
+        for (const key of Object.keys(v)) {
+          if (typeof key !== "string" || !(key in v)) {
+            return false;
+          }
+          const current = v[key];
+          if (current === null || typeof current !== "object") {
+            return false;
+          }
+          const hasField = assertObjectFields(current, {
+            defaultValue: (v2) => v2 !== "undefined" && v2 !== null,
+            label: (v2) => typeof v2 === "string" || typeof v2 === "boolean" && !v2,
+            nameTransformCasing: isCasingValid,
+            type: isFieldType
+          });
+          if (!hasField) {
+            return false;
+          }
+        }
+        return true;
+      },
+      createHelperFn: (v) => typeof v === "function",
+      // update: (v): v is GetCurrentStep<resolvedStep, stepNumbers>['update'] =>
+      //   typeof v === 'function',
+      nameTransformCasing: isCasingValid,
+      ...options?.optionalKeysToCheck
+    });
+  }
+  /**
+   * Gets the value of a given field for a given step.
+   * @param step The step to get the value from.
+   * @param field The field to get the value from.
+   * @returns The value of the {@linkcode field}.
+   */
+  getValue(step, field) {
+    const stepData = this.value[step];
+    const baseErrorMessage = `Unable to get the value for "${String(
+      step
+    )}.fields.${String(field)}"`;
+    _internals.invariant("fields" in stepData, baseErrorMessage);
+    _internals.invariant(
+      typeof stepData.fields === "object",
+      `${baseErrorMessage} because "fields" is not an object. This shouldn't be the case, so please open an issue`
+    );
+    const fields = stepData.fields;
+    const defaultValue = _internals.fields.resolvedDeepPath(field, fields);
+    return defaultValue;
+  }
+}
+class MultiStepFormSchema extends Subscribable {
+  defaultNameTransformationCasing;
+  stepSchema;
+  storage;
+  mountCount = 0;
+  constructor(options) {
+    super();
+    const { steps, nameTransformCasing, storage } = options;
+    this.defaultNameTransformationCasing = setCasingType(
+      nameTransformCasing
+    );
+    this.stepSchema = new MultiStepFormStepSchema({
+      steps,
+      nameTransformCasing: this.defaultNameTransformationCasing
+    });
+    this.storage = new MultiStepFormStorage({
+      key: storage?.key ?? DEFAULT_STORAGE_KEY,
+      data: this.stepSchema.value,
+      store: storage?.store,
+      throwWhenUndefined: storage?.throwWhenUndefined ?? false
+    });
+    this.stepSchema.subscribe(() => {
+      this.notify();
+    });
+  }
+  getSnapshot() {
+    return this;
+  }
+  mount() {
+    this.mountCount++;
+    if (this.mountCount === 1) {
+      this.onMount();
+    }
+    return () => {
+      this.unmount();
+    };
+  }
+  unmount() {
+    this.mountCount = Math.max(0, this.mountCount - 1);
+    if (this.mountCount === 0) {
+      this.onUnmount();
+    }
+  }
+  isMounted() {
+    return this.mountCount > 0;
+  }
+  onMount() {
+  }
+  onUnmount() {
+  }
+  notify() {
+    for (const listener of this.listeners) {
+      listener({
+        nameTransformCasing: this.defaultNameTransformationCasing,
+        storage: {
+          key: this.storage.key,
+          store: this.storage.store
+        },
+        steps: this.stepSchema.original
+      });
+    }
+  }
+}
+function createMultiStepFormSchema(options) {
+  return new MultiStepFormSchema(options);
+}
+class MultiStepFormObserver extends Subscribable {
+  schema;
+  unsubscribeFromSchema;
+  constructor(options) {
+    super();
+    this.schema = options.schema;
+    this.subscribeToSchema();
+  }
+  subscribeToSchema() {
+    this.unsubscribeFromSchema = this.schema.subscribe(() => {
+      this.notify();
+    });
+  }
+  getSnapshot() {
+    return this;
+  }
+  getResult() {
+    return this.schema;
+  }
+  setOptions(options) {
+    if (options.schema && options.schema !== this.schema) {
+      this.unsubscribeFromSchema?.();
+      this.schema = options.schema;
+      this.subscribeToSchema();
+      this.notify();
+    }
+  }
+  notify() {
+    for (const listener of this.listeners) {
+      listener(this.schema);
+    }
+  }
+  destroy() {
+    this.unsubscribeFromSchema?.();
+    this.listeners.clear();
+  }
+  onSubscribe() {
+  }
+  onUnsubscribe() {
+  }
+}
+exports.DEFAULT_LOGGER_PREFIX = _internals.DEFAULT_LOGGER_PREFIX;
+Object.defineProperty(exports, "HelperFnChosenSteps", {
+  enumerable: true,
+  get: () => _internals.HelperFnChosenSteps
+});
+exports.MultiStepFormLogger = _internals.MultiStepFormLogger;
+exports.createCtx = _internals.createCtx;
+Object.defineProperty(exports, "fields", {
+  enumerable: true,
+  get: () => _internals.fields
+});
+exports.invariant = _internals.invariant;
+exports.CASING_TYPES = CASING_TYPES;
+exports.DEFAULT_CASING = DEFAULT_CASING;
+exports.DEFAULT_FIELD_TYPE = DEFAULT_FIELD_TYPE;
+exports.DEFAULT_STORAGE_KEY = DEFAULT_STORAGE_KEY;
+exports.FIELD_TYPES = FIELD_TYPES;
+exports.MultiStepFormObserver = MultiStepFormObserver;
+exports.MultiStepFormSchema = MultiStepFormSchema;
+exports.MultiStepFormStepSchema = MultiStepFormStepSchema;
+exports.MultiStepFormStorage = MultiStepFormStorage;
+exports.VALIDATED_STEP_REGEX = VALIDATED_STEP_REGEX;
+exports.changeCasing = changeCasing;
+exports.createMultiStepFormSchema = createMultiStepFormSchema;
+exports.createStep = createStep;
+exports.isCasingValid = isCasingValid;
+exports.isFieldType = isFieldType;
+exports.quote = quote;
+exports.setCasingType = setCasingType;
+//# sourceMappingURL=index.cjs.map