@axinom/mosaic-ui 0.26.0-rc.9 → 0.26.1

package/dist/initialize.d.ts

@@ -0,0 +1,11 @@
+import { ShowNotification } from './types/ui-config';
+export declare let showNotification: ShowNotification | (() => void);
+/**
+ * Passes the PiralApi methods to the UI library.
+ * @param app {UiConfig} object containing PiralApi methods for use in UI library.
+ */
+export declare function initializeUi(app: UiConfig): void;
+export interface UiConfig {
+    showNotification: ShowNotification;
+}
+//# sourceMappingURL=initialize.d.ts.map

package/dist/initialize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../src/initialize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,IAAI,gBAAgB,EAAE,gBAAgB,GAAG,CAAC,MAAM,IAAI,CAC7B,CAAC;AAE/B;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAEhD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;CACpC"}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ui-config';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/types/ui-config.d.ts

@@ -0,0 +1,20 @@
+import { Component, ReactNode } from 'react';
+export declare type ShowNotification = (notification: Notification) => NotificationId;
+export declare type UpdateNotification = (id: NotificationId, notification: Notification) => void;
+export declare type DismissNotification = (id: NotificationId) => void;
+export interface Notification {
+    /** Title shown in toast messages header */
+    title: string;
+    /** Optional body of the notification */
+    body?: NotificationBody;
+    /** Additional options for the notification */
+    options?: NotificationOptions;
+}
+export interface NotificationOptions {
+    type?: NotificationType;
+    autoClose?: number | false;
+}
+export declare type NotificationId = string | number;
+export declare type NotificationBody = string | ReactNode | Component;
+export declare type NotificationType = 'success' | 'error' | 'info' | 'warning';
+//# sourceMappingURL=ui-config.d.ts.map

package/dist/types/ui-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-config.d.ts","sourceRoot":"","sources":["../../src/types/ui-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,oBAAY,gBAAgB,GAAG,CAAC,YAAY,EAAE,YAAY,KAAK,cAAc,CAAC;AAE9E,oBAAY,kBAAkB,GAAG,CAC/B,EAAE,EAAE,cAAc,EAClB,YAAY,EAAE,YAAY,KACvB,IAAI,CAAC;AAEV,oBAAY,mBAAmB,GAAG,CAAC,EAAE,EAAE,cAAc,KAAK,IAAI,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B;AAED,oBAAY,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;AAE7C,oBAAY,gBAAgB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAE9D,oBAAY,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.26.0-rc.9",
+  "version": "0.26.1",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "build-storybook -s ./.storybook/static"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.3.0-rc.9",
+    "@axinom/mosaic-core": "^0.3.0",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9d74a14d2f82f48bfdf530cf3e9164ee9192e02b"
+  "gitHead": "90efdcc98420ade859329a8f89863ab64ed4354a"
 }

package/src/components/Buttons/Button/Button.tsx

@@ -14,59 +14,64 @@ export interface ButtonProps extends BaseButtonOptions {
   icon?: IconName;
 }
 
+const ButtonElement: React.ForwardRefRenderFunction<
+  HTMLButtonElement,
+  ButtonProps
+> = (
+  {
+    type = 'button',
+    height,
+    width,
+    buttonContext = ButtonContext.Navigation,
+    disabled = false,
+    icon,
+    className = '',
+    dataTestId = undefined,
+    onButtonClicked = noop,
+    onBlur,
+  },
+  ref,
+) => {
+  const customStyles = {
+    height: height,
+    width: width,
+  } as React.CSSProperties;
+
+  return (
+    <button
+      ref={ref}
+      className={clsx(
+        classes.container,
+        { [classes.navigation]: buttonContext === ButtonContext.Navigation },
+        {
+          [classes.context]: buttonContext === ButtonContext.Context,
+        },
+        {
+          [classes.icon]: buttonContext === ButtonContext.Icon,
+        },
+        {
+          [classes.active]: buttonContext === ButtonContext.Active,
+        },
+        'button-container',
+        className,
+      )}
+      type={type}
+      style={customStyles}
+      onClick={onButtonClicked}
+      disabled={disabled}
+      onBlur={onBlur}
+      data-test-id={dataTestId ?? 'button'}
+    >
+      <Icons icon={icon} />
+    </button>
+  );
+};
+
 /**
  * Button which can render an optional icon
  * @example
  *   <Button type="button" icon={IconName.X} />
  */
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      type = 'button',
-      height,
-      width,
-      buttonContext = ButtonContext.Navigation,
-      disabled = false,
-      icon,
-      className = '',
-      dataTestId = undefined,
-      onButtonClicked = noop,
-      onBlur,
-    },
-    ref,
-  ) => {
-    const customStyles = {
-      height: height,
-      width: width,
-    } as React.CSSProperties;
-
-    return (
-      <button
-        ref={ref}
-        className={clsx(
-          classes.container,
-          { [classes.navigation]: buttonContext === ButtonContext.Navigation },
-          {
-            [classes.context]: buttonContext === ButtonContext.Context,
-          },
-          {
-            [classes.icon]: buttonContext === ButtonContext.Icon,
-          },
-          {
-            [classes.active]: buttonContext === ButtonContext.Active,
-          },
-          'button-container',
-          className,
-        )}
-        type={type}
-        style={customStyles}
-        onClick={onButtonClicked}
-        disabled={disabled}
-        onBlur={onBlur}
-        data-test-id={dataTestId ?? 'button'}
-      >
-        <Icons icon={icon} />
-      </button>
-    );
-  },
+  ButtonElement,
 );

package/src/components/Buttons/Buttons.stories.tsx

@@ -5,6 +5,7 @@ import { Story } from '../../helpers/storybook';
 import { IconName } from '../Icons';
 import { ButtonContext } from './Button.model';
 import { Button } from './Button/Button';
+import { CompositeButton } from './CompositeButton/CompositeButton';
 import { TextButton } from './TextButton/TextButton';
 
 const typeOptions = {
@@ -14,14 +15,15 @@ const typeOptions = {
   Active: ButtonContext.Active,
 };
 
-export const button: Story = () => {
-  const iconOptions = {
-    ChevronRight: IconName.ChevronRight,
-    Archive: IconName.Archive,
-    Undo: IconName.Undo,
-    X: IconName.X,
-  };
+const iconOptions = {
+  ChevronRight: IconName.ChevronRight,
+  ChevronLeft: IconName.ChevronLeft,
+  Archive: IconName.Archive,
+  Undo: IconName.Undo,
+  X: IconName.X,
+};
 
+export const button: Story = () => {
   return (
     <Button
       type="button"
@@ -57,6 +59,26 @@ export const textButton: Story = () => {
   );
 };
 
+export const compositeButton: Story = () => {
+  return (
+    <CompositeButton
+      type="button"
+      height={text('height', '50px')}
+      width={text('width', '')}
+      text={text('text', 'Placeholder')}
+      icon={select<IconName>('Icon Name', iconOptions, IconName.ChevronRight)}
+      iconPosition={select('Icon Position', ['left', 'right'], 'right')}
+      buttonContext={select<ButtonContext>(
+        'Button Type',
+        typeOptions,
+        ButtonContext.Context,
+      )}
+      disabled={boolean('Disabled?', false)}
+      onButtonClicked={action('buttonClicked')}
+    />
+  );
+};
+
 export default {
   title: `Other Components/Buttons`,
 };

package/src/components/Buttons/CompositeButton/CompositeButton.scss

@@ -0,0 +1,116 @@
+@import '../../../styles/common.scss';
+
+.container {
+  @include boxSizing;
+
+  height: 50px;
+
+  display: grid;
+  grid-auto-flow: column;
+  gap: 5px;
+  place-items: center;
+  width: max-content;
+
+  padding: 5px 15px;
+
+  font-weight: bold;
+
+  cursor: pointer;
+
+  div {
+    direction: ltr;
+  }
+
+  svg {
+    height: 60%;
+  }
+
+  &.navigation {
+    color: white;
+    background-color: $light-blue;
+
+    svg * {
+      stroke: white;
+    }
+
+    &:hover {
+      background-color: lighten($light-blue, 10%);
+    }
+
+    &:active {
+      background-color: white;
+      color: $light-blue;
+
+      svg * {
+        stroke: $light-blue;
+      }
+    }
+
+    &:disabled {
+      background-color: $gray;
+      color: rgba(white, 0.5);
+
+      svg * {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  &.context {
+    color: $blue;
+    border: 1px solid $blue;
+    background-color: white;
+
+    transition: box-shadow 0.15s ease-in-out 0s;
+
+    svg * {
+      stroke: $blue;
+    }
+
+    &:hover {
+      border: 1px solid $blue;
+      box-shadow: 0 0 0 2px $blue;
+    }
+
+    &:active {
+      background-color: $blue;
+      color: white;
+
+      svg * {
+        stroke: white;
+      }
+    }
+
+    &:disabled {
+      border: 1px solid $gray;
+      color: $gray;
+
+      svg * {
+        stroke: $gray;
+      }
+    }
+  }
+
+  &.active {
+    color: white;
+    background-color: $blue;
+
+    &:hover {
+      background-color: lighten($blue, 10%);
+    }
+
+    &:active {
+      background-color: white;
+      color: $blue;
+    }
+
+    &:disabled {
+      background-color: $gray;
+      color: rgba(white, 0.5);
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}

package/src/components/Buttons/CompositeButton/CompositeButton.spec.tsx

@@ -0,0 +1,137 @@
+import { mount, shallow } from 'enzyme';
+import React from 'react';
+import { ButtonContext } from '../Button.model';
+import { CompositeButton } from './CompositeButton';
+
+describe('Button', () => {
+  it('renders the component without crashing', () => {
+    const wrapper = shallow(<CompositeButton />);
+
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('raises the onButtonClicked event', () => {
+    const spy = jest.fn();
+    const wrapper = shallow(<CompositeButton onButtonClicked={spy} />);
+
+    wrapper.simulate('click');
+
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('creates a class based off of the className prop', () => {
+    const mockClassName = 'test-class';
+    const wrapper = shallow(<CompositeButton className={mockClassName} />);
+
+    const button = wrapper.find('button');
+
+    expect(button.hasClass(mockClassName)).toBe(true);
+  });
+
+  it(`button 'type' must be 'button' by default`, () => {
+    const wrapper = shallow(<CompositeButton />);
+
+    const buttonType = wrapper.find('button').prop('type');
+
+    expect(buttonType).toBe('button');
+  });
+
+  it('accepts type html attribute and width/height styles', () => {
+    const mockType = 'submit';
+    const mockHeight = '75px';
+    const mockWidth = '80px';
+
+    const wrapper = shallow(<CompositeButton />);
+
+    let buttonType = wrapper.find('button').prop('type');
+    let buttonStyles = wrapper
+      .find('button')
+      .prop('style') as React.CSSProperties;
+
+    expect(buttonType).toBe('button');
+    expect(buttonStyles.height).toBeUndefined();
+    expect(buttonStyles.width).toBeUndefined();
+
+    wrapper.setProps({ type: mockType, height: mockHeight, width: mockWidth });
+    wrapper.update();
+
+    buttonType = wrapper.find('button').prop('type');
+    buttonStyles = wrapper.find('button').prop('style') as React.CSSProperties;
+
+    expect(buttonType).toBe(mockType);
+    expect(buttonStyles.height).toBe(mockHeight);
+    expect(buttonStyles.width).toBe(mockWidth);
+  });
+
+  it('allows the button to be enabled by default', () => {
+    const spy = jest.fn();
+    const wrapper = mount(<CompositeButton onButtonClicked={spy} />);
+
+    const button = wrapper.find('button');
+
+    wrapper.simulate('click');
+
+    expect(button.prop('disabled')).toBe(false);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('allows button to be disabled', () => {
+    const spy = jest.fn();
+    const wrapper = mount(
+      <CompositeButton disabled={true} onButtonClicked={spy} />,
+    );
+
+    const button = wrapper.find('button');
+
+    wrapper.simulate('click');
+
+    expect(button.prop('disabled')).toBe(true);
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('default should have a context class', () => {
+    const wrapper = shallow(<CompositeButton />);
+
+    const button = wrapper.find('button');
+
+    expect(button.hasClass('context')).toBe(true);
+  });
+
+  it('context button type should have a context class', () => {
+    const wrapper = shallow(
+      <CompositeButton buttonContext={ButtonContext.Context} />,
+    );
+
+    const button = wrapper.find('button');
+
+    expect(button.hasClass('context')).toBe(true);
+  });
+
+  it('active button type should have a active class', () => {
+    const wrapper = shallow(
+      <CompositeButton buttonContext={ButtonContext.Active} />,
+    );
+
+    const button = wrapper.find('button');
+
+    expect(button.hasClass('active')).toBe(true);
+  });
+
+  it(`renders value from 'text' prop`, () => {
+    const mockText = 'mock-text';
+
+    const wrapper = shallow(<CompositeButton text={mockText} />);
+
+    const button = wrapper.find('button');
+
+    expect(button.text()).toBe(mockText);
+  });
+
+  it(`defaults to an empty string is 'text' prop is not set`, () => {
+    const wrapper = shallow(<CompositeButton />);
+
+    const button = wrapper.find('button');
+
+    expect(button.text()).toBe('');
+  });
+});

package/src/components/Buttons/CompositeButton/CompositeButton.tsx

@@ -0,0 +1,70 @@
+import clsx from 'clsx';
+import React from 'react';
+import { noop } from '../../../helpers/utils';
+import { IconName, Icons } from '../../Icons';
+import { BaseButtonOptions, ButtonContext } from '../Button.model';
+import classes from './CompositeButton.scss';
+
+// TODO: Refactor buttons. Use a composition model.
+export interface CompositeButtonProps extends BaseButtonOptions {
+  /** Button's height (default: '30px') */
+  height?: string | number;
+  /** Button's width (default: undefined) */
+  width?: string | number;
+  /** Button text */
+  text?: string;
+  /** Optional icon */
+  icon?: IconName;
+  /** Optional Icon Position */
+  iconPosition?: 'left' | 'right';
+}
+
+/**
+ * Button which can render an optional text string
+ * @example
+ *   <CompositeButton type="button" text="Click me!" />
+ */
+export const CompositeButton: React.FC<CompositeButtonProps> = ({
+  type = 'button',
+  height,
+  width,
+  buttonContext = ButtonContext.Context,
+  disabled = false,
+  text = '',
+  icon,
+  iconPosition,
+  className,
+  dataTestId = undefined,
+  onButtonClicked = noop,
+}: CompositeButtonProps) => {
+  const customStyles = {
+    height: height,
+    width: width,
+    direction: iconPosition === 'left' ? 'rtl' : 'ltr',
+  } as React.CSSProperties;
+
+  return (
+    <button
+      className={clsx(
+        classes.container,
+        { [classes.navigation]: buttonContext === ButtonContext.Navigation },
+        {
+          [classes.context]: buttonContext === ButtonContext.Context,
+        },
+        {
+          [classes.active]: buttonContext === ButtonContext.Active,
+        },
+        'composite-button-container',
+        className,
+      )}
+      type={type}
+      style={customStyles}
+      onClick={onButtonClicked}
+      disabled={disabled}
+      data-test-id={dataTestId ?? 'text-button'}
+    >
+      <div>{text}</div>
+      {icon !== null && icon !== undefined && <Icons icon={icon} />}
+    </button>
+  );
+};

package/src/components/Buttons/index.ts

@@ -1,3 +1,7 @@
 export { ButtonContext } from './Button.model';
 export { Button, ButtonProps } from './Button/Button';
+export {
+  CompositeButton,
+  CompositeButtonProps,
+} from './CompositeButton/CompositeButton';
 export { TextButton, TextButtonProps } from './TextButton/TextButton';

package/src/components/Explorer/Explorer.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react';
 import { ActionData } from '..';
 import { noop } from '../../helpers/utils';
+import { showNotification } from '../../initialize';
 import { ErrorTypeToStationError } from '../../utils/ErrorTypeToStationError';
 import { Filters } from '../Filters/Filters';
 import { FilterType, FilterValues } from '../Filters/Filters.model';
@@ -361,8 +362,9 @@ export const Explorer = React.forwardRef(function Explorer<T>(
             if (result) {
               setStationMessage(errMsg(result));
             } else {
-              // eslint-disable-next-line no-console
-              // console.log(`Bulk Action ${action.label} Started`);
+              showNotification({
+                title: `Bulk Action ${action.label} Started`,
+              });
 
               if (action.reloadData) {
                 onReloadData();

package/src/components/FormElements/CustomTags/CustomTags.scss

@@ -62,8 +62,6 @@
       input,
       .autoComplete > li {
         padding: 0 60px 0 12px;
-        z-index: 5;
-
         color: var(--input-color, $input-color);
       }
 
@@ -82,6 +80,7 @@
         right: -25px;
 
         list-style-type: none;
+        z-index: 10;
 
         // -webkit-box-shadow: 0px 0px 9px -2px rgba(0, 0, 0, 0.87);
 

package/src/components/FormStation/SaveOnNavigate/SaveOnNavigate.tsx

@@ -1,5 +1,5 @@
 import { useFormikContext } from 'formik';
-import React from 'react';
+import React, { useState } from 'react';
 import { NavigationAPI, useReactRouterPause } from '../../../hooks';
 
 interface SaveOnNavigateProps {
@@ -14,6 +14,8 @@ export const SaveOnNavigate: React.FC<SaveOnNavigateProps> = ({
   isSubmitting = false,
 }) => {
   const { dirty, isValid, submitForm } = useFormikContext();
+  const [canSubmit, setCanSubmit] = useState<boolean>(true);
+
   async function handleNavigationAttempt(
     navigation: NavigationAPI,
   ): Promise<void> {
@@ -32,7 +34,9 @@ export const SaveOnNavigate: React.FC<SaveOnNavigateProps> = ({
     navigation.pause();
     try {
       // only attempt to submit the form if there is no current submission in progress
-      if (!isSubmitting) {
+      if (!isSubmitting && canSubmit) {
+        // Block additional submit requests before continuing navigation or double clicking can cause the form to be submitted again.
+        setCanSubmit(false);
         // Wait for success response
         await submitForm();
         // Successfully saved, continue navigation
@@ -42,8 +46,12 @@ export const SaveOnNavigate: React.FC<SaveOnNavigateProps> = ({
       // TODO: Proper Error handling
       // An error occurred while attempting to save, cancel navigation
       navigation.cancel();
+      // Allow submits again if error
+      setCanSubmit(true);
     }
   }
+  // After a successful navigation, this component is destroyed and 'canSubmit' is no longer false.
+
   useReactRouterPause({ handler: handleNavigationAttempt }, dirty);
   return null;
 };

package/src/components/Icons/Icons.models.ts

@@ -24,12 +24,15 @@ export enum IconName {
   MidlineEllipsis,
   Minus,
   NavigateRight,
+  Pause,
+  Play,
   Plus,
   Publish,
   RemoveFilter,
   Retry,
   Replace,
   Snapshot,
+  Stop,
   Success,
   Undo,
   Unpublish,