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

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

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

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

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

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

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

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

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

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

package/src/components/inputs.stories.mdx

@@ -0,0 +1,201 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import {
+  Input,
+  Button,
+  CheckBox,
+  Toggle,
+  TextArea,
+  Select,
+  RadioButton,
+  Slider,
+  FileInput,
+  FormRow,
+  OptionDropdown,
+} from '../..';
+
+<Meta title="Inputs" />
+
+# Inputs
+
+React UI Library provides a comprehensive set of user input components.
+
+## Button
+
+Use buttons when users need to invoke actions.
+
+<Canvas>
+  <FormRow>
+    <Button label="Save" colored />
+    <Button label="Cancel" />
+  </FormRow>
+</Canvas>
+
+**Guidelines**
+
+- only the primary button on a page or view should normally be colored
+- all other buttons should use the default style (try to limit using different variants and colors of buttons)
+- for serious actions (e.g. permanently deleting records), use a red button
+
+## Input
+
+Use an `Input` when users need to enter or edit single-line values.
+
+<Canvas>
+  <FormRow>
+    <Input width="200px" />
+  </FormRow>
+</Canvas>
+
+### Number Input
+
+<Canvas>
+  <FormRow>
+    <Input width="200px" type="number" value={3} />
+  </FormRow>
+</Canvas>
+
+### Date Input
+
+<Canvas>
+  <FormRow>
+    <Input width="200px" value="2020-05-22" type="date" />
+  </FormRow>
+</Canvas>
+
+## TextArea
+
+Use a `TextArea` when users need to enter or edit multiline text.
+
+<Canvas>
+  <FormRow>
+    <TextArea />
+  </FormRow>
+</Canvas>
+
+## Select
+
+Use a `Select` component when users need to choose from one or more values from a longer list of options (> 6 options).
+
+React UI Library provides two different `Select` components, through one unified interface.
+
+### Native Select
+
+Native `Select` is a styled native browser [select input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
+You enable it via the `native` prop. It's most useful for simple situations. Its advantages come from the browser
+handling dropdown positioning, performance, and accessibility. Its drawbacks are limited features and styling
+possibilities. A native `Select` looks like this:
+
+<Canvas>
+  <FormRow>
+    <Select native options={['Rare', 'Medium', 'Well Done']} value="Medium" />
+  </FormRow>
+</Canvas>
+
+### Custom Select
+
+Custom `Select` is a full implementation of a select component as a custom React component. It covers many additional
+features not offered by native select inputs, such as filtering and multi-select. Its drawbacks are that positioning and
+accessibility are not handled out-the-box by the browser, requiring custom code internally within the component. The
+custom `Select` in GUI Library uses [react-laag](https://www.react-laag.com/) as a positioning engine.
+
+<Canvas>
+  <FormRow>
+    <Select
+      width="auto"
+      options={['Rare', 'Medium', 'Well Done']}
+      value="Medium"
+    />
+    <Select
+      width="300px"
+      options={['Onions', 'Olives', 'Mushrooms', 'Ham']}
+      value={['Olives', 'Mushrooms']}
+    />
+  </FormRow>
+</Canvas>
+
+## RadioButton
+
+Use a `RadioButton` group when users need to choose a single value from a short list of options (< 6 options). They are
+suitable for related but mutually exclusive choices.
+
+<Canvas>
+  <RadioButton
+    options={[
+      { label: 'Delivery', value: 'delivery' },
+      { label: 'Collection', value: 'collection' },
+    ]}
+    value={{ label: 'Collection', value: 'collection' }}
+    inline
+  />
+</Canvas>
+
+## CheckBox
+
+Use a `CheckBox` when users need to select between opposite states (switching a binary value on or off). A CheckBox
+should have a label prop which makes the opposite states clear.
+
+<Canvas>
+  <CheckBox checked label="I agree" />
+</Canvas>
+
+You can also use a group of checkboxes when users need to select multiple values from a short list of options
+(< 6 options).
+
+<Canvas>
+  <FormRow>
+    <CheckBox checked label="Breakfast" />
+    <CheckBox checked label="Lunch" />
+    <CheckBox checked label="Dinner" />
+  </FormRow>
+</Canvas>
+
+## OptionDropdown
+
+For a larger number of `CheckBox` options and where space is limited, there's a convenience component called `OptionDropdown`,
+which allows selecting a multiple values, by presenting them in a dropdown, with an easy way to select all or clear.
+
+<Canvas>
+  <OptionDropdown
+    label="Meals"
+    options={[
+      { label: 'Breakfast', value: 'breakfast' },
+      { label: 'Lunch', value: 'lunch' },
+      { label: 'Dinner', value: 'dinner', selected: true },
+    ]}
+    onChange={() => {}}
+  />
+</Canvas>
+
+## Toggle
+
+A `Toggle` is just an alternative variant to a `CheckBox` and has the same use-case (switching a binary value on or off).
+
+<Canvas>
+  <Toggle checked label="Express mode" onChange={() => {}} />
+</Canvas>
+
+## Slider
+
+A `Slider` helps a user to select a numerical value between two endpoints. It can be more convenient than typing values,
+particularly on touch devices.
+
+A `Slider` can also be used to set a range of values (start and end points).
+
+<Canvas>
+  <Slider
+    value={30}
+    min={0}
+    max={100}
+    step={1}
+    width="200px"
+    onChange={() => {}}
+  />
+</Canvas>
+
+## File Input
+
+Use a `FileInput` when a user needs to upload a file. The `accept` prop allows you to restrict the accepted file types.
+
+<Canvas>
+  <FileInput accept=".json" width="200px" />
+</Canvas>

package/src/components/label/label.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { FaQuestionCircle, FaInfoCircle, FaBook } from 'react-icons/fa';
+import { HiLockClosed, HiLockOpen } from 'react-icons/hi';
+import { Tooltip } from '../tooltip/tooltip';
+import { IconWrapper } from '../heading/heading';
+import styles from './label.module.less';
+
+export const Label = ({
+  label,
+  width,
+  helpText,
+  helpTextMaxWidth,
+  onClickHelp,
+  lock,
+  info,
+  libraryIcon,
+  labelLeft,
+}) => {
+  return (
+    <div className={cx(styles.label, labelLeft ? styles.labelLeft : '')}>
+      <label style={{ width: width || '' }}>
+        {label}
+        <div className={styles.icons}>
+          {helpText && !onClickHelp ? (
+            <Tooltip text={helpText} maxWidth={helpTextMaxWidth}>
+              <FaQuestionCircle className={styles.icon} />
+            </Tooltip>
+          ) : (
+            onClickHelp && (
+              <IconWrapper
+                onClick={onClickHelp}
+                icon={<FaQuestionCircle />}
+                isHelp
+              />
+            )
+          )}
+          {info && (
+            <Tooltip text={info}>
+              <FaInfoCircle className={styles.icon} />
+            </Tooltip>
+          )}
+          {lock && lock.visible && lock.onClick && (
+            <Tooltip text={lock?.tooltip ?? ''}>
+              <IconWrapper
+                onClick={lock.onClick}
+                isLock
+                icon={lock.active ? <HiLockClosed /> : <HiLockOpen />}
+                isFaint={!lock.active}
+                testId={lock.testId}
+              />
+            </Tooltip>
+          )}
+          {libraryIcon && (
+            <Tooltip text={libraryIcon?.tooltip ?? ''}>
+              <IconWrapper onClick={libraryIcon.onClick} icon={<FaBook />} />
+            </Tooltip>
+          )}
+        </div>
+      </label>
+    </div>
+  );
+};
+
+Label.defaultProps = {
+  label: null,
+  helpText: null,
+  helpTextMaxWidth: '300px',
+  width: 'auto',
+  info: null,
+  onClickHelp: null,
+  lock: {
+    visible: false,
+    active: false,
+    onClick: () => {},
+    tooltip: '',
+    testId: undefined,
+  },
+  libraryIcon: null,
+  labelLeft: false,
+};
+
+Label.propTypes = {
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  /** Adds a help icon with a tooltip */
+  helpText: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  helpTextMaxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), //'none' to disable
+  width: PropTypes.string,
+  /** Adds an info icon with an optional tooltip and onClick event */
+  info: PropTypes.string,
+  onClickHelp: PropTypes.func,
+  /** Adds a lock icon with a tooltip */
+  lock: PropTypes.shape({
+    visible: PropTypes.bool,
+    active: PropTypes.bool,
+    onClick: PropTypes.func,
+    tooltip: PropTypes.string,
+    testId: PropTypes.string,
+  }),
+  /** Adds a library icon with a tooltip and onClick event */
+  libraryIcon: PropTypes.shape({
+    onClick: PropTypes.func,
+    tooltip: PropTypes.string,
+  }),
+  labelLeft: PropTypes.bool,
+};