@axinom/mosaic-ui 0.43.0-rc.0 → 0.43.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.43.0-rc.0",
+  "version": "0.43.0-rc.1",
   "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.16-rc.0",
+    "@axinom/mosaic-core": "^0.4.16-rc.1",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -105,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b1b5a9a050664bc07d31401fec2b0f58b5c88f4b"
+  "gitHead": "efd204f4dc34b7717040a0105d2e148e8ad5ae17"
 }

package/src/components/FormStation/FormGrid/FormGrid.scss

@@ -0,0 +1,10 @@
+.container {
+  padding: 30px;
+}
+
+.content {
+  display: grid;
+  grid-auto-rows: max-content;
+  grid-template-columns: 1fr;
+  row-gap: 20px;
+}

package/src/components/FormStation/FormGrid/FormGrid.tsx

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+import React from 'react';
+import classes from './FormGrid.scss';
+
+interface FormGridProps {
+  edgeToEdgeContent?: boolean;
+}
+
+export const FormGrid: React.FC<FormGridProps> = ({
+  children,
+  edgeToEdgeContent,
+}) => {
+  return (
+    <div
+      className={clsx(
+        {
+          [classes.container]: !edgeToEdgeContent,
+        },
+        classes.content,
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/FormStation/FormGrid/index.ts

@@ -0,0 +1 @@
+export * from './FormGrid';

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

@@ -1,6 +1,7 @@
-import { FormikValues } from 'formik';
+import { FormikHelpers, FormikValues } from 'formik';
+import { Data } from '../../types';
 import { ActionData } from '../Actions';
-import { ErrorType } from '../models';
+import { 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;
+
 /**
  * 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

@@ -13,85 +13,15 @@
   background-color: var(--details-background-color, $details-background-color);
 
   // Place PageHeader at the top
-  > div:first-child {
+  .header {
     grid-column: 1 / -1;
     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;
   }
 
-  .children {
-    grid-row: 2 / 3;
-    grid-column: 1 / 2;
-  }
-
   .actionsPanel {
     grid-row: 2 / 3;
     grid-column: 2 / 3;
@@ -104,55 +34,9 @@
   &.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;
-    }
-
     .actionsPanel {
       grid-row: 3 / 4;
       grid-column: 2 / 3;
     }
   }
-
-  form {
-    display: grid;
-    grid-auto-rows: max-content;
-    grid-template-columns: 1fr;
-    row-gap: 20px;
-  }
-}
-
-.indicator {
-  display: grid;
-  grid-template-columns: auto 20px;
-  font-weight: bold;
-  color: var(--form-indicator-color, $form-indicator-color);
-
-  &::after {
-    overflow: hidden;
-    display: inline-block;
-    vertical-align: bottom;
-    -webkit-animation: ellipsis steps(4, end) 900ms infinite;
-    animation: ellipsis steps(4, end) 900ms infinite;
-    content: '\2026'; /* ascii code for the ellipsis character */
-    width: 0px;
-  }
-}
-
-@keyframes ellipsis {
-  to {
-    width: 1.25em;
-  }
-}
-
-@-webkit-keyframes ellipsis {
-  to {
-    width: 1.25em;
-  }
 }

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

@@ -27,7 +27,8 @@ import { InfoPanel, Paragraph, Section } from '../InfoPanel';
 import { Tab, TabList, TabPanel, Tabs } from '../Tabs';
 import { ErrorType } from '../models';
 import { Details, DetailsProps } from './Details/Details';
-import { ObjectSchemaDefinition } from './FormStation';
+import { FormGrid } from './FormGrid';
+import { ObjectSchemaDefinition } from './FormStation.models';
 
 const groups = createGroups({
   Content: [
@@ -341,15 +342,7 @@ export const TabbedContent: StoryObj<typeof Details> = (() => {
             <Tab>Tab 2</Tab>
           </TabList>
           <TabPanel>
-            <div
-              style={{
-                display: 'grid',
-                gridAutoRows: 'max-content',
-                rowGap: '20px',
-                paddingTop: '20px',
-                paddingBottom: '20px',
-              }}
-            >
+            <FormGrid>
               <Field name="id" label="Id" as={ReadOnlyField} />
               <Field name="title" label="Title" as={SingleLineTextField} />
               <Field
@@ -454,7 +447,7 @@ export const TabbedContent: StoryObj<typeof Details> = (() => {
                 mask="00:00:00.000"
                 as={MaskedSingleLineTextField}
               />
-            </div>
+            </FormGrid>
           </TabPanel>
           <TabPanel>
             <h2>Tab 2</h2>