Revamped wizard stepper UX (#14)

prabhuignoto · Jun 24, 2022 · f22db94 · f22db94
1 parent ce90be1
commit f22db94
Show file tree

Hide file tree

Showing 17 changed files with 342 additions and 218 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -17,6 +17,17 @@ module.exports = {
     ecmaVersion: "latest",
     sourceType: "module",
   },
-  plugins: ["react", "@typescript-eslint"],
-  rules: {},
+  plugins: ["react", "@typescript-eslint", "sort-keys-fix"],
+  rules: {
+    "react/jsx-sort-props": 1,
+    "sort-keys-fix/sort-keys-fix": "warn",
+    "sort-keys": [
+      "error",
+      "asc",
+      {
+        caseSensitive: true,
+        natural: true,
+      },
+    ],
+  },
 };
diff --git a/package.json b/package.json
@@ -119,6 +119,7 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-security": "^1.5.0",
+    "eslint-plugin-sort-keys-fix": "^1.1.2",
     "husky": "^8.0.1",
     "jsdom": "^20.0.0",
     "mini-css-extract-plugin": "^2.6.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,50 +1,27 @@
 import "./App.css";
 import { Wizard } from "./components/wizard";
-import { Box, Dollar, Twitter, User } from "./example-assets";
 
 function App() {
   return (
     <div
       className="App"
-      style={{ width: "950px", margin: "0 auto", marginTop: "1rem" }}
+      style={{ margin: "0 auto", marginTop: "1rem", width: "950px" }}
     >
       <Wizard
-        silent
-        theme={{
-          primary: "#007fff",
-          background: "#000",
-          textColor: "#fff",
-          formFieldBackground: "#282828",
-          formFieldBorder: "#000",
-          success: "#519259",
-          fail: "#cf352e",
-          inputBackground: "#464646",
-          inputTextColor: "#fff",
-          tabLineColor: "#464646",
-          tabColor: "#7d7d7d",
-        }}
-        icons={[
-          <User key="usr" />,
-          <Box key="box" />,
-          <Twitter key="twitter" />,
-          <Dollar key="dollar" />,
-        ]}
         bodyHeight={750}
         highlightFieldsOnValidation
-        validationDelay={100}
+        noPageTitle
         strict={false}
-        // RTL
         onFinish={(val) => console.log(val)}
         pages={[
           {
-            title: "Introduction",
             fields: [
               {
+                isRequired: true,
                 label: "First Name",
                 name: "firstName",
-                type: "text",
-                isRequired: true,
                 placeholder: "Enter your first name",
+                type: "text",
                 validationMessage: "You cannot leave this field empty",
               },
               {
@@ -53,26 +30,26 @@ function App() {
                 type: "text",
               },
               {
+                label: "Date of Birth",
                 name: "dateOfBirth",
                 type: "date",
-                label: "Date of Birth",
               },
               {
+                isRequired: true,
                 label: "Email",
                 name: "email",
                 type: "email",
-                isRequired: true,
                 validationMessage: "Incorrect email id. example: xxxx@yyy.com",
               },
               {
-                name: "Phone number",
                 label: "Phone",
+                name: "Phone number",
                 type: "phone",
               },
             ],
+            title: "Introduction",
           },
           {
-            title: "Employment",
             fields: [
               {
                 label: "Company Name",
@@ -90,42 +67,42 @@ function App() {
                 type: "textarea",
               },
               {
+                isRequired: true,
                 label: "Are you currently working?",
                 name: "employed",
-                type: "radio",
-                isRequired: true,
                 options: [
                   { name: "yes", value: true },
                   { name: "no", value: false },
                 ],
+                type: "radio",
               },
               {
+                isRequired: true,
                 label: "Choose your skills",
                 name: "skills",
-                type: "checkbox",
-                isRequired: true,
                 options: [
                   { name: "HTML", value: "html" },
                   { name: "CSS", value: "css" },
                   { name: "JavaScript", value: "javascript" },
                   { name: "React", value: "react" },
                 ],
+                type: "checkbox",
               },
             ],
+            title: "Employment",
           },
           {
-            title: "CV & Social Links",
             fields: [
               {
-                name: "CV",
                 label: "Upload your CV",
+                name: "CV",
                 type: "file",
               },
               {
+                isRequired: true,
                 label: "Portfolio URL",
                 name: "Portfolio",
                 type: "url",
-                isRequired: true,
               },
               {
                 label: "Linkedin URL",
@@ -138,34 +115,61 @@ function App() {
                 type: "url",
               },
               {
-                name: "twitter",
                 label: "Twitter URL",
+                name: "twitter",
                 type: "url",
               },
             ],
+            title: "CV & Social Links",
           },
           {
-            title: "salary",
             fields: [
               {
+                isRequired: true,
                 label: "Select your current salary range",
                 name: "salaryRange",
-                type: "select",
-                isRequired: true,
-
                 options: [
                   { name: "10,000$ - 50,000$", value: "10-50k" },
                   { name: "50,000$ - 100,000$", value: "50-100k" },
                 ],
+
+                type: "select",
               },
               {
                 label: "Expected Salary",
                 name: "expectedSalary",
                 type: "text",
               },
             ],
+            title: "salary",
           },
         ]}
+        // noPageTitle
+        // icons={[
+        //   <User key="usr" />,
+        //   <Box key="box" />,
+        //   <Twitter key="twitter" />,
+        //   <Dollar key="dollar" />,
+        // ]}
+        showStepperTitles
+        silent
+        // silent
+        // strict={false}
+        // RTL
+        theme={{
+          background: "#000",
+          fail: "#cf352e",
+          formFieldBackground: "#282828",
+          formFieldBorder: "#000",
+          inputBackground: "#464646",
+          inputTextColor: "#fff",
+          primary: "#007fff",
+          success: "#519259",
+          tabColor: "#7d7d7d",
+          tabLineColor: "#464646",
+          textColor: "#fff",
+        }}
+        validationDelay={100}
       />
     </div>
   );

diff --git a/src/components/form-field/form-field-input.tsx b/src/components/form-field/form-field-input.tsx
@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import { FunctionComponent, useContext, useMemo } from "react";
 import Asterisk from "../../icons/asterisk";
-import { WizardContext } from "../wizard";
+import { WizardContext } from "../wizard-context";
 import { FormChangeEvent, FormFieldProps } from "./form-field.model";
 import styles from "./form-field.module.scss";
 
@@ -39,21 +39,21 @@ const FormFieldInput: FunctionComponent<FormFieldInputProps> = ({
     if (isTextField) {
       return (
         <input
-          type={type === "datetime" ? "datetime-local" : type}
-          required={isRequired}
           aria-labelledby={labelId}
+          disabled={disabled}
+          name={name}
           onChange={handleChange}
           placeholder={placeholder}
-          name={name}
-          disabled={disabled}
+          required={isRequired}
+          type={type === "datetime" ? "datetime-local" : type}
         />
       );
     } else if (type === "select") {
       return (
         <select
-          onChange={handleChange}
-          disabled={disabled}
           aria-labelledby={labelId}
+          disabled={disabled}
+          onChange={handleChange}
           placeholder={placeholder}
         >
           {options.map((option) => (
@@ -64,12 +64,12 @@ const FormFieldInput: FunctionComponent<FormFieldInputProps> = ({
     } else if (type === "textarea") {
       return (
         <textarea
-          disabled={disabled}
           aria-labelledby={labelId}
-          required={isRequired}
-          onChange={handleChange}
+          disabled={disabled}
           name={name}
+          onChange={handleChange}
           placeholder={placeholder}
+          required={isRequired}
         ></textarea>
       );
     } else if (type === "radio" || type === "checkbox") {
@@ -78,13 +78,13 @@ const FormFieldInput: FunctionComponent<FormFieldInputProps> = ({
           {options.map(({ name: optionName, id, value }) => (
             <label key={id}>
               <input
-                type={type}
-                name={name}
-                value={value as string}
-                onChange={handleChange}
                 id={id}
                 key={id}
+                name={name}
+                onChange={handleChange}
                 placeholder={placeholder}
+                type={type}
+                value={value as string}
               />
               {optionName}
             </label>
@@ -99,9 +99,9 @@ const FormFieldInput: FunctionComponent<FormFieldInputProps> = ({
       {getInputType}
       {isRequired && (
         <span
+          aria-label="important field"
           className={classNames(styles.asterisk, RTL ? styles.RTL : "")}
           role="img"
-          aria-label="important field"
         >
           <Asterisk />
         </span>