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

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

@@ -1,21 +1,37 @@
-import React from 'react';
-
+import type { Meta, StoryObj } from '@storybook/react';
 import { action } from 'storybook/actions';
 
 import { getWrapperDecorator } from '../../stories';
 import { ModuleInfo } from '.';
 
-export default {
+const ITEM = {
+  key: './node_modules/lodash/fp/merge.js',
+  label: './node_modules/lodash/fp/merge.js',
+  biggerIsBetter: false,
+  changed: true,
+  thirdParty: true,
+  duplicated: true,
+  fileType: 'JS',
+};
+
+const meta = {
   title: 'Components/ModuleInfo',
   component: ModuleInfo,
   decorators: [getWrapperDecorator()],
-};
+  args: {
+    labels: ['Job #2', 'Job #1'],
+    onClose: action('CLOSE'),
+  },
+} satisfies Meta<typeof ModuleInfo>;
 
-export const Default = () => (
-  <ModuleInfo
-    item={{
-      label: './node_modules/lodash/fp/merge.js',
-      duplicated: true,
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    item: {
+      ...ITEM,
       runs: [
         {
           name: './node_modules/lodash/fp/merge.js',
@@ -29,8 +45,8 @@ export const Default = () => (
           displayValue: '3KiB',
         },
       ] as any,
-    }}
-    chunks={[
+    },
+    chunks: [
       {
         id: '1',
         name: 'chunk-1',
@@ -43,18 +59,15 @@ export const Default = () => (
         id: '3',
         name: 'chunk-3',
       },
-    ]}
-    chunkIds={['1', '2', '3']}
-    labels={['Job #2', 'Job #1']}
-    onClose={action('CLOSE')}
-  />
-);
+    ],
+    chunkIds: ['1', '2', '3'],
+  },
+};
 
-export const Duplicates = () => (
-  <ModuleInfo
-    item={{
-      label: './node_modules/lodash/fp/merge.js',
-      duplicated: true,
+export const Duplicates: Story = {
+  args: {
+    item: {
+      ...ITEM,
       runs: [
         {
           name: './node_modules/lodash/fp/merge.js',
@@ -68,8 +81,8 @@ export const Duplicates = () => (
           displayValue: '3KiB',
         },
       ] as any,
-    }}
-    chunks={[
+    },
+    chunks: [
       {
         id: '1',
         name: 'chunk-1',
@@ -90,9 +103,7 @@ export const Duplicates = () => (
         id: '5',
         name: 'chunk-5',
       },
-    ]}
-    chunkIds={['1', '2', '3', '4', '5']}
-    labels={['Job #2', 'Job #1']}
-    onClose={action('CLOSE')}
-  />
-);
+    ],
+    chunkIds: ['1', '2', '3', '4', '5'],
+  },
+};

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

@@ -1,14 +1,9 @@
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
 
 import { getWrapperDecorator } from '../../stories';
 import { PackageInfo } from '.';
 
-export default {
-  title: 'Components/PackageInfo',
-  component: PackageInfo,
-  decorators: [getWrapperDecorator()],
-};
-
 const RUNS = [
   {
     name: 'lodash',
@@ -23,14 +18,24 @@ const RUNS = [
   },
 ];
 
-export const Default = () => (
-  <PackageInfo
-    name="lodash~1"
-    item={{
+const meta = {
+  title: 'Components/PackageInfo',
+  component: PackageInfo,
+  decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof PackageInfo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    item: {
       label: 'lodash',
       duplicate: true,
       runs: RUNS as any,
-    }}
-    labels={['Job #2', 'Job #1']}
-  />
-);
+    },
+    labels: ['Job #2', 'Job #1'],
+    onClose: action('CLOSE'),
+  },
+};

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

@@ -1,12 +1,12 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { RunInfo } from './run-info';
 
-export default {
+const meta = {
   title: 'Components/RunInfo',
   component: RunInfo,
   args: {
+    id: 'webpack.totalSizeByTypeALL',
     size: 'medium',
   },
   argTypes: {
@@ -15,51 +15,53 @@ export default {
       control: { type: 'select' },
     },
   },
-} as Meta;
+} satisfies Meta<typeof RunInfo>;
 
-const Template: Story = (args) => <RunInfo id="webpack.totalSizeByTypeALL" {...args} />;
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof meta>;
 
-Default.args = {
-  title: 'Bundle Size',
-  current: '120KiB',
-  baseline: '100KiB',
-  delta: '+20%',
-  deltaType: 'HIGH_NEGATIVE',
+export const Default: Story = {
+  args: {
+    title: 'Bundle Size',
+    current: '120KiB',
+    baseline: '100KiB',
+    delta: '+20%',
+    deltaType: 'HIGH_NEGATIVE',
+  },
 };
 
-export const DeltaPercentage = Template.bind({});
-
-DeltaPercentage.args = {
-  ...Default.args,
-  deltaPercentage: '+20KiB',
+export const DeltaPercentage: Story = {
+  args: {
+    ...Default.args,
+    deltaPercentage: '+20KiB',
+  },
 };
 
-export const SizeLarge = Template.bind({});
-
-SizeLarge.args = {
-  ...Default.args,
-  size: 'large',
+export const SizeLarge: Story = {
+  args: {
+    ...Default.args,
+    size: 'large',
+  },
 };
 
-export const TitleHoverCard = Template.bind({});
-
-TitleHoverCard.args = {
-  ...Default.args,
-  titleHoverCard: 'Info',
+export const TitleHoverCard: Story = {
+  args: {
+    ...Default.args,
+    titleHoverCard: 'Info',
+  },
 };
 
-export const TitleTooltip = Template.bind({});
-
-TitleTooltip.args = {
-  ...Default.args,
-  titleTooltip: 'Info',
+export const TitleTooltip: Story = {
+  args: {
+    ...Default.args,
+    titleTooltip: 'Info',
+  },
 };
 
-export const Loading = Template.bind({});
-
-Loading.args = {
-  title: 'Bundle Size',
-  loading: true,
+export const Loading: Story = {
+  args: {
+    title: 'Bundle Size',
+    loading: true,
+  },
 };

package/src/components/summary/summary.stories.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { createJobs } from '@bundle-stats/utils';
 
 /* eslint-disable import/no-relative-packages */
 import baselineData from '../../../../../fixtures/webpack-stats.baseline.json';
 import currentData from '../../../../../fixtures/webpack-stats.current.json';
 /* eslint-enable import/no-relative-packages */
-import { METRICS_WEBPACK_ASSETS } from '../../constants';
 import { getWrapperDecorator } from '../../stories';
 import { Summary } from '.';
 
@@ -14,46 +13,41 @@ const MULTIPLE_JOBS = createJobs([{ webpack: currentData }, { webpack: baselineD
 
 const SINGLE_JOB = createJobs([{ webpack: currentData }]);
 
-export default {
+const meta = {
   title: 'Components/Summary',
   component: Summary,
   decorators: [getWrapperDecorator()],
-} as Meta;
+} satisfies Meta<typeof Summary>;
 
-const Template: Story = (args) => <Summary {...args} />;
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof meta>;
 
-Default.args = {
-  data: MULTIPLE_JOBS[0].summary,
+export const Default: Story = {
+  args: {
+    data: MULTIPLE_JOBS[0].summary!.webpack,
+  },
 };
 
-export const CustomKeys = Template.bind({});
-
-CustomKeys.args = {
-  keys: METRICS_WEBPACK_ASSETS,
-  data: MULTIPLE_JOBS[0].summary,
-};
-
-export const Loading = Template.bind({});
-
-Loading.args = {
-  loading: true,
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
 };
 
-export const SingleRun = Template.bind({});
-
-SingleRun.args = {
-  data: SINGLE_JOB[0].summary,
-  showSummaryItemDelta: false,
-  showSummaryItemBaseline: false,
+export const SingleRun: Story = {
+  args: {
+    data: SINGLE_JOB[0].summary!.webpack,
+    showSummaryItemDelta: false,
+    showSummaryItemBaseline: false,
+  },
 };
 
-export const WithLink = Template.bind({});
-
-WithLink.args = {
-  data: MULTIPLE_JOBS[0].summary,
-  summaryItemLink: (linkProps: React.ComponentProps<'button'>) => (
-    <button {...linkProps} type="button" onClick={() => alert(JSON.stringify(linkProps))} />
-  ),
+export const WithLink: Story = {
+  args: {
+    data: MULTIPLE_JOBS[0].summary!.webpack,
+    summaryItemLink: (linkProps) => (
+      <button {...linkProps} type="button" onClick={() => alert(JSON.stringify(linkProps))} />
+    ),
+  },
 };

package/src/css/default.css

@@ -1,4 +1,4 @@
-@import url('~modern-css-reset/dist/reset.css');
+@import url('modern-css-reset/dist/reset.css');
 
 /** modern-css-reset updates */
 pre,

package/src/hooks/rows-sort.ts

@@ -20,15 +20,18 @@ const getSortDirection = (directionParam: string | undefined): SortAction['direc
   return '';
 };
 
-export const getSortFn =
-  <TRow>(fieldPath: string, getCustomSort: UseRowsSortParams<TRow>['getCustomSort']) =>
-  (item: TRow) => {
+export function getSortFn<TRow>(
+  fieldPath: string,
+  getCustomSort: UseRowsSortParams<TRow>['getCustomSort'],
+) {
+  return (item: TRow) => {
     if (!fieldPath) {
       return getCustomSort(item);
     }
 
     return get(item, fieldPath) || 0;
   };
+}
 
 interface UseRowsSortParams<TRow> {
   rows: Array<TRow>;
@@ -47,13 +50,13 @@ interface UseRowsSort<TRow> {
   updateSort: (params: SortAction) => void;
 }
 
-export const useRowsSort = <TRow>({
+export function useRowsSort<TRow>({
   rows,
   initialField = 'runs[0].delta',
   initialDirection = 'desc',
   getCustomSort,
   setQueryState,
-}: UseRowsSortParams<TRow>): UseRowsSort<TRow> => {
+}: UseRowsSortParams<TRow>): UseRowsSort<TRow> {
   const [sort, setSort] = useState({
     field: initialField,
     direction: getSortDirection(initialDirection),
@@ -85,4 +88,4 @@ export const useRowsSort = <TRow>({
     updateSort,
     items: orderedRows,
   };
-};
+}

package/src/layout/box/box.stories.tsx

@@ -1,49 +1,56 @@
-import React from 'react';
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { getWrapperDecorator } from '../../stories';
 import { Box } from '.';
 
-export default {
+const meta = {
   title: 'Layout/Box',
   component: Box,
   decorators: [getWrapperDecorator()],
-} as Meta<typeof Box>;
+  args: {
+    style: { border: '1px dotted magenta' },
+    children: 'Lorem ipsum',
+  },
+} satisfies Meta<typeof Box>;
 
-const Template: Story = (props: any) => (
-  <Box style={{ border: '1px dotted magenta' }} {...props}>
-    Lorem ipsum
-  </Box>
-);
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof meta>;
 
-export const WithPadding = Template.bind({});
-WithPadding.args = {
-  padding: 'medium',
+export const Default: Story = {};
+
+export const WithPadding: Story = {
+  args: {
+    padding: 'medium',
+  },
 };
 
-export const WithHorizontalPadding = Template.bind({});
-WithHorizontalPadding.args = {
-  horizontalPadding: 'medium',
+export const WithHorizontalPadding: Story = {
+  args: {
+    horizontalPadding: 'medium',
+  },
 };
 
-export const WithVerticalPadding = Template.bind({});
-WithVerticalPadding.args = {
-  verticalPadding: 'medium',
+export const WithVerticalPadding: Story = {
+  args: {
+    verticalPadding: 'medium',
+  },
 };
 
-export const WithHorizontalAndVerticalPadding = Template.bind({});
-WithHorizontalAndVerticalPadding.args = {
-  padding: ['xxsmall', 'medium'],
+export const WithHorizontalAndVerticalPadding: Story = {
+  args: {
+    padding: ['xxsmall', 'medium'],
+  },
 };
 
-export const WithOutline = Template.bind({});
-WithOutline.args = {
-  outline: true,
+export const WithOutline: Story = {
+  args: {
+    outline: true,
+  },
 };
 
-export const WithOutlineHover = Template.bind({});
-WithOutlineHover.args = {
-  outlineHover: true,
+export const WithOutlineHover: Story = {
+  args: {
+    outlineHover: true,
+  },
 };

package/src/layout/flex-stack/flex-stack.stories.tsx

@@ -1,59 +1,90 @@
 import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { getWrapperDecorator } from '../../stories';
 import { Box } from '../box';
 import { FlexStack } from '.';
 
-export default {
+const meta = {
   title: 'Layout/FlexStack',
   component: FlexStack,
   decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof FlexStack>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        {null}
+        Lorem ipsum 3
+      </>
+    ),
+  },
+};
+
+export const withCustomWrapper: Story = {
+  args: {
+    as: 'main',
+    className: 'wrapper',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+      </>
+    ),
+  },
+};
+
+export const withLargeSpace: Story = {
+  args: {
+    space: 'large',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+      </>
+    ),
+  },
+};
+
+export const withNestedStack: Story = {
+  args: {
+    space: 'large',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <FlexStack space="small">
+          <Box outline>Lorem ipsum 3.1</Box>
+          <Box outline>Lorem ipsum 3.2</Box>
+        </FlexStack>
+      </>
+    ),
+  },
 };
 
-export const Default = () => (
-  <FlexStack>
-    <Box outline>Lorem ipsum 1</Box>
-    <Box outline>Lorem ipsum 2</Box>
-    {null}
-    Lorem ipsum 3
-  </FlexStack>
-);
-
-export const withCustomWrapper = () => (
-  <FlexStack as="main" className="wrapper">
-    <Box outline>Lorem ipsum 1</Box>
-    <Box outline>Lorem ipsum 2</Box>
-  </FlexStack>
-);
-
-export const withLargeSpace = () => (
-  <FlexStack space="large">
-    <Box outline>Lorem ipsum 1</Box>
-    <Box outline>Lorem ipsum 2</Box>
-    <Box outline>Lorem ipsum 3</Box>
-  </FlexStack>
-);
-
-export const withNestedStack = () => (
-  <FlexStack space="large">
-    <Box outline>Lorem ipsum 1</Box>
-    <Box outline>Lorem ipsum 2</Box>
-    <FlexStack space="small">
-      <Box outline>Lorem ipsum 3.1</Box>
-      <Box outline>Lorem ipsum 3.2</Box>
-    </FlexStack>
-  </FlexStack>
-);
-
-export const singleItem = () => (
-  <FlexStack>
-    <Box outline>Lorem ipsum</Box>
-  </FlexStack>
-);
-
-export const withAlignItems = () => (
-  <FlexStack alignItems="center" space="medium">
-    <h1>Title</h1>
-    <a href="#test">Option 1</a>
-  </FlexStack>
-);
+export const singleItem: Story = {
+  args: {
+    children: <Box outline>Lorem ipsum</Box>,
+  },
+};
+
+export const withAlignItems: Story = {
+  args: {
+    alignItems: 'center',
+    space: 'medium',
+    children: (
+      <>
+        <h1>Title</h1>
+        <a href="#test">Option 1</a>
+      </>
+    ),
+  },
+};

package/src/layout/footer/footer.stories.tsx

@@ -0,0 +1,30 @@
+import type React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Footer } from '.';
+
+// Footer 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 TypedFooter = Footer as unknown as React.ComponentType<{
+  className?: string;
+  version?: string;
+}>;
+
+const meta = {
+  title: 'Layout/Footer',
+  component: TypedFooter,
+  decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof TypedFooter>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithVersion: Story = {
+  args: {
+    version: '1.0.0',
+  },
+};