@bundle-stats/ui 4.1.4 → 4.1.5-alpha.1

package/lib-esm/components/metrics-table/metrics-table.stories.js

@@ -1,184 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { MetricsTable } from '.';
-const RUNS = [{
-  internalBuildNumber: 2,
-  label: 'Job #2'
-}, {
-  internalBuildNumber: 1,
-  label: /*#__PURE__*/React.createElement("a", {
-    href: "#noop"
-  }, "Job #1")
-}];
-const ITEMS_SINGLE_RUN = [{
-  key: 'webpack.assets.totalSizeByTypeALL',
-  label: 'Total Size',
-  biggerIsBetter: false,
-  changed: false,
-  runs: [{
-    value: 873421,
-    displayValue: '852.95KB'
-  }]
-}, {
-  key: 'lighthouse.timeToFirstByte',
-  label: 'Time To First Byte',
-  biggerIsBetter: false,
-  changed: false,
-  runs: [{
-    value: 1231,
-    displayValue: '1.231s'
-  }]
-}, {
-  key: 'lighthouse.score',
-  label: 'Score',
-  biggerIsBetter: true,
-  changed: false,
-  runs: [{
-    value: 80,
-    displayValue: '80'
-  }]
-}, {
-  key: 'webpack.assets.totalSizeByTypeJS',
-  label: 'JS',
-  biggerIsBetter: false,
-  changed: false,
-  runs: [{
-    value: 344232,
-    displayValue: '336.16KB'
-  }]
-}, {
-  key: 'lighthouse.domSize',
-  label: 'DOM Size',
-  biggerIsBetter: false,
-  changed: false,
-  runs: [{
-    value: 80,
-    displayValue: '80'
-  }]
-}];
-const ITEMS_MULTIPLE_RUNS = [{
-  key: 'webpack.assets.totalSizeByTypeALL',
-  label: 'Total Size',
-  biggerIsBetter: false,
-  changed: true,
-  runs: [{
-    value: 873421,
-    displayValue: '852.95KB',
-    delta: 751090,
-    displayDelta: '+700KB',
-    deltaPercentage: 613.98,
-    displayDeltaPercentage: '+613.98%',
-    deltaType: 'HIGH_NEGATIVE'
-  }, {
-    value: 122331,
-    displayValue: '119.46KB'
-  }]
-}, {
-  key: 'lighthouse.timeToFirstByte',
-  label: 'Time To First Byte',
-  biggerIsBetter: false,
-  changed: true,
-  runs: [{
-    value: 1000,
-    displayValue: '1s',
-    delta: 20,
-    displayDelta: '+20ms',
-    deltaPercentage: 2.0408163,
-    displayDeltaPercentage: '+2.04%',
-    deltaType: 'LOW_NEGATIVE'
-  }, {
-    value: 980,
-    displayValue: '980ms'
-  }]
-}, {
-  key: 'lighthouse.score',
-  label: 'Score',
-  biggerIsBetter: true,
-  changed: true,
-  runs: [{
-    value: 80,
-    displayValue: '80',
-    delta: 10,
-    displayDelta: '+10',
-    deltaPercentage: 14.2857143,
-    displayDeltaPercentage: '+14.29%',
-    deltaType: 'POSITIVE'
-  }, {
-    value: 70,
-    displayValue: '70'
-  }]
-}, {
-  key: 'lighthouse.accessibilityScore',
-  label: 'Accessibility score',
-  biggerIsBetter: true,
-  changed: true,
-  runs: [{
-    value: 80,
-    displayValue: '80',
-    delta: 2,
-    displayDelta: '+2',
-    deltaPercentage: 2.5641026,
-    displayDeltaPercentage: '+2.56%',
-    deltaType: 'LOW_POSITIVE'
-  }, {
-    value: 78,
-    displayValue: '78'
-  }]
-}, {
-  key: 'webpack.assets.totalSizeByTypeJS',
-  label: 'JS',
-  biggerIsBetter: false,
-  changed: true,
-  runs: [{
-    value: 344232,
-    displayValue: '336.16KB',
-    delta: 344232,
-    displayDelta: '+100%',
-    deltaPercentage: 100,
-    displayDeltaPercentage: '+100%',
-    deltaType: 'HIGH_NEGATIVE'
-  }, null]
-}, {
-  key: 'lighthouse.domSize',
-  label: 'DOM Size',
-  biggerIsBetter: false,
-  changed: false,
-  runs: [{
-    value: 80,
-    displayValue: '80',
-    delta: 0,
-    displayDelta: '0',
-    deltaPercentage: 0,
-    displayDeltaPercentage: '0%',
-    deltaType: 'NO_CHANGE'
-  }, {
-    value: 80,
-    displayValue: '80'
-  }]
-}];
-const stories = storiesOf('Components/MetricsTable', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(MetricsTable, {
-  runs: RUNS.slice(0, 1),
-  items: ITEMS_SINGLE_RUN
-}));
-stories.add('multiple runs', () => /*#__PURE__*/React.createElement(MetricsTable, {
-  runs: RUNS,
-  items: ITEMS_MULTIPLE_RUNS
-}));
-stories.add('with header rows', () => /*#__PURE__*/React.createElement(MetricsTable, {
-  runs: RUNS,
-  items: ITEMS_MULTIPLE_RUNS,
-  headerRows: [['Metric', {
-    children: 'Colspan',
-    colSpan: 1 + (RUNS.length - 1) * 2 + 1,
-    style: {
-      textAlign: 'center'
-    }
-  }]]
-}));
-stories.add('empty', () => /*#__PURE__*/React.createElement(MetricsTable, {
-  runs: RUNS,
-  items: []
-}));

package/lib-esm/components/metrics-table-options/metrics-table-options.stories.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { MetricsTableOptions } from '.';
-const stories = storiesOf('Components/MetricsTableOptions', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(MetricsTableOptions, {
-  align: "left",
-  handleResetFilters: () => console.log('reset'),
-  handleViewAll: () => console.log('view all')
-}));

package/lib-esm/components/metrics-table-search/metrics-table-search.stories.js

@@ -1,15 +0,0 @@
-import React, { useState } from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { MetricsTableSearch } from '.';
-const stories = storiesOf('Components/MetricsTableSearch', module);
-stories.addDecorator(getWrapperDecorator());
-const MetricsTableWithState = () => {
-  const [search, updateSearch] = useState('');
-  return /*#__PURE__*/React.createElement(MetricsTableSearch, {
-    placeholder: "Search name",
-    search: search,
-    updateSearch: updateSearch
-  });
-};
-stories.add('default', () => /*#__PURE__*/React.createElement(MetricsTableWithState, null));

package/lib-esm/components/module-info/module-info.stories.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { ModuleInfo } from '.';
-const stories = storiesOf('Components/ModuleInfo', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(ModuleInfo, {
-  item: {
-    runs: [{
-      key: './node_modules/lodash/fp/_baseConvert.js',
-      name: './node_modules/lodash/fp/_baseConvert.js',
-      chunkIds: ['2']
-    }, {
-      key: './node_modules/lodash/fp/_baseConvert.js',
-      name: './node_modules/lodash/fp/_baseConvert.js',
-      chunkIds: ['2']
-    }]
-  },
-  chunks: [{
-    id: '2',
-    name: 'vendors'
-  }],
-  chunkIds: ['1', '2'],
-  labels: ['Job #2', 'Job #1']
-}));

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

@@ -1,47 +0,0 @@
-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 from 'react';
-import { storiesOf } from '@storybook/react';
-import { createJobs } from '@bundle-stats/utils';
-import baselineData from '../../../__mocks__/webpack-stats.baseline.json';
-import currentData from '../../../__mocks__/webpack-stats.current.json';
-import { METRICS_WEBPACK_ASSETS } from '../../constants';
-import { getWrapperDecorator } from '../../stories';
-import { Summary } from '.';
-const MULTIPLE_JOBS = createJobs([{
-  webpack: currentData
-}, {
-  webpack: baselineData
-}]);
-const SINGLE_JOB = createJobs([{
-  webpack: currentData
-}]);
-const stories = storiesOf('Components/Summary', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(Summary, {
-  data: MULTIPLE_JOBS[0].summary
-}));
-stories.add('custom keys', () => /*#__PURE__*/React.createElement(Summary, {
-  keys: METRICS_WEBPACK_ASSETS,
-  data: MULTIPLE_JOBS[0].summary
-}));
-stories.add('loading', () => /*#__PURE__*/React.createElement(Summary, {
-  loading: true
-}));
-stories.add('single run', () => /*#__PURE__*/React.createElement(Summary, {
-  data: SINGLE_JOB[0].summary,
-  showSummaryItemDelta: false
-}));
-stories.add('with link', () => /*#__PURE__*/React.createElement(Summary, {
-  data: MULTIPLE_JOBS[0].summary,
-  summaryItemLink: _ref => {
-    let {
-      keyProps,
-      ...props
-    } = _ref;
-    return /*#__PURE__*/React.createElement("button", _extends({
-      type: "button"
-    }, props, {
-      onClick: () => alert(JSON.stringify(keyProps))
-    }));
-  }
-}));

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import { SummaryItem } from './summary-item';
-export default {
-  title: 'Components/SummaryItem',
-  component: SummaryItem
-};
-export const Standard = () => /*#__PURE__*/React.createElement(SummaryItem, {
-  loading: false,
-  id: "webpack.totalSizeByTypeALL",
-  data: {
-    current: 120 * 1000,
-    baseline: 100 * 1000
-  }
-});
-export const SizeLarge = () => /*#__PURE__*/React.createElement(SummaryItem, {
-  size: "large",
-  loading: false,
-  id: "webpack.totalSizeByTypeALL",
-  data: {
-    current: 120 * 1000,
-    baseline: 100 * 1000
-  }
-});
-export const ShowMetricDescription = () => /*#__PURE__*/React.createElement(SummaryItem, {
-  loading: false,
-  id: "webpack.totalSizeByTypeALL",
-  data: {
-    current: 120 * 1000,
-    baseline: 100 * 1000
-  },
-  showMetricDescription: true
-});
-export const ShowDeltaFalse = () => /*#__PURE__*/React.createElement(SummaryItem, {
-  loading: false,
-  id: "webpack.totalSizeByTypeALL",
-  data: {
-    current: 120 * 1000,
-    baseline: 0
-  },
-  showDelta: false
-});
-export const Loading = () => /*#__PURE__*/React.createElement(SummaryItem, {
-  loading: true,
-  id: "webpack.totalSizeByTypeALL"
-});

package/lib-esm/layout/box/box.stories.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { Box } from '.';
-const stories = storiesOf('Layout/Box', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(Box, {
-  style: {
-    outline: '1px dotted magenta'
-  }
-}, "Lorem ipsum"));
-stories.add('with padding', () => /*#__PURE__*/React.createElement(Box, {
-  padding: "medium",
-  style: {
-    outline: '1px dotted magenta'
-  }
-}, "Lorem ipsum"));
-stories.add('with horizontal padding', () => /*#__PURE__*/React.createElement(Box, {
-  horizontalPadding: "medium",
-  style: {
-    outline: '1px dotted magenta'
-  }
-}, "Lorem ipsum"));
-stories.add('with vertical padding', () => /*#__PURE__*/React.createElement(Box, {
-  verticalPadding: "medium",
-  style: {
-    outline: '1px dotted magenta'
-  }
-}, "Lorem ipsum"));
-stories.add('with horizontal & vertical padding', () => /*#__PURE__*/React.createElement(Box, {
-  padding: ['xxsmall', 'medium'],
-  style: {
-    outline: '1px dotted magenta'
-  }
-}, "Lorem ipsum"));
-stories.add('with outline', () => /*#__PURE__*/React.createElement(Box, {
-  padding: "large",
-  outline: true
-}, "Lorem ipsum"));

package/lib-esm/layout/flex-stack/flex-stack.stories.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { Box } from '../box';
-import { FlexStack } from '.';
-const stories = storiesOf('Layout/FlexStack', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 2"), null, "Lorem ipsum 3"));
-stories.add('with custom wrapper', () => /*#__PURE__*/React.createElement(FlexStack, {
-  as: "main",
-  className: "wrapper"
-}, /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 2")));
-stories.add('with large space', () => /*#__PURE__*/React.createElement(FlexStack, {
-  space: "large"
-}, /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 2"), /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 3")));
-stories.add('with nested stack', () => /*#__PURE__*/React.createElement(FlexStack, {
-  space: "large"
-}, /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 2"), /*#__PURE__*/React.createElement(FlexStack, {
-  space: "small"
-}, /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 3.1"), /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 3.2"))));
-stories.add('single item', () => /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum")));
-stories.add('with alignItems', () => /*#__PURE__*/React.createElement(FlexStack, {
-  alignItems: "center",
-  space: "medium"
-}, /*#__PURE__*/React.createElement("h1", null, "Title"), /*#__PURE__*/React.createElement("a", {
-  href: "#test"
-}, "Option 1")));

package/lib-esm/layout/footer/footer.stories.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { Footer } from '.';
-const stories = storiesOf('Layout/Footer', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(Footer, null));
-stories.add('with custom content', () => /*#__PURE__*/React.createElement(Footer, null, "Version 1.0", /*#__PURE__*/React.createElement("span", {
-  style: {
-    margin: '1em'
-  }
-}, "Contact")));

package/lib-esm/layout/header/header.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import css from './header.module.css';
-export const Header = _ref => {
-  let {
-    className,
-    renderLeft,
-    renderRight,
-    render
-  } = _ref;
-  return /*#__PURE__*/React.createElement("header", {
-    className: cx(css.root, className)
-  }, renderLeft({
-    className: css.left
-  }), render({
-    className: css.center
-  }), renderRight({
-    className: css.right
-  }));
-};
-Header.defaultProps = {
-  className: '',
-  renderLeft: props => /*#__PURE__*/React.createElement("div", props),
-  render: props => /*#__PURE__*/React.createElement("div", props),
-  renderRight: props => /*#__PURE__*/React.createElement("div", props)
-};
-Header.propTypes = {
-  /* Adopted child class name */
-  className: PropTypes.string,
-  /* Render left area */
-  renderLeft: PropTypes.func,
-  /* Render center area */
-  render: PropTypes.func,
-  /* Render right area */
-  renderRight: PropTypes.func
-};

package/lib-esm/layout/header/header.module.css

@@ -1,49 +0,0 @@
-.root {
-  padding: var(--space-small);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  background: var(--color-dark);
-  color: var(--color-light);
-}
-
-/* Layout */
-.left {
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-}
-
-.center {
-  flex: 1 1 100%;
-  text-align: center;
-  order: 3;
-}
-
-.right {
-  flex: 1 1 auto;
-  order: 2;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-@media (min-width: 768px) {
-  .root {
-    flex-wrap: nowrap;
-  }
-
-  .left {
-    flex: 1 1 25%;
-  }
-
-  .center {
-    flex: 1 1 50%;
-    order: 2;
-  }
-
-  .right {
-    flex: 1 1 25%;
-    order: 3;
-  }
-}

package/lib-esm/layout/header/header.stories.js

@@ -1,57 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { Logo } from '../../ui/logo';
-import { Tabs } from '../../ui/tabs';
-import { Header } from '.';
-const stories = storiesOf('Layout/Header', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(Header, {
-  renderLeft: _ref => {
-    let {
-      className
-    } = _ref;
-    return /*#__PURE__*/React.createElement("div", {
-      className: className
-    }, /*#__PURE__*/React.createElement(Logo, null));
-  },
-  render: _ref2 => {
-    let {
-      className
-    } = _ref2;
-    return /*#__PURE__*/React.createElement("div", {
-      className: className
-    }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Item, null, "Totals"), /*#__PURE__*/React.createElement(Tabs.Item, null, "Assets"), /*#__PURE__*/React.createElement(Tabs.Item, null, "Modules")));
-  },
-  renderRight: _ref3 => {
-    let {
-      className
-    } = _ref3;
-    return /*#__PURE__*/React.createElement("div", {
-      className: className
-    }, /*#__PURE__*/React.createElement(Logo, {
-      kind: "github"
-    }));
-  }
-}));
-stories.add('menu on the right', () => /*#__PURE__*/React.createElement(Header, {
-  renderLeft: _ref4 => {
-    let {
-      className
-    } = _ref4;
-    return /*#__PURE__*/React.createElement("div", {
-      className: className
-    }, /*#__PURE__*/React.createElement(Logo, null));
-  },
-  renderRight: _ref5 => {
-    let {
-      className
-    } = _ref5;
-    return /*#__PURE__*/React.createElement("div", {
-      className: className,
-      style: {
-        flexBasis: '100%'
-      }
-    }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Item, null, "Totals"), /*#__PURE__*/React.createElement(Tabs.Item, null, "Assets"), /*#__PURE__*/React.createElement(Tabs.Item, null, "Modules")));
-  }
-}));

package/lib-esm/layout/header/index.js

@@ -1 +0,0 @@
-export { Header } from './header';

package/lib-esm/layout/stack/stack.stories.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { Box } from '../box';
-import { Stack } from '.';
-const stories = storiesOf('Layout/Stack', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 2"), null, "Lorem ipsum 3"));
-stories.add('with custom wrapper', () => /*#__PURE__*/React.createElement(Stack, {
-  as: "main",
-  className: "wrapper"
-}, /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 2")));
-stories.add('with large space', () => /*#__PURE__*/React.createElement(Stack, {
-  space: "large"
-}, /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 2"), /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 3")));
-stories.add('with nested stack', () => /*#__PURE__*/React.createElement(Stack, {
-  space: "large"
-}, /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 2"), /*#__PURE__*/React.createElement(Stack, {
-  space: "small"
-}, /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 3.1"), /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum 3.2"))));
-stories.add('single item', () => /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
-  outline: true
-}, "Lorem ipsum")));

package/lib-esm/layout/sub-header/index.js

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