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

package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.stories.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { createJobs } from '@bundle-stats/utils';
-import currentData from '../../../__mocks__/webpack-stats.current.json';
-import baselineData from '../../../__mocks__/webpack-stats.baseline.json';
-import { getWrapperDecorator } from '../../stories';
-import { BundleAssetsTotalsChartBars } from './bundle-assets-totals-chart-bars';
-const JOBS = createJobs([{
-  webpack: currentData
-}, {
-  webpack: baselineData
-}]);
-const EMPTY_BASELINE = createJobs([{
-  webpack: currentData
-}, {
-  webpack: null
-}]);
-const stories = storiesOf('Components/BundleAssetsTotalsChartBars', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('component', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
-  jobs: JOBS
-}));
-stories.add('empty baseline', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
-  jobs: EMPTY_BASELINE
-}));

package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import { createJobs } from '@bundle-stats/utils';
-import baselineStats from '../../../__mocks__/webpack-stats.baseline.json';
-import currentStats from '../../../__mocks__/webpack-stats.current.json';
-import { getWrapperDecorator } from '../../stories';
-import { BundleAssetsTotalsTable } from '.';
-export default {
-  title: 'Components/BundleAssetsTotalsTable',
-  component: BundleAssetsTotalsTable,
-  decorators: [getWrapperDecorator()]
-};
-const Template = args => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, args);
-export const SingleJob = Template.bind();
-SingleJob.args = {
-  jobs: createJobs([{
-    webpack: currentStats
-  }])
-};
-export const MultipleJobs = Template.bind();
-MultipleJobs.args = {
-  jobs: createJobs([{
-    webpack: currentStats
-  }, {
-    webpack: baselineStats
-  }])
-};
-export const EmptyBaseline = Template.bind();
-EmptyBaseline.args = {
-  jobs: createJobs([{
-    webpack: currentStats
-  }, null])
-};

package/lib-esm/components/bundle-modules/bundle-modules.stories.js

@@ -1,145 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { createJobs } from '@bundle-stats/utils';
-import baselineStatsFixtures from '../../../__mocks__/webpack-stats.baseline.json';
-import currentStatsFixtures from '../../../__mocks__/webpack-stats.current.json';
-import { getWrapperDecorator } from '../../stories';
-import { BundleModules } from '.';
-
-// Limit the side of the modules when not in dev mode (chromatic limit, snapshot too large)
-const {
-  baselineStats,
-  currentStats
-} = process.env.NODE_ENV !== 'development' ? {
-  // eslint-disable-next-line prefer-object-spread
-  baselineStats: Object.assign({}, baselineStatsFixtures, {
-    modules: baselineStatsFixtures.modules.slice(0, 100)
-  }),
-  // eslint-disable-next-line prefer-object-spread
-  currentStats: Object.assign({}, currentStatsFixtures, {
-    modules: currentStatsFixtures.modules.slice(0, 100)
-  })
-} : {
-  baselineStats: baselineStatsFixtures,
-  currentStats: currentStatsFixtures
-};
-const JOBS = createJobs([{
-  webpack: currentStats
-}, {
-  webpack: baselineStats
-}]);
-const stories = storiesOf('Components/BundleModules', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(BundleModules, {
-  jobs: [JOBS[1]]
-}));
-stories.add('multiple jobs', () => /*#__PURE__*/React.createElement(BundleModules, {
-  jobs: JOBS
-}));
-const JOBS_EMPTY_BASELINE = createJobs([{
-  webpack: currentStats
-}, null]);
-stories.add('empty baseline', () => /*#__PURE__*/React.createElement(BundleModules, {
-  jobs: JOBS_EMPTY_BASELINE
-}));
-
-// Module moved between chunks
-const JOBS_MOVED_MODULE = createJobs([{
-  webpack: {
-    chunks: [{
-      id: 1,
-      names: ['chunk-1']
-    }, {
-      id: 2,
-      names: ['chunk-2']
-    }],
-    modules: [{
-      name: 'module-1a.js',
-      size: 1100,
-      chunks: [1]
-    }, {
-      name: 'module-1b.js',
-      size: 1200,
-      chunks: [1]
-    }, {
-      name: 'module-moved-from-chunk-2-to-1.js',
-      size: 2300,
-      chunks: [1]
-    }, {
-      name: 'module-2b.js',
-      size: 2200,
-      chunks: [2]
-    }, {
-      name: 'module-moved-from-chunk-3-to-1.js',
-      size: 3300,
-      chunks: [1]
-    }]
-  }
-}, {
-  webpack: {
-    chunks: [{
-      id: 1,
-      names: ['chunk-1']
-    }, {
-      id: 2,
-      names: ['chunk-2']
-    }, {
-      id: 3,
-      names: ['chunk-3']
-    }],
-    modules: [{
-      name: 'module-1a.js',
-      size: 1000,
-      chunks: [1]
-    }, {
-      name: 'module-1b.js',
-      size: 1100,
-      chunks: [1]
-    }, {
-      name: 'module-moved-from-chunk-2-to-1.js',
-      size: 2000,
-      chunks: [2]
-    }, {
-      name: 'module-2b.js',
-      size: 2200,
-      chunks: [2]
-    }, {
-      name: 'module-moved-from-chunk-3-to-1.js',
-      size: 3300,
-      chunks: [3]
-    }, {
-      name: 'module-removed-from-all-chunks.js',
-      size: 3300,
-      chunks: [3]
-    }]
-  }
-}]);
-const chunkFiltersStories = storiesOf('Components/BundleModules/chunk filters', module);
-chunkFiltersStories.addDecorator(getWrapperDecorator());
-chunkFiltersStories.add('chunk with module moved in', () => /*#__PURE__*/React.createElement(BundleModules, {
-  filters: {
-    changed: false,
-    'c.1': true,
-    'c.2': false,
-    'c.3': false
-  },
-  jobs: [...JOBS_MOVED_MODULE]
-}));
-chunkFiltersStories.add('chunk with module moved out', () => /*#__PURE__*/React.createElement(BundleModules, {
-  filters: {
-    changed: false,
-    'c.1': false,
-    'c.2': true,
-    'c.3': false
-  },
-  jobs: [...JOBS_MOVED_MODULE]
-}));
-chunkFiltersStories.add('removed chunk', () => /*#__PURE__*/React.createElement(BundleModules, {
-  filters: {
-    changed: false,
-    'c.1': false,
-    'c.2': false,
-    'c.3': true
-  },
-  jobs: [...JOBS_MOVED_MODULE]
-}));

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

@@ -1,52 +0,0 @@
-import _set from "lodash/set";
-import _merge from "lodash/merge";
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { PACKAGE_FILTERS, createJobs } from '@bundle-stats/utils';
-import baselineStats from '../../../__mocks__/webpack-stats.baseline.json';
-import currentStats from '../../../__mocks__/webpack-stats.current.json';
-import { getWrapperDecorator } from '../../stories';
-import { BundlePackages } from '.';
-const JOBS = createJobs([{
-  webpack: currentStats
-}, {
-  webpack: baselineStats
-}]);
-const [currentJob, baselineJob] = JOBS;
-const stories = storiesOf('Components/BundlePackages', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(BundlePackages, {
-  jobs: [baselineJob]
-}));
-stories.add('multiple jobs', () => /*#__PURE__*/React.createElement(BundlePackages, {
-  jobs: JOBS
-}));
-stories.add('custom filters', () => /*#__PURE__*/React.createElement(BundlePackages, {
-  jobs: JOBS,
-  filters: {
-    [PACKAGE_FILTERS.CHANGED]: false,
-    [PACKAGE_FILTERS.DUPLICATE]: true
-  }
-}));
-stories.add('empty packages', () => /*#__PURE__*/React.createElement(BundlePackages, {
-  jobs: [_set(_merge({}, currentJob), 'metrics.webpack.packages', {}), _set(_merge({}, baselineJob), 'metrics.webpack.packages', {})]
-}));
-stories.add('empty filtered packages', () => /*#__PURE__*/React.createElement(BundlePackages, {
-  jobs: [_set(_merge({}, currentJob), 'metrics.webpack.packages', {
-    'package-a': {
-      value: 100
-    }
-  }), _set(_merge({}, baselineJob), 'metrics.webpack.packages', {
-    'package-a': {
-      value: 100
-    }
-  })]
-}));
-const JOBS_EMPTY_BASELINE = createJobs([{
-  webpack: currentStats
-}, {
-  webpack: null
-}]);
-stories.add('empty baseline', () => /*#__PURE__*/React.createElement(BundlePackages, {
-  jobs: JOBS_EMPTY_BASELINE
-}));

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { Delta } from '.';
-const stories = storiesOf('Components/Delta', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(Delta, {
-  displayValue: "20%",
-  deltaType: "POSITIVE"
-}));
-stories.add('negative', () => /*#__PURE__*/React.createElement(Delta, {
-  displayValue: "20%",
-  deltaType: "NEGATIVE"
-}));
-stories.add('slightlyNegative', () => /*#__PURE__*/React.createElement(Delta, {
-  displayValue: "1%",
-  deltaType: "LOW_NEGATIVE"
-}));
-stories.add('slightlyPositive', () => /*#__PURE__*/React.createElement(Delta, {
-  displayValue: "1%",
-  deltaType: "LOW_POSITIVE"
-}));
-stories.add('empty', () => /*#__PURE__*/React.createElement(Delta, {
-  displayValue: "0%",
-  deltaType: "NO_CHANGE"
-}));
-stories.add('inverted', () => /*#__PURE__*/React.createElement(Delta, {
-  displayValue: "1%",
-  deltaType: "LOW_NEGATIVE",
-  inverted: true
-}));

package/lib-esm/components/duplicate-packages-warning/duplicate-packages-warning.stories.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { DuplicatePackagesWarning } from '.';
-const stories = storiesOf('Components/DuplicatePackagesWarning', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('single job', () => /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
-  duplicatePackagesCount: {
-    current: 1,
-    baseline: 0
-  },
-  showDelta: false
-}));
-stories.add('multiple jobs', () => /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
-  duplicatePackagesCount: {
-    current: 2,
-    baseline: 3
-  }
-}));
-stories.add('no changes', () => /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
-  duplicatePackagesCount: {
-    current: 2,
-    baseline: 2
-  }
-}));

package/lib-esm/components/job-header/job-header.stories.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { JobHeader } from '.';
-const stories = storiesOf('Components/JobHeader', module);
-stories.addDecorator(getWrapperDecorator());
-const JOB = {
-  internalBuildNumber: 1,
-  meta: {
-    webpack: {
-      builtAt: '2019-01-01T00:00:00.000Z',
-      hash: 'abcd1234'
-    }
-  },
-  summary: {
-    webpack: {
-      totalSizeByTypeALL: {
-        current: 1000000,
-        baseline: 900000
-      }
-    }
-  }
-};
-stories.add('default', () => /*#__PURE__*/React.createElement(JobHeader, {
-  job: JOB
-}));
-stories.add('with tag', () => /*#__PURE__*/React.createElement(JobHeader, {
-  job: JOB,
-  tag: "current"
-}));
-stories.add('with custom content', () => /*#__PURE__*/React.createElement(JobHeader, {
-  job: JOB
-}, /*#__PURE__*/React.createElement("p", null, "Lorem ipsum dolor sit amed")));

package/lib-esm/components/job-meta/job-meta.stories.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { JobMeta } from '.';
-const stories = storiesOf('Components/JobMeta', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(JobMeta, {
-  meta: [{
-    title: '#123',
-    content: [/*#__PURE__*/React.createElement("p", null, "July 3th ")]
-  }, {
-    title: '#122',
-    content: [/*#__PURE__*/React.createElement("p", null, "July 4th")]
-  }]
-}));

package/lib-esm/components/job-name/job-name.stories.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { JobName } from '.';
-const stories = storiesOf('Components/JobName', module);
-stories.addDecorator(getWrapperDecorator({
-  padding: '64px'
-}));
-stories.add('default', () => /*#__PURE__*/React.createElement(JobName, {
-  title: "View job details",
-  internalBuildNumber: 10
-}));
-stories.add('custom component', () => /*#__PURE__*/React.createElement(JobName, {
-  title: "View job details",
-  internalBuildNumber: 10,
-  as: props => /*#__PURE__*/React.createElement("strong", props)
-}));
-stories.add('render', () => /*#__PURE__*/React.createElement(JobName, {
-  title: "View job details"
-}, /*#__PURE__*/React.createElement("a", {
-  href: "https://relative-ci.com/test"
-}, "#10")));

package/lib-esm/components/jobs-header/jobs-header.stories.js

@@ -1,95 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { JobsHeader } from '.';
-const stories = storiesOf('Components/JobsHeader', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(JobsHeader, {
-  jobs: [{
-    internalBuildNumber: 1,
-    meta: {
-      webpack: {
-        builtAt: '2019-01-01T00:00:00.000Z',
-        hash: 'abcd1234'
-      }
-    },
-    summary: {
-      webpack: {
-        totalSizeByTypeALL: {
-          current: 1000000,
-          baseline: 900000
-        }
-      }
-    }
-  }]
-}));
-stories.add('multiple jobs', () => /*#__PURE__*/React.createElement(JobsHeader, {
-  jobs: [{
-    internalBuildNumber: 1,
-    meta: {
-      webpack: {
-        builtAt: '2019-01-01T00:00:00.000Z',
-        hash: 'abcd1234'
-      }
-    },
-    summary: {
-      webpack: {
-        totalSizeByTypeALL: {
-          current: 1000000,
-          baseline: 900000
-        }
-      }
-    }
-  }, {
-    internalBuildNumber: 2,
-    meta: {
-      webpack: {
-        builtAt: '2019-01-02T00:00:00.000Z',
-        hash: 'efgh1234'
-      }
-    },
-    summary: {
-      webpack: {
-        totalSizeByTypeALL: {
-          current: 900000,
-          baseline: 0
-        }
-      }
-    }
-  }]
-}));
-stories.add('multiple equal jobs', () => /*#__PURE__*/React.createElement(JobsHeader, {
-  jobs: [{
-    internalBuildNumber: 1,
-    meta: {
-      webpack: {
-        builtAt: '2019-01-01T00:00:00.000Z',
-        hash: 'abcd1234'
-      }
-    },
-    summary: {
-      webpack: {
-        totalSizeByTypeALL: {
-          current: 1000000,
-          baseline: 1000000
-        }
-      }
-    }
-  }, {
-    internalBuildNumber: 2,
-    meta: {
-      webpack: {
-        builtAt: '2019-01-02T00:00:00.000Z',
-        hash: 'efgh1234'
-      }
-    },
-    summary: {
-      webpack: {
-        totalSizeByTypeALL: {
-          current: 1000000,
-          baseline: 1000000
-        }
-      }
-    }
-  }]
-}));

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

@@ -1,19 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { createJobs } from '@bundle-stats/utils';
-import lighthouse from '../../../__mocks__/lighthouse.json';
-import { getWrapperDecorator } from '../../stories';
-import { LighthouseTable } from '.';
-const stories = storiesOf('Components/LighthouseTable', module);
-stories.addDecorator(getWrapperDecorator());
-const JOBS = createJobs([{
-  lighthouse
-}, {
-  lighthouse
-}]);
-stories.add('default', () => /*#__PURE__*/React.createElement(LighthouseTable, {
-  jobs: JOBS
-}));
-stories.add('no baseline', () => /*#__PURE__*/React.createElement(LighthouseTable, {
-  jobs: [JOBS[1]]
-}));

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

@@ -1,44 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { Delta } from '../delta';
-import { Metric } from '.';
-const stories = storiesOf('Components/Metric', module);
-stories.addDecorator(getWrapperDecorator({
-  maxWidth: '200px'
-}));
-stories.add('default', () => /*#__PURE__*/React.createElement(Metric, {
-  value: 100,
-  formatter: v => `${v}ms`
-}));
-stories.add('modifier: formatted value', () => /*#__PURE__*/React.createElement(Metric, {
-  value: "100KB"
-}));
-stories.add('modifier: enhanced', () => /*#__PURE__*/React.createElement(Metric, {
-  value: 100,
-  formatter: v => `${v}ms`,
-  enhanced: true
-}));
-stories.add('modifier: delta', () => /*#__PURE__*/React.createElement(Metric, {
-  value: 100,
-  formatter: v => `${v}ms`
-}, /*#__PURE__*/React.createElement(Delta, {
-  displayValue: "+10%",
-  deltaType: "POSITIVE"
-})));
-stories.add('modifier: inline', () => /*#__PURE__*/React.createElement(Metric, {
-  value: 100,
-  formatter: v => `${v}ms`,
-  inline: true
-}, /*#__PURE__*/React.createElement(Delta, {
-  displayValue: "+10%",
-  deltaType: "POSITIVE"
-})));
-stories.add('modifier: anchored', () => /*#__PURE__*/React.createElement(Metric, {
-  value: 100,
-  formatter: v => `${v}ms`,
-  anchored: true
-}, /*#__PURE__*/React.createElement(Delta, {
-  displayValue: "+10%",
-  deltaType: "POSITIVE"
-})));