Clean up storybook (#2941)

.dockerignore

@@ -1,2 +1,3 @@
 node_modules
 build
+*.stories.tsx

.eslintrc.json

@@ -21,7 +21,7 @@
   ],
   "overrides": [
     {
-      "files": ["src/**/*.test.*"],
+      "files": ["src/**/*.test.*", "src/**/*.stories.*"],
       "rules": {
         "react-refresh/only-export-components": "off"
       }

package.json

@@ -169,7 +169,6 @@
     "workbox-strategies": "^6.1.2"
   },
   "optionalDependencies": {
-    "@storybook/addon-storyshots": "^5.2.8",
     "@storybook/react": "^5.1.9",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
@@ -177,7 +176,6 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^26.0.14",
     "@types/setup-polly-jest": "^0.5.0",
-    "@types/storybook__addon-storyshots": "^3.4.9",
     "@types/storybook__react": "^4.0.2",
     "cypress": "^10.0.2",
     "cypress-file-upload": "^5.0.8",

src/apps/components/AppActivateDialog/AppActivateDialog.stories.tsx

@@ -1,18 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import AppActivateDialog, { AppActivateDialogProps } from "./AppActivateDialog";
-
-const props: AppActivateDialogProps = {
-  confirmButtonState: "default",
-  name: "App",
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-};
-
-storiesOf("Views / Apps / Activate app", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppActivateDialog {...props} />)
-  .add("unnamed app", () => <AppActivateDialog {...props} name="" />);

src/apps/components/AppDeactivateDialog/AppDeactivateDialog.stories.tsx

@@ -1,20 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import AppDeactivateDialog, {
-  AppDeactivateDialogProps,
-} from "./AppDeactivateDialog";
-
-const props: AppDeactivateDialogProps = {
-  confirmButtonState: "default",
-  name: "App",
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-};
-
-storiesOf("Views / Apps / Deactivate app", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppDeactivateDialog {...props} />)
-  .add("unnamed app", () => <AppDeactivateDialog {...props} name="" />);

src/apps/components/AppDeleteDialog/AppDeleteDialog.stories.tsx

@@ -1,19 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import AppDeleteDialog, { AppDeleteDialogProps } from "./AppDeleteDialog";
-
-const props: AppDeleteDialogProps = {
-  confirmButtonState: "default",
-  name: "App",
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-  type: "EXTERNAL",
-};
-
-storiesOf("Views / Apps / Delete app", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppDeleteDialog {...props} />)
-  .add("unnamed app", () => <AppDeleteDialog {...props} name="" />);

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

@@ -13,7 +13,7 @@ const props: AppDetailsPageProps = {
   onAppDeactivateOpen: () => undefined,
 };
 
-storiesOf("Views / Apps / App details", module)
+storiesOf("Apps / App details", module)
   .addDecorator(Decorator)
   .add("default", () => <AppDetailsPage {...props} />)
   .add("loading", () => <AppDetailsPage {...props} loading={true} />);

src/apps/components/AppInProgressDeleteDialog/AppInProgressDeleteDialog.stories.tsx

@@ -1,20 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import AppInProgressDeleteDialog, {
-  AppInProgressDeleteDialogProps,
-} from "./AppInProgressDeleteDialog";
-
-const props: AppInProgressDeleteDialogProps = {
-  confirmButtonState: "default",
-  name: "App",
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-};
-
-storiesOf("Views / Apps / Delete app failed installation", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppInProgressDeleteDialog {...props} />)
-  .add("unnamed app", () => <AppInProgressDeleteDialog {...props} name="" />);

src/apps/components/AppInstallPage/AppInstallPage.stories.tsx

@@ -12,7 +12,7 @@ const props: AppInstallPageProps = {
   onSubmit: () => Promise.resolve([]),
 };
 
-storiesOf("Views / Apps / Install App", module)
+storiesOf("Apps / Install App", module)
   .addDecorator(Decorator)
   .add("default", () => <AppInstallPage {...props} />)
   .add("loading", () => <AppInstallPage {...props} loading={true} />);

src/apps/components/AppPage/AppPage.stories.tsx

@@ -12,7 +12,7 @@ const props: AppPageProps = {
   onError: () => undefined,
 };
 
-storiesOf("Views / Apps / App", module)
+storiesOf("Apps / App", module)
   .addDecorator(Decorator)
   .add("default", () => <AppPage {...props} />)
   .add("settings", () => (

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

@@ -31,7 +31,7 @@ const props: AppsListPageProps = {
   onInstalledAppRemove: () => undefined,
 };
 
-storiesOf("Views / Apps / Apps list", module)
+storiesOf("Apps / Apps list", module)
   .addDecorator(Decorator)
   .addDecorator(story => (
     <AppListContext.Provider

src/apps/components/HorizontalSpacer/HorizontalSpacer.stories.tsx

@@ -1,36 +0,0 @@
-import { Typography } from "@material-ui/core";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import HorizontalSpacer from "./HorizontalSpacer";
-
-interface HelperWrapperProps {
-  children: React.ReactNode;
-}
-
-const HelperWrapper: React.FC<HelperWrapperProps> = ({ children }) => (
-  <div style={{ display: "flex", flexDirection: "row" }}>{children}</div>
-);
-
-const Text: React.FC = () => <Typography>{"<- The spacer is here"}</Typography>;
-
-storiesOf("Generics / Horizontal Spacer", module)
-  .addDecorator(Decorator)
-  .add("without", () => (
-    <HelperWrapper>
-      <Typography>No spacer</Typography>
-    </HelperWrapper>
-  ))
-  .add("default", () => (
-    <HelperWrapper>
-      <HorizontalSpacer />
-      <Text />
-    </HelperWrapper>
-  ))
-  .add("with bigger spacing provided", () => (
-    <HelperWrapper>
-      <HorizontalSpacer spacing={4} />
-      <Text />
-    </HelperWrapper>
-  ));

src/auth/components/LoginLoading/LoginLoading.stories.tsx

@@ -1,9 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import LoginLoading from ".";
-
-storiesOf("Views / Authentication / Verifying remembered user", module)
-  .addDecorator(Decorator)
-  .add("default", () => <LoginLoading />);

src/auth/components/LoginPage/LoginPage.stories.tsx

@@ -3,7 +3,7 @@ import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import LoginPage, { LoginCardProps } from "../../../auth/components/LoginPage";
+import LoginPage, { LoginCardProps } from "./LoginPage";
 
 const props: Omit<LoginCardProps, "classes"> = {
   disabled: false,
@@ -20,7 +20,7 @@ const props: Omit<LoginCardProps, "classes"> = {
   onSubmit: () => undefined,
 };
 
-storiesOf("Views / Authentication / Log in", module)
+storiesOf("Authentication / Log in", module)
   .addDecorator(CardDecorator)
   .addDecorator(Decorator)
   .add("default", () => <LoginPage {...props} />)

src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx

@@ -6,7 +6,7 @@ import React from "react";
 
 import NewPasswordPage from "./NewPasswordPage";
 
-storiesOf("Views / Authentication / Set up a new password", module)
+storiesOf("Authentication / Set up a new password", module)
   .addDecorator(CardDecorator)
   .addDecorator(Decorator)
   .add("default", () => (

src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx

@@ -1,6 +1,6 @@
 import CardDecorator from "@saleor/storybook/CardDecorator";
 import Decorator from "@saleor/storybook/Decorator";
-import { formError } from "@saleor/storybook/misc";
+import { formError } from "@saleor/storybook/formError";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -11,7 +11,7 @@ const props: ResetPasswordPageProps = {
   error: undefined,
   onSubmit: () => undefined,
 };
-storiesOf("Views / Authentication / Reset password", module)
+storiesOf("Authentication / Reset password", module)
   .addDecorator(CardDecorator)
   .addDecorator(Decorator)
   .add("default", () => <ResetPasswordPage {...props} />)

src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.stories.tsx

@@ -5,7 +5,7 @@ import React from "react";
 
 import ResetPasswordSuccessPage from "./ResetPasswordSuccessPage";
 
-storiesOf("Views / Authentication / Reset password success", module)
+storiesOf("Authentication / Reset password success", module)
   .addDecorator(CardDecorator)
   .addDecorator(Decorator)
   .add("default", () => <ResetPasswordSuccessPage onBack={() => undefined} />);

src/categories/components/CategoryCreatePage/CategoryCratePage.stories.tsx

@@ -1,11 +1,11 @@
 import { ProductErrorCode } from "@saleor/graphql";
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import CategoryCreatePage, {
   CategoryCreatePageProps,
-} from "../../../categories/components/CategoryCreatePage";
-import Decorator from "../../Decorator";
+} from "./CategoryCreatePage";
 
 const createProps: CategoryCreatePageProps = {
   backUrl: "",
@@ -15,7 +15,7 @@ const createProps: CategoryCreatePageProps = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Views / Categories / Create category", module)
+storiesOf("Categories / Create category", module)
   .addDecorator(Decorator)
   .add("default", () => <CategoryCreatePage {...createProps} />)
   .add("When loading", () => (

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

@@ -1,6 +1,3 @@
-import CategoryListPage, {
-  CategoryTableProps,
-} from "@saleor/categories/components/CategoryListPage";
 import { categories } from "@saleor/categories/fixtures";
 import { CategoryListUrlSortField } from "@saleor/categories/urls";
 import {
@@ -10,11 +7,12 @@ import {
   sortPageProps,
   tabPageProps,
 } from "@saleor/fixtures";
+import Decorator from "@saleor/storybook/Decorator";
 import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import Decorator from "../../Decorator";
+import CategoryListPage, { CategoryTableProps } from "./CategoryListPage";
 
 const categoryTableProps: CategoryTableProps = {
   categories,
@@ -30,7 +28,7 @@ const categoryTableProps: CategoryTableProps = {
   },
 };
 
-storiesOf("Views / Categories / Category list", module)
+storiesOf("Categories / Category list", module)
   .addDecorator(Decorator)
   .addDecorator(PaginatorContextDecorator)
   .add("default", () => <CategoryListPage {...categoryTableProps} />)

src/categories/components/CategoryUpdatePage/CategoryUpdatePage.stories.tsx

@@ -1,5 +1,8 @@
 import placeholderImage from "@assets/images/placeholder255x255.png";
+import { category as categoryFixture } from "@saleor/categories/fixtures";
+import { listActionsProps } from "@saleor/fixtures";
 import { ProductErrorCode } from "@saleor/graphql";
+import Decorator from "@saleor/storybook/Decorator";
 import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 import { storiesOf } from "@storybook/react";
@@ -8,10 +11,7 @@ import React from "react";
 import CategoryUpdatePage, {
   CategoryPageTab,
   CategoryUpdatePageProps,
-} from "../../../categories/components/CategoryUpdatePage";
-import { category as categoryFixture } from "../../../categories/fixtures";
-import { listActionsProps } from "../../../fixtures";
-import Decorator from "../../Decorator";
+} from "./CategoryUpdatePage";
 
 const category = categoryFixture(placeholderImage);
 
@@ -35,7 +35,7 @@ const updateProps: Omit<CategoryUpdatePageProps, "classes"> = {
   ...listActionsProps,
 };
 
-storiesOf("Views / Categories / Update category", module)
+storiesOf("Categories / Update category", module)
   .addDecorator(Decorator)
   .addDecorator(PaginatorContextDecorator)
   .add("default", () => <CategoryUpdatePage {...updateProps} />)

src/channels/components/CannotDefineChannelsAvailabilityCard/CannotDefineChannelsAvailabilityCard.stories.tsx

@@ -1,11 +0,0 @@
-import CentralPlacementDecorator from "@saleor/storybook/CentralPlacementDecorator";
-import CommonDecorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import CannotDefineChannelsAvailabilityCard from "./CannotDefineChannelsAvailabilityCard";
-
-storiesOf("Channels / Cannot define channels availability card", module)
-  .addDecorator(CommonDecorator)
-  .addDecorator(CentralPlacementDecorator)
-  .add("default", () => <CannotDefineChannelsAvailabilityCard />);

src/channels/components/ChannelDeleteDialog/ChannelDeleteDialog.stories.tsx

@@ -1,26 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { mapNodeToChoice } from "@saleor/utils/maps";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import { channelsList } from "../../fixtures";
-import ChannelDeleteDialog, {
-  ChannelDeleteDialogProps,
-} from "./ChannelDeleteDialog";
-
-const props: ChannelDeleteDialogProps = {
-  channelsChoices: mapNodeToChoice(channelsList),
-  confirmButtonState: "default",
-  hasOrders: true,
-  onBack: () => undefined,
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-};
-
-storiesOf("Views / Channels / Delete channel", module)
-  .addDecorator(Decorator)
-  .add("default", () => <ChannelDeleteDialog {...props} />)
-  .add("without channels to choose", () => (
-    <ChannelDeleteDialog {...props} channelsChoices={[]} />
-  ));

src/channels/components/ChannelForm/ChannelForm.stories.tsx

@@ -1,60 +0,0 @@
-import { countries } from "@saleor/fixtures";
-import { AllocationStrategyEnum, CountryCode } from "@saleor/graphql";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import { channelCreateErrors } from "../../fixtures";
-import ChannelForm, { ChannelFormProps } from "./ChannelForm";
-
-const props: ChannelFormProps = {
-  data: {
-    currencyCode: "euro",
-    shippingZonesIdsToAdd: [],
-    shippingZonesIdsToRemove: [],
-    warehousesIdsToAdd: [],
-    warehousesIdsToRemove: [],
-    name: "Test",
-    slug: "test",
-    defaultCountry: CountryCode.PL,
-    allocationStrategy: AllocationStrategyEnum.PRIORITIZE_HIGH_STOCK,
-    warehousesToDisplay: [
-      {
-        __typename: "Warehouse",
-        id: "1",
-        name: "Warehouse 1",
-      },
-      {
-        __typename: "Warehouse",
-        id: "2",
-        name: "Warehouse 2",
-      },
-    ],
-    shippingZonesToDisplay: [
-      {
-        __typename: "ShippingZone",
-        id: "1",
-        name: "Shipping Zone 1",
-      },
-      {
-        __typename: "ShippingZone",
-        id: "2",
-        name: "Shipping Zone 2",
-      },
-    ],
-  },
-  disabled: false,
-  errors: [],
-  selectedCountryDisplayName: "Poland",
-  countries: countries.map(({ name, code }) => ({ label: name, value: code })),
-  onChange: () => undefined,
-  onDefaultCountryChange: () => undefined,
-};
-
-storiesOf("Views / Channels / Channel form", module)
-  .addDecorator(Decorator)
-  .add("default", () => <ChannelForm {...props} />)
-  .add("disabled", () => <ChannelForm {...props} disabled={true} />)
-  .add("with errors", () => (
-    <ChannelForm {...props} errors={channelCreateErrors} />
-  ));

src/channels/components/ChannelPickerDialog/ChannelPickerDialog.stories.tsx

@@ -1,24 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { mapNodeToChoice } from "@saleor/utils/maps";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import { channelsList } from "../../fixtures";
-import ChannelPickerDialog, {
-  ChannelPickerDialogProps,
-} from "./ChannelPickerDialog";
-
-const channelsChoices = mapNodeToChoice(channelsList);
-
-const props: ChannelPickerDialogProps = {
-  channelsChoices,
-  confirmButtonState: "default",
-  defaultChoice: channelsChoices[0]?.value,
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-};
-
-storiesOf("Views / Channels / Settings dialog", module)
-  .addDecorator(Decorator)
-  .add("default", () => <ChannelPickerDialog {...props} />);

src/channels/components/ChannelStatus/ChannelStatus.stories.tsx

@@ -1,16 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import ChannelStatus, { ChannelStatusProps } from "./ChannelStatus";
-
-const props: ChannelStatusProps = {
-  disabled: false,
-  isActive: false,
-  updateChannelStatus: () => undefined,
-};
-
-storiesOf("Views / Channels / Channel status", module)
-  .addDecorator(Decorator)
-  .add("inactive", () => <ChannelStatus {...props} />)
-  .add("active", () => <ChannelStatus {...props} isActive={true} />);

src/channels/components/ShippingZones/ShippingZones.stories.tsx

@@ -1,46 +0,0 @@
-import { ChannelShippingZones } from "@saleor/channels/pages/ChannelDetailsPage/types";
-import CommonDecorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import ShippingZones, { ShippingZonesProps } from "./ShippingZones";
-
-const shippingZones = [
-  {
-    __typename: "ShippingZone",
-    id: "2",
-    name: "Fancy shipping zone",
-  },
-  {
-    __typename: "ShippingZone",
-    id: "3",
-    name: "Nice shipping zone",
-  },
-];
-
-const baseProps: ShippingZonesProps = {
-  addShippingZone: () => undefined,
-  removeShippingZone: () => undefined,
-  searchShippingZones: () => undefined,
-  fetchMoreShippingZones: {
-    loading: false,
-    hasMore: false,
-    onFetchMore: () => undefined,
-    totalCount: 0,
-  },
-  shippingZones: [],
-  shippingZonesChoices: shippingZones as ChannelShippingZones,
-  totalCount: 10,
-  loading: false,
-};
-
-storiesOf("Shipping zones", module)
-  .addDecorator(CommonDecorator)
-  .add("with no options selected", () => <ShippingZones {...baseProps} />)
-  .add("with options selected", () => (
-    <ShippingZones
-      {...baseProps}
-      shippingZones={shippingZones as ChannelShippingZones}
-    />
-  ))
-  .add("loading", () => <ShippingZones {...baseProps} loading={true} />);

src/channels/components/Warehouses/Warehouses.stories.tsx

@@ -1,44 +0,0 @@
-import { ChannelWarehouses } from "@saleor/channels/pages/ChannelDetailsPage/types";
-import CommonDecorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import Warehouses, { WarehousesProps } from "./Warehouses";
-
-const warehouses = [
-  {
-    __typename: "Warehouse",
-    id: "2",
-    name: "Fancy warehouse",
-  },
-  {
-    __typename: "Warehouse",
-    id: "3",
-    name: "Nice warehouse",
-  },
-];
-
-const baseProps: WarehousesProps = {
-  addWarehouse: () => undefined,
-  removeWarehouse: () => undefined,
-  searchWarehouses: () => undefined,
-  fetchMoreWarehouses: {
-    loading: false,
-    hasMore: false,
-    onFetchMore: () => undefined,
-    totalCount: 0,
-  },
-  reorderWarehouses: () => undefined,
-  warehouses: [],
-  warehousesChoices: warehouses as ChannelWarehouses,
-  totalCount: 10,
-  loading: false,
-};
-
-storiesOf("Warehouses", module)
-  .addDecorator(CommonDecorator)
-  .add("with no options selected", () => <Warehouses {...baseProps} />)
-  .add("with options selected", () => (
-    <Warehouses {...baseProps} warehouses={warehouses as ChannelWarehouses} />
-  ))
-  .add("loading", () => <Warehouses {...baseProps} loading={true} />);

src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx

@@ -1,10 +1,10 @@
+import { channel, channelCreateErrors } from "@saleor/channels/fixtures";
 import { countries } from "@saleor/fixtures";
 import { ChannelErrorFragment } from "@saleor/graphql";
 import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { channel, channelCreateErrors } from "../../fixtures";
 import ChannelDetailsPage, {
   ChannelDetailsPageProps,
 } from "./ChannelDetailsPage";
@@ -69,7 +69,7 @@ const props: ChannelDetailsPageProps<ChannelErrorFragment[]> = {
   },
 };
 
-storiesOf("Views / Channels / Channel details", module)
+storiesOf("Channels / Channel details", module)
   .addDecorator(Decorator)
   .add("default", () => <ChannelDetailsPage {...props} />)
   .add("disabled", () => <ChannelDetailsPage {...props} disabled={true} />)

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

@@ -1,9 +1,9 @@
+import { channelsList } from "@saleor/channels/fixtures";
 import { limits, limitsReached } from "@saleor/fixtures";
 import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { channelsList } from "../../fixtures";
 import ChannelsListPage, { ChannelsListPageProps } from "./ChannelsListPage";
 
 const props: ChannelsListPageProps = {
@@ -12,7 +12,7 @@ const props: ChannelsListPageProps = {
   onRemove: () => undefined,
 };
 
-storiesOf("Views / Channels / Channels list", module)
+storiesOf("Channels / Channels list", module)
   .addDecorator(Decorator)
   .add("default", () => <ChannelsListPage {...props} />)
   .add("empty", () => <ChannelsListPage {...props} channelsList={[]} />)

src/collections/components/CollectionCreatePage/CollectionCreatePage.stories.tsx

@@ -1,13 +1,13 @@
 import { channelsList } from "@saleor/channels/fixtures";
 import { createCollectionChannels } from "@saleor/channels/utils";
 import { CollectionErrorCode } from "@saleor/graphql";
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import CollectionCreatePage, {
   CollectionCreatePageProps,
-} from "../../../collections/components/CollectionCreatePage";
-import Decorator from "../../Decorator";
+} from "./CollectionCreatePage";
 
 const channels = createCollectionChannels(channelsList);
 
@@ -23,7 +23,7 @@ const props: Omit<CollectionCreatePageProps, "classes"> = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Views / Collections / Create collection", module)
+storiesOf("Collections / Create collection", module)
   .addDecorator(Decorator)
   .add("default", () => <CollectionCreatePage {...props} />)
   .add("loading", () => <CollectionCreatePage {...props} disabled={true} />)

src/collections/components/CollectionDetailsPage/CollectionDetailsPage.stories.tsx

@@ -1,17 +1,17 @@
 import placeholderCollectionImage from "@assets/images/block1.jpg";
 import placeholderProductImage from "@assets/images/placeholder60x60.png";
 import { createCollectionChannelsData } from "@saleor/channels/utils";
+import { collection as collectionFixture } from "@saleor/collections/fixtures";
+import { listActionsProps, pageListProps } from "@saleor/fixtures";
 import { CollectionErrorCode } from "@saleor/graphql";
+import Decorator from "@saleor/storybook/Decorator";
 import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import CollectionDetailsPage, {
   CollectionDetailsPageProps,
-} from "../../../collections/components/CollectionDetailsPage";
-import { collection as collectionFixture } from "../../../collections/fixtures";
-import { listActionsProps, pageListProps } from "../../../fixtures";
-import Decorator from "../../Decorator";
+} from "./CollectionDetailsPage";
 
 const collection = collectionFixture(
   placeholderCollectionImage,
@@ -39,7 +39,7 @@ const props: Omit<CollectionDetailsPageProps, "classes"> = {
   selectedChannelId: "123",
 };
 
-storiesOf("Views / Collections / Collection detailsCollection details", module)
+storiesOf("Collections / Collection detailsCollection details", module)
   .addDecorator(Decorator)
   .addDecorator(PaginatorContextDecorator)
   .add("default", () => <CollectionDetailsPage {...props} />)

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

@@ -1,4 +1,5 @@
 import { CollectionListUrlSortField } from "@saleor/collections/urls";
+import Decorator from "@saleor/storybook/Decorator";
 import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
@@ -17,7 +18,6 @@ import {
   sortPageProps,
   tabPageProps,
 } from "../../../fixtures";
-import Decorator from "../../Decorator";
 
 const props: CollectionListPageProps = {
   ...listActionsProps,
@@ -34,7 +34,7 @@ const props: CollectionListPageProps = {
   filterOpts: collectionListFilterOpts,
 };
 
-storiesOf("Views / Collections / Collection list", module)
+storiesOf("Collections / Collection list", module)
   .addDecorator(Decorator)
   .addDecorator(PaginatorContextDecorator)
   .add("default", () => <CollectionListPage {...props} />)

src/components/Accordion/Accordion.stories.tsx

@@ -1,21 +0,0 @@
-import CardDecorator from "@saleor/storybook/CardDecorator";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import Accordion from "./Accordion";
-
-storiesOf("Generics / Accordion", module)
-  .addDecorator(Decorator)
-  .addDecorator(CardDecorator)
-  .add("default", () => <Accordion title="Title">Content</Accordion>)
-  .add("opened", () => (
-    <Accordion title="Title" initialExpand={true}>
-      Content
-    </Accordion>
-  ))
-  .add("with quick peek", () => (
-    <Accordion title="Title" quickPeek="Quick Peek">
-      Content
-    </Accordion>
-  ));

src/components/AccountPermissionGroups/AccountPermissionGroups.stories.tsx

@@ -1,76 +0,0 @@
-import {
-  AccountErrorCode,
-  SearchPermissionGroupsQuery,
-  StaffErrorFragment,
-} from "@saleor/graphql";
-import Decorator from "@saleor/storybook/Decorator";
-import { RelayToFlat } from "@saleor/types";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import { MultiAutocompleteChoiceType } from "../MultiAutocompleteSelectField";
-import AccountPermissionGroups, { AccountPermissionGroupsProps } from ".";
-
-const availablePermissionGroups: RelayToFlat<SearchPermissionGroupsQuery["search"]> = [
-  {
-    __typename: "Group",
-    id: "R3JvdXA6MQ==",
-    name: "Unmanagable by user",
-    userCanManage: false,
-  },
-  {
-    __typename: "Group",
-    id: "R3JvdXA6Mg==",
-    name: "Default group",
-    userCanManage: true,
-  },
-  {
-    __typename: "Group",
-    id: "R3JvdXA6Mz==",
-    name: "Translators",
-    userCanManage: false,
-  },
-  {
-    __typename: "Group",
-    id: "R3JvdXA6My==",
-    name: "CMS",
-    userCanManage: true,
-  },
-];
-
-const displayValues: MultiAutocompleteChoiceType[] = [
-  { disabled: true, label: "Unmanagable by user", value: "R3JvdXA6MQ==" },
-  { disabled: false, label: "Default group", value: "R3JvdXA6Mg==" },
-];
-
-const formData = {
-  permissionGroups: ["R3JvdXA6MQ==", "R3JvdXA6Mg=="],
-};
-
-const errors: StaffErrorFragment[] = [
-  {
-    __typename: "StaffError",
-    code: AccountErrorCode.OUT_OF_SCOPE_GROUP,
-    field: "addGroups",
-    message: "Group out of scope",
-  },
-];
-
-const props: AccountPermissionGroupsProps = {
-  availablePermissionGroups,
-  disabled: false,
-  displayValues,
-  errors: [],
-  formData,
-  hasMore: false,
-  initialSearch: "",
-  loading: false,
-  onChange: () => undefined,
-  onFetchMore: () => undefined,
-  onSearchChange: () => undefined,
-};
-
-storiesOf("Generics / Account Permission Groups Widget", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AccountPermissionGroups {...props} />)
-  .add("error", () => <AccountPermissionGroups {...props} errors={errors} />);

src/components/AssignAttributeDialog/AssignAttributeDialog.stories.tsx

@@ -1,34 +0,0 @@
-import { attributes } from "@saleor/attributes/fixtures";
-import AssignAttributeDialog, {
-  AssignAttributeDialogProps,
-} from "@saleor/components/AssignAttributeDialog";
-import { fetchMoreProps } from "@saleor/fixtures";
-import { formError } from "@saleor/storybook/misc";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import Decorator from "../../storybook/Decorator";
-
-const props: AssignAttributeDialogProps = {
-  ...fetchMoreProps,
-  attributes: attributes.slice(0, 5),
-  confirmButtonState: "default",
-  errors: [],
-  onClose: () => undefined,
-  onFetch: () => undefined,
-  onOpen: () => undefined,
-  onSubmit: () => undefined,
-  onToggle: () => undefined,
-  open: true,
-  selected: [attributes[0].id, attributes[3].id],
-};
-
-storiesOf("Generics / Assign attributes dialog", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AssignAttributeDialog {...props} />)
-  .add("loading", () => (
-    <AssignAttributeDialog {...props} attributes={undefined} loading={true} />
-  ))
-  .add("errors", () => (
-    <AssignAttributeDialog {...props} errors={[formError("").message]} />
-  ));

src/components/AttributeUnassignDialog/AttributeUnassignDialog.stories.tsx

@@ -1,21 +0,0 @@
-import AttributeUnassignDialog, {
-  AttributeUnassignDialogProps,
-} from "@saleor/components/AttributeUnassignDialog";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import Decorator from "../../storybook/Decorator";
-
-const props: AttributeUnassignDialogProps = {
-  attributeName: "Size",
-  confirmButtonState: "default",
-  itemTypeName: "Shoes",
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-  title: "Unassign Attribute from Shoes",
-};
-
-storiesOf("Generics / Unassign attribute", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AttributeUnassignDialog {...props} />);

src/components/Attributes/Attributes.stories.tsx

@@ -1,40 +0,0 @@
-import Attributes, { AttributesProps } from "@saleor/components/Attributes";
-import { fetchMoreProps } from "@saleor/fixtures";
-import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import Decorator from "../../storybook/Decorator";
-import { ATTRIBUTES, ATTRIBUTES_SELECTED } from "./fixtures";
-
-const props: AttributesProps = {
-  attributes: ATTRIBUTES,
-  attributeValues: [],
-  disabled: false,
-  errors: [],
-  loading: false,
-  onChange: () => undefined,
-  onFileChange: () => undefined,
-  onMultiChange: () => undefined,
-  onReferencesAddClick: () => undefined,
-  onReferencesRemove: () => undefined,
-  onReferencesReorder: () => undefined,
-  fetchAttributeValues: () => undefined,
-  fetchMoreAttributeValues: fetchMoreProps,
-  onAttributeSelectBlur: () => undefined,
-  richTextGetters: {
-    getDefaultValue: () => undefined,
-    getHandleChange: () => () => undefined,
-    getMountEditor: () => () => undefined,
-    getShouldMount: () => true,
-  },
-};
-
-storiesOf("Attributes / Attributes", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <Attributes {...props} />)
-  .add("selected", () => (
-    <Attributes {...props} attributes={ATTRIBUTES_SELECTED} />
-  ))
-  .add("disabled", () => <Attributes {...props} disabled={true} />);

src/components/BulkAttributeUnassignDialog/BulkAttributeUnassignDialog.stories.tsx

@@ -1,21 +0,0 @@
-import BulkAttributeUnassignDialog, {
-  BulkAttributeUnassignDialogProps,
-} from "@saleor/components/BulkAttributeUnassignDialog";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import Decorator from "../../storybook/Decorator";
-
-const props: BulkAttributeUnassignDialogProps = {
-  attributeQuantity: 4,
-  confirmButtonState: "default",
-  itemTypeName: "Shoes",
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-  title: "Unassign Attribute from Shoes",
-};
-
-storiesOf("Generics / Unassign multiple attributes", module)
-  .addDecorator(Decorator)
-  .add("default", () => <BulkAttributeUnassignDialog {...props} />);

src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCard.stories.tsx

@@ -1,65 +0,0 @@
-import { createChannelsDataFromProduct } from "@saleor/channels/utils";
-import { PermissionEnum, UserFragment } from "@saleor/graphql";
-import { product } from "@saleor/products/fixtures";
-import Decorator from "@saleor/storybook/Decorator";
-import UserDecorator from "@saleor/storybook/UserDecorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import ChannelsAvailabilityCard, {
-  ChannelsAvailabilityCardProps,
-} from "./ChannelsAvailabilityCard";
-
-const user: UserFragment = {
-  __typename: "User",
-  avatar: null,
-  email: "email@example.com",
-  firstName: "User",
-  id: "123",
-  isStaff: true,
-  lastName: "User",
-  userPermissions: [
-    {
-      __typename: "UserPermission",
-      code: PermissionEnum.MANAGE_CHANNELS,
-      name: "Manage Channels",
-    },
-  ],
-};
-
-const productChannels = createChannelsDataFromProduct(product(""));
-
-const props: ChannelsAvailabilityCardProps = {
-  allChannelsCount: 4,
-  managePermissions: [PermissionEnum.MANAGE_CHANNELS],
-  channelsList: productChannels.map(channel => ({
-    id: channel.id,
-    name: channel.name,
-  })),
-  errors: [],
-  onChange: () => undefined,
-  openModal: () => undefined,
-};
-
-storiesOf("Generics / Channels availability card", module)
-  .addDecorator(Decorator)
-  .addDecorator(UserDecorator(user))
-  .add("default", () => <ChannelsAvailabilityCard {...props} />)
-  .add("with onChange", () => (
-    <ChannelsAvailabilityCard
-      {...props}
-      channelsList={undefined}
-      channels={productChannels}
-      messages={{
-        availableLabel: "Available",
-        availableSecondLabel: "Will become available",
-        unavailableLabel: "Lorem Ipsum",
-        visibleSecondLabel: "Dolor Sit Amet",
-        hiddenSecondLabel: "Will become published",
-        hiddenLabel: "Hidden",
-        visibleLabel: "Visible",
-        availableDateText: "available from 07/30/2020",
-        setAvailabilityDateLabel: "xd4",
-      }}
-    />
-  ));

src/components/ChannelsAvailabilityDialog/ChannelsAvailabilityDialog.stories.tsx

@@ -1,32 +0,0 @@
-import { channelsList } from "@saleor/channels/fixtures";
-import { createChannelsData } from "@saleor/channels/utils";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import ChannelsAvailabilityDialog, {
-  ChannelsAvailabilityDialogProps,
-} from "./ChannelsAvailabilityDialog";
-
-const props: ChannelsAvailabilityDialogProps = {
-  channels: createChannelsData(channelsList),
-  confirmButtonState: "default",
-  disabled: false,
-  isSelected: () => undefined,
-  onChange: () => undefined,
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-  title: "Channels",
-  toggleAll: () => undefined,
-};
-
-storiesOf("Generics / ChannelsAvailabilityDialog", module)
-  .addDecorator(Decorator)
-  .add("default", () => <ChannelsAvailabilityDialog {...props} />)
-  .add("with text", () => (
-    <ChannelsAvailabilityDialog {...props} contentType="order" />
-  ))
-  .add("disabled", () => (
-    <ChannelsAvailabilityDialog {...props} disabled={true} />
-  ));

src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.stories.tsx

@@ -1,16 +0,0 @@
-import { productChannels } from "@saleor/channels/fixtures";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import ChannelsAvailabilityDropdown, {
-  ChannelsAvailabilityDropdownProps,
-} from "./ChannelsAvailabilityDropdown";
-
-const props: ChannelsAvailabilityDropdownProps = {
-  channels: productChannels,
-};
-
-storiesOf("Generics / ChannelsAvailabilityDropdown", module)
-  .addDecorator(Decorator)
-  .add("default", () => <ChannelsAvailabilityDropdown {...props} />);

src/components/Chip/Chip.stories.tsx

@@ -1,15 +0,0 @@
-import Chip, { ChipProps } from "@saleor/components/Chip";
-import CardDecorator from "@saleor/storybook/CardDecorator";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-const props: ChipProps = {
-  label: "Lorem Ipsum",
-};
-
-storiesOf("Generics / Chip", module)
-  .addDecorator(CardDecorator)
-  .addDecorator(Decorator)
-  .add("default", () => <Chip {...props} />)
-  .add("with x", () => <Chip {...props} onClose={() => undefined} />);

src/components/ColorPicker/ColorPicker.stories.tsx

@@ -1,19 +0,0 @@
-import CentralPlacementDecorator from "@saleor/storybook/CentralPlacementDecorator";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import { ColorPicker, ColorPickerProps } from "./ColorPicker";
-
-const props: ColorPickerProps = {
-  data: {},
-  setError: () => null,
-  errors: {},
-  clearErrors: () => null,
-  onColorChange: () => null,
-};
-
-storiesOf("Generics / ColorPicker", module)
-  .addDecorator(Decorator)
-  .addDecorator(CentralPlacementDecorator)
-  .add("default", () => <ColorPicker {...props} />);

src/components/Datagrid/Datagrid.stories.tsx

@@ -1,151 +0,0 @@
-import { GridCell, Item } from "@glideapps/glide-data-grid";
-import { Button } from "@saleor/macaw-ui";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import { score } from "fuzzaldrin";
-import sortBy from "lodash/sortBy";
-import throttle from "lodash/throttle";
-import React from "react";
-
-import {
-  booleanCell,
-  dropdownCell,
-  moneyCell,
-  numberCell,
-  textCell,
-} from "./cells";
-import Datagrid, { GetCellContentOpts } from "./Datagrid";
-import { DropdownChoice } from "./DropdownCell";
-import { initialData } from "./fixtures";
-import { numberCellEmptyValue } from "./NumberCell";
-import {
-  DatagridChangeStateContext,
-  useDatagridChangeState,
-} from "./useDatagridChange";
-
-const availableColumns = [
-  { title: "ID", id: "uuid", width: 300 },
-  { title: "Loaned", id: "loan-active", width: 70 },
-  { title: "Loaned Amount", id: "loan", width: 200 },
-  { title: "Name", id: "name", width: 200 },
-  { title: "Job", id: "job", width: 200 },
-  { title: "Balance", id: "balance", width: 200 },
-  { title: "Eye color", id: "eyeColor", width: 200 },
-  { title: "Age", id: "age", width: 80 },
-] as const;
-
-const jobChoices = [
-  { label: "QA", value: "qa" },
-  { label: "Engineer", value: "eng" },
-  { label: "Designer", value: "designer" },
-  { label: "Director", value: "director" },
-];
-
-const getJobChoices = throttle(
-  (text: string) =>
-    new Promise<DropdownChoice[]>(resolve =>
-      setTimeout(() => {
-        resolve(
-          sortBy(jobChoices, choice => -score(choice.label, text)).slice(0, 2),
-        );
-      }, 500),
-    ),
-  500,
-);
-
-const DefaultStory: React.FC<{ error?: boolean }> = ({ error }) => {
-  const changeProps = useDatagridChangeState();
-  const getCellContent = React.useCallback(
-    (
-      [column, row]: Item,
-      { changes, getChangeIndex, added, removed }: GetCellContentOpts,
-    ): GridCell => {
-      const columnId = availableColumns[column].id;
-      const change = changes.current[getChangeIndex(columnId, row)]?.data;
-      const dataRow = added.includes(row)
-        ? undefined
-        : initialData[row + removed.filter(r => r <= row).length];
-
-      if (columnId === "loan-active") {
-        return booleanCell(change ?? dataRow?.loan.active ?? null);
-      }
-
-      if (columnId === "loan") {
-        return moneyCell(
-          change?.value ?? dataRow?.loan.amount ?? null,
-          dataRow?.loan.currency ?? "USD",
-        );
-      }
-
-      if (columnId === "balance") {
-        return moneyCell(
-          change?.value ?? dataRow?.balance.amount ?? null,
-          dataRow?.balance.currency ?? "USD",
-        );
-      }
-
-      if (columnId === "job") {
-        return dropdownCell(change?.value ?? dataRow?.job, {
-          update: getJobChoices,
-        });
-      }
-
-      if (columnId === "age") {
-        return numberCell(
-          change?.value ?? dataRow?.age ?? numberCellEmptyValue,
-        );
-      }
-
-      const data = change ?? (dataRow ? dataRow[columnId] : "");
-      return textCell(data);
-    },
-    [],
-  );
-
-  const getCellError = React.useCallback(([column, row]: Item): boolean => {
-    if (!error) {
-      return false;
-    }
-    const columnId = availableColumns[column].id;
-
-    return row === 3 && columnId === "uuid";
-  }, []);
-
-  return (
-    <DatagridChangeStateContext.Provider value={changeProps}>
-      <div style={{ width: 800, margin: "auto" }}>
-        <Datagrid
-          addButtonLabel="Add row"
-          availableColumns={availableColumns}
-          getCellContent={getCellContent}
-          getCellError={getCellError}
-          emptyText="Use button above to add new rows"
-          menuItems={() => [
-            {
-              label: "Do something",
-              onSelect: () => undefined,
-            },
-          ]}
-          selectionActions={selection => (
-            <Button
-              variant="tertiary"
-              onClick={() =>
-                // eslint-disable-next-line no-console
-                console.log(selection.map(index => initialData[index]))
-              }
-            >
-              Action 1
-            </Button>
-          )}
-          rows={initialData.length}
-          title="Datagrid"
-        />
-      </div>
-    </DatagridChangeStateContext.Provider>
-  );
-};
-
-storiesOf("Generics / Datagrid", module)
-  .addDecorator(Decorator)
-  .add("default", () => <DefaultStory />)
-  .add("with errors", () => <DefaultStory error />);

src/components/DeletableItem/DeletableItem.stories.tsx

@@ -1,9 +0,0 @@
-import CommonDecorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import DeletableItem from "./DeletableItem";
-
-storiesOf("Generics / Deletable Item", module)
-  .addDecorator(CommonDecorator)
-  .add("default", () => <DeletableItem id="1" onDelete={() => undefined} />);

src/components/ErrorPage/ErrorPage.stories.tsx

@@ -1,13 +1,13 @@
-import ErrorPage, { ErrorPageProps } from "@saleor/components/ErrorPage";
 import {
   AppStateContext,
   AppStateContextType,
 } from "@saleor/containers/AppState";
 import { initialAppState } from "@saleor/containers/AppState/state";
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import Decorator from "../../Decorator";
+import ErrorPage, { ErrorPageProps } from "./ErrorPage";
 
 const initialAppStateFixture: AppStateContextType = [
   initialAppState,
@@ -29,7 +29,7 @@ const props: Omit<ErrorPageProps, "classes"> = {
   onRefresh: () => undefined,
 };
 
-storiesOf("Views / Error page", module)
+storiesOf("Error / Error page", module)
   .addDecorator(Decorator)
   .add("default", () => (
     <AppStateContext.Provider value={initialAppStateFixture}>

src/components/FileUploadField/FileUploadField.stories.tsx

@@ -1,68 +0,0 @@
-import CardDecorator from "@saleor/storybook/CardDecorator";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React, { useState } from "react";
-
-import FileUploadField, { FileUploadFieldProps } from "./FileUploadField";
-import * as fixtures from "./fixtures";
-
-const props: FileUploadFieldProps = {
-  disabled: false,
-  file: { label: undefined, value: undefined },
-  inputProps: {
-    name: "country",
-    placeholder: "Select country",
-  },
-  loading: false,
-  onFileDelete: () => undefined,
-  onFileUpload: () => undefined,
-};
-
-const InteractiveStory: React.FC = () => {
-  const [file, setFile] = useState<File>();
-
-  return (
-    <FileUploadField
-      disabled={false}
-      loading={false}
-      file={{
-        label: file?.name,
-        value: file?.name,
-      }}
-      onFileUpload={file => setFile(file)}
-      onFileDelete={() => setFile(null)}
-    />
-  );
-};
-
-storiesOf("Generics / File upload field", module)
-  .addDecorator(CardDecorator)
-  .addDecorator(Decorator)
-  .add("default", () => <FileUploadField {...props} />)
-  .add("with ready to upload file", () => (
-    <FileUploadField
-      {...props}
-      file={{
-        label: "some_file.png",
-        value: "some_file.png",
-      }}
-    />
-  ))
-  .add("with uploaded file", () => (
-    <FileUploadField
-      {...props}
-      file={{
-        file: fixtures.UPLOADED_FILE,
-        label: "some_file_with_link.png",
-        value: "some_file_with_link.png",
-      }}
-    />
-  ))
-  .add("with error", () => (
-    <FileUploadField
-      {...props}
-      error={true}
-      helperText="Something went wrong"
-    />
-  ))
-  .add("interactive", () => <InteractiveStory />);

src/components/LinkChoice/LinkChoice.stories.tsx

@@ -1,26 +0,0 @@
-import { countries } from "@saleor/fixtures";
-import CardDecorator from "@saleor/storybook/CardDecorator";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import Form from "../Form";
-import LinkChoice, { LinkChoiceProps } from "./LinkChoice";
-
-const suggestions = countries.map(c => ({ label: c.name, value: c.code }));
-
-const props: Omit<LinkChoiceProps, "value" | "onChange"> = {
-  choices: suggestions.slice(0, 10),
-  name: "country",
-};
-
-storiesOf("Generics / Link with choices", module)
-  .addDecorator(CardDecorator)
-  .addDecorator(Decorator)
-  .add("default", () => (
-    <Form initial={{ country: suggestions[1].value }}>
-      {({ change, data }) => (
-        <LinkChoice {...props} value={data.country} onChange={change} />
-      )}
-    </Form>
-  ));

src/components/Metadata/Metadata.stories.tsx

@@ -1,19 +0,0 @@
-import useForm from "@saleor/hooks/useForm";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import { props } from "./fixtures";
-import Metadata from "./Metadata";
-
-const InteractiveStory: React.FC = () => {
-  const { change, data } = useForm(props.data, () => undefined);
-
-  return <Metadata data={data} onChange={change} />;
-};
-
-storiesOf("Generics / Metadata", module)
-  .addDecorator(Decorator)
-  .add("default", () => <Metadata {...props} />)
-  .add("loading", () => <Metadata {...props} data={undefined} />)
-  .add("interactive", () => <InteractiveStory />);

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.stories.tsx

@@ -1,88 +0,0 @@
-import { countries } from "@saleor/fixtures";
-import useMultiAutocomplete from "@saleor/hooks/useMultiAutocomplete";
-import CardDecorator from "@saleor/storybook/CardDecorator";
-import Decorator from "@saleor/storybook/Decorator";
-import { ChoiceProvider } from "@saleor/storybook/mock";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import MultiAutocompleteSelectField, {
-  MultiAutocompleteSelectFieldProps,
-} from "./MultiAutocompleteSelectField";
-import MultiAutocompleteSelectFieldContent, {
-  MultiAutocompleteSelectFieldContentProps,
-} from "./MultiAutocompleteSelectFieldContent";
-
-const suggestions = countries.map(c => ({ label: c.name, value: c.code }));
-
-const props: MultiAutocompleteSelectFieldProps = {
-  choices: undefined,
-  displayValues: [],
-  label: "Country",
-  loading: false,
-  name: "country",
-  onChange: () => undefined,
-  placeholder: "Select country",
-  value: undefined,
-};
-
-const Story: React.FC<Partial<
-  MultiAutocompleteSelectFieldProps & {
-    enableLoadMore: boolean;
-  }
->> = ({ enableLoadMore, ...rest }) => {
-  const { change, data: countries } = useMultiAutocomplete([suggestions[0]]);
-
-  return (
-    <ChoiceProvider choices={suggestions}>
-      {({ choices, fetchChoices, onFetchMore, hasMore, loading }) => (
-        <MultiAutocompleteSelectField
-          {...props}
-          displayValues={countries}
-          choices={choices}
-          fetchChoices={fetchChoices}
-          helperText={`Value: ${countries
-            .map(country => country.value)
-            .join(", ")}`}
-          onChange={event => change(event, choices)}
-          value={countries.map(country => country.value)}
-          loading={loading}
-          hasMore={enableLoadMore ? hasMore : false}
-          onFetchMore={enableLoadMore ? onFetchMore : undefined}
-          {...rest}
-        />
-      )}
-    </ChoiceProvider>
-  );
-};
-
-const contentProps: MultiAutocompleteSelectFieldContentProps = {
-  choices: suggestions.slice(0, 10),
-  displayCustomValue: false,
-  displayValues: [suggestions[0]],
-  getItemProps: () => undefined,
-  hasMore: false,
-  highlightedIndex: 0,
-  inputValue: suggestions[0].label,
-  loading: false,
-  onFetchMore: () => undefined,
-};
-
-storiesOf("Generics / Multiple select with autocomplete", module)
-  .addDecorator(CardDecorator)
-  .addDecorator(Decorator)
-  .add("default", () => (
-    <MultiAutocompleteSelectFieldContent {...contentProps} />
-  ))
-  .add("can load more", () => (
-    <MultiAutocompleteSelectFieldContent {...contentProps} hasMore={true} />
-  ))
-  .add("no data", () => (
-    <MultiAutocompleteSelectFieldContent {...contentProps} choices={[]} />
-  ))
-  .add("interactive", () => <Story />)
-  .add("interactive with custom option", () => (
-    <Story allowCustomValues={true} />
-  ))
-  .add("interactive with load more", () => <Story enableLoadMore={true} />)
-  .add("interactive with error", () => <Story error={true} />);

src/components/NavigatorButton/NavigatorButton.stories.tsx

@@ -1,12 +0,0 @@
-import CardDecorator from "@saleor/storybook/CardDecorator";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import NavigatorButton from "./NavigatorButton";
-
-storiesOf("Generics / NavigatorButton", module)
-  .addDecorator(Decorator)
-  .addDecorator(CardDecorator)
-  .add("mac", () => <NavigatorButton isMac={true} />)
-  .add("other", () => <NavigatorButton isMac={false} />);

src/components/NotFoundPage/NotFoundPage.stories.tsx

@@ -1,9 +1,9 @@
-import NotFoundPage from "@saleor/components/NotFoundPage";
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import Decorator from "../../Decorator";
+import NotFoundPage from "./NotFoundPage";
 
-storiesOf("Views / Not found error page", module)
+storiesOf("Error / Not found", module)
   .addDecorator(Decorator)
   .add("default", () => <NotFoundPage onBack={() => undefined} />);

src/components/PreviewPill/PreviewPill.stories.tsx

@@ -1,9 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import PreviewPill from "./PreviewPill";
-
-storiesOf("Component / Preview Pill", module)
-  .addDecorator(Decorator)
-  .add("default", () => <PreviewPill />);

src/components/RichTextEditor/RichTextEditor.stories.tsx

@@ -1,32 +0,0 @@
-import { OutputData } from "@editorjs/editorjs";
-import RichTextEditor from "@saleor/components/RichTextEditor";
-import CardDecorator from "@saleor/storybook/CardDecorator";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import * as fixtures from "./fixtures.json";
-import { RichTextEditorProps } from "./RichTextEditor";
-import RichTextEditorContent from "./RichTextEditorContent";
-
-export const defaultValue: OutputData = fixtures.richTextEditor;
-
-const props: RichTextEditorProps = {
-  defaultValue,
-  disabled: false,
-  error: false,
-  helperText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-  label: "Content",
-  name: "content",
-  editorRef: null,
-};
-
-storiesOf("Generics / Rich text editor", module)
-  .addDecorator(CardDecorator)
-  .addDecorator(Decorator)
-  .add("default", () => <RichTextEditor {...props} />)
-  .add("disabled", () => <RichTextEditor {...props} disabled={true} />)
-  .add("error", () => <RichTextEditor {...props} error={true} />)
-  .add("static", () => (
-    <RichTextEditorContent {...props} value={defaultValue} />
-  ));

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.stories.tsx

@@ -1,125 +0,0 @@
-import Form from "@saleor/components/Form";
-import { countries } from "@saleor/fixtures";
-import CardDecorator from "@saleor/storybook/CardDecorator";
-import Decorator from "@saleor/storybook/Decorator";
-import { ChoiceProvider } from "@saleor/storybook/mock";
-import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import SingleAutocompleteSelectField, {
-  SingleAutocompleteSelectFieldProps,
-} from "./SingleAutocompleteSelectField";
-import SingleAutocompleteSelectFieldContent, {
-  SingleAutocompleteSelectFieldContentProps,
-} from "./SingleAutocompleteSelectFieldContent";
-
-const suggestions = countries.map(c => ({ label: c.name, value: c.code }));
-
-const props: SingleAutocompleteSelectFieldProps = {
-  choices: undefined,
-  displayValue: undefined,
-  label: "Country",
-  loading: false,
-  name: "country",
-  onChange: () => undefined,
-  placeholder: "Select country",
-  value: suggestions[0].value,
-};
-
-const Story: React.FC<Partial<
-  SingleAutocompleteSelectFieldProps & {
-    enableLoadMore: boolean;
-  }
->> = ({
-  allowCustomValues,
-  emptyOption,
-  enableLoadMore,
-  nakedInput,
-  disabled,
-}) => {
-  const [displayValue, setDisplayValue] = React.useState(suggestions[0].label);
-
-  return (
-    <Form initial={{ country: suggestions[0].value }}>
-      {({ change, data }) => (
-        <ChoiceProvider choices={suggestions}>
-          {({ choices, fetchChoices, onFetchMore, hasMore, loading }) => {
-            const handleSelect = createSingleAutocompleteSelectHandler(
-              change,
-              setDisplayValue,
-              choices,
-            );
-
-            return (
-              <SingleAutocompleteSelectField
-                {...props}
-                displayValue={displayValue}
-                choices={choices}
-                fetchChoices={fetchChoices}
-                helperText={`Value: ${data.country}`}
-                loading={loading}
-                onChange={handleSelect}
-                value={data.country}
-                hasMore={enableLoadMore ? hasMore : false}
-                onFetchMore={enableLoadMore ? onFetchMore : undefined}
-                allowCustomValues={allowCustomValues}
-                emptyOption={emptyOption}
-                nakedInput={nakedInput}
-                disabled={disabled}
-              />
-            );
-          }}
-        </ChoiceProvider>
-      )}
-    </Form>
-  );
-};
-
-const contentProps: SingleAutocompleteSelectFieldContentProps = {
-  add: undefined,
-  choices: suggestions.slice(0, 10),
-  displayCustomValue: false,
-  emptyOption: false,
-  getItemProps: () => undefined,
-  hasMore: false,
-  highlightedIndex: 0,
-  inputValue: suggestions[0].label,
-  isCustomValueSelected: false,
-  loading: false,
-  onFetchMore: () => undefined,
-  selectedItem: suggestions[0].value,
-};
-
-storiesOf("Generics / Select with autocomplete", module)
-  .addDecorator(CardDecorator)
-  .addDecorator(Decorator)
-  .add("default", () => (
-    <SingleAutocompleteSelectFieldContent {...contentProps} />
-  ))
-  .add("with add", () => (
-    <SingleAutocompleteSelectFieldContent
-      {...contentProps}
-      add={{
-        label: "Add New Collection",
-        onClick: () => undefined,
-      }}
-    />
-  ))
-  .add("can load more", () => (
-    <SingleAutocompleteSelectFieldContent {...contentProps} hasMore={true} />
-  ))
-  .add("no data", () => (
-    <SingleAutocompleteSelectFieldContent {...contentProps} choices={[]} />
-  ))
-  .add("naked", () => <Story nakedInput />)
-  .add("naked and disabled", () => <Story nakedInput disabled />)
-  .add("interactive", () => <Story />)
-  .add("interactive with custom option", () => (
-    <Story allowCustomValues={true} />
-  ))
-  .add("interactive with empty option", () => <Story emptyOption={true} />)
-  .add("interactive with load more", () => <Story enableLoadMore={true} />)
-  .add("disabled", () => (
-    <Story enableLoadMore={true} {...contentProps} disabled />
-  ));

src/components/SortableChip/SortableChip.stories.tsx

@@ -1,29 +0,0 @@
-import SortableChip, {
-  SortableChipProps,
-} from "@saleor/components/SortableChip";
-import CardDecorator from "@saleor/storybook/CardDecorator";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-import { SortableContainer } from "react-sortable-hoc";
-
-const Container = SortableContainer(props => props.children);
-
-const props: SortableChipProps = {
-  index: 0,
-  label: "Lorem Ipsum",
-};
-
-storiesOf("Generics / Sortable chip", module)
-  .addDecorator(CardDecorator)
-  .addDecorator(Decorator)
-  .add("default", () => (
-    <Container>
-      <SortableChip {...props} />
-    </Container>
-  ))
-  .add("with x", () => (
-    <Container>
-      <SortableChip {...props} onClose={() => undefined} />
-    </Container>
-  ));

src/components/SortableChipsField/SortableChipsField.stories.tsx

@@ -1,34 +0,0 @@
-import CardDecorator from "@saleor/storybook/CardDecorator";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import SortableChipsField, {
-  SortableChipsFieldProps,
-} from "./SortableChipsField";
-
-const props: SortableChipsFieldProps = {
-  onValueDelete: () => undefined,
-  onValueReorder: () => undefined,
-  values: [
-    { label: "Item 1", value: "item-1" },
-    { label: "Item 2", value: "item-2" },
-    { label: "Item 3", value: "item-3" },
-    { label: "Item 4", value: "item-4" },
-    { label: "Item 5", value: "item-5" },
-    { label: "Item 6", value: "item-6" },
-  ],
-};
-
-storiesOf("Generics / Sortable chips field", module)
-  .addDecorator(CardDecorator)
-  .addDecorator(Decorator)
-  .add("default", () => <SortableChipsField {...props} />)
-  .add("loading", () => <SortableChipsField {...props} loading={true} />)
-  .add("with error", () => (
-    <SortableChipsField
-      {...props}
-      error={true}
-      helperText="Something went wrong"
-    />
-  ));

src/components/TableCellHeader/TableCellHeader.stories.tsx

@@ -1,80 +0,0 @@
-import { Card, TableBody, TableCell, TableHead } from "@material-ui/core";
-import ResponsiveTable from "@saleor/components/ResponsiveTable";
-import TableRowLink from "@saleor/components/TableRowLink";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import Decorator from "../../storybook/Decorator";
-import TableCellHeader, {
-  TableCellHeaderArrowDirection,
-} from "./TableCellHeader";
-
-type Field = "name" | "type";
-interface StoryProps {
-  direction: TableCellHeaderArrowDirection;
-  field?: Field;
-  onHeaderClick?: (field: Field) => void;
-}
-
-const Story: React.FC<StoryProps> = ({
-  direction,
-  field = "name",
-  onHeaderClick = () => undefined,
-}) => (
-  <Card style={{ margin: "auto", width: 400 }}>
-    <ResponsiveTable>
-      <TableHead>
-        <TableRowLink>
-          <TableCellHeader
-            arrowPosition="right"
-            direction={field === "name" ? direction : undefined}
-            onClick={() => onHeaderClick("name")}
-          >
-            Name
-          </TableCellHeader>
-          <TableCellHeader
-            direction={field === "type" ? direction : undefined}
-            onClick={() => onHeaderClick("type")}
-          >
-            Type
-          </TableCellHeader>
-        </TableRowLink>
-      </TableHead>
-      <TableBody>
-        <TableRowLink>
-          <TableCell>Apple Juice</TableCell>
-          <TableCell>Juice</TableCell>
-        </TableRowLink>
-      </TableBody>
-    </ResponsiveTable>
-  </Card>
-);
-const InteractiveStory: React.FC = () => {
-  const [direction, setDirection] = React.useState<
-    TableCellHeaderArrowDirection
-  >("asc");
-  const [field, setField] = React.useState<Field>("name");
-
-  const handleHeaderClick = (selectedField: Field) => {
-    if (field === selectedField) {
-      setDirection(direction === "asc" ? "desc" : "asc");
-    } else {
-      setField(selectedField);
-      setDirection("asc");
-    }
-  };
-
-  return (
-    <Story
-      direction={direction}
-      field={field}
-      onHeaderClick={handleHeaderClick}
-    />
-  );
-};
-
-storiesOf("Generics / Table header", module)
-  .addDecorator(Decorator)
-  .add("ascending", () => <Story direction="asc" />)
-  .add("descending", () => <Story direction="desc" />)
-  .add("interactive", () => <InteractiveStory />);

src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.stories.tsx

@@ -1,40 +0,0 @@
-import CentralPlacementDecorator from "@saleor/storybook/CentralPlacementDecorator";
-import CommonDecorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import * as messages from "../../pageTypes/hooks/usePageTypeDelete/messages";
-import TypeDeleteWarningDialog, {
-  TypeBaseData,
-  TypeDeleteWarningDialogProps,
-} from "./TypeDeleteWarningDialog";
-
-const props: TypeDeleteWarningDialogProps<TypeBaseData> = {
-  ...messages,
-  isOpen: true,
-  onClose: () => undefined,
-  onDelete: () => undefined,
-  typesData: [{ id: "id-1", name: "Interesting Pages" }],
-  isLoading: false,
-  assignedItemsCount: 4,
-  typesToDelete: ["id-1"],
-  viewAssignedItemsUrl: "some-url",
-  deleteButtonState: "default",
-};
-
-storiesOf("TypeDeleteWarningDialog.stories", module)
-  .addDecorator(CommonDecorator)
-  .addDecorator(CentralPlacementDecorator)
-  .add("loading", () => <TypeDeleteWarningDialog {...props} isLoading={true} />)
-  .add("single type no assigned items", () => (
-    <TypeDeleteWarningDialog {...props} assignedItemsCount={0} />
-  ))
-  .add("single type some assigned items", () => (
-    <TypeDeleteWarningDialog {...props} />
-  ))
-  .add("multiple type no assigned items", () => (
-    <TypeDeleteWarningDialog {...props} assignedItemsCount={0} />
-  ))
-  .add("multiple types some assigned items", () => (
-    <TypeDeleteWarningDialog {...props} typesToDelete={["id-1", "id-2"]} />
-  ));

src/configuration/ConfigurationPage.stories.tsx

@@ -1,5 +1,4 @@
 import { createConfigurationMenu } from "@saleor/configuration";
-import ConfigurationPage from "@saleor/configuration/ConfigurationPage";
 import { UserFragment } from "@saleor/graphql";
 import { staffMember } from "@saleor/staff/fixtures";
 import Decorator from "@saleor/storybook/Decorator";
@@ -7,6 +6,8 @@ import { storiesOf } from "@storybook/react";
 import React from "react";
 import { useIntl } from "react-intl";
 
+import ConfigurationPage from "./ConfigurationPage";
+
 const user = {
   __typename: staffMember.__typename,
   avatar: {
@@ -39,7 +40,7 @@ const Story: React.FC<{ user: UserFragment }> = ({ user }) => {
   );
 };
 
-storiesOf("Views / Configuration", module)
+storiesOf("Configuration", module)
   .addDecorator(Decorator)
   .add("default", () => <Story user={user} />)
   .add("partial access", () => (

src/custom-apps/components/TokenDeleteDialog/TokenDeleteDialog.stories.tsx

@@ -1,17 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import TokenDeleteDialog, { TokenDeleteDialogProps } from "./TokenDeleteDialog";
-
-const props: TokenDeleteDialogProps = {
-  confirmButtonState: "default",
-  name: "Slack",
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-};
-
-storiesOf("Views / Apps / Custom app details / Token delete", module)
-  .addDecorator(Decorator)
-  .add("default", () => <TokenDeleteDialog {...props} />);

src/custom-apps/components/WebhookDeleteDialog/WebhookDeleteDialog.stories.tsx

@@ -1,22 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import WebhookDeleteDialog, {
-  WebhookDeleteDialogProps,
-} from "./WebhookDeleteDialog";
-
-const props: WebhookDeleteDialogProps = {
-  confirmButtonState: "default",
-  name: "Magento Importer",
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-};
-
-storiesOf("Views / Apps / Webhooks / Delete webhook", module)
-  .addDecorator(Decorator)
-  .add("default", () => <WebhookDeleteDialog {...props} />)
-  .add("unnamed webhook", () => (
-    <WebhookDeleteDialog {...props} name={undefined} />
-  ));

src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.stories.tsx

@@ -17,7 +17,7 @@ const props: WebhookDetailsPageProps = {
   saveButtonBarState: "default",
   webhook,
 };
-storiesOf("Views / Apps / Webhooks / Webhook details", module)
+storiesOf("Apps / Webhooks / Webhook details", module)
   .addDecorator(Decorator)
   .add("default", () => <WebhookDetailsPage {...props} />)
   .add("undefined", () => <WebhookDetailsPage {...props} webhook={undefined} />)

src/customers/components/CustomerAddressListPage/CustomerAddressListPage.stories.tsx

@@ -1,11 +1,9 @@
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import CustomerAddressListPage, {
-  CustomerAddressListPageProps,
-} from "../../../customers/components/CustomerAddressListPage";
-import { customer } from "../../../customers/fixtures";
-import Decorator from "../../Decorator";
+import { customer } from "../../fixtures";
+import CustomerAddressListPage, { CustomerAddressListPageProps } from ".";
 
 const props: CustomerAddressListPageProps = {
   customer,
@@ -16,7 +14,7 @@ const props: CustomerAddressListPageProps = {
   onSetAsDefault: () => undefined,
 };
 
-storiesOf("Views / Customers / Address Book", module)
+storiesOf("Customers / Address Book", module)
   .addDecorator(Decorator)
   .add("default", () => <CustomerAddressListPage {...props} />)
   .add("loading", () => (

src/customers/components/CustomerCreatePage/CustomerCreatePage.stories.tsx

@@ -1,12 +1,12 @@
 import { AccountErrorCode } from "@saleor/graphql";
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import CustomerCreatePage, {
   CustomerCreatePageFormData,
   CustomerCreatePageProps,
-} from "../../../customers/components/CustomerCreatePage";
-import Decorator from "../../Decorator";
+} from "./CustomerCreatePage";
 
 const props: Omit<CustomerCreatePageProps, "classes"> = {
   countries: [
@@ -19,7 +19,7 @@ const props: Omit<CustomerCreatePageProps, "classes"> = {
   saveButtonBar: "default",
 };
 
-storiesOf("Views / Customers / Create customer", module)
+storiesOf("Customers / Create customer", module)
   .addDecorator(Decorator)
   .add("default", () => <CustomerCreatePage {...props} />)
   .add("loading", () => <CustomerCreatePage {...props} disabled={true} />)

src/customers/components/CustomerDetailsPage/CustomerDetailsPage.stories.tsx

@@ -1,13 +1,13 @@
 import { AccountErrorCode } from "@saleor/graphql";
+import Decorator from "@saleor/storybook/Decorator";
+import { MockedUserProvider } from "@saleor/storybook/MockedUserProvider";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { customer } from "../../fixtures";
 import CustomerDetailsPageComponent, {
   CustomerDetailsPageProps,
-} from "../../../customers/components/CustomerDetailsPage";
-import { customer } from "../../../customers/fixtures";
-import Decorator from "../../Decorator";
-import { MockedUserProvider } from "./MockedUserProvider";
+} from "./CustomerDetailsPage";
 
 const props: Omit<CustomerDetailsPageProps, "classes"> = {
   customerId: "123",
@@ -32,7 +32,7 @@ const CustomerDetailsPage = props => (
   </MockedUserProvider>
 );
 
-storiesOf("Views / Customers / Customer details", module)
+storiesOf("Customers / Customer details", module)
   .addDecorator(Decorator)
   .add("default", () => <CustomerDetailsPage {...props} />)
   .add("loading", () => (

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

@@ -1,12 +1,3 @@
-import { CustomerListUrlSortField } from "@saleor/customers/urls";
-import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import CustomerListPageComponent, {
-  CustomerListPageProps,
-} from "../../../customers/components/CustomerListPage";
-import { customerList } from "../../../customers/fixtures";
 import {
   filterPageProps,
   listActionsProps,
@@ -14,9 +5,18 @@ import {
   searchPageProps,
   sortPageProps,
   tabPageProps,
-} from "../../../fixtures";
-import Decorator from "../../Decorator";
-import { MockedUserProvider } from "./MockedUserProvider";
+} from "@saleor/fixtures";
+import Decorator from "@saleor/storybook/Decorator";
+import { MockedUserProvider } from "@saleor/storybook/MockedUserProvider";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import { customerList } from "../../fixtures";
+import { CustomerListUrlSortField } from "../../urls";
+import CustomerListPageComponent, {
+  CustomerListPageProps,
+} from "./CustomerListPage";
 
 const props: CustomerListPageProps = {
   ...filterPageProps,
@@ -55,7 +55,7 @@ const CustomerListPage = props => (
   </MockedUserProvider>
 );
 
-storiesOf("Views / Customers / Customer list", module)
+storiesOf("Customers / Customer list", module)
   .addDecorator(Decorator)
   .addDecorator(PaginatorContextDecorator)
   .add("default", () => <CustomerListPage {...props} />)

src/discounts/components/SaleCreatePage/SaleCreatePage.stories.tsx

@@ -1,13 +1,11 @@
 import { channelsList } from "@saleor/channels/fixtures";
 import { createSaleChannels } from "@saleor/channels/utils";
 import { DiscountErrorCode } from "@saleor/graphql";
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import SaleCreatePage, {
-  SaleCreatePageProps,
-} from "../../../discounts/components/SaleCreatePage";
-import Decorator from "../../Decorator";
+import SaleCreatePage, { SaleCreatePageProps } from "./SaleCreatePage";
 
 const channels = createSaleChannels(channelsList);
 
@@ -23,7 +21,7 @@ const props: SaleCreatePageProps = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Views / Discounts / Sale create", module)
+storiesOf("Discounts / Sale create", module)
   .addDecorator(Decorator)
   .add("default", () => <SaleCreatePage {...props} />)
   .add("loading", () => <SaleCreatePage {...props} disabled={true} />)

src/discounts/components/SaleDetailsPage/SaleDetailsPage.stories.tsx

@@ -1,6 +1,9 @@
 import { channelsList } from "@saleor/channels/fixtures";
 import { createSaleChannels } from "@saleor/channels/utils";
+import { sale } from "@saleor/discounts/fixtures";
+import { listActionsProps } from "@saleor/fixtures";
 import { DiscountErrorCode } from "@saleor/graphql";
+import Decorator from "@saleor/storybook/Decorator";
 import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
@@ -8,10 +11,7 @@ import React from "react";
 import SaleDetailsPage, {
   SaleDetailsPageProps,
   SaleDetailsPageTab,
-} from "../../../discounts/components/SaleDetailsPage";
-import { sale } from "../../../discounts/fixtures";
-import { listActionsProps } from "../../../fixtures";
-import Decorator from "../../Decorator";
+} from "./SaleDetailsPage";
 
 const channels = createSaleChannels(channelsList);
 
@@ -50,7 +50,7 @@ const props: SaleDetailsPageProps = {
   ...listActionsProps,
 };
 
-storiesOf("Views / Discounts / Sale details", module)
+storiesOf(" Discounts / Sale details", module)
   .addDecorator(Decorator)
   .addDecorator(PaginatorContextDecorator)
   .add("default", () => <SaleDetailsPage {...props} />)

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

@@ -1,21 +1,19 @@
+import { saleList } from "@saleor/discounts/fixtures";
 import { SaleListUrlSortField } from "@saleor/discounts/urls";
-import { DiscountStatusEnum, DiscountValueTypeEnum } from "@saleor/graphql";
-import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import SaleListPage, {
-  SaleListPageProps,
-} from "../../../discounts/components/SaleListPage";
-import { saleList } from "../../../discounts/fixtures";
 import {
   filterPageProps,
   listActionsProps,
   pageListProps,
   sortPageProps,
   tabPageProps,
-} from "../../../fixtures";
-import Decorator from "../../Decorator";
+} from "@saleor/fixtures";
+import { DiscountStatusEnum, DiscountValueTypeEnum } from "@saleor/graphql";
+import Decorator from "@saleor/storybook/Decorator";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import SaleListPage, { SaleListPageProps } from "./SaleListPage";
 
 const props: SaleListPageProps = {
   ...listActionsProps,
@@ -58,7 +56,7 @@ const props: SaleListPageProps = {
   },
 };
 
-storiesOf("Views / Discounts / Sale list", module)
+storiesOf("Discounts / Sale list", module)
   .addDecorator(Decorator)
   .addDecorator(PaginatorContextDecorator)
   .add("default", () => <SaleListPage {...props} />)

src/discounts/components/VoucherCreatePage/VoucherCreatePage.stories.tsx

@@ -1,14 +1,14 @@
 import { channelsList } from "@saleor/channels/fixtures";
 import { createVoucherChannels } from "@saleor/channels/utils";
 import { DiscountErrorCode } from "@saleor/graphql";
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import VoucherCreatePage, {
   FormData,
   VoucherCreatePageProps,
-} from "../../../discounts/components/VoucherCreatePage";
-import Decorator from "../../Decorator";
+} from "./VoucherCreatePage";
 
 const channels = createVoucherChannels(channelsList);
 
@@ -23,7 +23,7 @@ const props: VoucherCreatePageProps = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Views / Discounts / Voucher create", module)
+storiesOf("Discounts / Voucher create", module)
   .addDecorator(Decorator)
   .add("default", () => <VoucherCreatePage {...props} />)
   .add("form errors", () => (

src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.stories.tsx

@@ -1,18 +1,18 @@
 import { channelsList } from "@saleor/channels/fixtures";
 import { createChannelsDataWithDiscountPrice } from "@saleor/channels/utils";
+import { listActionsProps, pageListProps } from "@saleor/fixtures";
 import { DiscountErrorCode } from "@saleor/graphql";
+import Decorator from "@saleor/storybook/Decorator";
 import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { voucherDetails } from "../../fixtures";
 import VoucherDetailsPage, {
   VoucherDetailsPageFormData,
   VoucherDetailsPageProps,
   VoucherDetailsPageTab,
-} from "../../../discounts/components/VoucherDetailsPage";
-import { voucherDetails } from "../../../discounts/fixtures";
-import { listActionsProps, pageListProps } from "../../../fixtures";
-import Decorator from "../../Decorator";
+} from "./VoucherDetailsPage";
 
 const channels = createChannelsDataWithDiscountPrice(
   voucherDetails,
@@ -54,7 +54,7 @@ const props: VoucherDetailsPageProps = {
   voucher: voucherDetails,
 };
 
-storiesOf("Views / Discounts / Voucher details", module)
+storiesOf("Discounts / Voucher details", module)
   .addDecorator(Decorator)
   .addDecorator(PaginatorContextDecorator)
   .add("default", () => <VoucherDetailsPage {...props} />)

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

@@ -1,13 +1,5 @@
+import { voucherList } from "@saleor/discounts/fixtures";
 import { VoucherListUrlSortField } from "@saleor/discounts/urls";
-import { DiscountStatusEnum, VoucherDiscountType } from "@saleor/graphql";
-import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import VoucherListPage, {
-  VoucherListPageProps,
-} from "../../../discounts/components/VoucherListPage";
-import { voucherList } from "../../../discounts/fixtures";
 import {
   filterPageProps,
   listActionsProps,
@@ -15,8 +7,14 @@ import {
   searchPageProps,
   sortPageProps,
   tabPageProps,
-} from "../../../fixtures";
-import Decorator from "../../Decorator";
+} from "@saleor/fixtures";
+import { DiscountStatusEnum, VoucherDiscountType } from "@saleor/graphql";
+import Decorator from "@saleor/storybook/Decorator";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import VoucherListPage, { VoucherListPageProps } from "./VoucherListPage";
 
 const props: VoucherListPageProps = {
   ...listActionsProps,
@@ -67,7 +65,7 @@ const props: VoucherListPageProps = {
   vouchers: voucherList,
 };
 
-storiesOf("Views / Discounts / Voucher list", module)
+storiesOf("Discounts / Voucher list", module)
   .addDecorator(Decorator)
   .addDecorator(PaginatorContextDecorator)
   .add("default", () => <VoucherListPage {...props} />)

src/fixtures.ts

@@ -510,8 +510,8 @@ export const address = {
   companyName: "",
   country: {
     __typename: "CountryDisplay" as "CountryDisplay",
-    code: "SE",
-    country: "Szwecja",
+    code: "UA",
+    country: "United Arab Emirates",
   },
   countryArea: "",
   firstName: "Elizabeth",

src/home/components/HomePage/HomePage.stories.tsx

@@ -1,16 +1,14 @@
 import placeholderImage from "@assets/images/placeholder60x60.png";
 import { adminUserPermissions } from "@saleor/fixtures";
 import { PermissionEnum } from "@saleor/graphql";
+import { shop as shopFixture } from "@saleor/home/fixtures";
+import Decorator from "@saleor/storybook/Decorator";
+import { MockedUserProvider } from "@saleor/storybook/MockedUserProvider";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import HomePageComponent, {
-  HomePageProps,
-} from "../../../home/components/HomePage";
-import { shop as shopFixture } from "../../../home/fixtures";
-import Decorator from "../../Decorator";
-import { MockedUserProvider } from "../customers/MockedUserProvider";
+import HomePageComponent, { HomePageProps } from "./HomePage";
 
 const shop = shopFixture(placeholderImage);
 
@@ -40,7 +38,7 @@ const HomePage = props => {
   );
 };
 
-storiesOf("Views / HomePage", module)
+storiesOf("Home", module)
   .addDecorator(Decorator)
   .add("default", () => <HomePage {...homePageProps} />)
   .add("loading", () => (

src/navigation/components/MenuDetailsPage/MenuDetailsPage.stories.tsx

@@ -1,12 +1,10 @@
 import { MenuErrorCode } from "@saleor/graphql";
+import { menu } from "@saleor/navigation/fixtures";
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import MenuDetailsPage, {
-  MenuDetailsPageProps,
-} from "../../../navigation/components/MenuDetailsPage";
-import { menu } from "../../../navigation/fixtures";
-import Decorator from "../../Decorator";
+import MenuDetailsPage, { MenuDetailsPageProps } from "./MenuDetailsPage";
 
 const props: MenuDetailsPageProps = {
   disabled: false,
@@ -20,7 +18,7 @@ const props: MenuDetailsPageProps = {
   saveButtonState: "default",
 };
 
-storiesOf("Views / Navigation / Menu details", module)
+storiesOf("Navigation / Menu details", module)
   .addDecorator(Decorator)
   .add("default", () => <MenuDetailsPage {...props} />)
   .add("loading", () => (

src/navigation/components/MenuListPage/MenuListPage.stories.tsx

@@ -1,18 +1,16 @@
-import { MenuListUrlSortField } from "@saleor/navigation/urls";
-import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
 import {
   listActionsProps,
   pageListProps,
   sortPageProps,
-} from "../../../fixtures";
-import MenuListPage, {
-  MenuListPageProps,
-} from "../../../navigation/components/MenuListPage";
-import { menuList } from "../../../navigation/fixtures";
-import Decorator from "../../Decorator";
+} from "@saleor/fixtures";
+import { menuList } from "@saleor/navigation/fixtures";
+import { MenuListUrlSortField } from "@saleor/navigation/urls";
+import Decorator from "@saleor/storybook/Decorator";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import MenuListPage, { MenuListPageProps } from "./MenuListPage";
 
 const props: MenuListPageProps = {
   ...pageListProps.default,
@@ -26,7 +24,7 @@ const props: MenuListPageProps = {
   },
 };
 
-storiesOf("Views / Navigation / Menu list", module)
+storiesOf("Navigation / Menu list", module)
   .addDecorator(Decorator)
   .addDecorator(PaginatorContextDecorator)
   .add("default", () => <MenuListPage {...props} />)

src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.stories.tsx

@@ -1,45 +0,0 @@
-import { MockedProvider, MockedResponse } from "@apollo/client/testing";
-import { allPermissions } from "@saleor/hooks/makeQuery";
-import { fulfillOrderLine, warehouseSearch } from "@saleor/orders/fixtures";
-import { searchWarehouses } from "@saleor/searches/useWarehouseSearch";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import OrderChangeWarehouseDialog, { OrderChangeWarehouseDialogProps } from ".";
-
-const props: OrderChangeWarehouseDialogProps = {
-  open: true,
-  line: fulfillOrderLine("abc"),
-  currentWarehouseId: null,
-  onConfirm: () => null,
-  onClose: () => null,
-};
-
-const mocks: MockedResponse[] = [
-  {
-    request: {
-      query: searchWarehouses,
-      variables: {
-        first: 20,
-        after: null,
-        query: "",
-        ...allPermissions,
-      },
-    },
-    result: {
-      data: { search: warehouseSearch },
-    },
-  },
-];
-
-storiesOf(
-  "Orders / Order details fulfillment warehouse selection modal",
-  module,
-)
-  .addDecorator(Decorator)
-  .add("default", () => (
-    <MockedProvider mocks={mocks}>
-      <OrderChangeWarehouseDialog {...props} />
-    </MockedProvider>
-  ));

src/orders/components/OrderChannelSectionCard/OrderChannelSectionCard.stories.tsx

@@ -1,21 +0,0 @@
-import CardDecorator from "@saleor/storybook/CardDecorator";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import OrderChannelSectionCard, { OrderChannelSectionCardProps } from ".";
-
-const props: OrderChannelSectionCardProps = {
-  channel: {
-    id: "dh87hf34hk8i",
-    name: "International store",
-  },
-};
-
-storiesOf("Orders / Order details channel section", module)
-  .addDecorator(CardDecorator)
-  .addDecorator(Decorator)
-  .add("default", () => <OrderChannelSectionCard {...props} />)
-  .add("loading", () => (
-    <OrderChannelSectionCard {...props} channel={undefined} />
-  ));

src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.stories.tsx

@@ -1,64 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import { countries, order as orderFixture } from "../../fixtures";
-import OrderCustomerAddressesEditDialog, {
-  OrderCustomerAddressesEditDialogProps,
-} from ".";
-import { AddressEditDialogVariant } from "./types";
-
-const order = orderFixture("");
-
-const props: OrderCustomerAddressesEditDialogProps = {
-  confirmButtonState: "default",
-  variant: AddressEditDialogVariant.CHANGE_CUSTOMER,
-  loading: false,
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-  errors: undefined,
-  countries,
-};
-
-storiesOf("Orders / Changing address in order", module)
-  .addDecorator(Decorator)
-  .add("address change when customer is changed", () => (
-    <OrderCustomerAddressesEditDialog
-      {...props}
-      customerAddresses={[
-        order.shippingAddress,
-        { ...order.billingAddress, id: "asdfghjfuunie" },
-      ]}
-    />
-  ))
-  .add("shipping address change", () => (
-    <OrderCustomerAddressesEditDialog
-      {...props}
-      variant={AddressEditDialogVariant.CHANGE_SHIPPING_ADDRESS}
-      customerAddresses={[
-        order.shippingAddress,
-        { ...order.billingAddress, id: "asdfghjfuunie" },
-      ]}
-    />
-  ))
-  .add("billing address change", () => (
-    <OrderCustomerAddressesEditDialog
-      {...props}
-      variant={AddressEditDialogVariant.CHANGE_BILLING_ADDRESS}
-      customerAddresses={[
-        order.shippingAddress,
-        { ...order.billingAddress, id: "asdfghjfuunie" },
-      ]}
-    />
-  ))
-  .add("no customer addresses", () => (
-    <OrderCustomerAddressesEditDialog {...props} customerAddresses={[]} />
-  ))
-  .add("loading", () => (
-    <OrderCustomerAddressesEditDialog
-      {...props}
-      loading={true}
-      confirmButtonState="loading"
-    />
-  ));

src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.stories.tsx

@@ -1,24 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import OrderCustomerChangeDialog, {
-  OrderCustomerChangeDialogProps,
-} from "./OrderCustomerChangeDialog";
-
-const props: OrderCustomerChangeDialogProps = {
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-};
-
-storiesOf("Orders / OrderCustomerChangeDialog", module)
-  .addDecorator(Decorator)
-  .add("default", () => (
-    <OrderCustomerChangeDialog
-      {...props}
-      onClose={() => undefined}
-      onConfirm={() => undefined}
-      open={true}
-    />
-  ));

src/orders/components/OrderDetailsPage/OrderDetailsPage.stories.tsx

@@ -4,17 +4,15 @@ import {
   OrderStatus,
   PaymentChargeStatusEnum,
 } from "@saleor/graphql";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import OrderDetailsPage, {
-  OrderDetailsPageProps,
-} from "../../../orders/components/OrderDetailsPage";
 import {
   order as orderFixture,
   shop as shopFixture,
-} from "../../../orders/fixtures";
-import Decorator from "../../Decorator";
+} from "@saleor/orders/fixtures";
+import Decorator from "@saleor/storybook/Decorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import OrderDetailsPage, { OrderDetailsPageProps } from "./OrderDetailsPage";
 
 const order = orderFixture(placeholderImage);
 
@@ -45,7 +43,7 @@ const props: Omit<OrderDetailsPageProps, "classes"> = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Views / Orders / Order details", module)
+storiesOf("Orders / Order details", module)
   .addDecorator(Decorator)
   .add("default", () => <OrderDetailsPage {...props} />)
   .add("loading", () => <OrderDetailsPage {...props} order={undefined} />)

src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.stories.tsx

@@ -1,67 +0,0 @@
-import { DiscountValueTypeEnum } from "@saleor/graphql";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import OrderDiscountCommonModal, {
-  OrderDiscountCommonModalProps,
-} from "./OrderDiscountCommonModal";
-import { ORDER_DISCOUNT } from "./types";
-
-/* eslint-disable-next-line */
-const emptyFunction = () => {};
-
-const basicProps: OrderDiscountCommonModalProps = {
-  anchorRef: React.createRef(),
-  confirmStatus: "default",
-  dialogPlacement: "top-start",
-  existingDiscount: null,
-  isOpen: true,
-  maxPrice: {
-    __typename: "Money",
-    amount: 15,
-    currency: "PLN",
-  },
-  modalType: ORDER_DISCOUNT,
-  onClose: emptyFunction,
-  onConfirm: emptyFunction,
-  onRemove: emptyFunction,
-  removeStatus: "default",
-};
-
-storiesOf("Orders / Order Discount common modal", module)
-  .addDecorator(Decorator)
-  .add("percentage without existing discount", () => (
-    <OrderDiscountCommonModal {...basicProps} />
-  ))
-  .add("percentage with existing discount", () => (
-    <OrderDiscountCommonModal
-      {...basicProps}
-      existingDiscount={{
-        calculationMode: DiscountValueTypeEnum.PERCENTAGE,
-        reason: "Cause customers want it cheap",
-        value: 25,
-      }}
-    />
-  ))
-  .add("fixed amount with existing discount", () => (
-    <OrderDiscountCommonModal
-      {...basicProps}
-      existingDiscount={{
-        calculationMode: DiscountValueTypeEnum.FIXED,
-        reason: "Cause I say so",
-        value: 5.5,
-      }}
-    />
-  ))
-  .add("fixed amount with loading confirm", () => (
-    <OrderDiscountCommonModal
-      {...basicProps}
-      confirmStatus="loading"
-      existingDiscount={{
-        calculationMode: DiscountValueTypeEnum.FIXED,
-        reason: "Cause I say so",
-        value: 5.5,
-      }}
-    />
-  ));

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

@@ -1,8 +1,3 @@
-import { OrderDraftListUrlSortField } from "@saleor/orders/urls";
-import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
 import {
   filterPageProps,
   limits,
@@ -12,12 +7,17 @@ import {
   searchPageProps,
   sortPageProps,
   tabPageProps,
-} from "../../../fixtures";
+} from "@saleor/fixtures";
+import { OrderDraftListUrlSortField } from "@saleor/orders/urls";
+import Decorator from "@saleor/storybook/Decorator";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import { orders } from "../../fixtures";
 import OrderDraftListPage, {
   OrderDraftListPageProps,
-} from "../../../orders/components/OrderDraftListPage";
-import { orders } from "../../../orders/fixtures";
-import Decorator from "../../Decorator";
+} from "./OrderDraftListPage";
 
 const props: OrderDraftListPageProps = {
   ...listActionsProps,
@@ -48,7 +48,7 @@ const props: OrderDraftListPageProps = {
   },
 };
 
-storiesOf("Views / Orders / Draft order list", module)
+storiesOf("Orders / Draft order list", module)
   .addDecorator(Decorator)
   .addDecorator(PaginatorContextDecorator)
   .add("default", () => <OrderDraftListPage {...props} />)

src/orders/components/OrderDraftPage/OrderDraftPage.stories.tsx

@@ -1,20 +1,18 @@
 import placeholderImage from "@assets/images/placeholder60x60.png";
 import { fetchMoreProps } from "@saleor/fixtures";
 import { OrderErrorCode, OrderErrorFragment } from "@saleor/graphql";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import OrderDraftPageComponent, {
-  OrderDraftPageProps,
-} from "../../../../orders/components/OrderDraftPage";
 import {
   channelUsabilityData,
   clients,
   draftOrder,
-} from "../../../../orders/fixtures";
-import Decorator from "../../../Decorator";
-import { MockedUserProvider } from "../../customers/MockedUserProvider";
-import { getDiscountsProvidersWrapper } from "./utils";
+} from "@saleor/orders/fixtures";
+import Decorator from "@saleor/storybook/Decorator";
+import { MockedUserProvider } from "@saleor/storybook/MockedUserProvider";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import OrderDraftPageComponent, { OrderDraftPageProps } from "./OrderDraftPage";
+import { getDiscountsProvidersWrapper } from "./storybook.utils";
 
 const finalizeErrors: OrderErrorFragment[] = [
   {
@@ -81,7 +79,7 @@ const OrderDraftPage = props => {
   );
 };
 
-storiesOf("Views / Orders / Order draft", module)
+storiesOf("Orders / Order draft", module)
   .addDecorator(Decorator)
   .addDecorator(DiscountsDecorator)
   .add("default", () => <OrderDraftPage {...props} />)

src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx

@@ -18,7 +18,7 @@ const props: OrderFulfillPageProps = {
   closeModal: () => undefined,
 };
 
-storiesOf("Views / Orders / Fulfill order", module)
+storiesOf("Orders / Fulfill order", module)
   .addDecorator(Decorator)
   .add("default", () => <OrderFulfillPage {...props} />)
   .add("loading", () => (

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

@@ -1,13 +1,3 @@
-import { OrderStatusFilter, PaymentChargeStatusEnum } from "@saleor/graphql";
-import OrderListPage, {
-  OrderFilterGiftCard,
-  OrderListPageProps,
-} from "@saleor/orders/components/OrderListPage";
-import { OrderListUrlSortField } from "@saleor/orders/urls";
-import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
 import {
   filterPageProps,
   limits,
@@ -15,9 +5,17 @@ import {
   listActionsProps,
   pageListProps,
   sortPageProps,
-} from "../../../fixtures";
-import { orders } from "../../../orders/fixtures";
-import Decorator from "../../Decorator";
+} from "@saleor/fixtures";
+import { OrderStatusFilter, PaymentChargeStatusEnum } from "@saleor/graphql";
+import { orders } from "@saleor/orders/fixtures";
+import { OrderListUrlSortField } from "@saleor/orders/urls";
+import Decorator from "@saleor/storybook/Decorator";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import { OrderFilterGiftCard } from "./filters";
+import OrderListPage, { OrderListPageProps } from "./OrderListPage";
 
 const props: OrderListPageProps = {
   ...listActionsProps,
@@ -82,7 +80,7 @@ const props: OrderListPageProps = {
   },
 };
 
-storiesOf("Views / Orders / Order list", module)
+storiesOf("Orders / Order list", module)
   .addDecorator(Decorator)
   .addDecorator(PaginatorContextDecorator)
   .add("default", () => <OrderListPage {...props} />)

src/orders/components/OrderRefundPage/OrderRefundPage.stories.tsx

@@ -14,7 +14,7 @@ const props: OrderRefundPageProps = {
   order: orderToRefund(placeholderImage),
 };
 
-storiesOf("Views / Orders / Refund order", module)
+storiesOf("Orders / Refund order", module)
   .addDecorator(Decorator)
   .add("products", () => (
     <OrderRefundPage {...props} defaultType={OrderRefundType.PRODUCTS} />

src/orders/components/OrderSettingsPage/OrderSettingsPage.stories.tsx

@@ -2,11 +2,11 @@ import {
   orderSettings as orderSettingsFixture,
   shopOrderSettings as shopOrderSettingsFixture,
 } from "@saleor/orders/fixtures";
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import Decorator from "../../../storybook/Decorator";
-import OrderSettings, { OrderSettingsPageProps } from ".";
+import OrderSettings, { OrderSettingsPageProps } from "./OrderSettingsPage";
 
 const props: OrderSettingsPageProps = {
   orderSettings: orderSettingsFixture,
@@ -16,7 +16,7 @@ const props: OrderSettingsPageProps = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Views / Orders / Order settings", module)
+storiesOf(" Orders / Order settings", module)
   .addDecorator(Decorator)
   .add("default", () => <OrderSettings {...props} />)
   .add("loading", () => (

src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.stories.tsx

@@ -1,9 +1,11 @@
 import { PageErrorCode } from "@saleor/graphql";
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import Decorator from "../../../storybook/Decorator";
-import PageTypeCreatePage, { PageTypeCreatePageProps } from ".";
+import PageTypeCreatePage, {
+  PageTypeCreatePageProps,
+} from "./PageTypeCreatePage";
 
 const props: Omit<PageTypeCreatePageProps, "classes"> = {
   disabled: false,
@@ -12,7 +14,7 @@ const props: Omit<PageTypeCreatePageProps, "classes"> = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Views / Page types / Create page type", module)
+storiesOf("Page types / Create page type", module)
   .addDecorator(Decorator)
   .add("default", () => <PageTypeCreatePage {...props} />)
   .add("loading", () => <PageTypeCreatePage {...props} disabled={true} />)

src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.stories.tsx

@@ -1,11 +1,13 @@
 import { listActionsProps } from "@saleor/fixtures";
 import { PageErrorCode } from "@saleor/graphql";
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import Decorator from "../../../storybook/Decorator";
 import { pageType } from "../../fixtures";
-import PageTypeDetailsPage, { PageTypeDetailsPageProps } from ".";
+import PageTypeDetailsPage, {
+  PageTypeDetailsPageProps,
+} from "./PageTypeDetailsPage";
 
 const props: Omit<PageTypeDetailsPageProps, "classes"> = {
   attributeList: listActionsProps,
@@ -21,7 +23,7 @@ const props: Omit<PageTypeDetailsPageProps, "classes"> = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Views / Page types / Page type details", module)
+storiesOf("Page types / Page type details", module)
   .addDecorator(Decorator)
   .add("default", () => <PageTypeDetailsPage {...props} />)
   .add("loading", () => (

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

@@ -1,18 +1,18 @@
-import { PageTypeListUrlSortField } from "@saleor/pageTypes/urls";
-import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
 import {
   listActionsProps,
   pageListProps,
   searchPageProps,
   sortPageProps,
   tabPageProps,
-} from "../../../fixtures";
-import Decorator from "../../../storybook/Decorator";
+} from "@saleor/fixtures";
+import { PageTypeListUrlSortField } from "@saleor/pageTypes/urls";
+import Decorator from "@saleor/storybook/Decorator";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
 import { pageTypes } from "../../fixtures";
-import PageTypeListPage, { PageTypeListPageProps } from ".";
+import PageTypeListPage, { PageTypeListPageProps } from "./PageTypeListPage";
 
 const props: PageTypeListPageProps = {
   ...listActionsProps,
@@ -27,7 +27,7 @@ const props: PageTypeListPageProps = {
   pageTypes,
 };
 
-storiesOf("Views / Page types / Page types list", module)
+storiesOf("Page types / Page types list", module)
   .addDecorator(Decorator)
   .addDecorator(PaginatorContextDecorator)
   .add("default", () => <PageTypeListPage {...props} />)

src/pages/components/PageDetailsPage/PageDetailsPage.stories.tsx

@@ -1,14 +1,12 @@
 import { fetchMoreProps } from "@saleor/fixtures";
 import { PageErrorCode } from "@saleor/graphql";
 import { PageData } from "@saleor/pages/components/PageDetailsPage/form";
+import { page } from "@saleor/pages/fixtures";
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import PageDetailsPage, {
-  PageDetailsPageProps,
-} from "../../../pages/components/PageDetailsPage";
-import { page } from "../../../pages/fixtures";
-import Decorator from "../../Decorator";
+import PageDetailsPage, { PageDetailsPageProps } from "./PageDetailsPage";
 
 const props: PageDetailsPageProps = {
   errors: [],
@@ -27,7 +25,7 @@ const props: PageDetailsPageProps = {
   fetchMoreAttributeValues: fetchMoreProps,
 };
 
-storiesOf("Views / Pages / Page details", module)
+storiesOf("Pages / Page details", module)
   .addDecorator(Decorator)
   .add("default", () => <PageDetailsPage {...props} />)
   .add("loading", () => (

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

@@ -1,18 +1,16 @@
-import { PageListUrlSortField } from "@saleor/pages/urls";
-import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
 import {
   listActionsProps,
   pageListProps,
   sortPageProps,
-} from "../../../fixtures";
-import PageListPage, {
-  PageListPageProps,
-} from "../../../pages/components/PageListPage";
-import { pageList } from "../../../pages/fixtures";
-import Decorator from "../../Decorator";
+} from "@saleor/fixtures";
+import { pageList } from "@saleor/pages/fixtures";
+import { PageListUrlSortField } from "@saleor/pages/urls";
+import Decorator from "@saleor/storybook/Decorator";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import PageListPage, { PageListPageProps } from "./PageListPage";
 
 const props: PageListPageProps = {
   ...listActionsProps,
@@ -32,7 +30,7 @@ const props: PageListPageProps = {
   },
 };
 
-storiesOf("Views / Pages / Page list", module)
+storiesOf("Pages / Page list", module)
   .addDecorator(Decorator)
   .addDecorator(PaginatorContextDecorator)
   .add("default", () => <PageListPage {...props} />)

src/pages/components/PageTypePickerDialog/PageTypePickerDialog.stories.tsx

@@ -1,29 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { mapNodeToChoice } from "@saleor/utils/maps";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import { pageTypesList } from "../../fixtures";
-import PageTypePickerDialog, {
-  PageTypePickerDialogProps,
-} from "./PageTypePickerDialog";
-
-const pageTypes = mapNodeToChoice(pageTypesList);
-
-const props: PageTypePickerDialogProps = {
-  pageTypes,
-  confirmButtonState: "default",
-  fetchPageTypes: () => undefined,
-  fetchMorePageTypes: {
-    hasMore: false,
-    loading: false,
-    onFetchMore: () => undefined,
-  },
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-};
-
-storiesOf("Views / Pages / Page type dialog", module)
-  .addDecorator(Decorator)
-  .add("default", () => <PageTypePickerDialog {...props} />);

src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.stories.tsx

@@ -1,41 +0,0 @@
-import AssignMembersDialog, {
-  AssignMembersDialogProps,
-} from "@saleor/permissionGroups/components/AssignMembersDialog";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import { users } from "../../fixtures";
-
-const props: AssignMembersDialogProps = {
-  confirmButtonState: "default",
-  disabled: false,
-  hasMore: true,
-  initialSearch: "",
-  loading: false,
-  onClose: () => undefined,
-  onFetchMore: () => undefined,
-  onSearchChange: () => undefined,
-  onSubmit: () => undefined,
-  open: true,
-  staffMembers: users,
-};
-
-storiesOf(
-  "Views / Permission Groups / Permission Group User Assignment",
-  module,
-)
-  .addDecorator(Decorator)
-  .add("submitting loading", () => (
-    <AssignMembersDialog
-      {...props}
-      confirmButtonState={"loading"}
-      loading={false}
-      disabled={true}
-      staffMembers={[]}
-    />
-  ))
-  .add("search loading", () => (
-    <AssignMembersDialog {...props} loading={true} staffMembers={[]} />
-  ))
-  .add("default", () => <AssignMembersDialog {...props} />);

src/permissionGroups/components/MembersErrorDialog/MembersErrorDialog.stories.tsx

@@ -1,21 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import MembersErrorDialog, {
-  MembersErrorDialogProps,
-} from "./MembersErrorDialog";
-
-const props: MembersErrorDialogProps = {
-  confirmButtonState: "default",
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-};
-
-storiesOf(
-  "Views / Permission Groups / Permission Group Unassign Error Modal",
-  module,
-)
-  .addDecorator(Decorator)
-  .add("Unassign member", () => <MembersErrorDialog {...props} />);

src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.stories.tsx

@@ -1,12 +1,13 @@
 import { permissions } from "@saleor/fixtures";
-import PermissionGroupCreatePage, {
-  PermissionGroupCreatePageProps,
-} from "@saleor/permissionGroups/components/PermissionGroupCreatePage";
-import { errorsOfPermissionGroupCreate } from "@saleor/permissionGroups/fixtures";
 import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { errorsOfPermissionGroupCreate } from "../../fixtures";
+import PermissionGroupCreatePage, {
+  PermissionGroupCreatePageProps,
+} from "./PermissionGroupCreatePage";
+
 const props: PermissionGroupCreatePageProps = {
   disabled: false,
   errors: [],
@@ -15,7 +16,7 @@ const props: PermissionGroupCreatePageProps = {
   saveButtonBarState: undefined,
 };
 
-storiesOf("Views / Permission Groups / Permission Group Create", module)
+storiesOf("Permission Groups / Permission Group Create", module)
   .addDecorator(Decorator)
   .add("default", () => <PermissionGroupCreatePage {...props} />)
   .add("loading", () => (

src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.stories.tsx

@@ -1,42 +0,0 @@
-import {
-  PermissionGroupErrorCode,
-  PermissionGroupErrorFragment,
-} from "@saleor/graphql";
-import PermissionGroupDeleteDialog, {
-  PermissionDeleteDialogProps,
-} from "@saleor/permissionGroups/components/PermissionGroupDeleteDialog";
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-const permissionsError: PermissionGroupErrorFragment = {
-  __typename: "PermissionGroupError",
-  code: PermissionGroupErrorCode.OUT_OF_SCOPE_PERMISSION,
-  field: null,
-  message: "Permission out of scope",
-};
-
-const requiredError: PermissionGroupErrorFragment = {
-  __typename: "PermissionGroupError",
-  code: PermissionGroupErrorCode.REQUIRED,
-  field: null,
-  message: "Permission required",
-};
-
-const props: PermissionDeleteDialogProps = {
-  confirmButtonState: "default",
-  name: "Full Access",
-  onClose: () => undefined,
-  onConfirm: () => undefined,
-  open: true,
-};
-
-storiesOf("Views / Permission Groups / Permission Group Delete", module)
-  .addDecorator(Decorator)
-  .add("remove single", () => <PermissionGroupDeleteDialog {...props} />)
-  .add("Got permissions error", () => (
-    <PermissionGroupDeleteDialog {...props} error={permissionsError} />
-  ))
-  .add("Get random permission group error", () => (
-    <PermissionGroupDeleteDialog {...props} error={requiredError} />
-  ));