@axinom/mosaic-ui 0.39.0-rc.4 → 0.39.1-feat-gs.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.39.0-rc.4",
+  "version": "0.39.1-feat-gs.0",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.12-rc.4",
+    "@axinom/mosaic-core": "workspace:^",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -103,6 +103,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "44934f78046b0d7f65bd36b65cbda4fef52fe65d"
+  }
 }

package/src/components/Actions/Action/Action.scss

@@ -76,6 +76,7 @@
       --page-header-action-disabled-bg-color,
       $page-header-action-disabled-bg-color
     );
+    transition: background-color $confirmation-transition linear;
 
     pointer-events: none;
 

package/src/components/FormElements/Tags/Tags.tsx

@@ -34,7 +34,7 @@ export interface TagsProps<T = string>
 export const Tags = <T,>({
   id,
   name,
-  value = [],
+  value,
   dropDownLabel = '',
   tagsOptions = [],
   disabled = false,
@@ -48,14 +48,14 @@ export const Tags = <T,>({
   className = '',
   ...rest
 }: PropsWithChildren<TagsProps<T>>): JSX.Element => {
-  const [currentTags, setCurrentTags] = useState<string[]>(value); // Current tags the user has selected
+  const [currentTags, setCurrentTags] = useState<string[]>(value ?? []); // Current tags the user has selected
 
   const [shouldAnimate, setShouldAnimate] = useState<boolean>(false);
 
   const ref = useRef<FormEvent<HTMLSelectElement>>();
 
   useEffect(() => {
-    setCurrentTags(value);
+    setCurrentTags(value ?? []);
   }, [value]);
 
   const errorMsg: string | undefined = error;

package/src/components/FormStation/Create/Create.stories.tsx

@@ -13,7 +13,7 @@ import {
   TagsField,
 } from '../../FormElements';
 import { FileUploadField } from '../../FormElements/FileUploadControl/FileUploadField';
-import { ObjectSchemaDefinition } from '../FormStation';
+import { ObjectSchemaDefinition } from '../FormStation.models';
 import { Create } from './Create';
 
 interface CreateValues {
@@ -120,14 +120,6 @@ export const Default: StoryObj<CreateStoryType> = {
     }),
     initialData: {
       loading: false,
-      data: {
-        title: '',
-        genres: [],
-        ratings: '',
-        shortDescription: '',
-        longDescription: '',
-        cast: [],
-      },
     },
     cancelNavigationUrl: '/',
   },

package/src/components/FormStation/Create/Create.tsx

@@ -11,6 +11,7 @@ export type CreateProps<TValues extends Data, TSubmitResponse = unknown> = Omit<
   | 'defaultTitle'
   | 'titleProperty'
   | 'alwaysSubmitBeforeAction'
+  | 'autosave'
 > & {
   /** The title of the station */
   title: string;
@@ -56,7 +57,7 @@ export const Create = <TValues extends Data, TSubmitResponse = unknown>(
   }
 
   return (
-    <FormStation
+    <FormStation<TValues, TSubmitResponse>
       {...props}
       saveData={(values, initialData, formikHelpers) => {
         if (denyProceeding) {
@@ -65,6 +66,7 @@ export const Create = <TValues extends Data, TSubmitResponse = unknown>(
               'Unable to navigate away with pending changes still on the form.',
           };
         }
+
         return props.saveData(values, initialData, formikHelpers);
       }}
       defaultTitle={props.title}
@@ -76,6 +78,7 @@ export const Create = <TValues extends Data, TSubmitResponse = unknown>(
         },
       ]}
       alwaysSubmitBeforeAction={true}
+      autosave={false}
     ></FormStation>
   );
 };

package/src/components/FormStation/Details/Details.tsx

@@ -4,7 +4,7 @@ import { FormStation, FormStationProps } from '../FormStation';
 
 export type DetailsProps<
   TValues extends Data,
-  TSubmitResponse = unknown,
+  TSubmitResponse = Partial<TValues>,
 > = Omit<
   FormStationProps<TValues, TSubmitResponse>,
   'cancelNavigationUrl' | 'alwaysSubmitBeforeAction'
@@ -23,7 +23,10 @@ export type DetailsProps<
  * In addition, it allows the definition of `actions`, which will be presented to the user in the appropriate panel.
  * The component uses the `onActionSelected` callback to notify the application when an action needs to be executed by the application.
  */
-export const Details = <TValues extends Data, TSubmitResponse = unknown>(
+export const Details = <
+  TValues extends Data,
+  TSubmitResponse = Partial<TValues>,
+>(
   props: PropsWithChildren<DetailsProps<TValues, TSubmitResponse>>,
 ): JSX.Element => (
   <FormStation

package/src/components/FormStation/FormContentWrapper/FormContentWrapper.scss

@@ -0,0 +1,66 @@
+@import '../../../styles/common.scss';
+
+// Extend all components, except PageHeader, to the bottom
+// Enable scrolling children
+.children {
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: 1fr auto;
+
+  overflow: hidden;
+
+  .main {
+    display: grid;
+    grid: 1fr / minmax(740px, 1fr) auto;
+
+    overflow-y: auto;
+    scrollbar-width: thin; //for Firefox only
+
+    .formWrapper {
+      display: grid;
+      grid: 1fr / 1fr;
+
+      &.hasMessage {
+        grid: min-content 1fr / 1fr;
+      }
+    }
+  }
+
+  //Custom scrollbar for Chrome, Safari and Edge
+  ::-webkit-scrollbar {
+    width: var(--scrollbar-size, $scrollbar-size);
+    height: var(--scrollbar-size, $scrollbar-size);
+  }
+  ::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-color, $scrollbar-track-color);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb-color, $scrollbar-thumb-color);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(
+      --scrollbar-thumb-hover-color,
+      $scrollbar-thumb-hover-color
+    );
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: var(--scrollbar-corner-color, $scrollbar-corner-color);
+  }
+
+  .formContainer {
+    padding: 30px;
+  }
+
+  .loadingError {
+    display: grid;
+    grid: 1fr / 1fr;
+  }
+}
+
+.errorMessage {
+  grid-row: 2 / 3;
+  grid-column: 1 / -1;
+}

package/src/components/FormStation/FormContentWrapper/FormContentWrapper.tsx

@@ -0,0 +1,77 @@
+import clsx from 'clsx';
+import { Form } from 'formik';
+import React from 'react';
+import type { Data } from '../../../types';
+import { MessageBar } from '../../MessageBar';
+import type { FormStationProps } from '../FormStation';
+import type { StationErrorStateType } from '../FormStation.models';
+import classes from './FormContentWrapper.scss';
+
+interface FormContentWrapperProps
+  extends Pick<
+    FormStationProps<Data>,
+    'stationMessage' | 'edgeToEdgeContent' | 'infoPanel' | 'initialData'
+  > {
+  stationError?: StationErrorStateType;
+  setStationError: React.Dispatch<
+    React.SetStateAction<StationErrorStateType | undefined>
+  >;
+}
+
+export const FormContentWrapper: React.FC<FormContentWrapperProps> = ({
+  stationMessage,
+  edgeToEdgeContent,
+  infoPanel,
+  initialData,
+  stationError,
+  setStationError,
+  children,
+}) => (
+  <>
+    {stationError && (
+      <div className={classes.errorMessage}>
+        <MessageBar
+          type="error"
+          title={String(stationError.title)}
+          onClose={() => setStationError(undefined)}
+        >
+          {stationError?.body}
+        </MessageBar>
+      </div>
+    )}
+    {initialData.loading ? (
+      // TODO: Loading skeleton of the page
+      <></>
+    ) : initialData.error ||
+      initialData.data === null ||
+      initialData.entityNotFound ? (
+      // Error on loading - we can't show the form
+      <div className={classes.loadingError}></div>
+    ) : (
+      <div className={classes.children}>
+        <div className={classes.main}>
+          <div
+            className={clsx(classes.formWrapper, {
+              [classes.hasMessage]: stationMessage,
+            })}
+          >
+            {stationMessage && <MessageBar {...stationMessage} />}
+            <div
+              className={clsx({
+                [classes.formContainer]: !edgeToEdgeContent,
+              })}
+            >
+              <Form>
+                {children}
+                {/* Adding a invisible text input here to prevent the browser from submitting on "Enter" when there is only a single text input field in the form
+            See: https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2 */}
+                <input type="text" style={{ display: 'none' }} />
+              </Form>
+            </div>
+          </div>
+          {infoPanel}
+        </div>
+      </div>
+    )}
+  </>
+);

package/src/components/FormStation/FormStation.models.ts

@@ -1,6 +1,7 @@
-import { FormikValues } from 'formik';
-import { ActionData } from '../Actions';
-import { ErrorType } from '../models';
+import type { FormikHelpers, FormikValues } from 'formik';
+import type { Data } from '../../types';
+import type { ActionData } from '../Actions';
+import type { ErrorType, StationError } from '../models';
 
 export interface InitialFormData<T> {
   /** Indicates whether the data is still loading or not */
@@ -22,6 +23,15 @@ export interface InitialFormData<T> {
   error?: ErrorType;
 }
 
+export type SaveDataFunction<TValues, TSubmitResponse> = (
+  /** The current values of the form */
+  values: TValues,
+  /** The initial values of the form */
+  initialData: InitialFormData<TValues>,
+  /** The Formik state helpers */
+  formikHelpers: FormikHelpers<TValues>,
+) => Promise<TSubmitResponse | void> | void;
+
 /**
  * A function to handle an action execution on a FormStation.
  * If action can not be performed, an error can be thrown which will then be displayed by the FormStation.
@@ -40,3 +50,19 @@ export type FormActionData<
   TValues = FormikValues,
   TSubmitResponse = unknown,
 > = ActionData<ActionHandler<TValues, TSubmitResponse>>;
+
+export type ObjectSchemaDefinition<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  T extends Data | null = any,
+> = {
+  // TODO: Adding 'any' here since there are a couple of open issues regarding generics in the latest version of yup.
+  // https://github.com/jquense/yup/issues/1159
+  // https://github.com/jquense/yup/issues/1247
+  // Consider revisiting once 'yup' has addressed these issues.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [field in keyof T]: any;
+};
+
+export interface StationErrorStateType extends StationError {
+  type?: string;
+}

package/src/components/FormStation/FormStation.scss

@@ -18,71 +18,6 @@
     grid-row: 1 / 2;
   }
 
-  // Extend all components, except PageHeader, to the bottom
-  // Enable scrolling children
-  .children {
-    grid-row: 2 / -1;
-    overflow-y: auto;
-    display: grid;
-    grid-template-columns: 1fr auto;
-
-    overflow: hidden;
-    overflow-x: auto;
-
-    .main {
-      display: grid;
-      grid: 1fr / minmax(740px, 1fr) auto;
-
-      overflow-y: auto;
-      scrollbar-width: thin; //for Firefox only
-
-      .formWrapper {
-        display: grid;
-        grid: 1fr / 1fr;
-
-        &.hasMessage {
-          grid: min-content 1fr / 1fr;
-        }
-      }
-    }
-
-    //Custom scrollbar for Chrome, Safari and Edge
-    ::-webkit-scrollbar {
-      width: var(--scrollbar-size, $scrollbar-size);
-      height: var(--scrollbar-size, $scrollbar-size);
-    }
-    ::-webkit-scrollbar-track {
-      background: var(--scrollbar-track-color, $scrollbar-track-color);
-    }
-
-    ::-webkit-scrollbar-thumb {
-      background: var(--scrollbar-thumb-color, $scrollbar-thumb-color);
-    }
-
-    ::-webkit-scrollbar-thumb:hover {
-      background: var(
-        --scrollbar-thumb-hover-color,
-        $scrollbar-thumb-hover-color
-      );
-    }
-
-    ::-webkit-scrollbar-corner {
-      background: var(--scrollbar-corner-color, $scrollbar-corner-color);
-    }
-
-    .formContainer {
-      overflow-x: hidden;
-    }
-
-    .paddedContent {
-      padding: 30px;
-    }
-
-    .loadingError {
-      display: grid;
-      grid: 1fr / 1fr;
-    }
-  }
   .actionsPanel {
     overflow: auto;
   }
@@ -104,11 +39,6 @@
   &.hasError {
     grid-template-rows: min-content min-content 1fr;
 
-    .errorMessage {
-      grid-row: 2 / 3;
-      grid-column: 1 / -1;
-    }
-
     .children {
       grid-row: 3 / 4;
       grid-column: 1 / 2;

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

@@ -10,7 +10,8 @@ import { ActionData, Actions } from '../Actions';
 import { Action } from '../Actions/Action';
 import { MessageBar } from '../MessageBar/MessageBar';
 import { PageHeader, PageHeaderAction } from '../PageHeader';
-import { FormStation, ObjectSchemaDefinition } from './FormStation';
+import { FormStation } from './FormStation';
+import { ObjectSchemaDefinition } from './FormStation.models';
 import { SaveOnNavigate } from './SaveOnNavigate/SaveOnNavigate';
 
 jest.mock('../../initialize');

package/src/components/FormStation/FormStation.stories.tsx

@@ -15,6 +15,7 @@ import {
 import {
   CustomTagsField,
   DateTimeTextField,
+  FormikDebug,
   ReadOnlyField,
   SelectField,
   SingleLineTextField,
@@ -26,7 +27,7 @@ import { MaskedSingleLineTextField } from '../FormElements/MaskedSingleLineText/
 import { InfoPanel, Paragraph, Section } from '../InfoPanel';
 import { ErrorType } from '../models';
 import { Details, DetailsProps } from './Details/Details';
-import { ObjectSchemaDefinition } from './FormStation';
+import { ObjectSchemaDefinition } from './FormStation.models';
 
 const groups = createGroups({
   Content: [
@@ -170,6 +171,15 @@ export const Extended: StoryObj<typeof Details> = (() => {
           list: listData,
           archived: false,
           timestamp: '00:00:00.001',
+          userRoleTagAssignments: {
+            __typename: 'UserRoleTagAssignmentsConnection',
+            nodes: [
+              {
+                __typename: 'UserRoleTagAssignment',
+                tag: 'Test',
+              },
+            ],
+          },
         },
       },
       infoPanel: (
@@ -184,6 +194,14 @@ export const Extended: StoryObj<typeof Details> = (() => {
           </Section>
         </InfoPanel>
       ),
+      saveData: (...args) => {
+        action('saveData')(args);
+        return new Promise<APIResponse>((resolve) => {
+          setTimeout(() => {
+            resolve({ status: 'ok' });
+          }, 100);
+        });
+      },
       children: (
         <>
           <Field name="id" label="Id" as={ReadOnlyField} />
@@ -288,6 +306,7 @@ export const Extended: StoryObj<typeof Details> = (() => {
             mask="00:00:00.000"
             as={MaskedSingleLineTextField}
           />
+          <FormikDebug />
         </>
       ),
     },