djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust storybook to prevent false positivies (#3679)

Browse source
This commit is contained in:
Krzysztof Żuraw 2023-05-22 11:09:36 +02:00 committed by GitHub
parent 8f58efcd50
commit 2f4b822acb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 655 additions and 195 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/apps/components/AppDetailsPage/AppDetailsPage.stories.tsx
View file

@ -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 = () => <AppDetailsPage {...props} loading={true} />;
export const Loading: Story = {
args: {
...props,
loading: true,
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};

37
src/apps/components/AppListPage/AppListPage.stories.tsx
View file

@ -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 = () => (
<AppListPage
{...props}
installedApps={[]}
installableMarketplaceApps={[]}
comingSoonMarketplaceApps={[]}
/>
);
export const Empty: Story = {
args: {
...props,
installedApps: [],
installableMarketplaceApps: [],
comingSoonMarketplaceApps: [],
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};

42
src/categories/components/CategoryListPage/CategoryListPage.stories.tsx
View file

@ -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 = () => (
<CategoryListPage {...categoryTableProps} categories={undefined} />
);
export const Empty = () => (
<CategoryListPage {...categoryTableProps} categories={[]} />
);
export const Empty: Story = {
args: {
...categoryTableProps,
categories: [],
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};

52
src/channels/pages/ChannelsListPage/ChannelsListPage.stories.tsx
View file

@ -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 = () => (
<ChannelsListPage {...props} limits={undefined} />
);
export const LimitsReached = () => (
<ChannelsListPage {...props} limits={limitsReached} />
);
export const LimitsReached: Story = {
args: {
...props,
limits: limitsReached,
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};

40
src/collections/components/CollectionListPage/CollectionListPage.stories.tsx
View file

@ -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 = () => (
<CollectionListPage {...props} collections={undefined} disabled={true} />
);
export const Default: Story = {
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 },
},
};

40
src/customers/components/CustomerListPage/CustomerListPage.stories.tsx
View file

@ -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 = () => (
<CustomerListPage {...props} disabled={true} customers={undefined} />
);
export const NoData = () => <CustomerListPage {...props} customers={[]} />;
export const NoData: Story = {
args: {
...props,
customers: [],
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};

55
src/discounts/components/SaleListPage/SaleListPage.stories.tsx
View file

@ -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 = () => (
<SaleListPage
{...props}
sales={saleList.map(sale => ({ ...sale, channelListings: [] }))}
selectedChannelId=""
/>
);
export const NoChannels: Story = {
args: {
...props,
sales: saleList.map(sale => ({ ...sale, channelListings: [] })),
selectedChannelId: "",
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};

49
src/discounts/components/VoucherListPage/VoucherListPage.stories.tsx
View file

@ -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 = () => (
<VoucherListPage {...props} vouchers={undefined} />
);
export const NoChannels = () => (
<VoucherListPage
{...props}
selectedChannelId=""
vouchers={voucherList.map(voucher => ({
export const NoChannels: Story = {
args: {
...props,
selectedChannelId: "",
vouchers: voucherList.map(voucher => ({
...voucher,
channelListings: [],
}))}
/>
);
})),
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};

52
src/orders/components/OrderDraftListPage/OrderDraftListPage.stories.tsx
View file

@ -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 = () => (
<OrderDraftListPage {...props} disabled orders={undefined} />
);
export const WhenNoData: Story = {
args: {
...props,
orders: [],
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};
export const WhenNoData = () => <OrderDraftListPage {...props} orders={[]} />;
export const LimitsReached = () => (
<OrderDraftListPage {...props} limits={limitsReached} />
);
export const LimitsReached: Story = {
args: {
...props,
limits: limitsReached,
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};

69
src/orders/components/OrderListPage/OrderListPage.stories.tsx
View file

@ -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 = () => (
<OrderListPage
{...props}
orders={undefined}
currentTab={undefined}
disabled={true}
/>
);
export const WhenNoData: Story = {
args: {
...props,
orders: [],
},
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 = () => (
<OrderListPage {...props} limits={limitsReached} />
);
export const LimitsReached: Story = {
args: {
...props,
limits: limitsReached,
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};

41
src/pageTypes/components/PageTypeListPage/PageTypeListPage.stories.tsx
View file

@ -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 = () => (
<PageTypeListPage {...props} disabled={true} pageTypes={undefined} />
);
export const NoData = () => <PageTypeListPage {...props} pageTypes={[]} />;
export const NoData: Story = {
args: {
...props,
pageTypes: [],
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};

41
src/pages/components/PageListPage/PageListPage.stories.tsx
View file

@ -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 = () => (
<PageListPage {...props} disabled={true} pages={undefined} />
);
export const NoData = () => <PageListPage {...props} pages={[]} />;
export const NoData: Story = {
args: {
...props,
pages: [],
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};

16
src/plugins/components/PluginsListPage/PluginsListPage.stories.tsx
View file

@ -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 },
},
};

43
src/productTypes/components/ProductTypeListPage/ProductTypeListPage.stories.tsx
View file

@ -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 = () => (
<ProductTypeListPage {...props} disabled={true} productTypes={undefined} />
);
export const NoData = () => (
<ProductTypeListPage {...props} productTypes={[]} />
);
export const NoData: Story = {
args: {
...props,
productTypes: [],
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};

101
src/products/components/ProductListPage/ProductListPage.stories.tsx
View file

@ -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 = () => (
<ProductListPage
{...props}
products={undefined}
currentTab={undefined}
disabled={true}
/>
);
export const WithData: Story = {
args: {
...props,
products,
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};
export const WithData = () => (
<ProductListPage {...props} products={products} />
);
export const NoData: Story = {
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 = () => (
<ProductListPage
{...props}
selectedChannelId={""}
products={products.map(product => ({ ...product, channelListings: [] }))}
/>
);
export const NoLimits: Story = {
args: {
...props,
limits: undefined,
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};
export const NoLimits = () => <ProductListPage {...props} limits={undefined} />;
export const LimitsReached = () => (
<ProductListPage {...props} limits={limitsReached} />
);
export const LimitsReached: Story = {
args: {
...props,
limits: limitsReached,
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};

53
src/staff/components/StaffListPage/StaffListPage.stories.tsx
View file

@ -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 = () => (
<StaffListPage {...props} disabled={true} staffMembers={undefined} />
);
export const NoLimits: Story = {
args: {
...props,
limits: undefined,
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};
export const NoLimits = () => <StaffListPage {...props} limits={undefined} />;
export const LimitsReached = () => (
<StaffListPage {...props} limits={limitsReached} />
);
export const LimitsReached: Story = {
args: {
...props,
limits: limitsReached,
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};

25
src/translations/components/TranslationsEntitiesListPage/TranslationsEntitiesListPage.stories.tsx
View file

@ -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 {
title: "Translations / Entity list",
decorators: [PaginatorContextDecorator],
};
export const Default = () => (
const ListPage = props => (
<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 },
},
};

66
src/warehouses/components/WarehouseListPage/WarehouseListPage.stories.tsx
View file

@ -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 = () => (
<WarehouseListPage {...props} disabled={true} warehouses={undefined} />
);
export const NoData: Story = {
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 = () => (
<WarehouseListPage {...props} limits={undefined} />
);
export const LimitsReached = () => (
<WarehouseListPage {...props} limits={limitsReached} />
);
export const LimitsReached: Story = {
args: {
...props,
limits: limitsReached,
},
parameters: {
chromatic: { diffThreshold: 0.85 },
},
};