@xyo-network/react-form-group 7.5.8 → 7.5.11

package/src/control/AbstractControl.ts

@@ -1,127 +0,0 @@
-import { forget } from '@xylabs/sdk-js'
-
-import type {
-  ControlValueAccessorBaseEvents,
-  FormControlStatus,
-  ValidControlValue,
-} from './accessor/index.ts'
-import {
-  ControlValueAccessorBase,
-  DISABLED,
-  INVALID,
-  PENDING,
-  VALID,
-} from './accessor/index.ts'
-
-export type AbstractControlEvents<TValue> = ControlValueAccessorBaseEvents<TValue> & {
-  statusChanged: { status: FormControlStatus }
-}
-
-/**
- * This is the base class for `Control` classes (i.e. FormControl),
- *
- * It provides some of the shared behavior that all controls and groups of controls have, like
- * running validators, calculating status, and resetting state. It also defines the properties
- * that are shared between all sub-classes, like `value`, `valid`, and `dirty`. It shouldn't be
- * instantiated directly.
- *
- * NOTE: Heavily borrowed from Angular's AbstractControl:
- * https://github.com/angular/angular/blob/5dcdbfcba934a930468aec140a7183b034466bdf/packages/forms/src/model/abstract_model.ts
- */
-export class AbstractControl<TValue extends ValidControlValue = ValidControlValue> extends ControlValueAccessorBase<
-  TValue,
-  AbstractControlEvents<TValue>
-> {
-  private _status: FormControlStatus | undefined = undefined
-
-  constructor() {
-    super({})
-  }
-
-  /**
-   * A control is `disabled` when its `status` is `DISABLED`.
-   *
-   * Disabled controls are exempt from validation checks and
-   * are not included in the aggregate value of their ancestor
-   * controls.
-   *
-   * @returns True if the control is disabled, false otherwise.
-   */
-  /** @deprecated - disabled functionality not implemented */
-  get disabled(): boolean {
-    return this.status === DISABLED
-  }
-
-  /**
-   * A control is `enabled` as long as its `status` is not `DISABLED`.
-   *
-   * @returns True if the control has any status other than 'DISABLED',
-   * false if the status is 'DISABLED'.
-   */
-  get enabled(): boolean {
-    return this.status !== DISABLED
-  }
-
-  /**
-   * A control is `invalid` when its `status` is `INVALID`.
-
-   *
-   * @returns True if this control has failed one or more of its validation checks,
-   * false otherwise.
-   */
-  get invalid(): boolean {
-    return this.status === INVALID
-  }
-
-  /**
-   * A control is `pending` when its `status` is `PENDING`.
-   *
-   * @returns True if this control is in the process of conducting a validation check,
-   * false otherwise.
-   */
-  get pending(): boolean {
-    return this.status == PENDING
-  }
-
-  /**
-   * The raw value of the control.
-   */
-  get rawValue(): TValue {
-    return this.value
-  }
-
-  /**
-   * The current status of the control.
-   */
-  get status() {
-    return this._status
-  }
-
-  /**
-   * A control is `valid` when its `status` is `VALID`.
-   *
-   * @returns True if the control has passed all of its validation tests,
-   * false otherwise.
-   */
-  get valid(): boolean {
-    return this.status === VALID
-  }
-
-  setErrorAndValidity(error: string, status: FormControlStatus) {
-    this.setError(error)
-    this.setStatus(status)
-  }
-
-  setStatus(status: FormControlStatus) {
-    if (this._status === status) return
-
-    this._status = status
-
-    const emit = async () => await this.emit('statusChanged', { status })
-    forget(emit())
-  }
-
-  validate(): boolean {
-    return true
-  }
-}

package/src/control/FormControl.ts

@@ -1,31 +0,0 @@
-import type { EmptyObject } from '@xylabs/sdk-js'
-
-import type { AbstractControl } from './AbstractControl.ts'
-
-export type CursorPosition = {
-  current: number | undefined
-  previous: number | undefined
-}
-
-export interface FormControlValidator {
-  blurError?: (value: string) => void
-  changeError?: (value: string) => void
-  // filter that supports an empty value
-  pattern?: RegExp
-  // filter that does not support an empty value
-  patternStrict?: RegExp
-  required?: boolean
-}
-
-export interface FormControlMask {
-  cursorPosition: CursorPosition
-  getCursorPosition?: () => number | undefined
-  mask?: (value: string) => string
-  onCursorChange?: (cursor: number | undefined) => void
-  unmask?: (value: string) => string
-}
-
-export interface FormControl<TProps extends EmptyObject = EmptyObject> extends FormControlValidator, FormControlMask, AbstractControl {
-  readonly name?: string
-  props: TProps
-}

package/src/control/FormControlBase.ts

@@ -1,84 +0,0 @@
-import type { EmptyObject } from '@xylabs/sdk-js'
-
-import { AbstractControl } from './AbstractControl.ts'
-import type { SetOptions } from './accessor/index.ts'
-import type { CursorPosition, FormControl } from './FormControl.ts'
-
-const AllowAllRegex = /^.*$/s
-
-/**
- * A base class for form controls and their validation.
- */
-export abstract class FormControlBase<TProps extends EmptyObject = EmptyObject> extends AbstractControl implements FormControl {
-  /**
-   * The current and previous cursor position of the input element.
-   */
-  cursorPosition: CursorPosition = { current: undefined, previous: undefined }
-
-  invalidMessage = 'Invalid input'
-  pattern = AllowAllRegex
-  patternStrict = AllowAllRegex
-  props = {} as TProps
-  required = false
-
-  private _name: string | undefined = undefined
-
-  constructor() {
-    super()
-  }
-
-  get name() {
-    return this._name
-  }
-
-  override get rawValue() {
-    return this.unmask && this.value ? this.unmask(this.value) : this.value
-  }
-
-  blurError?(value: string): void | undefined
-  changeError?(value: string): void
-  getCursorPosition?(): number | undefined
-  mask?(value: string): string
-  onCursorChange: (cursor: number | undefined) => void = () => {}
-
-  override setValue(value: string = '', setOptions: SetOptions) {
-    // check for pattern validation
-    if (this.unmask && this.pattern) {
-      const unmasked = this.unmask(value)
-      const match = RegExp(this.pattern).exec(unmasked)
-      // set the new value before checking for errors
-      super.setValue(this.mask ? this.mask(unmasked) : unmasked, setOptions)
-      if (match) {
-        // if the value matches the pattern, update the cursor position
-        if (this.getCursorPosition) {
-          const newCursor = this.getCursorPosition()
-          this.onCursorChange(newCursor)
-        }
-      } else {
-        // if no match, set the error and return to the previous value
-        this.setValue(this.previousValue, setOptions)
-        this.onCursorChange?.(this.cursorPosition.previous)
-      }
-    } else {
-      // if no mask or pattern, just set the value
-      super.setValue(value, setOptions)
-    }
-    // check for changeError validation after pattern validation
-    this.changeError?.(value)
-  }
-
-  unmask?(value: string): string
-
-  // For FormControls, validate is the same as running one of the error checking functions
-  override validate(): boolean {
-    const normalizedValue = this.value ?? ''
-    // prefer the blurError function since validation assumes the user is done typing
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    this.blurError ? this.blurError(normalizedValue) : this.changeError?.(normalizedValue)
-    return !this.error
-  }
-
-  protected setName(name: string | undefined) {
-    this._name = name
-  }
-}

package/src/control/accessor/ControlValueAccessor.ts

@@ -1,23 +0,0 @@
-import type { ValidControlValue } from './ValidControlValue.ts'
-
-export interface SetOptions {
-  disableEmit?: boolean
-}
-
-export interface ControlSerializeSettings {
-  sensitive?: boolean
-  serializable?: boolean
-}
-
-export interface ControlValueAccessor<T = ValidControlValue> {
-  readonly error: string
-  readonly previousValue: T
-  readonly serializeSettings: ControlSerializeSettings
-  readonly touched: boolean
-  readonly value: T
-  registerOnChange(fn: (value: T) => void): void
-  registerOnErrorChange(fn: (error: string) => void): void
-  registerOnTouched(fn: (isTouched: boolean) => void): void
-  setTouched(isTouched: boolean): void
-  setValue(fieldValue: T, options?: SetOptions): void
-}

package/src/control/accessor/ControlValueAccessorBase.ts

@@ -1,191 +0,0 @@
-import type { BaseParams } from '@xylabs/base'
-import { forget } from '@xylabs/sdk-js'
-import { ModuleBaseEmitter } from '@xyo-network/module-event-emitter'
-
-import type {
-  ControlSerializeSettings, ControlValueAccessor, SetOptions,
-} from './ControlValueAccessor.ts'
-import type { ValidControlValue } from './ValidControlValue.ts'
-
-export type ControlValueAccessorBaseConfig = {
-  disableEvents?: boolean
-}
-
-export const DefaultSetOptions: SetOptions = { disableEmit: false }
-
-export type ControlValueAccessorBaseEvents<TValue = ValidControlValue> = {
-  errorChanged: { error: string }
-  touchChanged: { touched: boolean }
-  valueChanged: { value: TValue }
-}
-
-/**
- * The base class for control value accessors interface
- */
-export class ControlValueAccessorBase<
-  TValue = ValidControlValue,
-  TEventData extends ControlValueAccessorBaseEvents<TValue> = ControlValueAccessorBaseEvents<TValue>,
->
-  extends ModuleBaseEmitter<BaseParams, TEventData>
-  implements ControlValueAccessor<TValue> {
-  private _error: string = ''
-
-  private _previousValue = undefined as TValue
-
-  private _serializeSettings: ControlSerializeSettings = { sensitive: false, serializable: false }
-
-  private _touched: boolean = false
-
-  private _value = undefined as TValue
-
-  private config: ControlValueAccessorBaseConfig
-
-  constructor(config: ControlValueAccessorBaseConfig) {
-    super({})
-    this.config = config
-  }
-
-  /**
-   * The error message for the control.
-   */
-  get error() {
-    return this._error
-  }
-
-  /**
-   * The "previous value" of the input element.
-   */
-  get previousValue() {
-    return this._previousValue
-  }
-
-  /**
-   * The serialize settings of the input element.
-   */
-  get serializeSettings() {
-    return this._serializeSettings
-  }
-
-  /**
-   * The "touched" state of the input element.
-   */
-  get touched() {
-    return this._touched
-  }
-
-  /**
-   * The current value of the input element.
-   */
-  get value() {
-    return this._value
-  }
-
-  /**
-   * The registered callback function called when a change or input event occurs on the input
-   * element.
-   */
-  onChange = (_: TValue) => {}
-
-  /**
-   * Registers a function called when the control error changes.
-   */
-  onErrorChange: (error: string) => void = () => {}
-
-  /**
-   * The registered callback function called when a blur event occurs on the input element.
-   */
-  onTouched = (_isTouched: boolean) => {}
-
-  /**
-   * Registers a function called when the control value changes.
-   * @param  {(_value:ValidControlValue)=>void} fn
-   * @returns void
-   */
-  registerOnChange(fn: (_value: TValue) => void): void {
-    this.onChange = fn
-  }
-
-  /**
-   * Registers a function called when the control error changes.
-   * @param  {(error:string)=>void} fn
-   */
-  registerOnErrorChange(fn: (error: string) => void) {
-    this.onErrorChange = fn
-  }
-
-  /**
-   * Registers a function called when the control is touched.
-   * @param  {(isTouched:boolean)=>void} fn
-   * @returns void
-   */
-  registerOnTouched(fn: (isTouched: boolean) => void): void {
-    this.onTouched = fn
-  }
-
-  /**
-   * Sets the "touched" state of the input element.
-   * @param  {boolean} isTouched
-   */
-  setTouched(isTouched: boolean) {
-    if (this.touched !== isTouched) {
-      this._touched = isTouched
-      this.onTouched(isTouched)
-
-      if (this.config.disableEvents) return
-      const emit = async () => await this.emit('touchChanged', { touched: isTouched })
-      forget(emit())
-    }
-  }
-
-  /**
-   * Sets the "value" property on the input element.
-   * @param  {ValidControlValue} value
-   * @returns void
-   */
-  setValue(value: TValue, options = DefaultSetOptions): void {
-    this._previousValue = this._value
-
-    const normalizedValue = value == null ? ('' as TValue) : value
-
-    if (this.value !== normalizedValue) {
-      this._value = normalizedValue
-      this.onChange(normalizedValue)
-
-      if (this.config.disableEvents || options.disableEmit) return
-      const emit = async () => await this.emit('valueChanged', { value: normalizedValue })
-      forget(emit())
-    }
-  }
-
-  /**
-   * Set the error message for the control.
-   * @param  {string} error
-   */
-  protected setError(error: string) {
-    if (this.error !== error) {
-      this._error = error
-      this.onErrorChange(error)
-
-      if (this.config.disableEvents) return
-      const emit = async () => await this.emit('errorChanged', { error })
-      forget(emit())
-    }
-  }
-
-  /**
-   * Sets the "previous value" of the input element.
-   * @param  {ValidControlValue} value
-   * @returns void
-   */
-  protected setPreviousValue(value: TValue): void {
-    this._previousValue = value
-  }
-
-  /**
-   * Sets the serialize settings  of the input element.
-   * @param  {ControlSerializeSettings} settings
-   */
-  protected setSerializeSettings(settings: ControlSerializeSettings) {
-    this._serializeSettings = settings
-  }
-}

package/src/control/accessor/FormControlStatus.ts

@@ -1,36 +0,0 @@
-/**
- * Reports that a control is valid, meaning that no errors exist in the input value.
- */
-export const VALID = 'VALID' as const
-
-/**
- * Reports that a control is invalid, meaning that an error exists in the input value.
- */
-export const INVALID = 'INVALID' as const
-
-/**
- * Reports that a control is pending, meaning that async validation is occurring and
- * errors are not yet available for the input value.
- */
-export const PENDING = 'PENDING' as const
-
-/**
- * Reports that a control is disabled, meaning that the control is exempt from ancestor
- * calculations of validity or value.
- */
-export const DISABLED = 'DISABLED' as const
-
-/**
- * A control can have several different statuses. Each
- * possible status is returned as a string literal.
- *
- * * **VALID**: Reports that a control is valid, meaning that no errors exist in the input
- * value.
- * * **INVALID**: Reports that a control is invalid, meaning that an error exists in the input
- * value.
- * * **PENDING**: Reports that a control is pending, meaning that async validation is
- * occurring and errors are not yet available for the input value.
- * * **DISABLED**: Reports that a control is
- * disabled, meaning that the control is exempt from ancestor calculations of validity or value.
- */
-export type FormControlStatus = typeof VALID | typeof INVALID | typeof PENDING | typeof DISABLED

package/src/control/accessor/ValidControlValue.ts

@@ -1 +0,0 @@
-export type ValidControlValue = string | undefined

package/src/control/accessor/index.ts

@@ -1,4 +0,0 @@
-export * from './ControlValueAccessor.ts'
-export * from './ControlValueAccessorBase.ts'
-export * from './FormControlStatus.ts'
-export * from './ValidControlValue.ts'

package/src/control/index.ts

@@ -1,4 +0,0 @@
-export * from './AbstractControl.ts'
-export * from './accessor/index.ts'
-export * from './FormControl.ts'
-export * from './FormControlBase.ts'

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from './context/index.ts'
-export * from './control/index.ts'
-export * from './FormGroup.ts'
-export * from './InputError.ts'
-export * from './storage/index.ts'

package/src/storage/ArchivistFormGroupStorage.ts

@@ -1,25 +0,0 @@
-import type { ArchivistInstance } from '@xyo-network/archivist-model'
-import type { Payload } from '@xyo-network/payload-model'
-
-import type { FormGroupStorage } from './FormGroupStorage.ts'
-
-export class ArchivistFormGroupStorage implements FormGroupStorage {
-  private archivist: ArchivistInstance
-
-  constructor(archivist: ArchivistInstance) {
-    this.archivist = archivist
-  }
-
-  async clear() {
-    await this.archivist.clear?.()
-  }
-
-  async get() {
-    const all = await this.archivist.all?.()
-    return all.at(-1)
-  }
-
-  async insert(value: Payload) {
-    await this.archivist.insert?.([value])
-  }
-}

package/src/storage/FormGroupStorage.ts

@@ -1,8 +0,0 @@
-import type { Promisable } from '@xylabs/sdk-js'
-import type { Payload } from '@xyo-network/payload-model'
-
-export interface FormGroupStorage<TValue extends Payload = Payload> {
-  clear: () => Promisable<void>
-  get: () => Promisable<TValue | undefined>
-  insert: (state: TValue) => Promisable<void>
-}

package/src/storage/index.ts

@@ -1,2 +0,0 @@
-export * from './ArchivistFormGroupStorage.ts'
-export * from './FormGroupStorage.ts'

package/src/stories/test.stories.tsx

@@ -1,17 +0,0 @@
-/**
- * More to come...
- */
-
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-export default { title: 'modules/form/test' } as Meta
-
-const Template: StoryFn<React.FC> = (args) => {
-  return <div {...args}></div>
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-export { Default }

package/src/types/images.d.ts

@@ -1,5 +0,0 @@
-declare module '*.png'
-declare module '*.jpg'
-declare module '*.svg'
-declare module '*.gif'
-declare module '*.webp'