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

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

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

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

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

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

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

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

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

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

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

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