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

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

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

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

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

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

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

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

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

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

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

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