@axinom/mosaic-ui 0.33.0-rc.9 → 0.34.0-rc.0

package/src/components/FormElements/formStoryHelper.tsx

@@ -1,7 +1,18 @@
 import { faker } from '@faker-js/faker';
 import React, { useState } from 'react';
-import { CustomTags, ReadOnlyField, Select, SingleLineText, Tags } from '.';
+import {
+  Checkbox,
+  CustomTags,
+  Divider,
+  FileUploadControl,
+  Radio,
+  ReadOnlyField,
+  Select,
+  SingleLineText,
+  Tags,
+} from '.';
 import { generateItemArray } from '../../helpers/storybook';
+import { TextButton } from '../Buttons';
 import { DynamicListColumn } from '../DynamicDataList/DynamicDataList.model';
 import {
   createInputRenderer,
@@ -10,6 +21,8 @@ import {
 import { formatDateTime } from '../Utils';
 import { BooleanViewField } from './BooleanView/BooleanViewField';
 import { DynamicDataListControl } from './DynamicDataListControl/DynamicDataListControl';
+import { FileUpload } from './FileUploadControl/FileUploadControl';
+import { TextArea } from './TextArea/TextArea';
 
 interface DynamicListStoryData {
   position: number;
@@ -67,13 +80,13 @@ const dataListColumns: DynamicListColumn<DynamicListStoryData>[] = [
 ];
 
 export const SampleForm: React.FC = () => useCreateForm().form;
-
 export const useCreateForm = (): {
   form: JSX.Element;
   title: string;
 } => {
   const [id] = useState(faker.datatype.uuid());
   const [title, setTitle] = useState(`The ${generateTitle()}`);
+  const [title2, setTitle2] = useState(`The ${generateTitle()}`);
   const [genres, setGenres] = useState<string[]>(['Crime', 'Drama']);
   const [ratings, setRatings] = useState<
     string | number | string[] | undefined
@@ -94,104 +107,157 @@ export const useCreateForm = (): {
       country: faker.address.country(),
     })),
   );
+  const [radio, setRadio] = useState(1);
+  const [check, setCheck] = useState<boolean>();
+  const [file, setFile] = useState<FileUpload>();
+
+  const [disabled, setDisabled] = useState<boolean>(false);
 
   return {
     form: (
-      <form
-        style={{
-          display: 'grid',
-          gridAutoRows: 'max-content',
-          gridTemplateColumns: '1fr',
-          rowGap: '20px',
-        }}
-      >
-        <ReadOnlyField label="Id" value={id} />
-        <SingleLineText
-          name="title"
-          label="Title"
-          value={title}
-          onChange={(e) => setTitle(e.currentTarget.value)}
-        />
-        <ReadOnlyField label="Publish State" value="PUBLISHED" />
-        <BooleanViewField
-          label="Status"
-          value={status}
-          trueLabel="Enabled"
-          falseLabel="Disabled"
-        />
-        <Tags
-          name="genres"
-          label="Genre(s)"
-          value={genres}
-          tagsOptions={genresOptions}
-          onChange={(e) =>
-            setGenres(e.currentTarget.value as unknown as string[])
-          }
-        />
-        <Select
-          name="ratings"
-          label="Rating"
-          value={ratings}
-          options={selectOptions}
-          onChange={(e) => setRatings(e.currentTarget.value)}
-        />
-        <SingleLineText
-          name="shortDescription"
-          label="Short Description"
-          value={shortDescription}
-          placeholder="Enter a short description..."
-          onChange={(e) => setShortDescription(e.currentTarget.value)}
-        />
-        <SingleLineText
-          name="longDescription"
-          label="Long Description"
-          value={longDescription}
-          placeholder="Enter a description..."
-          onChange={(e) => setLongDescription(e.currentTarget.value)}
-        />
-        <CustomTags
-          name="cast"
-          value={cast}
-          label="Cast"
-          onChange={(e) =>
-            setCast(e.currentTarget.value as unknown as string[])
-          }
-        />
-        <CustomTags
-          name="directors"
-          value={directors}
-          label="Director(s)"
-          onChange={(e) =>
-            setDirectors(e.currentTarget.value as unknown as string[])
-          }
-        />
-        <Tags
-          name="locales"
-          value={locales}
-          label="Locale(s)"
-          tagsOptions={['en_US', 'pt_PT', 'zh_CN']}
-          onChange={(e) =>
-            setLocales(e.currentTarget.value as unknown as string[])
-          }
-        />
-        <DynamicDataListControl
-          name={'dataList'}
-          label={'Subtitles'}
-          columns={dataListColumns}
-          value={dataList}
-          positionPropertyName={'position'}
-          allowReordering={true}
-          allowRowDragging={true}
-          allowNewData={true}
-          onChange={(e) => setDataList(e as DynamicListStoryData[])}
-        />
-        <ReadOnlyField
-          label="Created At"
-          value={createdTime.toISOString()}
-          transform={formatDateTime}
-        />
-        <ReadOnlyField label="Writer(s)" value={writers} />
-      </form>
+      <>
+        <div style={{ marginBottom: 10 }}>
+          <TextButton
+            onButtonClicked={() => setDisabled(!disabled)}
+            text="Toggle Disabled"
+          />
+        </div>
+        <Divider />
+        <form
+          style={{
+            display: 'grid',
+            gridAutoRows: 'max-content',
+            gridTemplateColumns: '1fr',
+            rowGap: '20px',
+          }}
+        >
+          <ReadOnlyField label="Id" value={id} />
+          <SingleLineText
+            name="title"
+            label="Title"
+            value={title}
+            disabled={disabled}
+            onChange={(e) => setTitle(e.currentTarget.value)}
+          />
+          <ReadOnlyField label="Publish State" value="PUBLISHED" />
+          <BooleanViewField
+            label="Status"
+            value={status}
+            trueLabel="Enabled"
+            falseLabel="Disabled"
+          />
+          <Tags
+            name="genres"
+            label="Genre(s)"
+            value={genres}
+            tagsOptions={genresOptions}
+            onChange={(e) =>
+              setGenres(e.currentTarget.value as unknown as string[])
+            }
+            disabled={disabled}
+          />
+          <Select
+            name="ratings"
+            label="Rating"
+            value={ratings}
+            options={selectOptions}
+            onChange={(e) => setRatings(e.currentTarget.value)}
+            disabled={disabled}
+          />
+          <SingleLineText
+            name="shortDescription"
+            label="Short Description"
+            value={shortDescription}
+            placeholder="Enter a short description..."
+            onChange={(e) => setShortDescription(e.currentTarget.value)}
+            disabled={disabled}
+          />
+          <TextArea
+            name="longDescription"
+            label="Long Description"
+            value={longDescription}
+            placeholder="Enter a description..."
+            onChange={(e) => setLongDescription(e.currentTarget.value)}
+            disabled={disabled}
+          />
+          <CustomTags
+            name="cast"
+            value={cast}
+            label="Cast"
+            onChange={(e) =>
+              setCast(e.currentTarget.value as unknown as string[])
+            }
+            disabled={disabled}
+          />
+          <CustomTags
+            name="directors"
+            value={directors}
+            label="Director(s)"
+            onChange={(e) =>
+              setDirectors(e.currentTarget.value as unknown as string[])
+            }
+            disabled={disabled}
+          />
+          <Tags
+            name="locales"
+            value={locales}
+            label="Locale(s)"
+            tagsOptions={['en_US', 'pt_PT', 'zh_CN']}
+            onChange={(e) =>
+              setLocales(e.currentTarget.value as unknown as string[])
+            }
+            disabled={disabled}
+          />
+          <DynamicDataListControl
+            name={'dataList'}
+            label={'Subtitles'}
+            columns={dataListColumns}
+            value={dataList}
+            positionPropertyName={'position'}
+            allowReordering={true}
+            allowRowDragging={true}
+            allowNewData={true}
+            onChange={(e) => setDataList(e as DynamicListStoryData[])}
+            disabled={disabled}
+          />
+
+          <Radio
+            value={radio}
+            onChange={(e) => setRadio(Number(e.currentTarget.value))}
+            options={[
+              { value: 1, label: 'A' },
+              { value: 2, label: 'B' },
+              { value: 3, label: 'C' },
+            ]}
+            name={'radio'}
+            label={'Category'}
+            disabled={disabled}
+          />
+
+          <Checkbox
+            value={check}
+            onChange={setCheck}
+            name={'check'}
+            label={'Is Premium?'}
+            disabled={disabled}
+          />
+
+          <FileUploadControl
+            name={'file'}
+            value={file}
+            onFileSelected={(file) => setFile(file)}
+            placeholder={'Select a file'}
+            label={'File'}
+            disabled={disabled}
+          />
+          <ReadOnlyField
+            label="Created At"
+            value={createdTime.toISOString()}
+            transform={formatDateTime}
+          />
+          <ReadOnlyField label="Writer(s)" value={writers} />
+        </form>
+      </>
     ),
     title,
   };

package/src/components/FormStation/FormStation.spec.tsx

@@ -5,7 +5,7 @@ import { act } from 'react-dom/test-utils';
 import { MemoryRouter, Route } from 'react-router-dom';
 import * as Yup from 'yup';
 import { noop } from '../../helpers/utils';
-import { hideSaveIndicator, showSaveIndicator } from '../../initialize';
+import { IndicatorType, setSaveIndicator } from '../../initialize';
 import { ActionData, Actions } from '../Actions';
 import { Action } from '../Actions/Action';
 import { MessageBar } from '../MessageBar/MessageBar';
@@ -675,6 +675,11 @@ describe('Details', () => {
           </FormStation>
         </MemoryRouter>,
       );
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(
+        1,
+        IndicatorType.Inactive,
+      ); // 1. inactive 2. dirty
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(2, IndicatorType.Dirty); // 1. inactive 2. dirty
 
       // submit form
       const actionSelected = wrapper
@@ -692,7 +697,7 @@ describe('Details', () => {
 
       wrapper.update();
 
-      expect(showSaveIndicator).toHaveBeenCalledTimes(1);
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(3, IndicatorType.Saving);
 
       // complete form submission
       await act(async () => {
@@ -700,7 +705,12 @@ describe('Details', () => {
       });
       wrapper.update();
 
-      expect(hideSaveIndicator).toHaveBeenCalledTimes(1);
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(
+        4,
+        IndicatorType.Inactive,
+      );
+
+      console.warn((setSaveIndicator as jest.Mock).mock.calls);
     });
   });
 });

package/src/components/FormStation/FormStation.tsx

@@ -16,7 +16,7 @@ import React, {
 } from 'react';
 import { useHistory } from 'react-router-dom';
 import { OptionalObjectSchema } from 'yup/lib/object';
-import { hideSaveIndicator, showSaveIndicator } from '../../initialize';
+import { IndicatorType, setSaveIndicator } from '../../initialize';
 import { Data } from '../../types/data';
 import { ErrorTypeToStationError } from '../../utils/ErrorTypeToStationError';
 import { Actions, ActionsProps } from '../Actions';
@@ -155,7 +155,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
 
       try {
         setIsFormSubmitting(true);
-        showSaveIndicator();
+        setSaveIndicator(IndicatorType.Saving);
         setStationError(undefined);
         if (!initialData.loading && saveData) {
           const response = await saveData(values, initialData, formikHelpers);
@@ -171,13 +171,14 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
           ),
         );
 
+        setSaveIndicator(IndicatorType.Dirty);
+
         // We still throw the error, to make sure that navigation or action execution
         // will not continue after a failed save.
         throw error;
       } finally {
         formikHelpers.setSubmitting(false);
         setIsFormSubmitting(false);
-        hideSaveIndicator();
       }
     },
     [isFormSubmitting, initialData, saveData, setStationError],
@@ -445,6 +446,15 @@ const FormStationHeader: React.FC<
 > = ({ titleProperty, defaultTitle, subtitle, cancelNavigationUrl }) => {
   const { dirty, resetForm, values } = useFormikContext<FormikValues>();
 
+  useEffect(() => {
+    // Set the save indicator to dirty depending on the form state
+    if (dirty) {
+      setSaveIndicator(IndicatorType.Dirty);
+    } else {
+      setSaveIndicator(IndicatorType.Inactive);
+    }
+  }, [dirty]);
+
   const history = useHistory();
 
   const title =

package/src/components/InfoPanel/InfoImage/InfoImage.scss

@@ -9,10 +9,15 @@
 
   place-items: center;
 
+  .image,
   .inlineMenu {
-    position: absolute;
-    bottom: 0;
-    right: 0;
+    grid-row: 1;
+    grid-column: 1;
+    align-self: end;
+  }
+
+  .inlineMenu {
+    justify-self: end;
   }
 
   img {

package/src/components/InfoPanel/InfoImage/InfoImage.tsx

@@ -36,6 +36,7 @@ export const InfoImage: React.FC<InfoImageProps> = ({
       data-test-id="info-image"
     >
       <ImageLoader
+        imageClassName={classes.image}
         imgSrc={imgSrc}
         height={420}
         width={419} /*1px border*/

package/src/components/List/List.tsx

@@ -320,7 +320,9 @@ export const List = <T extends Data>({
         horizontalTextAlign={horizontalTextAlign}
         verticalTextAlign={verticalTextAlign}
         showItemCheckbox={
-          enableSelectAll && selectionMode === ListSelectMode.Multi
+          enableSelectAll &&
+          selectionMode === ListSelectMode.Multi &&
+          listItems.length > 0
         }
         isCheckboxDisabled={listItems.length === 0}
         onCheckboxToggled={headerCheckboxHandler}

package/src/components/List/ListCheckBox/ListCheckBox.scss

@@ -9,8 +9,13 @@
 
   .disabled {
     background-color: var(
-      --page-header-action-context-background-color,
-      $page-header-action-context-background-color
-    ) !important;
+      --actions-disabled-bg-color,
+      $actions-disabled-bg-color
+    );
+
+    // background-color: var(
+    //   --page-header-action-context-background-color,
+    //   $page-header-action-context-background-color
+    // ) !important;
   }
 }

package/src/components/List/ListRow/ListRow.scss

@@ -30,10 +30,6 @@
     }
   }
 
-  &.disabled {
-    cursor: not-allowed;
-  }
-
   .cell {
     white-space: nowrap;
     text-overflow: ellipsis;

package/src/components/Loaders/ImageLoader/ImageLoader.tsx

@@ -40,6 +40,9 @@ export interface ImageLoaderProps {
   onImageClick?: (
     event: React.MouseEvent<HTMLImageElement, MouseEvent>,
   ) => void;
+
+  /** CSS Class name for additional img element styles */
+  imageClassName?: string;
 }
 
 /**
@@ -65,6 +68,7 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
   onError = noop,
   onImageClick = noop,
   children,
+  imageClassName = '',
 }) => {
   const actualViewBox = viewBox || `0 0 ${width} ${height}`;
 
@@ -135,6 +139,7 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
             onError={onErrorHandler}
             onClick={onImageClick}
             data-test-id="image-loader-img"
+            className={imageClassName}
           />
           {fallBack &&
             (!fallbackSrc ? (

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.scss

@@ -145,7 +145,6 @@
       --actions-disabled-bg-color,
       $actions-disabled-bg-color
     );
-    cursor: not-allowed;
 
     .pageHeaderActionsIcons {
       polygon,

package/src/components/index.ts

@@ -19,8 +19,8 @@ export * from './List';
 export * from './Loaders';
 export * from './MessageBar';
 export * from './Modal';
-export * from './models';
 export * from './NavigationAwareStation';
 export * from './PageHeader';
 export * from './ProgressBar';
 export * from './Utils';
+export * from './models';

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;