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

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

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

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

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

package/src/components/input/input.jsx

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

package/src/components/input/input.module.less

@@ -1,94 +0,0 @@
-@import '../../style/variables.less';
-@import '../../style/mixins.less';
-
-.input {
-  margin: 0;
-  outline: 0;
-  text-align: left;
-  font-family: @default_font;
-  padding: @input_padding_y @input_padding_x;
-  background: var(--color-background-input);
-  border: 1px solid var(--color-border);
-  color: var(--color-text);
-  border-radius: @input_border_radius;
-  transition: box-shadow 0.1s ease, border-color 0.1s ease;
-  box-shadow: none;
-  height: @input_height;
-  width: 100%;
-  font-weight: 400;
-  font-style: normal;
-  position: relative;
-
-  &::placeholder {
-    color: var(--color-text-faint);
-  }
-
-  &.isInTable {
-    .inputInTable();
-  }
-
-  &:hover,
-  &:focus {
-    z-index: 1;
-  }
-
-  &:hover {
-    border-color: var(--color-border-hover);
-  }
-
-  &:focus {
-    .inputFocus();
-  }
-
-  &.small {
-    font-size: @input_font_size_small;
-    height: @input_height_small;
-    padding: 0 @input_padding_small_x;
-    line-height: @input_height_small;
-  }
-
-  &.error {
-    .inputError();
-  }
-
-  &.warning {
-    .inputWarning();
-  }
-
-  &[disabled] {
-    .inputDisabled();
-  }
-
-  &.right {
-    text-align: right;
-  }
-}
-
-.groupOrderFirst,
-.groupOrderMiddle,
-.groupOrderLast {
-  flex: 1;
-
-  .input:hover,
-  .input:focus {
-    z-index: 2;
-  }
-}
-
-.groupOrderFirst,
-.groupOrderMiddle {
-  margin-right: -1px;
-
-  .input {
-    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-  }
-}
-
-.groupOrderLast,
-.groupOrderMiddle {
-  .input {
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-  }
-}

package/src/components/input/input.stories.jsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { useArgs } from '@storybook/addons';
-import { Input } from '../../..';
-
-export default {
-  title: 'Forms/Input',
-  component: Input,
-  args: {
-    disabled: false,
-    small: false,
-    placeholder: 'Placeholder',
-  },
-};
-
-const Template = (args) => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt) => {
-    updateArgs({ value: evt.target.value });
-  };
-  return (
-    <Input
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...args}
-      onChange={handleChange}
-    />
-  );
-};
-export const Default = Template.bind({});

package/src/components/input-group/input-group-addon/input-group-addon.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import styles from './input-group-addon.module.less';
-
-export const InputGroupAddon = ({ children, groupOrder, small }) => {
-  const order = (() => {
-    if (groupOrder) {
-      switch (groupOrder) {
-        case 'first':
-          return styles.groupOrderFirst;
-        case 'last':
-          return styles.groupOrderLast;
-        default:
-          return styles.groupOrderMiddle;
-      }
-    }
-    return '';
-  })();
-  return (
-    <span className={cx(styles.addon, order, small ? styles.small : '')}>
-      {children}
-    </span>
-  );
-};
-
-InputGroupAddon.defaultProps = {
-  groupOrder: null,
-  small: false,
-};
-
-InputGroupAddon.propTypes = {
-  children: PropTypes.node.isRequired,
-  groupOrder: PropTypes.string,
-  small: PropTypes.bool,
-};

package/src/components/input-group/input-group-addon/input-group-addon.module.less

@@ -1,31 +0,0 @@
-@import '../../../style/variables.less';
-
-.addon {
-  flex-shrink: 0;
-  border-radius: @input_border_radius;
-  border: 1px solid var(--color-border);
-  background: var(--color-background-disabled);
-  display: inline-flex;
-  align-items: center;
-  padding: 0 @input_padding_x;
-  color: var(--color-text-muted);
-  line-height: 1;
-}
-
-.small {
-  font-size: @input_font_size_small;
-  padding: 0 @input_padding_small_x;
-}
-
-.groupOrderFirst,
-.groupOrderMiddle {
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-  margin-right: -1px;
-}
-
-.groupOrderLast,
-.groupOrderMiddle {
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}

package/src/components/input-group/input-group.jsx

@@ -1,51 +0,0 @@
-import React, { Fragment, isValidElement } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import styles from './input-group.module.less';
-
-const isDOMTypeElement = (element) => {
-  return isValidElement(element) && typeof element.type === 'string';
-};
-
-export const InputGroup = ({ children, small, width }) => {
-  const childElements =
-    children instanceof Array
-      ? children.filter((c) => isValidElement(c))
-      : [children];
-  const elements = childElements.map((item, index) => {
-    const isDOMType = isDOMTypeElement(item);
-    const { groupOrder: groupOrderProp } = !isDOMType
-      ? item.props
-      : { groupOrder: null };
-    const count = childElements.length;
-    const isFirst = index === 0;
-    const isLast = index === count - 1;
-    const isOnly = !count || count === 1;
-    const groupOrder =
-      groupOrderProp ||
-      (isOnly ? null : isFirst ? 'first' : isLast ? 'last' : 'middle');
-    return isDOMType ? (
-      item
-    ) : (
-      <Fragment key={index}>
-        {React.cloneElement(item, { groupOrder, small })}
-      </Fragment>
-    );
-  });
-  return (
-    <div className={cx(styles.inputGroup)} style={{ width }}>
-      {elements}
-    </div>
-  );
-};
-
-InputGroup.defaultProps = {
-  small: false,
-  width: '100%',
-};
-
-InputGroup.propTypes = {
-  children: PropTypes.node.isRequired,
-  small: PropTypes.bool,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};

package/src/components/input-group/input-group.module.less

@@ -1,10 +0,0 @@
-@import '../../style/variables.less';
-
-.inputGroup {
-  display: flex;
-  max-width: 100%;
-
-  > *:not(:last-child) {
-    margin-right: -1px;
-  }
-}

package/src/components/input-group/input-group.stories.jsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import {
-  InputGroup,
-  InputGroupAddon,
-  Input,
-  Button,
-  Menu,
-  Select,
-} from '../../..';
-
-export default {
-  title: 'Forms/InputGroup',
-  component: InputGroup,
-  args: {},
-};
-
-const Template = (args) => {
-  return (
-    <InputGroup
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...args}
-    >
-      <InputGroupAddon>$</InputGroupAddon>
-      <Input width="100%" name="example" value="123" onChange={() => {}} />
-      <Select
-        options={[
-          { label: 'Aardvarks', value: 'termites' },
-          { label: 'Kangaroos', value: 'grass' },
-          { label: 'Monkeys', value: 'bananas' },
-          { label: 'Possums', value: 'slugs' },
-        ]}
-        onChange={() => {}}
-        value={{ label: 'Monkeys', value: 'bananas' }}
-        width="auto"
-        native
-      />
-      <Menu
-        menu={{
-          label: 'E-06/degC',
-          trigger: 'DropDownButton',
-          small: args.small,
-          sections: [
-            {
-              type: 'Option',
-              label: '403.5433',
-              description: 'ft',
-              inline: true,
-              onClick: () => {},
-            },
-            {
-              type: 'Option',
-              label: '0.123',
-              description: 'km',
-              inline: true,
-              onClick: () => {},
-            },
-            {
-              type: 'Option',
-              label: '4842.4608',
-              description: 'in',
-              inline: true,
-              onClick: () => {},
-            },
-          ],
-        }}
-      />
-      <Button name="example" label="Confirm" colored onClick={() => {}} />
-    </InputGroup>
-  );
-};
-export const Default = Template.bind({});
-
-export const FixedWidth = Template.bind({});
-FixedWidth.args = { width: '480px' };
-
-export const Small = Template.bind({});
-Small.args = { small: true };

package/src/components/input-validation.stories.mdx

@@ -1,61 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Input, TextArea, Select, RadioButton, FormRow, Field } from '../..';
-
-<Meta title="Input Validation" />
-
-# Input Validation
-
-## Select
-
-### Invalid states
-
-It's possible for a `Select` input to be in an invalid state, where a value is explicitly set via the `value` prop,
-but the option is not available for re-selection in the dropdown (i.e. not in the `options` prop). Some guidelines are
-provided here to help.
-
-**Avoid invalid values via the business logic**
-
-It's best to prevent invalid values from happening, via the application business logic.
-
-If they can happen, handling them is a concern of the business layer. The UI framework is generally only responsible
-for presentation.
-
-**Select will always display the value if it is explicitly set**
-
-If the `value` prop is set, it will be displayed, even if it is not available for re-selection from the `options` prop.
-The library does not hide or mask set values.
-
-**"Soft invalid" values**
-
-For a 'soft invalid' state, where the value is usable, but not available for re-reselection, the UI library automatically
-adds a warning state with a tooltip message: "Value no longer available for re-selection". Technically, this should be
-handled by the business logic, not the UI framework, but the behaviour exists for historical reasons.
-In the future it may be optional (via a prop), or deprecated/removed, so it's better to handle it properly in the
-application layer.
-
-<Canvas>
-  <FormRow>
-    <Select
-      width="200px"
-      options={['Rare', 'Medium', 'Well Done']}
-      value="Blue"
-    />
-  </FormRow>
-</Canvas>
-
-**"Hard invalid" value**
-
-For a 'hard invalid' state (where the value is unusable, but required), it is recommended for the business logic to not
-set a value (use `null` or `undefined`), and to set the `error` prop with an appropriate message
-(e.g. "Value is required").
-
-<Canvas>
-  <FormRow>
-    <Select
-      width="200px"
-      options={['Rare', 'Medium', 'Well Done']}
-      value={undefined}
-      error="Value is required"
-    />
-  </FormRow>
-</Canvas>