Refactor(web-react): Use warning utility instead of console.warn

lmc-eu · Jan 8, 2024 · e1c4f74 · e1c4f74
1 parent 0ecdc7f
commit e1c4f74
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 27 deletions.
diff --git a/packages/web-react/config/webpack.common.js b/packages/web-react/config/webpack.common.js
@@ -29,6 +29,7 @@ module.exports = {
         loader: 'ts-loader',
         include: [
           path.resolve(__dirname, '../src'), // library
+          path.resolve(__dirname, '../../common'), // common
         ],
         options: {
           configFile: require.resolve('./tsconfig.webpack.json'),

diff --git a/packages/web-react/src/components/Button/useButtonStyleProps.ts b/packages/web-react/src/components/Button/useButtonStyleProps.ts
@@ -1,9 +1,10 @@
-import { ElementType } from 'react';
+import { warning } from '@lmc-eu/spirit-common/utilities';
 import classNames from 'classnames';
-import { compose } from '../../utils/compose';
-import { applyColor, applySize } from '../../utils/classname';
+import { ElementType } from 'react';
 import { useClassNamePrefix } from '../../hooks';
 import { ButtonColor, ButtonSize, SpiritButtonProps } from '../../types';
+import { applyColor, applySize } from '../../utils/classname';
+import { compose } from '../../utils/compose';
 
 // `${componentClassName}--${color}`;
 const getButtonColorClassname = <C = void>(className: string, color: ButtonColor<C>): string =>
@@ -30,9 +31,8 @@ export function useButtonStyleProps<T extends ElementType = 'button', C = void,
   const buttonLoadingClass = `${buttonClass}--loading`;
   const buttonSquareClass = `${buttonClass}--square`;
 
-  if (isBlock && isSquare && process.env.NODE_ENV === 'development') {
-    // eslint-disable-next-line no-console
-    console.warn('isBlock and isSquare props are mutually exclusive');
+  if (isBlock && isSquare) {
+    warning(false, 'isBlock and isSquare props are mutually exclusive');
   }
 
   const classProps = classNames(

diff --git a/packages/web-react/src/components/ButtonLink/useButtonLinkStyleProps.ts b/packages/web-react/src/components/ButtonLink/useButtonLinkStyleProps.ts
@@ -1,9 +1,10 @@
-import { ElementType } from 'react';
+import { warning } from '@lmc-eu/spirit-common/utilities';
 import classNames from 'classnames';
-import { compose } from '../../utils/compose';
-import { applyColor, applySize } from '../../utils/classname';
+import { ElementType } from 'react';
 import { useClassNamePrefix } from '../../hooks';
 import { ButtonColor, ButtonSize, SpiritButtonProps } from '../../types';
+import { applyColor, applySize } from '../../utils/classname';
+import { compose } from '../../utils/compose';
 
 // `${componentClassName}--${color}`;
 const getButtonLinkColorClassname = <C = void>(className: string, color: ButtonColor<C>): string =>
@@ -30,9 +31,8 @@ export function useButtonLinkStyleProps<T extends ElementType = 'button', C = vo
   const buttonLoadingClass = `${buttonClass}--loading`;
   const buttonSquareClass = `${buttonClass}--square`;
 
-  if (isBlock && isSquare && process.env.NODE_ENV === 'development') {
-    // eslint-disable-next-line no-console
-    console.warn('isBlock and isSquare props are mutually exclusive');
+  if (isBlock && isSquare) {
+    warning(false, 'isBlock and isSquare props are mutually exclusive');
   }
 
   const classProps = classNames(

diff --git a/packages/web-react/src/components/FileUploader/useFileUploaderInput.ts b/packages/web-react/src/components/FileUploader/useFileUploaderInput.ts
@@ -1,6 +1,7 @@
+import { warning } from '@lmc-eu/spirit-common/utilities';
 import { ChangeEvent, DragEvent, useEffect, useState } from 'react';
-import { DragAndDropHandlingProps, FileQueueMapType, FileUploaderQueueLimitBehaviorType } from '../../types';
 import { useDragAndDrop } from '../../hooks';
+import { DragAndDropHandlingProps, FileQueueMapType, FileUploaderQueueLimitBehaviorType } from '../../types';
 import { useFileUploaderContext } from './FileUploaderContext';
 
 export interface UseFileUploaderInputProps {
@@ -112,9 +113,7 @@ export const useFileUploaderInput = (props: UseFileUploaderInputProps): UseFileU
       if (onError) {
         onError(error);
       } else {
-        // We want to show error message in console
-        /* eslint-disable-next-line no-console */
-        console.warn(error);
+        warning(false, error);
       }
     }
   };

diff --git a/packages/web-react/src/components/FileUploader/utils.ts b/packages/web-react/src/components/FileUploader/utils.ts
@@ -1,3 +1,4 @@
+import { warning } from '@lmc-eu/spirit-common/utilities';
 import { FileMetadata } from '../../types/fileUploader';
 
 const getAttachmentInput = (
@@ -14,9 +15,7 @@ const getAttachmentInput = (
     if (onError) {
       onError('File not found');
     } else {
-      // We want to print an error in the console
-      // eslint-disable-next-line no-console
-      console.warn('File not found');
+      warning(false, 'File not found');
     }
 
     return;

diff --git a/packages/web-react/src/components/Icon/Icon.tsx b/packages/web-react/src/components/Icon/Icon.tsx
@@ -1,3 +1,4 @@
+import { warning } from '@lmc-eu/spirit-common/utilities';
 import React from 'react';
 import { useIcon, useStyleProps } from '../../hooks';
 import { IconProps } from '../../types';
@@ -19,8 +20,8 @@ export const Icon = (props: IconProps): JSX.Element => {
 
   // @deprecated Usage of `html-react-parser` will be required in the next major version.
   if (typeof window === 'undefined' && htmlParser == null) {
-    // eslint-disable-next-line no-console
-    console.warn(
+    warning(
+      false,
       'Icon component is not supported in SSR without use of `html-react-parser`. Please install, missing peer dependency.',
     );
   }

diff --git a/packages/web-react/src/hooks/styleProps.ts b/packages/web-react/src/hooks/styleProps.ts
@@ -1,3 +1,4 @@
+import { warning } from '@lmc-eu/spirit-common/utilities';
 import { CSSProperties, HTMLAttributes } from 'react';
 import { StyleProps } from '../types/shared/style';
 
@@ -14,8 +15,8 @@ export function useStyleProps<T extends StyleProps>(props: T): StylePropsResult
   // Want to check if className prop exists, but not to define it in StyleProps type
   // @ts-expect-error Property 'className' does not exist on type 'Omit<T, "UNSAFE_className" | "UNSAFE_style">'.
   if (otherProps.className) {
-    // eslint-disable-next-line no-console
-    console.warn(
+    warning(
+      false,
       'The className prop is unsafe and is unsupported in Spirit Web React. ' +
         'Please use style props with Spirit Design Tokens, or UNSAFE_className if you absolutely must do something custom. ' +
         'Note that this may break in future versions due to DOM structure changes.',
@@ -28,8 +29,8 @@ export function useStyleProps<T extends StyleProps>(props: T): StylePropsResult
   // Want to check if style prop exists, but not to define it in StyleProps type
   // @ts-expect-error Property 'style' does not exist on type 'Omit<T, "UNSAFE_className" | "UNSAFE_style">'.
   if (otherProps.style) {
-    // eslint-disable-next-line no-console
-    console.warn(
+    warning(
+      false,
       'The style prop is unsafe and is unsupported in Spirit Web React. ' +
         'Please use style props with Spirit Design Tokens, or UNSAFE_style if you absolutely must do something custom. ' +
         'Note that this may break in future versions due to DOM structure changes.',

diff --git a/packages/web-react/src/hooks/useDeprecationMessage.ts b/packages/web-react/src/hooks/useDeprecationMessage.ts
@@ -1,3 +1,4 @@
+import { warning } from '@lmc-eu/spirit-common/utilities';
 import { useEffect } from 'react';
 
 export interface UseDeprecationMessageProps {
@@ -65,8 +66,7 @@ export const useDeprecationMessage = ({
     }
 
     if (message && isExecutable && hasProps) {
-      // eslint-disable-next-line no-console
-      console.warn(message);
+      warning(false, message);
     }
 
     /* We want to call this hook only once */