feat: add logging

Author: devrnt

.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
   rules: {
     'simple-import-sort/imports': 'error',
     'sort-imports': 'off',
-    'import/order': 'off'
+    'import/order': 'off',
+    'jsdoc/require-param-type': 'off',
   }
 };

src/logger.ts

@@ -0,0 +1,23 @@
+import { LogLevel } from './types';
+/**
+ * Log messages in the console with a corresponding urgency
+ *
+ * @param level The urgency of the message
+ * @param message The message to log in the console
+ */
+export const log = (level: LogLevel, message: string) => {
+  if (__DEV__) {
+    const packageName = '[react-use-wizard]';
+
+    switch (level) {
+      case 'warn':
+        console.warn(`${packageName} ${message}`);
+        break;
+      case 'error':
+        console.error(`${packageName} ${message}`);
+        break;
+      default:
+        console.log(`${packageName} ${message}`);
+    }
+  }
+};

src/useWizard.ts

@@ -5,8 +5,8 @@ import WizardContext from './wizardContext';
 const useWizard = () => {
   const context = React.useContext(WizardContext);
 
-  if (!context) {
-    throw Error('Wrap your component with `Wizard`');
+  if (!context && __DEV__) {
+    throw Error('Wrap your step with `Wizard`');
   } else {
     return context;
   }

src/wizard.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import * as logger from './logger';
 import { Handler, WizardProps } from './types';
 import WizardContext from './wizardContext';
 
@@ -62,10 +63,33 @@ const Wizard: React.FC<WizardProps> = React.memo(
       [doNextStep, previousStep, isLoading, handleStep, activeStep],
     );
 
-    const activeStepContent = React.useMemo(
-      () => React.Children.toArray(children)[activeStep],
-      [activeStep, children],
-    );
+    const activeStepContent = React.useMemo(() => {
+      const reactChildren = React.Children.toArray(children);
+
+      if (__DEV__) {
+        // No steps passed
+        if (reactChildren.length === 0) {
+          logger.log(
+            'warn',
+            'Make sure to pass your steps as children in your <Wizard>',
+          );
+        }
+        // The passed start index is invalid
+        if (activeStep > reactChildren.length) {
+          logger.log('warn', 'An invalid startIndex is passed to <Wizard>');
+        }
+        // Invalid header element
+        if (!React.isValidElement(header)) {
+          logger.log('error', 'Invalid header passed to <Wizard>');
+        }
+        // Invalid footer element
+        if (!React.isValidElement(footer)) {
+          logger.log('error', 'Invalid footer passed to <Wizard>');
+        }
+      }
+
+      return reactChildren[activeStep];
+    }, [activeStep, children, header, footer]);
 
     return (
       <WizardContext.Provider value={wizardValue}>