@sio-group/form-react 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,284 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { CSSProperties, ComponentType, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+import { LayoutType, FormField, IconType, AcceptType, CaptureType, SpinnerVariant, SelectOption, Option, FieldConfigMap } from '@sio-group/form-types';
+import { Properties } from 'csstype';
+import { ValidationRule } from '@sio-group/form-types/src/core/valudation-rule';
+
+interface FormLayout {
+  fields: string[];
+  layout?: LayoutType;
+}
+
+type ButtonType = 'button' | 'submit' | 'reset';
+type Variant = 'primary' | 'secondary' | 'link';
+type Color = 'default' | 'error' | 'success' | 'warning' | 'info';
+type Size = 'sm' | 'md' | 'lg';
+
+type BaseUiProps = {
+  variant?: Variant;
+  label?: string | React.ReactNode;
+  color?: Color;
+  size?: Size;
+  block?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  className?: string;
+  ariaLabel?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+};
+
+type ButtonProps = BaseUiProps & {
+  type?: ButtonType;
+  onClick: (e: React.MouseEvent) => void;
+};
+
+type LinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'color'> &
+  BaseUiProps & {
+  to: string;
+  navigate?: () => void;
+  external?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+};
+
+type FormContainerProps = ComponentPropsWithoutRef<'form'>;
+type ButtonContainerProps = HTMLAttributes<HTMLDivElement>;
+
+interface FormConfig {
+  fields: FormField[];
+  layout?: FormLayout[];
+
+  submitShow?: boolean;
+  submitAction: (values: Record<string, any>) => void | Promise<void>;
+  submitLabel?: string;
+  cancelShow?: boolean;
+  cancelAction?: () => void;
+  cancelLabel?: string;
+
+  buttons?: (ButtonProps | LinkProps)[];
+  extraValidation?: (values: Record<string, any>) => boolean | Promise<boolean>
+
+  className?: string;
+  style?: CSSProperties;
+
+  disableWhenOffline?: boolean;
+
+  container?: ComponentType<FormContainerProps>;
+  buttonContainer?: ComponentType<ButtonContainerProps>;
+}
+
+declare const Form: ({ fields, layout, submitShow, submitAction, submitLabel, cancelShow, cancelAction, cancelLabel, buttons, extraValidation, className, style, disableWhenOffline, container: Container, buttonContainer: ButtonContainer, }: FormConfig) => react_jsx_runtime.JSX.Element;
+
+type BaseFieldProps = {
+  id: string;
+  name: string;
+  label?: string;
+  placeholder?: string;
+  value: unknown;
+  errors: string[];
+  required?: boolean;
+  autocomplete?: string;
+  touched: boolean;
+  focused: boolean;
+  readOnly?: boolean;
+  disabled: boolean;
+  icon?: IconType;
+  description?: string;
+  onChange: (value: unknown) => void;
+  setFocused: (focused: boolean) => void;
+  setTouched: (touched: boolean) => void;
+  className?: string;
+  style?: Properties;
+};
+
+type TextareaFieldProps = BaseFieldProps & {
+  type: "textarea";
+  rows?: number;
+  cols?: number;
+};
+
+type FileFieldProps = BaseFieldProps & {
+  type: "file";
+  accept?: AcceptType;
+  multiple: boolean;
+  capture: CaptureType;
+  onError: (errors: string[]) => void;
+  filesize: number;
+  onFileRemove?: (file: File, index: number, files: File[]) => void;
+  onRemoveAll?: (files: File[]) => void;
+};
+
+type NumberFieldProps = BaseFieldProps & {
+  type: "number";
+  min: number;
+  max: number;
+  step: number;
+  spinner: boolean | SpinnerVariant;
+};
+
+type RangeFieldProps = BaseFieldProps & {
+  type: "range";
+  min: number;
+  max: number;
+  step: number;
+  showValue: boolean;
+};
+
+type DateFieldProps = BaseFieldProps & {
+  type: "date" | "time" | "datetime-local";
+  min: string;
+  max: string;
+  step: number;
+};
+
+type UrlFieldProps = BaseFieldProps & {
+  type: "url";
+  allowLocalhost: boolean;
+  allowFtp: boolean;
+  secureOnly: boolean;
+};
+
+type SelectFieldProps = BaseFieldProps & {
+  type: "select" | "creatable";
+  options: SelectOption[];
+  multiple: boolean;
+};
+
+type RadioFieldProps = BaseFieldProps & {
+  type: "radio";
+  options: string[] | Option[];
+  inline: boolean;
+};
+
+type FieldProps =
+  | FileFieldProps
+  | TextareaFieldProps
+  | NumberFieldProps
+  | RangeFieldProps
+  | DateFieldProps
+  | UrlFieldProps
+  | SelectFieldProps
+  | RadioFieldProps
+  | (BaseFieldProps & { type: Exclude<FieldType, "file" | "textarea" | "range" | "date" | "time" | "datetime-local" | "url" | "select" | "creatable" | "radio"> });
+
+type FieldType$1 = keyof FieldConfigMap;
+
+type FieldState = {
+  [K in FieldType$1]: {
+    type: K;
+    id: string;
+    name: string;
+    value: FieldConfigMap[T]['defaultValue'];
+
+    validations: ValidationRule<T>[];
+    errors: string[];
+
+    touched: boolean;
+    focused: boolean;
+  } & FieldConfigMap[K]
+}[FieldType$1];
+
+interface UseFormOptions {
+  disableWhenOffline: boolean;
+}
+
+declare const useForm: ({ disableWhenOffline }?: UseFormOptions) => {
+    register: (name: string, config: FormField, renderLayout?: boolean) => FieldProps;
+    unregister: (name: string) => void;
+    setValue: (name: string, value: unknown) => void;
+    getValues: () => Record<string, any>;
+    getValue: (name: string) => any;
+    reset: () => void;
+    isValid: () => boolean;
+    isDirty: () => boolean;
+    isBusy: () => boolean;
+    submit: (onSubmit: (values: Record<string, any>) => void | Promise<void>) => Promise<void>;
+    getField: (name: string) => FieldState | undefined;
+};
+
+/**
+ * Button component for user interaction.
+ *
+ * @component
+ * @example
+ * // Primaire button
+ * <Button label="Save" onClick={handleSave} />
+ *
+ * @example
+ * // Submit button with loading state
+ * <Button
+ *   type="submit"
+ *   label="Send"
+ *   variant="primary"
+ *   loading
+ * />
+ *
+ * @example
+ * // Button with icon and tekst
+ * <Button type="button" onClick={handleClick}>
+ *   <Icon name="plus" />
+ *   <span>Add</span>
+ * </Button>
+ *
+ * @example
+ * // Error variant
+ * <Button
+ *   type="button"
+ *   label="Delete"
+ *   variant="secondary"
+ *   color="error"
+ *   onClick={handleDelete}
+ * />
+ */
+declare const Button: React.FC<ButtonProps>;
+
+/**
+ * Custom Link component for internal or external navigation
+ *
+ * @component
+ * @example
+ * // Internal link
+ * <Link to="/dashboard" label="Dashboard" />
+ *
+ * @example
+ * // External link
+ * // external property is optional
+ * // http(s), ftp, email and tel with automatically render as external
+ * <Link to="https://example.com" label="Visit website" external />
+ *
+ * @example
+ * // Link with loading state
+ * <Link to="/profile" label="Profile" loading />
+ *
+ * @example
+ * // Link with custom click handler en navigation
+ * <Link
+ *   to="/settings"
+ *   label="Settings"
+ *   onClick={() => console.log('clicked')}
+ *   navigate={customNavigate}
+ * />
+ */
+declare const Link: React.FC<LinkProps>;
+
+declare const Checkbox: ({ value, onChange, name, id, label, required, setTouched, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: FieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const Input: React.MemoExoticComponent<(props: FieldProps) => react_jsx_runtime.JSX.Element>;
+
+declare const NumberInput: ({ value, min, max, step, spinner, onChange, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: NumberFieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const RangeInput: ({ value, min, max, step, showValue, onChange, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: RangeFieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const DateInput: ({ value, min, max, step, onChange, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: DateFieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const FileInput: ({ value, onChange, onError, accept, filesize, multiple, capture, onFileRemove, onRemoveAll, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: FileFieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const TextInput: ({ value, onChange, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: FieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const Radio: ({ value, onChange, options, inline, name, id, label, required, setTouched, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: RadioFieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const Select: ({ value, onChange, options, multiple, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: SelectFieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const Textarea: ({ value, onChange, rows, cols, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: TextareaFieldProps) => react_jsx_runtime.JSX.Element;
+
+export { Button, type ButtonProps, Checkbox, DateInput, type FieldProps, FileInput, Form, type FormConfig, type FormLayout, Input, Link, type LinkProps, NumberInput, Radio, RangeInput, Select, TextInput, Textarea, useForm };

package/dist/index.d.ts

@@ -0,0 +1,284 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { CSSProperties, ComponentType, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+import { LayoutType, FormField, IconType, AcceptType, CaptureType, SpinnerVariant, SelectOption, Option, FieldConfigMap } from '@sio-group/form-types';
+import { Properties } from 'csstype';
+import { ValidationRule } from '@sio-group/form-types/src/core/valudation-rule';
+
+interface FormLayout {
+  fields: string[];
+  layout?: LayoutType;
+}
+
+type ButtonType = 'button' | 'submit' | 'reset';
+type Variant = 'primary' | 'secondary' | 'link';
+type Color = 'default' | 'error' | 'success' | 'warning' | 'info';
+type Size = 'sm' | 'md' | 'lg';
+
+type BaseUiProps = {
+  variant?: Variant;
+  label?: string | React.ReactNode;
+  color?: Color;
+  size?: Size;
+  block?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  className?: string;
+  ariaLabel?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+};
+
+type ButtonProps = BaseUiProps & {
+  type?: ButtonType;
+  onClick: (e: React.MouseEvent) => void;
+};
+
+type LinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'color'> &
+  BaseUiProps & {
+  to: string;
+  navigate?: () => void;
+  external?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+};
+
+type FormContainerProps = ComponentPropsWithoutRef<'form'>;
+type ButtonContainerProps = HTMLAttributes<HTMLDivElement>;
+
+interface FormConfig {
+  fields: FormField[];
+  layout?: FormLayout[];
+
+  submitShow?: boolean;
+  submitAction: (values: Record<string, any>) => void | Promise<void>;
+  submitLabel?: string;
+  cancelShow?: boolean;
+  cancelAction?: () => void;
+  cancelLabel?: string;
+
+  buttons?: (ButtonProps | LinkProps)[];
+  extraValidation?: (values: Record<string, any>) => boolean | Promise<boolean>
+
+  className?: string;
+  style?: CSSProperties;
+
+  disableWhenOffline?: boolean;
+
+  container?: ComponentType<FormContainerProps>;
+  buttonContainer?: ComponentType<ButtonContainerProps>;
+}
+
+declare const Form: ({ fields, layout, submitShow, submitAction, submitLabel, cancelShow, cancelAction, cancelLabel, buttons, extraValidation, className, style, disableWhenOffline, container: Container, buttonContainer: ButtonContainer, }: FormConfig) => react_jsx_runtime.JSX.Element;
+
+type BaseFieldProps = {
+  id: string;
+  name: string;
+  label?: string;
+  placeholder?: string;
+  value: unknown;
+  errors: string[];
+  required?: boolean;
+  autocomplete?: string;
+  touched: boolean;
+  focused: boolean;
+  readOnly?: boolean;
+  disabled: boolean;
+  icon?: IconType;
+  description?: string;
+  onChange: (value: unknown) => void;
+  setFocused: (focused: boolean) => void;
+  setTouched: (touched: boolean) => void;
+  className?: string;
+  style?: Properties;
+};
+
+type TextareaFieldProps = BaseFieldProps & {
+  type: "textarea";
+  rows?: number;
+  cols?: number;
+};
+
+type FileFieldProps = BaseFieldProps & {
+  type: "file";
+  accept?: AcceptType;
+  multiple: boolean;
+  capture: CaptureType;
+  onError: (errors: string[]) => void;
+  filesize: number;
+  onFileRemove?: (file: File, index: number, files: File[]) => void;
+  onRemoveAll?: (files: File[]) => void;
+};
+
+type NumberFieldProps = BaseFieldProps & {
+  type: "number";
+  min: number;
+  max: number;
+  step: number;
+  spinner: boolean | SpinnerVariant;
+};
+
+type RangeFieldProps = BaseFieldProps & {
+  type: "range";
+  min: number;
+  max: number;
+  step: number;
+  showValue: boolean;
+};
+
+type DateFieldProps = BaseFieldProps & {
+  type: "date" | "time" | "datetime-local";
+  min: string;
+  max: string;
+  step: number;
+};
+
+type UrlFieldProps = BaseFieldProps & {
+  type: "url";
+  allowLocalhost: boolean;
+  allowFtp: boolean;
+  secureOnly: boolean;
+};
+
+type SelectFieldProps = BaseFieldProps & {
+  type: "select" | "creatable";
+  options: SelectOption[];
+  multiple: boolean;
+};
+
+type RadioFieldProps = BaseFieldProps & {
+  type: "radio";
+  options: string[] | Option[];
+  inline: boolean;
+};
+
+type FieldProps =
+  | FileFieldProps
+  | TextareaFieldProps
+  | NumberFieldProps
+  | RangeFieldProps
+  | DateFieldProps
+  | UrlFieldProps
+  | SelectFieldProps
+  | RadioFieldProps
+  | (BaseFieldProps & { type: Exclude<FieldType, "file" | "textarea" | "range" | "date" | "time" | "datetime-local" | "url" | "select" | "creatable" | "radio"> });
+
+type FieldType$1 = keyof FieldConfigMap;
+
+type FieldState = {
+  [K in FieldType$1]: {
+    type: K;
+    id: string;
+    name: string;
+    value: FieldConfigMap[T]['defaultValue'];
+
+    validations: ValidationRule<T>[];
+    errors: string[];
+
+    touched: boolean;
+    focused: boolean;
+  } & FieldConfigMap[K]
+}[FieldType$1];
+
+interface UseFormOptions {
+  disableWhenOffline: boolean;
+}
+
+declare const useForm: ({ disableWhenOffline }?: UseFormOptions) => {
+    register: (name: string, config: FormField, renderLayout?: boolean) => FieldProps;
+    unregister: (name: string) => void;
+    setValue: (name: string, value: unknown) => void;
+    getValues: () => Record<string, any>;
+    getValue: (name: string) => any;
+    reset: () => void;
+    isValid: () => boolean;
+    isDirty: () => boolean;
+    isBusy: () => boolean;
+    submit: (onSubmit: (values: Record<string, any>) => void | Promise<void>) => Promise<void>;
+    getField: (name: string) => FieldState | undefined;
+};
+
+/**
+ * Button component for user interaction.
+ *
+ * @component
+ * @example
+ * // Primaire button
+ * <Button label="Save" onClick={handleSave} />
+ *
+ * @example
+ * // Submit button with loading state
+ * <Button
+ *   type="submit"
+ *   label="Send"
+ *   variant="primary"
+ *   loading
+ * />
+ *
+ * @example
+ * // Button with icon and tekst
+ * <Button type="button" onClick={handleClick}>
+ *   <Icon name="plus" />
+ *   <span>Add</span>
+ * </Button>
+ *
+ * @example
+ * // Error variant
+ * <Button
+ *   type="button"
+ *   label="Delete"
+ *   variant="secondary"
+ *   color="error"
+ *   onClick={handleDelete}
+ * />
+ */
+declare const Button: React.FC<ButtonProps>;
+
+/**
+ * Custom Link component for internal or external navigation
+ *
+ * @component
+ * @example
+ * // Internal link
+ * <Link to="/dashboard" label="Dashboard" />
+ *
+ * @example
+ * // External link
+ * // external property is optional
+ * // http(s), ftp, email and tel with automatically render as external
+ * <Link to="https://example.com" label="Visit website" external />
+ *
+ * @example
+ * // Link with loading state
+ * <Link to="/profile" label="Profile" loading />
+ *
+ * @example
+ * // Link with custom click handler en navigation
+ * <Link
+ *   to="/settings"
+ *   label="Settings"
+ *   onClick={() => console.log('clicked')}
+ *   navigate={customNavigate}
+ * />
+ */
+declare const Link: React.FC<LinkProps>;
+
+declare const Checkbox: ({ value, onChange, name, id, label, required, setTouched, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: FieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const Input: React.MemoExoticComponent<(props: FieldProps) => react_jsx_runtime.JSX.Element>;
+
+declare const NumberInput: ({ value, min, max, step, spinner, onChange, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: NumberFieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const RangeInput: ({ value, min, max, step, showValue, onChange, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: RangeFieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const DateInput: ({ value, min, max, step, onChange, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: DateFieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const FileInput: ({ value, onChange, onError, accept, filesize, multiple, capture, onFileRemove, onRemoveAll, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: FileFieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const TextInput: ({ value, onChange, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: FieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const Radio: ({ value, onChange, options, inline, name, id, label, required, setTouched, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: RadioFieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const Select: ({ value, onChange, options, multiple, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: SelectFieldProps) => react_jsx_runtime.JSX.Element;
+
+declare const Textarea: ({ value, onChange, rows, cols, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: TextareaFieldProps) => react_jsx_runtime.JSX.Element;
+
+export { Button, type ButtonProps, Checkbox, DateInput, type FieldProps, FileInput, Form, type FormConfig, type FormLayout, Input, Link, type LinkProps, NumberInput, Radio, RangeInput, Select, TextInput, Textarea, useForm };