react-simple-step-wizard - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

lib/index.js

@@ -1,7 +0,207 @@
-"use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 }
-Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./Wizard"));
-//# sourceMappingURL=index.js.map
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function DefaultNavigator(_a) {
+    var isNextAvailable = _a.isNextAvailable, isPrevAvailable = _a.isPrevAvailable, nextStep = _a.nextStep, prevStep = _a.prevStep;
+    return (React.createElement("div", null,
+        React.createElement("button", { type: "button", onClick: prevStep, disabled: !isPrevAvailable }, "Previous"),
+        React.createElement("button", { type: "button", onClick: nextStep, disabled: !isNextAvailable }, "Next")));
+}
+
+var WizardContext = React.createContext({});
+function WizardConsumer(_a) {
+    var children = _a.children;
+    return (React.createElement(WizardContext.Consumer, null, function (context) {
+        if (Object.entries(context).length === 0 &&
+            context.constructor === Object) {
+            throw new Error('Components using WizardContext must be rendered within the Wizard component');
+        }
+        return children(context);
+    }));
+}
+
+function Navigator(_a) {
+    var children = _a.children;
+    return (React.createElement(WizardConsumer, null, function (context) { return (children ? children(context) : DefaultNavigator(context)); }));
+}
+
+function DefaultStepTracker(_a) {
+    var _b = _a.currentStep, currentStep = _b === void 0 ? 0 : _b, _c = _a.steps, steps = _c === void 0 ? [] : _c;
+    return (React.createElement("div", { style: { display: 'block', padding: '25px' } },
+        React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+            } }, steps.map(function (step, index) {
+            var key = index + "-" + step;
+            return (React.createElement("div", { key: key, style: { display: 'block', textAlign: 'center' } },
+                React.createElement("span", { style: {
+                        display: 'inline-block',
+                        borderRadius: '50%',
+                        lineHeight: '2rem',
+                        height: '30px',
+                        width: '30px',
+                        border: '0.1rem solid #ff161b',
+                        background: currentStep >= index
+                            ? 'linear-gradient(#ff161b,#ff009a)'
+                            : 'white',
+                        color: 'white',
+                    } }, currentStep > index ? '✓' : null),
+                React.createElement("div", null,
+                    React.createElement("span", null, step ? index + 1 + ". " + step : ''))));
+        }))));
+}
+
+function StepTracker(_a) {
+    var children = _a.children;
+    return (React.createElement(WizardConsumer, null, function (context) { return (children ? children(context) : DefaultStepTracker(context)); }));
+}
+
+function Steps(_a) {
+    var children = _a.children;
+    return (React.createElement(WizardContext.Consumer, null, function (context) {
+        return context.totalSteps > 0
+            ? React.Children.map(children, function (child, index) {
+                return context.currentStep === index
+                    ? React.cloneElement(child, {})
+                    : null;
+            })
+            : null;
+    }));
+}
+
+var WizardPropTypes = {
+    children: function (props, propName, componentName) {
+        var error = null;
+        React.Children.forEach(props[propName], function (child) {
+            if (![Navigator, StepTracker, Steps].some(function (component) { return component === child.type; })) {
+                error = new Error(componentName + " children should only include components of types Wizard.Navigator or Wizard.Steps");
+            }
+        });
+        return error;
+    },
+};
+var getInitialState = function (props, handlers) {
+    var totalSteps = 0;
+    var steps = [];
+    React.Children.forEach(props.children, function (child) {
+        if (child.type === Steps && child.props.children) {
+            totalSteps = child.props.children.length;
+            React.Children.forEach(child.props.children, function (step) {
+                steps = steps.concat(step.props.stepLabel);
+            });
+        }
+    });
+    var currentStep = 0;
+    var isNextAvailable = currentStep < totalSteps - 1;
+    var isPrevAvailable = currentStep > 0;
+    var state = {
+        steps: steps,
+        currentStep: currentStep,
+        totalSteps: totalSteps,
+        isNextAvailable: isNextAvailable,
+        isPrevAvailable: isPrevAvailable,
+    };
+    return __assign(__assign({}, state), handlers);
+};
+var Wizard = (function (_super) {
+    __extends(Wizard, _super);
+    function Wizard() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handleStepChange = function (currentStep, totalSteps) {
+            _this.setState({
+                isNextAvailable: currentStep < totalSteps - 1,
+                isPrevAvailable: currentStep > 0,
+            }, function () {
+                var onStepChange = _this.props.onStepChange;
+                if (onStepChange)
+                    onStepChange(currentStep);
+            });
+        };
+        _this.nextStep = function () {
+            var isNextAvailable = _this.state.isNextAvailable;
+            if (isNextAvailable)
+                _this.setState(function (prevState) { return ({
+                    currentStep: prevState.currentStep + 1,
+                }); });
+        };
+        _this.prevStep = function () {
+            var isPrevAvailable = _this.state.isPrevAvailable;
+            if (isPrevAvailable)
+                _this.setState(function (prevState) { return ({
+                    currentStep: prevState.currentStep - 1,
+                }); });
+        };
+        _this.state = getInitialState(_this.props, {
+            nextStep: _this.nextStep,
+            prevStep: _this.prevStep,
+        });
+        return _this;
+    }
+    Wizard.prototype.componentDidUpdate = function (_, prevState) {
+        var _a = this.state, currentStep = _a.currentStep, totalSteps = _a.totalSteps;
+        if (prevState.currentStep !== currentStep)
+            this.handleStepChange(currentStep, totalSteps);
+    };
+    Wizard.prototype.render = function () {
+        var children = this.props.children;
+        return (React.createElement("div", null,
+            React.createElement(WizardContext.Provider, { value: this.state }, children)));
+    };
+    Wizard.Navigator = Navigator;
+    Wizard.StepTracker = StepTracker;
+    Wizard.Steps = Steps;
+    Wizard.propTypes = {
+        children: WizardPropTypes.children,
+    };
+    Wizard.defaultProps = {
+        children: [],
+    };
+    return Wizard;
+}(React.PureComponent));
+
+exports.default = Wizard;
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-simple-step-wizard",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React simple step wizard",
   "keywords": [
+    "multistep",
     "react",
-    "wizard",
-    "step wizard"
+    "step",
+    "wizard"
   ],
   "main": "lib/index.js",
+  "module": "lib/index.es.js",
+  "jsnext:main": "lib/index.es.js",
   "scripts": {
-    "build": "rm -rf ./lib && tsc",
+    "build": "rollup -c",
+    "deploy": "gh-pages -d example/build",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "lint-staged": "lint-staged",
+    "predeploy": "cd example && npm install && npm run build",
     "prepare": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "prettier": "prettier \"src/**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|mdx)\"",
+    "start": "rollup -c -w",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "validate": "npm run lint && npm run prettier -- --list-different"
   },
@@ -21,3 +31,3 @@ "repository": {
   "author": "Jonathan Palma <[e-mail]> (http://jonathanpalma.me)",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
@@ -28,13 +38,36 @@ "url": "https://github.com/jonathanpalma/react-simple-step-wizard/issues"
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
   "devDependencies": {
+    "@svgr/rollup": "^4.3.3",
     "@types/react": "^16.9.3",
     "@types/react-dom": "^16.9.1",
+    "@typescript-eslint/eslint-plugin": "^2.3.0",
+    "@typescript-eslint/parser": "^2.3.0",
+    "eslint": "^6.5.1",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-plugin-import": "^2.17.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^2.1.2",
+    "gh-pages": "^2.1.1",
+    "husky": "^3.0.8",
+    "lint-staged": "^9.4.1",
     "prettier": "^1.18.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "typescript": "^3.6.3"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
+    "rollup": "^1.22.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-typescript2": "^0.24.3",
+    "rollup-plugin-url": "^2.2.2",
+    "typescript": "^3.6.3",
+    "utility-types": "^3.8.0"
   }
 }

README.md

@@ -1,1 +0,130 @@
-# react-simple-step-wizard
+<div align="center">
+  <h1>react-simple-step-wizard 🧙</h1>
+
+  <p>A simple and composable step wizard in React!</p>
+</div>
+
+<hr />
+
+[![Version][version-badge]][package]
+[![Install Size][size-badge]][package-size]
+[![Downloads][downloads-badge]][npmcharts]
+[![PRs Welcome][prs-badge]][prs]
+[![MIT License][license-badge]][license]
+
+[![Watch on GitHub][github-watch-badge]][github-watch]
+[![Star on GitHub][github-star-badge]][github-star]
+[![Tweet][twitter-badge]][twitter]
+
+## Demo
+
+[Click here](https://jonathanpalma.github.io/react-simple-step-wizard/) to see a live demo!
+
+## Getting Started
+
+### How to install it in your app?
+
+```
+npm install -S react-simple-step-wizard
+```
+
+### How to use it in your app?
+
+```javascript
+import React, { Component } from 'react';
+import Wizard from 'react-simple-step-wizard';
+
+const Step1 = () => <div>This is Step 1</div>;
+const Step2 = () => <div>This is Step 2</div>;
+const Step3 = () => <div>This is Step 3</div>;
+const Step4 = () => <div>This is Step 4</div>;
+const Step5 = () => <div>This is Step 5</div>;
+const MyStepStracker = ({ currentStep = 0, steps = [] }) => (
+  <div>
+    <p>Current step is: {steps[currentStep]}</p>
+  </div>
+);
+const MyNavigator = ({
+  isNextAvailable,
+  isPrevAvailable,
+  nextStep,
+  prevStep,
+}) => (
+  <div>
+    {isPrevAvailable && (
+      <button type="button" onClick={prevStep}>
+        &lt; Back
+      </button>
+    )}
+    {isNextAvailable && (
+      <button type="button" onClick={nextStep}>
+        Next &gt;
+      </button>
+    )}
+  </div>
+);
+
+class App extends Component {
+  handleStepChange = currentStep => {
+    console.log(currentStep);
+  };
+
+  render() {
+    return (
+      <div>
+        <h1>react-simple-step-wizard demo</h1>
+        <Wizard onStepChange={this.handleStepChange}>
+          <Wizard.StepTracker />
+          <Wizard.Steps>
+            <Step1 stepLabel="Search" />
+            <Step2 stepLabel="Select" />
+            <Step3 stepLabel="Customize" />
+            <Step4 stepLabel="Review" />
+            <Step5 stepLabel="Submit" />
+          </Wizard.Steps>
+          {/* You can implement your custom components via render-props */}
+          <Wizard.StepTracker>
+            {stepTrackerProps => <MyStepStracker {...stepTrackerProps} />}
+          </Wizard.StepTracker>
+          <Wizard.Navigator>
+            {navigatorProps => <MyNavigator {...navigatorProps} />}
+          </Wizard.Navigator>
+        </Wizard>
+      </div>
+    );
+  }
+}
+
+export default App;
+```
+
+## Roadmap
+
+### V1
+
+Provide an accessible and composable API to be used with older react versions that don't support hooks.
+
+### V2
+
+Rewrite lib core and expose some of the APIs using react hooks.
+
+## License
+
+MIT © [jonathanpalma](https://github.com/jonathanpalma)
+
+[downloads-badge]: https://img.shields.io/npm/dm/react-simple-step-wizard.svg?style=flat-square
+[license-badge]: https://img.shields.io/npm/l/react-simple-step-wizard.svg?style=flat-square
+[license]: https://github.com/jonathanpalma/react-simple-step-wizard/blob/master/LICENSE
+[npmcharts]: http://npmcharts.com/compare/react-simple-step-wizard
+[package-size]: https://packagephobia.now.sh/result?p=react-simple-step-wizard
+[package]: https://www.npmjs.com/package/react-simple-step-wizard
+[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
+[prs]: http://makeapullrequest.com
+[size-badge]: https://flat.badgen.net/packagephobia/install/react-simple-step-wizard
+[version-badge]: https://img.shields.io/npm/v/react-simple-step-wizard.svg?style=flat-square
+[github-watch-badge]: https://img.shields.io/github/watchers/jonathanpalma/react-simple-step-wizard.svg?style=social
+[github-watch]: https://github.com/jonathanpalma/react-simple-step-wizard/watchers
+[github-star-badge]: https://img.shields.io/github/stars/jonathanpalma/react-simple-step-wizard.svg?style=social
+[github-star]: https://github.com/jonathanpalma/react-simple-step-wizard/stargazers
+[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-simple-step-wizard!%20https://github.com/jonathanpalma/react-simple-step-wizard
+[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/jonathanpalma/react-simple-step-wizard.svg?style=social

tsconfig.json

 {
   "compilerOptions": {
-    "outDir": "./lib",
-    "target": "es6",
-    "module": "commonjs",
+    "allowJs": false,
+    "declaration": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "lib": ["es6", "dom", "es2016", "es2017"],
+    "module": "esnext",
+    "moduleResolution": "node",
     "noImplicitAny": true,
-    "strictNullChecks": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "outDir": "lib",
     "removeComments": true,
-    "declaration": false,
     "sourceMap": true,
-    "jsx": "react",
-    "typeRoots": ["index.d.ts", "node_modules/@types"]
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "target": "es5"
   },
   "include": ["./src/**/*.tsx", "./src/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "example", "lib", "rollup.config.js"]
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

95925

increased by2509.49%

Number of package files

31

increased by181.82%

Lines of code

985

increased by2425.64%

Number of lines in readme file

131

increased by6450%

Worsened metrics

Dev dependency count

29

increased by383.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes