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

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

@@ -0,0 +1,101 @@
+import React, { useContext, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { InputGroup } from '../input-group/input-group';
+import { Input } from '../input/input';
+import { Button } from '../button/button';
+import styles from './file-input.module.less';
+import { DisabledContext } from '../../helpers/disabled-context';
+
+// https://stackoverflow.com/a/65140891/942635
+export const readFile = (file = {}, method = 'readAsText') => {
+  const reader = new FileReader();
+  return new Promise((resolve, reject) => {
+    reader[method](file);
+    reader.onload = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = (error) => reject(error);
+  });
+};
+
+export const FileInput = ({
+  label,
+  loading,
+  placeholder,
+  disabled,
+  file,
+  accept,
+  multi,
+  name,
+  width,
+  onChange,
+  testId,
+}) => {
+  const disabledContext = useContext(DisabledContext);
+
+  const inputRef = useRef(null);
+  const fileName = file?.name || null;
+
+  const handleClick = () => {
+    if (!(disabled || disabledContext)) inputRef.current.click();
+  };
+
+  return (
+    <div onClick={() => handleClick()} style={{ width }}>
+      <InputGroup>
+        <Input value={fileName || ''} placeholder={placeholder} disabled />
+        <Button
+          label={label}
+          loading={loading}
+          disabled={loading || disabled || disabledContext}
+          groupOrder="last"
+        />
+      </InputGroup>
+      <input
+        name={name}
+        ref={inputRef}
+        className={styles.fileInput}
+        type="file"
+        accept={accept}
+        onChange={(evt) => {
+          onChange({
+            ...evt,
+            target: {
+              ...evt.target,
+              value: multi ? evt.target.files : evt.target.files[0],
+            },
+          });
+        }}
+        data-testid={testId}
+      />
+    </div>
+  );
+};
+
+FileInput.defaultProps = {
+  label: 'Select',
+  loading: false,
+  placeholder: 'No file selected',
+  disabled: false,
+  file: null,
+  accept: undefined,
+  name: null,
+  width: null,
+  onChange: () => {},
+  testId: undefined,
+};
+
+FileInput.propTypes = {
+  /** Custom button label */
+  label: PropTypes.string,
+  loading: PropTypes.bool,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  file: PropTypes.object,
+  /** See [accept attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) to restrict file type */
+  accept: PropTypes.string,
+  name: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func,
+  testId: PropTypes.string,
+};

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

@@ -0,0 +1,3 @@
+.fileInput {
+  display: none !important;
+}

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

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { useArgs } from '@storybook/addons';
+import { FileInput, readFile, Spacer, Message, TextArea } from '../../..';
+
+export default {
+  title: 'Forms/FileInput',
+  component: FileInput,
+  args: {
+    file: null,
+  },
+};
+
+const Template = (args) => {
+  const [_, updateArgs] = useArgs();
+  const handleChange = (evt) => {
+    updateArgs({ file: evt.target.value });
+  };
+
+  return (
+    <FileInput
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+      onChange={handleChange}
+    />
+  );
+};
+export const Default = Template.bind({});
+
+export const RestrictFiletype = Template.bind({});
+RestrictFiletype.args = { accept: '.json' };
+RestrictFiletype.parameters = {
+  docs: {
+    description: {
+      story:
+        'See [accept attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) to restrict file type',
+    },
+  },
+};
+
+export const ReadJSONFile = () => {
+  const [file, setFile] = useState(null);
+  const [json, setJson] = useState({});
+
+  return (
+    <>
+      <FileInput
+        file={file}
+        onChange={async (evt) => {
+          const file = evt.target.value;
+          try {
+            const text = await readFile(file);
+            const json = JSON.parse(text);
+            setJson(json);
+          } catch (error) {
+            console.log(error);
+          }
+          setFile(file);
+        }}
+        accept=".json"
+      />
+      <Spacer />
+      {file ? (
+        <TextArea monospace value={JSON.stringify(json, null, 2)} rows={20} />
+      ) : (
+        <Message
+          message={{
+            visible: true,
+            content: 'Upload a JSON file to see preview',
+            type: 'Info',
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export const Image = () => {
+  const [file, setFile] = useState(null);
+  return (
+    <>
+      <FileInput
+        file={file}
+        onChange={(evt) => {
+          setFile(evt.target.value);
+        }}
+        accept="image/*"
+      />
+      <Spacer />
+      {file ? (
+        <img
+          src={file ? URL.createObjectURL(file) : ''}
+          alt="Preview"
+          style={{
+            maxHeight: '400px',
+            maxWidth: '400px',
+          }}
+        />
+      ) : (
+        <Message
+          message={{
+            visible: true,
+            content: 'Upload an image file to see preview',
+            type: 'Info',
+          }}
+        />
+      )}
+    </>
+  );
+};

package/src/components/form/field.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { Label } from '../label/label';
+import styles from './form.module.less';
+
+export const Field = ({
+  label,
+  labelLeft,
+  labelWidth,
+  children,
+  helpText,
+  helpTextMaxWidth,
+  onClickHelp,
+  lock,
+  info,
+  libraryIcon,
+  testId,
+}) => {
+  return (
+    <div
+      className={cx(styles.field, labelLeft ? styles.labelLeft : '')}
+      data-testid={testId}
+    >
+      {(label || labelLeft) && (
+        <Label
+          label={label}
+          width={labelWidth}
+          helpText={helpText}
+          helpTextMaxWidth={helpTextMaxWidth}
+          onClickHelp={onClickHelp}
+          lock={lock}
+          info={info}
+          libraryIcon={libraryIcon}
+          labelLeft={labelLeft}
+        />
+      )}
+      <div className={styles.fieldInput}>{children}</div>
+    </div>
+  );
+};
+
+Field.defaultProps = {
+  label: null,
+  helpText: null,
+  helpTextMaxWidth: '300px',
+  labelLeft: false,
+  labelWidth: 'auto',
+  info: null,
+  onClickHelp: null,
+  lock: {
+    visible: false,
+    active: false,
+    onClick: () => {},
+    tooltip: '',
+    testId: undefined,
+  },
+  libraryIcon: null,
+  testId: undefined,
+};
+
+Field.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
+  /** Moves the label to the left of the input */
+  labelLeft: PropTypes.bool,
+  labelWidth: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  /** 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,
+  }),
+  testId: PropTypes.string,
+};

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

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

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

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