@oliasoft-open-source/react-ui-library 1.0.0

package/src/components/select/select.test.js

@@ -0,0 +1,519 @@
+import {
+  isMulti,
+  isSimpleOptions,
+  isSimpleSelectedOptions,
+  standardizeOptions,
+  standardizeSelectedOptions,
+  standardizeSelectedOption,
+  getFirstSelectedOptionIndex,
+  nonExistentValue,
+} from './select.input';
+
+describe('select (inputs)', () => {
+  test('is multi select', () => {
+    expect(isMulti([])).toBe(true);
+    expect(isMulti([{ label: 'Monkeys', value: 'bananas' }])).toBe(true);
+    expect(isMulti(null)).toBe(false);
+    expect(isMulti('Monkeys')).toBe(false);
+    expect(isMulti({ label: 'Monkeys', value: 'bananas' })).toBe(false);
+  });
+
+  test('is simple options', () => {
+    expect(isSimpleOptions(['Cat', 'Mouse'])).toBe(true);
+    expect(isSimpleOptions([1, 2])).toBe(true);
+    expect(
+      isSimpleOptions([
+        { label: 'Cat', value: 'Cat' },
+        { label: 'Mouse', value: 'Mouse' },
+      ]),
+    ).toBe(false);
+    expect(isSimpleOptions([{ label: 'Cat', value: 'Cat' }, 'Mouse', 4])).toBe(
+      true,
+    );
+    expect(isSimpleOptions([])).toBe(false);
+    expect(isSimpleOptions(undefined)).toBe(false);
+  });
+
+  test('is simple selected options', () => {
+    expect(isSimpleSelectedOptions(['Cat', 'Mouse'])).toBe(true);
+    expect(isSimpleSelectedOptions([11, 12])).toBe(true);
+    expect(isSimpleSelectedOptions('Cat')).toBe(true);
+    expect(isSimpleSelectedOptions(6)).toBe(true);
+    expect(
+      isSimpleOptions([
+        { label: 'Cat', value: 'Cat' },
+        { label: 'Mouse', value: 'Mouse' },
+      ]),
+    ).toBe(false);
+    expect(isSimpleOptions([{ label: 'Cat', value: 'Cat' }, 'Mouse', 7])).toBe(
+      true,
+    );
+    expect(isSimpleOptions([])).toBe(false);
+    expect(isSimpleOptions(undefined)).toBe(false);
+  });
+
+  test('standardize options', () => {
+    expect(
+      standardizeOptions(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+        ],
+        false,
+      ),
+    ).toStrictEqual([
+      { label: 'Cat', value: 'cat' },
+      { label: 'Mouse', value: 'mouse' },
+    ]);
+    expect(standardizeOptions(['Cat', 'Mouse'], true)).toStrictEqual([
+      { label: 'Cat', value: 'Cat' },
+      { label: 'Mouse', value: 'Mouse' },
+    ]);
+    expect(standardizeOptions([5, 6], true)).toStrictEqual([
+      { label: 5, value: 5 },
+      { label: 6, value: 6 },
+    ]);
+    expect(
+      standardizeOptions([{ label: 'Cat', value: 'cat' }, 'Mouse', 9], true),
+    ).toStrictEqual([
+      { label: 'Cat', value: 'cat' },
+      { label: 'Mouse', value: 'Mouse' },
+      { label: 9, value: 9 },
+    ]);
+    expect(standardizeOptions([], true)).toStrictEqual([]);
+    expect(standardizeOptions(undefined, true)).toStrictEqual(undefined);
+  });
+
+  test('standardize selected options (single select)', () => {
+    expect(
+      standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], {
+        label: 'Cat',
+        value: 'cat',
+      }),
+    ).toStrictEqual({ label: 'Cat', value: 'cat' });
+    expect(
+      standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], 'cat'),
+    ).toStrictEqual({
+      label: 'Cat',
+      value: 'cat',
+    });
+    expect(
+      standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], {
+        value: 'cat',
+        monkeys: 'bananas',
+      }),
+    ).toStrictEqual({
+      label: 'Cat',
+      value: 'cat',
+    });
+    expect(
+      standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], 'Foobar'),
+    ).toStrictEqual({ label: 'Foobar', value: 'Foobar' });
+    expect(
+      standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], {
+        value: '',
+      }),
+    ).toStrictEqual(undefined);
+    expect(
+      standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], null),
+    ).toStrictEqual(undefined);
+    expect(
+      standardizeSelectedOptions([{ label: 8, value: 8 }], 8),
+    ).toStrictEqual({
+      label: 8,
+      value: 8,
+    });
+    expect(
+      standardizeSelectedOptions([{ label: 8, value: 8 }], '8'), //allow coercion
+    ).toStrictEqual({
+      label: 8,
+      value: 8,
+    });
+    expect(standardizeSelectedOptions([], null)).toStrictEqual(undefined);
+    expect(standardizeSelectedOptions([], undefined)).toStrictEqual(undefined);
+  });
+
+  test('standardize selected options (multi-select)', () => {
+    expect(
+      standardizeSelectedOptions(null, [
+        { label: 'Cat', value: 'cat' },
+        { label: 'Mouse', value: 'mouse' },
+      ]),
+    ).toStrictEqual([
+      { label: 'Cat', value: 'cat' },
+      { label: 'Mouse', value: 'mouse' },
+    ]);
+    expect(
+      standardizeSelectedOptions(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+        ],
+        ['cat', 'mouse'],
+      ),
+    ).toStrictEqual([
+      { label: 'Cat', value: 'cat' },
+      { label: 'Mouse', value: 'mouse' },
+    ]);
+    expect(
+      standardizeSelectedOptions(
+        [
+          { label: 1, value: 1 },
+          { label: 2, value: 2 },
+        ],
+        [1, 2],
+      ),
+    ).toStrictEqual([
+      { label: 1, value: 1 },
+      { label: 2, value: 2 },
+    ]);
+    expect(
+      standardizeSelectedOptions(
+        [
+          { label: 1, value: 1 },
+          { label: 2, value: 2 },
+        ],
+        ['1', '2'], //allow coercion
+      ),
+    ).toStrictEqual([
+      { label: 1, value: 1 },
+      { label: 2, value: 2 },
+    ]);
+    expect(
+      standardizeSelectedOptions(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 5, value: 5 },
+        ],
+        ['cat', { label: 'Mouse', value: 'mouse' }, 5],
+      ),
+    ).toStrictEqual([
+      { label: 'Cat', value: 'cat' },
+      { label: 'Mouse', value: 'mouse' },
+      { label: 5, value: 5 },
+    ]);
+    expect(
+      standardizeSelectedOptions(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 5, value: 5 },
+        ],
+        [
+          { value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          null,
+          undefined,
+          '',
+        ],
+      ),
+    ).toStrictEqual([
+      { label: 'Cat', value: 'cat' },
+      { label: 'Mouse', value: 'mouse' },
+    ]);
+    expect(standardizeSelectedOptions(null, [])).toStrictEqual([]);
+  });
+
+  test('standardize selected option', () => {
+    expect(
+      standardizeSelectedOption(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+        ],
+        { label: 'Mouse', value: 'mouse' },
+      ),
+    ).toStrictEqual({ label: 'Mouse', value: 'mouse' });
+    expect(
+      standardizeSelectedOption(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+        ],
+        { value: 'mouse' },
+      ),
+    ).toStrictEqual({ label: 'Mouse', value: 'mouse' });
+    expect(
+      standardizeSelectedOption(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+        ],
+        'mouse',
+      ),
+    ).toStrictEqual({ label: 'Mouse', value: 'mouse' });
+    expect(
+      standardizeSelectedOption(
+        [
+          { label: 'Cat', value: 1 },
+          { label: 'Mouse', value: 2 },
+        ],
+        { value: 1 },
+      ),
+    ).toStrictEqual({ label: 'Cat', value: 1 });
+    expect(
+      standardizeSelectedOption(
+        [
+          { label: 'Cat', value: 1 },
+          { label: 'Mouse', value: 2 },
+        ],
+        { value: '1' }, //allow coercion
+      ),
+    ).toStrictEqual({ label: 'Cat', value: 1 });
+    expect(
+      standardizeSelectedOption(
+        [
+          { label: 'Cat', value: 1 },
+          { label: 'Mouse', value: 2 },
+        ],
+        1,
+      ),
+    ).toStrictEqual({ label: 'Cat', value: 1 });
+    expect(
+      standardizeSelectedOption(
+        [
+          { label: 'Cat', value: 1 },
+          { label: 'Mouse', value: 2 },
+        ],
+        '1', //allow coercion
+      ),
+    ).toStrictEqual({ label: 'Cat', value: 1 });
+    expect(
+      standardizeSelectedOption(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+        ],
+        null,
+      ),
+    ).toStrictEqual(undefined);
+    expect(standardizeSelectedOption([], 'mouse')).toStrictEqual({
+      label: 'mouse',
+      value: 'mouse',
+    });
+    //non-existent values
+    expect(standardizeSelectedOption(undefined, 'mouse')).toStrictEqual({
+      label: 'mouse',
+      value: 'mouse',
+    });
+    expect(
+      standardizeSelectedOption(
+        [
+          { label: 'Cat', value: 1 },
+          { label: 'Mouse', value: 2 },
+        ],
+        { label: 'Vampire', value: 'vampire' },
+      ),
+    ).toStrictEqual({ label: 'Vampire', value: 'vampire' });
+    expect(
+      standardizeSelectedOption(['Cat', 'Mouse'], 'Vampire'),
+    ).toStrictEqual({ label: 'Vampire', value: 'Vampire' });
+  });
+
+  test('get first selected option index', () => {
+    expect(
+      getFirstSelectedOptionIndex(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Dog', value: 'dog' },
+        ],
+        { label: 'Mouse', value: 'mouse' },
+      ),
+    ).toBe(1);
+    expect(
+      getFirstSelectedOptionIndex(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Dog', value: 'dog' },
+        ],
+        [
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Dog', value: 'dog' },
+        ],
+      ),
+    ).toBe(1);
+    expect(
+      getFirstSelectedOptionIndex(
+        [
+          { label: 'Cat', value: 1 },
+          { label: 'Mouse', value: 2 },
+          { label: 'Dog', value: 3 },
+        ],
+        { label: 'Mouse', value: 2 },
+      ),
+    ).toBe(1);
+    expect(
+      getFirstSelectedOptionIndex(
+        [
+          { label: 'Cat', value: 1 },
+          { label: 'Mouse', value: 2 },
+          { label: 'Dog', value: 3 },
+        ],
+        { label: 'Mouse', value: '2' }, //allow coercion
+      ),
+    ).toBe(1);
+    expect(
+      //with headings (should be omitted from index)
+      getFirstSelectedOptionIndex(
+        [
+          { type: 'Heading', label: 'Enemies' },
+          { label: 'Cat', value: 1 },
+          { type: 'Heading', label: 'Friends' },
+          { label: 'Mouse', value: 2 },
+          { label: 'Dog', value: 3 },
+        ],
+        { label: 'Mouse', value: '2' }, //allow coercion
+      ),
+    ).toBe(1);
+    expect(getFirstSelectedOptionIndex(['Cat', 'Mouse', 'Dog'], 'Mouse')).toBe(
+      1,
+    );
+    expect(getFirstSelectedOptionIndex([1, 2, 3], 2)).toBe(1);
+    expect(getFirstSelectedOptionIndex([1, 2, 3], '2')).toBe(
+      //allow coercion
+      1,
+    );
+    expect(
+      getFirstSelectedOptionIndex(['Cat', 'Mouse', 'Dog'], ['Mouse', 'Dog']),
+    ).toBe(1);
+    expect(
+      getFirstSelectedOptionIndex(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Dog', value: 'dog' },
+        ],
+        { label: 'Camel', value: 'camel' },
+      ),
+    ).toBe(null);
+    expect(
+      getFirstSelectedOptionIndex(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Dog', value: 'dog' },
+        ],
+        [{ label: 'Camel', value: 'camel' }],
+      ),
+    ).toBe(null);
+    expect(getFirstSelectedOptionIndex(['Cat', 'Mouse', 'Dog'], 'Camel')).toBe(
+      null,
+    );
+    expect(
+      getFirstSelectedOptionIndex(['Cat', 'Mouse', 'Dog'], ['Camel', 'Sheep']),
+    ).toBe(null);
+    expect(getFirstSelectedOptionIndex([], 'Camel')).toBe(null);
+    expect(
+      getFirstSelectedOptionIndex(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Dog', value: 'dog' },
+        ],
+        null,
+      ),
+    ).toBe(null);
+    expect(
+      getFirstSelectedOptionIndex(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Dog', value: 'dog' },
+        ],
+        [],
+      ),
+    ).toBe(null);
+    expect(
+      getFirstSelectedOptionIndex(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Dog', value: 'dog' },
+        ],
+        undefined,
+      ),
+    ).toBe(null);
+  });
+
+  test('non-existent value', () => {
+    expect(
+      nonExistentValue(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Dog', value: 'dog' },
+        ],
+        { label: 'Cat', value: 'cat' },
+      ),
+    ).toBe(false);
+    expect(
+      nonExistentValue(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Dog', value: 'dog' },
+        ],
+        { label: 'Vampire', value: 'vampire' },
+      ),
+    ).toBe(true);
+    expect(
+      nonExistentValue(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Dog', value: 'dog' },
+        ],
+        null,
+      ),
+    ).toBe(false);
+    expect(
+      nonExistentValue(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Dog', value: 'dog' },
+        ],
+        undefined,
+      ),
+    ).toBe(false);
+    expect(
+      nonExistentValue(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Dog', value: 'dog' },
+        ],
+        '',
+      ),
+    ).toBe(false);
+    expect(
+      nonExistentValue(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Dog', value: 'dog' },
+        ],
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+        ],
+      ),
+    ).toBe(false);
+    expect(
+      nonExistentValue(
+        [
+          { label: 'Cat', value: 'cat' },
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Dog', value: 'dog' },
+        ],
+        [
+          { label: 'Mouse', value: 'mouse' },
+          { label: 'Vampire', value: 'vampire' },
+        ],
+      ),
+    ).toBe(true);
+  });
+});

package/src/components/side-bar/container.module.less

@@ -0,0 +1,29 @@
+@import '../../style/variables.less';
+
+.oContent {
+  @media print {
+    position: absolute;
+    left: 0;
+    top: 0;
+    overflow: visible;
+    padding: 0 !important;
+  }
+
+  background-color: var(--color-background);
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  top: @topbar_height;
+  left: @sidebar_width_collapsed;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.oContentWithPadding {
+  padding: 1.5rem 1.5rem 0 1.5rem;
+}
+
+.oContentNoSideBar {
+  left: 0;
+}

package/src/components/side-bar/link.jsx

@@ -0,0 +1,83 @@
+import React, { memo } from 'react';
+import cx from 'classnames';
+import isEqual from 'react-fast-compare';
+import styles from './side-bar.module.less';
+import { Tooltip } from '../tooltip/tooltip';
+import { Icon } from '../icon/icon';
+import { Badge } from '../badge/badge';
+import { styleVariables } from '../../helpers/styles';
+
+const TooltipIcon = memo(
+  ({ isOpen, label, icon, invalid }) => {
+    const Unbadged = () => (
+      <Tooltip
+        text={label}
+        enabled={!isOpen}
+        placement="right-center"
+        possiblePlacements={['right-center']}
+        triggerOffset={30}
+        fontSize={16}
+        padding="10px 16px"
+        display="block"
+      >
+        <Icon icon={icon} size={30} color="white" />
+      </Tooltip>
+    );
+
+    const Badged = () => (
+      <Badge small margin="-2px" color={styleVariables.col_danger} title="!">
+        <Unbadged />
+      </Badge>
+    );
+
+    return (
+      <>
+        <span className={styles.icon}>
+          {invalid ? <Badged /> : <Unbadged />}
+        </span>
+        <span className={styles.label}>{label}</span>
+      </>
+    );
+  },
+  /*
+    Only re-render if props have changed
+    Re-rendering tooltips when not necessary causes 'ghost tooltip' issues,
+    because re-renders cause mouse events to get swallowed, which prevents
+    tooltips closing when the main thread is blocked
+    We use a deep equality check because the the label can theoretically be JSX
+   */
+  (prevProps, nextProps) => isEqual(prevProps, nextProps),
+);
+
+export const Link = ({ isOpen, items, sectionIndex, onClick, testId }) => {
+  return (
+    <div className={styles.list}>
+      {items.map((link, i) => {
+        const key = `${sectionIndex}_${i}`;
+        return (
+          <a
+            href={link.value}
+            className={cx(
+              styles.item,
+              link.isActive ? styles.active : '',
+              link.isExperimental ? styles.experimental : '',
+            )}
+            key={key}
+            onClick={(evt) =>
+              onClick(evt, link.value, link.label, link.onClick)
+            }
+            data-testid={testId}
+          >
+            <TooltipIcon
+              key={key}
+              label={link.label}
+              icon={link.icon}
+              invalid={link.invalid}
+              isOpen={isOpen}
+            />
+          </a>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/side-bar/sections.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Link } from './link';
+import styles from './side-bar.module.less';
+
+export const Sections = ({ isOpen, sections, onClick }) => {
+  return (
+    <>
+      {sections.map((section, i) => (
+        <React.Fragment key={i}>
+          <h5 className={styles.subtitle}>{section.heading.toUpperCase()}</h5>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <Link
+            isOpen={isOpen}
+            items={section.items}
+            sectionindex={i}
+            onClick={onClick}
+            testId={section.testId}
+          />
+        </React.Fragment>
+      ))}
+    </>
+  );
+};