@axinom/mosaic-ui 0.31.0-rc.9 → 0.32.0-rc.0

package/src/components/FormElements/MaskedSingleLineText/MaskedSingleLineTextField.tsx

@@ -0,0 +1,37 @@
+import { useField } from 'formik';
+import React from 'react';
+import { useFormikError } from '../useFormikError';
+import {
+  MaskedSingleLineText,
+  MaskedSingleLineTextProps,
+} from './MaskedSingleLineText';
+/**
+ * This component should be used to render a Masked TextBox inside a Formik form.
+ *
+ * @example
+ * <Field 
+ *  name="title" 
+ *  label="Title" 
+ *  as={MaskedSingleLineTextField} 
+    mask={'00:00:00.000'},
+    placeholderChar={'0'}, />
+ */
+export const MaskedSingleLineTextField: React.FC<
+  Omit<MaskedSingleLineTextProps, 'error'>
+> = (props) => {
+  const error = useFormikError(props.name);
+
+  const [, meta, helpers] = useField(props.name);
+
+  const handleChange = (value: string): void => {
+    helpers.setValue(value);
+
+    if (value === meta.initialValue) {
+      helpers.setTouched(false);
+    }
+  };
+
+  return (
+    <MaskedSingleLineText {...props} onChange={handleChange} error={error} />
+  );
+};

package/src/components/FormElements/Radio/Radio.scss

@@ -30,6 +30,10 @@
         align-items: center;
 
         user-select: none;
+
+        &.disabled {
+          cursor: default;
+        }
       }
 
       input {

package/src/components/FormElements/Radio/Radio.spec.tsx

@@ -224,7 +224,7 @@ describe('Radio', () => {
       expect(confirmation.exists()).toBe(true);
 
       expect(radioSVG.at(0).hasClass('hasConfirm')).toBe(true);
-      expect(radioSVG.at(0).hasClass('unSelectable')).toBe(false);
+      expect(radioSVG.at(0).hasClass('unSelectable')).toBe(true);
       expect(radioSVG.at(1).hasClass('hasConfirm')).toBe(false);
       expect(radioSVG.at(1).hasClass('unSelectable')).toBe(true);
       expect(radioSVG.at(2).hasClass('hasConfirm')).toBe(false);

package/src/components/FormElements/Radio/Radio.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
 import {
-  ConfirmDialog,
   ConfirmationConfig,
   ConfirmationMode,
+  ConfirmDialog,
 } from '../../ConfirmDialog';
 import { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
@@ -31,6 +31,8 @@ interface RadioButtonProps {
   inputValue?: string | number;
   /** The new value currently stored as the confirmation dialog is rendered */
   confirmValue?: string | number;
+
+  disabled?: boolean;
 }
 
 export const RadioButton: React.FC<RadioButtonProps> = ({
@@ -38,27 +40,27 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
   hasError,
   inputValue,
   confirmValue,
-}) => {
-  return (
-    <svg
-      className={clsx(classes.buttonContainer, {
-        [classes.checked]: checked,
-        [classes.hasError]: hasError,
-        [classes.hasConfirm]:
-          confirmValue !== undefined &&
-          String(inputValue) === String(confirmValue),
-        [classes.unSelectable]:
-          confirmValue !== undefined &&
-          String(inputValue) !== String(confirmValue),
-      })}
-      preserveAspectRatio="xMidYMid meet"
-      viewBox="0 0 34 34"
-    >
-      <circle className={classes.radioOutline} cx="17" cy="17" r="15" />
-      <circle className={classes.radioDot} cx="17" cy="17" r="10" />
-    </svg>
-  );
-};
+  disabled = false,
+}) => (
+  <svg
+    className={clsx(classes.buttonContainer, {
+      [classes.checked]: checked,
+      [classes.hasError]: hasError,
+      [classes.hasConfirm]:
+        confirmValue !== undefined &&
+        String(inputValue) === String(confirmValue),
+      [classes.unSelectable]:
+        (confirmValue !== undefined &&
+          String(inputValue) !== String(confirmValue)) ||
+        disabled,
+    })}
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 34 34"
+  >
+    <circle className={classes.radioOutline} cx="17" cy="17" r="15" />
+    <circle className={classes.radioDot} cx="17" cy="17" r="10" />
+  </svg>
+);
 
 /**
  * Radio input form control
@@ -108,7 +110,7 @@ export const Radio: React.FC<RadioProps> = ({
       currentTarget: { value: confirmValue as unknown as string },
     } as React.ChangeEvent<HTMLInputElement>;
 
-    onChange && onChange(confirmed as React.FormEvent<HTMLInputElement>);
+    onChange && onChange(confirmed as React.ChangeEvent<HTMLInputElement>);
 
     setConfirmation(false);
     ref.current = undefined;
@@ -156,12 +158,16 @@ export const Radio: React.FC<RadioProps> = ({
                 onBlur={onBlur}
                 onFocus={onFocus}
               />
-              <label htmlFor={radioId}>
+              <label
+                htmlFor={radioId}
+                className={clsx({ [classes.disabled]: disabled })}
+              >
                 <RadioButton
                   checked={checked}
                   hasError={errorMsg !== undefined}
                   inputValue={val}
                   confirmValue={confirmValue}
+                  disabled={disabled}
                 />
                 {labe}
               </label>

package/src/components/FormElements/Select/Select.scss

@@ -1,7 +1,7 @@
 @import '../../../styles/common.scss';
 
 @function svg-arrow-glyph($color) {
-  @return url('data:image/svg+xml;utf8,<svg stroke="'+$color+'" version="1.1" xmlns="http://www.w3.org/2000/svg" width="40px" height="20px" viewBox="0 0 40 40"><path vector-effect="non-scaling-stroke" fill="none" stroke-width="2" d="M38.5,9.5L20,30.5L1.5,9.5" /></svg>');
+  @return url('data:image/svg+xml;utf8,<svg stroke="' + $color + '" version="1.1" xmlns="http://www.w3.org/2000/svg" width="40px" height="20px" viewBox="0 0 40 40"><path vector-effect="non-scaling-stroke" fill="none" stroke-width="2" d="M38.5,9.5L20,30.5L1.5,9.5" /></svg>');
 }
 
 .container {
@@ -37,6 +37,13 @@
       border: 1px solid
         var(--input-invalid-border-color, $input-invalid-border-color);
     }
+
+    &:disabled {
+      cursor: default;
+      background-image: svg-arrow-glyph(
+        var(--select-arrow-color, encodecolor($select-disabled-arrow-color))
+      );
+    }
   }
 
   select,
@@ -47,8 +54,8 @@
     text-overflow: ellipsis;
   }
 
-  select:hover,
-  select:focus {
+  select:hover:enabled,
+  select:focus:enabled {
     border: 1px solid var(--input-hover-color, $input-hover-color);
     box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);
 

package/src/components/FormElements/SingleLineText/SingleLineText.scss

@@ -9,6 +9,7 @@
     font-size: var(--label-font-size, $label-font-size);
     outline: none;
     height: 50px;
+    width: 100%;
     max-width: var(--input-max-width, $input-max-width);
 
     transition: box-shadow 0.15s ease-in-out 0s;

package/src/components/FormElements/SingleLineText/SingleLineText.spec.tsx

@@ -38,25 +38,6 @@ describe('TextField', () => {
     expect(spy).toHaveBeenCalledWith({ target: { value: mockValueUpdated } });
   });
 
-  it(`defaults to an empty string if prop value is 'null'`, () => {
-    // @ts-expect-error intentional null value
-    const wrapper = shallow(<SingleLineText name={'test-name'} value={null} />);
-
-    const input = wrapper.find('input');
-
-    expect(input.prop('value')).toBe('');
-  });
-
-  it(`defaults to an empty string if prop value is 'undefined'`, () => {
-    const wrapper = shallow(
-      <SingleLineText name={'test-name'} value={undefined} />,
-    );
-
-    const input = wrapper.find('input');
-
-    expect(input.prop('value')).toBe('');
-  });
-
   it('uses optional props when passed in', () => {
     const mockProps = {
       autoComplete: 'on',
@@ -124,9 +105,9 @@ describe('TextField', () => {
       <SingleLineText name={'test-pwd'} type="password" isSet={true} />,
     );
 
-    const input = wrapper.find('input');
+    const input = wrapper.find('input').getDOMNode<HTMLInputElement>();
 
-    expect(input.prop('value')).toBe(dummyPwd);
+    expect(input.value).toBe(dummyPwd);
   });
 
   it('when user changes the value it should be displayed, when type is password', () => {
@@ -152,15 +133,4 @@ describe('TextField', () => {
       }),
     );
   });
-
-  it('renders an empty string if value is not provided, when type is password', () => {
-    const initialVal = undefined;
-    const wrapper = mount(
-      <SingleLineText name={'test-pwd'} type="password" value={initialVal} />,
-    );
-
-    const input = wrapper.find('input');
-
-    expect(input.prop('value')).toBe('');
-  });
 });

package/src/components/FormElements/SingleLineText/SingleLineText.stories.tsx

@@ -15,8 +15,16 @@ const groups = createGroups({
     'inlineMode',
     'name',
     'id',
+    'innerRef',
+  ],
+  Content: [
+    'label',
+    'placeholder',
+    'error',
+    'tooltipContent',
+    'value',
+    'defaultValue',
   ],
-  Content: ['label', 'placeholder', 'error', 'tooltipContent', 'value'],
   Styling: ['className'],
   Events: ['onChange', 'onBlur', 'onFocus'],
 });

package/src/components/FormElements/SingleLineText/SingleLineText.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import React, { ChangeEvent, useEffect, useState } from 'react';
+import React, { ChangeEvent, InputHTMLAttributes, useEffect } from 'react';
+import { executeIfRefAvailable } from '../../../helpers/utils';
 import { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './SingleLineText.scss';
@@ -16,13 +17,17 @@ export interface SingleLineTextProps extends BaseFormControl, BaseInputEvents {
    */
   isSet?: boolean;
   /** Current value the form control has */
-  value?: string | number | string[] | undefined;
+  value?: InputHTMLAttributes<HTMLInputElement>['value'];
+  /** Default value for the form control */
+  defaultValue?: InputHTMLAttributes<HTMLInputElement>['defaultValue'];
   /** Input placeholder */
   placeholder?: string;
   /** Whether or not the control should start focused (default: false) */
   autoFocus?: boolean;
   /** Whether or not the control supports auto complete */
   autoComplete?: 'on' | 'off';
+
+  innerRef?: React.RefObject<HTMLInputElement>;
 }
 
 /**
@@ -40,6 +45,8 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
   error,
   autoFocus = false,
   autoComplete,
+  innerRef = React.createRef(),
+  defaultValue,
   onChange,
   onBlur,
   onFocus,
@@ -47,47 +54,30 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
   ...rest
 }) => {
   const errorMsg: string | undefined = error;
-  const [val, setVal] = useState(value ?? '');
-  const [isDirty, setDirty] = useState(false);
   const DUMMY_PWD = '0000000000';
   const isPasswordField = type === 'password' ? true : false;
 
   useEffect(() => {
-    // For password type, display dummy val at initial rendering and allow user to change it
-    if (isPasswordField) {
-      if (isDirty) {
-        setVal(value as string);
-      } else if (!isSet) {
-        setVal('');
-      } else {
-        setVal(DUMMY_PWD);
-      }
-    } else {
-      setVal(value as string);
+    if (isPasswordField && isSet) {
+      executeIfRefAvailable(innerRef, (input) => {
+        input.value = DUMMY_PWD;
+      });
     }
-  }, [isDirty, isPasswordField, isSet, type, value]);
-
-  const handlePwdChange = (e: ChangeEvent<HTMLInputElement>): void => {
-    // For type === password, once user changed the pwd, show the actual value entered by the user.
-    setDirty(true);
-    setVal(e.target.value);
-    onChange && onChange(e);
-  };
-
-  const handleTextChange = (e: ChangeEvent<HTMLInputElement>): void => {
-    setVal(e.target.value);
-    onChange && onChange(e);
-  };
+  }, [innerRef, isPasswordField, isSet]);
 
   const onFocusWrapper = (e: ChangeEvent<HTMLInputElement>): void => {
     if (type === 'password' && isSet && !value) {
-      setVal('');
+      executeIfRefAvailable(innerRef, (input) => {
+        input.value = '';
+      });
     }
     onFocus?.(e);
   };
   const onBlurWrapper = (e: ChangeEvent<HTMLInputElement>): void => {
     if (type === 'password' && isSet && !value) {
-      setVal(DUMMY_PWD);
+      executeIfRefAvailable(innerRef, (input) => {
+        input.value = DUMMY_PWD;
+      });
     }
     onBlur?.(e);
   };
@@ -108,12 +98,14 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
         id={id}
         name={name}
         type={type}
-        value={val ?? ''}
+        ref={innerRef}
+        value={value}
+        defaultValue={defaultValue}
         disabled={disabled}
         placeholder={placeholder}
         autoFocus={autoFocus}
         autoComplete={autoComplete}
-        onChange={isPasswordField ? handlePwdChange : handleTextChange}
+        onChange={onChange}
         onBlur={onBlurWrapper}
         onFocus={onFocusWrapper}
       />

package/src/components/FormElements/Tags/Tags.scss

@@ -72,6 +72,13 @@
         border: 1px solid
           var(--input-invalid-border-color, $input-invalid-border-color);
       }
+
+      &:disabled {
+        cursor: default;
+        background-image: svg-arrow-glyph(
+          var(--select-arrow-color, encodecolor($select-disabled-arrow-color))
+        );
+      }
     }
 
     select,
@@ -82,7 +89,7 @@
       text-overflow: ellipsis;
     }
 
-    select:hover {
+    select:hover:enabled {
       border: 1px solid var(--input-hover-color, $input-hover-color);
       box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);
 

package/src/components/FormElements/ToggleButton/ToggleButton.scss

@@ -16,7 +16,8 @@
     background-color: white;
     cursor: pointer;
 
-    &:hover {
+    &:hover:enabled {
+      transition: box-shadow 0.15s ease-in-out 0s;
       box-shadow: 0 0 0 2px $blue;
     }
 
@@ -65,7 +66,7 @@
     }
 
     &:disabled {
-      cursor: not-allowed;
+      cursor: default;
       opacity: 0.5;
     }
 

package/src/components/FormElements/ToggleButton/ToggleButton.tsx

@@ -3,9 +3,9 @@ import React, { useEffect, useState } from 'react';
 import { noop } from '../../../helpers/utils';
 import { BaseButtonOptions } from '../../Buttons/Button.model';
 import {
-  ConfirmDialog,
   ConfirmationConfig,
   ConfirmationMode,
+  ConfirmDialog,
 } from '../../ConfirmDialog';
 import { BaseFormControl } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';

package/src/components/FormElements/index.ts

@@ -29,6 +29,7 @@ export {
 export { FormikDebug } from './FormikDebug/FormikDebug';
 export { GenericField, GenericFieldProps } from './GenericField/GenericField';
 export { LinkField, LinkFieldProps } from './Link/LinkField';
+export { MaskedSingleLineText } from './MaskedSingleLineText/MaskedSingleLineText';
 export { Radio, RadioProps } from './Radio/Radio';
 export { RadioField } from './Radio/RadioField';
 export { ReadOnlyField, ReadOnlyFieldProps } from './ReadOnly/ReadOnlyField';

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

@@ -22,6 +22,7 @@ import {
 } from '../FormElements';
 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 { ErrorType } from '../models';
 import { Details, DetailsProps } from './Details/Details';
@@ -129,6 +130,7 @@ interface DetailsValues {
   released?: string;
   list?: DynamicListStoryData[];
   archived?: boolean;
+  timestamp?: string;
 }
 
 export const Extended: StoryObj<typeof Details> = (() => {
@@ -167,6 +169,7 @@ export const Extended: StoryObj<typeof Details> = (() => {
           released: '2020-04-03T00:00:00.000+00:00',
           list: listData,
           archived: false,
+          timestamp: '00:00:00.001',
         },
       },
       infoPanel: (
@@ -279,6 +282,12 @@ export const Extended: StoryObj<typeof Details> = (() => {
             as={DynamicDataListField}
           />
           <Field name="archived" label="Set Archived" as={CheckboxField} />
+          <Field
+            name="timestamp"
+            label="Timestamp"
+            mask="00:00:00.000"
+            as={MaskedSingleLineTextField}
+          />
         </>
       ),
     },

package/src/components/FormStation/FormStation.tsx

@@ -22,12 +22,12 @@ import { Actions, ActionsProps } from '../Actions';
 import { isNavigationAction } from '../Actions/Action/Action';
 import { IconName } from '../Icons';
 import { MessageBar } from '../MessageBar';
+import { ErrorType, StationError, StationMessage } from '../models';
 import {
   PageHeader,
   PageHeaderActionType,
   PageHeaderProps,
 } from '../PageHeader';
-import { ErrorType, StationError, StationMessage } from '../models';
 import { FormActionData, InitialFormData } from './FormStation.models';
 import classes from './FormStation.scss';
 import { SaveOnNavigate } from './SaveOnNavigate/SaveOnNavigate';

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.spec.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { noop } from '../../../helpers/utils';
 import { TextButton } from '../../Buttons';
-import { ConfirmDialog, ConfirmationConfig } from '../../ConfirmDialog';
+import { ConfirmationConfig, ConfirmDialog } from '../../ConfirmDialog';
 import { IconName } from '../../Icons';
 import {
   PageHeaderAction,

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.tsx

@@ -2,9 +2,9 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { noop } from '../../../helpers/utils';
 import {
-  ConfirmDialog,
   ConfirmationConfig,
   ConfirmationMode,
+  ConfirmDialog,
   useConfirmationDelay,
 } from '../../ConfirmDialog';
 import { IconName, Icons } from '../../Icons';

package/src/components/Utils/Postgraphile/index.ts

@@ -1,8 +1,8 @@
 export * from './CreateConnectionRenderer';
 export * from './FilterTransformer';
-export * from './RangeTransformer';
-export * from './SortTransformer';
-export * from './UpdateGQLFragmentGenerator';
 export * from './generateArrayMutations';
 export * from './getArrayDiff';
 export * from './getFormDiff';
+export * from './RangeTransformer';
+export * from './SortTransformer';
+export * from './UpdateGQLFragmentGenerator';

package/src/components/Utils/Transformers/Timestamp.spec.ts

@@ -1,8 +1,8 @@
 import {
-  TIMESTAMP_DEFAULT,
-  Timestamp,
   formatSecondsToTimestamp,
+  Timestamp,
   timestampToSeconds,
+  TIMESTAMP_DEFAULT,
 } from './Timestamp';
 
 const timeStamp: Timestamp = '00:02:00.000';

package/src/components/Utils/Transformers/Timestamp.ts

@@ -13,7 +13,11 @@ export const formatSecondsToTimestamp: TransformerFunction<
   number,
   Timestamp
 > = (timeInSeconds?: number | null): Timestamp => {
-  if (timeInSeconds === null || timeInSeconds === undefined) {
+  if (
+    timeInSeconds === null ||
+    timeInSeconds === undefined ||
+    typeof timeInSeconds !== 'number'
+  ) {
     return TIMESTAMP_DEFAULT;
   }
 

package/src/components/index.ts

@@ -19,8 +19,8 @@ export * from './List';
 export * from './Loaders';
 export * from './MessageBar';
 export * from './Modal';
+export * from './models';
 export * from './NavigationAwareStation';
 export * from './PageHeader';
 export * from './ProgressBar';
 export * from './Utils';
-export * from './models';

package/src/helpers/utils.ts

@@ -11,6 +11,7 @@ export function noop(): void {}
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const assertNever = (_type: never): void => {
+  // eslint-disable-next-line no-console
   console.error(`Switch was not exhaustive`);
 };
 
@@ -25,3 +26,19 @@ export type Maybe<T> = T | null;
 export type Nullable<T> = {
   [P in keyof T]: T[P] | null;
 };
+
+/**
+ * Checks if the ref is available before executing the provided function.
+ * @param ref Mutable Ref Object to check
+ * @param fn Function to execute
+ * @param args Arguments for the function
+ */
+export const executeIfRefAvailable = async <U, T = never>(
+  ref: React.RefObject<U>,
+  fn: (arg0: U, ...args: T[]) => void,
+  ...args: T[]
+): Promise<void> => {
+  if (ref.current) {
+    fn(ref.current, ...args);
+  }
+};

package/src/styles/variables.scss

@@ -182,6 +182,7 @@ $tag-font-color: $dark-gray;
 $tag-background-color: $light-gray-2;
 $form-error-color: $red;
 $select-arrow-color: $blue;
+$select-disabled-arrow-color: $light-gray;
 $label-font-size: 16px;
 $file-upload-progress: $blue;
 $file-upload-progress-background: $light-gray-2;