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

package/src/components/loader/loader.stories.jsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import { Loader, ProgressBar, Spinner, Spacer, Button, Card } from '../../..';
+
+export default {
+  title: 'Progress/Loader',
+  component: Loader,
+  argTypes: {
+    theme: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['white', 'light', 'dark'],
+    },
+  },
+  args: {
+    theme: 'white',
+    text: 'Loading...',
+    width: '100%',
+    height: '100%',
+    fullViewPortSize: false,
+  },
+  decorators: [
+    (story) => (
+      <div style={{ height: '200px', position: 'relative' }}>{story()}</div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      source: {
+        excludeDecorators: true,
+      },
+    },
+  },
+};
+
+const SpinnerTemplate = (args) => {
+  const { theme } = args;
+  return (
+    <Loader
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+    >
+      <Spinner dark={theme !== 'dark'} />
+    </Loader>
+  );
+};
+
+const ProgressBarTemplate = (args) => {
+  const { theme } = args;
+  return (
+    <Loader
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+    >
+      <ProgressBar width="300px" inverted={theme === 'dark'} percentage={40} />
+    </Loader>
+  );
+};
+
+export const Default = SpinnerTemplate.bind({});
+
+export const WithProgressBar = ProgressBarTemplate.bind({});
+
+export const TintedBackground = SpinnerTemplate.bind({});
+TintedBackground.args = { theme: 'light' };
+
+export const FullViewport = SpinnerTemplate.bind({});
+FullViewport.args = {
+  theme: 'dark',
+  fullViewPortSize: true,
+};
+
+export const FullViewportWithProgressBar = ProgressBarTemplate.bind({});
+FullViewportWithProgressBar.args = {
+  theme: 'dark',
+  fullViewPortSize: true,
+};
+
+export const WithExtraTextDetails = ProgressBarTemplate.bind({});
+WithExtraTextDetails.args = { details: 'Some extra info' };
+
+export const WithExtraJSXDetails = ProgressBarTemplate.bind({});
+WithExtraJSXDetails.args = {
+  text: '',
+  details: (
+    <>
+      <div style={{ opacity: 0.5 }}>Step 1: Lorem ipsum...DONE</div>
+      <Spacer height="8px" />
+      <div>Step 2: Dolor est</div>
+      <Spacer height="8px" />
+      <div style={{ opacity: 0.5 }}>Step 3: Compendum</div>
+      <Spacer height="16px" />
+      <Button label="Cancel" onClick={() => {}} />
+    </>
+  ),
+};
+
+export const CoversCardContent = () => {
+  const [loading, setLoading] = useState(true);
+  return (
+    <>
+      <Button label="Toggle loading" onClick={() => setLoading(!loading)} />
+      <Spacer />
+      <Card>
+        <div style={{ position: 'relative' }}>
+          {loading && (
+            <Loader cover theme="white">
+              <Spinner dark />
+            </Loader>
+          )}
+          {'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '.repeat(
+            20,
+          )}
+        </div>
+      </Card>
+    </>
+  );
+};
+CoversCardContent.parameters = {
+  docs: {
+    inlineStories: false,
+    iframeHeight: 300,
+  },
+};
+
+export const ReplacesCardContent = () => {
+  const [loading, setLoading] = useState(true);
+  return (
+    <>
+      <Button label="Toggle loading" onClick={() => setLoading(!loading)} />
+      <Spacer />
+      <Card>
+        <div style={{ position: 'relative' }}>
+          {loading ? (
+            <Loader theme="white" height="200px">
+              <Spinner dark />
+            </Loader>
+          ) : (
+            <div>
+              {'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '.repeat(
+                20,
+              )}
+            </div>
+          )}
+        </div>
+      </Card>
+    </>
+  );
+};
+ReplacesCardContent.parameters = {
+  docs: {
+    inlineStories: false,
+    iframeHeight: 300,
+  },
+};

package/src/components/menu/index.js

@@ -0,0 +1,7 @@
+/* intentional circular dependency (recursion for sub-menus) */
+/* eslint-disable import/no-cycle*/
+export { Layer } from './layer/layer';
+/* eslint-enable import/no-cycle*/
+export { placementOptions } from './layer/placementOptions';
+export { siblings, registerClose } from './layer/path';
+export { Trigger } from './trigger/trigger';

package/src/components/menu/layer/divider.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import styles from '../menu.module.less';
+
+export const Divider = () => <hr className={styles.divider} />;

package/src/components/menu/layer/heading.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from '../menu.module.less';
+
+export const Heading = ({ label, onClick, icon, testId }) => (
+  <div
+    onClick={(evt) => evt.stopPropagation()} //don't close menu
+    className={styles.heading}
+    data-testid={testId}
+  >
+    {label}
+    <span className={styles.headingIcon} onClick={onClick}>
+      {icon}
+    </span>
+  </div>
+);

package/src/components/menu/layer/layer.jsx

@@ -0,0 +1,82 @@
+import React, { isValidElement, useState } from 'react';
+import cx from 'classnames';
+import styles from '../menu.module.less';
+import { Section } from './section';
+import { childPath } from './path';
+
+export const Layer = ({
+  sections,
+  isNested,
+  width,
+  closeOnOptionClick,
+  close,
+  tree,
+  path,
+  maxHeight,
+  showAllButton,
+}) => {
+  if (isValidElement(sections)) {
+    return <>{sections}</>;
+  }
+
+  const [showAll, setShowAll] = useState(!showAllButton?.visible); //show all by default
+  const additionalSections =
+    showAllButton?.additionalSections?.map((s) => ({
+      ...s,
+      closeOnOptionClick,
+      visible: true,
+    })) ?? [];
+
+  const localSections = showAllButton?.visible
+    ? sections
+        .map((s, i) => {
+          return showAll || i <= 3
+            ? {
+                ...s,
+                visible: true,
+                closeOnOptionClick,
+              }
+            : s;
+        })
+        .concat(
+          // add the show all button only when sections length is bigger than 4 options
+          sections.length > 4 && {
+            type: 'Option',
+            label: showAll
+              ? showAllButton.showLessTitle
+              : showAllButton.showAllTitle,
+            onClick: () => setShowAll(!showAll),
+            visible: true,
+            closeOnOptionClick: false,
+          },
+          additionalSections,
+        )
+        .filter((s) => s?.visible)
+    : sections.map((s) => ({ ...s, closeOnOptionClick }));
+
+  return (
+    <div
+      className={cx(styles.layer, isNested ? styles.nested : null)}
+      style={{
+        maxWidth: width,
+        maxHeight: maxHeight || 'auto',
+        overflowY: maxHeight ? 'auto' : 'default',
+      }}
+    >
+      <ul>
+        {localSections.map((section, i) => (
+          <li key={i}>
+            <Section
+              section={section}
+              closeOnOptionClick={section.closeOnOptionClick}
+              close={close}
+              tree={tree}
+              path={childPath(path, i)}
+              maxHeight={maxHeight}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/components/menu/layer/option.jsx

@@ -0,0 +1,77 @@
+import React, { isValidElement } from 'react';
+import { FaCheck } from 'react-icons/fa';
+import cx from 'classnames';
+import { Icon } from '../../icon/icon';
+import styles from '../menu.module.less';
+import { Actions } from '../../actions/actions';
+
+export const Option = ({
+  actions,
+  label,
+  url,
+  onClick,
+  description,
+  icon,
+  selected,
+  closeOnOptionClick,
+  close,
+  disabled,
+  inline,
+  title,
+  upload,
+  onChange,
+  testId,
+}) => {
+  return (
+    <a
+      href={url}
+      className={cx(
+        styles.option,
+        disabled ? styles.disabled : '',
+        inline ? styles.inline : '',
+        selected ? styles.selected : '',
+      )}
+      disabled={disabled}
+      onClick={(evt) => {
+        evt.stopPropagation();
+        if (disabled || upload) {
+          return;
+        }
+        if (closeOnOptionClick) {
+          close();
+        }
+        return onClick(evt);
+      }}
+      data-testid={testId}
+    >
+      {icon ? (
+        <span className={styles.icon}>
+          <Icon icon={icon} size={14} />
+        </span>
+      ) : null}
+      <div className={styles.optionContent}>
+        {upload && (
+          <input
+            type="file"
+            className={styles.fileInput}
+            onChange={(evt) => {
+              onChange(evt.target.files);
+              close();
+            }}
+          />
+        )}
+        <span className={styles.label} title={title || label}>
+          {label}
+        </span>
+        <div className={styles.right}>
+          <span className={styles.description}>{description}</span>
+          {!!actions?.length && (
+            <div className={styles.actions}>
+              <Actions actions={actions} right />
+            </div>
+          )}
+        </div>
+      </div>
+    </a>
+  );
+};

package/src/components/menu/layer/path.js

@@ -0,0 +1,44 @@
+import _ from 'lodash';
+
+/*
+  Path helpers for menus with subsections
+  Mainly to help keep track of the close() handlers for nested layers
+  See menu.test.js for examples
+ */
+
+/*
+  parentPath gets the parent path
+  foo.bar[45] -> foo.bar
+ */
+
+export const parentPath = (path) =>
+  path.includes('[') ? path.substr(0, path.lastIndexOf('[')) : path;
+
+/*
+  childPath gets the child path given the parent path and section index
+  foo -> foo.sections[2]
+ */
+
+export const childPath = (path, sectionIndex) =>
+  `${path}.sections[${sectionIndex}]`.replace(/^\./, '');
+
+/*
+  closePath gets the close handler's path given the path to the section
+  foo -> foo.close
+ */
+
+export const closePath = (path) => `${path}.close`.replace(/^\./, '');
+
+/*
+  siblings gets the siblings given any tree and path to a child
+ */
+
+export const siblings = (tree, path) => _.get(tree, parentPath(path), []);
+
+/*
+  registerClose sets the close handler given any tree and path to a child
+  (mutates intentionally, unavoidable in how we use the tree in Menu)
+ */
+
+export const registerClose = (tree, path, close) =>
+  _.set(tree, closePath(path), close);

package/src/components/menu/layer/placementOptions.js

@@ -0,0 +1,6 @@
+export const placementOptions = (placement, isNested = false) => ({
+  auto: true,
+  preferX: 'right',
+  preferY: 'bottom',
+  placement: placement || (isNested ? 'right-start' : 'bottom-start'),
+});

package/src/components/menu/layer/section.jsx

@@ -0,0 +1,66 @@
+import React, { useContext } from 'react';
+import { Heading } from './heading';
+import { Divider } from './divider';
+import { Option } from './option';
+import { DropDownMenu } from '../menu';
+import { DisabledContext } from '../../../helpers/disabled-context';
+
+export const Section = ({
+  section,
+  closeOnOptionClick,
+  close,
+  tree,
+  path,
+  maxHeight,
+}) => {
+  const disabledContext = useContext(DisabledContext);
+
+  switch (section.type) {
+    case 'Heading':
+      return (
+        <Heading
+          label={section.label}
+          onClick={section.onClick}
+          icon={section.icon}
+          testId={section.testId}
+        />
+      );
+    case 'Divider':
+      return <Divider />;
+    case 'Option':
+      return (
+        <Option
+          actions={section.actions}
+          label={section.label}
+          url={section.url}
+          onClick={section.onClick}
+          description={section.description}
+          icon={section.icon}
+          selected={section.selected}
+          closeOnOptionClick={closeOnOptionClick}
+          close={close}
+          disabled={section.disabled || disabledContext}
+          inline={section.inline}
+          title={section.title}
+          upload={section.upload}
+          onChange={section.onChange}
+          testId={section.testId}
+        />
+      );
+    case 'Menu':
+      return (
+        <DropDownMenu
+          menu={section.menu}
+          closeOnOptionClick={closeOnOptionClick}
+          isNested
+          closeParent={close}
+          tree={tree}
+          path={path}
+          maxHeight={maxHeight}
+          testId={section.testId}
+        />
+      );
+    default:
+      return null;
+  }
+};