@simpozio/contact-form/lib/types.d.ts

Package for Contact Form component

import {MouseEventHandler, ReactNode} from 'react';
// eslint-disable-next-line import/named
import {CSSProp, DefaultTheme} from 'styled-components';
import {Schema} from 'yup';

export type TFormFields = {
  [key: string]: {
    value: string | undefined;
    touched: boolean;
    error: boolean;
  };
};

export type TFormValues = {
  [key: string]: string | undefined;
};

export type TFormErrors = {
  [key: string]: string | boolean;
};

export type TFormChangeHandler = (
  name: string,
  value: string | undefined
) => void;

export type TFormError = string | null;

export type TFormProps = {
  fields: TFormFields;
  formError: TFormError;
  onChange: TFormChangeHandler;
  isValid: boolean;
  isSubmitted: boolean;
  isSubmitting: boolean;
  updateForm: () => void;
  submitForm: MouseEventHandler;
  resetForm: () => void;
};

export type TForm = {
  className?: string;
  action?: string;
  method?: 'GET' | 'POST';
  initialValues: TFormValues;
  onChange?: (props: TCallbackProps) => Promise<TFormFields>;
  onValid?: (props: TCallbackProps) => void;
  onValidate?: (props: TCallbackProps) => Promise<TFormErrors>;
  onSubmit: (props: TCallbackProps) => Promise<void>;
  onError?: (props: TCallbackProps) => void;
  children: (props: TFormProps) => JSX.Element;
};

export type TShortForm = {
  className?: string;
  formText?: JSX.Element | string;
  bottomText?: JSX.Element | string;
  fields: TFieldsPreset;
  onChange?: (props: TCallbackProps) => Promise<TFormFields>;
  onValid?: (props: TCallbackProps) => void;
  onValidate?: (props: TCallbackProps) => Promise<TFormErrors>;
  onSubmit: (props: TCallbackProps) => Promise<void>;
  onError?: (props: TCallbackProps) => void;
  validSchema?: Schema;
  theme?: DefaultTheme;
  styles?: CSSProp;
};

export type TFieldState = {
  value: string | undefined;
  error: boolean;
  touched?: boolean;
};

export type TField = {
  className?: string;
  name: string;
  type?: string;
  label?: string;
  placeholder?: string;
  required?: boolean;
  disabled?: boolean;
  onChange: TFormChangeHandler;
  onBlur?: () => void;
  field: TFieldState;
};

export type TFieldsPreset = {
  [key: string]: TFieldPreset;
};

export type TFieldPreset = {
  label: string;
  placeholder: string;
  initialValue: string;
  disabled: string;
};

export type TCallbackProps = {
  fields: TFormFields;
  isSubmitted: boolean;
  isValid: boolean;
  error?: TFormError;
  resetForm?: () => void;
};

export type TCaption = {
  html?: string;
  className?: string;
  children?: ReactNode;
};

export type TStyledContainer = {
  styles?: CSSProp;
};