@axinom/mosaic-ui 0.51.0-rc.9 → 0.52.0-rc.0

package/dist/initialize.d.ts

@@ -8,8 +8,8 @@ export declare let showNotification: ShowNotification | (() => void);
 export declare let addIndicator: AddIndicator | (() => void);
 export declare let removeIndicator: RemoveIndicator | (() => void);
 export declare let on: CustomEventEmitter['on'] | (() => void);
-export declare let setSaveIndicator: (type: SaveIndicatorType) => void;
 export declare let setTitle: (title?: string) => void;
+export declare let setSaveIndicator: (type: SaveIndicatorType) => void;
 /**
  * Passes the PiralApi methods to the UI library.
  * @param app {UiConfig} object containing PiralApi methods for use in UI library.

package/dist/initialize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../src/initialize.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAE3B,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,KAAK,UAAU;CAChB;AAED,eAAO,IAAI,gBAAgB,EAAE,gBAAgB,GAAG,CAAC,MAAM,IAAI,CAC7B,CAAC;AAE/B,eAAO,IAAI,YAAY,EAAE,YAAY,GAAG,CAAC,MAAM,IAAI,CAA4B,CAAC;AAEhF,eAAO,IAAI,eAAe,EAAE,eAAe,GAAG,CAAC,MAAM,IAAI,CAC5B,CAAC;AAE9B,eAAO,IAAI,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAkB,CAAC;AAExE,eAAO,IAAI,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAC5B,CAAC;AAE/B,eAAO,IAAI,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAA2B,CAAC;AAErE;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAShD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,eAAe,CAAC;IACjC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC"}
+{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../src/initialize.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAE3B,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,KAAK,UAAU;CAChB;AAED,eAAO,IAAI,gBAAgB,EAAE,gBAAgB,GAAG,CAAC,MAAM,IAAI,CAC7B,CAAC;AAE/B,eAAO,IAAI,YAAY,EAAE,YAAY,GAAG,CAAC,MAAM,IAAI,CAA4B,CAAC;AAEhF,eAAO,IAAI,eAAe,EAAE,eAAe,GAAG,CAAC,MAAM,IAAI,CAC5B,CAAC;AAE9B,eAAO,IAAI,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAkB,CAAC;AAExE,eAAO,IAAI,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAA2B,CAAC;AAErE,eAAO,IAAI,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAC5B,CAAC;AAE/B;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAShD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,eAAe,CAAC;IACjC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.51.0-rc.9",
+  "version": "0.52.0-rc.0",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,8 +32,9 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.24-rc.9",
+    "@axinom/mosaic-core": "^0.4.25-rc.0",
     "@faker-js/faker": "^7.4.0",
+    "@geoffcox/react-splitter": "^2.1.2",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
     "lodash": "^4.17.21",
@@ -105,5 +106,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "de01159b463c02e37f1ee997ccbc42a854873b1d"
+  "gitHead": "40b2eedf8826a60afe1edd6e37dd6e12c0c3254a"
 }

package/src/components/EmptyStation/EmptyStation.spec.tsx

@@ -1,11 +1,35 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
+import { noop } from '../../helpers/utils';
+import { initializeUi } from '../../initialize';
 import { MessageBar } from '../MessageBar';
 import { PageHeader } from '../PageHeader';
 import { StationError } from '../models';
 import { EmptyStation, EmptyStationProps } from './EmptyStation';
 
 describe('EmptyStation', () => {
+  global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  }));
+
+  beforeEach(() => {
+    initializeUi({
+      showNotification: () => {
+        // not implemented
+        return -1;
+      },
+      addIndicator: () => {
+        return -1;
+      },
+      removeIndicator: noop,
+      on: noop,
+      setTitle: noop,
+      setSaveIndicator: noop,
+    });
+  });
+
   const defaultProps: EmptyStationProps = {
     title: 'test-title',
     subtitle: 'test-subtitle',

package/src/components/Explorer/ConditionalSplit/ConditionalSplit.tsx

@@ -0,0 +1,23 @@
+import { Split, SplitProps } from '@geoffcox/react-splitter';
+import React from 'react';
+
+interface ConditionalSplitProps extends React.PropsWithChildren<SplitProps> {
+  shouldSplit?: boolean;
+}
+
+export const ConditionalSplit: React.FC<ConditionalSplitProps> = ({
+  shouldSplit = true,
+  children,
+  ...rest
+}) => {
+  return (
+    <Split
+      initialPrimarySize={shouldSplit ? '50%' : '100%'}
+      minPrimarySize={shouldSplit ? '0' : '100%'}
+      splitterSize={shouldSplit ? '7px' : '0'}
+      {...rest}
+    >
+      {children}
+    </Split>
+  );
+};

package/src/components/Explorer/Explorer.model.ts

@@ -1,8 +1,10 @@
+import { LocationDescriptor } from 'history';
 import { Data } from '../../types/data';
 import { FilterValues } from '../Filters';
+import { IconName } from '../Icons';
 import { SortData } from '../List';
-import { ErrorType } from '../models';
 import { PageHeaderJsActionProps } from '../PageHeader/PageHeaderAction/PageHeaderAction.model';
+import { ErrorType } from '../models';
 
 /**
  * Item selection can have two modes:
@@ -105,3 +107,19 @@ export interface ExplorerStateOptions {
   filters?: boolean;
   sort?: boolean;
 }
+
+export interface QuickEditRegistration<T> {
+  /** The label of the action. */
+  label: string;
+  /** Optional built in icon. This prop also accepts an img src. */
+  icon?: IconName | string;
+  /** Component to render */
+  component: JSX.Element;
+  /** Function which will be used to generate the `detailsLink` in `QuickEditContext`.
+   *
+   * If set to `undefined`, `generateItemLink` prop from `Explorer` will be used.
+   *
+   * If set to `false`, `detailsLink` will not be generated.
+   */
+  generateDetailsLink?: ((item: T) => LocationDescriptor<unknown>) | false;
+}

package/src/components/Explorer/Explorer.scss

@@ -76,4 +76,8 @@
     width: calc(100vw - 30px - 30px);
     height: calc(100vh - #{$header-height} - 30px);
   }
+
+  .filtersHidden {
+    grid-column: 1 / -1;
+  }
 }

package/src/components/Explorer/Explorer.spec.tsx

@@ -13,6 +13,7 @@ import {
 import { noop } from '../../helpers/utils';
 import * as expandHook from '../../hooks/useExpand/useExpand';
 import * as app from '../../initialize';
+import { initializeUi } from '../../initialize';
 import { Data } from '../../types/data';
 import { ActionData } from '../Actions';
 import { Filters } from '../Filters/Filters';
@@ -32,7 +33,7 @@ import {
   ExplorerDataProvider,
   ExplorerDataProviderConnection,
 } from './Explorer.model';
-import { StationMessage } from './useStationMessage';
+import { StationMessage } from './helpers/useStationMessage';
 
 jest.mock('../../utils/GenerateId', () => ({
   uuid: jest.fn().mockReturnValue('test-uuid'),
@@ -73,6 +74,30 @@ const getDataProvider = function <T extends Data = ExplorerTestData>() {
 };
 
 describe('Explorer', () => {
+  global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  }));
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    initializeUi({
+      showNotification: () => {
+        // not implemented
+        return -1;
+      },
+      addIndicator: () => {
+        return -1;
+      },
+      removeIndicator: noop,
+      on: noop,
+      setTitle: noop,
+      setSaveIndicator: noop,
+    });
+  });
+
   it('renders the component without crashing', () => {
     const [provider] = getDataProvider();
     const wrapper = shallow(
@@ -1865,8 +1890,8 @@ describe('Explorer', () => {
       };
       const getStateSpy = jest
         .spyOn(GS, 'getState')
-        .mockReturnValueOnce(mockInitialState['mock-key']['filters'])
-        .mockReturnValueOnce(mockInitialState['mock-key']['sort']);
+        .mockReturnValueOnce(mockInitialState['mock-key']['sort'])
+        .mockReturnValueOnce(mockInitialState['mock-key']['filters']);
 
       const wrapper = await actWithReturn(() =>
         mount(

package/src/components/Explorer/Explorer.stories.tsx

@@ -1,8 +1,10 @@
 import { faker } from '@faker-js/faker';
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
+import { Field } from 'formik';
+import React, { useContext } from 'react';
 import { MemoryRouter } from 'react-router';
+import * as Yup from 'yup';
 import {
   createGroups,
   enumToObj,
@@ -11,13 +13,20 @@ import {
 } from '../../helpers/storybook';
 import { initializeUi } from '../../initialize';
 import { FilterTypes } from '../Filters/Filters.model';
+import { ReadOnlyField, SingleLineTextField } from '../FormElements';
+import {
+  FormStation,
+  InitialFormData,
+  ObjectSchemaDefinition,
+} from '../FormStation';
 import { IconName } from '../Icons';
 import { ListSelectMode } from '../List';
 import { Explorer } from './Explorer';
+import { QuickEditContext } from './QuickEdit/QuickEditContext';
 import {
   createInMemoryDataProvider,
   findAnywhereInStringCaseInsensitive,
-} from './InMemoryDataProvider';
+} from './helpers/InMemoryDataProvider';
 
 interface ExplorerStoryData {
   id: number;
@@ -74,6 +83,14 @@ const groups = createGroups({
 const meta: Meta<ExplorerStoryType> = {
   title: 'Primary Components/Station Controls/Explorer',
   component: Explorer,
+  decorators: [
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
   argTypes: {
     ...groups,
     selectionMode: {
@@ -247,15 +264,15 @@ initializeUi({
   removeIndicator: (args) => {
     action('removeIndicator')(args);
   },
-  setSaveIndicator: () => {
-    action('setSaveIndicator')();
-  },
   on: (event, callback) => {
     action('on')(event, callback);
   },
   setTitle: (args) => {
     action('setTitle')(args);
   },
+  setSaveIndicator: (args) => {
+    action('setSaveIndicator')(args);
+  },
 });
 
 export const ActionErrors: StoryObj<ExplorerStoryType> = {
@@ -399,3 +416,71 @@ export const DataProviderConnection: StoryObj<ExplorerStoryType> = {
     },
   },
 };
+
+const QuickEditComponent: React.FC = () => {
+  const { selectedItem } = useContext(QuickEditContext);
+
+  return (
+    <FormStation<ExplorerStoryData>
+      initialData={{ loading: false, data: selectedItem }}
+      titleProperty={'title'}
+      saveData={function (
+        values: ExplorerStoryData,
+        initialData: InitialFormData<ExplorerStoryData>,
+      ): void | Promise<unknown> {
+        action('Save')(values, initialData);
+      }}
+      validationSchema={Yup.object<ObjectSchemaDefinition<ExplorerStoryData>>({
+        title: Yup.string()
+          .max(10, 'Title can only be 10 characters')
+          .required('Title is required'),
+        id: Yup.number().optional(),
+        desc: Yup.string().optional(),
+      })}
+    >
+      <>
+        <Field name="id" label="Id" as={ReadOnlyField} />
+        <Field name="title" label="Title" as={SingleLineTextField} />
+      </>
+    </FormStation>
+  );
+};
+
+const QuickEditComponent2: React.FC = () => {
+  const { selectedItem } = useContext(QuickEditContext);
+
+  return (
+    <FormStation<ExplorerStoryData>
+      initialData={{ loading: false, data: selectedItem }}
+      titleProperty={'title'}
+      saveData={function (
+        values: ExplorerStoryData,
+        initialData: InitialFormData<ExplorerStoryData>,
+      ): void | Promise<unknown> {
+        action('Save')(values, initialData);
+      }}
+    >
+      <>
+        <Field name="id" label="Id" as={ReadOnlyField} />
+        <Field name="desc" label="Description" as={SingleLineTextField} />
+      </>
+    </FormStation>
+  );
+};
+
+export const QuickEdit: StoryObj<ExplorerStoryType> = {
+  args: {
+    ...Default.args,
+    stationKey: 'StoryBookExplorer_QuickEdit',
+    quickEditRegistrations: [
+      {
+        label: 'Quick Edit (Title)',
+        component: <QuickEditComponent />,
+      },
+      {
+        label: 'Quick Edit (Description)',
+        component: <QuickEditComponent2 />,
+      },
+    ],
+  },
+};