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

package/src/components/drawer/drawer.stories.jsx

@@ -1,296 +0,0 @@
-import React, { useState } from 'react';
-import {
-  FaArrowLeft,
-  FaChevronLeft,
-  FaCogs,
-  FaPenAlt,
-  FaQuestion,
-  FaTrash,
-  FaPlus,
-} from 'react-icons/fa';
-import { Drawer, Button, List, Heading, Flex } from '../../..';
-import { listSubheadingsBadges } from '../list/list.stories-data';
-
-export default {
-  title: 'Layout/Drawer',
-  component: Drawer,
-  args: {
-    button: true,
-    open: true,
-    right: false,
-    border: true,
-    shadow: false,
-    width: '300px',
-    closedWidth: '50px',
-    top: undefined,
-    background: 'var(--color-background-raised)',
-    children: <div style={{ padding: 20 }}>Drawer content</div>,
-  },
-  argTypes: {
-    button: { table: { disable: true } },
-  },
-  decorators: [
-    (story) => (
-      <Flex height="400px" wrap={false}>
-        <div
-          style={{
-            flexGrow: 1,
-            padding: 20,
-            background: 'var(--color-background)',
-          }}
-        >
-          Page content
-        </div>
-        {story()}
-      </Flex>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-const Template = (args) => {
-  return (
-    <Drawer
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...args}
-    />
-  );
-};
-export const Default = Template.bind({});
-
-export const Right = Template.bind({});
-Right.args = { right: true };
-
-export const Fixed = Template.bind({});
-Fixed.args = {
-  fixed: true,
-};
-Fixed.parameters = {
-  docs: {
-    inlineStories: false,
-    iframeHeight: '400px',
-  },
-};
-
-export const CustomButton = Template.bind({});
-CustomButton.args = {
-  buttonType: 'custom',
-  button: <Button colored round icon={<FaArrowLeft />} />,
-  buttonAnimate: true,
-};
-
-export const WithList = () => {
-  const [open, setOpen] = useState(false);
-  return (
-    <Drawer
-      button={
-        <Button onClick={() => setOpen(!open)} round icon={<FaChevronLeft />} />
-      }
-      width="300px"
-      closedWidth="50px"
-      border
-      open={open}
-    >
-      <List
-        drawer
-        list={listSubheadingsBadges}
-        marginBottom={10}
-        narrow={!open}
-      />
-    </Drawer>
-  );
-};
-WithList.parameters = {
-  docs: {
-    description: {
-      story:
-        'To hide `List` headings when the `Drawer` is closed, set the `narrow` prop on the `List`.',
-    },
-  },
-};
-
-export const Tabs = Template.bind({});
-Tabs.args = {
-  right: true,
-  button: false,
-  closedWidth: 0,
-  width: ['200px', '300px', '400px'],
-  defaultTabIndex: 1,
-  tabs: [
-    {
-      icon: <FaQuestion />,
-      content: (
-        <div style={{ padding: 20 }}>
-          <Heading top>Help</Heading>
-          {'Example content goes here lorem ipsum. '.repeat(500)}
-        </div>
-      ),
-    },
-    {
-      icon: <FaCogs />,
-      content: (
-        <div style={{ padding: 20 }}>
-          <Heading top>Settings</Heading>
-          {'Example content goes here lorem ipsum. '.repeat(500)}
-        </div>
-      ),
-    },
-    {
-      icon: <FaPenAlt />,
-      content: (
-        <div style={{ padding: 20 }}>
-          <Heading top>Edit</Heading>
-          {'Example content goes here lorem ipsum. '.repeat(500)}
-        </div>
-      ),
-    },
-  ],
-};
-Tabs.parameters = {
-  docs: {
-    description: {
-      story:
-        'The top tab will be open by default, but you can set `defaultTabIndex` if you need a different tab open. If you need different widths per tab, pass an array of widths to `width`.',
-    },
-  },
-};
-
-export const MultipleTabbedDrawers = () => {
-  const tabs1 = [
-    {
-      icon: <FaQuestion />,
-      content: (
-        <div style={{ padding: 20 }}>
-          <Heading top>Help</Heading>
-          {'Example content goes here lorem ipsum. '.repeat(500)}
-        </div>
-      ),
-    },
-    {
-      icon: <FaCogs />,
-      content: (
-        <div style={{ padding: 20 }}>
-          <Heading top>Settings</Heading>
-          {'Example content goes here lorem ipsum. '.repeat(500)}
-        </div>
-      ),
-    },
-  ];
-  const tabs2 = [
-    {
-      icon: <FaPenAlt />,
-      content: (
-        <div style={{ padding: 20 }}>
-          <Heading top>Edit</Heading>
-          {'Example content goes here lorem ipsum. '.repeat(500)}
-        </div>
-      ),
-    },
-  ];
-  return (
-    <>
-      <Drawer
-        right
-        background="var(--color-background-raised)"
-        tabs={tabs1}
-        border
-        open
-      />
-      <Drawer
-        right
-        background="var(--color-background-raised)"
-        tabs={tabs2}
-        border
-        open
-      />
-    </>
-  );
-};
-
-export const Resizable = () => {
-  const [open, setOpen] = useState(true);
-  const [listDrawerWidth, setListDrawerWidth] = useState(300);
-  const [tabbedDrawerWidth, setTabbedDrawerWidth] = useState(300);
-  const tabs = [
-    {
-      icon: <FaQuestion />,
-      content: (
-        <div style={{ padding: 20 }}>
-          <Heading top>Help</Heading>
-          {'Example content goes here lorem ipsum. '.repeat(500)}
-        </div>
-      ),
-    },
-  ];
-  return (
-    <>
-      <Drawer
-        button={
-          <Button
-            onClick={setOpen ? () => setOpen(!open) : null}
-            round
-            icon={<FaChevronLeft />}
-          />
-        }
-        open={open}
-        background="var(--color-background-raised)"
-        border
-        width={listDrawerWidth}
-        closedWidth={50}
-        onResize={(newWidth) => setListDrawerWidth(newWidth)}
-      >
-        <List
-          drawer
-          list={{
-            name: 'Animals',
-            actions: [
-              {
-                label: 'Add',
-                icon: <FaPlus />,
-                onClick: () => {},
-              },
-            ],
-            items: [
-              {
-                id: 1,
-                name: 'Aardvark',
-                onClick: () => {},
-                actions: [
-                  {
-                    label: 'Delete',
-                    icon: <FaTrash />,
-                    onClick: () => {},
-                  },
-                ],
-              },
-              {
-                id: 2,
-                name: 'Kangaroo',
-                active: true,
-                actions: [
-                  {
-                    label: 'Delete',
-                    icon: <FaTrash />,
-                    onClick: () => {},
-                  },
-                ],
-              },
-            ],
-          }}
-          narrow={!open}
-        />
-      </Drawer>
-      <Drawer
-        right
-        background="var(--color-background-raised)"
-        tabs={tabs}
-        border
-        open
-        width={tabbedDrawerWidth}
-        onResize={(newWidth) => setTabbedDrawerWidth(newWidth)}
-      />
-    </>
-  );
-};

package/src/components/empty/empty.jsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Text } from '../text/text';
-import styles from './empty.module.less';
-
-export const Empty = ({ width, height, text, children }) => {
-  return (
-    <div className={styles.empty} style={{ width, height }}>
-      <svg xmlns="http://www.w3.org/2000/svg" width="64" height="41">
-        <g transform="translate(0 1)" fill="none" fillRule="evenodd">
-          <ellipse
-            cx="32"
-            cy="33"
-            rx="32"
-            ry="7"
-            fill="rgba(0,0,0,0.1)"
-          ></ellipse>
-          <g fillRule="nonzero" stroke="var(--color-text)" strokeOpacity="0.2">
-            <path
-              d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-              fill="rgba(0,0,0,0.05)"
-            ></path>
-            <path
-              d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-              fill="var(--color-background-raised)"
-            ></path>
-          </g>
-        </g>
-      </svg>
-      {text !== '' && (
-        <div className={styles.text}>
-          <Text faint>{text}</Text>
-        </div>
-      )}
-      {children}
-    </div>
-  );
-};
-
-Empty.defaultProps = {
-  width: 'auto',
-  height: 'auto',
-  text: 'No data',
-  children: null,
-};
-
-Empty.propTypes = {
-  width: PropTypes.string,
-  height: PropTypes.string,
-  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  children: PropTypes.node,
-};

package/src/components/empty/empty.module.less

@@ -1,17 +0,0 @@
-@import '../../style/variables.less';
-
-.empty {
-  position: relative;
-  border-radius: inherit;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  gap: 10px;
-
-  .text {
-    max-width: 40ch;
-    margin-bottom: 3px;
-  }
-}

package/src/components/empty/empty.stories.jsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Empty, Button } from '../../..';
-
-export default {
-  title: 'Progress/Empty',
-  component: Empty,
-  args: {
-    text: 'No data',
-    width: '100%',
-    height: '100%',
-  },
-};
-
-const Template = (args) => (
-  <Empty
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...args}
-  />
-);
-export const Default = Template.bind({});
-
-export const WithButton = Template.bind({});
-WithButton.args = {
-  text: 'Please apply at least one casing in Well Schematics to perform drilling mechanics',
-  children: <Button colored label="Add casing" />,
-};

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

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

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

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

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

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