[Misc] replace hexcode (#9106)

(master → master)
ApryseSDK · Jun 24, 2024 · 2873fde · 2873fde
1 parent 9670909
commit 2873fde
Show file tree

Hide file tree

Showing 47 changed files with 1,026 additions and 534 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -192,8 +192,7 @@
     "@typescript-eslint/no-var-requires": "off",
     "react/prop-types": "off",
     "react/no-danger": "error",
-    // TODO: Uncomment this when we fix all the hex colors
-    // "custom/no-hex-colors": "error"
+    "custom/no-hex-colors": "error"
   },
   "overrides": [
     {

diff --git a/src/apis/setColorPalette.js b/src/apis/setColorPalette.js
@@ -6,6 +6,7 @@ import selectors from 'selectors';
  * @typedef UI.PaletteOption
  * @property {string[]} toolNames Tools that will have the same colors in the palette.
  * @property {string[]} colors An array of hex colors. Use 'transparency' for a transparent color.
+ * @property {string[]} [palleteTypes] An array of palette types. Can be 'fill' | 'stroke' | 'text'. (Only for StylePanel)
  */
 
 /**
@@ -27,7 +28,7 @@ WebViewer(...)
   });
  */
 
-export default store => overrides => {
+export default (store) => (overrides) => {
   const currentOverride = {
     ...(selectors.getCustomElementOverrides(store.getState(), 'colorPalette') || {}),
   };
@@ -37,25 +38,37 @@ export default store => overrides => {
       currentOverride.global = overrides;
     } else {
       return console.warn(
-        `An array is passed to setColorPalette, but some colors are invalid. A color must be 'transparency' or a hex color string. For example #F0F0F0`
+        // eslint-disable-next-line custom/no-hex-colors
+        'An array is passed to setColorPalette, but some colors are invalid. A color must be   \'transparency\' or a hex color string. For example #F0F0F0'
       );
     }
   } else if (typeof overrides === 'object') {
     if (overrides.toolNames && overrides.colors) {
-      overrides.toolNames.forEach(toolName => {
+      overrides.toolNames.forEach((toolName) => {
         const key = mapToolNameToKey(toolName);
         currentOverride[key] = overrides.colors;
       });
     } else {
       return console.warn(
-        `An object is passed to setColorPalette, but it doesn't have a toolNames or colors property.`
+        'An object is passed to setColorPalette, but it doesn\'t have a toolNames or colors property.'
       );
     }
   }
 
   store.dispatch(actions.setCustomElementOverrides('colorPalette', currentOverride));
+
+  // Custom-UI pallete override logic
+  if (Array.isArray(overrides)) {
+    const colorPalette = overrides.map((color) => (color === 'transparency' ? 'transparent' : color.toLowerCase()));
+    store.dispatch(actions.setColors(colorPalette, undefined, undefined));
+    store.dispatch(actions.setColors(colorPalette, undefined, 'text'));
+  } else if (typeof overrides === 'object') {
+    overrides.toolNames.forEach((toolName) => {
+      const colorPalette = overrides.colors.map((color) => (color === 'transparency' ? 'transparent' : color.toLowerCase()));
+      store.dispatch(actions.setColors(colorPalette, toolName, undefined));
+    });
+  }
 };
 
 // examples of valid colors are: '#f0f0f0', '#FFFFFF'
-const isValidColor = color =>
-  color === 'transparency' || (color.startsWith('#') && color.split('#')[1].length === 6);
+const isValidColor = (color) => color === 'transparency' || (color.startsWith('#') && color.split('#')[1].length === 6);
diff --git a/src/components/ActionButton/ActionButton.stories.js b/src/components/ActionButton/ActionButton.stories.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import { createStore } from 'redux';
-import { Provider } from "react-redux";
+import { Provider } from 'react-redux';
 import ActionButtonComponent from './ActionButton';
+import { initialColors } from 'helpers/initialColorStates';
 
 const initialState = {
   viewer: {
@@ -11,7 +12,7 @@ const initialState = {
 };
 function rootReducer(state = initialState, action) {
   return state;
-};
+}
 
 const store = createStore(rootReducer);
 
@@ -32,11 +33,11 @@ export const ActionButton = BasicComponent.bind({});
 ActionButton.args = {
   title: 'Action Button',
   img: 'icon-tools-more',
-  color: '#E44234',
-  fillColor: '#E44234',
-  strokeColor: '#E44234',
+  color: initialColors[0],
+  fillColor: initialColors[0],
+  strokeColor: initialColors[0],
   dataElement: 'test',
-  onClick: () => { alert('Action Triggered') },
+  onClick: () => {
+    alert('Action Triggered');
+  },
 };
-
-
diff --git a/src/components/AnnotationPopup/AnnotationPopup.stories.js b/src/components/AnnotationPopup/AnnotationPopup.stories.js
@@ -4,6 +4,8 @@ import { configureStore } from '@reduxjs/toolkit';
 import { Provider } from 'react-redux';
 import getAnnotationStyles from 'src/helpers/getAnnotationStyles';
 import DataElements from 'constants/dataElement';
+import core from 'core';
+import { BASIC_PALETTE } from 'constants/commonColors';
 
 const noop = () => { };
 
@@ -37,10 +39,11 @@ const initialState = {
     ],
     customPanels: [],
     unreadAnnotationIdSet: new Set(),
-    colorMap: [{ colorMapKey: () => '#F1A099' }],
+    colorMap: [{ colorMapKey: () => BASIC_PALETTE[0] }],
     openElements: {
       stylePopupTextStyleContainer: false,
     },
+    activeDocumentViewerKey: 1,
   },
 };
 
@@ -97,6 +100,22 @@ export const BasicVertical = () => {
   );
 };
 
+export const IsReadOnlyMode = (props) => {
+  core.getIsReadOnly = () => true;
+  let annotationProps;
+  if (Object.keys(props).length) {
+    annotationProps = props;
+  } else {
+    annotationProps = basicHorizontalProps;
+  }
+
+  return (
+    <Provider store={configureStore({ reducer: () => initialState })}>
+      <AnnotationPopup {...annotationProps} />
+    </Provider>
+  );
+};
+
 const readOnlySignatureAnnotationProps = {
   isOpen: true,
   isRightClickMenu: false,
@@ -132,4 +151,4 @@ export const SignatureReadOnlyDiablePopUp = () => {
       <AnnotationPopup {...readOnlySignatureAnnotationPropsDisabled} />
     </Provider>
   );
-};
+};
diff --git a/src/components/AudioPlaybackPopup/AudioPlaybackPopup.js b/src/components/AudioPlaybackPopup/AudioPlaybackPopup.js
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import Button from '../Button';
 import classNames from 'classnames';
 import './AudioPlaybackPopup.scss';
+import { COMMON_COLORS } from 'constants/commonColors';
 
 const PLAY_AUDIO_SVG = 'ic_play_24px';
 const PAUSE_AUDIO_SVG = 'ic_pause_24px';
@@ -15,7 +16,6 @@ function AudioPlaybackPopup({
   handleAudioInitializeError,
   handleCloseAudioPlaybackPopup
 }) {
-
   const [isPlayingAudio, setIsPlayingAudio] = useState(false);
   const [durationValue, setDurationValue] = useState(0);
   const [durationString, setDurationString] = useState('00:00');
@@ -38,27 +38,27 @@ function AudioPlaybackPopup({
   }, []);
 
   useEffect(() => {
-    if(!annotation || !annotation.audio || !annotation.audio.blob) {
+    if (!annotation || !annotation.audio || !annotation.audio.blob) {
       handleAudioInitializeError('No audio data found. Cannot play this annotation\'s audio.');
       return;
     }
 
     audioElementRef.current.src = URL.createObjectURL(annotation.audio.blob);
 
-    if(autoplay) {
+    if (autoplay) {
       playAudio();
     }
   }, [annotation]);
 
   async function toggleAudio() {
     let isPlaying = false;
 
-    if(isPlayingAudio) {
+    if (isPlayingAudio) {
       await audioElementRef.current.pause();
     } else {
       isPlaying = true;
       await audioElementRef.current.play()
-        .catch(error => {
+        .catch((error) => {
           isPlaying = false;
           handleAudioPlaybackError(error);
         });
@@ -70,7 +70,7 @@ function AudioPlaybackPopup({
   async function playAudio() {
     let isPlaying = true;
     await audioElementRef.current.play()
-      .catch(error => {
+      .catch((error) => {
         isPlaying = false;
         handleAudioPlaybackError(error);
       });
@@ -79,7 +79,7 @@ function AudioPlaybackPopup({
   }
 
   function handleLoadedAudioMetadata(e) {
-    const duration = e.target.duration
+    const duration = e.target.duration;
     const timeStampString = getTimeStampStringFromSeconds(duration);
     setDurationValue(duration);
     setDurationString(timeStampString);
@@ -110,17 +110,18 @@ function AudioPlaybackPopup({
     <div className={classNames({
       Popup: true,
       AudioPlaybackPopup: true
-    })}>
+    })}
+    >
       <div className="audio-popup-draggable-header">
         <svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <rect width="12" height="2" rx="1" fill="#CFD4DA"/>
+          <rect width="12" height="2" rx="1" fill={COMMON_COLORS['gray4']}/>
         </svg>
       </div>
       <div className="audio-popup-ui">
         <audio
           data-testid="hidden-audio-element"
           ref={audioElementRef}
-          style={{ display: 'none'}}
+          style={{ display: 'none' }}
           onLoadedMetadata={handleLoadedAudioMetadata}
           onTimeUpdate={handleAudioTimeUpdate}
           onEnded={handleAudioFinished}

diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import { createStore } from 'redux';
-import { Provider } from "react-redux";
+import { Provider } from 'react-redux';
 import ButtonComponent from './Button';
-
-const noop = () => { };
+import { initialColors } from 'helpers/initialColorStates';
 
 const initialState = {
   viewer: {
@@ -13,7 +12,7 @@ const initialState = {
 };
 function rootReducer(state = initialState, action) {
   return state;
-};
+}
 
 const store = createStore(rootReducer);
 
@@ -35,9 +34,8 @@ Button.args = {
   title: 'Test Button',
   isActive: true,
   img: 'icon-tool-pen-line',
-  color: '#E44234',
-  fillColor: '#E44234',
-  strokeColor: '#E44234',
+  color: initialColors[0],
+  fillColor: initialColors[0],
+  strokeColor: initialColors[0],
   dataElement: 'test',
 };
-