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

package/src/components/tooltip/tooltip-layer.jsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Arrow } from 'react-laag';
-import cx from 'classnames';
-import styles from './tooltip.module.less';
-
-export const TooltipLayer = ({
-  text,
-  error,
-  warning,
-  padding,
-  maxWidth,
-  fontSize,
-  layerProps,
-  arrowProps,
-}) => {
-  return (
-    <div
-      className={cx(
-        styles.tooltip,
-        error ? styles.error : warning ? styles.warning : '',
-      )}
-      {...layerProps} // eslint-disable-line react/jsx-props-no-spreading
-    >
-      <div style={{ maxWidth, fontSize, padding }}>{text}</div>
-      <Arrow
-        {...arrowProps} // eslint-disable-line react/jsx-props-no-spreading
-        size={6}
-      />
-    </div>
-  );
-};
-
-TooltipLayer.defaultProps = {
-  text: '',
-  error: false,
-  warning: false,
-  maxWidth: 'none',
-  fontSize: 'inherit',
-  padding: '4px 8px',
-  layerProps: {
-    style: {
-      position: 'fixed',
-    },
-  },
-  layerSide: 'top',
-  arrowProps: {
-    style: {
-      top: '100%',
-      bottom: null,
-      left: '50%',
-      right: null,
-      position: 'absolute',
-    },
-  },
-};
-
-TooltipLayer.propTypes = {
-  text: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.node,
-  ]),
-  error: PropTypes.bool,
-  warning: PropTypes.bool,
-  fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  layerSide: PropTypes.string,
-  layerProps: PropTypes.object,
-  arrowProps: PropTypes.object,
-};

package/src/components/tooltip/tooltip.jsx

@@ -1,108 +0,0 @@
-import React, { isValidElement } from 'react';
-import PropTypes from 'prop-types';
-import ResizeObserver from 'resize-observer-polyfill';
-import { useLayer, useHover } from 'react-laag';
-import { TooltipLayer } from './tooltip-layer';
-
-export const Tooltip = ({
-  children,
-  text,
-  error,
-  placement,
-  possiblePlacements,
-  enabled,
-  warning,
-  maxWidth,
-  triggerOffset,
-  fontSize,
-  padding,
-  display,
-  flex,
-  forceOpen,
-}) => {
-  const visible = enabled && (isValidElement(text) || text.length > 0);
-
-  const [isOver, hoverProps, forceClose] = useHover({
-    delayEnter: 100,
-    delayLeave: 100,
-  });
-
-  const isOpen = !visible ? false : forceOpen ? true : isOver;
-
-  const { renderLayer, triggerProps, layerProps, arrowProps } = useLayer({
-    isOpen,
-    overflowContainer: true,
-    ResizeObserver,
-    auto: true,
-    triggerOffset,
-    placement,
-    possiblePlacements,
-    onParentClose: forceClose,
-  });
-
-  return (
-    <>
-      {isOpen &&
-        renderLayer(
-          <TooltipLayer
-            text={text}
-            error={error}
-            warning={warning}
-            padding={padding}
-            maxWidth={maxWidth}
-            fontSize={fontSize}
-            layerProps={layerProps}
-            arrowProps={arrowProps}
-          />,
-        )}
-      <span
-        {...triggerProps} // eslint-disable-line react/jsx-props-no-spreading
-        {...hoverProps} // eslint-disable-line react/jsx-props-no-spreading
-        style={{ display, flex }}
-      >
-        {children}
-      </span>
-    </>
-  );
-};
-
-Tooltip.defaultProps = {
-  text: '',
-  enabled: true,
-  error: false,
-  warning: false,
-  placement: 'top-center',
-  maxWidth: 'none',
-  triggerOffset: 12,
-  possiblePlacements: [
-    'top-center',
-    'left-center',
-    'bottom-center',
-    'right-center',
-  ],
-  fontSize: 'inherit',
-  padding: '4px 8px',
-  display: 'inline',
-  flex: 'none',
-  forceOpen: false,
-};
-
-Tooltip.propTypes = {
-  text: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.node,
-  ]),
-  error: PropTypes.bool,
-  warning: PropTypes.bool,
-  placement: PropTypes.string,
-  enabled: PropTypes.bool,
-  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  triggerOffset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  possiblePlacements: PropTypes.array,
-  fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  display: PropTypes.string,
-  flex: PropTypes.string,
-  forceOpen: PropTypes.bool,
-};

package/src/components/tooltip/tooltip.module.less

@@ -1,28 +0,0 @@
-@import '../../style/variables.less';
-
-.tooltip {
-  background: var(--color-text);
-  fill: var(--color-text);
-  z-index: @zindex_tooltip;
-  color: var(--color-background);
-  border-radius: 3px;
-
-  * {
-    color: var(--color-background);
-  }
-
-  > svg,
-  > svg > * {
-    fill: inherit !important;
-  }
-
-  &.error {
-    background: var(--color-error-500);
-    fill: var(--color-error-500);
-  }
-
-  &.warning {
-    background: var(--color-warning-500);
-    fill: var(--color-warning-500);
-  }
-}

package/src/components/tooltip/tooltip.stories.jsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { Tooltip } from '../../..';
-
-export default {
-  title: 'Basic/Tooltip',
-  component: Tooltip,
-  args: {
-    text: 'Tooltip text',
-    error: false,
-    warning: false,
-    enabled: true,
-    placement: undefined,
-    triggerOffset: undefined,
-    fontSize: undefined,
-    padding: undefined,
-    maxWidth: undefined,
-    display: undefined,
-    children: <span>Hover over me</span>,
-  },
-};
-
-const Template = (args) => (
-  <Tooltip
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...args}
-  />
-);
-export const Default = Template.bind({});
-
-export const Error = Template.bind({});
-Error.args = { error: true };
-
-export const Warning = Template.bind({});
-Warning.args = { warning: true };
-
-export const JSX = Template.bind({});
-JSX.args = {
-  text: (
-    <>
-      Select from options:
-      <ul>
-        <li>One</li>
-        <li>Two</li>
-      </ul>
-    </>
-  ),
-};
-
-export const Placement = Template.bind({});
-Placement.args = { placement: 'right' };
-
-export const Offset = Template.bind({});
-Offset.args = { triggerOffset: 30 };
-
-export const ForceOpen = Template.bind({});
-ForceOpen.args = { forceOpen: true };
-
-export const Display = Template.bind({});
-Display.args = {
-  display: 'block',
-  children: <div style={{ background: 'lightgray' }}>Block element</div>,
-};
-Display.parameters = {
-  docs: {
-    source: { type: 'code' },
-    description: {
-      story:
-        'The `Tooltip` trigger wrapper defaults to `display: inline`. If you encounter layout issues, try changing this to match its content (i.e. `display: block` for `block` elements)',
-    },
-  },
-};

package/src/components/top-bar/element/element.jsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { Button } from '../../button/button';
-import { Menu } from '../../menu/menu';
-import { Link } from './link';
-import styles from '../top-bar.module.less';
-
-export const Element = ({ element }) => {
-  return (() => {
-    switch (element.type) {
-      case 'Link': {
-        return (
-          <div className={styles.item}>
-            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <Link
-              label={element.label}
-              url={element.url}
-              icon={element.icon}
-              onClick={element.onClick}
-              active={element.active}
-              disabled={element.disabled}
-              testId={element.testId}
-            />
-          </div>
-        );
-      }
-      case 'Button': {
-        return (
-          <div className={cx(styles.item, styles.button)}>
-            <Button
-              label={element.label}
-              colored={element.colored}
-              pill
-              disabled={element.disabled}
-              onClick={element.onClick}
-              icon={element.icon}
-              testId={element.testId}
-            />
-          </div>
-        );
-      }
-      case 'Menu': {
-        return (
-          <div className={cx(styles.item, styles.menu)}>
-            <Menu
-              height="100%"
-              menu={{
-                trigger: 'Component',
-                fullHeightTrigger: true,
-                placement: 'bottom-start',
-                component: (
-                  // eslint-disable-next-line jsx-a11y/anchor-is-valid
-                  <Link
-                    label={element.label}
-                    icon={element.icon}
-                    onClick={element.onClick}
-                  />
-                ),
-                sections: element.sections,
-              }}
-            />
-          </div>
-        );
-      }
-      case 'Component': {
-        return <div className={styles.item}>{element.component}</div>;
-      }
-      default:
-        return null;
-    }
-  })();
-};

package/src/components/top-bar/element/link.jsx

@@ -1,29 +0,0 @@
-import React, { useContext } from 'react';
-import cx from 'classnames';
-import styles from '../top-bar.module.less';
-import { DisabledContext } from '../../../helpers/disabled-context';
-
-export const Link = ({
-  label,
-  url,
-  icon,
-  onClick,
-  active,
-  disabled,
-  testId,
-}) => {
-  const disabledContext = useContext(DisabledContext);
-
-  return (
-    <a
-      className={cx(styles.link, active ? styles.active : '')}
-      href={url}
-      onClick={onClick}
-      disabled={disabled || disabledContext}
-      data-testid={testId}
-    >
-      {icon}
-      <span className={styles.label}>{label}</span>
-    </a>
-  );
-};

package/src/components/top-bar/title.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import styles from './top-bar.module.less';
-
-export const Title = ({ label, logo, url, version, onClick }) => {
-  const content = (
-    <div className={styles.title}>
-      {logo && logo}
-      {label && <span className={styles.label}>{label}</span>}
-      {version && <div className={styles.version}>{version}</div>}
-    </div>
-  );
-  return (
-    <div className={cx(styles.item, styles.brand)}>
-      {url ? (
-        <a href={url} onClick={onClick}>
-          {content}
-        </a>
-      ) : (
-        <div onClick={onClick}>{content}</div>
-      )}
-    </div>
-  );
-};

package/src/components/top-bar/top-bar.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Warning } from './warning';
-import { Title } from './title';
-import { Element } from './element/element';
-import styles from './top-bar.module.less';
-
-export const TopBar = ({
-  title,
-  content,
-  contentRight,
-  warning,
-  height,
-  //private:
-  fixedPosition,
-}) => {
-  return (
-    <div>
-      {warning && <Warning warning={warning} />}
-      <div
-        className={cx(styles.topbar, fixedPosition ? styles.fixed : '')}
-        style={{ height }}
-      >
-        <div className={styles.left}>
-          {title && (
-            <Title
-              label={title.label}
-              logo={title.logo}
-              url={title.url}
-              version={title.version}
-              onClick={title.onClick}
-            />
-          )}
-          {content.map((element, i) => {
-            if (element) {
-              return <Element key={i} element={element} />;
-            }
-            return null;
-          })}
-        </div>
-        <div className={styles.right}>
-          {contentRight.map((element, i) => {
-            if (element) {
-              return <Element key={i} element={element} />;
-            }
-            return null;
-          })}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-TopBar.defaultProps = {
-  title: null,
-  content: [],
-  contentRight: [],
-  warning: '',
-  height: null,
-  //private props:
-  fixedPosition: true,
-};
-
-TopBar.propTypes = {
-  title: PropTypes.shape({
-    label: PropTypes.string,
-    logo: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    url: PropTypes.string,
-    onClick: PropTypes.func,
-    version: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  }),
-  content: PropTypes.array,
-  contentRight: PropTypes.array,
-  warning: PropTypes.string,
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  //private props:
-  fixedPosition: PropTypes.bool,
-};

package/src/components/top-bar/top-bar.module.less

@@ -1,190 +0,0 @@
-@import '../../style/variables.less';
-
-:root {
-  --shadow-topbar: 0 1px 2px 0 rgba(black, 0.15);
-}
-
-[data-theme='dark'] {
-  --shadow-topbar: 0 1px 2px 0 rgba(black, 0.5);
-}
-
-@topbar_padding: 1.5rem;
-
-.topbar {
-  top: 0;
-  left: 0;
-  z-index: @zindex_topbar;
-  width: 100%;
-  height: @topbar_height;
-  box-shadow: var(--shadow-topbar);
-  background: var(--color-background-raised);
-  display: flex;
-  font-size: 13px;
-
-  &.fixed {
-    position: fixed;
-  }
-
-  @media print {
-    display: none !important;
-  }
-}
-
-.title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  padding: 0;
-  position: relative;
-
-  img,
-  svg {
-    max-height: 30px;
-    max-width: 300px;
-    height: auto;
-    width: auto;
-    color: var(--color-text);
-  }
-
-  .label {
-    color: var(--color-text);
-    margin-left: 5px;
-    white-space: nowrap;
-  }
-}
-
-.brand {
-  padding: 0;
-  position: relative;
-  flex-shrink: 0;
-}
-
-.title,
-.version,
-.link {
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-
-.version {
-  position: absolute;
-  right: 0;
-  bottom: 100%;
-  margin-bottom: 3px;
-  font-size: 10px;
-}
-
-.left,
-.right {
-  display: flex;
-  min-width: 0;
-}
-
-.left {
-  margin-right: @topbar_padding;
-}
-
-.right {
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
-.item,
-.link {
-  align-items: center;
-  display: flex;
-}
-
-.item {
-  line-height: 1;
-  margin-left: @topbar_padding;
-  position: relative;
-  transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
-  user-select: none;
-  vertical-align: middle;
-  min-width: 0;
-
-  .right & {
-    margin-left: 0;
-    margin-right: @topbar_padding;
-  }
-
-  &.button,
-  &.menu {
-    flex-shrink: 0;
-  }
-}
-
-.label {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  display: block;
-  max-width: 100%;
-}
-
-.link {
-  text-decoration: none;
-  color: var(--color-text-primary);
-  cursor: pointer;
-  line-height: 1;
-  max-width: 100%;
-
-  svg {
-    margin-right: 5px;
-    flex-shrink: 0;
-  }
-
-  &:hover {
-    color: var(--color-text-primary-hover);
-  }
-
-  &:active {
-    color: var(--color-text-primary-active);
-  }
-
-  &.active {
-    color: var(--color-text);
-  }
-
-  &:hover,
-  &.active {
-    background-color: transparent;
-  }
-
-  &:hover:after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-bottom: 2px solid var(--color-border);
-  }
-
-  &.active:after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-bottom: 2px solid var(--color-text-primary-active);
-  }
-
-  &[disabled] {
-    pointer-events: none;
-    color: var(--color-text-faint);
-  }
-}
-
-.alert {
-  background-color: var(--color-background-primary);
-  color: white;
-  text-align: center;
-  position: fixed;
-  top: 60px;
-  left: 0;
-  right: 0;
-  z-index: @zindex_topbar_alert;
-  padding: 0.75rem;
-}