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

package/src/components/form/field.stories.jsx

@@ -1,101 +0,0 @@
-import React, { useState } from 'react';
-import { Field, Input, Text } from '../../..';
-
-export default {
-  title: 'Forms/Field',
-  component: Field,
-  args: {
-    label: 'Label',
-    labelLeft: false,
-  },
-};
-
-const Template = (args) => (
-  <Field
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...args}
-  >
-    <Input />
-  </Field>
-);
-export const Default = Template.bind({});
-
-export const LabelOnLeft = Template.bind({});
-LabelOnLeft.args = {
-  labelLeft: true,
-  labelWidth: '80px',
-};
-
-export const HelpIconTooltip = Template.bind({});
-HelpIconTooltip.args = {
-  helpText: 'Tooltip goes here',
-};
-
-export const HelpIconClickable = Template.bind({});
-HelpIconClickable.args = {
-  onClickHelp: () => {},
-};
-
-export const HelpTextBelow = (args) => (
-  <>
-    <Field
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...args}
-    >
-      <Input />
-      <Text small faint>
-        Help text goes here
-      </Text>
-    </Field>
-    <Field
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...args}
-    >
-      <Input error="Error text goes here" />
-      <Text small error>
-        Error text goes here
-      </Text>
-    </Field>
-    <Field
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...args}
-    >
-      <Input warning="Error text goes here" />
-      <Text small warning>
-        Warning text goes here
-      </Text>
-    </Field>
-  </>
-);
-
-export const InfoIcon = Template.bind({});
-InfoIcon.args = {
-  info: 'Info goes here',
-};
-
-export const LockIcon = () => {
-  const [locked, setLocked] = useState(false);
-  const handleToggleLock = () => setLocked(!locked);
-  return (
-    <Field
-      label="Label"
-      lock={{
-        visible: true,
-        active: locked,
-        onClick: handleToggleLock,
-        tooltip: locked ? 'Unlock' : 'Lock',
-        testId: 'testId',
-      }}
-    >
-      <Input disabled={locked} />
-    </Field>
-  );
-};
-
-export const LibraryIcon = Template.bind({});
-LibraryIcon.args = {
-  libraryIcon: {
-    onClick: () => {},
-    tooltip: 'View in library',
-  },
-};

package/src/components/form/form.module.less

@@ -1,30 +0,0 @@
-@import '../../style/variables.less';
-
-.field {
-  margin-bottom: 14px;
-  color: var(--color-text);
-
-  &.labelLeft {
-    display: flex;
-    align-items: center;
-
-    .fieldInput {
-      flex-grow: 1;
-    }
-  }
-}
-
-.formRow,
-.form-row /* hyphens are awkward (deprecate) */ {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-
-  > *:not(:last-child) {
-    margin-right: 20px;
-  }
-
-  .button {
-    margin-bottom: 14px;
-  }
-}

package/src/components/form/form.stories.jsx

@@ -1,191 +0,0 @@
-import React from 'react';
-import { DisabledContext } from '../../helpers/disabled-context';
-import {
-  Field,
-  Input,
-  Select,
-  CheckBox,
-  ButtonGroup,
-  Button,
-  Toggle,
-  InputGroup,
-  InputGroupAddon,
-  Slider,
-  TextArea,
-  RadioButton,
-  Menu,
-  FormRow,
-} from '../../..';
-
-export default {
-  title: 'Forms/Layout',
-  argTypes: {
-    labelWidth: 'text',
-  },
-  args: {
-    small: false,
-    row: false,
-    labelLeft: false,
-    labelWidth: undefined,
-    disabled: false,
-  },
-};
-
-const renderFields = (args) => {
-  const { small, labelLeft, labelWidth } = args;
-  return (
-    <>
-      <Field
-        label="Input"
-        helpText="Some help text"
-        labelLeft={labelLeft}
-        labelWidth={labelWidth}
-      >
-        <Input value="Value" small={small} />
-      </Field>
-      <Field
-        label="TextArea"
-        helpText="Some very long help text that needs to have its width constrained so it doesn't look silly"
-        helpTextMaxWidth={200}
-        labelLeft={labelLeft}
-        labelWidth={labelWidth}
-      >
-        <TextArea value="Value" small={small} />
-      </Field>
-      <Field
-        label="Select (native)"
-        labelLeft={labelLeft}
-        labelWidth={labelWidth}
-      >
-        <Select
-          options={[
-            { label: 'Option 1', value: '1' },
-            { label: 'Option 2', value: '2' },
-          ]}
-          value={{ label: 'Option 2', value: '2' }}
-          native
-          small={small}
-          width="auto"
-        />
-      </Field>
-      <Field
-        label="Select (custom)"
-        labelLeft={labelLeft}
-        labelWidth={labelWidth}
-      >
-        <Select
-          options={[
-            { label: 'Option 1', value: '1' },
-            { label: 'Option 2', value: '2' },
-          ]}
-          value={{ label: 'Option 2', value: '2' }}
-          small={small}
-          width="auto"
-        />
-      </Field>
-      <Field
-        label="Select (multi)"
-        labelLeft={labelLeft}
-        labelWidth={labelWidth}
-      >
-        <Select
-          options={[
-            { label: 'Option 1', value: '1' },
-            { label: 'Option 2', value: '2' },
-          ]}
-          value={[
-            { label: 'Option 1', value: '1' },
-            { label: 'Option 2', value: '2' },
-          ]}
-          small={small}
-        />
-      </Field>
-      <Field label="Slider" labelLeft={labelLeft} labelWidth={labelWidth}>
-        <Slider
-          name="example"
-          label="Number of aardvarks"
-          value={35}
-          min={0}
-          max={100}
-          step={1}
-          onChange={() => {}}
-          showArrows
-          showTooltip
-          small={small}
-        />
-      </Field>
-      <Field label="ButtonGroup" labelLeft={labelLeft} labelWidth={labelWidth}>
-        <ButtonGroup
-          items={[
-            { key: 0, label: 'Option 1', value: '1' },
-            { key: 1, label: 'Option 2', value: '2' },
-          ]}
-          value={0}
-          small={small}
-        />
-      </Field>
-      <Field label="InputGroup" labelLeft={labelLeft} labelWidth={labelWidth}>
-        <InputGroup small={small}>
-          <InputGroupAddon>$</InputGroupAddon>
-          <Input name="example" value="123" onChange={() => {}} />
-          <InputGroupAddon>each</InputGroupAddon>
-        </InputGroup>
-      </Field>
-      <Field label="Menu" labelLeft={labelLeft} labelWidth={labelWidth}>
-        <Menu
-          menu={{
-            label: 'Menu',
-            trigger: 'DropDownButton',
-            sections: [
-              { type: 'Option', label: 'Lorem' },
-              { type: 'Option', label: 'Ipsum' },
-            ],
-            small,
-          }}
-        />
-      </Field>
-      <Field label="CheckBox" labelLeft={labelLeft} labelWidth={labelWidth}>
-        <CheckBox label="CheckBox" checked small={small} />
-      </Field>
-      <Field label="RadioButton" labelLeft={labelLeft} labelWidth={labelWidth}>
-        <RadioButton
-          options={[
-            { label: 'Aardvarks', value: 'termites' },
-            { label: 'Monkeys', value: 'bananas' },
-          ]}
-          value={{ label: 'Monkeys', value: 'bananas' }}
-          inline
-          small={small}
-        />
-      </Field>
-      <Field label="Toggle" labelLeft={labelLeft} labelWidth={labelWidth}>
-        <Toggle label="Toggle" checked onChange={() => {}} small={small} />
-      </Field>
-      <Field labelLeft={labelLeft} labelWidth={labelWidth}>
-        <Button colored label="Button" onClick={() => {}} small={small} />
-      </Field>
-    </>
-  );
-};
-
-const Template = (args) => {
-  const { row, disabled } = args;
-  return (
-    <DisabledContext.Provider value={disabled}>
-      {row ? <FormRow>{renderFields(args)}</FormRow> : renderFields(args)}
-    </DisabledContext.Provider>
-  );
-};
-export const Default = Template.bind({});
-
-export const Small = Template.bind({});
-Small.args = { small: true };
-
-export const Row = Template.bind({});
-Row.args = { row: true };
-
-export const SmallRow = Template.bind({});
-SmallRow.args = { row: true, small: true };
-
-export const DisabledWithContext = Template.bind({});
-DisabledWithContext.args = { disabled: true };

package/src/components/heading/heading.jsx

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

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

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

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

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