Import Wizard from vaccination-app

README.md

@@ -242,6 +242,62 @@ const MyObjectsTable = () => (
 );
 ```
 
+## Wizard
+
+Display a Step by Step customizable wizard
+
+```
+const getStepsBaseInfo = [
+    {
+        key: "general-info",
+        label: "General info",
+        component: GeneralInfoStep,
+        validationKeys: ["name"],
+        description: "Description for a wizard step",
+        help: "Help text",
+    },
+    {
+        key: "summary",
+        label: "Summary",
+        component: SaveStep,
+        validationKeys: [],
+        description: undefined,
+        help: undefined,
+    },
+];
+
+onStepChangeRequest = async currentStep => {
+    return getValidationMessages(
+        currentStep.validationKeys
+    );
+};
+
+const MyWizard = props => {
+    const steps = getStepsBaseInfo.map(step => ({
+        ...step,
+        props: {
+            onCancel: () => console.log("User wants to cancel the wizard!"),
+        },
+    }));
+
+    const urlHash = props.location.hash.slice(1);
+    const stepExists = steps.find(step => step.key === urlHash);
+    const firstStepKey = steps.map(step => step.key)[0];
+    const initialStepKey = stepExists ? urlHash : firstStepKey;
+    const lastClickableStepIndex = props.isEdit ? steps.length - 1 : 0;
+
+    return (
+        <Wizard
+            useSnackFeedback={true}
+            onStepChangeRequest={onStepChangeRequest}
+            initialStepKey={initialStepKey}
+            lastClickableStepIndex={lastClickableStepIndex}
+            steps={steps}
+        />
+    );
+};
+```
+
 # Setup
 
 ```

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2019-04-26T10:47:18.582Z\n"
-"PO-Revision-Date: 2019-04-26T10:47:18.582Z\n"
+"POT-Creation-Date: 2019-06-28T07:35:50.513Z\n"
+"PO-Revision-Date: 2019-06-28T07:35:50.513Z\n"
 
 msgid "Save"
 msgstr ""
@@ -96,3 +96,12 @@ msgstr ""
 
 msgid "Search by name"
 msgstr ""
+
+msgid "Help"
+msgstr ""
+
+msgid "Previous"
+msgstr ""
+
+msgid "Next"
+msgstr ""

i18n/es.po

@@ -1,18 +1,18 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2019-04-26T10:47:18.582Z\n"
+"POT-Creation-Date: 2019-06-28T07:35:50.513Z\n"
 "PO-Revision-Date: 2019-02-14T11:21:26.165Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
 
 msgid "Save"
-msgstr ""
+msgstr "Guardar"
 
 msgid "Cancel"
-msgstr ""
+msgstr "Cancelar"
 
 msgid "Actions"
 msgstr "Acciones"
@@ -51,10 +51,10 @@ msgid "selected"
 msgstr "seleccionados"
 
 msgid "There are {{total}} items selected in all pages."
-msgstr ""
+msgstr "Hay {{total}} elementos seleccionados en todas las páginas."
 
 msgid "Clear selection"
-msgstr ""
+msgstr "Borrar selección"
 
 msgid "There are {{count}} items selected ({{invisible}} on other pages)."
 msgid_plural ""
@@ -97,3 +97,12 @@ msgstr "Grupo de unidad organizativa"
 
 msgid "Search by name"
 msgstr "Buscar por nombre"
+
+msgid "Help"
+msgstr "Ayuda"
+
+msgid "Previous"
+msgstr "Anterior"
+
+msgid "Next"
+msgstr "Siguiente"

i18n/fr.po

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2019-04-26T10:47:18.582Z\n"
+"POT-Creation-Date: 2019-06-28T07:35:50.513Z\n"
 "PO-Revision-Date: 2019-02-14T11:21:26.165Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -97,3 +97,12 @@ msgstr ""
 
 msgid "Search by name"
 msgstr ""
+
+msgid "Help"
+msgstr ""
+
+msgid "Previous"
+msgstr ""
+
+msgid "Next"
+msgstr ""

package.json

@@ -61,7 +61,7 @@
         "lodash": "^4.17.11",
         "material-ui-pickers": "^2.1.2",
         "moment": "^2.22.2",
-        "nano-memoize": "^1.0.3",
+        "nano-memoize": "^1.1.5",
         "node-sass": "^4.11.0",
         "throttle-debounce": "^2.1.0"
     },

src/index.ts

@@ -10,6 +10,7 @@ import SnackbarProvider from "./snackbar/SnackbarProvider";
 import { withLoading } from "./loading";
 import LoadingProvider from "./loading/LoadingProvider";
 import ObjectsTable from "./objects-table/ObjectsTable";
+import Wizard from "./wizard/Wizard";
 
 import "./locales";
 
@@ -26,4 +27,5 @@ export {
     LoadingProvider,
     withLoading,
     ObjectsTable,
+    Wizard,
 };