TypeScript Refactor

.babelrc

@@ -1,16 +1,8 @@
 {
-    "presets": [
-        "@babel/env",
-        "@babel/react"
-    ],
+    "presets": ["@babel/env", "@babel/react"],
     "env": {
         "production": {
-            "plugins": [
-                ["transform-react-remove-prop-types", {
-                    "mode": "remove",
-                    "removeImport": true
-                }]
-            ]
+            "plugins": []
         }
     },
     "plugins": ["@babel/plugin-proposal-class-properties"]

.eslintrc

@@ -1,22 +1,24 @@
 {
     "env": {
+        "node": true,
         "browser": true,
         "jest": true
     },
     "extends": [
-        "airbnb-base",
-        "plugin:react/recommended"
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
     ],
     "settings": {
         "react": {
-          "version": "16.0"
+            "version": "16.0"
         }
     },
-    "parser": "babel-eslint",
-    "plugins": ["babel"],
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint"],
     "rules": {
         "arrow-parens": 0,
-        "indent": [ "error", 4 ],
+        "indent": ["error", 4],
         "no-console": ["error", { "allow": ["error"] }],
         "no-continue": 0,
         "operator-linebreak": 0,

.github/workflows/npm-publish.yml

@@ -21,6 +21,8 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
+        with:
+          version: latest
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/pull-request.yml

@@ -2,6 +2,7 @@ name: Pull Request
 
 on:
   pull_request:
+    types: [opened, synchronize, reopened]
     branches:
       - '**' # This triggers the workflow on pull requests to any branch
 
@@ -17,6 +18,11 @@ jobs:
         with:
           node-version: 20.13.1
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 

.gitignore

@@ -8,3 +8,4 @@ dist
 !app/dist/
 react-step-wizard-*.tgz
 coverage/
+app/next

.npmignore

@@ -8,19 +8,23 @@ _config.yml
 .eslintrc
 .gitignore
 .nvmrc
+.prettierrc
 .vscode/
 app/
+docs/
 CHANGELOG.md
 coverage/
 example.gif
 example/
 .github/
 index.html
 jest.config.json
+jest.config.js
 react-step-wizard-*.tgz
 rollup.config.js
 scripts/
 src/
+tsconfig.json
 webpack.config.js
 yarn.lock
 yarn*.log

.nvmrc

@@ -1 +1 @@
-16.5.0
+20.13.1

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
+}

CHANGELOG.md

@@ -1,6 +1,14 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+### [5.4.0-beta.2]
+• Generate `main: cjs`, `browser: umd`, and `module: esm` bundles for better import compatibility - like with Next.js
+• Generate accurate types thanks to TypeScript
+
+> Dev Changes
+• Refactor codebase in Typescript
+• Update packages to address security vulnerabilities
+
 ### [5.3.11]
 • Add missing transition type - intro - Thanks [bundit](https://github.com/bundit)
 

CONTRIBUTING.md

@@ -3,10 +3,11 @@
 Steps to develop locally:
 
 • `nvm use`
-• `npm install`
+• `pnpm install`
 • `npm start`
 
 ### Testing
+
 Once your changes look good, test it intensely!
 
 • `npm test` - runs existing unit tests. If your changes require a new unit test, please add it to `src/index.test.js`
@@ -20,6 +21,7 @@ Create a production build of the example app and test in Chrome, Safari, Firefox
 Open `app/index.html` in all the browsers listed above and ensure there are no console errors. Also, make sure hashKeys still work as expected.
 
 ### Create Pull Request
+
 If you feel confidence in your changes, open a PR for me to review. I'll most likely have you merge into a dev branch before going straight to master. From there I will handle the versioning and publish your changes! I'm working on automating publishing straight to NPM when a new release is created.
 
 To up the version use `npm version` for semantic versioning.

app/App.js

@@ -1,17 +1,15 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { hot } from 'react-hot-loader';
+import { createRoot } from 'react-dom/client';
 
 import Wizard from './components/wizard';
 
-import 'bootstrap/dist/css/bootstrap.min.css';
 import './less/app.less';
 
 const App = () => (
     <Wizard />
 );
 
-/** HMR */
-hot(module)(App);
+const domNode = document.getElementById('app');
+const root = createRoot(domNode);
 
-ReactDOM.render(<App />, document.getElementById('app'));
+root.render(<App />);

app/components/nav.less → app/components/nav.css

@@ -1,6 +1,7 @@
-.nav {
+.wizard-nav {
     margin-bottom: 15px;
     text-align: center;
+    justify-content: center;
 }
 
 .dot {

app/components/nav.js

@@ -1,6 +1,5 @@
 import React from 'react';
-/* eslint react/prop-types: 0 */
-import styles from './nav.less';
+import styles from './nav.css';
 
 const Nav = (props) => {
     const dots = [];
@@ -16,7 +15,7 @@ const Nav = (props) => {
     }
 
     return (
-        <div className={styles.nav}>{dots}</div>
+        <div className={styles['wizard-nav']}>{dots}</div>
     );
 };
 

app/components/wizard.less → app/components/wizard.css

@@ -3,8 +3,10 @@
 }
 
 /** Progress Bar */
-@progress-height: 5px;
-@duration: 3s;
+:root {
+    --progress-height: 5px;
+    --duration: 3s;
+}
 
 @keyframes stripes {
     from { background-position: 1rem 0 }
@@ -30,17 +32,17 @@
 }
 
 .progress {
-    height: @progress-height;
+    height: var(progress-height);
     overflow: hidden;
 }
 
 .progress-bar {
-    height: @progress-height;
+    height: var(--progress-height);
     width: 100%;
-
-    .loaded & {
-        animation: grow @duration ease,
-            stripes 1s linear infinite,
-            rainbow @duration ease infinite;
-    }
 }
+
+.loaded .progress-bar {
+    animation: grow var(--duration) ease,
+        stripes 1s linear infinite,
+        rainbow var(--duration) ease infinite;
+}

app/components/wizard.js

@@ -1,12 +1,12 @@
 import React, { Fragment, useState, useEffect } from 'react';
-import StepWizard from '../../dist/react-step-wizard.min';
+import StepWizard from '../../';
 
 import Nav from './nav';
 import Plugs from './Plugs';
 
-import styles from './wizard.less';
-import transitions from './transitions.less';
-/* eslint react/prop-types: 0 */
+import styles from './wizard.css';
+import transitions from './transitions.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 /**
  * A basic demonstration of how to use the step wizard
@@ -64,11 +64,12 @@ const Wizard = () => {
                             <Progress stepName='progress' />
                             {null /* will be ignored */}
                             <Last hashKey={'TheEnd!'} />
+                            <Last />
                         </StepWizard>
                     </div>
                 </div>
             </div>
-            { (demo && SW) && <InstanceDemo SW={SW} /> }
+            {(demo && SW) && <InstanceDemo SW={SW} />}
         </div>
     );
 };
@@ -103,10 +104,10 @@ const Stats = ({
 }) => (
     <div>
         <hr />
-        { step > 1 &&
+        {step > 1 &&
             <button className='btn btn-default btn-block' onClick={previousStep}>Go Back</button>
         }
-        { step < totalSteps ?
+        {step < totalSteps ?
             <button className='btn btn-primary btn-block' onClick={nextStep}>Continue</button>
             :
             <button className='btn btn-success btn-block' onClick={nextStep}>Finish</button>
@@ -151,7 +152,7 @@ const Second = props => {
 
     return (
         <div>
-            { props.form.firstname && <h3>Hey {props.form.firstname}! 👋</h3> }
+            {props.form.firstname && <h3>Hey {props.form.firstname}! 👋</h3>}
             I've added validation to the previous button.
             <Stats step={2} {...props} previousStep={validate} />
         </div>

app/webpack.config.js

@@ -33,18 +33,11 @@ if (isDev) {
 
     config.output.publicPath = publicPath;
     config.devServer = {
-        compress: true,
-        host: '0',
-        index: server.index,
-        openPage: server.root,
-        overlay: {
-            warnings: false,
-            errors: true,
-        },
         port: server.port,
-        public: host,
-        publicPath,
-        stats: config.stats,
+        static: {
+            directory: path.join(__dirname),
+            serveIndex: true,
+        },
     };
     config.optimization = {
         minimize: false,