@bundle-stats/ui 3.3.0-alpha.1 → 3.4.0-alpha.1

package/src/ui/hover-card/hover-card.jsx

@@ -0,0 +1,73 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import {
+  Hovercard,
+  HovercardAnchor,
+  HovercardArrow,
+  useHovercard,
+  useHovercardState,
+} from 'ariakit/hovercard';
+
+import css from './hover-card.module.css';
+
+const resolveComponent = (as, href) => {
+  if (as) {
+    return as;
+  }
+
+  if (href) {
+    return 'a';
+  }
+
+  return 'span';
+};
+
+export const HoverCard = (props) => {
+  const { className, hoverCardClassName, href, as, label, children } = props;
+  const state = useHovercardState({ gutter: 8 });
+  const hoverCardProps = useHovercard({ state, portal: true });
+
+  // Fallback to span if no href
+  const Component = resolveComponent(as, href);
+
+  return (
+    <div className={cx(css.root, className)}>
+      <HovercardAnchor state={state} href={href} className={css.anchor} as={Component}>
+        {label}
+      </HovercardAnchor>
+      <Hovercard
+        {...hoverCardProps}
+        state={state}
+        className={cx(css.hoverCard, hoverCardClassName)}
+        style={{ zIndex: 10000 }}
+      >
+        <HovercardArrow size={24} />
+        {typeof children === 'function' ? children({ close: state.hide }) : children}
+      </Hovercard>
+    </div>
+  );
+};
+
+HoverCard.propTypes = {
+  /** Adopted child class name */
+  className: PropTypes.string,
+  /** Adopted child class name for hover card */
+  hoverCardClassName: PropTypes.string,
+  /** Anchor label */
+  label: PropTypes.node,
+  /** Anchor href */
+  href: PropTypes.string,
+  /** Anchor component */
+  as: PropTypes.elementType,
+  /** Hover card component */
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+};
+
+HoverCard.defaultProps = {
+  className: '',
+  hoverCardClassName: '',
+  label: '',
+  as: '',
+  href: '',
+};

package/src/ui/hover-card/hover-card.module.css

@@ -0,0 +1,29 @@
+.root {
+  display: inline-block;
+}
+
+.anchor {
+  display: inline-block;
+  color: inherit;
+  text-decoration: none;
+}
+
+.anchor:hover {
+  color: var(--color-primary);
+}
+
+.anchor:focus {
+  outline: 0;
+}
+
+.hoverCard {
+  padding: var(--space-xsmall) var(--space-small);
+  border-radius: var(--radius-medium);
+  width: calc(100vw - 2 * var(--space-small));
+  max-width: 360px;
+  outline: none;
+  filter: drop-shadow(0 0 var(--space-xxsmall) var(--color-shadow));
+  will-change: filter;
+  background: var(--color-light);
+  font-size: var(--size-small);
+}

package/src/ui/hover-card/index.js

@@ -0,0 +1 @@
+export * from './hover-card';

package/src/ui/icon/icon.jsx

@@ -20,13 +20,17 @@ const ICONS = {
   WARNING: 'warning',
 };
 
-export const Icon = ({ className, glyph, as: Component, size, ...restProps }) => (
-  <Component className={cx(css.root, className, css[size])} {...restProps}>
-    <svg className={css.icon}>
-      <use xlinkHref={`#${glyph}`} />
-    </svg>
-  </Component>
-);
+export const Icon = (props) => {
+  const { className, glyph, as: Component, size, ...restProps } = props;
+
+  return (
+    <Component className={cx(css.root, className, css[size])} {...restProps}>
+      <svg className={css.icon}>
+        <use xlinkHref={`#${glyph}`} />
+      </svg>
+    </Component>
+  );
+};
 
 Icon.ICONS = ICONS;
 

package/src/ui/icon/icon.module.css

@@ -1,5 +1,6 @@
 .root {
   display: inline-block;
+  vertical-align: middle; /** center align when parent display is inline/inline-block **/
 }
 
 .icon {

package/src/ui/index.js

@@ -10,9 +10,9 @@ export { Input } from './input';
 export { Loader } from './loader';
 export { Logo } from './logo';
 export { Panels } from './panels';
-export { Popover } from './popover';
 export { Skeleton } from './skeleton';
 export { SortDropdown } from './sort-dropdown';
 export { Table } from './table';
 export { Tabs } from './tabs';
+export { Tag } from './tag';
 export { Tooltip } from './tooltip';

package/src/ui/table/table.jsx

@@ -4,53 +4,6 @@ import cx from 'classnames';
 
 import css from './table.module.css';
 
-const THead = (props) => <thead {...props} />
-
-const TBody = (props) => <tbody {...props} />;
-
-const Tr = (props) => {
-  const { className, ...restProps } = props;
-  return <tr className={cx(css.row, className)} {...restProps} />;
-};
-
-Tr.defaultProps = {
-  className: '',
-};
-
-Tr.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-};
-
-const Th = (props) => {
-  const { className, ...restProps } = props;
-
-  return <th className={cx(css.cell, className)} {...restProps} />;
-};
-
-Th.defaultProps = {
-  className: '',
-};
-
-Th.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-};
-
-const Td = (props) => {
-  const { className, ...restProps } = props;
-  return <td className={cx(css.cell, className)} {...restProps} />;
-};
-
-Td.defaultProps = {
-  className: '',
-};
-
-Td.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-};
-
 export const Table = ({ className, emptyMessage, compact, outline, children }) => {
   const rootClassName = cx(css.root, className, compact && css.compact, outline && css.outline);
 
@@ -61,11 +14,11 @@ export const Table = ({ className, emptyMessage, compact, outline, children }) =
   return <table className={rootClassName}>{children}</table>;
 };
 
-Table.THead = THead;
-Table.TBody = TBody;
-Table.Th = Th;
-Table.Tr = Tr;
-Table.Td = Td;
+Table.THead = 'thead';
+Table.TBody = 'tbody';
+Table.Tr = 'tr';
+Table.Th = 'th';
+Table.Td = 'td';
 
 Table.defaultProps = {
   className: '',

package/src/ui/table/table.module.css

@@ -1,54 +1,54 @@
 .root {
   border-width: 0;
   width: 100%;
-  border-collapse: collapse;
+  border-spacing: 0;
   empty-cells: show;
   background: var(--color-background);
+  text-align: left;
 }
 
-.cell {
+.root th,
+.root td {
   border: 1px solid var(--color-outline);
   border-width: 1px 0 0;
-  padding: var(--space-small) var(--space-small);
-  text-align: left;
-}
-
-tr:last-child .cell {
-  border-bottom-width: 1px;
+  padding: var(--space-small);
 }
 
-.root thead .cell {
-  border-width: 0 0 2px;
+.root thead th {
+  border-width: 0 0 1px;
   text-transform: uppercase;
   vertical-align: top;
+  background: var(--color-highlight);
 }
 
-.root thead .cell:empty {
+.root thead th:empty {
   display: none;
 }
 
-.root tbody .cell {
+.root tbody th {
   font-weight: normal;
 }
 
-.root tbody .cell a {
+.root tbody tr:first-child td,
+.root tbody tr:first-child th {
+  border-top: 0;
+}
+
+.root tbody td a {
   color: inherit;
   text-decoration: none;
 }
 
-.root tbody .cell a:hover,
-.root tbody .cell a:focus,
-.root tbody .cell a:active
+.root tbody td a:hover,
+.root tbody td a:focus,
+.root tbody td a:active
 {
   color: var(--color-primary);
   text-decoration: underline;
 }
 
-.root tbody tr:nth-child(odd) .cell {
-  background-color: var(--color-highlight);
-}
-
-.root tbody tr:hover .cell {
+.root tbody tr:hover th,
+.root tbody tr:hover td {
   background-color: var(--color-highlight-warning);
 }
 
@@ -62,12 +62,27 @@ tr:last-child .cell {
 
 /* outline variation */
 .outline {
+  --table-radius: var(--radius-medium);
   border: 1px solid var(--color-outline);
-  border-width: 0 1px;
+  border-radius: var(--table-radius);
+}
+
+.outline thead:first-child tr:first-child th:first-child,
+.outline tbody:first-child tr:first-child td:first-child {
+  border-top-left-radius: var(--table-radius);
+}
+
+.outline thead tr:first-child th:last-child,
+.outline tbody:first-child tr:first-child td:last-child {
+  border-top-right-radius: var(--table-radius);
+}
+
+.outline tbody:last-child tr:last-child td:first-child {
+  border-bottom-left-radius: var(--table-radius);
 }
 
-.outline thead tr:first-child .cell {
-  border-top-width: 1px;
+.outline tbody:last-child tr:last-child td:last-child {
+  border-bottom-right-radius: var(--table-radius);
 }
 
 .outline.empty {
@@ -75,7 +90,8 @@ tr:last-child .cell {
 }
 
 /* compact variation */
-.compact .cell {
+.compact td,
+.compact th {
   padding-top: var(--space-xsmall);
   padding-bottom: var(--space-xsmall);
 }

package/src/ui/tag/index.js

@@ -0,0 +1 @@
+export * from './tag';

package/src/ui/tag/tag.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import css from './tag.module.css';
+
+export const KINDS = {
+  DEFAULT: 'default',
+  SUCCESS: 'success',
+  INFO: 'info',
+  WARNING: 'warning',
+  DANGER: 'danger',
+};
+
+export const SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+};
+
+export const Tag = (props) => {
+  const {
+    className = '',
+    as: Component = 'span',
+    kind = KINDS.DEFAULT,
+    size = SIZES.MEDIUM,
+    ...restProps
+  } = props;
+  const rootClassName = cx(css.root, className, css[kind], css[size]);
+
+  return <Component className={rootClassName} {...restProps} />;
+};
+
+Tag.propTypes = {
+  className: PropTypes.string,
+  as: PropTypes.elementType,
+  kind: PropTypes.oneOf(Object.values(KINDS)),
+  size: PropTypes.oneOf(Object.values(SIZES)),
+};
+
+Tag.defaultProps = {
+  className: '',
+  as: 'span',
+  kind: KINDS.DEFAULT,
+  size: SIZES.MEDIUM,
+};
+
+Tag.KINDS = KINDS;
+Tag.SIZES = SIZES;

package/src/ui/tag/tag.module.css

@@ -0,0 +1,55 @@
+.root {
+  display: inline-block;
+  font-family: var(--font-family);
+  font-weight: bold;
+  background: var(--color-text-light);
+  color: var(--color-light);
+  text-align: center;
+  text-transform: uppercase;
+}
+
+/** Kind variation */
+.success {
+  background: var(--color-success);
+}
+
+.info {
+  background: var(--color-info);
+}
+
+.warning {
+  background: var(--color-warning-dark);
+}
+
+.danger {
+  background: var(--color-danger);
+}
+
+/** Size variation */
+/** default: medium */
+.root {
+  border-radius: var(--radius-medium);
+  padding: var(--space-xxxsmall);
+  min-width: var(--space-small);
+  height: var(--space-small);
+  font-size: 9px;
+  line-height: 1;
+}
+
+.small {
+  border-radius: var(--radius-small);
+  padding: calc(var(--space-xxxsmall) / 2);
+  height: var(--space-xsmall);
+  min-width: var(--space-xsmall);
+  font-size: 8px;
+  line-height: 1;
+}
+
+.large {
+  border-radius: var(--radius-large);
+  padding: var(--space-xxxsmall) var(--space-xxsmall);
+  min-width: var(--space-medium);
+  height: var(--space-medium);
+  font-size: 12px;
+  line-height: var(--space-small);
+}

package/src/ui/tooltip/tooltip.jsx

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import {
   Tooltip as UITooltip,
+  TooltipAnchor as UITooltipAnchor,
   TooltipArrow as UITooltipArrow,
-  TooltipReference as UITooltipReference,
   useTooltipState,
-} from 'reakit/Tooltip';
+} from 'ariakit/tooltip';
 
 import css from './tooltip.module.css';
 
@@ -21,26 +21,22 @@ export const Tooltip = (props) => {
     ...restProps
   } = props;
 
-  const rootClassName = cx(css.root, className);
-  const tooltipProps = useTooltipState({
-    baseId: process.env.NODE_ENV === 'test' && 'id-test',
-    placement: 'top',
-  });
+  const tooltip = useTooltipState({ placement: 'top' });
 
   return (
     <>
-      <UITooltipReference
+      <UITooltipAnchor
         as={Component}
-        className={rootClassName}
-        {...ref ? { ref } : {}}
+        className={cx(css.root, className)}
+        state={tooltip}
+        {...(ref ? { ref } : {})}
         {...restProps}
-        {...tooltipProps}
       >
         {children}
-      </UITooltipReference>
+      </UITooltipAnchor>
       {title && (
-        <UITooltip {...tooltipProps} className={cx(css.tooltip, darkMode && css.tooltipDarkMode)}>
-          <UITooltipArrow {...tooltipProps} className={css.arrow} size={12} />
+        <UITooltip state={tooltip} className={cx(css.tooltip, darkMode && css.tooltipDarkMode)}>
+          <UITooltipArrow state={tooltip} className={css.arrow} size={12} />
           {title}
         </UITooltip>
       )}

package/src/ui/tooltip/tooltip.module.css

@@ -12,10 +12,11 @@
 
 .tooltip {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-medium);
   background: var(--color-light);
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
+  will-change: filter;
   font-size: var(--size-xsmall);
   line-height: var(--space-small);
 }

package/lib/ui/popover/popover.js

@@ -1,92 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Popover = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Popover = require("reakit/Popover");
-
-var _icon = require("../icon");
-
-var _popoverModule = _interopRequireDefault(require("./popover.module.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var Popover = function Popover(_ref) {
-  var className = _ref.className,
-      icon = _ref.icon,
-      label = _ref.label,
-      ariaLabel = _ref.ariaLabel,
-      children = _ref.children;
-  var popover = (0, _Popover.usePopoverState)({
-    baseId: process.env.NODE_ENV === 'test' && 'id-test',
-    gutter: 12,
-    modal: true,
-    placement: 'top'
-  });
-  var onCloseButtonClick = (0, _react.useCallback)(function (event) {
-    event.preventDefault();
-    popover.toggle();
-  }, [popover]);
-  var onButtonClick = (0, _react.useCallback)(function (event) {
-    event.preventDefault();
-    popover.toggle();
-  }, [popover]);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Popover.PopoverDisclosure, _extends({
-    className: (0, _classnames["default"])(_popoverModule["default"].button, className)
-  }, popover, {
-    onClick: onButtonClick,
-    "aria-label": ariaLabel
-  }), icon && (typeof icon === 'string' ? /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-    className: _popoverModule["default"].icon,
-    glyph: icon
-  }) : icon), label && /*#__PURE__*/_react["default"].createElement("span", {
-    className: _popoverModule["default"].label
-  }, label)), /*#__PURE__*/_react["default"].createElement(_Popover.Popover, _extends({
-    className: _popoverModule["default"].popover
-  }, popover, {
-    tabIndex: 0
-  }), /*#__PURE__*/_react["default"].createElement(_Popover.PopoverArrow, _extends({
-    className: _popoverModule["default"].arrow
-  }, popover, {
-    size: 16
-  })), typeof children === 'function' ? children({
-    popoverToggle: popover.toggle
-  }) : children, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-    glyph: "close",
-    as: "button",
-    type: "button",
-    className: _popoverModule["default"].closeBtn,
-    onClick: onCloseButtonClick
-  })));
-};
-
-exports.Popover = Popover;
-Popover.propTypes = {
-  className: _propTypes["default"].string,
-  label: _propTypes["default"].element,
-  icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]),
-  children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element, _propTypes["default"].func]).isRequired,
-  ariaLabel: _propTypes["default"].string
-};
-Popover.defaultProps = {
-  className: '',
-  icon: '',
-  label: '',
-  ariaLabel: 'View more info'
-};

package/lib/ui/popover/popover.module.css

@@ -1,66 +0,0 @@
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  border: none;
-  outline: none;
-  padding: 0;
-  background: none;
-  color: inherit;
-  cursor: pointer;
-  line-height: inherit;
-  text-align: inherit;
-}
-
-.button:hover,
-.button:active,
-.button:focus {
-  color: var(--color-primary);
-}
-
-.button:hover .label {
-  text-decoration: underline;
-}
-
-.popover {
-  padding: var(--space-small) var(--space-large) var(--space-small) var(--space-small);
-  border-radius: var(--radius-small);
-  max-width: 360px;
-  outline: none;
-  filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
-  background: var(--color-light);
-  font-size: var(--size-small);
-}
-
-.arrow svg {
-  display: block;
-}
-
-.arrow :global .fill {
-  fill: var(--color-light);
-}
-
-.arrow :global .stroke {
-  fill: var(--color-light);
-}
-
-.closeBtn {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: var(--space-large);
-  height: var(--space-large);
-  padding: var(--space-xxsmall);
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
-}
-
-.closeBtn:hover,
-.closeBtn:active,
-.closeBtn:focus {
-  color: var(--color-text-light);
-  transition: var(--transition-in);
-}