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

package/src/components/entry-info/entry-info.stories.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { action } from 'storybook/actions';
 
 import { getWrapperDecorator } from '../../stories';
 import { EntryInfo } from '.';
 
-export default {
-  title: 'Components/EntryInfo',
-  component: EntryInfo,
-  decorators: [getWrapperDecorator()],
-};
-
 const RUNS = [
   {
     name: 'static/vendor.abcd1234.js',
@@ -22,54 +17,54 @@ const RUNS = [
   },
 ];
 
-export const Default = () => (
-  <EntryInfo
-    item={{
-      label: 'static/vendor.js',
-      runs: RUNS as any,
-    }}
-    labels={['Job #2', 'Job #1']}
-    onClose={action('CLOSE')}
-  />
-);
+const ITEM = {
+  key: 'static/vendor.js',
+  label: 'static/vendor.js',
+  biggerIsBetter: false,
+  changed: true,
+};
+
+const meta = {
+  title: 'Components/EntryInfo',
+  component: EntryInfo,
+  decorators: [getWrapperDecorator()],
+  args: {
+    item: { ...ITEM, runs: RUNS as any },
+    labels: ['Job #2', 'Job #1'],
+    onClose: action('CLOSE'),
+  },
+} satisfies Meta<typeof EntryInfo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Added = () => (
-  <EntryInfo
-    item={{
-      label: 'static/vendor.js',
-      runs: [RUNS[0], null] as any,
-    }}
-    labels={['Job #2', 'Job #1']}
-    onClose={action('CLOSE')}
-  />
-);
+export const Default: Story = {};
+
+export const Added: Story = {
+  args: {
+    item: { ...ITEM, runs: [RUNS[0], null] as any },
+  },
+};
 
-export const Removed = () => (
-  <EntryInfo
-    item={{
-      label: 'static/vendor.js',
-      runs: [null, RUNS[1]] as any,
-    }}
-    labels={['Job #2', 'Job #1']}
-    onClose={action('CLOSE')}
-  />
-);
+export const Removed: Story = {
+  args: {
+    item: { ...ITEM, runs: [null, RUNS[1]] as any },
+  },
+};
 
-export const WithCustomContent = () => (
-  <EntryInfo
-    item={{
-      label: 'static/vendor.js',
-      runs: RUNS as any,
-    }}
-    labels={['Job #2', 'Job #1']}
-    tags={<span>Critical tags</span>}
-    onClose={action('CLOSE')}
-  >
-    <div>
-      <EntryInfo.Meta label="Meta 1">value 1</EntryInfo.Meta>
-      <EntryInfo.Meta label="Meta 2">value 2</EntryInfo.Meta>
-    </div>
-    <div>custom entry info 1</div>
-    <div>custom entry info 2</div>
-  </EntryInfo>
-);
+export const WithCustomContent: Story = {
+  args: {
+    tags: <span>Critical tags</span>,
+  },
+  render: (args) => (
+    <EntryInfo {...args}>
+      <div>
+        <EntryInfo.Meta label="Meta 1">value 1</EntryInfo.Meta>
+        <EntryInfo.Meta label="Meta 2">value 2</EntryInfo.Meta>
+      </div>
+      <div>custom entry info 1</div>
+      <div>custom entry info 2</div>
+    </EntryInfo>
+  ),
+};

package/src/components/{index.js → index.ts}

@@ -11,10 +11,12 @@ export { JobName } from './job-name';
 export { JobsHeader } from './jobs-header';
 export { LighthouseTable } from './lighthouse-table';
 export { Metric } from './metric';
-export { MetricRunInfo, MetricRunInfoProps } from './metric-run-info';
+export { MetricRunInfo } from './metric-run-info';
+export type { MetricRunInfoProps } from './metric-run-info';
 export { MetricsTable } from './metrics-table';
 export { MetricsTableOptions } from './metrics-table-options';
 export { MetricsTableTitle } from './metrics-table-title';
 export { ModuleInfo } from './module-info';
-export { RunInfo, RunInfoProps } from './run-info';
+export { RunInfo } from './run-info';
+export type { RunInfoProps } from './run-info';
 export { Summary } from './summary';

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.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-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'],
 };

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

@@ -1,6 +1,7 @@
 import React from 'react';
-
+import type { Meta, StoryObj } from '@storybook/react';
 import { MetricRunInfoDeltaType } from '@bundle-stats/utils';
+
 import { getWrapperDecorator } from '../../stories';
 import { MetricsTable } from '.';
 
@@ -204,22 +205,41 @@ const ITEMS_MULTIPLE_RUNS = [
   },
 ];
 
-export default {
+const meta = {
   title: 'Components/MetricsTable',
   component: MetricsTable,
   decorators: [getWrapperDecorator()],
-};
+} satisfies Meta<typeof MetricsTable>;
 
-export const Default = () => <MetricsTable runs={RUNS.slice(0, 1)} items={ITEMS_SINGLE_RUN} />;
+export default meta;
 
-export const MultipleRuns = () => <MetricsTable runs={RUNS} items={ITEMS_MULTIPLE_RUNS} />;
+type Story = StoryObj<typeof meta>;
 
-export const WithHeaderSum = () => (
-  <MetricsTable
-    runs={RUNS}
-    items={[ITEMS_MULTIPLE_RUNS[0], ITEMS_MULTIPLE_RUNS[4]]}
-    showHeaderSum
-  />
-);
+export const Default: Story = {
+  args: {
+    runs: RUNS.slice(0, 1),
+    items: ITEMS_SINGLE_RUN,
+  },
+};
 
-export const Empty = () => <MetricsTable runs={RUNS} items={[]} />;
+export const MultipleRuns: Story = {
+  args: {
+    runs: RUNS,
+    items: ITEMS_MULTIPLE_RUNS,
+  },
+};
+
+export const WithHeaderSum: Story = {
+  args: {
+    runs: RUNS,
+    items: [ITEMS_MULTIPLE_RUNS[0], ITEMS_MULTIPLE_RUNS[4]],
+    showHeaderSum: true,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    runs: RUNS,
+    items: [],
+  },
+};

package/src/components/metrics-table/metrics-table.tsx

@@ -68,7 +68,7 @@ const Row = ({ className = '', item, renderHeader, ...restProps }: RowProps) =>
 
 interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'title'> {
   runs: Array<{
-    label: string;
+    label: React.ReactNode;
     internalBuildNumber: number;
   }>;
   items: Array<ReportMetricRow>;

package/src/components/metrics-table-header/metrics-table-header.tsx

@@ -21,7 +21,7 @@ const BASELINE_COLUMN_SPAN = 1;
 const CURRENT_COLUMN_SPAN = 3;
 
 interface JobColumnProps {
-  job: { label: string; internalBuildNumber: number };
+  job: { label: React.ReactNode; internalBuildNumber: number };
   isBaseline: boolean;
 }
 
@@ -122,7 +122,7 @@ export interface MetricsTableHeaderProps {
   /**
    * Array of jobs
    */
-  jobs: Array<{ label: string; internalBuildNumber: number }>;
+  jobs: Array<{ label: React.ReactNode; internalBuildNumber: number }>;
   /**
    * Report rows
    */
@@ -151,13 +151,18 @@ export const MetricsTableHeader = (
           {metricTitle || ' '}
         </Table.Th>
         {jobs.map((job, runIndex) => (
-          <JobColumn job={job} isBaseline={runIndex === jobs.length - 1} />
+          <JobColumn
+            key={job.internalBuildNumber}
+            job={job}
+            isBaseline={runIndex === jobs.length - 1}
+          />
         ))}
       </Table.Tr>
       {showSum && (
         <Table.Tr>
-          {jobs.map((_, runIndex) => (
+          {jobs.map((job, runIndex) => (
             <SumColumn
+              key={job.internalBuildNumber}
               rows={rows}
               isBaseline={runIndex === jobs.length - 1}
               runIndex={runIndex}