Merge pull request #11 from devrnt/chore/logging

Chore/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',
   }
 };

global.d.ts

@@ -0,0 +1 @@
+declare var __DEV__: boolean;

jest.config.js

@@ -1,4 +1,7 @@
 module.exports = {
   // https://github.com/testing-library/jest-native/issues/46#issuecomment-748674706
   setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
+  globals: {
+    __DEV__: 'development',
+  },
 };

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/reducer.ts

@@ -34,4 +34,7 @@ export type WizardValues = {
   isFirstStep: boolean;
   /** Indicate if the current step is the last step (aka no next step) */
   isLastStep: boolean;
-} | null;
+};
+
+/** Console log levels */
+export type LogLevel = 'info' | 'error' | 'warn';

src/types.ts

@@ -1,14 +1,15 @@
 import * as React from 'react';
 
+import { WizardValues } from './types';
 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;
+    return context as WizardValues;
   }
 };
 

src/useWizard.ts

@@ -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 (header && !React.isValidElement(header)) {
+          logger.log('error', 'Invalid header passed to <Wizard>');
+        }
+        // Invalid footer element
+        if (footer && !React.isValidElement(footer)) {
+          logger.log('error', 'Invalid footer passed to <Wizard>');
+        }
+      }
+
+      return reactChildren[activeStep];
+    }, [activeStep, children, header, footer]);
 
     return (
       <WizardContext.Provider value={wizardValue}>

src/wizard.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { WizardValues } from './types';
 
-const WizardContext = React.createContext<WizardValues>(null);
+const WizardContext = React.createContext<WizardValues | null>(null);
 WizardContext.displayName = 'WizardContext';
 
 export default WizardContext;

src/wizardContext.ts

@@ -1,6 +1,6 @@
 {
   // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
-  "include": ["src", "types"],
+  "include": ["src", "global.d.ts"],
   "compilerOptions": {
     "module": "esnext",
     "lib": ["dom", "esnext"],