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

package/lib-esm/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/lib-esm/ui/table/table.stories.js

@@ -46,7 +46,7 @@ stories.add('with custom content and attributes', () => /*#__PURE__*/React.creat
   style: {
     textDecoration: 'underline'
   }
-}, "Col C(undefiner)"))), /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, /*#__PURE__*/React.createElement("strong", null, "row 1")), /*#__PURE__*/React.createElement(Td, {
+}, "Col C(underline)"))), /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, /*#__PURE__*/React.createElement("strong", null, "row 1")), /*#__PURE__*/React.createElement(Td, {
   style: {
     textAlign: 'right'
   }

package/lib-esm/ui/tag/index.js

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

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

@@ -0,0 +1,45 @@
+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); }
+
+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 /*#__PURE__*/React.createElement(Component, _extends({
+    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/lib-esm/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/lib-esm/ui/tag/tag.stories.js

@@ -0,0 +1,23 @@
+import { Tag } from '.';
+export default {
+  title: 'UI/Tag',
+  component: Tag,
+  argTypes: {
+    kind: {
+      control: 'select',
+      options: Object.values(Tag.KINDS)
+    },
+    size: {
+      control: 'select',
+      options: Object.values(Tag.SIZES)
+    }
+  },
+  args: {
+    children: 'tag'
+  }
+};
+export const Default = Tag.bind();
+export const OneLetter = Tag.bind();
+OneLetter.args = {
+  children: 'd'
+};

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

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Tooltip as UITooltip, TooltipArrow as UITooltipArrow, TooltipReference as UITooltipReference, useTooltipState } from 'reakit/Tooltip';
+import { Tooltip as UITooltip, TooltipAnchor as UITooltipAnchor, TooltipArrow as UITooltipArrow, useTooltipState } from 'ariakit/tooltip';
 import css from './tooltip.module.css';
 export const Tooltip = props => {
   const {
@@ -15,22 +15,23 @@ export const Tooltip = props => {
     darkMode,
     ...restProps
   } = props;
-  const rootClassName = cx(css.root, className);
-  const tooltipProps = useTooltipState({
-    baseId: process.env.NODE_ENV === 'test' && 'id-test',
+  const tooltip = useTooltipState({
     placement: 'top'
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UITooltipReference, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UITooltipAnchor, _extends({
     as: Component,
-    className: rootClassName
+    className: cx(css.root, className),
+    state: tooltip
   }, ref ? {
     ref
-  } : {}, restProps, tooltipProps), children), title && /*#__PURE__*/React.createElement(UITooltip, _extends({}, tooltipProps, {
+  } : {}, restProps), children), title && /*#__PURE__*/React.createElement(UITooltip, {
+    state: tooltip,
     className: cx(css.tooltip, darkMode && css.tooltipDarkMode)
-  }), /*#__PURE__*/React.createElement(UITooltipArrow, _extends({}, tooltipProps, {
+  }, /*#__PURE__*/React.createElement(UITooltipArrow, {
+    state: tooltip,
     className: css.arrow,
     size: 12
-  })), title));
+  }), title));
 };
 Tooltip.defaultProps = {
   className: '',

package/lib-esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.3.0-alpha.1",
+  "version": "3.3.0-beta.1",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -15,7 +15,7 @@
     "generate-svg-sprite": "npx svg-sprite -s --si --no-svg-namespace-classnames src/assets/icons/*.svg && mv symbol/svg/sprite.symbol.svg src/assets/icons.svg",
     "lint": "../../node_modules/.bin/eslint . --ext .jsx,.js",
     "start": "cross-env NODE_ENV=development start-storybook -c ./build/storybook -p 8080",
-    "test": "npm run test:unit && npm run test:storyshots",
+    "test": "npm run test:unit",
     "test:unit": "jest src --passWithNoTests",
     "test:storyshots": "jest build/storybook ",
     "chromatic": "chromatic --exit-zero-on-changes"
@@ -36,38 +36,39 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.16.0",
-    "@babel/core": "7.16.0",
-    "@babel/plugin-proposal-class-properties": "7.16.0",
-    "@babel/preset-env": "7.16.4",
-    "@babel/preset-react": "7.16.0",
+    "@babel/cli": "7.17.6",
+    "@babel/core": "7.17.5",
+    "@babel/plugin-proposal-class-properties": "7.16.7",
+    "@babel/preset-env": "7.16.11",
+    "@babel/preset-react": "7.16.7",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
+    "@storybook/addon-essentials": "6.4.19",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.4.8",
-    "@storybook/addons": "6.4.8",
-    "@storybook/builder-webpack5": "6.4.8",
-    "@storybook/manager-webpack5": "6.4.8",
-    "@storybook/react": "6.4.8",
+    "@storybook/addon-storyshots": "6.4.19",
+    "@storybook/addons": "6.4.19",
+    "@storybook/builder-webpack5": "6.4.19",
+    "@storybook/manager-webpack5": "6.4.19",
+    "@storybook/react": "6.4.19",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "27.4.2",
+    "babel-jest": "27.5.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.2.0",
+    "chromatic": "6.5.1",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.19.3",
+    "core-js": "3.20.2",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "27.4.3",
+    "jest": "27.5.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.4.4",
-    "prop-types": "15.7.2",
+    "postcss": "8.4.7",
+    "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-router-dom": "5.3.0",
@@ -75,20 +76,21 @@
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "classnames": "^2.2.6",
-    "core-js": "^3.16.2",
-    "lodash": "^4.17.21",
-    "prop-types": "^15.7.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-router-dom": "^5.3.0"
+    "classnames": "2.2.6",
+    "core-js": "3.20.2",
+    "lodash": "4.17.21",
+    "prop-types": "15.7.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.3.0-alpha.1",
-    "date-fns": "^2.6.0",
-    "query-string": "^7.0.0",
-    "reakit": "^1.3.6",
-    "use-query-params": "^1.2.2"
+    "@bundle-stats/utils": "^3.3.0-beta.1",
+    "ariakit": "2.0.0-alpha.19",
+    "date-fns": "2.28.0",
+    "modern-css-reset": "1.4.0",
+    "query-string": "7.1.1",
+    "use-query-params": "1.2.3"
   },
-  "gitHead": "b510975b373ee38b66899a990c7341d1a29a69e2"
+  "gitHead": "64255c0f9d91148c35c4766068b53e697988f5d9"
 }