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

package/src/components/actions/actions.shape.js

@@ -1,32 +0,0 @@
-import PropTypes from 'prop-types';
-
-const actionShape = PropTypes.shape({
-  label: PropTypes.string.isRequired,
-  icon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  onClick: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
-  primary: PropTypes.bool,
-  hidden: PropTypes.bool,
-  //optional, added as data-testid, e.g. for GUI tests
-  testId: PropTypes.string,
-});
-
-const subActionShape = PropTypes.shape({
-  icon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  testId: PropTypes.string,
-  subActions: PropTypes.arrayOf(actionShape).isRequired,
-});
-
-// Deprecated
-const childComponentShape = PropTypes.shape({
-  childComponent: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.node, //React component
-  ]).isRequired,
-  //optional, added as data-testid, e.g. for GUI tests
-  testId: PropTypes.string,
-});
-
-export const actionsShape = PropTypes.arrayOf(
-  PropTypes.oneOfType([actionShape, subActionShape, childComponentShape]),
-);

package/src/components/actions/actions.stories.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import {
-  FaArrowDown,
-  FaArrowUp,
-  FaDownload,
-  FaPlus,
-  FaQuestionCircle,
-} from 'react-icons/fa';
-import { Actions } from './actions';
-
-const actions = [
-  {
-    label: 'Download',
-    icon: <FaDownload />,
-    onClick: () => {},
-    testId: 'download',
-  },
-  {
-    label: 'Help',
-    icon: <FaQuestionCircle />,
-    onClick: () => {},
-    disabled: true,
-    testId: 'help',
-  },
-  {
-    label: 'More',
-    testId: 'more',
-    subActions: [
-      {
-        label: 'Move Up',
-        icon: <FaArrowUp />,
-        disabled: true,
-        onClick: () => {},
-        testId: 'move-up',
-      },
-      {
-        label: 'Move Down',
-        icon: <FaArrowDown />,
-        onClick: () => {},
-        testId: 'move-down',
-      },
-    ],
-  },
-  {
-    primary: true,
-    label: 'Add',
-    icon: <FaPlus />,
-    onClick: () => {},
-    testId: 'add',
-  },
-];
-
-export default {
-  title: 'Basic/Actions',
-  component: Actions,
-  args: {
-    actions,
-    right: false,
-  },
-  decorators: [
-    (story) => <div style={{ display: 'inline-flex' }}>{story()}</div>,
-  ],
-  parameters: {
-    docs: {
-      source: {
-        excludeDecorators: true,
-      },
-    },
-  },
-};
-
-const Template = (args) => (
-  <Actions
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...args}
-  />
-);
-
-export const Default = Template.bind({});

package/src/components/badge/badge.jsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import styles from './badge.module.less';
-
-const isDark = (hexColor) => {
-  // https://stackoverflow.com/a/12043228/942635
-  const c = hexColor.substring(1); // strip #
-  const rgb = parseInt(c, 16); // convert RRGGBB to decimal
-  /* eslint-disable no-bitwise*/
-  const r = (rgb >> 16) & 0xff; // extract red
-  const g = (rgb >> 8) & 0xff; // extract green
-  const b = (rgb >> 0) & 0xff; // extract blue
-  /* eslint-enable no-bitwise*/
-  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
-  return luma < 128;
-};
-
-export const Badge = ({ children, color, title, dot, margin, small }) => {
-  const visible = !(title === null && dot === null);
-  return (
-    <div className={styles.wrapper}>
-      {visible && (
-        <sup
-          className={cx(
-            styles.badge,
-            isDark(color) ? styles.dark : styles.light,
-            title !== null ? styles.label : styles.dot,
-            small ? styles.small : '',
-            children ? styles.hasChildren : '',
-          )}
-          style={{ background: color || undefined, margin }}
-        >
-          {title}
-        </sup>
-      )}
-      {children}
-    </div>
-  );
-};
-
-Badge.defaultProps = {
-  children: null,
-  color: '',
-  title: null,
-  dot: null,
-  margin: null,
-  small: false,
-};
-
-Badge.propTypes = {
-  children: PropTypes.node,
-  color: PropTypes.string,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  dot: PropTypes.bool,
-  margin: PropTypes.string,
-  small: PropTypes.bool,
-};

package/src/components/badge/badge.module.less

@@ -1,55 +0,0 @@
-@import '../../style/variables.less';
-
-.wrapper {
-  display: inline-flex;
-  position: relative;
-}
-
-.badge {
-  background: var(--color-background-primary);
-  display: inline-block;
-  position: static;
-
-  &.label {
-    line-height: 22px;
-    min-width: 22px;
-    padding: 0 5px;
-    font-size: 12px;
-    font-weight: 400;
-    text-align: center;
-    white-space: nowrap;
-    border-radius: 11px;
-    font-weight: bold;
-    letter-spacing: normal;
-
-    &.dark {
-      color: #fff;
-    }
-
-    &.light {
-      color: rgba(0, 0, 0, 0.6);
-    }
-  }
-
-  &.small {
-    line-height: 13px;
-    min-width: 13px;
-    font-size: 9px;
-    border-radius: 6.5px;
-  }
-
-  &.dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 100%;
-  }
-
-  &.hasChildren {
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform: translate(50%, -50%);
-    transform-origin: 100% 0%;
-    z-index: 3;
-  }
-}

package/src/components/badge/badge.stories.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { Badge, Button } from '../../..';
-
-export default {
-  title: 'Basic/Badge',
-  component: Badge,
-  args: {
-    title: '3',
-    color: '',
-    small: false,
-    children: <Button name="example" label="Button" onClick={() => {}} />,
-  },
-};
-
-const Template = (args) => (
-  <Badge
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...args}
-  />
-);
-
-export const Default = Template.bind({});
-
-export const Small = Template.bind({});
-Small.args = { small: true };
-
-export const Dot = Template.bind({});
-Dot.args = { dot: true, title: undefined };
-
-export const Standalone = Template.bind({});
-Standalone.args = { children: undefined };

package/src/components/breadcrumb/breadcrumb.jsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Link } from './link';
-import styles from './breadcrumb.module.less';
-
-export const Breadcrumb = ({ links, small }) => {
-  return (
-    <div className={cx(styles.breadcrumb, small && styles.small)}>
-      {links.map((link, i) => {
-        const isFinal = links.length === i + 1;
-        const { type, label, url, onClick, active, disabled, element } = link;
-        return (
-          <span key={i}>
-            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <Link
-              type={type}
-              label={label}
-              url={url}
-              onClick={onClick}
-              active={active}
-              disabled={disabled}
-              element={element}
-            />
-            {!isFinal && <span className={styles.separator}>/</span>}
-          </span>
-        );
-      })}
-    </div>
-  );
-};
-
-Breadcrumb.defaultProps = {
-  small: false,
-};
-
-Breadcrumb.propTypes = {
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      type: PropTypes.oneOf(['label', 'link', 'custom']),
-      label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      url: PropTypes.string,
-      onClick: PropTypes.func,
-      active: PropTypes.bool,
-      element: PropTypes.node,
-    }),
-  ).isRequired,
-  small: PropTypes.bool,
-};

package/src/components/breadcrumb/breadcrumb.module.less

@@ -1,39 +0,0 @@
-@import '../../style/variables.less';
-
-.breadcrumb {
-  font-size: 1.5rem;
-
-  &.small {
-    font-size: inherit;
-  }
-
-  .labelContainer {
-    color: var(--color-text-primary);
-    cursor: pointer;
-
-    &:hover {
-      color: var(--color-text-primary-hover);
-    }
-
-    &:active {
-      color: var(--color-text-primary-active);
-    }
-
-    &.active {
-      color: inherit;
-      cursor: default;
-      pointer-events: none;
-    }
-
-    &.disabled {
-      color: var(--color-text-faint);
-      cursor: default;
-      pointer-events: none;
-    }
-  }
-
-  .separator {
-    margin: 0 10px;
-    color: var(--color-border);
-  }
-}

package/src/components/breadcrumb/breadcrumb.stories.jsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { Breadcrumb } from '../../..';
-
-export default {
-  title: 'Navigation/Breadcrumb',
-  component: Breadcrumb,
-  args: {
-    links: [
-      {
-        label: 'Animals',
-        onClick: () => console.log('label clicked'),
-      },
-      {
-        label: 'Mammals',
-        url: 'animals/mammals',
-        disabled: true,
-      },
-      {
-        label: 'Cats',
-        url: 'animals/mammals/cats',
-      },
-      {
-        type: 'custom', //e.g. react router <Link>
-        element: <span>Large</span>,
-      },
-      {
-        label: 'Tiger',
-        url: 'animals/mammals/cats/tiger',
-        active: true,
-      },
-    ],
-  },
-};
-
-const Template = (args) => (
-  <Breadcrumb
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...args}
-  />
-);
-
-export const Default = Template.bind({});
-
-export const Small = Template.bind({});
-Small.args = { small: true };

package/src/components/breadcrumb/link.jsx

@@ -1,31 +0,0 @@
-import React, { isValidElement, useContext } from 'react';
-import cx from 'classnames';
-import styles from './breadcrumb.module.less';
-import { DisabledContext } from '../../helpers/disabled-context';
-
-export const Link = ({
-  type,
-  label,
-  url,
-  onClick,
-  active,
-  disabled,
-  element,
-}) => {
-  const disabledContext = useContext(DisabledContext);
-
-  const isLink = type === 'link' && url !== undefined;
-  const isCustom = type === 'custom' && isValidElement(element);
-  return (
-    <span
-      onClick={onClick}
-      className={cx(
-        styles.labelContainer,
-        active && styles.active,
-        (disabled || disabledContext) && styles.disabled,
-      )}
-    >
-      {isLink ? <a href={url}>{label}</a> : isCustom ? element : label}
-    </span>
-  );
-};

package/src/components/button/button.jsx

@@ -1,156 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import buttonStyles from './button.module.less';
-import { Icon } from '../icon/icon';
-import { Spinner } from '../spinner/spinner';
-import { DisabledContext } from '../../helpers/disabled-context';
-
-export const Button = ({
-  active,
-  basic,
-  colored,
-  disabled,
-  groupOrder,
-  icon,
-  inverted,
-  label,
-  loading,
-  name,
-  onClick,
-  pill,
-  round,
-  small,
-  width,
-  title,
-  styles,
-  testId,
-}) => {
-  const disabledContext = useContext(DisabledContext);
-
-  const color = (() => {
-    if (colored) {
-      switch (colored) {
-        case 'danger':
-        case 'red':
-          return buttonStyles.red;
-        case 'success':
-        case 'green':
-          return buttonStyles.green;
-        case 'muted':
-          return buttonStyles.muted;
-        default:
-          return buttonStyles.orange;
-      }
-    }
-    return '';
-  })();
-
-  const order = (() => {
-    if (groupOrder) {
-      switch (groupOrder) {
-        case 'first':
-          return buttonStyles.groupOrderFirst;
-        case 'last':
-          return buttonStyles.groupOrderLast;
-        default:
-          return buttonStyles.groupOrderMiddle;
-      }
-    }
-    return '';
-  })();
-
-  return (
-    <button
-      type="button"
-      className={cx(
-        buttonStyles.button,
-        active ? buttonStyles.active : '',
-        basic ? buttonStyles.basic : '',
-        color,
-        disabled || disabledContext ? buttonStyles.disabled : '',
-        (icon || loading) && !label ? buttonStyles.iconOnly : '',
-        inverted ? buttonStyles.inverted : '',
-        order,
-        pill ? buttonStyles.pill : '',
-        round ? buttonStyles.round : '',
-        small ? buttonStyles.small : '',
-        styles,
-      )}
-      disabled={disabled || disabledContext}
-      name={name}
-      onClick={onClick}
-      {...(title ? { title } : {})} // eslint-disable-line react/jsx-props-no-spreading
-      style={{ width }}
-      data-testid={testId}
-    >
-      {icon && (
-        <span className={buttonStyles.icon}>
-          <Icon icon={icon} />
-        </span>
-      )}
-      {loading && (
-        <span className={buttonStyles.icon}>
-          <Spinner
-            small={!small /*regular button use small spinner*/}
-            tiny={small /*small button use tiny spinner*/}
-            dark={!colored && !basic}
-            colored={basic}
-          />
-        </span>
-      )}
-      {label}
-    </button>
-  );
-};
-
-Button.defaultProps = {
-  active: false,
-  basic: false,
-  colored: false,
-  disabled: false,
-  groupOrder: null,
-  icon: null,
-  label: '',
-  loading: false,
-  name: undefined,
-  pill: false,
-  round: false,
-  small: false,
-  styles: '',
-  width: '',
-  title: '',
-  onClick: () => {},
-  testId: undefined,
-  inverted: false,
-};
-
-Button.propTypes = {
-  /** Show active state (non-colored buttons only) */
-  active: PropTypes.bool,
-  /** Link style button */
-  basic: PropTypes.bool,
-  colored: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  disabled: PropTypes.bool,
-  icon: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.string, //deprecated
-  ]),
-  /**  Position of button in `ButtonGroup` or `InputGroup` */
-  groupOrder: PropTypes.string,
-  label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  title: PropTypes.string,
-  /** Adds activity indicator */
-  loading: PropTypes.bool,
-  name: PropTypes.string,
-  onClick: PropTypes.func,
-  round: PropTypes.bool,
-  small: PropTypes.bool,
-  styles: PropTypes.string,
-  width: PropTypes.string,
-  testId: PropTypes.string,
-  /** *Deprecated* */
-  pill: PropTypes.bool,
-  /** *Deprecated* */
-  inverted: PropTypes.bool,
-};