@oliasoft-open-source/react-ui-library 2.4.7 → 3.0.0

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

@@ -1,168 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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,
-};