feat: Add JSDoc annotation for components and utils

* JSDoc addition

* eslint error

Author: aarathyKeyvalue

package-lock.json

@@ -1,16 +1,25 @@
 
+/**
+ * Enum for Label position
+ */
 export enum LABEL_POSITION {
   LEFT = "left",
   RIGHT = "right",
   TOP = "top",
   BOTTOM = "bottom",
 }
 
+/**
+ * Enum for orientation
+ */
 export enum ORIENTATION {
   HORIZONTAL = "horizontal",
   VERTICAL = "vertical",
 }
 
+/**
+ * Enum for elements of each node
+ */
 export enum Elements {
   LabelDescription = "LabelDescription",
   LabelTitle = "LabelTitle",

src/constants.ts

@@ -4,6 +4,13 @@ import { Elements } from "../constants";
 import whiteTick from "../assets/white-tick.svg";
 import styles from "./styles.module.scss";
 
+/**
+ * Represents each node in the stepper
+ * Handles style addition to each node separately
+ * Handles click event of each node
+ * @param {INodeProps} props
+ * @returns {FC}
+ */
 const Node: FC<INodeProps> = (props) => {
   const {
     step,

src/node/node.tsx

@@ -5,7 +5,13 @@ import { LABEL_POSITION, ORIENTATION } from "../constants";
 import StepContent from "./stepContent";
 import StepInfo from "./stepInfo";
 
-//  Each step consists of a node, a label, and connectors to the previous and next steps.
+/**
+ * Represents each step.
+ * Consist of node, label and connectors to previous and next step
+ * @function
+ * @param {IStepProps} props
+ * @returns {React.FC}
+ */
 const Step: (props: IStepProps) => JSX.Element = ({
   stepperProps,
   step,

src/stepper/step.tsx

@@ -4,6 +4,12 @@ import { LABEL_POSITION, Elements } from "../constants";
 import getStyles from "../utils/getStyles";
 import { IStepContentProps } from "./types";
 
+/**
+ * Gives the step content considering the orientation
+ * Can customize styles and nodeWidth of each step
+ * @param {IStepContentProps} props
+ * @returns {React.FC}
+ */
 const StepContent: (props: IStepContentProps) => JSX.Element = ({
   labelPosition,
   isVertical,

src/stepper/stepContent.tsx

@@ -6,6 +6,12 @@ import { LABEL_POSITION, Elements, ORIENTATION } from "../constants";
 import getStyles from "../utils/getStyles";
 import getLabelStyle from "../utils/getLabelStyle";
 
+/**
+ * To handle step display (inline or not)
+ * Can handle description display and label
+ * @param {IStepInfoProps} props
+ * @returns {React.FC}
+ */
 const StepInfo: (props: IStepInfoProps) => JSX.Element = ({
   orientation,
   labelPosition,

src/stepper/stepInfo.tsx

@@ -4,6 +4,11 @@ import type { IStepperProps } from "./types";
 import { ORIENTATION } from "../constants";
 import Step from "./step";
 
+/**
+ * To display each steps after analysing the orientation
+ * @param { IStepperProps} props
+ * @returns {React.FC}
+ */
 const Stepper = (props: IStepperProps): JSX.Element => {
   const {
     steps,

src/stepper/stepperComponent.tsx

@@ -1,5 +1,12 @@
 import { LABEL_POSITION, ORIENTATION } from "../constants";
 
+/**
+ * To get the label style considering the orientation
+ * @function
+ * @param {string} [orientation]
+ * @param {string} [labelPosition]
+ * @returns {string|undefined}
+ */
 const getLabelStyle: (orientation?: string, labelPosition?: string) => string | undefined = (orientation, labelPosition) => {
   if (orientation !== ORIENTATION.VERTICAL) {
     if (labelPosition === LABEL_POSITION.TOP) return "horizontalLabelTop";

src/utils/getLabelStyle.ts

@@ -2,6 +2,15 @@ import { Elements } from "../constants";
 import { IStep, IStyleFunction } from "../stepper/types";
 
 
+/**
+ * To get the Style of element from the style object provided
+ * @function
+ * @param {{[key in Elements]?: IStyleFunction}} styles
+ * @param {Elements} element
+ * @param {IStep} step
+ * @param {number} index
+ * @returns {object}
+ */
 const  getStyles = (styles: { [key in Elements]?: IStyleFunction }, element: Elements, step: IStep, index: number): object => {
   const getElementStyle = styles[element];
   if (getElementStyle) {