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

package/src/components/menu/menu.stories-data.jsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { FaChessKing, FaPencilAlt, FaTrash } from 'react-icons/fa';
+
+const onFileChange = async (selectedFiles) => {
+  await console.log('onFileChange', selectedFiles);
+};
+
+export const menu = {
+  label: 'Select',
+  trigger: 'DropDownButton',
+  sections: [
+    { type: 'Heading', label: 'Heading' },
+    {
+      type: 'Option',
+      label: 'King',
+      onClick: () => {},
+    },
+    {
+      type: 'Option',
+      label: 'Queen',
+      selected: true,
+      onClick: () => {},
+    },
+    { type: 'Divider' },
+    {
+      type: 'Option',
+      label: 'Knight',
+      disabled: true,
+      onClick: () => {},
+    },
+    {
+      type: 'Option',
+      label: 'Bishop',
+      onClick: () => {},
+    },
+  ],
+};
+
+export const menuFileUpload = {
+  ...menu,
+  sections: menu.sections.map((section) =>
+    section.type === 'Option'
+      ? {
+          ...section,
+          onClick: undefined,
+          onChange: onFileChange,
+          upload: true,
+        }
+      : section,
+  ),
+};
+
+export const menuDescriptionOnRight = {
+  label: '123 m',
+  trigger: 'DropDownButton',
+  sections: [
+    {
+      type: 'Option',
+      label: '403.5433',
+      description: 'ft',
+      inline: true,
+      onClick: () => {},
+    },
+    {
+      type: 'Option',
+      label: '123',
+      description: 'm',
+      inline: true,
+      onClick: () => {},
+      selected: true,
+    },
+    {
+      type: 'Option',
+      label: '0.123',
+      description: 'km',
+      inline: true,
+      onClick: () => {},
+    },
+  ],
+};
+
+const actions = [
+  {
+    label: 'Delete',
+    icon: <FaTrash />,
+    onClick: () => {},
+  },
+  {
+    label: 'Rename',
+    icon: <FaPencilAlt />,
+    onClick: () => {},
+  },
+];
+
+export const menuActions = {
+  ...menu,
+  sections: menu.sections.map((section) =>
+    section.type === 'Option'
+      ? {
+          ...section,
+          inline: true,
+          actions,
+        }
+      : section,
+  ),
+};
+
+export const menuIcons = {
+  ...menu,
+  sections: menu.sections.map((section) =>
+    section.type === 'Option' || section.type === 'Heading'
+      ? {
+          ...section,
+          icon: <FaChessKing />,
+          onClick: () => {},
+        }
+      : section,
+  ),
+};
+
+export const menuSubmenus = {
+  ...menu,
+  sections: Array(3).fill({
+    type: 'Menu',
+    trigger: 'Text',
+    menu: {
+      trigger: 'Text',
+      placement: 'right-start',
+      label: 'Parent',
+      sections: Array(3).fill({
+        type: 'Option',
+        label: 'Child',
+        onClick: () => {},
+      }),
+    },
+  }),
+};
+
+export const menuEmpty = {
+  label: 'No sections',
+  trigger: 'DropDownButton',
+  sections: [],
+};
+
+export const menuShowAll = {
+  label: 'Select',
+  trigger: 'DropDownButton',
+  showAllButton: {
+    visible: true,
+    showAllTitle: 'Show all...',
+    showLessTitle: 'Show less...',
+    additionalSections: [
+      {
+        type: 'Divider',
+      },
+      {
+        type: 'Option',
+        label: 'This item is always shown',
+        onClick: () => {},
+      },
+    ],
+  },
+  sections: Array(8).fill({
+    type: 'Option',
+    label: 'Item',
+    onClick: () => {},
+  }),
+};

package/src/components/menu/menu.stories.jsx

@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import { FaCog } from 'react-icons/fa';
+import { Menu, Button, Flex } from '../../..';
+import * as storyData from './menu.stories-data';
+
+export default {
+  title: 'Basic/Menu',
+  component: Menu,
+  args: {
+    menu: storyData.menu,
+    maxHeight: '300px',
+  },
+};
+
+const Template = (args) => (
+  <Menu
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args}
+  />
+);
+export const Default = Template.bind({});
+
+export const PrimaryTrigger = Template.bind({});
+PrimaryTrigger.args = { menu: { ...storyData.menu, colored: true } };
+
+export const ErrorTrigger = Template.bind({});
+ErrorTrigger.args = { menu: { ...storyData.menu, colored: 'danger' } };
+
+export const TextTrigger = Template.bind({});
+TextTrigger.args = { menu: { ...storyData.menu, trigger: 'Text' } };
+
+export const CustomTrigger = Template.bind({});
+CustomTrigger.args = {
+  menu: {
+    ...storyData.menu,
+    trigger: 'Component',
+    component: (
+      <div>
+        <FaCog />
+      </div>
+    ),
+  },
+};
+
+export const FileUpload = Template.bind({});
+FileUpload.args = { menu: storyData.menuFileUpload };
+
+export const DescriptionOnRight = Template.bind({});
+DescriptionOnRight.args = { menu: storyData.menuDescriptionOnRight };
+
+export const Actions = Template.bind({});
+Actions.args = { menu: storyData.menuActions };
+
+export const Icons = Template.bind({});
+Icons.args = { menu: storyData.menuIcons };
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+  disabled: true,
+};
+
+export const Badge = Template.bind({});
+Badge.args = {
+  badgeTitle: '3',
+};
+
+export const Dot = Template.bind({});
+Dot.args = {
+  badgeDot: true,
+};
+
+export const Empty = Template.bind({});
+Empty.args = { menu: storyData.menuEmpty };
+
+export const Submenus = Template.bind({});
+Submenus.args = { menu: storyData.menuSubmenus };
+
+export const WithoutCloseOnOptionClick = Template.bind({});
+WithoutCloseOnOptionClick.args = { closeOnOptionClick: false };
+
+export const RightClickContextMenu = Template.bind({});
+RightClickContextMenu.args = {
+  contextMenu: true,
+  menu: { ...storyData.menu, trigger: 'Text', label: 'Right-click me' },
+};
+
+export const FullWidth = Template.bind({});
+FullWidth.args = {
+  width: '100%',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  menu: { ...storyData.menu, small: true },
+};
+
+export const JSXContent = Template.bind({});
+JSXContent.args = {
+  menu: {
+    ...storyData.menu,
+    sections: <div>Testing</div>,
+  },
+};
+
+export const ShowAll = Template.bind({});
+ShowAll.args = {
+  menu: storyData.menuShowAll,
+  maxHeight: undefined,
+};
+
+export const ControlOpenStateFromParent = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Flex gap>
+      <Menu menu={storyData.menu} open={open} setOpen={setOpen} />
+      <Button label="Open" onClick={() => setOpen(true)} disabled={open} />
+      <Button label="Close" onClick={() => setOpen(false)} disabled={!open} />
+    </Flex>
+  );
+};

package/src/components/menu/menu.test.js

@@ -0,0 +1,58 @@
+import {
+  childPath,
+  parentPath,
+  closePath,
+  siblings,
+  registerClose,
+} from './layer/path';
+
+const tree = {
+  close: () => {},
+  sections: [
+    null,
+    null,
+    {
+      close: () => {},
+    },
+    {
+      close: () => {},
+      sections: [
+        null,
+        null,
+        null,
+        {
+          close: () => {},
+        },
+      ],
+    },
+  ],
+};
+
+describe('menu paths', () => {
+  test('parentPath', () => {
+    expect(parentPath('')).toBe('');
+    expect(parentPath('foo.bar.baz')).toBe('foo.bar.baz');
+    expect(parentPath('foo.bar[45]')).toBe('foo.bar');
+  });
+  test('childPath', () => {
+    expect(childPath('', 6)).toBe('sections[6]');
+    expect(childPath('foo', 2)).toBe('foo.sections[2]');
+  });
+  test('closePath', () => {
+    expect(closePath('')).toBe('close');
+    expect(closePath('foo.bar.baz')).toBe('foo.bar.baz.close');
+  });
+  test('siblings', () => {
+    expect(siblings(tree, 'sections[3].sections[3]')).toStrictEqual(
+      tree.sections[3].sections,
+    );
+  });
+  test('registerClose', () => {
+    expect(registerClose(tree, 'sections[3]', 'monkeys')).toStrictEqual({
+      ...tree,
+      sections: tree.sections.map((s, i) =>
+        i === 3 ? { ...s, close: 'monkeys' } : s,
+      ),
+    });
+  });
+});

package/src/components/menu/trigger/button.jsx

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+import cx from 'classnames';
+import { FaAngleDown } from 'react-icons/fa';
+import styles from '../menu.module.less';
+import { Button as BasicButton } from '../../button/button';
+import { DisabledContext } from '../../../helpers/disabled-context';
+
+export const Button = ({
+  trigger,
+  label,
+  colored,
+  small,
+  width,
+  disabled,
+  groupOrder,
+  loading,
+}) => {
+  const disabledContext = useContext(DisabledContext);
+
+  const buttonLabel =
+    trigger === 'Button' ? (
+      label
+    ) : trigger === 'DropDownButton' ? (
+      <span className={styles.middleAlignedInline}>
+        <span className={styles.buttonLabel}>{label}</span>
+        <FaAngleDown className={styles.buttonCaret} />
+      </span>
+    ) : null;
+
+  return (
+    <div
+      className={cx(
+        styles.trigger,
+        disabled || disabledContext ? styles.disabled : null,
+      )}
+      style={{ width }}
+    >
+      <BasicButton
+        label={buttonLabel}
+        colored={colored}
+        small={small}
+        width={width}
+        groupOrder={groupOrder}
+        onClick={() => {} /*handled in parent*/}
+        loading={loading}
+        disabled={disabled}
+      />
+    </div>
+  );
+};

package/src/components/menu/trigger/component.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import cx from 'classnames';
+import styles from '../menu.module.less';
+
+export const Component = ({ component, disabled, testId }) => {
+  return (
+    <div
+      className={cx(styles.component, disabled ? styles.disabled : null)}
+      data-testid={testId}
+    >
+      {component}
+    </div>
+  );
+};

package/src/components/menu/trigger/text.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import cx from 'classnames';
+import { FaAngleDown, FaAngleRight } from 'react-icons/fa';
+import styles from '../menu.module.less';
+
+export const Text = ({ label, carat, disabled, isOpen }) => {
+  return (
+    <div
+      className={cx(
+        styles.trigger,
+        disabled ? styles.disabled : null,
+        isOpen ? styles.active : null,
+      )}
+    >
+      <span className={styles.label} title={label}>
+        {label}
+      </span>
+      {carat && carat === 'right' ? (
+        <FaAngleRight className={styles.arrow} />
+      ) : carat && carat === 'down' ? (
+        <FaAngleDown className={styles.arrow} />
+      ) : null}
+    </div>
+  );
+};

package/src/components/menu/trigger/trigger.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Badge } from '../../badge/badge';
+import { Button } from './button';
+import { Text } from './text';
+import { Component } from './component';
+import styles from '../menu.module.less';
+
+export const Trigger = React.forwardRef(
+  (
+    {
+      isDisabled,
+      badgeTitle,
+      badgeDot,
+      loading,
+      width,
+      trigger,
+      label,
+      onClickTrigger,
+      colored,
+      small,
+      isNested,
+      contextMenu,
+      component,
+      groupOrder,
+      fullHeight,
+      isOpen,
+      testId,
+    },
+    ref,
+  ) => {
+    const triggerElement =
+      trigger === 'Button' || trigger === 'DropDownButton' ? (
+        <Button
+          trigger={trigger}
+          label={label}
+          colored={colored}
+          small={small}
+          width={width}
+          disabled={isDisabled}
+          groupOrder={groupOrder}
+          loading={loading}
+        />
+      ) : trigger === 'Text' ? (
+        <Text
+          label={label}
+          disabled={isDisabled}
+          carat={!contextMenu && (isNested ? 'right' : 'down')}
+          isOpen={isOpen}
+        />
+      ) : trigger === 'Component' ? (
+        <Component component={component} disabled={isDisabled} />
+      ) : null;
+    const wrappedTrigger =
+      !isNested && (badgeTitle || badgeDot) ? (
+        <Badge title={badgeTitle} dot={badgeDot} small={!badgeDot}>
+          {triggerElement}
+        </Badge>
+      ) : (
+        triggerElement
+      );
+    return (
+      <div
+        ref={ref}
+        className={styles.wrapper}
+        style={
+          width
+            ? { width }
+            : {
+                ...(fullHeight && {
+                  height: '100%',
+                  display: 'flex',
+                }),
+              }
+        }
+        onClick={(evt) => {
+          evt.stopPropagation();
+          evt.preventDefault();
+          onClickTrigger();
+        }}
+        data-testid={testId}
+      >
+        {wrappedTrigger}
+      </div>
+    );
+  },
+);

package/src/components/message/dismiss.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import cx from 'classnames';
+import { FaTimes } from 'react-icons/fa';
+import styles from './message.module.less';
+
+export const Dismiss = ({ type, onClose, isInToast }) => {
+  return (
+    <div
+      className={cx(
+        styles.dismiss,
+        isInToast ? styles.absolute : '',
+        type === 'Info'
+          ? styles.info
+          : type === 'Success'
+          ? styles.success
+          : type === 'Warning'
+          ? styles.warning
+          : type === 'Error'
+          ? styles.error
+          : null,
+      )}
+    >
+      <FaTimes onClick={onClose} />
+    </div>
+  );
+};

package/src/components/message/message.jsx

@@ -0,0 +1,137 @@
+import React, { useReducer } from 'react';
+import PropTypes from 'prop-types';
+import {
+  FaInfoCircle,
+  FaCheckCircle,
+  FaExclamationCircle,
+  FaExclamationTriangle,
+} from 'react-icons/fa';
+import cx from 'classnames';
+import { Dismiss } from './dismiss';
+import styles from './message.module.less';
+
+const initialState = {
+  detailsVisible: false,
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'TOGGLE_DETAILS': {
+      return {
+        ...state,
+        detailsVisible: !state.detailsVisible,
+      };
+    }
+    default:
+      return state;
+  }
+};
+
+const Details = ({ details, visible, dispatch }) => {
+  return (
+    <div>
+      <div
+        className={cx(styles.legendToggle)}
+        onClick={() => dispatch({ type: 'TOGGLE_DETAILS' })}
+      >
+        {visible ? 'Hide details' : 'Show details'}
+      </div>
+      {visible ? <div className={styles.detailsText}>{details}</div> : null}
+    </div>
+  );
+};
+
+const DialogIcon = ({ type }) => {
+  const size = 16;
+  switch (type) {
+    case 'Success':
+      return <FaCheckCircle size={size} />;
+    case 'Warning':
+      return <FaExclamationCircle size={size} />;
+    case 'Error':
+      return <FaExclamationTriangle size={size} />;
+    default:
+      return <FaInfoCircle size={size} />;
+  }
+};
+
+export const Message = ({ message }) => {
+  const {
+    visible,
+    type,
+    icon,
+    heading,
+    content,
+    details,
+    withDismiss,
+    onClose,
+    width,
+    maxHeight,
+  } = message;
+  const [state, dispatch] = useReducer(reducer, initialState);
+  return (
+    <>
+      {visible ? (
+        <div
+          className={cx(
+            styles.container,
+            width ? styles.block : null,
+            type === 'Success'
+              ? styles.success
+              : type === 'Warning'
+              ? styles.warning
+              : type === 'Error'
+              ? styles.error
+              : styles.info,
+          )}
+          style={{ width, maxHeight }}
+        >
+          <div>
+            {icon ? (
+              <div className={styles.icon}>
+                <DialogIcon type={type} />
+              </div>
+            ) : null}
+          </div>
+          <div className={styles.content}>
+            {heading ? <div className={styles.heading}>{heading}</div> : null}
+            <div>{content}</div>
+            {details ? (
+              <Details
+                details={details}
+                visible={state.detailsVisible}
+                dispatch={() => dispatch({ type: 'TOGGLE_DETAILS' })}
+              />
+            ) : null}
+          </div>
+          {withDismiss ? <Dismiss type={type} onClose={onClose} /> : null}
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+const messageShape = PropTypes.shape({
+  visible: PropTypes.bool,
+  type: PropTypes.oneOf(['Info', 'Success', 'Warning', 'Error']),
+  icon: PropTypes.bool,
+  heading: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  content: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  details: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  withDismiss: PropTypes.bool,
+  onClose: PropTypes.func,
+  width: PropTypes.string,
+  maxHeight: PropTypes.string,
+});
+
+Message.propTypes = {
+  message: messageShape.isRequired,
+};