Minimum viable product (#3)

* Created basic wizard with static navigator. Updated react dependency from 16.2 to 16.3 in order to support getDerivedStateFromProps.

* Updated tsconfig to generate declaration files automatically

* Set rollup as module bundler instead of using tsc.

* Added example project.

* Added and configured github pages to deploy example project.

* Updated license information

* Moved default wizard navigator to a separate component.

* Created wizard context and exposed consumers using render prop and higher order component APIs

* Created Wizard Navigator and Steps compound components. Provided render props API to Navigator component in order to increase flexibility.

* Moved children prop validation from render method to propTypes.

* Updated how to get the total steps number considering the implementation of Steps compound component.

* Moved totalStep calculation from getDerivedStateFromProps to constructor in order to improve performance. Refactored wizard state shape to provide boolean flags that reflects steps availability when navigating

* Added onStepChange event handler.

* Added step tracker

* Refactored project structure

* Removed Wizard's class constructor.

* Added eslint

* Refactored to comply with the ESLint rules

* Added precommit validation using git hooks

* Moved scripts.precommit to husky.hooks.pre-commit

* Updated README

.eslintignore

@@ -0,0 +1,5 @@
+build
+coverage
+lib
+node_modules
+package-lock.json

.eslintrc.json

@@ -0,0 +1,79 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "env": {
+    "browser": true,
+    "jest": true,
+    "node": true
+  },
+  "extends": ["airbnb", "prettier", "prettier/react"],
+  "plugins": ["@typescript-eslint", "prettier"],
+  "rules": {
+    "@typescript-eslint/explicit-member-accessibility": 0,
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/no-unused-vars": ["error", { "args": "none" }],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true
+      }
+    ],
+    "lines-between-class-members": [
+      "error",
+      "always",
+      { "exceptAfterSingleLine": true }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "singleQuote": true,
+        "trailingComma": "es5"
+      }
+    ],
+    "react/jsx-filename-extension": [
+      "warn",
+      {
+        "extensions": [".js", ".jsx", ".ts", "tsx"]
+      }
+    ],
+    "react/jsx-fragments": ["error", "element"],
+    "react/jsx-props-no-spreading": [
+      "error",
+      {
+        "custom": "ignore"
+      }
+    ],
+    "react/sort-comp": [
+      "warn",
+      {
+        "order": [
+          "static-variables",
+          "static-methods",
+          "lifecycle",
+          "everything-else",
+          "state",
+          "render"
+        ]
+      }
+    ],
+    "react/state-in-constructor": ["error", "never"],
+    "react/static-property-placement": ["warn", "static public field"]
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "modules": true,
+      "jsx": true
+    }
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["src"],
+        "extensions": [".ts", ".tsx"]
+      }
+    },
+    "react": {
+      "pragma": "React",
+      "version": "detect"
+    }
+  }
+}

.gitignore

@@ -1,17 +1,18 @@
 # dependencies
-/node_modules
-/.pnp
+node_modules
+.pnp
 .pnp.js
 
 # testing
-/coverage
+coverage
 
 # production
-/lib
+build
+lib
 
 # lock-files
-package-lock.json
-yarn.lock
+/package-lock.json
+/yarn.lock
 
 # misc
 .DS_Store

.huskyrc.json

@@ -0,0 +1,5 @@
+{
+  "hooks": {
+    "pre-commit": "lint-staged"
+  }
+}

.lintstagedrc.json

@@ -0,0 +1,7 @@
+{
+  "*.+(ts|tsx)": ["eslint"],
+  "*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)": [
+    "prettier --write",
+    "git add"
+  ]
+}

.npmignore

@@ -4,3 +4,4 @@
 .git
 .npmrc
 .prettier*
+example

.prettierignore

@@ -1,4 +1,5 @@
-node_modules
+build
 coverage
 lib
+node_modules
 package-lock.json

README.md

@@ -10,12 +10,16 @@
 [![Install Size][size-badge]][package-size]
 [![Downloads][downloads-badge]][npmcharts]
 [![PRs Welcome][prs-badge]][prs]
-[![ISC License][license-badge]][license]
+[![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?
@@ -24,9 +28,6 @@
 npm install -S react-simple-step-wizard
 ```
 
-<!-- 
-This would be the desired API at least for v1, then it will support hooks and can change
-
 ### How to use it in your app?
 
 ```javascript
@@ -38,47 +39,64 @@ 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 MyStepTracker = ({ currentStep, steps }) => <div>To be implemented</div>;
-const MyNavigator = ({ goToPreviousStep, goToNextStep }) => (
-  <div>To be implemented</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>
+        <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>
-            {({ currentStep, steps }) => (
-              <MyStepTracker currentStep={currentStep} steps={steps} />
-            )}
+            {stepTrackerProps => <MyStepStracker {...stepTrackerProps} />}
           </Wizard.StepTracker>
-
-          <Wizard.Steps onStepChange={() => {}} isLoading={false}>
-            <Step1 />
-            <Step2 />
-            <Wizard.StepGroup>
-              <Step3 />
-              <Step4 />
-            </Wizard.StepGroup>
-            <Step5 />
-          </Wizard.Steps>
-
           <Wizard.Navigator>
-            {({ goToPreviousStep, goToNextStep }) => (
-              <MyNavigator
-                goToPreviousStep={goToPreviousStep}
-                goToNextStep={goToNextStep}
-              />
-            )}
+            {navigatorProps => <MyNavigator {...navigatorProps} />}
           </Wizard.Navigator>
         </Wizard>
       </div>
     );
   }
 }
-``` -->
+
+export default App;
+```
 
 ## Roadmap
 
@@ -92,7 +110,7 @@ Rewrite lib core and expose some of the APIs using react hooks.
 
 ## License
 
-ISC Licensed.
+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