From b9c2672d98b4bcc66c71596f4d42f3ca57c238e9 Mon Sep 17 00:00:00 2001
From: ReshmaJoshy <81366074+ReshmaJoshy@users.noreply.github.com>
Date: Fri, 1 Dec 2023 15:36:10 +0530
Subject: [PATCH] Added  support for SSR

---
 README.md            | 28 +++++++++++++++-------------
 package-lock.json    |  6 +++---
 package.json         |  5 +++--
 src/stepper/step.tsx |  2 +-
 webpack.config.js    |  5 +++--
 5 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 7d496b9..429e16c 100644
--- a/README.md
+++ b/README.md
@@ -3,11 +3,11 @@
 <a href="https://www.npmjs.com/package/@keyvaluesystems/react-stepper"><img src="https://badgen.net/npm/v/@keyvaluesystems/react-stepper?color=blue" alt="npm version"></a> <a href="https://www.npmjs.com/package/@keyvaluesystems/react-stepper" ><img src="https://img.shields.io/npm/dw/@keyvaluesystems/react-stepper?label=Downloads" /></a> <a href="https://github.com/KeyValueSoftwareSystems/react-stepper"><img src="https://github.com/KeyValueSoftwareSystems/react-stepper/actions/workflows/update-and-publish.yml/badge.svg" alt="" /></a>
 
 <div style="display: flex; align-items: center;">
-<div style="padding-left: 30px">
-<img src="./src/assets/vertical-stepper-example.png" alt="" width="173" height="281"/>
+<div>
+<img src="./src/assets/vertical-stepper-example.png" alt="" width="155" height="252"/>
 </div>
-<div style="padding-left: 30px">
-<img src="./src/assets/horizontal-stepper-example.png" alt="" width="576" height="132"/>
+<div>
+<img src="./src/assets/horizontal-stepper-example.png" alt="" width="518" height="118"/>
 </div>
 </div>
 A fully customizable ready to use stepper UI package for React.
@@ -23,6 +23,8 @@ npm install  @keyvaluesystems/react-stepper
 
 You’ll need to install React separately since it isn't included in the package.
 
+Note for **Next.js** users, if you are using Next.js version 13 or later, you will have to use the `use client` feature to ensure proper compatibility.
+
 ## Usage
 
 React Stepper can run in a very basic mode by just providing the `steps` and `currentStepIndex` props like this:
@@ -31,18 +33,18 @@ React Stepper can run in a very basic mode by just providing the `steps` and `cu
 <Stepper
   steps={[
     {
-      label: "Step 1",
-      description: "This is Step 1",
+      stepLabel: "Step 1",
+      stepDescription: "This is Step 1",
       completed: true,
     },
     {
-      label: "Step 2",
-      description: "This is Step 2",
+      stepLabel: "Step 2",
+      stepDescription: "This is Step 2",
       completed: false,
     },
     {
-      label: "Step 3",
-      description: "This is Step 3",
+      stepLabel: "Step 3",
+      stepDescription: "This is Step 3",
       completed: false,
     },
   ]}
@@ -52,8 +54,8 @@ React Stepper can run in a very basic mode by just providing the `steps` and `cu
 
 The `steps` array is an array of objects with following keys:
 
-- `label` - A mandatory string representing the label/title of the step.
-- `description` - Optional extra information or description for the step.
+- `stepLabel` - A mandatory string representing the label/title of the step.
+- `stepDescription` - Optional extra information or description for the step.
 - `completed` -  Boolean flag for indicating step completion status.
 
 You can customize each step node  with your own DOM element using the `renderNode` prop
@@ -62,7 +64,7 @@ You can customize each step node  with your own DOM element using the `renderNod
 <Stepper
   steps={stepsArray}
   currentStepIndex={currentStepIndex}
-  renderNode={(step, stepIndex) => <div key={stepIndex}>{step.label}</div>}
+  renderNode={(step, stepIndex) => <div key={stepIndex}>{step.stepLabel}</div>}
 />
 ```
 
diff --git a/package-lock.json b/package-lock.json
index c4a0e93..35384db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27602,9 +27602,9 @@
       "dev": true
     },
     "style-loader": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
-      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz",
+      "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==",
       "dev": true
     },
     "style-to-object": {
diff --git a/package.json b/package.json
index 27c7801..5fff272 100644
--- a/package.json
+++ b/package.json
@@ -30,12 +30,13 @@
     "starter",
     "es6",
     "react",
+    "nextJS",
     "typescript",
     "webpack",
     "steps",
     "stepper",
     "vertical-stepper",
-    "horizontal stepper",
+    "horizontal-stepper",
     "steps-ui",
     "workflow-stepper",
     "progress-ui"
@@ -77,7 +78,7 @@
     "react-scripts": "5.0.1",
     "sass": "^1.58.3",
     "sass-loader": "^13.2.0",
-    "style-loader": "^3.3.1",
+    "style-loader": "^3.3.3",
     "terser-webpack-plugin": "^5.3.5",
     "ts-jest": "^29.0.5",
     "ts-loader": "^9.4.2",
diff --git a/src/stepper/step.tsx b/src/stepper/step.tsx
index 78f06e6..93228b3 100644
--- a/src/stepper/step.tsx
+++ b/src/stepper/step.tsx
@@ -42,7 +42,7 @@ const Step: (props: IStepProps) => JSX.Element = ({
       const width = node.getBoundingClientRect().width;
       setNodeWidth(width);
     }
-  }, [steps, nodeRef]);
+  }, [steps]);
 
   // prevConnector represents the connector line from the current step's node (nth node) to the preceding step's node (n-1 th node).
   const prevConnectorClassName = `stepConnector leftConnector ${
diff --git a/webpack.config.js b/webpack.config.js
index ef38379..2a15624 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -30,9 +30,10 @@ module.exports = {
   output: {
     filename: 'index.js',
     path: path.resolve(__dirname, 'build'),
-    library: "MyLibrary",
+    library: "React Stepper",
     libraryTarget: 'umd',
-    clean: true
+    clean: true,
+    globalObject: 'this'
   },
   externals: {
     react: 'react'