docs(inputs): add comprehensive JSDoc comments

This commit adds detailed JSDoc comments to the inputs components, enhancing code readability and developer understanding. These comments describe the purpose of components, types, interfaces, props, methods, and provide information on styling and behavior. By including this documentation, the codebase becomes more maintainable and easier for new developers to understand, facilitating a better development workflow and more efficient onboarding.

Author: RedonAlla

npm-packages/src/packages/components/ra-inputs/src/check-list/index.tsx

@@ -1,3 +1,9 @@
+/**
+ * @ Author: Redon Alla
+ * @ Modified by: Redon Alla
+ * @ Description: React component that allows users to select items from a list. Component extending React.PureComponent, which is optimized for performance by implementing a shallow prop and state comparison. It supports both single and multiple selection modes based on the 'multipleSelect' prop. The component maintains its selected items in the state and updates the selection when an item is pressed. It also provides styling options through various props and handles rendering of labels and helper text conditionally.
+ */
+
 import React from "react";
 import { View, Text } from "react-native";
 import ThemeContext from "@flexnative/theme-context";
@@ -8,11 +14,32 @@ import FalsyComponent from "../components/falsy-component";
 import { includes, isEqual, isObject } from "../input.utilities";
 
 
+/**
+ * This defines a generic type alias StateProps that takes a type parameter T.
+ * This allows us to create flexible and reusable types.
+ */
 type StateProps<T> = {
+  /**
+   * An optional property `selectedItem` of type `T`
+   */
   selectedItem?: T;
+
+  /**
+   * An optional property `selectedItems` which is an array of items of type `T`
+   */
   selectedItems?: Array<T>;
 }
 
+/**
+ * React component that allows users to select items from a list.
+ * Component extending React.PureComponent, which is optimized for performance by implementing a shallow prop and state comparison.
+ * It supports both single and multiple selection modes based on the 'multipleSelect' prop.
+ * The component maintains its selected items in the state and updates the selection when an item is pressed.
+ * It also provides styling options through various props and handles rendering of labels and helper text conditionally.
+ * 
+ * @class CheckList<T>
+ * @extends {React.PureComponent<CheckListProps<T>, StateProps<T>>}
+ */
 export default class CheckList<T> extends React.PureComponent<CheckListProps<T>, StateProps<T>> {
   static contextType = ThemeContext;
   declare context: React.ContextType<typeof ThemeContext>;

npm-packages/src/packages/components/ra-inputs/src/check-list/props.ts

@@ -1,11 +1,22 @@
+/**
+ * @ Author: Redon Alla
+ * @ Modified by: Redon Alla
+ * @ Description: Interface defines the properties for a CheckList component. It allows for single or multiple selections of items, supports custom styling options, and provides callbacks for handling changes in selection. The interface is generic, enabling it to work with various types of selected values.
+ */
+
 import { ReactElement, SyntheticEvent } from "react";
 import { ColorValue, NativeSyntheticEvent, StyleProp, TextStyle, ViewProps } from "react-native";
 import { BorderRadius, BorderWidth, Color, Sizes } from "@flexnative/theme-context";
 
 import { InputType } from "../input.props";
 import { CheckProps, CheckboxEvent } from "../check/props";
 
-
+/**
+ * Interface defines the properties for a CheckList component. 
+ * It allows for single or multiple selections of items, supports custom styling options,
+ * and provides callbacks for handling changes in selection. The interface is generic, 
+ * enabling it to work with various types of selected values.
+ */
 export interface CheckListProps<T> extends ViewProps {
   /**
    * @template T representing selected value from the available list.

npm-packages/src/packages/components/ra-inputs/src/check-list/styles.ts

@@ -1,3 +1,9 @@
+/**
+ * @ Author: Redon Alla
+ * @ Modified by: Redon Alla
+ * @ Description: This code defines a function `createStyles` that generates a set of styles for a component based on the provided `StyleProps`. It utilizes theme properties such as font size, colors, and border radius to create responsive and consistent styles. The function returns a StyleSheet object containing styles for various elements like the container, label, and help text, adjusting properties based on the input props.
+ */
+
 import { ColorValue, StyleSheet } from 'react-native';
 
 import { BaseTheme, BorderRadius, BorderWidth, Color, Sizes } from '@flexnative/theme-context';
@@ -7,20 +13,77 @@ import { getBorders } from '../input.utilities';
 import { PADDING_HORIZONTAL_MULTIPLIER, PADDING_VERTICAL_MULTIPLIER, TEXT_HELPER_MULTIPLIER } from '../input.constants';
 
 
+/**
+ * This TypeScript code defines a type named `StyleProps` which is used to specify the properties for styling components. 
+ * It includes various attributes such as `type`, `color`, `size`, `radius`, and optional properties like `borderWidth`, 
+ * `disabled`, `borderColor`, `backgroundColor`, `material`, `direction`, and `theme`. 
+ *
+ * This type can be useful for ensuring consistent styling across different components in a TypeScript-based application.
+ */
 type StyleProps = {
+  /**
+   * Specifies the appearance style of the input component.
+   */
   type: InputType;
+
+  /**
+   * Determines the color theme of the input, which can be a predefined theme color or a custom value.
+   */
   color: Color;
+
+  /**
+   * Defines the size of the input component, affecting dimensions such as height and width.
+   */
   size: Sizes;
+
+  /**
+   * Sets the border radius for the input, influencing how rounded the corners are.
+   */
   radius: BorderRadius;
+
+  /**
+   * (Optional) Determines the width of the input's border.
+   */
   borderWidth?: BorderWidth;
+
+  /**
+   * (Optional) A boolean indicating whether the input is disabled, meaning it cannot be interacted with by the user.
+   */
   disabled?: boolean;
+
+  /**
+   * (Optional) Specifies the color of the border using `react-native` ColorValue definitions.
+   */
   borderColor?: ColorValue;
+
+  /**
+   * (Optional) Sets the background color of the input using `react-native` ColorValue definitions.
+   */
   backgroundColor?: ColorValue;
+
+  /**
+   * (Optional) Indicates whether to apply Material design characteristics to the input.
+   */
   material?: boolean;
+
+  /**
+   * (Optional) Specifies the layout direction of elements within the input, either in a 'row' or 'column'.
+   */
   direction?: 'row' | 'column';
+
+  /**
+   * The base theme object used for styling, which contains theme-related properties and values.
+   */
   theme: BaseTheme<any>;
 }
-  
+
+/**
+ * This code defines a function `createStyles` that generates a set of styles for a component based on the provided `StyleProps`.
+ * It utilizes theme properties such as font size, colors, and border radius to create responsive and consistent styles.
+ * The function returns a StyleSheet object containing styles for various elements like the container, label, and help text, adjusting properties based on the input props.
+ * @param {StyleProps} props - `StyleProps` which is used to specify the properties for styling components.
+ * @returns {StyleSheet} StyleSheet object containing styles for various elements like the container, label, and help text, adjusting properties based on the input props.
+ */
 export const createStyles = (props: StyleProps) => {
   const fontSize = props.theme.fontSize[props.size!] ?? props.theme.fontSize.default;
   const themeColor = props.theme.colors[props.color] ?? props.color;

npm-packages/src/packages/components/ra-inputs/src/check/index.tsx

@@ -1,3 +1,9 @@
+/**
+ * @ Author: Redon Alla
+ * @ Modified by: Redon Alla
+ * @ Description: This code defines a generic React component called Check, which represents a checkbox element. Component extending React.PureComponent, which is optimized for performance by implementing a shallow prop and state comparison. The component accepts various props for customization, such as value, type, size, colors, and label. It handles changes via the handleChange method, which triggers an onValueChange callback when the checkbox is pressed. The component renders a Pressable element that toggles between checked and unchecked states, displaying appropriate check and label elements based on the current state.
+ */
+
 import React from "react";
 import { Pressable, Text, TextStyle, View } from "react-native";
 
@@ -10,6 +16,16 @@ import FalsyComponent from "../components/falsy-component";
 import { getStyle } from "../input.utilities";
 
 
+/**
+ * This code defines a generic React component called Check, which represents a checkbox element.
+ * Component extending React.PureComponent, which is optimized for performance by implementing a shallow prop and state comparison.
+ * The component accepts various props for customization, such as value, type, size, colors, and label. 
+ * It handles changes via the handleChange method, which triggers an onValueChange callback when the checkbox is pressed. 
+ * The component renders a Pressable element that toggles between checked and unchecked states, displaying appropriate check and label elements based on the current state.
+ * 
+ * @class Check<T>
+ * @extends {React.PureComponent<CheckProps<T>>}
+ */
 export default class Check<T> extends React.PureComponent<CheckProps<T>> {
   static contextType = ThemeContext;
   declare context: React.ContextType<typeof ThemeContext>;

npm-packages/src/packages/components/ra-inputs/src/check/props.ts

@@ -7,6 +7,9 @@ import { BorderRadius, BorderWidth, Color, Sizes } from "@flexnative/theme-conte
 
 export type CheckType = 'outlined' | 'solid' | 'inverse' | 'ghost';
 
+/**
+ * PRops that specifies the properties needed for styling CheckBox components.
+ */
 export interface CheckProps<T> extends PressableProps {
   /**
    * @template T representing checkbox selected value.

npm-packages/src/packages/components/ra-inputs/src/check/styles.ts

@@ -1,3 +1,9 @@
+/**
+ * @ Author: Redon Alla
+ * @ Modified by: Redon Alla
+ * @ Description: Functions for creating styles for CheckBox component.
+ */
+
 import { ColorValue, StyleSheet } from 'react-native';
 
 import { BaseTheme, BorderRadius, BorderWidth, Color, Sizes } from '@flexnative/theme-context';
@@ -6,26 +12,102 @@ import { CheckType } from './props';
 import { CHECK_CONTAINER_SIZE_MULTIPLIER, PADDING_VERTICAL_MULTIPLIER, WHITE_TEXT_COLOR } from '../input.constants';
 
 
+/**
+ * Props that specifies the properties needed for styling CheckBox components.
+ */
 type StyleProps = {
+  /**
+   * The type of check, which influences the visual style ( "outlined" | "solid" | "inverse" | "ghost").
+   */
   type: CheckType;
+
+  /**
+   * The primary color used for styling different elements of the component.
+   */
   color: Color;
+
+  /**
+   * The size of the component, which can affect dimensions and font size.
+   */
   size: Sizes;
+
+  /**
+   * Specifies the border radius, influencing the roundness of component corners.
+   */
   radius: BorderRadius;
+
+  /**
+   * Specifies the border width. It is optional and may have a default value if not provided.
+   */
   borderWidth?: BorderWidth;
+
+  /**
+   * A boolean indicating whether the component is disabled, impacting its interaction and appearance.
+   */
   disabled?: boolean;
+
+  /**
+   * The color of the border when the component is in an unchecked state. This property is optional.
+   */
   borderColor?: ColorValue;
+
+  /**
+   * The color of the border when the component is in a checked state.
+   */
   checkedBorderColor: ColorValue;
+
+  /**
+   * The background color when the component is in an unchecked state. This property is optional.
+   */
   backgroundColor?: ColorValue;
+
+  /**
+   * The background color when the component is in an unchecked state. This property is optional.
+   */
   checkedBackgroundColor?: ColorValue;
+
+  /**
+   * The theme object containing various design tokens utilized for styling, such as colors, fonts, metrics, etc.
+   */
   theme: BaseTheme<any>;
 }
 
+/**
+ * This module defines a function `createStyles` that generates a set of styles for a UI component based on the provided properties and a theme. 
+ * It calculates various style attributes such as font size, colors, padding, border width, and radius, and returns a StyleSheet object containing styles for different states of the component.
+*
+ * @param {StyleProps} props 
+ * @returns {StyleSheet} - StyleSheet object containing styles for different states of the component
+ */
 export const createStyles = (props: StyleProps) => {
+  /**
+   * Determine the font size based on the provided size or default value from the theme.
+   */
   const fontSize = props.theme.fontSize[props.size] ?? props.theme.fontSize.default;
+
+  /**
+   * Determine the theme color based on the provided color or use a default color value.
+   */
   const themeColor = props.theme.colors[props.color] ?? props.color as ColorValue;
+
+  /**
+   * Calculate vertical padding using a predefined multiplier and the determined font size.
+   */
   const paddingVertical = PADDING_VERTICAL_MULTIPLIER * fontSize;
+
+  /**
+   * Set the border width either from the theme or directly from the provided property.
+   */
   const borderWidth = props.theme.borderWidth[props.borderWidth!] ?? props.borderWidth as number;
+  
+  /**
+   * Set the border radius either from the theme or directly from the provided property.
+   */
   const borderRadius = props.theme.borderRadius[props.radius] ?? props.radius as number;
+
+  /**
+   * Calculate container size for check elements using a multiplier and font size.
+   */
   const checkContainerSize = fontSize * CHECK_CONTAINER_SIZE_MULTIPLIER;
 
   return StyleSheet.create({
@@ -76,6 +158,16 @@ export const createStyles = (props: StyleProps) => {
   });
 }
 
+/**
+ * Determines the appropriate check color based on various conditions.
+ *
+ * @param {boolean} isLight - Indicates if the theme is light.
+ * @param {ColorValue} colorValue - The color value to be used.
+ * @param {Color} color - The color type.
+ * @param {CheckType} type - The type of check.
+ * @param {ColorValue} [blackColor='black'] - The default black color value.
+ * @returns {ColorValue} - The determined check color.
+ */
 function getCheckColor(isLight: boolean, colorValue: ColorValue, color: Color, type: CheckType, blackColor: ColorValue = 'black') {
   if(type === 'outlined' || type === 'ghost')
     return colorValue;

npm-packages/src/packages/components/ra-inputs/src/components/falsy-component.ts

@@ -1,3 +1,9 @@
+/**
+ * @ Author: Redon Alla
+ * @ Modified by: Redon Alla
+ * @ Description: Helper component for conditionally render a component.
+ */
+
 import React from 'react';
 
 export type RenderFCProp<Props> = (props?: Props) => React.ReactElement;

npm-packages/src/packages/components/ra-inputs/src/components/input-container.tsx

@@ -1,17 +1,48 @@
+/**
+ * @ Author: Redon Alla
+ * @ Modified by: Redon Alla
+ * @ Description: Component for Wrapper Input Component. It renders also the label for material design style.
+ */
+
 import React from "react";
 import { StyleProp, TextStyle, View, Text } from "react-native";
 
 import FalsyComponent from "./falsy-component";
 import { materialStyle } from "../input.styles";
 
 
+/**
+ * Type definition for InputContainer component props.
+ */
 type InputContainerProps = {
+  /**
+   * Determines if the material design style should be applied.
+   */
   material?: boolean;
+
+  /**
+   * The children elements to be rendered inside the container.
+   */
   children: React.ReactNode;
+
+  /**
+   * The label to be displayed. It can be a string or a React element.
+   */
   label?: string | React.ReactElement;
+
+  /**
+   * Style to be applied to the label.
+   */
   labelStyle?: StyleProp<TextStyle>;
 }
 
+/**
+ * InputContainer component that conditionally applies material design styles.
+ * It extends React.PureComponent to optimize performance by implementing a shallow prop and state comparison.
+ * 
+ * @class InputContainer
+ * @extends {React.PureComponent<InputContainerProps, {}>}
+ */
 export default class InputContainer extends React.PureComponent<InputContainerProps, {}> {
   static displayName = 'InputContainer';
 
@@ -24,10 +55,7 @@ export default class InputContainer extends React.PureComponent<InputContainerPr
     if (!material) {
       return children;
     }
-
-    /**
-     * Memoize styles if they are costly to compute.
-     */
+    
     const styles = materialStyle();
 
     return (