First viable version v1.0.0

Author: sametweb

README.md

@@ -21,7 +21,7 @@ Using [npm](https://www.npmjs.com/):
 ## Usage
 
 ```js
-<Steps totalSteps={3}>
+<Steps total={3}>
   <Step order={1} component={Step1} />
   <Step order={2} component={Step2} />
   <Step order={3} component={Step3} />
@@ -33,11 +33,11 @@ Using [npm](https://www.npmjs.com/):
 
 ### `<Steps />`
 
-This is the wrapper component. You must define every step component under `<Steps />` component. It takes `totalSteps` as a prop which must match the number of `Step` components inside.
+This is the wrapper component. You must define every step component under `<Steps />` component. It takes `total` as a prop which must match the number of `Step` components inside.
 
-| Properties                 |                                             |
-| -------------------------- | ------------------------------------------- |
-| **`totalSteps`** _integer_ | Define how many steps you will be creating. |
+| Properties            |                                             |
+| --------------------- | ------------------------------------------- |
+| **`total`** _integer_ | Define how many steps you will be creating. |
 
 <br />
 <br />
@@ -133,8 +133,8 @@ Example usages:
 | Properties           | ---                                                                                                   |
 | -------------------- | ----------------------------------------------------------------------------------------------------- |
 | **`text`** _String_  | the text that will button render                                                                      |
-| **`prev`** _Boolean_ | gives the button 'Go to Previous Step' functionality. It doesn't show in the first step component.    |
-| **`next`** _Boolean_ | gives the button 'Go to Next Step' functionality. It doesn't show in the last step component.         |
+| **`prev`** _Boolean_ | gives the button 'Go to Previous Step' functionality. Disabled in the first step.                     |
+| **`next`** _Boolean_ | gives the button 'Go to Next Step' functionality. Disabled in the last step.                          |
 | _any props_          | all the other props passed to the **Button** component will be passed any props to the button element |
 
 <br />
@@ -152,8 +152,8 @@ Example usages:
 <Navigation before="HEY " after=" HI" /> // if you have 3 steps, it renders 3 buttons, each step number has 'HEY' before and 'HI' after (HEY 1 HI, HEY 2 HI, HEY 3 HI)
 ```
 
-| Properties            | ---                                                     |
-| --------------------- | ------------------------------------------------------- |
-| **`text`** _String_   | the text that each button will show                     |
-| **`before`** _String_ | the text that goes before the step number in the button |
-| **`after`** _String_  | the text that goes after the step number in the button  |
+| Properties            | ---                                                                       |
+| --------------------- | ------------------------------------------------------------------------- |
+| **`text`** _String_   | the text that each button will show, disables `before` and `after` props. |
+| **`before`** _String_ | the text that goes before the step number in the button.                  |
+| **`after`** _String_  | the text that goes after the step number in the button.                   |

package.json

@@ -2,7 +2,7 @@
   "name": "react-step-builder",
   "description": "Unopinionated multi step interface builder.",
   "author": "Samet Mutevelli <mutevellisamet@gmail.com> (https://sametmutevelli.com)",
-  "version": "1.0.33",
+  "version": "1.1.0",
   "private": false,
   "dependencies": {
     "react": "^16.12.0",

src/index.js

@@ -1,12 +1,12 @@
-import React, { useEffect } from "react";
+import React from "react";
 import ReactDOM from "react-dom";
 import { Steps, Step, Button, Navigation } from "./lib";
 
 import "./style.css";
 
 const Step1 = props => {
   return (
-    <div>
+    <div className="step">
       First Name:{" "}
       <input
         name="firstname"
@@ -25,7 +25,7 @@ const Step1 = props => {
 
 const Step2 = props => {
   return (
-    <div>
+    <div className="step">
       Email:{" "}
       <input
         name="email"
@@ -44,7 +44,7 @@ const Step2 = props => {
 
 const Step3 = props => {
   return (
-    <div>
+    <div className="step">
       Address:{" "}
       <input
         name="address"
@@ -63,33 +63,48 @@ const Step3 = props => {
 
 const Step4 = props => {
   return (
-    <div>
+    <div className="step">
+      <p>
+        <strong>Name:</strong> {props.mainState.firstname}{" "}
+        {props.mainState.lastname}
+      </p>
+      <p>
+        <strong>Email:</strong> {props.mainState.email}
+      </p>
+      <p>
+        <strong>Password:</strong> {props.mainState.password}
+      </p>
+      <p>
+        <strong>Address:</strong> {props.mainState.address}
+      </p>
       <p>
-        Name: {props.mainState.firstname} {props.mainState.lastname}
+        <strong>Phone:</strong> {props.mainState.phone}
       </p>
-      <p>Email: {props.mainState.email}</p>
-      <p>Password: {props.mainState.password}</p>
-      <p>Address: {props.mainState.address}</p>
-      <p>Phone: {props.mainState.phone}</p>
     </div>
   );
 };
 
 const Persistent = () => {
   return (
     <div>
-      <Button prev text="Prev" />
-      <Button next text="Next" />
-      <Navigation before="This is " after=". step" />
+      <div className="navigation">
+        <Button prev text="Prev" />
+        <Navigation
+          text="&#x25C9;"
+          active="active-button"
+          visited="visited-button"
+        />
+        <Button next text="Next" />
+      </div>
     </div>
   );
 };
 
 const App = () => {
   return (
     <div className="steps_wrapper">
-      <Steps totalSteps={4} lockMode>
-        <h1>React Step Builder</h1>
+      <Steps total={4}>
+        <h1>React Step Builder v1.1.0</h1>
         <Step order={1} component={Step1} />
         <Step order={2} component={Step2} />
         <Step order={3} component={Step3} />

src/lib/Navigators.js src/lib/Components.jssrc/lib/Navigators.js renamed to src/lib/Components.js

@@ -4,33 +4,33 @@ import { StepContext } from "./Steps";
 export const Button = ({ next, prev, text, ...theRest }) => {
   const context = useContext(StepContext);
   const { prevStep, nextStep, steps } = context;
-
-  return (prev && steps.current === 1) ||
-    (next && steps.current === steps.total) ? null : (
+  const { current, total } = steps;
+  return (
     <button
       onClick={next ? nextStep : prev ? prevStep : null}
-      disabled={next && steps.current + 1 === steps.lock}
+      disabled={(prev && current === 1) || (next && current === total)}
       {...theRest}
     >
       {text}
     </button>
   );
 };
 
-export const Navigation = ({ text, before, after }) => {
+export const Navigation = ({ text, before, after, active, visited }) => {
   const context = useContext(StepContext);
   const { jumpToStep, steps } = context;
   const stepsArray = [...Array(steps.total).keys()].map(x => x + 1);
 
-  return stepsArray.map(step => {
-    return (
-      <button
-        key={step}
-        onClick={() => jumpToStep(step)}
-        disabled={step >= steps.lock} //steps.current === step ||
-      >
-        {text || `${before || ""}${step}${after || ""}`}
-      </button>
-    );
-  });
+  return stepsArray.map(step => (
+    <button
+      key={step}
+      onClick={() => jumpToStep(step)}
+      disabled={steps.current === step}
+      className={
+        step === steps.current ? active : step < steps.current ? visited : null
+      }
+    >
+      {text || `${before || ""}${step}${after || ""}`}
+    </button>
+  ));
 };

src/lib/Step.js

@@ -4,61 +4,39 @@ export const StepContext = React.createContext();
 
 const useMainState = INITIAL_VALUE => {
   const [state, setState] = React.useState(INITIAL_VALUE);
-
   const setMainState = newState => setState({ ...state, ...newState });
-
-  const handleChange = event =>
+  const handleChange = event => {
     setState({ ...state, [event.target.name]: event.target.value });
-
+  };
   return [state, setMainState, handleChange];
 };
 
-export const useStepNavigation = (totalSteps, lockMode) => {
-  const [currentStep, setCurrentStep] = React.useState(1);
-
-  const prevStep = () => setCurrentStep(currentStep > 2 ? currentStep - 1 : 1);
-  const nextStep = () =>
-    setCurrentStep(currentStep < totalSteps ? currentStep + 1 : totalSteps);
-  const jumpToStep = step => setCurrentStep(Number(step));
-
-  return [
-    { current: currentStep, total: totalSteps, lock: currentStep + 1 },
-    prevStep,
-    nextStep,
-    jumpToStep
-  ];
+export const useStepNavigation = total => {
+  const [current, setCurrent] = React.useState(1);
+  const prevStep = () => setCurrent(current > 2 ? current - 1 : 1);
+  const nextStep = () => setCurrent(current < total ? current + 1 : total);
+  const jumpToStep = step => setCurrent(Number(step));
+  return [{ current, total }, prevStep, nextStep, jumpToStep];
 };
 
-const Steps = ({ totalSteps, lockMode, children }) => {
+export const Step = ({ component: Component, order, persist }) => {
+  const context = React.useContext(StepContext);
+  const { current } = context.steps;
+  return order === current || persist ? <Component {...context} /> : false;
+};
+const Steps = ({ total, children }) => {
   const [mainState, setMainState, handleChange] = useMainState({});
-  const [steps, prevStep, nextStep, jumpToStep] = useStepNavigation(
-    totalSteps,
-    lockMode
-  );
-  console.log({
+  const [steps, prevStep, nextStep, jumpToStep] = useStepNavigation(total);
+  const value = {
     mainState,
     setMainState,
     handleChange,
-    steps: { total: steps.total, current: steps.current, lock: steps.lock },
+    steps,
     prevStep,
     nextStep,
     jumpToStep
-  });
-  return (
-    <StepContext.Provider
-      value={{
-        mainState,
-        setMainState,
-        handleChange,
-        steps: { total: steps.total, current: steps.current, lock: steps.lock },
-        prevStep,
-        nextStep,
-        jumpToStep
-      }}
-    >
-      {children}
-    </StepContext.Provider>
-  );
+  };
+  return <StepContext.Provider value={value}>{children}</StepContext.Provider>;
 };
 
 export default Steps;

src/lib/Steps.js

@@ -1,4 +1,3 @@
-import Steps from "./Steps";
-import Step from "./Step";
-import { Button, Navigation } from "./Navigators";
+import Steps, { Step } from "./Steps";
+import { Button, Navigation } from "./Components";
 export { Steps, Step, Button, Navigation };