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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.42.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.15",
+    "@axinom/mosaic-core": "^0.4.16-rc.1",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -43,6 +43,7 @@
     "react-content-loader": "^6.0.3",
     "react-imask": "^6.4.3",
     "react-popper": "^2.2.5",
+    "react-tabs": "4.3.0",
     "react-transition-group": "^4.3.0",
     "yup": "^0.32.11"
   },
@@ -104,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dcabfd315342d0d428c437a1e0915f080c38ea9f"
+  "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

@@ -24,9 +24,11 @@ import { CheckboxField } from '../FormElements/Checkbox/CheckboxField';
 import { DynamicDataListField } from '../FormElements/DynamicDataListControl/DynamicDataListField';
 import { MaskedSingleLineTextField } from '../FormElements/MaskedSingleLineText/MaskedSingleLineTextField';
 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: [
@@ -294,6 +296,169 @@ export const Extended: StoryObj<typeof Details> = (() => {
   };
 })();
 
+export const TabbedContent: StoryObj<typeof Details> = (() => {
+  const listData = generateItemArray(4, (index) => ({
+    position: index + 1,
+    id: index,
+    locale: faker.random.locale(),
+    country: faker.address.country(),
+  }));
+  return {
+    args: {
+      titleProperty: 'title',
+      subtitle: 'Movies',
+      actions: generateActions(7),
+      validationSchema: Yup.object<ObjectSchemaDefinition<DetailsValues>>({
+        title: Yup.string().required().max(25).label('Title'),
+        genres: Yup.array<DetailsValues>()
+          .of(Yup.string())
+          .max(2)
+          .label('Genres'),
+        shortDescription: Yup.string().required().label('Short Description'),
+        cast: Yup.array<DetailsValues>().of(Yup.string()).min(1).label('Cast'),
+      }),
+      initialData: {
+        loading: false,
+        data: {
+          id: 12344567890,
+          title: 'My Movie',
+          publishState: 'PUBLISHED',
+          genres: [],
+          licenses: [],
+          ratings: 'PG-13',
+          shortDescription: 'Some short abstract...',
+          longDescription: '',
+          cast: ['Jane Doe', 'John Doe'],
+          released: '2020-04-03T00:00:00.000+00:00',
+          list: listData,
+          archived: false,
+          timestamp: '00:00:00.001',
+        },
+      },
+      children: (
+        <Tabs>
+          <TabList>
+            <Tab>Tab 1</Tab>
+            <Tab>Tab 2</Tab>
+          </TabList>
+          <TabPanel>
+            <FormGrid>
+              <Field name="id" label="Id" as={ReadOnlyField} />
+              <Field name="title" label="Title" as={SingleLineTextField} />
+              <Field
+                name="publishState"
+                label="Publish State"
+                as={ReadOnlyField}
+              />
+              <Field
+                name="genres"
+                label="Genre(s)"
+                tagsOptions={['Crime', 'Drama', 'Thriller']}
+                as={TagsField}
+              />
+
+              <Field
+                name="ratings"
+                label="Age Rating"
+                options={[
+                  { value: 'PG', label: 'Parental Guidance Suggested (PG)' },
+                  {
+                    value: 'PG-13',
+                    label: 'Parents Strongly Cautioned (PG-13)',
+                  },
+                  { value: 'R', label: 'Restricted (R)' },
+                ]}
+                as={SelectField}
+              />
+
+              <Field
+                name="shortDescription"
+                label="Short Description"
+                placeholder="Enter a short description..."
+                as={SingleLineTextField}
+              />
+              <Field
+                name="longDescription"
+                label="Long Description"
+                placeholder="Enter a description..."
+                as={SingleLineTextField}
+              />
+              <Field name="cast" label="Cast" as={CustomTagsField} />
+              <Field name="released" label="Released" as={DateTimeTextField} />
+              <Field
+                name="password"
+                label="Password"
+                as={SingleLineTextField}
+                type="password"
+              />
+
+              <Field
+                name="licenses"
+                label="License Countries"
+                tagsOptions={[
+                  { value: 'DE', key: 'Germany' },
+                  { value: 'EE', key: 'Estonia' },
+                  { value: 'LK', key: 'Sri Lanka' },
+                ]}
+                as={TagsField}
+                displayKey="key"
+                valueKey="value"
+              />
+              <Field
+                name="list"
+                label="Subtitles"
+                columns={[
+                  {
+                    propertyName: 'id',
+                    label: 'Id',
+                    size: '50px',
+                  },
+                  {
+                    propertyName: 'locale',
+                    label: 'Locale',
+                    dataEntryRender: createInputRenderer({
+                      placeholder: 'Enter Locale',
+                    }),
+                  },
+                  {
+                    propertyName: 'country',
+                    label: 'Country',
+                    dataEntryRender: createSelectRenderer({
+                      options: [
+                        { value: 'Country 10', label: 'Country 10' },
+                        { value: 'Country 11', label: 'Country 11' },
+                        { value: 'Country 12', label: 'Country 12' },
+                      ],
+                      placeholder: 'Enter Country',
+                    }),
+                  },
+                ]}
+                data={listData}
+                positionPropertyName={'position'}
+                allowReordering={true}
+                allowRowDragging={true}
+                allowNewData={true}
+                as={DynamicDataListField}
+              />
+              <Field name="archived" label="Set Archived" as={CheckboxField} />
+              <Field
+                name="timestamp"
+                label="Timestamp"
+                mask="00:00:00.000"
+                as={MaskedSingleLineTextField}
+              />
+            </FormGrid>
+          </TabPanel>
+          <TabPanel>
+            <h2>Tab 2</h2>
+            <p>{faker.lorem.paragraph(20)}</p>
+          </TabPanel>
+        </Tabs>
+      ),
+    },
+  };
+})();
+
 const errorGroups = createGroups({
   'Storybook (Loading Error)': [
     'loadingError',