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

package/src/components/heading/heading.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { FaQuestionCircle, FaBook } from 'react-icons/fa';
+import { Icon } from '../icon/icon';
+import { Tooltip } from '../tooltip/tooltip';
+import styles from './heading.module.less';
+
+export const IconWrapper = ({
+  onClick,
+  icon,
+  isHelp,
+  isLock,
+  isFaint,
+  testId,
+}) => {
+  return (
+    onClick && (
+      <span
+        onClick={(evt) => {
+          evt.stopPropagation();
+          if (onClick) {
+            onClick(evt);
+          }
+        }}
+        className={cx(
+          styles.icon,
+          isHelp ? styles.help : '',
+          isLock ? styles.lock : '',
+          isFaint ? styles.faint : '',
+        )}
+        data-testid={testId}
+      >
+        <Icon icon={icon} />
+      </span>
+    )
+  );
+};
+
+export const Heading = ({
+  children,
+  onClickHelp,
+  onClick,
+  onIconClick,
+  icon,
+  libraryIcon,
+  marginBottom,
+  top,
+  testId,
+}) => {
+  return (
+    <div
+      className={cx(styles.heading, top ? styles.top : '')}
+      style={{ marginBottom }}
+      onClick={(evt) => {
+        if (onClick) {
+          onClick(evt);
+        }
+      }}
+      data-testid={testId}
+    >
+      {children}
+      <div className={styles.icons}>
+        {icon && <IconWrapper onClick={onIconClick} icon={icon} />}
+        {onClickHelp && (
+          <IconWrapper
+            onClick={onClickHelp}
+            icon={<FaQuestionCircle />}
+            isHelp
+          />
+        )}
+        {libraryIcon && (
+          <Tooltip text={libraryIcon?.tooltip ?? ''}>
+            <IconWrapper onClick={libraryIcon.onClick} icon={<FaBook />} />
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  );
+};
+
+Heading.defaultProps = {
+  onClick: null,
+  onClickHelp: null,
+  onIconClick: null,
+  icon: null,
+  libraryIcon: null,
+  marginBottom: null,
+  top: false,
+  testId: null,
+};
+
+Heading.propTypes = {
+  onClick: PropTypes.func,
+  onClickHelp: PropTypes.func,
+  onIconClick: PropTypes.func,
+  icon: PropTypes.node,
+  libraryIcon: PropTypes.shape({
+    onClick: PropTypes.func,
+    tooltip: PropTypes.string,
+  }),
+  marginBottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  top: PropTypes.bool,
+  testId: PropTypes.string,
+};

package/src/components/heading/heading.module.less

@@ -0,0 +1,59 @@
+@import '../../style/variables.less';
+
+.heading {
+  color: var(--color-text);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  padding: 0;
+
+  &.top {
+    font-size: 18px;
+    margin-bottom: 20px;
+    line-height: 1.2;
+  }
+
+  &:not(.top) {
+    font-size: 13px;
+    line-height: 20px;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+}
+
+.icons {
+  display: inline-flex;
+
+  > * {
+    margin-left: 8px;
+  }
+}
+
+.icon {
+  color: var(--color-text-faint);
+  cursor: pointer;
+  line-height: 0;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+
+  &.lock {
+    color: var(--color-text);
+  }
+
+  &.faint {
+    color: var(--color-text-faint);
+  }
+
+  &:hover,
+  &:focus {
+    color: var(--color-text-primary-hover);
+  }
+
+  &:active,
+  &.active {
+    color: var(--color-text-primary-active);
+  }
+}

package/src/components/heading/heading.stories.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { FaCheckCircle, FaPlus } from 'react-icons/fa';
+import { Heading, Flex } from '../../..';
+
+export default {
+  title: 'Basic/Heading',
+  component: Heading,
+  args: {
+    children: 'Heading',
+    top: false,
+  },
+};
+
+const Template = (args) => (
+  <Heading
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args}
+  />
+);
+
+export const Default = Template.bind({});
+
+export const Top = Template.bind({});
+Top.args = {
+  top: true,
+};
+
+export const CustomMargin = Template.bind({});
+CustomMargin.args = {
+  marginBottom: 50,
+};
+
+export const Help = Template.bind({});
+Help.args = {
+  onClickHelp: () => console.log('help!'),
+};
+
+export const LibraryIcon = Template.bind({});
+LibraryIcon.args = {
+  libraryIcon: {
+    onClick: () => {},
+    tooltip: 'Edit in library',
+  },
+};
+
+export const CustomIcon = Template.bind({});
+CustomIcon.args = {
+  icon: <FaPlus />,
+  onIconClick: () => console.log('clicked icon!'),
+};
+
+export const JSXContent = Template.bind({});
+JSXContent.args = {
+  children: (
+    <Flex alignItems="center" gap="10px">
+      Subheading
+      <FaCheckCircle />
+    </Flex>
+  ),
+};

package/src/components/icon/deprecated-icon.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import {
+  FaArrowDown,
+  FaArrowLeft,
+  FaArrowRight,
+  FaArrowUp,
+  FaChartLine,
+  FaCheck,
+  FaChevronDown,
+  FaChevronUp,
+  FaClone,
+  FaEdit,
+  FaEye,
+  FaEyeSlash,
+  FaFileImport, // vertically flipped reply (used in import context)
+  FaMinus,
+  FaPencilAlt, //pencil
+  FaPlus,
+  FaQuestion,
+  FaRegCircle, // for not found
+  FaRegCopy, // copy outline
+  FaSortAmountDown,
+  FaSortAmountUp,
+  FaStar,
+  FaSync,
+  FaTable,
+  FaTimes,
+  FaTrash,
+  FaUndo,
+} from 'react-icons/fa';
+
+export const DeprecatedIcon = ({ icon }) => {
+  switch (icon) {
+    case 'arrow down':
+      return <FaArrowDown />;
+    case 'arrow left':
+      return <FaArrowLeft />;
+    case 'arrow right':
+      return <FaArrowRight />;
+    case 'arrow up':
+      return <FaArrowUp />;
+    case 'chart line':
+      return <FaChartLine />;
+    case 'check':
+    case 'checkmark':
+      return <FaCheck />;
+    case 'close':
+    case 'times':
+      return <FaTimes />;
+    case 'question':
+      return <FaQuestion />;
+    case 'sort amount down':
+      return <FaSortAmountDown />;
+    case 'table':
+      return <FaTable />;
+    case 'trash':
+      return <FaTrash />;
+    case 'minus':
+      return <FaMinus />;
+    case 'add':
+    case 'plus':
+      return <FaPlus />;
+    case 'pencil':
+      return <FaPencilAlt />;
+    case 'edit':
+    case 'edit outline':
+      return <FaEdit />;
+    case 'chevron up':
+      return <FaChevronUp />;
+    case 'chevron down':
+      return <FaChevronDown />;
+    case 'undo':
+      return <FaUndo />;
+    case 'eye':
+      return <FaEye />;
+    case 'eye slash':
+      return <FaEyeSlash />;
+    case 'star':
+      return <FaStar />;
+    case 'clone':
+    case 'orange clone':
+      return <FaClone />;
+    case 'sort amount up':
+      return <FaSortAmountUp />;
+    case 'copy':
+    case 'copy outline':
+      return <FaRegCopy />;
+    case 'vertically flipped reply':
+      return <FaFileImport />;
+    case 'refresh':
+      return <FaSync />;
+    case '':
+      return null;
+    default:
+      return <FaRegCircle />; //just a default icon so it's obvious when missing
+  }
+};

package/src/components/icon/icon.jsx

@@ -0,0 +1,71 @@
+import React, { isValidElement, useContext } from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { ReactSVG } from 'react-svg';
+import { DeprecatedIcon } from './deprecated-icon';
+import styles from './icon.module.less';
+import { DisabledContext } from '../../helpers/disabled-context';
+
+/*
+  Icon wrapper component to support different icon formats:
+    - react-icons (default recommendation)
+    - SVG (for special cases)
+    - deprecated string names (for backwards compatibility with Semantic UI)
+ */
+
+export const Icon = ({ icon, onClick, clickable, color, size, testId }) => {
+  const disabledContext = useContext(DisabledContext);
+
+  return (
+    <div
+      className={cx(
+        styles.wrapper,
+        (clickable || onClick) && !disabledContext ? styles.clickable : '',
+      )}
+      style={{
+        color,
+        fill: color,
+        fontSize: size || 'inherit',
+        width: size || 'auto',
+        height: size || 'auto',
+      }}
+      onClick={(evt) => (onClick && !disabledContext ? onClick(evt) : {})}
+      data-testid={testId}
+    >
+      {isValidElement(icon) ? (
+        icon //react-icon
+      ) : typeof icon === 'string' && icon.includes('.svg') ? (
+        <ReactSVG
+          className={styles.customSvg}
+          beforeInjection={(svg) => {
+            if (size) {
+              svg.setAttribute('width', size);
+              svg.setAttribute('height', size);
+            }
+          }}
+          src={icon}
+        /> //SVG
+      ) : typeof icon === 'string' && icon.includes('.png') ? (
+        <img alt="icon" className={styles.customPng} src={icon} />
+      ) : typeof icon === 'string' ? (
+        <DeprecatedIcon icon={icon} /> //deprecated Semantic UI string name
+      ) : null}
+    </div>
+  );
+};
+
+Icon.defaultProps = {
+  clickable: false,
+  onClick: null,
+  testId: '',
+};
+
+Icon.propTypes = {
+  icon: PropTypes.oneOfType([
+    PropTypes.node, //JSX (react-icons)
+    PropTypes.string, //SVG (or deprecated string name)
+  ]).isRequired,
+  onClick: PropTypes.func,
+  clickable: PropTypes.bool,
+  testId: PropTypes.string,
+};

package/src/components/icon/icon.module.less

@@ -0,0 +1,33 @@
+@import '../../style/variables.less';
+
+.wrapper {
+  color: inherit;
+  fill: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  .customSvg {
+    line-height: 0; // Strips unneccessary whitespace
+  }
+
+  .customPng {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+}
+
+.clickable {
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-text-primary-hover) !important;
+    fill: var(--color-text-primary-hover) !important;
+  }
+
+  &:active {
+    color: var(--color-text-primary-active) !important;
+    fill: var(--color-text-primary-active) !important;
+  }
+}

package/src/components/icon/icon.stories.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { FaAngleDoubleRight } from 'react-icons/fa';
+import { Icon } from '../../..';
+import svgIcon from '../../images/icons/icons8-junction.svg';
+
+export default {
+  title: 'Basic/Icon',
+  component: Icon,
+  argTypes: {
+    color: { control: 'text' },
+    size: { control: 'text' },
+  },
+  args: {
+    icon: <FaAngleDoubleRight />,
+  },
+};
+
+const Template = (args) => (
+  <Icon
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args}
+  />
+);
+
+export const Default = Template.bind({});
+
+export const Size = Template.bind({});
+Size.args = { size: '100px' };
+
+export const Color = Template.bind({});
+Color.args = { color: 'var(--color-text-primary)' };
+
+export const CustomSVG = Template.bind({});
+CustomSVG.args = { icon: svgIcon, size: '14px' };
+
+export const Clickable = Template.bind({});
+Clickable.args = { onClick: () => {} };

package/src/components/icon/icons.example.module.less

@@ -0,0 +1,4 @@
+.middleAlignedInline {
+  display: flex;
+  align-items: center;
+}

package/src/components/input/input.jsx

@@ -0,0 +1,167 @@
+import React, { forwardRef, useContext } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './input.module.less';
+import { Tooltip } from '../tooltip/tooltip';
+import { isStringNumberOrNode } from '../../helpers/types';
+import { DisabledContext } from '../../helpers/disabled-context';
+
+/*
+  Gets the width when you want to set it based on the number of characters
+  Replacement for input size property which is hard to style
+*/
+export const widthOfCharacters = (characterCount) => {
+  const padding = '15px';
+  const multiplier = '0.675em';
+  return `calc((${characterCount} * ${multiplier}) + (2 * ${padding}))`;
+};
+
+export const Input = forwardRef(
+  (
+    {
+      error,
+      tooltip,
+      isInTable,
+      width: propWidth,
+      small,
+      onChange,
+      size,
+      placeholder,
+      value,
+      onKeyPress,
+      onFocus,
+      onBlur,
+      name,
+      type,
+      tabIndex,
+      disabled,
+      right,
+      warning,
+      groupOrder,
+      maxTooltipWidth,
+      testId,
+    },
+    ref,
+  ) => {
+    const disabledContext = useContext(DisabledContext);
+    const order = (() => {
+      if (groupOrder) {
+        switch (groupOrder) {
+          case 'first':
+            return styles.groupOrderFirst;
+          case 'last':
+            return styles.groupOrderLast;
+          default:
+            return styles.groupOrderMiddle;
+        }
+      }
+      return '';
+    })();
+
+    const width = propWidth || (size ? 'auto' : '100%');
+
+    return (
+      <div style={{ width }} className={order}>
+        <Tooltip
+          error={!!error}
+          warning={!!warning}
+          text={tooltip || error || warning}
+          enabled={
+            (tooltip && isStringNumberOrNode(tooltip)) ||
+            (error && isStringNumberOrNode(error)) ||
+            (warning && isStringNumberOrNode(warning)) ||
+            false
+          }
+          maxWidth={maxTooltipWidth}
+          display="block"
+          placement="bottom-center"
+        >
+          <input
+            type={type}
+            size={size || 20}
+            placeholder={placeholder}
+            value={value}
+            onChange={onChange}
+            onKeyPress={onKeyPress}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            name={name}
+            tabIndex={tabIndex}
+            autoComplete="off"
+            disabled={disabled || disabledContext}
+            className={cx(
+              styles.input,
+              error ? styles.error : warning ? styles.warning : '',
+              right ? styles.right : '',
+              small ? styles.small : '',
+              isInTable ? styles.isInTable : '',
+            )}
+            style={{ width }}
+            ref={ref}
+            data-testid={testId}
+          />
+        </Tooltip>
+      </div>
+    );
+  },
+);
+
+Input.defaultProps = {
+  error: null,
+  warning: null,
+  tooltip: null,
+  name: undefined,
+  type: 'text',
+  onChange: () => {},
+  onKeyPress: () => {},
+  onFocus: () => {},
+  onBlur: () => {},
+  placeholder: '',
+  small: false,
+  tabIndex: 0,
+  value: '',
+  disabled: false,
+  right: false,
+  groupOrder: null,
+  maxTooltipWidth: undefined,
+  width: undefined,
+  testId: undefined,
+  //deprecated props
+  size: null, //use width instead
+};
+
+Input.propTypes = {
+  error: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  warning: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  tooltip: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  name: PropTypes.string,
+  type: PropTypes.string,
+  onChange: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  small: PropTypes.bool,
+  placeholder: PropTypes.string,
+  tabIndex: PropTypes.number,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  disabled: PropTypes.bool,
+  right: PropTypes.bool,
+  groupOrder: PropTypes.string,
+  maxTooltipWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  testId: PropTypes.string,
+  //deprecated props:
+  size: PropTypes.number, //use width instead
+};