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

package/src/components/pagination/pagination.jsx

@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import {
+  FaAngleLeft,
+  FaAngleDoubleLeft,
+  FaAngleRight,
+  FaAngleDoubleRight,
+} from 'react-icons/fa';
+import { Select } from '../select/select';
+import { Input } from '../input/input';
+import { numberOfPages, validateSelectedPage } from './pagination.viewdata';
+import styles from './pagination.module.less';
+import { Button } from '../button/button';
+import { InputGroup } from '../input-group/input-group';
+import { InputGroupAddon } from '../input-group/input-group-addon/input-group-addon';
+
+export const Pagination = ({ pagination }) => {
+  const {
+    rowCount,
+    selectedPage,
+    small,
+    onSelectPage,
+    rowsPerPage,
+    errorMessageTemplate,
+  } = pagination;
+  const showAll = Number(rowsPerPage?.value) === 0;
+  const numPages = numberOfPages(rowCount, rowsPerPage);
+  const [unvalidatedSelectedPage, setUnvalidatedSelectedPage] = useState(
+    String(selectedPage),
+  );
+  useEffect(() => {
+    setUnvalidatedSelectedPage(String(selectedPage));
+  }, [selectedPage]);
+  const { error } = validateSelectedPage(
+    unvalidatedSelectedPage,
+    numPages,
+    errorMessageTemplate,
+  );
+
+  const setSelectedPage = (value) => {
+    const { valid } = validateSelectedPage(
+      value,
+      numPages,
+      errorMessageTemplate,
+    );
+    setUnvalidatedSelectedPage(value);
+    if (valid && value !== '') {
+      onSelectPage(Number(value));
+    }
+  };
+
+  return (
+    <div className={styles.paginationContainer}>
+      {rowsPerPage && (
+        <div style={{ flexShrink: 0 }}>
+          <Select
+            onChange={(evt) => {
+              rowsPerPage.onChange(evt);
+              setSelectedPage(String(1));
+            }}
+            options={rowsPerPage.options}
+            native={!!rowsPerPage.options}
+            small={small}
+            width="auto"
+            value={rowsPerPage.value}
+          />
+        </div>
+      )}
+      <Button
+        small={small}
+        basic
+        icon={<FaAngleDoubleLeft />}
+        onClick={() => setSelectedPage(String(1))}
+        disabled={showAll || selectedPage === 1}
+      />
+      <Button
+        small={small}
+        basic
+        icon={<FaAngleLeft />}
+        onClick={() => setSelectedPage(String(selectedPage - 1))}
+        disabled={showAll || selectedPage === 1}
+      />
+      <InputGroup small={small} width="auto">
+        <Input
+          right
+          value={unvalidatedSelectedPage}
+          placeholder={String(selectedPage)}
+          onChange={(evt) => setSelectedPage(evt.target.value)}
+          width="50px"
+          disabled={showAll || numPages <= 1}
+          error={error}
+        />
+        <InputGroupAddon>of {numPages}</InputGroupAddon>
+      </InputGroup>
+      <Button
+        small={small}
+        basic
+        icon={<FaAngleRight />}
+        onClick={() => setSelectedPage(String(selectedPage + 1))}
+        disabled={showAll || selectedPage === numPages}
+      />
+      <Button
+        small={small}
+        basic
+        icon={<FaAngleDoubleRight />}
+        onClick={() => setSelectedPage(String(numPages))}
+        disabled={showAll || selectedPage === numPages}
+      />
+    </div>
+  );
+};
+
+export const paginationShape = PropTypes.shape({
+  rowCount: PropTypes.number.isRequired,
+  selectedPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  rowsPerPage: PropTypes.shape({
+    onChange: PropTypes.func.isRequired,
+    options: PropTypes.arrayOf(
+      PropTypes.shape({
+        label: PropTypes.string.isRequired,
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+          .isRequired,
+        selected: PropTypes.bool,
+      }),
+    ).isRequired,
+    value: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string, //deprecated
+      PropTypes.number, //deprecated
+    ]),
+  }),
+  onSelectPage: PropTypes.func,
+  small: PropTypes.bool,
+  errorMessageTemplate: PropTypes.string,
+});
+
+Pagination.propTypes = {
+  pagination: paginationShape.isRequired,
+};

package/src/components/pagination/pagination.module.less

@@ -0,0 +1,11 @@
+.paginationContainer {
+  display: flex;
+  align-items: center;
+}
+
+.pagination {
+  display: flex;
+  padding-left: 0;
+  list-style: none;
+  margin: 0 1rem;
+}

package/src/components/pagination/pagination.stories.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { Pagination } from '../../..';
+
+const pagination = {
+  rowCount: 500,
+  selectedPage: 1,
+  onSelectPage: () => {},
+};
+
+export default {
+  title: 'Basic/Pagination',
+  component: Pagination,
+  args: {
+    pagination,
+  },
+};
+
+export const Default = () => {
+  const [selectedPage, setSelectedPage] = useState(1);
+  return (
+    <Pagination
+      pagination={{
+        rowCount: 500,
+        selectedPage,
+        onSelectPage: (evt) => setSelectedPage(evt),
+      }}
+    />
+  );
+};
+
+export const RowsPerPage = () => {
+  const [selectedPage, setSelectedPage] = useState(1);
+  const [rowsPerPage, setRowsPerPage] = useState(20);
+  return (
+    <Pagination
+      pagination={{
+        rowCount: 500,
+        selectedPage,
+        rowsPerPage: {
+          onChange: (evt) => setRowsPerPage(Number(evt.target.value)),
+          options: [
+            { label: '10 / page', value: 10 },
+            { label: '20 / page', value: 20 },
+            { label: '50 / page', value: 50 },
+            { label: 'Show all', value: 0 },
+          ],
+          value: rowsPerPage,
+        },
+        onSelectPage: (evt) => setSelectedPage(evt),
+      }}
+    />
+  );
+};
+
+export const Small = () => {
+  const [selectedPage, setSelectedPage] = useState(1);
+  const [rowsPerPage, setRowsPerPage] = useState(20);
+  return (
+    <Pagination
+      pagination={{
+        small: true,
+        rowCount: 500,
+        selectedPage,
+        rowsPerPage: {
+          onChange: (evt) => setRowsPerPage(Number(evt.target.value)),
+          options: [
+            { label: '10 / page', value: 10 },
+            { label: '20 / page', value: 20 },
+            { label: '50 / page', value: 50 },
+            { label: 'Show all', value: 0 },
+          ],
+          value: rowsPerPage,
+        },
+        onSelectPage: (evt) => setSelectedPage(evt),
+      }}
+    />
+  );
+};

package/src/components/pagination/pagination.test.js

@@ -0,0 +1,92 @@
+import {
+  selectedRowsPerPage,
+  numberOfPages,
+  validateSelectedPage,
+} from './pagination.viewdata';
+
+describe('pagination', () => {
+  test('selected rows per page, by value', () => {
+    const options = [{}, {}, { value: 30, selected: true }, {}];
+    const value = 66;
+    expect(selectedRowsPerPage(options, value)).toBe(66);
+  });
+  test('selected rows per page, by selected option', () => {
+    const options = [{}, {}, { value: 30, selected: true }, {}];
+    expect(selectedRowsPerPage(options)).toBe(30);
+  });
+  test('default selected rows per page', () => {
+    expect(selectedRowsPerPage()).toBe(10);
+  });
+
+  test('number of pages defaults to 10', () => {
+    expect(numberOfPages()).toBe(10);
+  });
+  test('number of pages is 1 if rows per page is 0', () => {
+    expect(numberOfPages(Infinity, { value: 0 })).toBe(1);
+  });
+  test('number of pages works with options', () => {
+    expect(
+      numberOfPages(5, {
+        options: [
+          {},
+          { value: 1 },
+          { value: 2, selected: false },
+          { value: 3, selected: true },
+          {},
+        ],
+      }),
+    ).toBe(2);
+  });
+  test('number of pages otherwise behaves as expected', () => {
+    expect(numberOfPages(5, { value: 1 })).toBe(5);
+    expect(numberOfPages(5, { value: 2 })).toBe(3);
+    expect(numberOfPages(5, { value: 5 })).toBe(1);
+    expect(numberOfPages(5, { value: 7 })).toBe(1);
+  });
+  test('validateSelectedPage', () => {
+    expect(validateSelectedPage('4', 12)).toStrictEqual({
+      valid: true,
+      error: null,
+    });
+    expect(validateSelectedPage('', 12)).toStrictEqual({
+      valid: true,
+      error: null,
+    });
+    expect(validateSelectedPage('1', 1)).toStrictEqual({
+      valid: true,
+      error: null,
+    });
+    expect(validateSelectedPage('13', 12)).toStrictEqual({
+      valid: false,
+      error: 'Selected page must be a positive whole number between 1 and 12',
+    });
+    expect(validateSelectedPage('x', 12)).toStrictEqual({
+      valid: false,
+      error: 'Selected page must be a positive whole number between 1 and 12',
+    });
+    expect(validateSelectedPage('1.', 12)).toStrictEqual({
+      valid: false,
+      error: 'Selected page must be a positive whole number between 1 and 12',
+    });
+    expect(validateSelectedPage('1.0', 12)).toStrictEqual({
+      valid: false,
+      error: 'Selected page must be a positive whole number between 1 and 12',
+    });
+    expect(validateSelectedPage('1.1', 12)).toStrictEqual({
+      valid: false,
+      error: 'Selected page must be a positive whole number between 1 and 12',
+    });
+    expect(validateSelectedPage('1,1', 12)).toStrictEqual({
+      valid: false,
+      error: 'Selected page must be a positive whole number between 1 and 12',
+    });
+    expect(validateSelectedPage('1x', 12)).toStrictEqual({
+      valid: false,
+      error: 'Selected page must be a positive whole number between 1 and 12',
+    });
+    expect(validateSelectedPage('-1', 12)).toStrictEqual({
+      valid: false,
+      error: 'Selected page must be a positive whole number between 1 and 12',
+    });
+  });
+});

package/src/components/pagination/pagination.viewdata.js

@@ -0,0 +1,66 @@
+export const selectedRowsPerPage = (options, value) => {
+  return (
+    value ||
+    (options &&
+      options.reduce((acc, row) => {
+        return row.selected ? row.value : acc;
+      }, 10)) ||
+    10
+  );
+};
+
+/**
+ * Calculate number of pages
+ * @param {number} numberOfRows
+ * @param {object} pageContainer - Object containing page 'options' and rows per page 'value'.
+ * @returns {number}
+ */
+export const numberOfPages = (numberOfRows, pageContainer) => {
+  // Default
+  if (!pageContainer) {
+    return 10;
+  }
+
+  const { options, value } = pageContainer;
+
+  // Show all
+  if (value === 0) {
+    return 1;
+  }
+
+  return Math.ceil(numberOfRows / selectedRowsPerPage(options, value));
+};
+
+/**
+ * Validate the selected page input value
+ * @param {string} selectedPage
+ * @param {number} numPages
+ * @param {string} errorMessageTemplate
+ * @returns {Object}
+ */
+
+export const validateSelectedPage = (
+  selectedPage,
+  numPages,
+  errorMessageTemplate = 'Selected page must be a positive whole number between 1 and',
+) => {
+  const error = `${errorMessageTemplate} ${numPages}`;
+  const valid = {
+    valid: true,
+    error: null,
+  };
+  if (selectedPage === '') {
+    return valid;
+  }
+  if (
+    !selectedPage.match(/^\d+$/g) ||
+    selectedPage <= 0 ||
+    selectedPage > numPages
+  ) {
+    return {
+      valid: false,
+      error,
+    };
+  }
+  return valid;
+};

package/src/components/pop-confirm/content.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Button } from '../button/button';
+import { Text } from '../text/text';
+import styles from './pop-confirm.module.less';
+
+export const Content = ({
+  title,
+  okText,
+  onClickOk,
+  cancelText,
+  onClickCancel,
+  close,
+}) => (
+  <div className={styles.popConfirm}>
+    {title && (
+      <div className={styles.content}>
+        <Text>{title}</Text>
+      </div>
+    )}
+    <div className={styles.buttons}>
+      <Button colored label={okText} onClick={() => onClickOk(close)} />
+      <Button label={cancelText} onClick={() => onClickCancel(close)} />
+    </div>
+  </div>
+);

package/src/components/pop-confirm/pop-confirm.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Popover } from '../popover/popover';
+import { Content } from './content';
+
+export const PopConfirm = ({
+  children,
+  placement,
+  closeOnOutsideClick,
+  fullWidth,
+  title,
+  cancelText,
+  onClickCancel,
+  okText,
+  onClickOk,
+}) => {
+  const content = (
+    <Content
+      title={title}
+      okText={okText}
+      onClickOk={onClickOk}
+      cancelText={cancelText}
+      onClickCancel={onClickCancel}
+    />
+  );
+
+  return (
+    <Popover
+      content={content}
+      placement={placement}
+      closeOnOutsideClick={closeOnOutsideClick}
+      fullWidth={fullWidth}
+    >
+      {children}
+    </Popover>
+  );
+};
+
+PopConfirm.propTypes = {
+  children: PropTypes.any,
+  placement: PropTypes.string, //https://www.react-laag.com/docs/togglelayer/
+  closeOnOutsideClick: PropTypes.bool,
+  fullWidth: PropTypes.bool,
+  title: PropTypes.string,
+  cancelText: PropTypes.string,
+  onClickCancel: PropTypes.func,
+  okText: PropTypes.string,
+  onClickOk: PropTypes.func,
+};
+
+PopConfirm.defaultProps = {
+  children: null,
+  placement: 'top-center',
+  closeOnOutsideClick: true,
+  fullWidth: false,
+  title: '',
+  cancelText: 'Cancel',
+  onClickCancel: (close) => close(),
+  okText: 'Ok',
+  onClickOk: (close) => {},
+};

package/src/components/pop-confirm/pop-confirm.module.less

@@ -0,0 +1,18 @@
+.popConfirm {
+  max-width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.content {
+  max-height: 200px;
+  word-wrap: break-word;
+  overflow-y: auto;
+}
+
+.buttons {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+}

package/src/components/pop-confirm/pop-confirm.stories.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { PopConfirm, Button, toast } from '../../..';
+
+const onOk = (close) => {
+  toast({
+    message: {
+      type: 'Success',
+      content: 'success!',
+      details: 'You successfully booked your cruise to Bahamas.',
+    },
+  });
+  close();
+};
+
+export default {
+  title: 'Basic/PopConfirm',
+  component: PopConfirm,
+  args: {
+    title: 'Do you want a free cruise to Bahamas?',
+    onClickCancel: (close) => close(),
+    onClickOk: onOk,
+    children: <Button label="Click me!" />,
+  },
+  decorators: [
+    (story) => (
+      <div
+        style={{
+          display: 'flex',
+          height: 150,
+          alignItems: 'flex-end',
+          justifyContent: 'center',
+        }}
+      >
+        {story()}
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      source: {
+        excludeDecorators: true,
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <PopConfirm
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args}
+  />
+);
+export const Default = Template.bind({});

package/src/components/popover/popover.jsx

@@ -0,0 +1,112 @@
+import React, { useState, useEffect, useContext } from 'react';
+import PropTypes from 'prop-types';
+import ResizeObserver from 'resize-observer-polyfill';
+import { FaTimes } from 'react-icons/fa';
+import cx from 'classnames';
+import { Arrow, useLayer } from 'react-laag';
+import { Button } from '../button/button';
+import styles from './popover.module.less';
+import { DisabledContext } from '../../helpers/disabled-context';
+
+export const Popover = ({
+  children,
+  content,
+  placement,
+  closeOnOutsideClick,
+  fullWidth,
+  showCloseButton,
+  testId,
+  disabled,
+  overflowContainer,
+}) => {
+  const disabledContext = useContext(DisabledContext);
+
+  const [isOpen, setOpen] = useState(false);
+
+  const close = () => setOpen(false);
+  const toggle = () => {
+    if (!(disabled || disabledContext)) {
+      setOpen(!isOpen);
+    }
+  };
+
+  useEffect(() => {
+    if (!(disabled || disabledContext)) {
+      close();
+    }
+  }, [disabled, disabledContext]);
+
+  const { renderLayer, arrowProps, layerProps, triggerProps } = useLayer({
+    isOpen,
+    placement,
+    auto: true,
+    triggerOffset: 6,
+    onOutsideClick: closeOnOutsideClick ? close : undefined,
+    ResizeObserver,
+    overflowContainer,
+  });
+
+  return (
+    <>
+      <div ref={triggerProps.ref} onClick={toggle} data-testid={testId}>
+        {children}
+      </div>
+      {isOpen &&
+        renderLayer(
+          <div
+            className={
+              fullWidth
+                ? cx(styles.toggleBox, styles.fullWidthStyleFix)
+                : cx(styles.toggleBox)
+            }
+            {...layerProps} // eslint-disable-line react/jsx-props-no-spreading
+          >
+            <div>
+              {React.isValidElement(content)
+                ? React.cloneElement(content, { close })
+                : content}
+              {showCloseButton && (
+                <div className={styles.dismiss}>
+                  <Button
+                    small
+                    round
+                    onClick={() => close()}
+                    icon={<FaTimes />}
+                  />
+                </div>
+              )}
+            </div>
+            <Arrow
+              {...arrowProps} // eslint-disable-line react/jsx-props-no-spreading
+              backgroundColor="var(--color-background-raised)"
+              borderColor="var(--color-border)"
+              borderWidth={1}
+              size={6}
+            />
+          </div>,
+        )}
+    </>
+  );
+};
+
+Popover.propTypes = {
+  content: PropTypes.node,
+  closeOnOutsideClick: PropTypes.bool,
+  placement: PropTypes.string, //https://www.react-laag.com/docs/togglelayer/
+  fullWidth: PropTypes.bool,
+  showCloseButton: PropTypes.bool, //when closeOnOutsideClick is false and no cancel button is suitable
+  testId: PropTypes.string,
+  disabled: PropTypes.bool,
+  overflowContainer: PropTypes.bool,
+};
+
+Popover.defaultProps = {
+  content: null,
+  closeOnOutsideClick: true,
+  placement: 'top-center',
+  fullWidth: false,
+  showCloseButton: false,
+  testId: undefined,
+  disabled: false,
+  overflowContainer: false,
+};

package/src/components/popover/popover.module.less

@@ -0,0 +1,22 @@
+@import '../../style/variables.less';
+
+.toggleBox {
+  background-color: var(--color-background-raised);
+  padding: 14px;
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  z-index: @zindex_popover;
+}
+
+.fullWidthStyleFix {
+  max-width: 100%;
+  left: 0 !important;
+  margin: 0 35px;
+}
+
+.dismiss {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}