@axinom/mosaic-ui 0.33.0-rc.1 → 0.33.0-rc.19

package/src/index.ts

@@ -4,5 +4,6 @@ export * from './helpers';
 export * from './hooks';
 export * from './initialize';
 export * from './types';
+export * from './utils/ErrorMapper';
 export { ErrorTypeToStationError } from './utils/ErrorTypeToStationError';
 export * from './validators';

package/src/initialize.ts

@@ -5,6 +5,12 @@ import {
   ShowNotification,
 } from './types/ui-config';
 
+export enum IndicatorType {
+  Saving = 'saving',
+  Inactive = 'inactive',
+  Dirty = 'dirty',
+}
+
 export let showNotification: ShowNotification | (() => void) =
   polyfill('showNotification');
 
@@ -15,9 +21,8 @@ export let removeIndicator: RemoveIndicator | (() => void) =
 
 export let on: CustomEventEmitter['on'] | (() => void) = polyfill('on');
 
-export let showSaveIndicator: () => void = polyfill('showSaveIndicator');
-
-export let hideSaveIndicator: () => void = polyfill('hideSaveIndicator');
+export let setSaveIndicator: (type: IndicatorType) => void =
+  polyfill('showSaveIndicator');
 
 /**
  * Passes the PiralApi methods to the UI library.
@@ -25,12 +30,11 @@ export let hideSaveIndicator: () => void = polyfill('hideSaveIndicator');
  */
 export function initializeUi(app: UiConfig): void {
   ({
-    showNotification,
-    addIndicator,
-    removeIndicator,
-    on,
-    showSaveIndicator,
-    hideSaveIndicator,
+    showNotification = polyfill('showNotification'),
+    addIndicator = polyfill('addIndicator'),
+    removeIndicator = polyfill('removeIndicator'),
+    on = polyfill('on'),
+    setSaveIndicator = polyfill('setSaveIndicator'),
   } = app);
 }
 
@@ -39,15 +43,14 @@ export interface UiConfig {
   addIndicator: AddIndicator;
   removeIndicator: RemoveIndicator;
   on: CustomEventEmitter['on'];
-  showSaveIndicator: () => void;
-  hideSaveIndicator: () => void;
+  setSaveIndicator: (type: IndicatorType) => void;
 }
 
 function polyfill(methodName: string): () => void {
   return () => {
     // eslint-disable-next-line no-console
     console.warn(
-      `Could not find ${methodName} method. Is the UI initialized in the pilet? To initialize UI library call 'initializeUi(app)' in your pilet.`,
+      `Could not find '${methodName}' method. Is the UI initialized in the pilet? To initialize UI library call 'initializeUi(app)' in your pilet.`,
     );
   };
 }

package/src/styles/variables.scss

@@ -41,6 +41,7 @@ $accordion-item-background-color: white;
 $accordion-item-text-color: $dark-gray;
 $accordion-item-hover-color: rgba($blue, 0.15);
 $accordion-item-border: 1px solid $light-gray;
+$accordion-item-arrow-color: $blue;
 
 /* Explorer vars */
 $explorer-background-color: #ffffff;
@@ -65,7 +66,7 @@ $filter-background-color: white;
 $filter-background-selected-color: rgba($blue, 0.15);
 $filter-light-font-color: $dark-gray;
 $filter-option-background-color: #d7e9f1;
-$filter-arrow-button-color: $blue;
+$filter-context-button-color: $blue;
 $filter-title-color: $blue;
 $filter-font-size: 16px;
 $filter-width: 360px;
@@ -184,7 +185,7 @@ $tag-font-color: $dark-gray;
 $tag-background-color: $light-gray-2;
 $form-error-color: $red;
 $select-arrow-color: $blue;
-$select-disabled-arrow-color: $light-gray;
+$select-disabled-arrow-color: $gray;
 $label-font-size: 16px;
 $file-upload-progress: $blue;
 $file-upload-progress-background: $light-gray-2;
@@ -198,6 +199,16 @@ $form-element-min-height: 50px;
 $read-only-text-background-color: $light-gray-2;
 $select-background-color: white;
 $form-indicator-color: $green;
+$radio-hover-stroke-color: $blue;
+$radio-checked-fill-color: $blue;
+
+/* Date Time Picker*/
+$calendar-tile-active: $blue;
+$calendar-tile-active-hover: rgba($blue, 0.2);
+$calendar-button-stroke-color: $blue;
+$calendar-title-color: $dark-blue;
+$calendar-container-border-color: $blue;
+$calendar-container-bg-color: $blue;
 
 /* Dynamic Data List */
 $dynamic-list-row-bg-color: white;
@@ -271,3 +282,22 @@ $infotooltip-font-size: 16px;
 /* Video Player */
 $video-player-controls-background: $light-gray-2;
 $video-player-controls-text-color: $dark-gray;
+
+/* Buttons */
+$navigation-button-background-color: $light-blue;
+$navigation-button-background-color-hover: rgba($light-blue, 0.9);
+$navigation-button-stroke-color: white;
+$navigation-button-background-active-color: white;
+$navigation-button-stroke-active-color: $light-blue;
+$navigation-button-background-disabled-color: $gray;
+$active-button-background-color: $blue;
+$active-button-hover-background-color: rgba($blue, 0.9);
+$active-button-stroke-background-color: white;
+$active-button-active-background-color: white;
+$active-button-active-stroke-color: $blue;
+$context-button-border-color: $blue;
+$context-button-stroke-color: $blue;
+$context-button-hover-border-color: $blue;
+$context-button-active-color: $blue;
+$icon-button-stroke-color: $blue;
+$icon-button-hover-color: $blue;

package/src/utils/ErrorMapper/ApolloClient/ApolloErrorMapper.spec.ts

@@ -0,0 +1,32 @@
+import { ErrorType } from '../../../components';
+import { ApolloErrorMapper } from './ApolloErrorMapper';
+
+describe('ApolloErrorMapper', () => {
+  const mockError: ErrorType = {
+    name: 'ApolloError',
+    networkError: { message: 'Network connection lost' },
+  };
+
+  it('should map an Apollo error with a network error', () => {
+    const mappedError = ApolloErrorMapper(mockError);
+    expect(mappedError).toEqual({
+      title: 'A network error occurred',
+      body: expect.any(Object), // You can modify the expectation here based on your needs
+    });
+  });
+
+  it('should not map an error if already mapped by a previous error mapper', () => {
+    const previousMappedError: ErrorType = {
+      title: 'Previous Error',
+      body: 'Previous error message',
+    };
+    const mappedError = ApolloErrorMapper(mockError, previousMappedError);
+    expect(mappedError).toBeUndefined();
+  });
+
+  it('should return undefined if it does not match the conditions', () => {
+    const error: ErrorType = new Error('Some other error');
+    const mappedError = ApolloErrorMapper(error);
+    expect(mappedError).toBeUndefined();
+  });
+});

package/src/utils/ErrorMapper/ApolloClient/ApolloErrorMapper.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ErrorMapper } from '../ErrorMapper.type';
+
+/**
+ * An error mapper that maps errors from the Apollo Client to more user friendly errors.
+ * @param error The error to map
+ * @param mappedError The error that was mapped by a previous error mapper
+ * @returns The mapped error or undefined if the error could not be mapped
+ */
+export const ApolloErrorMapper: ErrorMapper = (error, mappedError) => {
+  if (!mappedError) {
+    const apolloError = error as {
+      networkError?: { message: string };
+      name?: string;
+    };
+
+    if (apolloError.name === 'ApolloError' && apolloError.networkError) {
+      return {
+        title: 'A network error occurred',
+        body: (
+          <>
+            <p>Please check your internet connection and try again.</p>
+            <>
+              <i>Original Error:</i>
+              <pre>{JSON.stringify(error, undefined, 2)}</pre>
+            </>
+          </>
+        ),
+      };
+    }
+    return undefined;
+  }
+};

package/src/utils/ErrorMapper/ErrorMapper.spec.ts

@@ -0,0 +1,67 @@
+import { ErrorType } from '../../components/models';
+import { mapError, setErrorMappers } from './ErrorMapper';
+import { ErrorMapper } from './ErrorMapper.type';
+
+describe('mapError', () => {
+  const errorMapper1: ErrorMapper = (error) => {
+    if (typeof error === 'string') {
+      return { title: 'String Error', body: error };
+    }
+    return undefined;
+  };
+
+  const errorMapper2: ErrorMapper = (error) => {
+    if (typeof error === 'number') {
+      return { title: 'Number Error', body: error.toString() };
+    }
+    return undefined;
+  };
+
+  const errorMapper3: ErrorMapper = (error) => {
+    if (error instanceof Error) {
+      return { title: 'Custom Error', body: error.message };
+    }
+    return undefined;
+  };
+
+  beforeEach(() => {
+    setErrorMappers([errorMapper1, errorMapper2, errorMapper3]);
+  });
+
+  afterEach(() => {
+    setErrorMappers([]);
+  });
+
+  it('should map a string error', () => {
+    const error: ErrorType = 'Something went wrong';
+    const mappedError = mapError(error);
+    expect(mappedError).toEqual({
+      title: 'String Error',
+      body: 'Something went wrong',
+    });
+  });
+
+  it('should map a number error', () => {
+    const error: ErrorType = 42;
+    const mappedError = mapError(error);
+    expect(mappedError).toEqual({ title: 'Number Error', body: '42' });
+  });
+
+  it('should map a custom error', () => {
+    const error: ErrorType = new Error('Custom error message');
+    const mappedError = mapError(error);
+    expect(mappedError).toEqual({
+      title: 'Custom Error',
+      body: 'Custom error message',
+    });
+  });
+
+  it('should return the original error if no mapper can map it', () => {
+    const error: ErrorType = {
+      title: 'Unknown Error',
+      body: 'Something unexpected happened',
+    };
+    const mappedError = mapError(error);
+    expect(mappedError).toBe(error);
+  });
+});

package/src/utils/ErrorMapper/ErrorMapper.ts

@@ -0,0 +1,31 @@
+import { ApolloErrorMapper } from './ApolloClient/ApolloErrorMapper';
+import { ErrorMapper } from './ErrorMapper.type';
+
+let ErrorMappers: ErrorMapper[] = [ApolloErrorMapper];
+
+/**
+ * Sets the error mappers to use for mapping errors.
+ * By default the `ApolloErrorMapper` is registered.
+ * @param mappers an array of error mappers that should be used
+ */
+export const setErrorMappers = (mappers: ErrorMapper[]): void => {
+  ErrorMappers = mappers;
+};
+
+/**
+ * Uses the currently registered error mappers to map the given error.
+ * To register error mappers use the `setErrorMappers` function.
+ * @param error the error to map
+ * @returns the mapped error or the original error if no mapper was able to map the error
+ */
+export const mapError: ErrorMapper = (error) => {
+  const originalError = error;
+  let mappedError = undefined;
+  for (const mapper of ErrorMappers) {
+    const mappingResult = mapper(originalError, mappedError);
+    if (mappingResult !== undefined && mappingResult !== originalError) {
+      mappedError = mappingResult;
+    }
+  }
+  return mappedError ?? originalError;
+};

package/src/utils/ErrorMapper/ErrorMapper.type.ts

@@ -0,0 +1,11 @@
+import { ErrorType } from '../../components/models';
+
+export interface ErrorMapper {
+  /**
+   * Maps the given error to a new error.
+   * @param error the error to map
+   * @param currentlyMappedError the error that was mapped by a previous error mapper
+   * @returns the mapped error or undefined if the error could not be mapped
+   */
+  (error: ErrorType, currentlyMappedError?: ErrorType): ErrorType | undefined;
+}

package/src/utils/ErrorMapper/index.ts

@@ -0,0 +1,3 @@
+export * from './ApolloClient/ApolloErrorMapper';
+export * from './ErrorMapper';
+export * from './ErrorMapper.type';

package/src/utils/ErrorTypeToStationError.spec.tsx

@@ -55,4 +55,16 @@ describe('ErrorTypeToStationError', () => {
     const result = ErrorTypeToStationError(error, 'custom title');
     expect(result.title).toBe('custom title');
   });
+
+  it('uses the apollo mapper by default', () => {
+    const error = {
+      name: 'ApolloError',
+      networkError: { message: 'test error' },
+    };
+    const result = ErrorTypeToStationError(error);
+    expect(result.title).toBe('A network error occurred');
+    const wrapper = render(<>{result.body}</>);
+
+    expect(wrapper.toString()).toContain('test error');
+  });
 });

package/src/utils/ErrorTypeToStationError.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ErrorType, StationError } from '../components/models';
+import { mapError } from './ErrorMapper/ErrorMapper';
 
 /**
  * Converts an `ErrorType` object into a station error.
@@ -9,10 +10,13 @@ import { ErrorType, StationError } from '../components/models';
  * @returns A station error object
  */
 export const ErrorTypeToStationError = (
-  error?: ErrorType,
+  originalError?: ErrorType,
   defaultTitle = 'An error occurred.',
   defaultBody?: string,
 ): StationError => {
+  const error = mapError(
+    originalError ?? { title: defaultTitle, body: defaultBody },
+  );
   let stationError: StationError;
   if (isStationError(error)) {
     // we already got a station error