@bundle-stats/ui 4.0.5 → 4.0.6-beta.0

package/lib/components/bundle-modules/bundle-modules.module.css

@@ -22,5 +22,6 @@
 }
 
 .nameText {
+  display: inline;
   vertical-align: middle;
 }

package/lib/query-state.js

@@ -13,10 +13,12 @@ var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactRouterDom = require("react-router-dom");
-
 var _useQueryParams4 = require("use-query-params");
 
+var _reactRouter = require("use-query-params/adapters/react-router-5");
+
+var _queryString = require("query-string");
+
 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; }
@@ -40,12 +42,12 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 QueryStateProvider = function QueryStateProvider(props) {
-  var history = (0, _reactRouterDom.useHistory)();
-  var location = (0, _reactRouterDom.useLocation)();
   return /*#__PURE__*/_react["default"].createElement(_useQueryParams4.QueryParamProvider, _extends({
-    ReactRouterRoute: _reactRouterDom.Route,
-    location: location,
-    history: history
+    adapter: _reactRouter.ReactRouter5Adapter,
+    options: {
+      searchStringToObject: _queryString.parse,
+      objectToSearchString: _queryString.stringify
+    }
   }, props));
 };
 

package/lib/ui/dropdown/dropdown.js

@@ -37,11 +37,14 @@ var Dropdown = function Dropdown(props) {
     className: (0, _classnames["default"])(_dropdownModule["default"].button, buttonClassName),
     tabIndex: null
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-    space: "xxxsmall"
+    space: "xxxsmall",
+    className: _dropdownModule["default"].label
   }, glyph && /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     className: _dropdownModule["default"].labelIcon,
     glyph: glyph
-  }), label)), /*#__PURE__*/_react["default"].createElement(_menu.Menu, {
+  }), label && /*#__PURE__*/_react["default"].createElement("span", {
+    className: _dropdownModule["default"].labelText
+  }, label))), /*#__PURE__*/_react["default"].createElement(_menu.Menu, {
     state: menuState,
     "aria-label": ariaLabel || label,
     className: _dropdownModule["default"].dropdown

package/lib/ui/dropdown/dropdown.module.css

@@ -10,8 +10,6 @@
   border: 1px solid var(--color-outline);
   border-radius: var(--radius-small);
   padding: calc(var(--space-xxsmall) - 1px);
-  display: flex;
-  align-items: center;
 
   background: none;
   font-size: var(--size-small);
@@ -31,6 +29,10 @@
   color: var(--color-text);
 }
 
+.label {
+  align-items: center;
+}
+
 .dropdown {
   position: absolute;
   left: 0;

package/lib/ui/tooltip/tooltip.module.css

@@ -14,6 +14,7 @@
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   border-radius: var(--radius-medium);
   background: var(--color-light);
+  max-width: 24em;
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
   will-change: filter;

package/lib/ui/tooltip/tooltip.stories.js

@@ -1,8 +1,11 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.LongTooltip = exports.Default = exports.DarkModeFalse = void 0;
 
-var _react2 = require("@storybook/react");
+var _react = _interopRequireDefault(require("react"));
 
 var _stories = require("../../stories");
 
@@ -10,18 +13,32 @@ var _ = require(".");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var stories = (0, _react2.storiesOf)('UI/Tooltip', module);
-stories.addDecorator((0, _stories.getWrapperDecorator)({
-  padding: '64px'
-}));
-stories.add('default', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
-    title: "View job #100"
-  }, "Job #100");
-});
-stories.add('darkMode:false', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
-    title: "View job #100",
-    darkMode: false
-  }, "Job #100");
-});
+var _default = {
+  title: 'UI/Tooltip',
+  component: _.Tooltip,
+  decorators: [(0, _stories.getWrapperDecorator)({
+    padding: '100px',
+    textAlign: 'center'
+  })],
+  args: {
+    title: 'View job #123'
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(props) {
+  return /*#__PURE__*/_react["default"].createElement(_.Tooltip, props, "Job #123");
+};
+
+var Default = Template.bind();
+exports.Default = Default;
+var LongTooltip = Template.bind();
+exports.LongTooltip = LongTooltip;
+LongTooltip.args = {
+  title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie neque id lectus mollis, et imperdiet libero porta.'
+};
+var DarkModeFalse = Template.bind();
+exports.DarkModeFalse = DarkModeFalse;
+DarkModeFalse.args = {
+  darkMode: false
+};

package/lib-esm/components/bundle-assets/bundle-assets.utils.js

@@ -1,5 +1,4 @@
 import _get from "lodash/get";
-import "core-js/modules/es.array.includes.js";
 import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
 import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-assets.constants';
 export const addRowAssetFlags = row => {

package/lib-esm/components/bundle-modules/bundle-modules.module.css

@@ -22,5 +22,6 @@
 }
 
 .nameText {
+  display: inline;
   vertical-align: middle;
 }

package/lib-esm/components/bundle-packages/bundle-packages.utils.js

@@ -1,7 +1,6 @@
 import _uniq from "lodash/uniq";
 import _flatten from "lodash/flatten";
 import _get from "lodash/get";
-import "core-js/modules/es.array.includes.js";
 import { PACKAGE_FILTERS } from '@bundle-stats/utils';
 import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-packages.constants'; // Get a list of duplicate packages across jobs
 

package/lib-esm/components/summary/summary.js

@@ -2,7 +2,6 @@ import _get from "lodash/get";
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
-import "core-js/modules/es.array.includes.js";
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';

package/lib-esm/query-state.js

@@ -4,17 +4,16 @@ import _isEqual from "lodash/isEqual";
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React, { useCallback } from 'react';
-import { Route, useHistory, useLocation } from 'react-router-dom';
 import { JsonParam, QueryParamProvider, useQueryParams } from 'use-query-params';
-export const QueryStateProvider = props => {
-  const history = useHistory();
-  const location = useLocation();
-  return /*#__PURE__*/React.createElement(QueryParamProvider, _extends({
-    ReactRouterRoute: Route,
-    location: location,
-    history: history
-  }, props));
-};
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
+import { parse, stringify } from 'query-string';
+export const QueryStateProvider = props => /*#__PURE__*/React.createElement(QueryParamProvider, _extends({
+  adapter: ReactRouter5Adapter,
+  options: {
+    searchStringToObject: parse,
+    objectToSearchString: stringify
+  }
+}, props));
 export const useComponentQueryState = componentName => {
   const [search, setSearch] = useQueryParams({
     [componentName]: JsonParam

package/lib-esm/ui/dropdown/dropdown.js

@@ -23,11 +23,14 @@ export const Dropdown = props => {
     className: cx(css.button, buttonClassName),
     tabIndex: null
   }, /*#__PURE__*/React.createElement(FlexStack, {
-    space: "xxxsmall"
+    space: "xxxsmall",
+    className: css.label
   }, glyph && /*#__PURE__*/React.createElement(Icon, {
     className: css.labelIcon,
     glyph: glyph
-  }), label)), /*#__PURE__*/React.createElement(Menu, {
+  }), label && /*#__PURE__*/React.createElement("span", {
+    className: css.labelText
+  }, label))), /*#__PURE__*/React.createElement(Menu, {
     state: menuState,
     "aria-label": ariaLabel || label,
     className: css.dropdown

package/lib-esm/ui/dropdown/dropdown.module.css

@@ -10,8 +10,6 @@
   border: 1px solid var(--color-outline);
   border-radius: var(--radius-small);
   padding: calc(var(--space-xxsmall) - 1px);
-  display: flex;
-  align-items: center;
 
   background: none;
   font-size: var(--size-small);
@@ -31,6 +29,10 @@
   color: var(--color-text);
 }
 
+.label {
+  align-items: center;
+}
+
 .dropdown {
   position: absolute;
   left: 0;

package/lib-esm/ui/filters/filters.js

@@ -1,5 +1,3 @@
-import "core-js/modules/es.array.includes.js";
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React, { useCallback } from 'react';

package/lib-esm/ui/tooltip/tooltip.module.css

@@ -14,6 +14,7 @@
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   border-radius: var(--radius-medium);
   background: var(--color-light);
+  max-width: 24em;
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
   will-change: filter;

package/lib-esm/ui/tooltip/tooltip.stories.js

@@ -1,15 +1,26 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Tooltip } from '.';
-const stories = storiesOf('UI/Tooltip', module);
-stories.addDecorator(getWrapperDecorator({
-  padding: '64px'
-}));
-stories.add('default', () => /*#__PURE__*/React.createElement(Tooltip, {
-  title: "View job #100"
-}, "Job #100"));
-stories.add('darkMode:false', () => /*#__PURE__*/React.createElement(Tooltip, {
-  title: "View job #100",
+export default {
+  title: 'UI/Tooltip',
+  component: Tooltip,
+  decorators: [getWrapperDecorator({
+    padding: '100px',
+    textAlign: 'center'
+  })],
+  args: {
+    title: 'View job #123'
+  }
+};
+
+const Template = props => /*#__PURE__*/React.createElement(Tooltip, props, "Job #123");
+
+export const Default = Template.bind();
+export const LongTooltip = Template.bind();
+LongTooltip.args = {
+  title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie neque id lectus mollis, et imperdiet libero porta.'
+};
+export const DarkModeFalse = Template.bind();
+DarkModeFalse.args = {
   darkMode: false
-}, "Job #100"));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.0.5",
+  "version": "4.0.6-beta.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,25 +36,25 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.18.9",
-    "@babel/core": "7.18.9",
+    "@babel/cli": "7.18.10",
+    "@babel/core": "7.18.13",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-env": "7.18.9",
+    "@babel/preset-env": "7.18.10",
     "@babel/preset-react": "7.18.6",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
-    "@storybook/addon-essentials": "6.5.9",
+    "@storybook/addon-essentials": "6.5.10",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.5.9",
-    "@storybook/addons": "6.5.9",
-    "@storybook/builder-webpack5": "6.5.9",
-    "@storybook/manager-webpack5": "6.5.9",
-    "@storybook/react": "6.5.9",
+    "@storybook/addon-storyshots": "6.5.10",
+    "@storybook/addons": "6.5.10",
+    "@storybook/builder-webpack5": "6.5.10",
+    "@storybook/manager-webpack5": "6.5.10",
+    "@storybook/react": "6.5.10",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "28.1.3",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.7.2",
+    "chromatic": "6.7.4",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
     "core-js": "3.24.1",
@@ -67,7 +67,7 @@
     "jest": "27.5.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.4.14",
+    "postcss": "8.4.16",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -85,12 +85,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.0.5",
+    "@bundle-stats/utils": "^4.0.6-beta.0",
     "ariakit": "^2.0.0-next.33",
     "date-fns": "^2.28.0",
     "modern-css-reset": "^1.4.0",
     "query-string": "^7.1.0",
-    "use-query-params": "^1.2.3"
+    "use-query-params": "^2.0.0"
   },
-  "gitHead": "ead8c6d4de77aaa3eb9043054eba5429a1afc04a"
+  "gitHead": "54a399cb5bbffde01089f286fdc7c8b1aa635f94"
 }

package/src/components/bundle-modules/bundle-modules.module.css

@@ -22,5 +22,6 @@
 }
 
 .nameText {
+  display: inline;
   vertical-align: middle;
 }

package/src/query-state.jsx

@@ -1,16 +1,19 @@
 import React, { useCallback } from 'react';
-import { Route, useHistory, useLocation } from 'react-router-dom';
 import { JsonParam, QueryParamProvider, useQueryParams } from 'use-query-params';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5'
+import { parse, stringify } from 'query-string'
 import { isEqual, merge } from 'lodash';
 
-export const QueryStateProvider = (props) => {
-  const history = useHistory();
-  const location = useLocation();
-
-  return (
-    <QueryParamProvider ReactRouterRoute={Route} location={location} history={history} {...props} />
-  );
-};
+export const QueryStateProvider = (props) => (
+  <QueryParamProvider
+    adapter={ReactRouter5Adapter}
+    options={{
+      searchStringToObject: parse,
+      objectToSearchString: stringify,
+    }}
+    {...props}
+  />
+);
 
 export const useComponentQueryState = (componentName) => {
   const [search, setSearch] = useQueryParams({

package/src/ui/dropdown/dropdown.jsx

@@ -15,9 +15,9 @@ export const Dropdown = (props) => {
   return (
     <div className={rootClassName}>
       <MenuButton state={menuState} className={cx(css.button, buttonClassName)} tabIndex={null}>
-        <FlexStack space="xxxsmall">
+        <FlexStack space="xxxsmall" className={css.label}>
           {glyph && <Icon className={css.labelIcon} glyph={glyph} />}
-          {label}
+          {label && <span className={css.labelText}>{label}</span>}
         </FlexStack>
       </MenuButton>
       <Menu state={menuState} aria-label={ariaLabel || label} className={css.dropdown}>

package/src/ui/dropdown/dropdown.module.css

@@ -10,8 +10,6 @@
   border: 1px solid var(--color-outline);
   border-radius: var(--radius-small);
   padding: calc(var(--space-xxsmall) - 1px);
-  display: flex;
-  align-items: center;
 
   background: none;
   font-size: var(--size-small);
@@ -31,6 +29,10 @@
   color: var(--color-text);
 }
 
+.label {
+  align-items: center;
+}
+
 .dropdown {
   position: absolute;
   left: 0;

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

@@ -14,6 +14,7 @@
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   border-radius: var(--radius-medium);
   background: var(--color-light);
+  max-width: 24em;
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
   will-change: filter;