@bundle-stats/ui 4.22.2 → 4.23.0-beta.1

package/src/components/insights/insights.stories.tsx

@@ -1,53 +1,56 @@
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { InsightType } from '@bundle-stats/utils';
 
 import { getWrapperDecorator } from '../../stories';
 import { Insights } from '.';
 
-export default {
+const meta = {
   title: 'Components/Insights',
   component: Insights,
   decorators: [getWrapperDecorator()],
-};
+} satisfies Meta<typeof Insights>;
 
-const Template = (props: any) => <Insights {...props} />;
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof meta>;
 
-Default.args = {
-  insights: {
-    duplicatePackages: {
-      type: 'error',
-      data: {
-        packages: { 'package-a': ['package-a', 'package-a~1'] },
-        text: 'Bundle introduced 1 and removed 2 duplicate packages',
+export const Default: Story = {
+  args: {
+    insights: {
+      duplicatePackages: {
+        type: InsightType.ERROR,
+        data: {
+          packages: { 'package-a': ['package-a', 'package-a~1'] },
+          text: 'Bundle introduced 1 and removed 2 duplicate packages',
+        },
       },
-    },
-    newPackages: {
-      type: 'warning',
-      data: {
-        text: 'Bundle introduced 2 new packages: package-c, package-d',
-        packages: ['package-c', 'package-d'],
+      newPackages: {
+        type: InsightType.WARNING,
+        data: {
+          text: 'Bundle introduced 2 new packages: package-c, package-d',
+          packages: ['package-c', 'package-d'],
+        },
       },
     },
   },
 };
 
-export const Info = Template.bind({});
-
-Info.args = {
-  insights: {
-    duplicatePackages: {
-      type: 'info',
-      data: {
-        packages: { 'package-a': ['package-a', 'package-a~1'] },
-        text: 'Bundle removed 1 duplicate packages',
+export const Info: Story = {
+  args: {
+    insights: {
+      duplicatePackages: {
+        type: InsightType.INFO,
+        data: {
+          packages: { 'package-a': ['package-a', 'package-a~1'] },
+          text: 'Bundle removed 1 duplicate packages',
+        },
       },
-    },
-    newPackages: {
-      type: 'warning',
-      data: {
-        text: 'Bundle introduced 2 new packages: package-c, package-d',
-        packages: ['package-c', 'package-d'],
+      newPackages: {
+        type: InsightType.WARNING,
+        data: {
+          text: 'Bundle introduced 2 new packages: package-c, package-d',
+          packages: ['package-c', 'package-d'],
+        },
       },
     },
   },

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Tooltip } from '../../ui/tooltip';
 import css from './job-name.module.css';
 
 export const JobName = ({
@@ -11,9 +10,9 @@ export const JobName = ({
   children,
   ...restProps
 }) => (
-  <Tooltip className={css.root} as={Component} title={title} {...restProps}>
+  <Component className={css.root} title={title} {...restProps}>
     {children || `Job #${internalBuildNumber}`}
-  </Tooltip>
+  </Component>
 );
 
 JobName.defaultProps = {

package/src/components/job-name/job-name.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { JobName } from '.';
+
+// JobName is a plain .jsx component with defaultProps instead of inline
+// destructuring defaults, so TS can't infer its props as optional on its own.
+const TypedJobName = JobName as unknown as React.ComponentType<{
+  as?: React.ElementType;
+  title?: string;
+  internalBuildNumber?: number;
+  children?: React.ReactNode;
+}>;
+
+const meta = {
+  title: 'Components/JobName',
+  component: TypedJobName,
+  decorators: [getWrapperDecorator({ padding: '64px' })],
+  args: {
+    title: 'View job details',
+  },
+} satisfies Meta<typeof TypedJobName>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    internalBuildNumber: 10,
+  },
+};
+
+export const CustomComponent: Story = {
+  args: {
+    internalBuildNumber: 10,
+    as: 'strong',
+  },
+};
+
+export const Render: Story = {
+  args: {
+    children: <a href="https://relative-ci.com/test">#10</a>,
+  },
+};

package/src/components/jobs-header/jobs-header.stories.tsx

@@ -1,17 +1,21 @@
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { getWrapperDecorator } from '../../stories';
 import { JobsHeader } from '.';
 
-export default {
+const meta = {
   title: 'Components/JobsHeader',
   component: JobsHeader,
   decorators: [getWrapperDecorator()],
-};
+} satisfies Meta<typeof JobsHeader>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = () => (
-  <JobsHeader
-    jobs={[
+export const Default: Story = {
+  args: {
+    jobs: [
       {
         internalBuildNumber: 1,
         meta: {
@@ -21,13 +25,13 @@ export const Default = () => (
           },
         },
       },
-    ]}
-  />
-);
+    ],
+  },
+};
 
-export const MultipleJobs = () => (
-  <JobsHeader
-    jobs={[
+export const MultipleJobs: Story = {
+  args: {
+    jobs: [
       {
         internalBuildNumber: 1,
         meta: {
@@ -46,6 +50,6 @@ export const MultipleJobs = () => (
           },
         },
       },
-    ]}
-  />
-);
+    ],
+  },
+};

package/src/components/lighthouse-table/lighthouse-table.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+
+import lighthouse from '../../../__mocks__/lighthouse.json';
+import { getWrapperDecorator } from '../../stories';
+import { LighthouseTable } from '.';
+
+const JOBS = createJobs([{ lighthouse }, { lighthouse }]);
+
+const meta = {
+  title: 'Components/LighthouseTable',
+  component: LighthouseTable,
+  decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof LighthouseTable>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    jobs: JOBS,
+  },
+};
+
+export const NoBaseline: Story = {
+  args: {
+    jobs: [JOBS[1]],
+  },
+};

package/src/components/metric/metric.stories.tsx

@@ -1,41 +1,43 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { getWrapperDecorator } from '../../stories';
 import { Delta } from '../delta';
 import { Metric } from '.';
 
-export default {
+const meta = {
   title: 'Components/Metric',
   component: Metric,
   decorators: [getWrapperDecorator({ maxWidth: '200px' })],
-} as Meta;
+} satisfies Meta<typeof Metric>;
 
-const Template: Story = (args) => <Metric {...args} />;
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof meta>;
 
-Default.args = {
-  value: '100',
+export const Default: Story = {
+  args: {
+    value: '100',
+  },
 };
 
-export const WithUnit = Template.bind({});
-
-WithUnit.args = {
-  value: '100',
-  unit: 'KiB',
+export const WithUnit: Story = {
+  args: {
+    value: '100',
+    unit: 'KiB',
+  },
 };
 
-export const WithDelta = Template.bind({});
-
-WithDelta.args = {
-  ...WithUnit.args,
-  children: <Delta displayValue="+10%" deltaType="POSITIVE" />,
+export const WithDelta: Story = {
+  args: {
+    ...WithUnit.args,
+    children: <Delta displayValue="+10%" deltaType="POSITIVE" />,
+  },
 };
 
-export const Inline = Template.bind({});
-
-Inline.args = {
-  ...WithDelta.args,
-  inline: true,
+export const Inline: Story = {
+  args: {
+    ...WithDelta.args,
+    inline: true,
+  },
 };

package/src/components/metric-change-legend/index.ts

@@ -0,0 +1 @@
+export * from './metric-change-legend';

package/src/components/metric-change-legend/metric-change-legend.module.css

@@ -0,0 +1,69 @@
+.root {
+  font-size: var(--size-small);
+}
+
+.itemAnchor {
+  color: var(--color-text-light);
+}
+
+.itemAnchor:hover {
+  color: var(--color-text);
+}
+
+.variants {
+  display: flex;
+  gap: 1px;
+  overflow: hidden;
+  border-radius: var(--radius-xsmall);
+}
+
+.infoPreviewCell {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.infoDescriptionCell {
+  padding-left: 0 !important;
+}
+
+.variant {
+  width: var(--space-xxsmall);
+  height: var(--space-xxsmall);
+}
+
+.large .variant {
+  width: var(--space-small);
+  height: var(--space-small);
+}
+
+.bar-improvement .variant-low {
+  background: var(--color-green-light);
+}
+
+.bar-improvement .variant-medium {
+  background: var(--color-green);
+}
+
+.bar-improvement .variant-high {
+  background: var(--color-green-dark);
+}
+
+.bar-regression .variant-low {
+  background: var(--color-red-light);
+}
+
+.bar-regression .variant-medium {
+  background: var(--color-red);
+}
+
+.bar-regression .variant-high {
+  background: var(--color-red-dark);
+}
+
+.bar-neutral .variant-medium {
+  background: var(--color-info);
+}
+
+.bar-no-change .variant-medium {
+  background: var(--color-gray-ultra-light);
+}

package/src/components/metric-change-legend/metric-change-legend.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MetricChangeLegend } from '.';
+
+const meta = {
+  title: 'Components/MetricChangeLegend',
+  component: MetricChangeLegend,
+} satisfies Meta<typeof MetricChangeLegend>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/metric-change-legend/metric-change-legend.tsx

@@ -0,0 +1,148 @@
+import React, { ReactNode } from 'react';
+import cx from 'classnames';
+
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { HoverCard } from '../../ui/hover-card';
+import { Table } from '../../ui/table';
+import css from './metric-change-legend.module.css';
+import { Separator } from '../../layout';
+
+type ChangeKind = 'improvement' | 'regression' | 'neutral' | 'no-change';
+type ChangeKindVariant = 'low' | 'medium' | 'high';
+
+type BarProps = {
+  className?: string;
+  kind: ChangeKind;
+  variants: ChangeKindVariant[];
+  size?: 'medium' | 'large';
+};
+
+const Variants = (props: BarProps) => {
+  const { className, kind, variants, size = 'medium' } = props;
+
+  return (
+    <span className={cx(css.variants, css[`bar-${kind}`], css[size], className)}>
+      {variants.map((variant) => (
+        <span key={variant} className={cx(css.variant, css[`variant-${variant}`])} />
+      ))}
+    </span>
+  );
+};
+
+type ChangeMagnitudeInfoProps = {
+  kind: 'improvement' | 'regression';
+  impact: string;
+};
+
+const ChangeMagnitudeInfo = (props: ChangeMagnitudeInfoProps) => {
+  const { kind, impact } = props;
+
+  return (
+    <Stack space="small">
+      <p>
+        Changes flagged as <strong>{kind}s</strong> have a {impact} impact on user performance.
+      </p>
+      <p>
+        The report shows different intensity colors depending on the magnitude of the percentage
+        change.
+      </p>
+      <Stack space="xxsmall">
+        <Separator />
+        <FlexStack alignItems="center" space="xxsmall">
+          <Variants kind={kind} variants={['low']} size="large" />
+          Change is smaller or equal than <strong>5%</strong>
+        </FlexStack>
+        <Separator />
+        <FlexStack alignItems="center" space="xxsmall">
+          <Variants kind={kind} variants={['medium']} size="large" />
+          Change is smaller or equal than <strong>50%</strong>
+        </FlexStack>
+        <Separator />
+        <FlexStack alignItems="center" space="xxsmall">
+          <Variants kind={kind} variants={['high']} size="large" />
+          Change is larger than <strong>50%</strong>
+        </FlexStack>
+      </Stack>
+    </Stack>
+  );
+};
+
+const ImprovementInfo = () => <ChangeMagnitudeInfo kind="improvement" impact="positive" />;
+const RegressionInfo = () => <ChangeMagnitudeInfo kind="regression" impact="negative" />;
+
+const NeutralInfo = () => (
+  <Stack space="small">
+    <p>
+      <strong>Neutral</strong> changes do not have a clear positive or negative impact on user
+      performance.
+    </p>
+  </Stack>
+);
+
+const NoChangeInfo = () => (
+  <Stack space="small">
+    <p>
+      The metric value is <strong>unchanged</strong> between the compared builds.
+    </p>
+  </Stack>
+);
+
+type ChangeConfig = {
+  id: ChangeKind;
+  label: string;
+  variants: ChangeKindVariant[];
+  info: ReactNode;
+};
+
+const ITEMS: ChangeConfig[] = [
+  {
+    id: 'improvement',
+    label: 'Improvement',
+    variants: ['low', 'medium', 'high'],
+    info: <ImprovementInfo />,
+  },
+  {
+    id: 'regression',
+    label: 'Regression',
+    variants: ['low', 'medium', 'high'],
+    info: <RegressionInfo />,
+  },
+  {
+    id: 'neutral',
+    label: 'Neutral',
+    variants: ['medium'],
+    info: <NeutralInfo />,
+  },
+  {
+    id: 'no-change',
+    label: 'No change',
+    variants: ['medium'],
+    info: <NoChangeInfo />,
+  },
+];
+
+export interface MetricChangeLegendProps extends React.ComponentProps<'div'> {}
+
+export const MetricChangeLegend = (props: MetricChangeLegendProps) => {
+  const { className, ...restProps } = props;
+
+  return (
+    <FlexStack inline space="small" className={cx(css.root, className)} {...restProps}>
+      {ITEMS.map(({ id, variants, label, info }) => (
+        <HoverCard
+          key={id}
+          anchorClassName={css.itemAnchor}
+          label={
+            <FlexStack inline alignItems="center" space="xxsmall" className={css.item}>
+              <Variants kind={id} variants={variants} />
+              <span>{label}</span>
+            </FlexStack>
+          }
+        >
+          {info}
+        </HoverCard>
+      ))}
+    </FlexStack>
+  );
+};

package/src/components/metric-run-info/metric-run-info.stories.tsx

@@ -1,61 +1,65 @@
 import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import { Meta, Story } from '@storybook/react';
 import { MetricRunInfo } from '.';
 
-export default {
+const meta = {
   title: 'Components/MetricRunInfo',
   component: MetricRunInfo,
-} as Meta;
+} satisfies Meta<typeof MetricRunInfo>;
 
-const Template: Story = (args: any) => <MetricRunInfo {...args} />;
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof meta>;
 
-Default.args = {
-  metricId: 'webpack.totalSizeByTypeALL',
-  current: 120 * 1024,
-  baseline: 100 * 1024,
+export const Default: Story = {
+  args: {
+    metricId: 'webpack.totalSizeByTypeALL',
+    current: 120 * 1024,
+    baseline: 100 * 1024,
+  },
 };
 
-export const NoBaseline = Template.bind({});
-
-NoBaseline.args = {
-  metricId: 'webpack.totalSizeByTypeALL',
-  current: 120 * 1024,
-  showBaseline: false,
+export const NoBaseline: Story = {
+  args: {
+    metricId: 'webpack.totalSizeByTypeALL',
+    current: 120 * 1024,
+    showBaseline: false,
+  },
 };
 
-export const NoDelta = Template.bind({});
-
-NoDelta.args = {
-  ...NoBaseline.args,
-  showDelta: false,
+export const NoDelta: Story = {
+  args: {
+    ...NoBaseline.args,
+    showDelta: false,
+  },
 };
 
-export const MetricNoDelta = Template.bind({});
-
-MetricNoDelta.args = {
-  metricId: 'webpack.cacheInvalidation',
-  current: 85,
-  baseline: 50,
+export const MetricNoDelta: Story = {
+  args: {
+    metricId: 'webpack.cacheInvalidation',
+    current: 85,
+    baseline: 50,
+  },
 };
 
-export const CustomTitle = Template.bind({});
-
-CustomTitle.args = {
-  ...Default.args,
-  titleWrapper: ({ children, style, ...restProps }: React.ComponentProps<'h1'>) => (
-    <h1 style={{ ...style, fontStyle: 'italic' }} {...restProps}>
-      {children}
-    </h1>
-  ),
+export const CustomTitle: Story = {
+  args: {
+    ...Default.args,
+    titleWrapper: ({ children, style, ...restProps }) => (
+      <h1 style={{ ...style, fontStyle: 'italic' }} {...restProps}>
+        {children}
+      </h1>
+    ),
+  },
 };
 
-export const CustomComponent = Template.bind({});
-
-CustomComponent.args = {
-  ...Default.args,
-  as: 'a',
-  href: 'https://google.com/search?query=bundle+stats',
+export const CustomComponent: Story = {
+  // MetricRunInfoProps only types its passthrough props as ComponentProps<'div'>,
+  // but they're forwarded to RunInfo, which supports polymorphic `as` at runtime.
+  args: {
+    ...Default.args,
+    as: 'a',
+    href: 'https://google.com/search?query=bundle+stats',
+  } as unknown as Story['args'],
 };