@bundle-stats/ui 4.4.0-beta.0 → 4.4.0-beta.3

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

@@ -1,23 +0,0 @@
-.root {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.panel {
-  flex: 1 1 100%;
-}
-
-.panel + .panel {
-  margin-top: var(--space-medium);
-}
-
-@media (min-width: 768px) {
-  .root {
-    flex-wrap: nowrap;
-  }
-
-  .panel + .panel {
-    margin-top: 0;
-    margin-left: var(--space-medium);
-  }
-}

package/src/components/asset-info/asset-info.jsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { getBundleModulesByChunk, getModuleFileType } from '@bundle-stats/utils';
-
-import { Stack } from '../../layout/stack';
-import { FileName } from '../../ui/file-name';
-import { ComponentLink } from '../component-link';
-import css from './asset-info.module.css';
-
-const ChunkModulesLink = ({ as: Component, chunks, chunkId, name }) => {
-  const chunk = chunks?.find(({ id }) => id === chunkId );
-
-  if (!chunk) {
-    return null;
-  }
-
-  const chunkIds = chunks?.map(({ id }) => id);
-  const fileType = getModuleFileType(name);
-
-  return (
-    <Component
-      className={css.viewModules}
-      {...getBundleModulesByChunk(chunkIds, chunkId, fileType)}
-    >
-      View chunk modules
-    </Component>
-  );
-};
-
-ChunkModulesLink.propTypes = {
-  as: PropTypes.elementType.isRequired,
-  chunks: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-  chunkId: PropTypes.string,
-  name: PropTypes.string,
-};
-
-ChunkModulesLink.defaultProps = {
-  chunks: [],
-  chunkId: '',
-  name: '',
-};
-
-export const AssetInfo = (props) => {
-  const { className, chunks, item, labels, CustomComponentLink } = props;
-
-  return (
-    <Stack space="xsmall" className={cx(css.root, className)}>
-      {item.runs.map((run, index) => {
-        const Title = index !== 0 ? 'h4' : 'h3';
-        const key = `asset-info-${run?.name || index}-${index}`;
-
-        return (
-          <Stack space="xxxsmall" key={key}>
-            <Title>{labels[index]}</Title>
-            <FileName
-              className={css.fileName}
-              as='code'
-              name={run?.name || '-'}
-            />
-
-            {index === 0 && (
-              <ChunkModulesLink
-                as={CustomComponentLink}
-                chunks={chunks}
-                chunkId={run?.chunkId}
-                name={run?.name}
-              />
-            )}
-          </Stack>
-        );
-      })}
-    </Stack>
-  );
-};
-
-AssetInfo.propTypes = {
-  className: PropTypes.string,
-  item: PropTypes.shape({
-    runs: PropTypes.arrayOf(
-      PropTypes.shape({
-        name: PropTypes.string,
-        chunkId: PropTypes.string,
-      }),
-    ),
-  }).isRequired,
-  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
-  chunks: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-  CustomComponentLink: PropTypes.elementType,
-};
-
-AssetInfo.defaultProps = {
-  className: '',
-  chunks: [],
-  CustomComponentLink: ComponentLink,
-};

package/src/components/duplicate-packages-insight/duplicate-packages-insight.module.css

@@ -1,18 +0,0 @@
-.metric {
-  font-weight: bold;
-}
-
-.metric::before,
-.link::before {
-  content: '\00A0\2014\00A0';
-  font-weight: normal;
-  color: var(--color-text-ultra-light);
-}
-
-.delta {
-  margin-left: var(--space-xxxsmall);
-  padding: 1px 2px;
-  vertical-align: super;
-  font-size: 9px;
-  line-height: 1;
-}

package/src/components/duplicate-packages-insight/duplicate-packages-insight.stories.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import { DuplicatePackagesInsight } from '.';
-
-export default {
-  title: 'Components/DuplicatePackagesInsight',
-  component: DuplicatePackagesInsight,
-};
-
-const Template = (props: any) => <MemoryRouter><DuplicatePackagesInsight {...props} /></MemoryRouter>;
-
-export const Default = Template.bind({});
-
-Default.args = {
-  type: 'INFO',
-  data: {
-    packages: {},
-    text: 'Bundle does not contain duplicate packages',
-  },
-  summary: {
-    current: 0,
-    baseline: 0,
-  },
-};
-
-export const NewDuplicates = Template.bind({});
-
-NewDuplicates.args = {
-  type: 'ERROR',
-  data: {
-    packages: {},
-    text: 'Bundle introduced 2 duplicate packages',
-  },
-  summary: {
-    current: 4,
-    baseline: 2,
-  },
-};
-
-export const NewDuplicatesAndRemovals = Template.bind({});
-
-NewDuplicatesAndRemovals.args = {
-  type: 'ERROR',
-  data: {
-    packages: {},
-    text: 'Bundle introduced 2 and removed 1 duplicate packages',
-  },
-  summary: {
-    current: 4,
-    baseline: 3,
-  },
-};
-
-export const NoChangeDuplicates = Template.bind({});
-
-NoChangeDuplicates.args = {
-  type: 'WARNING',
-  data: {
-    packages: {},
-    text: 'Bundle contains 4 duplicate packages',
-  },
-  summary: {
-    current: 4,
-    baseline: 4,
-  },
-};

package/src/components/duplicate-packages-insight/duplicate-packages-insight.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import {
-  BUNDLE_PACKAGES_DUPLICATE,
-  BUNDLE_PACKAGES_COUNT,
-  InsightType,
-  JobSummaryItem,
-  getMetricRunInfo,
-  JobInsightDuplicatePackagesV3Data,
-  getGlobalMetricType,
-} from '@bundle-stats/utils';
-
-import { Alert } from '../../ui/alert';
-import { ComponentLink } from '../component-link';
-import { Delta } from '../delta';
-// @ts-ignore
-import css from './duplicate-packages-insight.module.css';
-
-interface DuplicatePackagesInsightProps extends React.HTMLAttributes<HTMLDivElement> {
-  type: InsightType;
-  data: JobInsightDuplicatePackagesV3Data;
-  summary: JobSummaryItem;
-  showDelta?: boolean;
-  customComponentLink?: React.FunctionComponent<React.HTMLAttributes<HTMLLinkElement>>;
-}
-
-const AlertKindMap = new Map([
-  [InsightType.INFO, 'info'],
-  [InsightType.ERROR, 'danger'],
-  [InsightType.WARNING, 'warning'],
-]);
-
-export const DuplicatePackagesInsight = (props: DuplicatePackagesInsightProps) => {
-  const {
-    type,
-    data,
-    summary,
-    showDelta = true,
-    customComponentLink: CustomComponentLink = ComponentLink,
-    ...restProps
-  } = props;
-
-  const metric = getGlobalMetricType('webpack.duplicatePackageCount');
-
-  const metricRunInfo = getMetricRunInfo(
-    metric,
-    summary.current,
-    summary.baseline,
-  );
-
-  const hasDuplicatePackages = metricRunInfo.value > 0 || (metricRunInfo && (metricRunInfo.delta !== 0));
-
-  return (
-    <Alert kind={AlertKindMap.get(type)} {...restProps}>
-      <span className={css.message}>{data.text}</span>
-      {hasDuplicatePackages && (
-        <span className={css.metric}>
-          {metricRunInfo.value}
-          {showDelta && typeof metricRunInfo.delta !== 'undefined' && (
-            <Delta
-              className={css.delta}
-              inverted
-              displayValue={metricRunInfo.displayDelta as string}
-              deltaType={metricRunInfo.deltaType as string}
-            />
-          )}
-        </span>
-      )}
-      <span className={css.link}>
-        {hasDuplicatePackages ? (
-          <CustomComponentLink {...BUNDLE_PACKAGES_DUPLICATE as any}>
-            View duplicate packages
-          </CustomComponentLink>
-        ) : (
-          <CustomComponentLink {...BUNDLE_PACKAGES_COUNT as any}>
-            View packages
-          </CustomComponentLink>
-        )}
-      </span>
-    </Alert>
-  );
-};

package/src/components/duplicate-packages-insight/index.ts

@@ -1 +0,0 @@
-export * from './duplicate-packages-insight';

package/src/components/job-meta/index.js

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

package/src/components/job-meta/job-meta.jsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import css from './job-meta.module.css';
-
-export const JobMeta = (props) => {
-  const {
-    as: Component, className, meta, ...restProps
-  } = props;
-
-  const rootClassName = cx(css.root, className);
-
-  return (
-    <Component className={rootClassName} {...restProps}>
-      {meta.map(({ title, content }, index) => {
-        const key = index;
-
-        return (
-          <div className={css.item} key={key}>
-            {title && (<h2 className={css.itemTitle}>{title}</h2>)}
-            {content.map((item) => item)}
-          </div>
-        );
-      })}
-    </Component>
-  );
-};
-
-JobMeta.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Contrnt */
-  meta: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    content: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.element])),
-  })).isRequired,
-
-  /** Render component */
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-};
-
-JobMeta.defaultProps = {
-  className: '',
-  as: 'div',
-};

package/src/components/job-meta/job-meta.module.css

@@ -1,19 +0,0 @@
-.root {
-  padding: var(--space-xsmall) var(--space-small);
-  display: flex;
-}
-
-.item {
-  flex: 1 1 100%;
-}
-
-.itemTitle {
-  margin: 0;
-  font-size: 1em;
-  font-weight: bold;
-  color: var(--color-text-light);
-}
-
-.item + .item {
-  margin-left: var(--space-xsmall);
-}

package/src/components/jobs-header/jobs-header.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import I18N from '../../i18n';
-import { FlexStack } from '../../layout/flex-stack';
-import { JobHeader } from '../job-header';
-import css from './jobs-header.module.css';
-
-export const JobsHeader = (props) => {
-  const { className, jobs } = props;
-  const rootClassName = cx(css.root, className);
-
-  return (
-    <FlexStack className={rootClassName} space="none">
-      {jobs?.map((job, index) => (
-        <JobHeader
-          key={job.internalBuildNumber || index}
-          className={css.item}
-          job={job}
-          tag={index === 0 ? I18N.CURRENT : I18N.BASELINE}
-        />
-      ))}
-    </FlexStack>
-  );
-};
-
-JobsHeader.propTypes = {
-  /** Adopted child classname */
-  className: PropTypes.string,
-
-  /** Jobs data */
-  jobs: PropTypes.arrayOf(
-    PropTypes.shape({
-      internalBuildNumber: PropTypes.number,
-    }),
-  ),
-};
-
-JobsHeader.defaultProps = {
-  className: '',
-  jobs: null,
-};

package/src/components/metric/metric.jsx

@@ -1,63 +0,0 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import css from './metric.module.css';
-
-// Separate value and unit
-const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
-
-export const Metric = ({ className, value, formatter, inline, children, enhanced }) => {
-  const { displayValue, displayUnit } = useMemo(() => {
-    const formattedValue = formatter?.(value);
-
-    if (!formattedValue) {
-      return { displayValue: value };
-    }
-
-    if (!enhanced) {
-      return { displayValue: formattedValue };
-    }
-
-    const matches = formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN);
-
-    if (!matches) {
-      return { displayValue: value };
-    }
-
-    return {
-      displayUnit: matches[2],
-      displayValue: matches[1],
-    };
-  }, [formatter, value]);
-
-  const rootClassName = cx(className, css.root, inline && css.inline);
-
-  return (
-    <div className={rootClassName}>
-      <div className={css.display}>
-        <span className={css.displayValue}>{displayValue}</span>
-        {displayUnit && <span className={css.displayUnit}>{displayUnit}</span>}
-      </div>
-      <div className={css.delta}>{children}</div>
-    </div>
-  );
-};
-
-Metric.defaultProps = {
-  className: '',
-  enhanced: false,
-  inline: false,
-  value: 0,
-  children: [],
-  formatter: (val) => val,
-};
-
-Metric.propTypes = {
-  className: PropTypes.string,
-  enhanced: PropTypes.bool,
-  inline: PropTypes.bool,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  formatter: PropTypes.func,
-  children: PropTypes.node,
-};

package/src/components/module-info/module-info.jsx

@@ -1,123 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import noop from 'lodash/noop';
-import { getBundleModulesByChunk, getBundleModulesBySearch } from '@bundle-stats/utils';
-
-import { Stack } from '../../layout/stack';
-import { FlexStack } from '../../layout/flex-stack';
-import { FileName } from '../../ui/file-name';
-import { Tag } from '../../ui/tag';
-import { ComponentLink } from '../component-link';
-import css from './module-info.module.css';
-
-export const ModuleInfo = (props) => {
-  const {
-    className,
-    item,
-    labels,
-    chunks,
-    chunkIds,
-    customComponentLink: CustomComponentLink,
-    onClick,
-  } = props;
-
-  return (
-    <Stack space="small" className={cx(css.root, className)}>
-      {item.runs.map((run, index) => (
-        <Stack space="xsmall" key={`module-info-${run?.name || index}-${index}`} className={css.run}>
-          <Stack space="xxxsmall">
-            <FlexStack space="xxxsmall" alignItems="center" as="h4" className={css.title}>
-              <span>{labels[index]}</span>
-              <Tag className={css.titleTag}>{index === 0 ? 'current' : 'baseline'}</Tag>
-            </FlexStack>
-            <FileName className={css.fileName} as="code" name={run?.name || '-'} />
-          </Stack>
-
-          {/**
-            * Render chunks only for the current run
-            * we do not have the correct chunk ids for baselines
-            */}
-          {index === 0 && !isEmpty(run?.chunkIds) && (
-            <Stack className={css.chunks}>
-              <h5>Chunks</h5>
-              <ul className={css.list}>
-              {run.chunkIds.map((chunkId) => {
-                const chunk = chunks?.find(({ id }) => id === chunkId);
-
-                if (!chunk) {
-                  return null;
-                }
-
-                return (
-                  <li>
-                    <CustomComponentLink
-                      {...getBundleModulesByChunk(chunkIds, chunkId)}
-                      onClick={onClick}
-                      className={css.chunksItem}
-                    >
-                      {chunk.name}
-                    </CustomComponentLink>
-                  </li>
-                );
-              })}
-              </ul>
-            </Stack>
-          )}
-
-          {run?.reasons && (
-            <Stack>
-              <h5>Reasons</h5>
-              <ul className={css.list}>
-                {run.reasons.map((reason) => (
-                  <li key={reason}>
-                    <CustomComponentLink
-                      {...getBundleModulesBySearch(`^${reason}$`)}
-                      onClick={onClick}
-                      className={css.reasonLink}
-                      >
-                      <FileName name={reason} className={css.reason} />
-                    </CustomComponentLink>
-                  </li>
-                ))}
-              </ul>
-            </Stack>
-          )}
-        </Stack>
-      ))}
-    </Stack>
-  );
-};
-
-ModuleInfo.propTypes = {
-  className: PropTypes.string,
-  item: PropTypes.shape({
-    key: PropTypes.string,
-    runs: PropTypes.arrayOf(
-      PropTypes.shape({
-        key: PropTypes.string,
-        name: PropTypes.string,
-        chunkIds: PropTypes.arrayOf(PropTypes.string),
-      }),
-    ),
-  }).isRequired,
-  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
-  chunks: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      name: PropTypes.string,
-    }),
-  ),
-  chunkIds: PropTypes.arrayOf(PropTypes.string),
-  customComponentLink: PropTypes.elementType,
-  onClick: PropTypes.func,
-};
-
-ModuleInfo.defaultProps = {
-  className: '',
-  chunks: [],
-  chunkIds: [],
-  customComponentLink: ComponentLink,
-  onClick: noop,
-};

package/src/components/summary/summary.jsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import get from 'lodash/get';
-import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
-
-import { METRICS_WEBPACK_GENERAL } from '../../constants';
-import { Box } from '../../layout/box';
-import { FlexStack } from '../../layout/flex-stack';
-import { ComponentLink } from '../component-link';
-import { SummaryItem } from '../summary-item';
-import css from './summary.module.css';
-
-export const Summary = ({
-  className,
-  size,
-  keys,
-  data,
-  loading,
-  showSummaryItemDelta,
-  summaryItemLink: SummaryItemCustomLink,
-}) => (
-  <Box className={cx(css.root, className)}>
-    <FlexStack space="small" className={css.items}>
-      {Array.from(METRIC_COMPONENT_LINKS)
-        .filter(([metricId]) => keys.includes(metricId))
-        .map(([metricId, metricOptions]) => (
-          <Box
-            key={metricId}
-            outline
-            padding="small"
-            as={SummaryItemCustomLink}
-            {...metricOptions.link}
-            className={css.item}
-          >
-            <SummaryItem
-              size={size}
-              id={metricId}
-              data={get(data, metricId)}
-              loading={loading}
-              showMetricDescription
-              showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
-            />
-          </Box>
-        ))}
-    </FlexStack>
-  </Box>
-);
-
-Summary.defaultProps = {
-  className: '',
-  data: null,
-  loading: false,
-  size: '',
-  keys: METRICS_WEBPACK_GENERAL,
-  showSummaryItemDelta: true,
-  summaryItemLink: ComponentLink,
-};
-
-Summary.propTypes = {
-  className: PropTypes.string,
-  size: PropTypes.string,
-  keys: PropTypes.arrayOf(PropTypes.string),
-  data: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      baseline: PropTypes.number,
-      current: PropTypes.number,
-    }),
-  }),
-  loading: PropTypes.bool,
-  showSummaryItemDelta: PropTypes.bool,
-  summaryItemLink: PropTypes.elementType,
-};

package/src/components/summary-item/index.js

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