Adjust storybook to prevent false positivies (#3679)

src/apps/components/AppDetailsPage/AppDetailsPage.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { appDetails } from "../../fixtures";
 import AppDetailsPage, { AppDetailsPageProps } from "./AppDetailsPage";
@@ -11,10 +11,28 @@ const props: AppDetailsPageProps = {
   onAppDeleteOpen: () => undefined,
 };
 
-export default {
+const meta: Meta<typeof AppDetailsPage> = {
   title: "Apps / App details",
+  component: AppDetailsPage,
+};
+export default meta;
+type Story = StoryObj<typeof AppDetailsPage>;
+
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
 };
 
-export const Default = () => <AppDetailsPage {...props} />;
+export const Loading: Story = {
-
+  args: {
-export const Loading = () => <AppDetailsPage {...props} loading={true} />;
+    ...props,
+    loading: true,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};

src/apps/components/AppListPage/AppListPage.stories.tsx

@@ -1,5 +1,5 @@
 import { installedAppsList } from "@dashboard/apps/fixtures";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import AppListPage, { AppListPageProps } from "./AppListPage";
 
@@ -8,17 +8,30 @@ const props: AppListPageProps = {
   installedApps: installedAppsList,
 };
 
-export default {
+const meta: Meta<typeof AppListPage> = {
   title: "Apps / New Apps / App List",
+  component: AppListPage,
+};
+export default meta;
+type Story = StoryObj<typeof AppListPage>;
+
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.9, pauseAnimationAtEnd: true },
+  },
 };
 
-export const Default = () => <AppListPage {...props} />;
+export const Empty: Story = {
-
+  args: {
-export const Empty = () => (
+    ...props,
-  <AppListPage
+    installedApps: [],
-    {...props}
+    installableMarketplaceApps: [],
-    installedApps={[]}
+    comingSoonMarketplaceApps: [],
-    installableMarketplaceApps={[]}
+  },
-    comingSoonMarketplaceApps={[]}
+  parameters: {
-  />
+    chromatic: { diffThreshold: 0.85 },
-);
+  },
+};

src/categories/components/CategoryListPage/CategoryListPage.stories.tsx

@@ -7,7 +7,7 @@ import {
   sortPageProps,
   tabPageProps,
 } from "@dashboard/fixtures";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import CategoryListPage, { CategoryTableProps } from "./CategoryListPage";
@@ -26,17 +26,39 @@ const categoryTableProps: CategoryTableProps = {
   },
 };
 
-export default {
+const meta: Meta<typeof CategoryListPage> = {
   title: "Categories / Category list",
   decorators: [PaginatorContextDecorator],
+  component: CategoryListPage,
+};
+export default meta;
+type Story = StoryObj<typeof CategoryListPage>;
+
+export const Default: Story = {
+  args: {
+    ...categoryTableProps,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
 };
 
-export const Default = () => <CategoryListPage {...categoryTableProps} />;
+export const Loading: Story = {
+  args: {
+    ...categoryTableProps,
+    categories: undefined,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const Loading = () => (
+export const Empty: Story = {
-  <CategoryListPage {...categoryTableProps} categories={undefined} />
+  args: {
-);
+    ...categoryTableProps,
-
+    categories: [],
-export const Empty = () => (
+  },
-  <CategoryListPage {...categoryTableProps} categories={[]} />
+  parameters: {
-);
+    chromatic: { diffThreshold: 0.85 },
+  },
+};

src/channels/pages/ChannelsListPage/ChannelsListPage.stories.tsx

@@ -1,6 +1,6 @@
 import { channelsList } from "@dashboard/channels/fixtures";
 import { limits, limitsReached } from "@dashboard/fixtures";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import ChannelsListPage, { ChannelsListPageProps } from "./ChannelsListPage";
 
@@ -10,18 +10,48 @@ const props: ChannelsListPageProps = {
   onRemove: () => undefined,
 };
 
-export default {
+const meta: Meta<typeof ChannelsListPage> = {
   title: "Channels / Channels list",
+  component: ChannelsListPage,
+};
+export default meta;
+type Story = StoryObj<typeof ChannelsListPage>;
+
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
 };
 
-export const Default = () => <ChannelsListPage {...props} />;
+export const Empty: Story = {
+  args: {
+    ...props,
+    channelsList: [],
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const Empty = () => <ChannelsListPage {...props} channelsList={[]} />;
+export const NoLimits: Story = {
+  args: {
+    ...props,
+    limits: undefined,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const NoLimits = () => (
+export const LimitsReached: Story = {
-  <ChannelsListPage {...props} limits={undefined} />
+  args: {
-);
+    ...props,
-
+    limits: limitsReached,
-export const LimitsReached = () => (
+  },
-  <ChannelsListPage {...props} limits={limitsReached} />
+  parameters: {
-);
+    chromatic: { diffThreshold: 0.85 },
+  },
+};

src/collections/components/CollectionListPage/CollectionListPage.stories.tsx

@@ -1,5 +1,5 @@
 import { CollectionListUrlSortField } from "@dashboard/collections/urls";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import CollectionListPage, {
@@ -32,15 +32,41 @@ const props: CollectionListPageProps = {
   filterOpts: collectionListFilterOpts,
 };
 
-export default {
+const meta: Meta<typeof CollectionListPage> = {
   title: "Collections / Collection list",
   decorators: [PaginatorContextDecorator],
+  component: CollectionListPage,
 };
 
-export const Default = () => <CollectionListPage {...props} />;
+export default meta;
+type Story = StoryObj<typeof CollectionListPage>;
 
-export const Loading = () => (
+export const Default: Story = {
-  <CollectionListPage {...props} collections={undefined} disabled={true} />
+  args: {
-);
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const NoData = () => <CollectionListPage {...props} collections={[]} />;
+export const Loading: Story = {
+  args: {
+    ...props,
+    collections: undefined,
+    disabled: true,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
+
+export const NoData: Story = {
+  args: {
+    ...props,
+    collections: [],
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};

src/customers/components/CustomerListPage/CustomerListPage.stories.tsx

@@ -6,6 +6,7 @@ import {
   sortPageProps,
   tabPageProps,
 } from "@dashboard/fixtures";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
 import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
@@ -53,15 +54,40 @@ const CustomerListPage = props => (
   </MockedUserProvider>
 );
 
-export default {
+const meta: Meta<typeof CustomerListPage> = {
   title: "Customers / Customer list",
   decorators: [PaginatorContextDecorator],
+  component: CustomerListPage,
+};
+export default meta;
+type Story = StoryObj<typeof CustomerListPage>;
+
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
 };
 
-export const Default = () => <CustomerListPage {...props} />;
+export const Loading: Story = {
+  args: {
+    ...props,
+    customers: undefined,
+    disabled: true,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const Loading = () => (
+export const NoData: Story = {
-  <CustomerListPage {...props} disabled={true} customers={undefined} />
+  args: {
-);
+    ...props,
-
+    customers: [],
-export const NoData = () => <CustomerListPage {...props} customers={[]} />;
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};

src/discounts/components/SaleListPage/SaleListPage.stories.tsx

@@ -8,7 +8,7 @@ import {
   tabPageProps,
 } from "@dashboard/fixtures";
 import { DiscountStatusEnum, DiscountValueTypeEnum } from "@dashboard/graphql";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import SaleListPage, { SaleListPageProps } from "./SaleListPage";
@@ -54,21 +54,50 @@ const props: SaleListPageProps = {
   },
 };
 
-export default {
+const meta: Meta<typeof SaleListPage> = {
   title: "Discounts / Sale list",
   decorators: [PaginatorContextDecorator],
+  component: SaleListPage,
+};
+export default meta;
+type Story = StoryObj<typeof SaleListPage>;
+
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
 };
 
-export const Default = () => <SaleListPage {...props} />;
+export const Loading: Story = {
+  args: {
+    ...props,
+    sales: undefined,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const Loading = () => <SaleListPage {...props} sales={undefined} />;
+export const NoData: Story = {
+  args: {
+    ...props,
+    sales: [],
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const NoData = () => <SaleListPage {...props} sales={[]} />;
+export const NoChannels: Story = {
-
+  args: {
-export const NoChannels = () => (
+    ...props,
-  <SaleListPage
+    sales: saleList.map(sale => ({ ...sale, channelListings: [] })),
-    {...props}
+    selectedChannelId: "",
-    sales={saleList.map(sale => ({ ...sale, channelListings: [] }))}
+  },
-    selectedChannelId=""
+  parameters: {
-  />
+    chromatic: { diffThreshold: 0.85 },
-);
+  },
+};

src/discounts/components/VoucherListPage/VoucherListPage.stories.tsx

@@ -9,7 +9,7 @@ import {
   tabPageProps,
 } from "@dashboard/fixtures";
 import { DiscountStatusEnum, VoucherDiscountType } from "@dashboard/graphql";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import VoucherListPage, { VoucherListPageProps } from "./VoucherListPage";
@@ -63,24 +63,43 @@ const props: VoucherListPageProps = {
   vouchers: voucherList,
 };
 
-export default {
+const meta: Meta<typeof VoucherListPage> = {
   title: "Discounts / Voucher list",
   decorators: [PaginatorContextDecorator],
+  component: VoucherListPage,
+};
+export default meta;
+type Story = StoryObj<typeof VoucherListPage>;
+
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
 };
 
-export const Default = () => <VoucherListPage {...props} />;
+export const Loading: Story = {
+  args: {
+    ...props,
+    vouchers: undefined,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const Loading = () => (
+export const NoChannels: Story = {
-  <VoucherListPage {...props} vouchers={undefined} />
+  args: {
-);
+    ...props,
-
+    selectedChannelId: "",
-export const NoChannels = () => (
+    vouchers: voucherList.map(voucher => ({
-  <VoucherListPage
-    {...props}
-    selectedChannelId=""
-    vouchers={voucherList.map(voucher => ({
       ...voucher,
       channelListings: [],
-    }))}
+    })),
-  />
+  },
-);
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};

src/orders/components/OrderDraftListPage/OrderDraftListPage.stories.tsx

@@ -9,7 +9,7 @@ import {
   tabPageProps,
 } from "@dashboard/fixtures";
 import { OrderDraftListUrlSortField } from "@dashboard/orders/urls";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import { orders } from "../../fixtures";
@@ -46,19 +46,49 @@ const props: OrderDraftListPageProps = {
   },
 };
 
-export default {
+const meta: Meta<typeof OrderDraftListPage> = {
   title: "Orders / Draft order list",
   decorators: [PaginatorContextDecorator],
+  component: OrderDraftListPage,
+};
+export default meta;
+type Story = StoryObj<typeof OrderDraftListPage>;
+
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
 };
 
-export const Default = () => <OrderDraftListPage {...props} />;
+export const Loading: Story = {
+  args: {
+    ...props,
+    orders: undefined,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const Loading = () => (
+export const WhenNoData: Story = {
-  <OrderDraftListPage {...props} disabled orders={undefined} />
+  args: {
-);
+    ...props,
+    orders: [],
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const WhenNoData = () => <OrderDraftListPage {...props} orders={[]} />;
+export const LimitsReached: Story = {
-
+  args: {
-export const LimitsReached = () => (
+    ...props,
-  <OrderDraftListPage {...props} limits={limitsReached} />
+    limits: limitsReached,
-);
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};

src/orders/components/OrderListPage/OrderListPage.stories.tsx

@@ -9,7 +9,7 @@ import {
 import { OrderStatusFilter, PaymentChargeStatusEnum } from "@dashboard/graphql";
 import { orders } from "@dashboard/orders/fixtures";
 import { OrderListUrlSortField } from "@dashboard/orders/urls";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import { OrderFilterGiftCard } from "./filters";
@@ -84,26 +84,61 @@ const props: OrderListPageProps = {
   onTabUpdate: () => undefined,
 };
 
-export default {
+const meta: Meta<typeof OrderListPage> = {
   title: "Orders / Order list",
   decorators: [PaginatorContextDecorator],
+  component: OrderListPage,
+};
+export default meta;
+type Story = StoryObj<typeof OrderListPage>;
+
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
 };
 
-export const Default = () => <OrderListPage {...props} />;
+export const Loading: Story = {
+  args: {
+    ...props,
+    orders: undefined,
+    currentTab: undefined,
+    disabled: true,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.9, pauseAnimationAtEnd: true },
+  },
+};
 
-export const Loading = () => (
+export const WhenNoData: Story = {
-  <OrderListPage
+  args: {
-    {...props}
+    ...props,
-    orders={undefined}
+    orders: [],
-    currentTab={undefined}
+  },
-    disabled={true}
+  parameters: {
-  />
+    chromatic: { diffThreshold: 0.85 },
-);
+  },
+};
 
-export const WhenNoData = () => <OrderListPage {...props} orders={[]} />;
+export const NoLimits: Story = {
+  args: {
+    ...props,
+    limits: undefined,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const NoLimits = () => <OrderListPage {...props} limits={undefined} />;
+export const LimitsReached: Story = {
-
+  args: {
-export const LimitsReached = () => (
+    ...props,
-  <OrderListPage {...props} limits={limitsReached} />
+    limits: limitsReached,
-);
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};

src/pageTypes/components/PageTypeListPage/PageTypeListPage.stories.tsx

@@ -6,7 +6,7 @@ import {
   tabPageProps,
 } from "@dashboard/fixtures";
 import { PageTypeListUrlSortField } from "@dashboard/pageTypes/urls";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import { pageTypes } from "../../fixtures";
@@ -25,15 +25,40 @@ const props: PageTypeListPageProps = {
   pageTypes,
 };
 
-export default {
+const meta: Meta<typeof PageTypeListPage> = {
   title: "Page types / Page types list",
   decorators: [PaginatorContextDecorator],
+  component: PageTypeListPage,
+};
+export default meta;
+type Story = StoryObj<typeof PageTypeListPage>;
+
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
 };
 
-export const Default = () => <PageTypeListPage {...props} />;
+export const Loading: Story = {
+  args: {
+    ...props,
+    pageTypes: undefined,
+    disabled: true,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const Loading = () => (
+export const NoData: Story = {
-  <PageTypeListPage {...props} disabled={true} pageTypes={undefined} />
+  args: {
-);
+    ...props,
-
+    pageTypes: [],
-export const NoData = () => <PageTypeListPage {...props} pageTypes={[]} />;
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};

src/pages/components/PageListPage/PageListPage.stories.tsx

@@ -5,7 +5,7 @@ import {
 } from "@dashboard/fixtures";
 import { pageList } from "@dashboard/pages/fixtures";
 import { PageListUrlSortField } from "@dashboard/pages/urls";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import PageListPage, { PageListPageProps } from "./PageListPage";
@@ -28,15 +28,40 @@ const props: PageListPageProps = {
   },
 };
 
-export default {
+const meta: Meta<typeof PageListPage> = {
   title: "Pages / Page list",
   decorators: [PaginatorContextDecorator],
+  component: PageListPage,
+};
+export default meta;
+type Story = StoryObj<typeof PageListPage>;
+
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
 };
 
-export const Default = () => <PageListPage {...props} />;
+export const Loading: Story = {
+  args: {
+    ...props,
+    pages: undefined,
+    disabled: true,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const Loading = () => (
+export const NoData: Story = {
-  <PageListPage {...props} disabled={true} pages={undefined} />
+  args: {
-);
+    ...props,
-
+    pages: [],
-export const NoData = () => <PageListPage {...props} pages={[]} />;
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};

src/plugins/components/PluginsListPage/PluginsListPage.stories.tsx

@@ -6,7 +6,7 @@ import {
 import { PluginConfigurationType } from "@dashboard/graphql";
 import { pluginList } from "@dashboard/plugins/fixtures";
 import { PluginListUrlSortField } from "@dashboard/plugins/urls";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import PluginsListPage, { PluginsListPageProps } from "./PluginsListPage";
@@ -47,9 +47,19 @@ const props: PluginsListPageProps = {
   },
 };
 
-export default {
+const meta: Meta<typeof PluginsListPage> = {
   title: "Plugins / Plugin list",
   decorators: [PaginatorContextDecorator],
+  component: PluginsListPage,
 };
+export default meta;
+type Story = StoryObj<typeof PluginsListPage>;
 
-export const Default = () => <PluginsListPage {...props} />;
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};

src/productTypes/components/ProductTypeListPage/ProductTypeListPage.stories.tsx

@@ -8,7 +8,7 @@ import {
 } from "@dashboard/fixtures";
 import { ProductTypeConfigurable, ProductTypeEnum } from "@dashboard/graphql";
 import { ProductTypeListUrlSortField } from "@dashboard/productTypes/urls";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import { productTypes } from "../../fixtures";
@@ -40,17 +40,40 @@ const props: ProductTypeListPageProps = {
   productTypes,
 };
 
-export default {
+const meta: Meta<typeof ProductTypeListPage> = {
   title: "Product types / Product types list",
   decorators: [PaginatorContextDecorator],
+  component: ProductTypeListPage,
+};
+export default meta;
+type Story = StoryObj<typeof ProductTypeListPage>;
+
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
 };
 
-export const Default = () => <ProductTypeListPage {...props} />;
+export const Loading: Story = {
+  args: {
+    ...props,
+    productTypes: undefined,
+    disabled: true,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const Loading = () => (
+export const NoData: Story = {
-  <ProductTypeListPage {...props} disabled={true} productTypes={undefined} />
+  args: {
-);
+    ...props,
-
+    productTypes: [],
-export const NoData = () => (
+  },
-  <ProductTypeListPage {...props} productTypes={[]} />
+  parameters: {
-);
+    chromatic: { diffThreshold: 0.85 },
+  },
+};

src/products/components/ProductListPage/ProductListPage.stories.tsx

@@ -14,7 +14,7 @@ import { ProductListUrlSortField } from "@dashboard/products/urls";
 import { productListFilterOpts } from "@dashboard/products/views/ProductList/fixtures";
 import { attributes } from "@dashboard/productTypes/fixtures";
 import { ListViews } from "@dashboard/types";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import ProductListPage, { ProductListPageProps } from "./ProductListPage";
@@ -61,38 +61,85 @@ const props: ProductListPageProps = {
   },
 };
 
-export default {
+const meta: Meta<typeof ProductListPage> = {
   title: "Products / Product list",
   decorators: [PaginatorContextDecorator],
+  component: ProductListPage,
+};
+export default meta;
+type Story = StoryObj<typeof ProductListPage>;
+
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
 };
 
-export const Default = () => <ProductListPage {...props} />;
+export const Loading: Story = {
+  args: {
+    ...props,
+    products: undefined,
+    currentTab: undefined,
+    disabled: true,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.9, pauseAnimationAtEnd: true },
+  },
+};
 
-export const Loading = () => (
+export const WithData: Story = {
-  <ProductListPage
+  args: {
-    {...props}
+    ...props,
-    products={undefined}
+    products,
-    currentTab={undefined}
+  },
-    disabled={true}
+  parameters: {
-  />
+    chromatic: { diffThreshold: 0.85 },
-);
+  },
+};
 
-export const WithData = () => (
+export const NoData: Story = {
-  <ProductListPage {...props} products={products} />
+  args: {
-);
+    ...props,
+    products: [],
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const NoData = () => <ProductListPage {...props} products={[]} />;
+export const NoChannels: Story = {
+  args: {
+    ...props,
+    selectedChannelId: "",
+    products: products.map(product => ({
+      ...product,
+      channelListings: [],
+    })),
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const NoChannels = () => (
+export const NoLimits: Story = {
-  <ProductListPage
+  args: {
-    {...props}
+    ...props,
-    selectedChannelId={""}
+    limits: undefined,
-    products={products.map(product => ({ ...product, channelListings: [] }))}
+  },
-  />
+  parameters: {
-);
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const NoLimits = () => <ProductListPage {...props} limits={undefined} />;
+export const LimitsReached: Story = {
-
+  args: {
-export const LimitsReached = () => (
+    ...props,
-  <ProductListPage {...props} limits={limitsReached} />
+    limits: limitsReached,
-);
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};

src/staff/components/StaffListPage/StaffListPage.stories.tsx

@@ -10,7 +10,7 @@ import {
 import { StaffMemberStatus } from "@dashboard/graphql";
 import { staffMembers } from "@dashboard/staff/fixtures";
 import { StaffListUrlSortField } from "@dashboard/staff/urls";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import StaffListPage, { StaffListPageProps } from "./StaffListPage";
@@ -36,19 +36,50 @@ const props: StaffListPageProps = {
   staffMembers,
 };
 
-export default {
+const meta: Meta<typeof StaffListPage> = {
   title: "Staff / Staff members",
   decorators: [PaginatorContextDecorator],
+  component: StaffListPage,
+};
+export default meta;
+type Story = StoryObj<typeof StaffListPage>;
+
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
 };
 
-export const Default = () => <StaffListPage {...props} />;
+export const WhenLoading: Story = {
+  args: {
+    ...props,
+    disabled: true,
+    staffMembers: undefined,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const WhenLoading = () => (
+export const NoLimits: Story = {
-  <StaffListPage {...props} disabled={true} staffMembers={undefined} />
+  args: {
-);
+    ...props,
+    limits: undefined,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const NoLimits = () => <StaffListPage {...props} limits={undefined} />;
+export const LimitsReached: Story = {
-
+  args: {
-export const LimitsReached = () => (
+    ...props,
-  <StaffListPage {...props} limits={limitsReached} />
+    limits: limitsReached,
-);
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};

src/translations/components/TranslationsEntitiesListPage/TranslationsEntitiesListPage.stories.tsx

@@ -1,5 +1,6 @@
 import { pageListProps, searchPageProps } from "@dashboard/fixtures";
 import { LanguageCodeEnum } from "@dashboard/graphql";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
 import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
@@ -31,12 +32,7 @@ const props: TranslationsEntitiesListPageProps = {
   },
 };
 
-export default {
+const ListPage = props => (
-  title: "Translations / Entity list",
-  decorators: [PaginatorContextDecorator],
-};
-
-export const Default = () => (
   <TranslationsEntitiesListPage {...props}>
     <TranslationsEntitiesList
       disabled={false}
@@ -56,3 +52,20 @@ export const Default = () => (
     />
   </TranslationsEntitiesListPage>
 );
+
+const meta: Meta<typeof ListPage> = {
+  title: "Translations / Entity list",
+  decorators: [PaginatorContextDecorator],
+  component: ListPage,
+};
+export default meta;
+type Story = StoryObj<typeof ListPage>;
+
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};

src/warehouses/components/WarehouseListPage/WarehouseListPage.stories.tsx

@@ -7,7 +7,7 @@ import {
   tabPageProps,
 } from "@dashboard/fixtures";
 import { WarehouseListUrlSortField } from "@dashboard/warehouses/urls";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import { warehouseList } from "../../fixtures";
@@ -27,23 +27,61 @@ const props: WarehouseListPageProps = {
   warehouses: warehouseList,
 };
 
-export default {
+const meta: Meta<typeof WarehouseListPage> = {
   title: "Warehouses / Warehouse list",
   decorators: [PaginatorContextDecorator],
+  component: WarehouseListPage,
+};
+export default meta;
+type Story = StoryObj<typeof WarehouseListPage>;
+
+export const Default: Story = {
+  args: {
+    ...props,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
 };
 
-export const Default = () => <WarehouseListPage {...props} />;
+export const Loading: Story = {
+  args: {
+    ...props,
+    warehouses: undefined,
+    currentTab: undefined,
+    disabled: true,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const Loading = () => (
+export const NoData: Story = {
-  <WarehouseListPage {...props} disabled={true} warehouses={undefined} />
+  args: {
-);
+    ...props,
+    warehouses: [],
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const NoData = () => <WarehouseListPage {...props} warehouses={[]} />;
+export const NoLimits: Story = {
+  args: {
+    ...props,
+    limits: undefined,
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.85 },
+  },
+};
 
-export const NoLimits = () => (
+export const LimitsReached: Story = {
-  <WarehouseListPage {...props} limits={undefined} />
+  args: {
-);
+    ...props,
-
+    limits: limitsReached,
-export const LimitsReached = () => (
+  },
-  <WarehouseListPage {...props} limits={limitsReached} />
+  parameters: {
-);
+    chromatic: { diffThreshold: 0.85 },
+  },
+};