Skip to content

Commit da1db8b

Browse files
aarathyKeyvalueaarathyKeyvalue
committed
JSDoc addition
1 parent 8355771 commit da1db8b

File tree

9 files changed

+36029
-25679
lines changed

9 files changed

+36029
-25679
lines changed

‎package-lock.json‎

Lines changed: 35870 additions & 25579 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/constants.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11

2+
/**
3+
* Enum for Label position
4+
*/
25
export enum LABEL_POSITION {
36
LEFT = "left",
47
RIGHT = "right",
58
TOP = "top",
69
BOTTOM = "bottom",
710
}
811

12+
/**
13+
* Enum for orientation
14+
*/
915
export enum ORIENTATION {
1016
HORIZONTAL = "horizontal",
1117
VERTICAL = "vertical",
1218
}
1319

20+
/**
21+
* Enum for elements of each node
22+
*/
1423
export enum Elements {
1524
LabelDescription = "LabelDescription",
1625
LabelTitle = "LabelTitle",

‎src/node/node.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ import { Elements } from "../constants";
44
import whiteTick from "../assets/white-tick.svg";
55
import styles from "./styles.module.scss";
66

7+
/**
8+
* Represents each node in the stepper
9+
* Handles style addition to each node separately
10+
* Handles click event of each node
11+
* @param {INodeProps} props
12+
* @returns {FC}
13+
*/
714
const Node: FC<INodeProps> = (props) => {
815
const {
916
step,

‎src/stepper/step.tsx‎

Lines changed: 61 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
1-
import React, { useRef, useEffect, useState } from "react";
2-
import "./styles.scss";
3-
import type { IStepProps } from "../stepper/types";
4-
import { LABEL_POSITION, ORIENTATION } from "../constants";
5-
import StepContent from "./stepContent";
6-
import StepInfo from "./stepInfo";
1+
import React, { useRef, useEffect, useState, FC } from 'react';
2+
import './styles.scss';
3+
import type { IStepProps } from '../stepper/types';
4+
import { LABEL_POSITION, ORIENTATION } from '../constants';
5+
import StepContent from './stepContent';
6+
import StepInfo from './stepInfo';
77

8-
// Each step consists of a node, a label, and connectors to the previous and next steps.
8+
/**
9+
* Represents each step.
10+
* Consist of node, label and connectors to previous and next step
11+
* @function
12+
* @param {IStepProps} props
13+
* @returns {FC}
14+
*/
915
const Step: (props: IStepProps) => JSX.Element = ({
1016
stepperProps,
1117
step,
12-
index
18+
index,
1319
}: IStepProps) => {
1420
const {
1521
steps,
@@ -20,7 +26,7 @@ const Step: (props: IStepProps) => JSX.Element = ({
2026
showDescriptionsForAllSteps = false,
2127
stepContent,
2228
onStepClick,
23-
renderNode
29+
renderNode,
2430
} = stepperProps;
2531
const [nodeWidth, setNodeWidth] = useState(0);
2632

@@ -46,24 +52,50 @@ const Step: (props: IStepProps) => JSX.Element = ({
4652

4753
// prevConnector represents the connector line from the current step's node (nth node) to the preceding step's node (n-1 th node).
4854
const prevConnectorClassName = `stepConnector leftConnector ${
49-
steps[index - 1]?.completed ? "activeConnector" : ""
50-
} ${index === 0 ? "hiddenConnector" : ""}`;
55+
steps[index - 1]?.completed ? 'activeConnector' : ''
56+
} ${index === 0 ? 'hiddenConnector' : ''}`;
5157

5258
// nextConnector represents the connector line from the current step's node (nth node) to the preceding step's node (n-1 th node).
5359

5460
const nextConnectorClassName = `stepConnector rightConnector ${
55-
steps[index]?.completed ? "activeConnector" : ""
56-
} ${index === steps.length - 1 ? "hiddenConnector" : ""}`;
61+
steps[index]?.completed ? 'activeConnector' : ''
62+
} ${index === steps.length - 1 ? 'hiddenConnector' : ''}`;
5763

5864
/* middleConnector connects the current step nextConnector to (n+1th) step prevConnector,
5965
allowing the display of descriptions or content between the two steps when necessary. */
6066

6167
const middleConnectorClassName = `middleStepConnector ${
62-
currentStepIndex > index ? "activeConnector" : ""
63-
} ${index === steps.length - 1 ? "hiddenConnector" : ""}`;
68+
currentStepIndex > index ? 'activeConnector' : ''
69+
} ${index === steps.length - 1 ? 'hiddenConnector' : ''}`;
6470

6571
return orientation !== ORIENTATION.VERTICAL &&
6672
labelPosition === LABEL_POSITION.TOP ? (
73+
<StepInfo
74+
orientation={orientation}
75+
labelPosition={labelPosition}
76+
isVertical={isVertical}
77+
isInlineLabelsAndSteps={isInlineLabelsAndSteps}
78+
index={index}
79+
currentStepIndex={currentStepIndex}
80+
step={step}
81+
showDescriptionsForAllSteps={showDescriptionsForAllSteps}
82+
onStepClick={onStepClick}
83+
renderNode={renderNode}
84+
styles={styles}
85+
nodeRef={nodeRef}
86+
prevConnectorClassName={prevConnectorClassName}
87+
nextConnectorClassName={nextConnectorClassName}
88+
steps={steps}
89+
/>
90+
) : (
91+
<div
92+
className={
93+
orientation === ORIENTATION.VERTICAL &&
94+
labelPosition === LABEL_POSITION.LEFT
95+
? 'verticalTextLeftContainer'
96+
: ''
97+
}
98+
>
6799
<StepInfo
68100
orientation={orientation}
69101
labelPosition={labelPosition}
@@ -81,46 +113,20 @@ const Step: (props: IStepProps) => JSX.Element = ({
81113
nextConnectorClassName={nextConnectorClassName}
82114
steps={steps}
83115
/>
84-
) : (
85-
<div
86-
className={
87-
orientation === ORIENTATION.VERTICAL &&
88-
labelPosition === LABEL_POSITION.LEFT
89-
? "verticalTextLeftContainer"
90-
: ""
91-
}
92-
>
93-
<StepInfo
94-
orientation={orientation}
95-
labelPosition={labelPosition}
96-
isVertical={isVertical}
97-
isInlineLabelsAndSteps={isInlineLabelsAndSteps}
98-
index={index}
99-
currentStepIndex={currentStepIndex}
100-
step={step}
101-
showDescriptionsForAllSteps={showDescriptionsForAllSteps}
102-
onStepClick={onStepClick}
103-
renderNode={renderNode}
104-
styles={styles}
105-
nodeRef={nodeRef}
106-
prevConnectorClassName={prevConnectorClassName}
107-
nextConnectorClassName={nextConnectorClassName}
108-
steps={steps}
109-
/>
110-
<StepContent
111-
labelPosition={labelPosition}
112-
isVertical={isVertical}
113-
currentStepIndex={currentStepIndex}
114-
index={index}
115-
styles={styles}
116-
step={step}
117-
showDescriptionsForAllSteps={showDescriptionsForAllSteps}
118-
middleConnectorClassName={middleConnectorClassName}
119-
stepContent={stepContent}
120-
nodeWidth={nodeWidth}
121-
/>
122-
</div>
123-
);
116+
<StepContent
117+
labelPosition={labelPosition}
118+
isVertical={isVertical}
119+
currentStepIndex={currentStepIndex}
120+
index={index}
121+
styles={styles}
122+
step={step}
123+
showDescriptionsForAllSteps={showDescriptionsForAllSteps}
124+
middleConnectorClassName={middleConnectorClassName}
125+
stepContent={stepContent}
126+
nodeWidth={nodeWidth}
127+
/>
128+
</div>
129+
);
124130
};
125131

126132
export default Step;

‎src/stepper/stepContent.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1-
import React from "react";
1+
import React, { FC } from "react";
22
import "./styles.scss";
33
import { LABEL_POSITION, Elements } from "../constants";
44
import getStyles from "../utils/getStyles";
55
import { IStepContentProps } from "./types";
66

7+
/**
8+
* Gives the step content considering the orientation
9+
* Can customize styles and nodeWidth of each step
10+
* @param {IStepContentProps} props
11+
* @returns {FC}
12+
*/
713
const StepContent: (props: IStepContentProps) => JSX.Element = ({
814
labelPosition,
915
isVertical,

‎src/stepper/stepInfo.tsx‎

Lines changed: 53 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1-
import React from "react";
2-
import "./styles.scss";
3-
import type { IStepInfoProps } from "./types";
4-
import Node from "../node";
5-
import { LABEL_POSITION, Elements, ORIENTATION } from "../constants";
6-
import getStyles from "../utils/getStyles";
7-
import getLabelStyle from "../utils/getLabelStyle";
1+
import React, { FC } from 'react';
2+
import './styles.scss';
3+
import type { IStepInfoProps } from './types';
4+
import Node from '../node';
5+
import { LABEL_POSITION, Elements, ORIENTATION } from '../constants';
6+
import getStyles from '../utils/getStyles';
7+
import getLabelStyle from '../utils/getLabelStyle';
88

9+
/**
10+
* To handle step display (inline or not)
11+
* Can handle description display and label position
12+
* @param {IStepInfoProps} props
13+
* @returns {FC}
14+
*/
915
const StepInfo: (props: IStepInfoProps) => JSX.Element = ({
1016
orientation,
1117
labelPosition,
@@ -21,70 +27,74 @@ const StepInfo: (props: IStepInfoProps) => JSX.Element = ({
2127
nodeRef,
2228
prevConnectorClassName,
2329
nextConnectorClassName,
24-
steps
30+
steps,
2531
}: IStepInfoProps) => (
2632
<div
27-
id="stepper-step"
33+
id='stepper-step'
2834
className={
2935
isVertical
3036
? `verticalStepperWrapper ${
31-
labelPosition === LABEL_POSITION.LEFT ? "labelLeft" : ""
32-
}`
33-
: "horizontalStepperWrapper"
37+
labelPosition === LABEL_POSITION.LEFT ? 'labelLeft' : ''
38+
}`
39+
: 'horizontalStepperWrapper'
3440
}
3541
>
3642
{!isInlineLabelsAndSteps && (
37-
<div className={getLabelStyle(orientation, labelPosition)} onClick={(): void => onStepClick && onStepClick(step, index)}>
43+
<div
44+
className={getLabelStyle(orientation, labelPosition)}
45+
onClick={(): void => onStepClick && onStepClick(step, index)}
46+
>
3847
<div
39-
className="label"
48+
className='label'
4049
id={`step-label-${index}`}
4150
style={{
4251
...(getStyles(styles, Elements.LabelTitle, step, index) || {}),
4352
...(index === currentStepIndex &&
4453
(getStyles(styles, Elements.ActiveLabelTitle, step, index) ||
45-
{}))
54+
{})),
4655
}}
4756
>
4857
{step.stepLabel}
4958
</div>
50-
{step.stepDescription && (showDescriptionsForAllSteps || index === currentStepIndex) &&
59+
{step.stepDescription &&
60+
(showDescriptionsForAllSteps || index === currentStepIndex) &&
5161
orientation !== ORIENTATION.VERTICAL &&
5262
labelPosition === LABEL_POSITION.TOP && (
53-
<div
54-
className="description"
55-
id={`step-horizontal-top-description-${index}`}
56-
style={{
57-
...(currentStepIndex === index
58-
? getStyles(
59-
styles,
60-
Elements.ActiveLabelDescription,
61-
step,
62-
index
63-
) || {}
64-
: getStyles(styles, Elements.LabelDescription, step, index) ||
65-
{})
66-
}}
67-
>
68-
{step.stepDescription}
69-
</div>
70-
)}
63+
<div
64+
className='description'
65+
id={`step-horizontal-top-description-${index}`}
66+
style={{
67+
...(currentStepIndex === index
68+
? getStyles(
69+
styles,
70+
Elements.ActiveLabelDescription,
71+
step,
72+
index
73+
) || {}
74+
: getStyles(styles, Elements.LabelDescription, step, index) ||
75+
{}),
76+
}}
77+
>
78+
{step.stepDescription}
79+
</div>
80+
)}
7181
</div>
7282
)}
73-
<div className="stepContainer" id={`${index}-node`} ref={nodeRef}>
83+
<div className='stepContainer' id={`${index}-node`} ref={nodeRef}>
7484
<div
7585
className={prevConnectorClassName}
7686
style={{
7787
...(steps[index - 1]?.completed
7888
? getStyles(styles, Elements.LineSeparator, step, index) || {}
7989
: getStyles(styles, Elements.InactiveLineSeparator, step, index) ||
80-
{})
90+
{}),
8191
}}
8292
/>
8393
<div
8494
className={`node ${
8595
[LABEL_POSITION.TOP, LABEL_POSITION.LEFT].includes(labelPosition)
86-
? "reversedNode"
87-
: ""
96+
? 'reversedNode'
97+
: ''
8898
}`}
8999
>
90100
<Node
@@ -103,18 +113,18 @@ const StepInfo: (props: IStepInfoProps) => JSX.Element = ({
103113
<div
104114
className={`labelContainer ${
105115
[LABEL_POSITION.TOP, LABEL_POSITION.LEFT].includes(labelPosition)
106-
? "reversedLabelContainer"
107-
: ""
116+
? 'reversedLabelContainer'
117+
: ''
108118
}`}
109119
>
110120
<div
111-
className={`label ${isVertical && "verticalStepperInlineLabel"}`}
121+
className={`label ${isVertical && 'verticalStepperInlineLabel'}`}
112122
id={`step-inline-label-${index}`}
113123
style={{
114124
...(getStyles(styles, Elements.LabelTitle, step, index) || {}),
115125
...(index === currentStepIndex &&
116126
(getStyles(styles, Elements.ActiveLabelTitle, step, index) ||
117-
{}))
127+
{})),
118128
}}
119129
onClick={(): void => onStepClick && onStepClick(step, index)}
120130
>
@@ -128,7 +138,7 @@ const StepInfo: (props: IStepInfoProps) => JSX.Element = ({
128138
...(step.completed
129139
? getStyles(styles, Elements.LineSeparator, step, index) || {}
130140
: getStyles(styles, Elements.InactiveLineSeparator, step, index) ||
131-
{})
141+
{}),
132142
}}
133143
/>
134144
</div>

‎src/stepper/stepperComponent.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
import React from "react";
1+
import React, { FC } from "react";
22
import "./styles.scss";
33
import type { IStepperProps } from "./types";
44
import { ORIENTATION } from "../constants";
55
import Step from "./step";
66

7+
/**
8+
* To display each steps after analysing the orientation
9+
* @param { IStepperProps} props
10+
* @returns {FC}
11+
*/
712
const Stepper = (props: IStepperProps): JSX.Element => {
813
const {
914
steps,

0 commit comments

Comments
 (0)