@axinom/mosaic-ui 0.39.1-feat-gs.3 → 0.40.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.39.1-feat-gs.3",
+  "version": "0.40.0-rc.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": "^0.4.13-rc.0",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -103,5 +103,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "gitHead": "7e42eb287fb9e6dd04c88a1ca5955a164c0e3d46"
 }

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

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

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

@@ -11,7 +11,6 @@ export type CreateProps<TValues extends Data, TSubmitResponse = unknown> = Omit<
   | 'defaultTitle'
   | 'titleProperty'
   | 'alwaysSubmitBeforeAction'
-  | 'autosave'
 > & {
   /** The title of the station */
   title: string;
@@ -57,7 +56,7 @@ export const Create = <TValues extends Data, TSubmitResponse = unknown>(
   }
 
   return (
-    <FormStation<TValues, TSubmitResponse>
+    <FormStation
       {...props}
       saveData={(values, initialData, formikHelpers) => {
         if (denyProceeding) {
@@ -66,7 +65,6 @@ 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}
@@ -78,7 +76,6 @@ 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 = Partial<TValues>,
+  TSubmitResponse = unknown,
 > = Omit<
   FormStationProps<TValues, TSubmitResponse>,
   'cancelNavigationUrl' | 'alwaysSubmitBeforeAction'
@@ -23,10 +23,7 @@ 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 = Partial<TValues>,
->(
+export const Details = <TValues extends Data, TSubmitResponse = unknown>(
   props: PropsWithChildren<DetailsProps<TValues, TSubmitResponse>>,
 ): JSX.Element => (
   <FormStation

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

@@ -1,7 +1,6 @@
-import type { FormikHelpers, FormikValues } from 'formik';
-import type { Data } from '../../types';
-import type { ActionData } from '../Actions';
-import type { ErrorType, StationError } from '../models';
+import { FormikValues } from 'formik';
+import { ActionData } from '../Actions';
+import { ErrorType } from '../models';
 
 export interface InitialFormData<T> {
   /** Indicates whether the data is still loading or not */
@@ -23,15 +22,6 @@ 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.
@@ -50,19 +40,3 @@ 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,6 +18,71 @@
     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;
   }
@@ -39,6 +104,11 @@
   &.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,8 +10,7 @@ import { ActionData, Actions } from '../Actions';
 import { Action } from '../Actions/Action';
 import { MessageBar } from '../MessageBar/MessageBar';
 import { PageHeader, PageHeaderAction } from '../PageHeader';
-import { FormStation } from './FormStation';
-import { ObjectSchemaDefinition } from './FormStation.models';
+import { FormStation, ObjectSchemaDefinition } from './FormStation';
 import { SaveOnNavigate } from './SaveOnNavigate/SaveOnNavigate';
 
 jest.mock('../../initialize');

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

@@ -15,7 +15,6 @@ import {
 import {
   CustomTagsField,
   DateTimeTextField,
-  FormikDebug,
   ReadOnlyField,
   SelectField,
   SingleLineTextField,
@@ -27,7 +26,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.models';
+import { ObjectSchemaDefinition } from './FormStation';
 
 const groups = createGroups({
   Content: [
@@ -171,15 +170,6 @@ export const Extended: StoryObj<typeof Details> = (() => {
           list: listData,
           archived: false,
           timestamp: '00:00:00.001',
-          userRoleTagAssignments: {
-            __typename: 'UserRoleTagAssignmentsConnection',
-            nodes: [
-              {
-                __typename: 'UserRoleTagAssignment',
-                tag: 'Test',
-              },
-            ],
-          },
         },
       },
       infoPanel: (
@@ -194,14 +184,6 @@ 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} />
@@ -306,7 +288,6 @@ export const Extended: StoryObj<typeof Details> = (() => {
             mask="00:00:00.000"
             as={MaskedSingleLineTextField}
           />
-          <FormikDebug />
         </>
       ),
     },