fix(types): correct types in List components and implement Form Props Types

- Fixed TypeScript types and definitions in List components to ensure consistency.
- Implemented Form Props Types by inheriting from the PuiBaseProps interface.

Author: jircdev

src/modules/base/ts/index.tsx

@@ -4,8 +4,8 @@ import { IPUIProps } from './types';
 
 // Define the interface for the base component
 interface /*bundle*/ BaseComponentProps<T = HTMLElement> extends IPUIProps<T> {
-	as?: keyof JSX.IntrinsicElements; // The HTML tag to be used
 	motion?: boolean; // Flag to determine if framer-motion should be used
+	[key: string]: any; // Allow any other prop
 }
 
 // Create the base component using a function with a constructor

src/modules/base/ts/types.ts src/modules/base/ts/types/index.ts

@@ -1,5 +1,5 @@
 import { MotionProps } from 'framer-motion';
-import React, { HTMLAttributes, AnimationEventHandler } from 'react';
+import React, { HTMLAttributes, AnimationEventHandler, ElementType, ReactHTML } from 'react';
 
 type ConflictingProps = 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration';
 
@@ -15,6 +15,7 @@ export /*bundle*/ interface IPUIProps<T = unknown> extends HTMLMotionProps<T> {
 	 * @deprecated
 	 */
 	type?: string;
+	as?: ElementType & keyof ReactHTML;
 	title?: string;
 	children?: React.ReactNode;
 	variant?: Variant;

src/modules/base/ts/types/interfaces.ts

@@ -0,0 +1,19 @@
+// text-labels.ts
+import { IPUIProps } from './index';
+
+/**
+ * Props for link elements like <a>.
+ */
+export /*bundle*/ interface ILinkProps<T = HTMLAnchorElement> extends IPUIProps<T> {
+	as: 'a';
+	href?: string;
+	target?: '_blank' | '_self' | '_parent' | '_top';
+	rel?: string;
+}
+
+/**
+ * Props for inline text styling elements like <strong>, <em>, <span>.
+ */
+export /*bundle*/ interface IInlineTextProps<T = HTMLElement> extends IPUIProps<T> {
+	as: 'strong' | 'em' | 'span';
+}

src/modules/base/ts/types/multimedia.ts

@@ -0,0 +1,39 @@
+// multimedia-labels.ts
+import { IPUIProps } from './';
+
+/**
+ * Props for image elements like <img>.
+ */
+export /*bundle*/ interface IImageProps<T = HTMLImageElement> extends IPUIProps<T> {
+	as: 'img';
+	src: string;
+	alt: string;
+	width?: number | string;
+	height?: number | string;
+}
+
+/**
+ * Props for audio elements like <audio>.
+ */
+export /*bundle*/ interface IAudioProps<T = HTMLAudioElement> extends IPUIProps<T> {
+	as: 'audio';
+	src: string;
+	controls?: boolean;
+	autoPlay?: boolean;
+	loop?: boolean;
+	muted?: boolean;
+}
+
+/**
+ * Props for video elements like <video>.
+ */
+export /*bundle*/ interface IVideoProps<T = HTMLVideoElement> extends IPUIProps<T> {
+	as: 'video';
+	src: string;
+	controls?: boolean;
+	autoPlay?: boolean;
+	loop?: boolean;
+	muted?: boolean;
+	width?: number | string;
+	height?: number | string;
+}

src/modules/common/components/ts/html-wrapper.tsx

@@ -7,7 +7,7 @@ interface HtmlRenderProps<T extends HTMLElement = HTMLElement> extends React.HTM
 	 */
 	tag?: keyof JSX.IntrinsicElements;
 	as?: keyof JSX.IntrinsicElements;
-	params: Record<string, string>;
+	params?: Record<string, string>;
 }
 
 export /*bundle*/ function HtmlWrapper({

src/modules/form/controls/ts/checkbox/index.tsx

@@ -1,6 +1,6 @@
 import { IPUIProps } from 'pragmate-ui/base';
 import React, { MouseEvent, RefAttributes, forwardRef, useEffect, useState } from 'react';
-import { IFormCheckableProps } from '../types';
+import { IFormCheckableProps } from '../types/interfaces';
 
 export /*bundle*/ const Checkbox: React.FC<IPUIProps & RefAttributes<HTMLInputElement>> = forwardRef(function (
 	props: IFormCheckableProps,

src/modules/form/controls/ts/input/components/date.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 import { Icon } from 'pragmate-ui/icons';
 import { useInputContext } from '../context';
-interface HTMLInputWithPicker extends HTMLInputElement {
-	showPicker: () => void;
-}
 
 export function Date(): JSX.Element {
 	const { input, props, icon, isDate } = useInputContext();
@@ -13,15 +10,8 @@ export function Date(): JSX.Element {
 
 	const showPicker = () => {
 		if (props.disabled) return;
-		(input.current as any).showPicker()
-	}
-	
-	return (
-		<Icon
-			key='icon'
-			icon={iconValue}
-			className='pui-input__icon'
-			onClick={showPicker}
-		/>
-	);
+		(input.current as any).showPicker();
+	};
+
+	return <Icon key='icon' icon={iconValue} className='pui-input__icon' onClick={showPicker} />;
 }

src/modules/form/controls/ts/input/components/label.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useInputContext } from '../context';
-import { ILabelProps } from '../interfaces';
+
 import { BaseComponent } from 'pragmate-ui/base';
+import { ILabelProps } from '../../types/label';
 export /*bundle */ function Label({ required, position, children }: ILabelProps = {}) {
 	const { name, id } = useInputContext();
 

src/modules/form/controls/ts/input/context.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IInputContextValue } from './interfaces';
+import { IInputContextValue } from './types';
 
 export const InputContext: React.Context<IInputContextValue> = React.createContext({});
 export const useInputContext = (): IInputContextValue => React.useContext(InputContext);

src/modules/form/controls/ts/input/control.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, useEffect } from 'react';
 import { useInputContext } from './context';
 import { internalProps } from './internal-props';
-import { IProps } from './interfaces';
+import { IProps } from '../types/interfaces';
 import { IconContainer } from './components/icon-container';
 import { BaseComponent } from 'pragmate-ui/base';
 

src/modules/form/controls/ts/input/index.tsx

@@ -1,11 +1,13 @@
 import React, { MutableRefObject, useRef } from 'react';
 import { useState } from 'react';
-import type { IInputContainer, IInputContextValue, ILabelProps, IProps, TState } from './interfaces';
+import type { IInputContainer, IProps } from '../types/interfaces';
 import { InputContext } from './context';
 import { Label } from './components/label';
 import { ControlSelector } from './control';
 import { Error } from './components/error';
-import { BaseComponent } from 'pragmate-ui/base';
+
+import { IInputContextValue, TState } from './types';
+import { ILabelProps } from '../types/label';
 
 /**
  *

src/modules/form/controls/ts/input/interfaces/index.ts

@@ -0,0 +1,20 @@
+import { InputHTMLAttributes, MutableRefObject } from 'react';
+import { IProps } from '../types/interfaces';
+
+export interface TState {
+	value?: string | number | readonly string[];
+	type?: InputHTMLAttributes<HTMLInputElement>['type'];
+}
+
+export interface IInputContextValue {
+	state?: TState;
+	id?: string;
+	value?: string;
+	name?: string;
+	props?: IProps;
+	icon?: string;
+	setState?: any;
+	setValue?: (value) => void;
+	input?: MutableRefObject<HTMLInputElement>;
+	isDate?: boolean;
+}

src/modules/form/controls/ts/input/types.ts

@@ -1,31 +1,25 @@
 import { IPUIProps } from 'pragmate-ui/base';
 import React, { MutableRefObject, useRef } from 'react';
-import { IFormProps } from './types';
+import { IFormProps } from './types/interfaces';
 
-interface IPropsRadio extends InputHTMLAttributes<HTMLInputElement> {
-    label?: string;
-}
-
-type CombinedProps = IPropsRadio & IPUIProps<HTMLInputElement>;
-
-export /*bundle*/ function Radio(props: CombinedProps): JSX.Element {
-    const input: MutableRefObject<HTMLInputElement> = useRef<HTMLInputElement>(null);
+export /*bundle*/ function Radio(props: IFormProps): JSX.Element {
+	const input: MutableRefObject<HTMLInputElement> = useRef<HTMLInputElement>(null);
 
-    const onClick = (event): void => {
-        event.stopPropagation();
-        input.current.checked = true;
-        if (!!props.onChange) props.onChange(event);
-    };
+	const onClick = (event): void => {
+		event.stopPropagation();
+		input.current.checked = true;
+		if (!!props.onChange) props.onChange(event);
+	};
 
 	const properties: IFormProps = { ...props };
 	delete properties.onChange;
 
-    const cls: string = `pragmate-element-radio ${properties.className ? properties.className : ''}`;
+	const cls: string = `pragmate-element-radio ${properties.className ? properties.className : ''}`;
 
-    return (
-        <label className={cls} onClick={onClick}>
-            <input ref={input} {...properties} type='radio' onChange={onClick} />
-            {properties.label && <span>{properties.label}</span>}
-        </label>
-    );
+	return (
+		<label className={cls} onClick={onClick}>
+			<input ref={input} {...properties} type='radio' onChange={onClick} />
+			{properties.label && <span>{properties.label}</span>}
+		</label>
+	);
 }

src/modules/form/controls/ts/radio.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IFormCheckableProps } from './types';
+import { IFormCheckableProps } from './types/interfaces';
 
 export /* bundle */ function Switch(props: IFormCheckableProps): JSX.Element {
 	const { checked, onChange, variant = 'primary', disabled, sizing = 'md', className } = props;

src/modules/form/controls/ts/switch.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChangeEvent, useRef, useState } from 'react';
-import { IProps, IState } from './types';
+import { IProps, IState } from '../types/textarea';
 import { TextareaError } from './error';
 import { TextareaCounter } from './counter';
 

src/modules/form/controls/ts/textarea/index.tsx

@@ -1,11 +1,36 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
 import { IPUIProps } from 'pragmate-ui/base';
-export interface IFormProps extends IPUIProps<HTMLInputElement> {
+
+/**
+ * Unified IFormProps interface containing all common properties.
+ */
+export /*bundle*/ interface IFormProps<T = HTMLElement> extends IPUIProps<T> {
 	disabled?: boolean;
 	label?: string;
-	name?: string;
-	sizing?: 'small' | 'medium' | 'large'; // Validate if size or sizing
+	value?: string | number;
+	placeholder?: string;
+	children?: ReactNode;
+}
+
+/**
+ * Props for input elements like <input>.
+ */
+export /*bundle*/ interface IInputProps<T = HTMLInputElement> extends IFormProps<T> {
+	type?: string;
+	checked?: boolean;
+	readOnly?: boolean;
+}
+
+/**
+ * Props for button elements like <button>.
+ */
+export /*bundle*/ interface IButtonProps<T = HTMLButtonElement> extends IFormProps<T> {
+	type?: 'button' | 'submit' | 'reset';
 }
 
-export interface IFormCheckableProps extends IFormProps {
+/**
+ * Extended form checkable props for elements like <input> of type checkbox or radio.
+ */
+export /*bundle*/ interface IFormCheckableProps<T = HTMLInputElement> extends IInputProps<T> {
 	checked?: boolean;
 }

src/modules/form/controls/ts/types/index.ts

@@ -0,0 +1,37 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { IPUIProps } from 'pragmate-ui/base';
+export interface IFormProps extends IPUIProps<HTMLInputElement> {
+	disabled?: boolean;
+	label?: string;
+	name?: string;
+	sizing?: 'small' | 'medium' | 'large'; // Validate if size or sizing
+}
+
+export interface IFormCheckableProps extends IFormProps {
+	checked?: boolean;
+}
+
+export interface IProps extends InputHTMLAttributes<HTMLInputElement> {
+	ref?: any;
+	variant?: string;
+	icon?: string;
+	errorMessage?: string;
+	value?: string;
+	label?: any;
+	children?: ReactNode;
+	hasError?: boolean;
+	password?: boolean;
+}
+
+export interface IPropsState {
+	value?: string;
+	errorMessage: string;
+	lengthMessage: string;
+	emptyMessage: string;
+	_hasError?: boolean;
+	type: InputHTMLAttributes<HTMLInputElement>['type'];
+}
+
+export interface IInputContainer {
+	className?: string;
+}