@bundle-stats/ui 4.3.0-beta.2 → 4.3.0-rc.0

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

@@ -1 +0,0 @@
-{"version":3,"file":"summary-item.js","sourceRoot":"","sources":["../../../src/components/summary-item/summary-item.jsx"],"names":[],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-export { Panels } from './panels';
-//# sourceMappingURL=index.js.map

package/lib-esm/ui/panels/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/panels/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import css from './panels.module.css';
-const cloneElement = (element) => {
-    const { className, ...restProps } = element.props;
-    return React.cloneElement(element, {
-        ...restProps,
-        className: cx(css.panel, className),
-    });
-};
-export const Panels = ({ className, children, ...restProps }) => (React.createElement("div", { className: cx(css.root, className), ...restProps }, React.Children.map(children, cloneElement)));
-Panels.defaultProps = {
-    className: '',
-    children: null,
-};
-Panels.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
-//# sourceMappingURL=panels.js.map

package/lib-esm/ui/panels/panels.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"panels.js","sourceRoot":"","sources":["../../../src/ui/panels/panels.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,EAAE;IAC/B,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC;IAElD,OAAO,KAAK,CAAC,YAAY,CACvB,OAAO,EACP;QACE,GAAG,SAAS;QACZ,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC;KACpC,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CAC/D,6BACE,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,IAEZ,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAC,CACvC,CACP,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,SAAS,GAAG;IAEjB,SAAS,EAAE,SAAS,CAAC,MAAM;IAG3B,QAAQ,EAAE,SAAS,CAAC,IAAI;CACzB,CAAC"}

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/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,93 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import isEmpty from 'lodash/isEmpty';
-import noop from 'lodash/noop';
-import { getBundleModulesByChunk } from '@bundle-stats/utils';
-
-import { Stack } from '../../layout/stack';
-import { FileName } from '../../ui/file-name';
-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="xsmall" className={className}>
-      {item.runs.map((run, index) => {
-        const TitleComponent = index !== 0 ? 'h4' : 'h3';
-        const key = `module-info-${run?.name || index}-${index}`;
-
-        return (
-          <Stack space="xxxsmall" key={key}>
-            <TitleComponent>{labels[index]}</TitleComponent>
-            {index === 0 && !isEmpty(run?.chunkIds) && (
-              <div className={css.chunks}>
-                <span className={css.chunksTitle}>Chunks:</span>
-                {run.chunkIds.map((chunkId) => {
-                  const chunk = chunks?.find(({ id }) => id === chunkId);
-
-                  if (!chunk) {
-                    return null;
-                  }
-
-                  return (
-                    <CustomComponentLink
-                      {...getBundleModulesByChunk(chunkIds, chunkId)}
-                      onClick={onClick}
-                      className={css.chunksItem}
-                    >
-                      {chunk.name}
-                    </CustomComponentLink>
-                  );
-                })}
-              </div>
-            )}
-
-            <FileName className={css.fileName} as="code" name={run?.name || '-'} />
-          </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';