Setup chromatic and cleanup storybook (#3588)

.github/workflows/storybook-chromatic.yml

@@ -0,0 +1,35 @@
+name: QA
+
+on: [pull_request]
+
+jobs:
+  chromatic-storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: ".nvmrc"
+      - name: Cache node modules
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-qa-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-qa-${{ env.cache-name }}-
+            ${{ runner.os }}-qa-
+            ${{ runner.os }}-
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@a89b674adf766dbde41ad9ea2b2b60b91188a0f0 # v6.17.4
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/test.yml

@@ -49,7 +49,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
-          node-version-file: '.nvmrc'
+          node-version-file: ".nvmrc"
       - name: Cache node modules
         uses: actions/cache@v2
         env:

.gitignore

@@ -21,6 +21,7 @@
 !.travis*
 !.tx
 !.husky
+!.storybook
 *.log
 *.pyc
 *.mo

.storybook/decorators/CardDecorator.tsx

@@ -1,7 +1,8 @@
 import { Card, CardContent } from "@material-ui/core";
+import { Decorator } from "@storybook/react";
 import React from "react";
 
-const CardDecorator = storyFn => (
+export const CardDecorator: Decorator = Story => (
   <Card
     style={{
       margin: "auto",
@@ -10,7 +11,8 @@ const CardDecorator = storyFn => (
       width: 400,
     }}
   >
-    <CardContent>{storyFn()}</CardContent>
+    <CardContent>
+      <Story />
+    </CardContent>
   </Card>
 );
-export default CardDecorator;

.storybook/decorators/MockedProvidersDecorator.tsx

@@ -1,22 +1,23 @@
 import "@saleor/macaw-ui/next/style";
 
-import { ExternalAppProvider } from "@dashboard/apps/components/ExternalAppContext";
-import { Locale, RawLocaleProvider } from "@dashboard/components/Locale";
-import { FlagsServiceProvider } from "@dashboard/hooks/useFlags/flagsService";
-import { paletteOverrides, themeOverrides } from "@dashboard/themeOverrides";
 import { ThemeProvider as LegacyThemeProvider } from "@saleor/macaw-ui";
 import { ThemeProvider } from "@saleor/macaw-ui/next";
 import React from "react";
 import { IntlProvider } from "react-intl";
 import { BrowserRouter } from "react-router-dom";
+import { ExternalAppProvider } from "../../src/apps/components/ExternalAppContext";
+import { DevModeProvider } from "../../src/components/DevModePanel/DevModeProvider";
+import { Locale, RawLocaleProvider } from "../../src/components/Locale";
+import { FlagsServiceProvider } from "../../src/hooks/useFlags/flagsService";
+import { paletteOverrides, themeOverrides } from "../../src/themeOverrides";
 
+import { Provider as DateProvider } from "../../src/components/Date/DateContext";
+import { TimezoneProvider } from "../../src/components/Timezone";
+import MessageManagerProvider from "../../src/components/messages";
+import { getAppMountUri } from "../../src/config";
 import { ApolloMockedProvider } from "../../testUtils/ApolloMockedProvider";
-import { Provider as DateProvider } from "../components/Date/DateContext";
-import MessageManagerProvider from "../components/messages";
-import { TimezoneProvider } from "../components/Timezone";
-import { getAppMountUri } from "../config";
 
-export const Decorator = storyFn => (
+export const MockedProvidersDecorator: React.FC = ({ children }) => (
   <ApolloMockedProvider>
     <IntlProvider defaultLocale={Locale.EN} locale={Locale.EN}>
       <RawLocaleProvider
@@ -36,13 +37,15 @@ export const Decorator = storyFn => (
                   <ExternalAppProvider>
                     <FlagsServiceProvider>
                       <MessageManagerProvider>
+                        <DevModeProvider>
                           <div
                             style={{
                               padding: 24,
                             }}
                           >
-                          {storyFn()}
+                            {children}
                           </div>
+                        </DevModeProvider>
                       </MessageManagerProvider>
                     </FlagsServiceProvider>
                   </ExternalAppProvider>
@@ -55,4 +58,3 @@ export const Decorator = storyFn => (
     </IntlProvider>
   </ApolloMockedProvider>
 );
-export default Decorator;

.storybook/decorators/PaginatorContextDecorator.tsx

@@ -0,0 +1,10 @@
+import { Decorator } from "@storybook/react";
+import React from "react";
+import { paginatorContextValues } from "../../src/fixtures";
+import { PaginatorContext } from "../../src/hooks/usePaginator";
+
+export const PaginatorContextDecorator: Decorator = Story => (
+  <PaginatorContext.Provider value={paginatorContextValues}>
+    <Story />
+  </PaginatorContext.Provider>
+);

.storybook/decorators/index.ts

@@ -0,0 +1,3 @@
+export * from "./CardDecorator";
+export * from "./MockedProvidersDecorator";
+export * from "./PaginatorContextDecorator";

.storybook/helpers/MockedUserProvider.tsx

@@ -1,7 +1,7 @@
-import { UserContext } from "@dashboard/auth";
-import { adminUserPermissions } from "@dashboard/fixtures";
-import { UserFragment } from "@dashboard/graphql";
 import * as React from "react";
+import { UserContext } from "../../src/auth";
+import { adminUserPermissions } from "../../src/fixtures";
+import { UserFragment } from "../../src/graphql";
 
 export const MockedUserProvider: React.FC<{
   customPermissions?: UserFragment["userPermissions"];

.storybook/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from "./MockedUserProvider";
+export * from "./formError";

.storybook/main.ts

@@ -0,0 +1,42 @@
+import { withoutVitePlugins } from "@storybook/builder-vite";
+import type { StorybookConfig } from "@storybook/react-vite";
+import { resolve } from "path";
+import { mergeConfig } from "vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  features: {
+    storyStoreV7: true,
+  },
+
+  async viteFinal(config) {
+    config.plugins = await withoutVitePlugins(config.plugins, ["vite:html"]);
+
+    return mergeConfig(config, {
+      build: {
+        commonjsOptions: {
+          transformMixedEsModules: true,
+        },
+      },
+      resolve: {
+        alias: {
+          "@material-ui/lab": resolve("./node_modules/@material-ui/lab"),
+        },
+      },
+    });
+  },
+};
+
+export default config;

.storybook/preview-body.html

@@ -1,2 +1,3 @@
+<div id="dashboard-app"></div>
 <div id="portal"></div>
 <div id="modal-root"></div>

.storybook/preview-head.html

@@ -2,6 +2,7 @@
   window.__SALEOR_CONFIG__ = {
     API_URL: "",
     APP_MOUNT_URI: "/",
-    IS_CLOUD_INSTANCE: "",
+    IS_CLOUD_INSTANCE: false,
   };
+  window.process = { cwd: () => "" };
 </script>

.storybook/preview.tsx

@@ -0,0 +1,25 @@
+import "@saleor/macaw-ui/next/style";
+
+import type { Decorator, Preview } from "@storybook/react";
+import React from "react";
+import { MockedProvidersDecorator } from "./decorators";
+
+export const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export const decorators: Decorator[] = [
+  Story => (
+    <MockedProvidersDecorator>
+      <Story />
+    </MockedProvidersDecorator>
+  ),
+];

package.json

@@ -150,6 +150,7 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^27.5.1",
     "babel-loader": "^8.0.6",
+    "babel-plugin-macros": "^3.1.0",
     "ci-info": "^3.7.0",
     "codecov": "^3.7.1",
     "core-js": "^3.7.0",
@@ -159,7 +160,6 @@
     "dotenv": "^10.0.0",
     "env-var": "^7.3.0",
     "esbuild-loader": "^2.18.0",
-    "fork-ts-checker-webpack-plugin": "^3.1.1",
     "graphql-request": "^3.7.0",
     "identity-obj-proxy": "^3.0.0",
     "is-ci": "^3.0.1",
@@ -171,7 +171,6 @@
     "rimraf": "^3.0.0",
     "rollup-plugin-polyfill-node": "^0.11.0",
     "start-server-and-test": "^1.11.0",
-    "tsconfig-paths-webpack-plugin": "^3.2.0",
     "typescript": "^5.0.2",
     "vite": "^3.2.4",
     "vite-plugin-html": "^3.2.0",
@@ -184,7 +183,11 @@
     "workbox-strategies": "^6.1.2"
   },
   "optionalDependencies": {
-    "@storybook/react": "^5.1.9",
+    "@storybook/addon-essentials": "^7.0.8",
+    "@storybook/addon-interactions": "^7.0.8",
+    "@storybook/addon-links": "^7.0.8",
+    "@storybook/react": "^7.0.8",
+    "@storybook/react-vite": "^7.0.8",
     "@swc/core-darwin-arm64": "1.3.40",
     "@swc/core-darwin-x64": "1.3.40",
     "@swc/core-linux-arm-gnueabihf": "1.3.40",
@@ -201,7 +204,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^26.0.14",
     "@types/setup-polly-jest": "^0.5.0",
-    "@types/storybook__react": "^4.0.2",
+    "chromatic": "^6.17.4",
     "cypress": "^12.4.0",
     "cypress-file-upload": "^5.0.8",
     "cypress-mailhog": "^1.3.0",
@@ -234,6 +237,7 @@
     "mochawesome-report-generator": "^6.0.1",
     "prettier": "^2.8.4",
     "setup-polly-jest": "^0.9.1",
+    "storybook": "^7.0.8",
     "ts-jest": "^27.1.5"
   },
   "//@swc/*": "swc packages are required until https://github.com/npm/cli/issues/4828 is fixed",
@@ -294,7 +298,7 @@
     "dev": "vite --host",
     "build": "cross-env NODE_OPTIONS=--max_old_space_size=16384 vite build",
     "preview": "vite preview",
-    "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook -c src/storybook/ -o build/storybook",
+    "build-storybook": "cross-env NODE_OPTIONS=--max_old_space_size=16384 storybook build -o build/storybook",
     "build-types": "node scripts/build-types.js",
     "prebuild": "npm run build-types",
     "check-strict-null-errors": "tsc --noEmit --strictNullChecks | node scripts/count-strict-null-check-errors.js",
@@ -305,7 +309,7 @@
     "heroku-postbuild": "npm run build",
     "serve:lhci": "cross-env NODE_ENV=production npm run server",
     "prestart": "npm run build-types",
-    "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 3000 -c src/storybook/",
+    "storybook": "storybook dev --port 3000",
     "cy:run": "cypress run",
     "cy:run:dashboard": "cypress run --record",
     "cy:open": "cypress open",
@@ -324,7 +328,8 @@
     "predev": "npm run build-types",
     "release": "release-it",
     "prepare": "is-ci || husky install",
-    "dep-status": "depcruise --config .dependency-cruiser.js src"
+    "dep-status": "depcruise --config .dependency-cruiser.js src",
+    "chromatic": "chromatic --exit-zero-on-changes"
   },
   "description": "![Saleor Dashboard](https://user-images.githubusercontent.com/44495184/185379472-2a204c0b-9b7a-4a3e-93c0-2cb85205ed5e.png)"
 }

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

@@ -1,20 +0,0 @@
-import Decorator from "@dashboard/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={null} />);

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

@@ -1,19 +0,0 @@
-import Decorator from "@dashboard/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={null} />);

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

@@ -1,5 +1,3 @@
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { appDetails } from "../../fixtures";
@@ -14,7 +12,10 @@ const props: AppDetailsPageProps = {
   onAppDeleteOpen: () => undefined,
 };
 
-storiesOf("Apps / App details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppDetailsPage {...props} />)
-  .add("loading", () => <AppDetailsPage {...props} loading={true} />);
+export default {
+  title: "Apps / App details",
+};
+
+export const Default = () => <AppDetailsPage {...props} />;
+
+export const Loading = () => <AppDetailsPage {...props} loading={true} />;

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

@@ -1,20 +0,0 @@
-import Decorator from "@dashboard/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

@@ -1,5 +1,3 @@
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { installApp } from "../../fixtures";
@@ -12,7 +10,10 @@ const props: AppInstallPageProps = {
   onSubmit: () => Promise.resolve([]),
 };
 
-storiesOf("Apps / Install App", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppInstallPage {...props} />)
-  .add("loading", () => <AppInstallPage {...props} loading={true} />);
+export default {
+  title: "Apps / Install App",
+};
+
+export const Default = () => <AppInstallPage {...props} />;
+
+export const Loading = () => <AppInstallPage {...props} loading={true} />;

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

@@ -1,6 +1,4 @@
 import { installedAppsList } from "@dashboard/apps/fixtures";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import AppListPage, { AppListPageProps } from "./AppListPage";
@@ -10,14 +8,17 @@ const props: AppListPageProps = {
   installedApps: installedAppsList,
 };
 
-storiesOf("Apps / New Apps / App List", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppListPage {...props} />)
-  .add("empty", () => (
+export default {
+  title: "Apps / New Apps / App List",
+};
+
+export const Default = () => <AppListPage {...props} />;
+
+export const Empty = () => (
   <AppListPage
     {...props}
     installedApps={[]}
     installableMarketplaceApps={[]}
     comingSoonMarketplaceApps={[]}
   />
-  ));
+);

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

@@ -1,5 +1,3 @@
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { appDetails } from "../../fixtures";
@@ -11,9 +9,12 @@ const props: AppPageProps = {
   onError: () => undefined,
 };
 
-storiesOf("Apps / App", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppPage {...props} />)
-  .add("settings", () => (
+export default {
+  title: "Apps / App",
+};
+
+export const Default = () => <AppPage {...props} />;
+
+export const Settings = () => (
   <AppPage {...props} url={appDetails.configurationUrl!} />
-  ));
+);

src/attributes/index.tsx

@@ -20,7 +20,7 @@ import AttributeDetailsComponent from "./views/AttributeDetails";
 import AttributeListComponent from "./views/AttributeList";
 
 const AttributeList: React.FC<RouteComponentProps<{}>> = ({ location }) => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: AttributeListUrlQueryParams = asSortParams(
     qs,
     AttributeListUrlSortField,

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

@@ -1,8 +1,6 @@
-import CardDecorator from "@dashboard/storybook/CardDecorator";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { CardDecorator } from "../../../../.storybook/decorators";
 import LoginPage, { LoginCardProps } from "./LoginPage";
 
 const props: Omit<LoginCardProps, "classes"> = {
@@ -20,13 +18,21 @@ const props: Omit<LoginCardProps, "classes"> = {
   onSubmit: () => undefined,
 };
 
-storiesOf("Authentication / Log in", module)
-  .addDecorator(CardDecorator)
-  .addDecorator(Decorator)
-  .add("default", () => <LoginPage {...props} />)
-  .add("error login", () => <LoginPage {...props} errors={["loginError"]} />)
-  .add("error external login", () => (
+export default {
+  title: "Authentication / Log in",
+  decorators: [CardDecorator],
+};
+
+export const Default = () => <LoginPage {...props} />;
+
+export const ErrorLogin = () => (
+  <LoginPage {...props} errors={["loginError"]} />
+);
+
+export const ErrorExternalLogin = () => (
   <LoginPage {...props} errors={["externalLoginError"]} />
-  ))
-  .add("disabled", () => <LoginPage {...props} disabled={true} />)
-  .add("loading", () => <LoginPage {...props} loading={true} />);
+);
+
+export const Disabled = () => <LoginPage {...props} disabled={true} />;
+
+export const Loading = () => <LoginPage {...props} loading={true} />;

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

@@ -1,21 +1,23 @@
 import { AccountErrorCode } from "@dashboard/graphql";
-import CardDecorator from "@dashboard/storybook//CardDecorator";
-import Decorator from "@dashboard/storybook//Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { CardDecorator } from "../../../../.storybook/decorators";
 import NewPasswordPage from "./NewPasswordPage";
 
-storiesOf("Authentication / Set up a new password", module)
-  .addDecorator(CardDecorator)
-  .addDecorator(Decorator)
-  .add("default", () => (
+export default {
+  title: "Authentication / Set up a new password",
+  decorators: [CardDecorator],
+};
+
+export const Default = () => (
   <NewPasswordPage errors={[]} loading={false} onSubmit={() => undefined} />
-  ))
-  .add("loading", () => (
+);
+
+export const Loading = () => (
   <NewPasswordPage errors={[]} loading={true} onSubmit={() => undefined} />
-  ))
-  .add("too short error", () => (
+);
+
+export const TooShortError = () => (
   <NewPasswordPage
     errors={["password"].map(field => ({
       __typename: "AccountError",
@@ -27,4 +29,4 @@ storiesOf("Authentication / Set up a new password", module)
     loading={false}
     onSubmit={() => undefined}
   />
-  ));
+);

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

@@ -1,9 +1,7 @@
-import CardDecorator from "@dashboard/storybook/CardDecorator";
-import Decorator from "@dashboard/storybook/Decorator";
-import { formError } from "@dashboard/storybook/formError";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { CardDecorator } from "../../../../.storybook/decorators";
+import { formError } from "../../../../.storybook/helpers";
 import ResetPasswordPage, { ResetPasswordPageProps } from "./ResetPasswordPage";
 
 const props: ResetPasswordPageProps = {
@@ -11,11 +9,16 @@ const props: ResetPasswordPageProps = {
   error: undefined,
   onSubmit: () => undefined,
 };
-storiesOf("Authentication / Reset password", module)
-  .addDecorator(CardDecorator)
-  .addDecorator(Decorator)
-  .add("default", () => <ResetPasswordPage {...props} />)
-  .add("loading", () => <ResetPasswordPage {...props} disabled={true} />)
-  .add("error", () => (
+
+export default {
+  title: "Authentication / Reset password",
+  decorators: [CardDecorator],
+};
+
+export const Default = () => <ResetPasswordPage {...props} />;
+
+export const Loading = () => <ResetPasswordPage {...props} disabled={true} />;
+
+export const Error = () => (
   <ResetPasswordPage {...props} error={formError("").message} />
-  ));
+);

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

@@ -1,11 +1,13 @@
-import CardDecorator from "@dashboard/storybook/CardDecorator";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { CardDecorator } from "../../../../.storybook/decorators";
 import ResetPasswordSuccessPage from "./ResetPasswordSuccessPage";
 
-storiesOf("Authentication / Reset password success", module)
-  .addDecorator(CardDecorator)
-  .addDecorator(Decorator)
-  .add("default", () => <ResetPasswordSuccessPage onBack={() => undefined} />);
+export default {
+  title: "Authentication / Reset password success",
+  decorators: [CardDecorator],
+};
+
+export const Default = () => (
+  <ResetPasswordSuccessPage onBack={() => undefined} />
+);

src/auth/index.tsx

@@ -16,7 +16,7 @@ import ResetPassword from "./views/ResetPassword";
 import ResetPasswordSuccess from "./views/ResetPasswordSuccess";
 
 const LoginView: React.FC<RouteComponentProps<any>> = () => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: LoginUrlQueryParams = qs;
 
   return <LoginViewComponent params={params} />;

src/auth/views/NewPassword.tsx

@@ -17,7 +17,9 @@ const NewPassword: React.FC<RouteComponentProps> = ({ location }) => {
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState<SetPasswordData["errors"]>([]);
 
-  const params: NewPasswordUrlQueryParams = parseQs(location.search.substr(1));
+  const params: NewPasswordUrlQueryParams = parseQs(
+    location.search.substr(1),
+  ) as any;
 
   const handleSubmit = async (data: NewPasswordPageFormData) => {
     setLoading(true);

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

@@ -1,6 +1,4 @@
 import { ProductErrorCode } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import CategoryCreatePage, {
@@ -15,13 +13,17 @@ const createProps: CategoryCreatePageProps = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Categories / Create category", module)
-  .addDecorator(Decorator)
-  .add("default", () => <CategoryCreatePage {...createProps} />)
-  .add("When loading", () => (
+export default {
+  title: "Categories / Create category",
+};
+
+export const Default = () => <CategoryCreatePage {...createProps} />;
+
+export const WhenLoading = () => (
   <CategoryCreatePage {...createProps} disabled={true} />
-  ))
-  .add("form errors", () => (
+);
+
+export const FormErrors = () => (
   <CategoryCreatePage
     {...createProps}
     errors={[
@@ -40,4 +42,4 @@ storiesOf("Categories / Create category", module)
       ...err,
     }))}
   />
-  ));
+);

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

@@ -7,11 +7,9 @@ import {
   sortPageProps,
   tabPageProps,
 } from "@dashboard/fixtures";
-import Decorator from "@dashboard/storybook/Decorator";
-import { PaginatorContextDecorator } from "@dashboard/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import CategoryListPage, { CategoryTableProps } from "./CategoryListPage";
 
 const categoryTableProps: CategoryTableProps = {
@@ -28,13 +26,17 @@ const categoryTableProps: CategoryTableProps = {
   },
 };
 
-storiesOf("Categories / Category list", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <CategoryListPage {...categoryTableProps} />)
-  .add("loading", () => (
+export default {
+  title: "Categories / Category list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <CategoryListPage {...categoryTableProps} />;
+
+export const Loading = () => (
   <CategoryListPage {...categoryTableProps} categories={undefined} />
-  ))
-  .add("empty", () => (
+);
+
+export const Empty = () => (
   <CategoryListPage {...categoryTableProps} categories={[]} />
-  ));
+);

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

@@ -2,12 +2,10 @@ import placeholderImage from "@assets/images/placeholder255x255.png";
 import { category as categoryFixture } from "@dashboard/categories/fixtures";
 import { listActionsProps } from "@dashboard/fixtures";
 import { ProductErrorCode } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { PaginatorContextDecorator } from "@dashboard/storybook/PaginatorContextDecorator";
 import { mapEdgesToItems } from "@dashboard/utils/maps";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import CategoryUpdatePage, {
   CategoryPageTab,
   CategoryUpdatePageProps,
@@ -35,17 +33,18 @@ const updateProps: Omit<CategoryUpdatePageProps, "classes"> = {
   ...listActionsProps,
 };
 
-storiesOf("Categories / Update category", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <CategoryUpdatePage {...updateProps} />)
-  .add("products", () => (
-    <CategoryUpdatePage
-      {...updateProps}
-      currentTab={CategoryPageTab.products}
-    />
-  ))
-  .add("no background", () => (
+export default {
+  title: "Categories / Update category",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <CategoryUpdatePage {...updateProps} />;
+
+export const Products = () => (
+  <CategoryUpdatePage {...updateProps} currentTab={CategoryPageTab.products} />
+);
+
+export const NoBackground = () => (
   <CategoryUpdatePage
     {...updateProps}
     category={{
@@ -53,18 +52,21 @@ storiesOf("Categories / Update category", module)
       backgroundImage: null,
     }}
   />
-  ))
-  .add("no subcategories", () => (
+);
+
+export const NoSubcategories = () => (
   <CategoryUpdatePage {...updateProps} subcategories={[]} />
-  ))
-  .add("no products", () => (
+);
+
+export const NoProducts = () => (
   <CategoryUpdatePage
     {...updateProps}
     products={[]}
     currentTab={CategoryPageTab.products}
   />
-  ))
-  .add("loading", () => (
+);
+
+export const Loading = () => (
   <CategoryUpdatePage
     {...updateProps}
     subcategories={undefined}
@@ -72,8 +74,9 @@ storiesOf("Categories / Update category", module)
     products={undefined}
     category={undefined}
   />
-  ))
-  .add("form errors", () => (
+);
+
+export const FormErrors = () => (
   <CategoryUpdatePage
     {...updateProps}
     errors={[
@@ -92,4 +95,4 @@ storiesOf("Categories / Update category", module)
       ...err,
     }))}
   />
-  ));
+);

src/categories/index.tsx

@@ -21,9 +21,9 @@ import CategoryListComponent from "./views/CategoryList";
 interface CategoryDetailsRouteParams {
   id: string;
 }
-const CategoryDetails: React.FC<RouteComponentProps<
-  CategoryDetailsRouteParams
->> = ({ location, match }) => {
+const CategoryDetails: React.FC<
+  RouteComponentProps<CategoryDetailsRouteParams>
+> = ({ location, match }) => {
   const qs = parseQs(location.search.substr(1));
   const params: CategoryUrlQueryParams = qs;
 
@@ -38,16 +38,16 @@ const CategoryDetails: React.FC<RouteComponentProps<
 interface CategoryCreateRouteParams {
   id: string;
 }
-const CategoryCreate: React.FC<RouteComponentProps<
-  CategoryCreateRouteParams
->> = ({ match }) => (
+const CategoryCreate: React.FC<
+  RouteComponentProps<CategoryCreateRouteParams>
+> = ({ match }) => (
   <CategoryCreateView
     parentId={match.params.id ? decodeURIComponent(match.params.id) : undefined}
   />
 );
 
 const CategoryList: React.FC<RouteComponentProps<{}>> = ({ location }) => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: CategoryListUrlQueryParams = {
     ...asSortParams(qs, CategoryListUrlSortField),
   };

src/channels/index.tsx

@@ -29,7 +29,7 @@ const ChannelDetails: React.FC<RouteComponentProps<any>> = ({ match }) => {
 };
 
 const ChannelsList: React.FC<RouteComponentProps> = ({ location }) => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: ChannelsListUrlQueryParams = asSortParams(
     qs,
     ChannelsListUrlSortField,

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

@@ -1,8 +1,6 @@
 import { channel, channelCreateErrors } from "@dashboard/channels/fixtures";
 import { countries } from "@dashboard/fixtures";
 import { ChannelErrorFragment } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import ChannelDetailsPage, {
@@ -69,21 +67,26 @@ const props: ChannelDetailsPageProps<ChannelErrorFragment[]> = {
   },
 };
 
-storiesOf("Channels / Channel details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <ChannelDetailsPage {...props} />)
-  .add("disabled", () => <ChannelDetailsPage {...props} disabled={true} />)
-  .add("loading", () => (
+export default {
+  title: "Channels / Channel details",
+};
+
+export const Default = () => <ChannelDetailsPage {...props} />;
+
+export const Disabled = () => <ChannelDetailsPage {...props} disabled={true} />;
+
+export const Loading = () => (
   <ChannelDetailsPage {...props} saveButtonBarState={"loading"} />
-  ))
-  .add("with data", () => <ChannelDetailsPage {...props} channel={channel} />)
-  .add("without editable currency code", () => (
-    <ChannelDetailsPage
-      {...props}
-      currencyCodes={undefined}
-      channel={channel}
-    />
-  ))
-  .add("with errors", () => (
+);
+
+export const WithData = () => (
+  <ChannelDetailsPage {...props} channel={channel} />
+);
+
+export const WithoutEditableCurrencyCode = () => (
+  <ChannelDetailsPage {...props} currencyCodes={undefined} channel={channel} />
+);
+
+export const WithErrors = () => (
   <ChannelDetailsPage {...props} errors={channelCreateErrors} />
-  ));
+);

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

@@ -1,7 +1,5 @@
 import { channelsList } from "@dashboard/channels/fixtures";
 import { limits, limitsReached } from "@dashboard/fixtures";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import ChannelsListPage, { ChannelsListPageProps } from "./ChannelsListPage";
@@ -12,11 +10,18 @@ const props: ChannelsListPageProps = {
   onRemove: () => undefined,
 };
 
-storiesOf("Channels / Channels list", module)
-  .addDecorator(Decorator)
-  .add("default", () => <ChannelsListPage {...props} />)
-  .add("empty", () => <ChannelsListPage {...props} channelsList={[]} />)
-  .add("no limits", () => <ChannelsListPage {...props} limits={undefined} />)
-  .add("limits reached", () => (
+export default {
+  title: "Channels / Channels list",
+};
+
+export const Default = () => <ChannelsListPage {...props} />;
+
+export const Empty = () => <ChannelsListPage {...props} channelsList={[]} />;
+
+export const NoLimits = () => (
+  <ChannelsListPage {...props} limits={undefined} />
+);
+
+export const LimitsReached = () => (
   <ChannelsListPage {...props} limits={limitsReached} />
-  ));
+);

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

@@ -1,8 +1,6 @@
 import { channelsList } from "@dashboard/channels/fixtures";
 import { createCollectionChannels } from "@dashboard/channels/utils";
 import { CollectionErrorCode } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import CollectionCreatePage, {
@@ -23,11 +21,17 @@ const props: Omit<CollectionCreatePageProps, "classes"> = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Collections / Create collection", module)
-  .addDecorator(Decorator)
-  .add("default", () => <CollectionCreatePage {...props} />)
-  .add("loading", () => <CollectionCreatePage {...props} disabled={true} />)
-  .add("form errors", () => (
+export default {
+  title: "Collections / Create collection",
+};
+
+export const Default = () => <CollectionCreatePage {...props} />;
+
+export const Loading = () => (
+  <CollectionCreatePage {...props} disabled={true} />
+);
+
+export const FormErrors = () => (
   <CollectionCreatePage
     {...props}
     errors={[
@@ -46,4 +50,4 @@ storiesOf("Collections / Create collection", module)
       ...err,
     }))}
   />
-  ));
+);

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

@@ -4,11 +4,9 @@ import { createCollectionChannelsData } from "@dashboard/channels/utils";
 import { collection as collectionFixture } from "@dashboard/collections/fixtures";
 import { listActionsProps, pageListProps } from "@dashboard/fixtures";
 import { CollectionErrorCode } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { PaginatorContextDecorator } from "@dashboard/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import CollectionDetailsPage, {
   CollectionDetailsPageProps,
 } from "./CollectionDetailsPage";
@@ -39,14 +37,18 @@ const props: Omit<CollectionDetailsPageProps, "classes"> = {
   selectedChannelId: "123",
 };
 
-storiesOf("Collections / Collection detailsCollection details", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <CollectionDetailsPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Collections / Collection detailsCollection details",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <CollectionDetailsPage {...props} />;
+
+export const Loading = () => (
   <CollectionDetailsPage {...props} collection={undefined} disabled={true} />
-  ))
-  .add("form errors", () => (
+);
+
+export const FormErrors = () => (
   <CollectionDetailsPage
     {...props}
     errors={[
@@ -65,8 +67,9 @@ storiesOf("Collections / Collection detailsCollection details", module)
       ...err,
     }))}
   />
-  ))
-  .add("no products", () => (
+);
+
+export const NoProducts = () => (
   <CollectionDetailsPage
     {...props}
     collection={{
@@ -77,4 +80,4 @@ storiesOf("Collections / Collection detailsCollection details", module)
       },
     }}
   />
-  ));
+);

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

@@ -1,9 +1,7 @@
 import { CollectionListUrlSortField } from "@dashboard/collections/urls";
-import Decorator from "@dashboard/storybook/Decorator";
-import { PaginatorContextDecorator } from "@dashboard/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import CollectionListPage, {
   CollectionListPageProps,
 } from "../../../collections/components/CollectionListPage";
@@ -34,11 +32,15 @@ const props: CollectionListPageProps = {
   filterOpts: collectionListFilterOpts,
 };
 
-storiesOf("Collections / Collection list", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <CollectionListPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Collections / Collection list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <CollectionListPage {...props} />;
+
+export const Loading = () => (
   <CollectionListPage {...props} collections={undefined} disabled={true} />
-  ))
-  .add("no data", () => <CollectionListPage {...props} collections={[]} />);
+);
+
+export const NoData = () => <CollectionListPage {...props} collections={[]} />;

src/collections/index.tsx

@@ -20,7 +20,7 @@ import CollectionDetailsView from "./views/CollectionDetails";
 import CollectionListView from "./views/CollectionList";
 
 const CollectionList: React.FC<RouteComponentProps<{}>> = ({ location }) => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: CollectionListUrlQueryParams = asSortParams(
     qs,
     CollectionListUrlSortField,
@@ -31,9 +31,9 @@ const CollectionList: React.FC<RouteComponentProps<{}>> = ({ location }) => {
 interface CollectionDetailsRouteProps {
   id: string;
 }
-const CollectionDetails: React.FC<RouteComponentProps<
-  CollectionDetailsRouteProps
->> = ({ location, match }) => {
+const CollectionDetails: React.FC<
+  RouteComponentProps<CollectionDetailsRouteProps>
+> = ({ location, match }) => {
   const qs = parseQs(location.search.substr(1));
   const params: CollectionUrlQueryParams = qs;
   return (

src/components/ErrorPage/ErrorPage.stories.tsx

@@ -3,8 +3,6 @@ import {
   AppStateContextType,
 } from "@dashboard/containers/AppState";
 import { initialAppState } from "@dashboard/containers/AppState/state";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import ErrorPage, { ErrorPageProps } from "./ErrorPage";
@@ -29,15 +27,18 @@ const props: Omit<ErrorPageProps, "classes"> = {
   onRefresh: () => undefined,
 };
 
-storiesOf("Error / Error page", module)
-  .addDecorator(Decorator)
-  .add("default", () => (
+export default {
+  title: "Error / Error page",
+};
+
+export const Default = () => (
   <AppStateContext.Provider value={initialAppStateFixture}>
     <ErrorPage {...props} />
   </AppStateContext.Provider>
-  ))
-  .add("with error id", () => (
+);
+
+export const WithErrorId = () => (
   <AppStateContext.Provider value={errorAppStateFixture}>
     <ErrorPage {...props} />
   </AppStateContext.Provider>
-  ));
+);

src/components/NotFoundPage/NotFoundPage.stories.tsx

@@ -1,9 +1,9 @@
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import NotFoundPage from "./NotFoundPage";
 
-storiesOf("Error / Not found", module)
-  .addDecorator(Decorator)
-  .add("default", () => <NotFoundPage onBack={() => undefined} />);
+export default {
+  title: "Error / Not found",
+};
+
+export const Default = () => <NotFoundPage onBack={() => undefined} />;

src/configuration/ConfigurationPage.stories.tsx

@@ -1,13 +1,15 @@
 import { createConfigurationMenu } from "@dashboard/configuration";
 import { UserFragment } from "@dashboard/graphql";
 import { staffMember } from "@dashboard/staff/fixtures";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import { ConfigurationPage } from "./ConfigurationPage";
 
+export default {
+  title: "Configuration / Configuration",
+};
+
 const user = {
   __typename: staffMember.__typename,
   avatar: {
@@ -40,14 +42,13 @@ const Story: React.FC<{ user: UserFragment }> = ({ user }) => {
   );
 };
 
-storiesOf("Configuration", module)
-  .addDecorator(Decorator)
-  .add("default", () => <Story user={user} />)
-  .add("partial access", () => (
+export const Default = () => <Story user={user} />;
+
+export const PartialAccess = () => (
   <Story
     user={{
       ...user,
       userPermissions: user.userPermissions.slice(2, 6),
     }}
   />
-  ));
+);

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

@@ -1,6 +1,4 @@
 import { WebhookErrorCode } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { webhook } from "../../fixtures";
@@ -18,14 +16,22 @@ const props: WebhookDetailsPageProps = {
   webhook,
   availableEvents: [],
 };
-storiesOf("Apps / Webhooks / Webhook details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <WebhookDetailsPage {...props} />)
-  .add("undefined", () => <WebhookDetailsPage {...props} webhook={undefined} />)
-  .add("loading", () => (
+
+export default {
+  title: "Apps / Webhooks / Webhook details",
+};
+
+export const Default = () => <WebhookDetailsPage {...props} />;
+
+export const Undefined = () => (
+  <WebhookDetailsPage {...props} webhook={undefined} />
+);
+
+export const Loading = () => (
   <WebhookDetailsPage {...props} webhook={undefined} disabled={true} />
-  ))
-  .add("form errors", () => (
+);
+
+export const FormErrors = () => (
   <WebhookDetailsPage
     {...props}
     errors={["name", "targetUrl", "secretKey", null].map(field => ({
@@ -35,4 +41,4 @@ storiesOf("Apps / Webhooks / Webhook details", module)
       message: "Webhook invalid",
     }))}
   />
-  ));
+);

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

@@ -1,5 +1,3 @@
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { customer } from "../../fixtures";
@@ -14,15 +12,19 @@ const props: CustomerAddressListPageProps = {
   onSetAsDefault: () => undefined,
 };
 
-storiesOf("Customers / Address Book", module)
-  .addDecorator(Decorator)
-  .add("default", () => <CustomerAddressListPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Customers / Address Book",
+};
+
+export const Default = () => <CustomerAddressListPage {...props} />;
+
+export const Loading = () => (
   <CustomerAddressListPage {...props} customer={undefined} disabled={true} />
-  ))
-  .add("no data", () => (
+);
+
+export const NoData = () => (
   <CustomerAddressListPage
     {...props}
     customer={{ ...customer, addresses: [] }}
   />
-  ));
+);

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

@@ -1,6 +1,4 @@
 import { AccountErrorCode } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import CustomerCreatePage, {
@@ -19,14 +17,19 @@ const props: Omit<CustomerCreatePageProps, "classes"> = {
   saveButtonBar: "default",
 };
 
-storiesOf("Customers / Create customer", module)
-  .addDecorator(Decorator)
-  .add("default", () => <CustomerCreatePage {...props} />)
-  .add("loading", () => <CustomerCreatePage {...props} disabled={true} />)
-  .add("form errors", () => (
+export default {
+  title: "Customers / Create customer",
+};
+
+export const Default = () => <CustomerCreatePage {...props} />;
+
+export const Loading = () => <CustomerCreatePage {...props} disabled={true} />;
+
+export const FormErrors = () => (
   <CustomerCreatePage
     {...props}
-      errors={([
+    errors={(
+      [
         "city",
         "cityArea",
         "companyName",
@@ -40,7 +43,8 @@ storiesOf("Customers / Create customer", module)
         "postalCode",
         "streetAddress1",
         "streetAddress2",
-      ] as Array<keyof CustomerCreatePageFormData>).map(field => ({
+      ] as Array<keyof CustomerCreatePageFormData>
+    ).map(field => ({
       __typename: "AccountError",
       code: AccountErrorCode.INVALID,
       field,
@@ -48,4 +52,4 @@ storiesOf("Customers / Create customer", module)
       message: "Account invalid error",
     }))}
   />
-  ));
+);

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

@@ -1,9 +1,7 @@
 import { AccountErrorCode } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { MockedUserProvider } from "@dashboard/storybook/MockedUserProvider";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { MockedUserProvider } from "../../../../.storybook/helpers";
 import { customer } from "../../fixtures";
 import CustomerDetailsPageComponent, {
   CustomerDetailsPageProps,
@@ -32,18 +30,24 @@ const CustomerDetailsPage = props => (
   </MockedUserProvider>
 );
 
-storiesOf("Customers / Customer details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <CustomerDetailsPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Customers / Customer details",
+};
+
+export const Default = () => <CustomerDetailsPage {...props} />;
+
+export const Loading = () => (
   <CustomerDetailsPage {...props} customer={undefined} disabled={true} />
-  ))
-  .add("form errors", () => (
+);
+
+export const FormErrors = () => (
   <CustomerDetailsPage
     {...props}
-      errors={(["email", "firstName", "lastName"] as Array<
+    errors={(
+      ["email", "firstName", "lastName"] as Array<
         keyof CustomerDetailsPageErrors
-      >).map(field => ({
+      >
+    ).map(field => ({
       __typename: "AccountError",
       code: AccountErrorCode.INVALID,
       field,
@@ -51,8 +55,9 @@ storiesOf("Customers / Customer details", module)
       message: "Account invalid",
     }))}
   />
-  ))
-  .add("different addresses", () => (
+);
+
+export const DifferentAddresses = () => (
   <CustomerDetailsPage
     {...props}
     customer={{
@@ -63,8 +68,9 @@ storiesOf("Customers / Customer details", module)
       },
     }}
   />
-  ))
-  .add("never logged", () => (
+);
+
+export const NeverLogged = () => (
   <CustomerDetailsPage
     {...props}
     customer={{
@@ -72,8 +78,9 @@ storiesOf("Customers / Customer details", module)
       lastLogin: null,
     }}
   />
-  ))
-  .add("never placed order", () => (
+);
+
+export const NeverPlacedOrder = () => (
   <CustomerDetailsPage
     {...props}
     customer={{
@@ -84,8 +91,9 @@ storiesOf("Customers / Customer details", module)
       },
     }}
   />
-  ))
-  .add("no default billing address", () => (
+);
+
+export const NoDefaultBillingAddress = () => (
   <CustomerDetailsPage
     {...props}
     customer={{
@@ -93,8 +101,9 @@ storiesOf("Customers / Customer details", module)
       defaultBillingAddress: null,
     }}
   />
-  ))
-  .add("no default shipping address", () => (
+);
+
+export const NoDefaultShippingAddress = () => (
   <CustomerDetailsPage
     {...props}
     customer={{
@@ -102,8 +111,9 @@ storiesOf("Customers / Customer details", module)
       defaultShippingAddress: null,
     }}
   />
-  ))
-  .add("no address at all", () => (
+);
+
+export const NoAddressAtAll = () => (
   <CustomerDetailsPage
     {...props}
     customer={{
@@ -112,4 +122,4 @@ storiesOf("Customers / Customer details", module)
       defaultShippingAddress: null,
     }}
   />
-  ));
+);

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

@@ -6,12 +6,10 @@ import {
   sortPageProps,
   tabPageProps,
 } from "@dashboard/fixtures";
-import Decorator from "@dashboard/storybook/Decorator";
-import { MockedUserProvider } from "@dashboard/storybook/MockedUserProvider";
-import { PaginatorContextDecorator } from "@dashboard/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
+import { MockedUserProvider } from "../../../../.storybook/helpers";
 import { customerList } from "../../fixtures";
 import { CustomerListUrlSortField } from "../../urls";
 import CustomerListPageComponent, {
@@ -55,11 +53,15 @@ const CustomerListPage = props => (
   </MockedUserProvider>
 );
 
-storiesOf("Customers / Customer list", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <CustomerListPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Customers / Customer list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <CustomerListPage {...props} />;
+
+export const Loading = () => (
   <CustomerListPage {...props} disabled={true} customers={undefined} />
-  ))
-  .add("no data", () => <CustomerListPage {...props} customers={[]} />);
+);
+
+export const NoData = () => <CustomerListPage {...props} customers={[]} />;

src/customers/index.tsx

@@ -22,7 +22,7 @@ import CustomerDetailsViewComponent from "./views/CustomerDetails";
 import CustomerListViewComponent from "./views/CustomerList";
 
 const CustomerListView: React.FC<RouteComponentProps<{}>> = ({ location }) => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: CustomerListUrlQueryParams = asSortParams(
     qs,
     CustomerListUrlSortField,
@@ -34,9 +34,9 @@ const CustomerListView: React.FC<RouteComponentProps<{}>> = ({ location }) => {
 interface CustomerDetailsRouteParams {
   id: string;
 }
-const CustomerDetailsView: React.FC<RouteComponentProps<
-  CustomerDetailsRouteParams
->> = ({ location, match }) => {
+const CustomerDetailsView: React.FC<
+  RouteComponentProps<CustomerDetailsRouteParams>
+> = ({ location, match }) => {
   const qs = parseQs(location.search.substr(1));
   const params: CustomerUrlQueryParams = qs;
 
@@ -51,9 +51,9 @@ const CustomerDetailsView: React.FC<RouteComponentProps<
 interface CustomerAddressesRouteParams {
   id: string;
 }
-const CustomerAddressesView: React.FC<RouteComponentProps<
-  CustomerAddressesRouteParams
->> = ({ match }) => {
+const CustomerAddressesView: React.FC<
+  RouteComponentProps<CustomerAddressesRouteParams>
+> = ({ match }) => {
   const qs = parseQs(location.search.substr(1));
   const params: CustomerAddressesUrlQueryParams = qs;
 

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

@@ -1,8 +1,6 @@
 import { channelsList } from "@dashboard/channels/fixtures";
 import { createSaleChannels } from "@dashboard/channels/utils";
 import { DiscountErrorCode } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import SaleCreatePage, { SaleCreatePageProps } from "./SaleCreatePage";
@@ -21,11 +19,15 @@ const props: SaleCreatePageProps = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Discounts / Sale create", module)
-  .addDecorator(Decorator)
-  .add("default", () => <SaleCreatePage {...props} />)
-  .add("loading", () => <SaleCreatePage {...props} disabled={true} />)
-  .add("form errors", () => (
+export default {
+  title: "Discounts / Sale create",
+};
+
+export const Default = () => <SaleCreatePage {...props} />;
+
+export const Loading = () => <SaleCreatePage {...props} disabled={true} />;
+
+export const FormErrors = () => (
   <SaleCreatePage
     {...props}
     errors={["name", "startDate", "endDate", "value"].map(field => ({
@@ -36,4 +38,4 @@ storiesOf("Discounts / Sale create", module)
       message: "Discount invalid",
     }))}
   />
-  ));
+);

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

@@ -3,11 +3,9 @@ import { createSaleChannels } from "@dashboard/channels/utils";
 import { sale } from "@dashboard/discounts/fixtures";
 import { listActionsProps } from "@dashboard/fixtures";
 import { DiscountErrorCode } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { PaginatorContextDecorator } from "@dashboard/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import SaleDetailsPage, {
   SaleDetailsPageProps,
   SaleDetailsPageTab,
@@ -50,14 +48,18 @@ const props: SaleDetailsPageProps = {
   ...listActionsProps,
 };
 
-storiesOf(" Discounts / Sale details", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <SaleDetailsPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: " Discounts / Sale details",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <SaleDetailsPage {...props} />;
+
+export const Loading = () => (
   <SaleDetailsPage {...props} sale={undefined} disabled={true} />
-  ))
-  .add("form errors", () => (
+);
+
+export const FormErrors = () => (
   <SaleDetailsPage
     {...props}
     errors={["name", "startDate", "endDate", "value"].map(field => ({
@@ -68,10 +70,12 @@ storiesOf(" Discounts / Sale details", module)
       message: "Discount invalid",
     }))}
   />
-  ))
-  .add("collections", () => (
+);
+
+export const Collections = () => (
   <SaleDetailsPage {...props} activeTab={SaleDetailsPageTab.collections} />
-  ))
-  .add("products", () => (
+);
+
+export const Products = () => (
   <SaleDetailsPage {...props} activeTab={SaleDetailsPageTab.products} />
-  ));
+);

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

@@ -8,11 +8,9 @@ import {
   tabPageProps,
 } from "@dashboard/fixtures";
 import { DiscountStatusEnum, DiscountValueTypeEnum } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { PaginatorContextDecorator } from "@dashboard/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import SaleListPage, { SaleListPageProps } from "./SaleListPage";
 
 const props: SaleListPageProps = {
@@ -56,16 +54,21 @@ const props: SaleListPageProps = {
   },
 };
 
-storiesOf("Discounts / Sale list", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <SaleListPage {...props} />)
-  .add("loading", () => <SaleListPage {...props} sales={undefined} />)
-  .add("no data", () => <SaleListPage {...props} sales={[]} />)
-  .add("no channels", () => (
+export default {
+  title: "Discounts / Sale list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <SaleListPage {...props} />;
+
+export const Loading = () => <SaleListPage {...props} sales={undefined} />;
+
+export const NoData = () => <SaleListPage {...props} sales={[]} />;
+
+export const NoChannels = () => (
   <SaleListPage
     {...props}
     sales={saleList.map(sale => ({ ...sale, channelListings: [] }))}
     selectedChannelId=""
   />
-  ));
+);

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

@@ -1,8 +1,6 @@
 import { channelsList } from "@dashboard/channels/fixtures";
 import { createVoucherChannels } from "@dashboard/channels/utils";
 import { DiscountErrorCode } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import VoucherCreatePage, {
@@ -23,13 +21,17 @@ const props: VoucherCreatePageProps = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Discounts / Voucher create", module)
-  .addDecorator(Decorator)
-  .add("default", () => <VoucherCreatePage {...props} />)
-  .add("form errors", () => (
+export default {
+  title: "Discounts / Voucher create",
+};
+
+export const Default = () => <VoucherCreatePage {...props} />;
+
+export const FormErrors = () => (
   <VoucherCreatePage
     {...props}
-      errors={([
+    errors={(
+      [
         "applyOncePerOrder",
         "code",
         "discountType",
@@ -40,7 +42,8 @@ storiesOf("Discounts / Voucher create", module)
         "type",
         "usageLimit",
         "value",
-      ] as Array<keyof FormData>).map(field => ({
+      ] as Array<keyof FormData>
+    ).map(field => ({
       __typename: "DiscountError",
       channels: [],
       code: DiscountErrorCode.INVALID,
@@ -48,4 +51,4 @@ storiesOf("Discounts / Voucher create", module)
       message: "Discount invalid",
     }))}
   />
-  ));
+);

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

@@ -2,11 +2,9 @@ import { channelsList } from "@dashboard/channels/fixtures";
 import { createChannelsDataWithDiscountPrice } from "@dashboard/channels/utils";
 import { listActionsProps, pageListProps } from "@dashboard/fixtures";
 import { DiscountErrorCode } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { PaginatorContextDecorator } from "@dashboard/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import { voucherDetails } from "../../fixtures";
 import VoucherDetailsPage, {
   VoucherDetailsPageFormData,
@@ -54,17 +52,22 @@ const props: VoucherDetailsPageProps = {
   voucher: voucherDetails,
 };
 
-storiesOf("Discounts / Voucher details", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <VoucherDetailsPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Discounts / Voucher details",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <VoucherDetailsPage {...props} />;
+
+export const Loading = () => (
   <VoucherDetailsPage {...props} disabled={true} voucher={undefined} />
-  ))
-  .add("form errors", () => (
+);
+
+export const Error = () => (
   <VoucherDetailsPage
     {...props}
-      errors={([
+    errors={(
+      [
         "applyOncePerOrder",
         "code",
         "discountType",
@@ -75,7 +78,8 @@ storiesOf("Discounts / Voucher details", module)
         "type",
         "usageLimit",
         "discountValue",
-      ] as Array<keyof VoucherDetailsPageFormData>).map(field => ({
+      ] as Array<keyof VoucherDetailsPageFormData>
+    ).map(field => ({
       __typename: "DiscountError",
       channels: [],
       code: DiscountErrorCode.INVALID,
@@ -83,4 +87,4 @@ storiesOf("Discounts / Voucher details", module)
       message: "Discount invalid",
     }))}
   />
-  ));
+);

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

@@ -9,11 +9,9 @@ import {
   tabPageProps,
 } from "@dashboard/fixtures";
 import { DiscountStatusEnum, VoucherDiscountType } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { PaginatorContextDecorator } from "@dashboard/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import VoucherListPage, { VoucherListPageProps } from "./VoucherListPage";
 
 const props: VoucherListPageProps = {
@@ -65,13 +63,18 @@ const props: VoucherListPageProps = {
   vouchers: voucherList,
 };
 
-storiesOf("Discounts / Voucher list", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <VoucherListPage {...props} />)
-  .add("loading", () => <VoucherListPage {...props} vouchers={undefined} />)
-  .add("no data", () => <VoucherListPage {...props} vouchers={[]} />)
-  .add("no channels", () => (
+export default {
+  title: "Discounts / Voucher list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <VoucherListPage {...props} />;
+
+export const Loading = () => (
+  <VoucherListPage {...props} vouchers={undefined} />
+);
+
+export const NoChannels = () => (
   <VoucherListPage
     {...props}
     selectedChannelId=""
@@ -80,4 +83,4 @@ storiesOf("Discounts / Voucher list", module)
       channelListings: [],
     }))}
   />
-  ));
+);

src/discounts/index.tsx

@@ -30,7 +30,7 @@ import VoucherDetailsViewComponent from "./views/VoucherDetails";
 import VoucherListViewComponent from "./views/VoucherList";
 
 const SaleListView: React.FC<RouteComponentProps<{}>> = ({ location }) => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: SaleListUrlQueryParams = asSortParams(qs, SaleListUrlSortField);
   return <SaleListViewComponent params={params} />;
 };
@@ -58,7 +58,7 @@ const SaleCreateView: React.FC<RouteComponentProps> = ({ location }) => {
 };
 
 const VoucherListView: React.FC<RouteComponentProps<{}>> = ({ location }) => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: VoucherListUrlQueryParams = asSortParams(
     qs,
     VoucherListUrlSortField,

src/giftCards/index.tsx

@@ -31,7 +31,7 @@ const GiftCardUpdatePage: React.FC<RouteComponentProps<{ id: string }>> = ({
 };
 
 const GiftCardList: React.FC<RouteComponentProps<any>> = () => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: GiftCardListUrlQueryParams = asSortParams(
     qs,
     GiftCardUrlSortField,

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

@@ -2,12 +2,10 @@ import placeholderImage from "@assets/images/placeholder60x60.png";
 import { adminUserPermissions } from "@dashboard/fixtures";
 import { PermissionEnum } from "@dashboard/graphql";
 import { shop as shopFixture } from "@dashboard/home/fixtures";
-import Decorator from "@dashboard/storybook/Decorator";
-import { MockedUserProvider } from "@dashboard/storybook/MockedUserProvider";
 import { mapEdgesToItems } from "@dashboard/utils/maps";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { MockedUserProvider } from "../../../../.storybook/helpers";
 import HomePageComponent, { HomePageProps } from "./HomePage";
 
 const shop = shopFixture(placeholderImage);
@@ -38,10 +36,13 @@ const HomePage = props => {
   );
 };
 
-storiesOf("Home", module)
-  .addDecorator(Decorator)
-  .add("default", () => <HomePage {...homePageProps} />)
-  .add("loading", () => (
+export default {
+  title: "Home / Home",
+};
+
+export const Default = () => <HomePage {...homePageProps} />;
+
+export const Loading = () => (
   <HomePage
     {...homePageProps}
     activities={undefined}
@@ -53,26 +54,30 @@ storiesOf("Home", module)
     topProducts={undefined}
     userName={undefined}
   />
-  ))
-  .add("no data", () => (
+);
+
+export const NoData = () => (
   <HomePage {...homePageProps} topProducts={[]} activities={[]} />
-  ))
-  .add("no permissions", () => (
+);
+
+export const NoPermissions = () => (
   <HomePage {...homePageProps} customPermissions={[]} />
-  ))
-  .add("product permissions", () => (
+);
+
+export const ProductPermissions = () => (
   <HomePage
     {...homePageProps}
     customPermissions={adminUserPermissions.filter(
       perm => perm.code === PermissionEnum.MANAGE_PRODUCTS,
     )}
   />
-  ))
-  .add("order permissions", () => (
+);
+
+export const OrderPermissions = () => (
   <HomePage
     {...homePageProps}
     customPermissions={adminUserPermissions.filter(
       perm => perm.code === PermissionEnum.MANAGE_ORDERS,
     )}
   />
-  ));
+);

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

@@ -1,7 +1,5 @@
 import { MenuErrorCode } from "@dashboard/graphql";
 import { menu } from "@dashboard/navigation/fixtures";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import MenuDetailsPage, { MenuDetailsPageProps } from "./MenuDetailsPage";
@@ -18,22 +16,17 @@ const props: MenuDetailsPageProps = {
   saveButtonState: "default",
 };
 
-storiesOf("Navigation / Menu details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <MenuDetailsPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Navigation / Menu details",
+};
+
+export const Default = () => <MenuDetailsPage {...props} />;
+
+export const Loading = () => (
   <MenuDetailsPage {...props} disabled={true} menu={undefined} />
-  ))
-  .add("no data", () => (
-    <MenuDetailsPage
-      {...props}
-      menu={{
-        ...props.menu,
-        items: [],
-      }}
-    />
-  ))
-  .add("form errors", () => (
+);
+
+export const FormErrors = () => (
   <MenuDetailsPage
     {...props}
     errors={["name"].map(field => ({
@@ -43,4 +36,4 @@ storiesOf("Navigation / Menu details", module)
       message: "Invalid field",
     }))}
   />
-  ));
+);

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

@@ -5,11 +5,9 @@ import {
 } from "@dashboard/fixtures";
 import { menuList } from "@dashboard/navigation/fixtures";
 import { MenuListUrlSortField } from "@dashboard/navigation/urls";
-import Decorator from "@dashboard/storybook/Decorator";
-import { PaginatorContextDecorator } from "@dashboard/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import MenuListPage, { MenuListPageProps } from "./MenuListPage";
 
 const props: MenuListPageProps = {
@@ -24,11 +22,15 @@ const props: MenuListPageProps = {
   },
 };
 
-storiesOf("Navigation / Menu list", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <MenuListPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Navigation / Menu list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <MenuListPage {...props} />;
+
+export const Loading = () => (
   <MenuListPage {...props} disabled={true} menus={undefined} />
-  ))
-  .add("no data", () => <MenuListPage {...props} menus={[]} />);
+);
+
+export const NoData = () => <MenuListPage {...props} menus={[]} />;

src/navigation/index.tsx

@@ -13,7 +13,7 @@ import MenuDetailsComponent from "./views/MenuDetails";
 import MenuListComponent from "./views/MenuList";
 
 const MenuList: React.FC<RouteComponentProps<{}>> = ({ location }) => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: MenuListUrlQueryParams = asSortParams(qs, MenuListUrlSortField);
 
   return <MenuListComponent params={params} />;

src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx

@@ -46,13 +46,9 @@ export interface OrderChangeWarehouseDialogProps {
   onClose();
 }
 
-export const OrderChangeWarehouseDialog: React.FC<OrderChangeWarehouseDialogProps> = ({
-  open,
-  line,
-  currentWarehouseId,
-  onConfirm,
-  onClose,
-}) => {
+export const OrderChangeWarehouseDialog: React.FC<
+  OrderChangeWarehouseDialogProps
+> = ({ open, line, currentWarehouseId, onConfirm, onClose }) => {
   const classes = useStyles();
   const intl = useIntl();
 
@@ -71,7 +67,11 @@ export const OrderChangeWarehouseDialog: React.FC<OrderChangeWarehouseDialogProp
     }
   }, [currentWarehouseId]);
 
-  const { result: warehousesOpts, loadMore, search } = useWarehouseSearch({
+  const {
+    result: warehousesOpts,
+    loadMore,
+    search,
+  } = useWarehouseSearch({
     variables: {
       after: null,
       first: 20,
@@ -150,7 +150,7 @@ export const OrderChangeWarehouseDialog: React.FC<OrderChangeWarehouseDialogProp
         </DialogContent>
       </ScrollShadow>
 
-      <DialogTable ref={setAnchor}>
+      <DialogTable ref={setAnchor} css>
         {filteredWarehouses ? (
           <RadioGroup
             value={selectedWarehouseId}
@@ -158,10 +158,8 @@ export const OrderChangeWarehouseDialog: React.FC<OrderChangeWarehouseDialogProp
             className={classes.tableBody}
           >
             {filteredWarehouses.map(warehouse => {
-              const lineQuantityInWarehouse = getLineAvailableQuantityInWarehouse(
-                line,
-                warehouse,
-              );
+              const lineQuantityInWarehouse =
+                getLineAvailableQuantityInWarehouse(line, warehouse);
               return (
                 <TableRowLink key={warehouse.id}>
                   <TableCell className={classes.tableCell}>

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

@@ -1,21 +1,14 @@
 import {
   FulfillmentStatus,
-  GiftCardEventsEnum,
-  OrderDetailsFragment,
   OrderStatus,
   PaymentChargeStatusEnum,
 } from "@dashboard/graphql";
 import {
-  grantedRefunds,
   order,
-  ORDER_AMOUNT,
   payments,
   prepareMoney,
   shop,
-  transactions,
 } from "@dashboard/orders/fixtures";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import OrderDetailsPage, { OrderDetailsPageProps } from "./OrderDetailsPage";
@@ -49,9 +42,11 @@ const props: Omit<OrderDetailsPageProps, "classes"> = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Orders / Order details", module)
-  .addDecorator(Decorator)
-  .add("pending", () => (
+export default {
+  title: "Orders / Order details",
+};
+
+export const Pending = () => (
   <OrderDetailsPage
     {...props}
     order={{
@@ -61,8 +56,9 @@ storiesOf("Orders / Order details", module)
       payments: [payments.pending],
     }}
   />
-  ))
-  .add("authorized", () => (
+);
+
+export const Authorized = () => (
   <OrderDetailsPage
     {...props}
     order={{
@@ -72,8 +68,9 @@ storiesOf("Orders / Order details", module)
       payments: [payments.authorized],
     }}
   />
-  ))
-  .add("completed", () => (
+);
+
+export const Completed = () => (
   <OrderDetailsPage
     {...props}
     order={{
@@ -83,8 +80,9 @@ storiesOf("Orders / Order details", module)
       payments: [payments.completed],
     }}
   />
-  ))
-  .add("no payment", () => (
+);
+
+export const NoPayment = () => (
   <OrderDetailsPage
     {...props}
     order={{
@@ -95,8 +93,9 @@ storiesOf("Orders / Order details", module)
       totalAuthorized: prepareMoney(0),
     }}
   />
-  ))
-  .add("refunded", () => (
+);
+
+export const Refunded = () => (
   <OrderDetailsPage
     {...props}
     order={{
@@ -106,8 +105,9 @@ storiesOf("Orders / Order details", module)
       payments: [payments.refunded],
     }}
   />
-  ))
-  .add("partial refund", () => (
+);
+
+export const PartialRefund = () => (
   <OrderDetailsPage
     {...props}
     order={{
@@ -117,8 +117,9 @@ storiesOf("Orders / Order details", module)
       payments: [payments.partialRefund],
     }}
   />
-  ))
-  .add("rejected", () => (
+);
+
+export const Rejected = () => (
   <OrderDetailsPage
     {...props}
     order={{
@@ -128,192 +129,13 @@ storiesOf("Orders / Order details", module)
       payments: [payments.rejected],
     }}
   />
-  ));
+);
 
-storiesOf("Views / Orders / Order details / transactions", module)
-  .addDecorator(Decorator)
-  .add("preauthorized", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        isPaid: false,
-        totalAuthorized: prepareMoney(),
-        totalCharged: prepareMoney(0),
-        paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
-        transactions: transactions.preauthorized,
-      }}
-    />
-  ))
-  .add("pending", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        isPaid: false,
-        paymentStatus: PaymentChargeStatusEnum.PENDING,
-        transactions: transactions.pendingCharge,
-      }}
-    />
-  ))
-  .add("success", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        isPaid: true,
-        totalAuthorized: prepareMoney(0),
-        totalCharged: prepareMoney(),
-        paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED,
-        transactions: transactions.chargeSuccess,
-      }}
-    />
-  ))
-  .add("partial capture", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        isPaid: true,
-        totalAuthorized: prepareMoney(ORDER_AMOUNT - 10),
-        totalCharged: prepareMoney(10),
-        paymentStatus: PaymentChargeStatusEnum.PARTIALLY_CHARGED,
-        transactions: transactions.chargePartial,
-      }}
-    />
-  ))
-  .add("failed", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        isPaid: false,
-        paymentStatus: PaymentChargeStatusEnum.REFUSED,
-        transactions: transactions.chargeFail,
-      }}
-    />
-  ))
-  .add("refund requested", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        isPaid: true,
-        totalAuthorized: prepareMoney(0),
-        totalCharged: prepareMoney(),
-        paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED,
-        transactions: transactions.refundRequested,
-      }}
-    />
-  ))
-  .add("refund granted", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        isPaid: true,
-        grantedRefunds,
-        totalGrantedRefund: prepareMoney(),
-        totalAuthorized: prepareMoney(0),
-        totalCharged: prepareMoney(),
-        paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED,
-        transactions: transactions.chargeSuccess,
-      }}
-    />
-  ))
-  .add("refund completed", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        isPaid: true,
-        grantedRefunds,
-        totalRefunded: prepareMoney(),
-        totalAuthorized: prepareMoney(0),
-        totalCharged: prepareMoney(0),
-        paymentStatus: PaymentChargeStatusEnum.FULLY_REFUNDED,
-        transactions: transactions.refundCompleted,
-      }}
-    />
-  ))
-  .add("partial refund completed", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        isPaid: true,
-        grantedRefunds,
-        totalRefunded: prepareMoney(10),
-        totalAuthorized: prepareMoney(0),
-        totalCharged: prepareMoney(ORDER_AMOUNT - 10),
-        paymentStatus: PaymentChargeStatusEnum.PARTIALLY_REFUNDED,
-        transactions: transactions.refundPartial,
-      }}
-    />
-  ))
-  .add("paid with giftcard", () => (
-    <OrderDetailsPage
-      {...props}
-      order={
-        {
-          ...props.order,
-          isPaid: true,
-          transactions: [],
-          paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED,
-          // gift cards are treated as dicounts
-          total: {
-            net: prepareMoney(0),
-            gross: prepareMoney(0),
-            tax: prepareMoney(0),
-            __typename: "TaxedMoney",
-          },
-          giftCards: [
-            {
-              __typename: "GiftCard",
-              id: "R2lmdENhcmQ6Ng==",
-              last4CodeChars: "43FA",
-              events: [
-                {
-                  __typename: "GiftCardEvent",
-                  id: "R2lmdENhcmRFdmVudDo1",
-                  type: GiftCardEventsEnum.ISSUED,
-                  orderId: null,
-                  date: "2022-09-20T13:00:42.676174+00:00",
-                  balance: {
-                    __typename: "GiftCardEventBalance",
-                    initialBalance: prepareMoney(),
-                    currentBalance: prepareMoney(),
-                    oldInitialBalance: null,
-                    oldCurrentBalance: null,
-                  },
-                },
-                {
-                  __typename: "GiftCardEvent",
-                  id: "R2lmdENhcmRFdmVudDo2",
-                  type: GiftCardEventsEnum.USED_IN_ORDER,
-                  orderId: props.order.id,
-                  date: "2022-09-20T13:04:20.017419+00:00",
-                  balance: {
-                    __typename: "GiftCardEventBalance",
-                    initialBalance: null,
-                    currentBalance: prepareMoney(0),
-                    oldInitialBalance: null,
-                    oldCurrentBalance: prepareMoney(),
-                  },
-                },
-              ],
-            },
-          ],
-        } as OrderDetailsFragment
-      }
-    />
-  ));
+export const Default = () => <OrderDetailsPage {...props} />;
 
-storiesOf("Views / Orders / Order details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <OrderDetailsPage {...props} />)
-  .add("loading", () => <OrderDetailsPage {...props} order={undefined} />)
-  .add("cancelled", () => (
+export const Loading = () => <OrderDetailsPage {...props} order={undefined} />;
+
+export const Cancelled = () => (
   <OrderDetailsPage
     {...props}
     order={{
@@ -325,8 +147,9 @@ storiesOf("Views / Orders / Order details", module)
       status: OrderStatus.CANCELED,
     }}
   />
-  ))
-  .add("fulfilled", () => (
+);
+
+export const Fulfilled = () => (
   <OrderDetailsPage
     {...props}
     order={{
@@ -334,8 +157,9 @@ storiesOf("Views / Orders / Order details", module)
       status: OrderStatus.FULFILLED,
     }}
   />
-  ))
-  .add("partially fulfilled", () => (
+);
+
+export const PartiallyFulfilled = () => (
   <OrderDetailsPage
     {...props}
     order={{
@@ -343,8 +167,9 @@ storiesOf("Views / Orders / Order details", module)
       status: OrderStatus.PARTIALLY_FULFILLED,
     }}
   />
-  ))
-  .add("unfulfilled", () => (
+);
+
+export const Unfulfilled = () => (
   <OrderDetailsPage
     {...props}
     order={{
@@ -352,8 +177,9 @@ storiesOf("Views / Orders / Order details", module)
       status: OrderStatus.UNFULFILLED,
     }}
   />
-  ))
-  .add("no shipping address", () => (
+);
+
+export const NoShippingAddress = () => (
   <OrderDetailsPage
     {...props}
     order={{
@@ -361,8 +187,9 @@ storiesOf("Views / Orders / Order details", module)
       shippingAddress: null,
     }}
   />
-  ))
-  .add("no customer note", () => (
+);
+
+export const NoCustomerNote = () => (
   <OrderDetailsPage
     {...props}
     order={{
@@ -370,4 +197,4 @@ storiesOf("Views / Orders / Order details", module)
       customerNote: "",
     }}
   />
-  ));
+);

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

@@ -0,0 +1,235 @@
+import {
+  GiftCardEventsEnum,
+  OrderDetailsFragment,
+  PaymentChargeStatusEnum,
+} from "@dashboard/graphql";
+import {
+  grantedRefunds,
+  order,
+  ORDER_AMOUNT,
+  prepareMoney,
+  shop,
+  transactions,
+} from "@dashboard/orders/fixtures";
+import React from "react";
+
+import OrderDetailsPage, { OrderDetailsPageProps } from "./OrderDetailsPage";
+
+const props: Omit<OrderDetailsPageProps, "classes"> = {
+  disabled: false,
+  onBillingAddressEdit: undefined,
+  onTransactionAction: () => undefined,
+  onFulfillmentApprove: () => undefined,
+  onFulfillmentCancel: () => undefined,
+  onFulfillmentTrackingNumberUpdate: () => undefined,
+  onInvoiceClick: () => undefined,
+  onInvoiceGenerate: () => undefined,
+  onInvoiceSend: () => undefined,
+  onNoteAdd: undefined,
+  onOrderCancel: undefined,
+  onOrderFulfill: undefined,
+  onOrderReturn: () => undefined,
+  onPaymentCapture: undefined,
+  onMarkAsPaid: undefined,
+  onPaymentVoid: undefined,
+  onPaymentRefund: undefined,
+  onProductClick: undefined,
+  onProfileView: () => undefined,
+  onShippingAddressEdit: undefined,
+  onSubmit: () => undefined,
+  onAddManualTransaction: () => undefined,
+  order: order(null),
+  errors: [],
+  shop,
+  saveButtonBarState: "default",
+};
+
+export default {
+  title: "Orders / Order details / transactions",
+};
+
+export const Preauthorized = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      isPaid: false,
+      totalAuthorized: prepareMoney(),
+      totalCharged: prepareMoney(0),
+      paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
+      transactions: transactions.preauthorized,
+    }}
+  />
+);
+
+export const Pending = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      isPaid: false,
+      paymentStatus: PaymentChargeStatusEnum.PENDING,
+      transactions: transactions.pendingCharge,
+    }}
+  />
+);
+
+export const Success = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      isPaid: true,
+      totalAuthorized: prepareMoney(0),
+      totalCharged: prepareMoney(),
+      paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED,
+      transactions: transactions.chargeSuccess,
+    }}
+  />
+);
+
+export const PartialCapture = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      isPaid: true,
+      totalAuthorized: prepareMoney(ORDER_AMOUNT - 10),
+      totalCharged: prepareMoney(10),
+      paymentStatus: PaymentChargeStatusEnum.PARTIALLY_CHARGED,
+      transactions: transactions.chargePartial,
+    }}
+  />
+);
+
+export const Failed = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      isPaid: false,
+      paymentStatus: PaymentChargeStatusEnum.REFUSED,
+      transactions: transactions.chargeFail,
+    }}
+  />
+);
+
+export const RefundRequested = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      isPaid: true,
+      totalAuthorized: prepareMoney(0),
+      totalCharged: prepareMoney(),
+      paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED,
+      transactions: transactions.refundRequested,
+    }}
+  />
+);
+
+export const RefundGranted = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      isPaid: true,
+      grantedRefunds,
+      totalGrantedRefund: prepareMoney(),
+      totalAuthorized: prepareMoney(0),
+      totalCharged: prepareMoney(),
+      paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED,
+      transactions: transactions.chargeSuccess,
+    }}
+  />
+);
+
+export const RefundCompleted = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      isPaid: true,
+      grantedRefunds,
+      totalRefunded: prepareMoney(),
+      totalAuthorized: prepareMoney(0),
+      totalCharged: prepareMoney(0),
+      paymentStatus: PaymentChargeStatusEnum.FULLY_REFUNDED,
+      transactions: transactions.refundCompleted,
+    }}
+  />
+);
+
+export const PartialRefundCompleted = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      isPaid: true,
+      grantedRefunds,
+      totalRefunded: prepareMoney(10),
+      totalAuthorized: prepareMoney(0),
+      totalCharged: prepareMoney(ORDER_AMOUNT - 10),
+      paymentStatus: PaymentChargeStatusEnum.PARTIALLY_REFUNDED,
+      transactions: transactions.refundPartial,
+    }}
+  />
+);
+
+export const PaidWithGiftcard = () => (
+  <OrderDetailsPage
+    {...props}
+    order={
+      {
+        ...props.order,
+        isPaid: true,
+        transactions: [],
+        paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED,
+        // gift cards are treated as dicounts
+        total: {
+          net: prepareMoney(0),
+          gross: prepareMoney(0),
+          tax: prepareMoney(0),
+          __typename: "TaxedMoney",
+        },
+        giftCards: [
+          {
+            __typename: "GiftCard",
+            id: "R2lmdENhcmQ6Ng==",
+            last4CodeChars: "43FA",
+            events: [
+              {
+                __typename: "GiftCardEvent",
+                id: "R2lmdENhcmRFdmVudDo1",
+                type: GiftCardEventsEnum.ISSUED,
+                orderId: null,
+                date: "2022-09-20T13:00:42.676174+00:00",
+                balance: {
+                  __typename: "GiftCardEventBalance",
+                  initialBalance: prepareMoney(),
+                  currentBalance: prepareMoney(),
+                  oldInitialBalance: null,
+                  oldCurrentBalance: null,
+                },
+              },
+              {
+                __typename: "GiftCardEvent",
+                id: "R2lmdENhcmRFdmVudDo2",
+                type: GiftCardEventsEnum.USED_IN_ORDER,
+                orderId: props.order.id,
+                date: "2022-09-20T13:04:20.017419+00:00",
+                balance: {
+                  __typename: "GiftCardEventBalance",
+                  initialBalance: null,
+                  currentBalance: prepareMoney(0),
+                  oldInitialBalance: null,
+                  oldCurrentBalance: prepareMoney(),
+                },
+              },
+            ],
+          },
+        ],
+      } as OrderDetailsFragment
+    }
+  />
+);

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

@@ -9,11 +9,9 @@ import {
   tabPageProps,
 } from "@dashboard/fixtures";
 import { OrderDraftListUrlSortField } from "@dashboard/orders/urls";
-import Decorator from "@dashboard/storybook/Decorator";
-import { PaginatorContextDecorator } from "@dashboard/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import { orders } from "../../fixtures";
 import OrderDraftListPage, {
   OrderDraftListPageProps,
@@ -48,14 +46,19 @@ const props: OrderDraftListPageProps = {
   },
 };
 
-storiesOf("Orders / Draft order list", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <OrderDraftListPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Orders / Draft order list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <OrderDraftListPage {...props} />;
+
+export const Loading = () => (
   <OrderDraftListPage {...props} disabled orders={undefined} />
-  ))
-  .add("when no data", () => <OrderDraftListPage {...props} orders={[]} />)
-  .add("limits reached", () => (
+);
+
+export const WhenNoData = () => <OrderDraftListPage {...props} orders={[]} />;
+
+export const LimitsReached = () => (
   <OrderDraftListPage {...props} limits={limitsReached} />
-  ));
+);

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

@@ -6,11 +6,9 @@ import {
   clients,
   draftOrder,
 } from "@dashboard/orders/fixtures";
-import Decorator from "@dashboard/storybook/Decorator";
-import { MockedUserProvider } from "@dashboard/storybook/MockedUserProvider";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { MockedUserProvider } from "../../../../.storybook/helpers";
 import OrderDraftPageComponent, { OrderDraftPageProps } from "./OrderDraftPage";
 import { getDiscountsProvidersWrapper } from "./storybook.utils";
 
@@ -79,24 +77,26 @@ const OrderDraftPage = props => {
   );
 };
 
-storiesOf("Orders / Order draft", module)
-  .addDecorator(Decorator)
-  .addDecorator(DiscountsDecorator)
-  .add("default", () => <OrderDraftPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Orders / Order draft",
+  decorators: [DiscountsDecorator],
+};
+
+export const Default = () => <OrderDraftPage {...props} />;
+
+export const Loading = () => (
   <OrderDraftPage
     {...props}
     disabled={true}
     order={undefined}
     channelUsabilityData={undefined}
   />
-  ))
-  .add("without lines", () => (
-    <OrderDraftPage {...props} order={{ ...order, lines: [] }} />
-  ))
-  .add("no user permissions", () => (
+);
+
+export const NoUserPermissions = () => (
   <OrderDraftPage {...props} customPermissions={[]} />
-  ))
-  .add("with errors", () => (
+);
+
+export const WithErrors = () => (
   <OrderDraftPage {...props} errors={finalizeErrors} />
-  ));
+);

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

@@ -1,7 +1,5 @@
 import { OrderErrorCode } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
 import { warehouseList } from "@dashboard/warehouses/fixtures";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { orderToFulfill } from "./fixtures";
@@ -18,13 +16,17 @@ const props: OrderFulfillPageProps = {
   closeModal: () => undefined,
 };
 
-storiesOf("Orders / Fulfill order", module)
-  .addDecorator(Decorator)
-  .add("default", () => <OrderFulfillPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Orders / Fulfill order",
+};
+
+export const Default = () => <OrderFulfillPage {...props} />;
+
+export const Loading = () => (
   <OrderFulfillPage {...props} loading={true} order={undefined} />
-  ))
-  .add("error", () => (
+);
+
+export const Error = () => (
   <OrderFulfillPage
     {...props}
     errors={[
@@ -39,5 +41,6 @@ storiesOf("Orders / Fulfill order", module)
       },
     ]}
   />
-  ))
-  .add("one warehouse", () => <OrderFulfillPage {...props} />);
+);
+
+export const OneWarehouse = () => <OrderFulfillPage {...props} />;

src/orders/components/OrderGrantRefundPage/OrderGrantRefundPage.stories.tsx

@@ -1,7 +1,5 @@
 import placeholderImage from "@assets/images/placeholder60x60.png";
 import { FulfillmentStatus } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import OrderGrantRefundPage, {
@@ -244,14 +242,17 @@ const props: OrderGrantRefundPageProps = {
   onSubmit: data => console.log("onSubmit", data),
 };
 
-storiesOf("Views / Orders / Grant refund order", module)
-  .addDecorator(Decorator)
-  .add("grant refund", () => <OrderGrantRefundPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Orders / Grant refund order",
+};
+
+export const GrantRefund = () => <OrderGrantRefundPage {...props} />;
+
+export const Loading = () => (
   <OrderGrantRefundPage
     submitState="loading"
     order={null}
     loading={true}
     onSubmit={() => undefined}
   />
-  ));
+);

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

@@ -9,11 +9,9 @@ import {
 import { OrderStatusFilter, PaymentChargeStatusEnum } from "@dashboard/graphql";
 import { orders } from "@dashboard/orders/fixtures";
 import { OrderListUrlSortField } from "@dashboard/orders/urls";
-import Decorator from "@dashboard/storybook/Decorator";
-import { PaginatorContextDecorator } from "@dashboard/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import { OrderFilterGiftCard } from "./filters";
 import OrderListPage, { OrderListPageProps } from "./OrderListPage";
 
@@ -86,20 +84,26 @@ const props: OrderListPageProps = {
   onTabUpdate: () => undefined,
 };
 
-storiesOf("Orders / Order list", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <OrderListPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Orders / Order list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <OrderListPage {...props} />;
+
+export const Loading = () => (
   <OrderListPage
     {...props}
     orders={undefined}
     currentTab={undefined}
     disabled={true}
   />
-  ))
-  .add("when no data", () => <OrderListPage {...props} orders={[]} />)
-  .add("no limits", () => <OrderListPage {...props} limits={undefined} />)
-  .add("limits reached", () => (
+);
+
+export const WhenNoData = () => <OrderListPage {...props} orders={[]} />;
+
+export const NoLimits = () => <OrderListPage {...props} limits={undefined} />;
+
+export const LimitsReached = () => (
   <OrderListPage {...props} limits={limitsReached} />
-  ));
+);

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

@@ -1,6 +1,4 @@
 import placeholderImage from "@assets/images/placeholder60x60.png";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { orderToRefund } from "./fixtures";
@@ -14,14 +12,18 @@ const props: OrderRefundPageProps = {
   order: orderToRefund(placeholderImage),
 };
 
-storiesOf("Orders / Refund order", module)
-  .addDecorator(Decorator)
-  .add("products", () => (
+export default {
+  title: "Orders / Refund order",
+};
+
+export const Products = () => (
   <OrderRefundPage {...props} defaultType={OrderRefundType.PRODUCTS} />
-  ))
-  .add("miscellaneous", () => (
+);
+
+export const Miscellaneous = () => (
   <OrderRefundPage {...props} defaultType={OrderRefundType.MISCELLANEOUS} />
-  ))
-  .add("loading", () => (
+);
+
+export const Loading = () => (
   <OrderRefundPage {...props} disabled={true} order={undefined} />
-  ));
+);

src/orders/components/OrderSendRefundPage/OrderSendRefund.stories.tsx

@@ -1,5 +1,3 @@
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { order as orderFixture, prepareMoney } from "../../fixtures";
@@ -13,10 +11,13 @@ const props: OrderSendRefundPageProps = {
   addManualRefundError: undefined,
 };
 
-storiesOf("Views / Orders / Send refund order", module)
-  .addDecorator(Decorator)
-  .add("settled", () => <OrderSendRefund {...props} />)
-  .add("unsettled", () => (
+export default {
+  title: "Orders / Send refund order",
+};
+
+export const Settled = () => <OrderSendRefund {...props} />;
+
+export const Unsettled = () => (
   <OrderSendRefund
     {...props}
     order={{
@@ -25,7 +26,8 @@ storiesOf("Views / Orders / Send refund order", module)
       totalRemainingGrant: prepareMoney(10),
     }}
   />
-  ))
-  .add("loading", () => (
+);
+
+export const Loading = () => (
   <OrderSendRefund {...props} order={null} loading={true} />
-  ));
+);

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

@@ -2,8 +2,6 @@ import {
   orderSettings as orderSettingsFixture,
   shopOrderSettings as shopOrderSettingsFixture,
 } from "@dashboard/orders/fixtures";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import OrderSettings, { OrderSettingsPageProps } from "./OrderSettingsPage";
@@ -16,14 +14,17 @@ const props: OrderSettingsPageProps = {
   saveButtonBarState: "default",
 };
 
-storiesOf(" Orders / Order settings", module)
-  .addDecorator(Decorator)
-  .add("default", () => <OrderSettings {...props} />)
-  .add("loading", () => (
+export default {
+  title: " Orders / Order settings",
+};
+
+export const Default = () => <OrderSettings {...props} />;
+
+export const Loading = () => (
   <OrderSettings
     {...props}
     disabled={true}
     orderSettings={undefined}
     shop={undefined}
   />
-  ));
+);

src/orders/components/OrderTransaction.stories.tsx

@@ -5,8 +5,6 @@ import {
 import OrderTransaction, {
   OrderTransactionProps,
 } from "@dashboard/orders/components/OrderTransaction";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { prepareMoney } from "../fixtures";
@@ -150,7 +148,10 @@ const longAmountProps: OrderTransactionProps = {
   },
 };
 
-storiesOf("Orders / OrderTransaction", module)
-  .addDecorator(Decorator)
-  .add("default", () => <OrderTransaction {...props} />)
-  .add("long amounts", () => <OrderTransaction {...longAmountProps} />);
+export default {
+  title: "Orders / OrderTransaction",
+};
+
+export const Default = () => <OrderTransaction {...props} />;
+
+export const LongAmounts = () => <OrderTransaction {...longAmountProps} />;

src/orders/index.tsx

@@ -36,7 +36,7 @@ import OrderSendRefundComponent from "./views/OrderSendRefund";
 import OrderSettings from "./views/OrderSettings";
 
 const OrderList: React.FC<RouteComponentProps<any>> = ({ location }) => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: OrderListUrlQueryParams = asSortParams(
     qs,
     OrderListUrlSortField,
@@ -46,7 +46,7 @@ const OrderList: React.FC<RouteComponentProps<any>> = ({ location }) => {
   return <OrderListComponent params={params} />;
 };
 const OrderDraftList: React.FC<RouteComponentProps<any>> = ({ location }) => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: OrderDraftListUrlQueryParams = asSortParams(
     qs,
     OrderDraftListUrlSortField,
@@ -61,7 +61,7 @@ const OrderDetails: React.FC<RouteComponentProps<any>> = ({
   location,
   match,
 }) => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: OrderUrlQueryParams = qs;
   const id = match.params.id;
 
@@ -72,7 +72,7 @@ const OrderFulfill: React.FC<RouteComponentProps<any>> = ({
   location,
   match,
 }) => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: OrderFulfillUrlQueryParams = qs;
   return (
     <OrderFulfillComponent

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

@@ -1,6 +1,4 @@
 import { PageErrorCode } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import PageTypeCreatePage, {
@@ -14,11 +12,15 @@ const props: Omit<PageTypeCreatePageProps, "classes"> = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Page types / Create page type", module)
-  .addDecorator(Decorator)
-  .add("default", () => <PageTypeCreatePage {...props} />)
-  .add("loading", () => <PageTypeCreatePage {...props} disabled={true} />)
-  .add("form errors", () => (
+export default {
+  title: "Page types / Create page type",
+};
+
+export const Default = () => <PageTypeCreatePage {...props} />;
+
+export const Loading = () => <PageTypeCreatePage {...props} disabled={true} />;
+
+export const FormErrors = () => (
   <PageTypeCreatePage
     {...props}
     errors={[
@@ -32,4 +34,4 @@ storiesOf("Page types / Create page type", module)
       ...err,
     }))}
   />
-  ));
+);

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

@@ -1,7 +1,5 @@
 import { listActionsProps } from "@dashboard/fixtures";
 import { PageErrorCode } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { pageType } from "../../fixtures";
@@ -23,27 +21,22 @@ const props: Omit<PageTypeDetailsPageProps, "classes"> = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Page types / Page type details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <PageTypeDetailsPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Page types / Page type details",
+};
+
+export const Default = () => <PageTypeDetailsPage {...props} />;
+
+export const Loading = () => (
   <PageTypeDetailsPage
     {...props}
     disabled={true}
     pageTitle={undefined}
     pageType={undefined}
   />
-  ))
-  .add("no attributes", () => (
-    <PageTypeDetailsPage
-      {...props}
-      pageType={{
-        ...pageType,
-        attributes: [],
-      }}
-    />
-  ))
-  .add("form errors", () => (
+);
+
+export const FormErrors = () => (
   <PageTypeDetailsPage
     {...props}
     errors={[
@@ -57,4 +50,4 @@ storiesOf("Page types / Page type details", module)
       ...err,
     }))}
   />
-  ));
+);

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

@@ -6,11 +6,9 @@ import {
   tabPageProps,
 } from "@dashboard/fixtures";
 import { PageTypeListUrlSortField } from "@dashboard/pageTypes/urls";
-import Decorator from "@dashboard/storybook/Decorator";
-import { PaginatorContextDecorator } from "@dashboard/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import { pageTypes } from "../../fixtures";
 import PageTypeListPage, { PageTypeListPageProps } from "./PageTypeListPage";
 
@@ -27,11 +25,15 @@ const props: PageTypeListPageProps = {
   pageTypes,
 };
 
-storiesOf("Page types / Page types list", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <PageTypeListPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Page types / Page types list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <PageTypeListPage {...props} />;
+
+export const Loading = () => (
   <PageTypeListPage {...props} disabled={true} pageTypes={undefined} />
-  ))
-  .add("no data", () => <PageTypeListPage {...props} pageTypes={[]} />);
+);
+
+export const NoData = () => <PageTypeListPage {...props} pageTypes={[]} />;

src/pageTypes/index.tsx

@@ -19,7 +19,7 @@ import PageTypeDetailsComponent from "./views/PageTypeDetails";
 import PageTypeListComponent from "./views/PageTypeList";
 
 const PageTypeList: React.FC<RouteComponentProps<{}>> = ({ location }) => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: PageTypeListUrlQueryParams = asSortParams(
     qs,
     PageTypeListUrlSortField,
@@ -30,9 +30,9 @@ const PageTypeList: React.FC<RouteComponentProps<{}>> = ({ location }) => {
 interface PageTypeDetailsRouteParams {
   id: string;
 }
-const PageTypeDetails: React.FC<RouteComponentProps<
-  PageTypeDetailsRouteParams
->> = ({ match }) => {
+const PageTypeDetails: React.FC<
+  RouteComponentProps<PageTypeDetailsRouteParams>
+> = ({ match }) => {
   const qs = parseQs(location.search.substr(1));
   const params: PageTypeUrlQueryParams = qs;
 

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

@@ -2,8 +2,6 @@ import { fetchMoreProps } from "@dashboard/fixtures";
 import { PageErrorCode } from "@dashboard/graphql";
 import { PageData } from "@dashboard/pages/components/PageDetailsPage/form";
 import { page } from "@dashboard/pages/fixtures";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import PageDetailsPage, { PageDetailsPageProps } from "./PageDetailsPage";
@@ -25,16 +23,21 @@ const props: PageDetailsPageProps = {
   fetchMoreAttributeValues: fetchMoreProps,
 };
 
-storiesOf("Pages / Page details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <PageDetailsPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Pages / Page details",
+};
+
+export const Default = () => <PageDetailsPage {...props} />;
+
+export const Loading = () => (
   <PageDetailsPage {...props} loading={true} page={undefined} />
-  ))
-  .add("form errors", () => (
+);
+
+export const FormErrors = () => (
   <PageDetailsPage
     {...props}
-      errors={([
+    errors={(
+      [
         "title",
         "slug",
         "content",
@@ -42,7 +45,8 @@ storiesOf("Pages / Page details", module)
         "isPublished",
         "seoDescription",
         "seoTitle",
-      ] as Array<keyof PageData>).map(field => ({
+      ] as Array<keyof PageData>
+    ).map(field => ({
       __typename: "PageError",
       attributes: [],
       code: PageErrorCode.INVALID,
@@ -50,4 +54,4 @@ storiesOf("Pages / Page details", module)
       message: "Page field error",
     }))}
   />
-  ));
+);

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

@@ -5,11 +5,9 @@ import {
 } from "@dashboard/fixtures";
 import { pageList } from "@dashboard/pages/fixtures";
 import { PageListUrlSortField } from "@dashboard/pages/urls";
-import Decorator from "@dashboard/storybook/Decorator";
-import { PaginatorContextDecorator } from "@dashboard/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import PageListPage, { PageListPageProps } from "./PageListPage";
 
 const props: PageListPageProps = {
@@ -30,11 +28,15 @@ const props: PageListPageProps = {
   },
 };
 
-storiesOf("Pages / Page list", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <PageListPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Pages / Page list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <PageListPage {...props} />;
+
+export const Loading = () => (
   <PageListPage {...props} disabled={true} pages={undefined} />
-  ))
-  .add("no data", () => <PageListPage {...props} pages={[]} />);
+);
+
+export const NoData = () => <PageListPage {...props} pages={[]} />;

src/pages/index.tsx

@@ -20,7 +20,7 @@ import PageDetailsComponent from "./views/PageDetails";
 import PageListComponent from "./views/PageList";
 
 const PageList: React.FC<RouteComponentProps<{}>> = ({ location }) => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: PageListUrlQueryParams = asSortParams(
     qs,
     PageListUrlSortField,

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

@@ -1,6 +1,4 @@
 import { permissions } from "@dashboard/fixtures";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { errorsOfPermissionGroupCreate } from "../../fixtures";
@@ -16,15 +14,19 @@ const props: PermissionGroupCreatePageProps = {
   saveButtonBarState: undefined,
 };
 
-storiesOf("Permission Groups / Permission Group Create", module)
-  .addDecorator(Decorator)
-  .add("default", () => <PermissionGroupCreatePage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Permission Groups / Permission Group Create",
+};
+
+export const Default = () => <PermissionGroupCreatePage {...props} />;
+
+export const Loading = () => (
   <PermissionGroupCreatePage {...props} disabled={true} />
-  ))
-  .add("errors", () => (
+);
+
+export const Errors = () => (
   <PermissionGroupCreatePage
     {...props}
     errors={errorsOfPermissionGroupCreate}
   />
-  ));
+);

src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.stories.tsx

@@ -1,6 +1,4 @@
 import { permissions } from "@dashboard/fixtures";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { emptyPermissionGroup, permissionGroup, users } from "../../fixtures";
@@ -28,21 +26,25 @@ const props: PermissionGroupDetailsPageProps = {
   toolbar: null,
 };
 
-storiesOf("Permission Groups / Permission Group Details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <PermissionGroupDetailsPage {...props} />)
-  .add("no members", () => (
+export default {
+  title: "Permission Groups / Permission Group Details",
+};
+
+export const Default = () => <PermissionGroupDetailsPage {...props} />;
+
+export const NoMembers = () => (
   <PermissionGroupDetailsPage
     {...props}
     members={[]}
     permissionGroup={emptyPermissionGroup}
   />
-  ))
-  .add("loading", () => (
+);
+
+export const Loading = () => (
   <PermissionGroupDetailsPage
     {...props}
     disabled={true}
     permissionGroup={undefined}
     permissions={undefined}
   />
-  ));
+);

src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.stories.tsx

@@ -3,11 +3,9 @@ import {
   pageListProps,
   sortPageProps,
 } from "@dashboard/fixtures";
-import Decorator from "@dashboard/storybook/Decorator";
-import { PaginatorContextDecorator } from "@dashboard/storybook/PaginatorContextDecorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { PaginatorContextDecorator } from "../../../../.storybook/decorators";
 import { permissionGroups } from "../../fixtures";
 import { PermissionGroupListUrlSortField } from "../../urls";
 import PermissionGroupListPage, {
@@ -27,17 +25,17 @@ const props: PermissionGroupListPageProps = {
   },
 };
 
-storiesOf("Permission Groups / Permission Group List", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <PermissionGroupListPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Permission Groups / Permission Group List",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <PermissionGroupListPage {...props} />;
+
+export const Loading = () => (
   <PermissionGroupListPage
     {...props}
     permissionGroups={undefined}
     disabled={true}
   />
-  ))
-  .add("no data", () => (
-    <PermissionGroupListPage {...props} permissionGroups={[]} disabled={true} />
-  ));
+);

src/permissionGroups/fixtures.ts

@@ -1,4 +1,4 @@
-import * as avatarImg from "@assets/images/avatars/avatar1.png";
+import avatarImg from "@assets/images/avatars/avatar.png";
 import {
   PermissionEnum,
   PermissionGroupDetailsFragment,
@@ -90,7 +90,8 @@ export const permissionGroups: PermissionGroupFragment[] = [
   },
 ].map(edge => edge.node);
 
-export const userPermissionGroups: StaffMemberDetailsFragment["permissionGroups"] = [
+export const userPermissionGroups: StaffMemberDetailsFragment["permissionGroups"] =
+  [
     {
       id: "R3JvdXA6MQ==",
       name: "Full Access",
@@ -103,7 +104,7 @@ export const userPermissionGroups: StaffMemberDetailsFragment["permissionGroups"
       userCanManage: true,
       __typename: "Group",
     },
-];
+  ];
 
 export const emptyPermissionGroup: PermissionGroupDetailsFragment = {
   id: "R3JvdXA6Mw==",

src/permissionGroups/index.tsx

@@ -22,7 +22,7 @@ import PermissionGroupListComponent from "./views/PermissionGroupList";
 const permissionGroupList: React.FC<RouteComponentProps<{}>> = ({
   location,
 }) => {
-  const qs = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: PermissionGroupListUrlQueryParams = asSortParams(
     qs,
     PermissionGroupListUrlSortField,
@@ -34,10 +34,10 @@ const permissionGroupList: React.FC<RouteComponentProps<{}>> = ({
 interface PermissionGroupDetailsRouteProps {
   id: string;
 }
-const PermissionGroupDetails: React.FC<RouteComponentProps<
-  PermissionGroupDetailsRouteProps
->> = ({ match }) => {
-  const qs = parseQs(location.search.substr(1));
+const PermissionGroupDetails: React.FC<
+  RouteComponentProps<PermissionGroupDetailsRouteProps>
+> = ({ match }) => {
+  const qs = parseQs(location.search.substr(1)) as any;
   const params: PermissionGroupDetailsUrlQueryParams = asSortParams(
     qs,
     MembersListUrlSortField,

src/plugins/components/PluginsDetailsPage/PluginDetailsPage.stories.tsx

@@ -1,6 +1,4 @@
 import { PluginErrorCode } from "@dashboard/graphql";
-import Decorator from "@dashboard/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { plugin } from "../../fixtures";
@@ -20,19 +18,25 @@ const props: PluginsDetailsPageProps = {
   setSelectedChannelId: () => undefined,
 };
 
-storiesOf("Plugins / Plugin details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <PluginsDetailsPage {...props} />)
-  .add("loading", () => (
+export default {
+  title: "Plugins / Plugin details",
+};
+
+export const Default = () => <PluginsDetailsPage {...props} />;
+
+export const Loading = () => (
   <PluginsDetailsPage {...props} disabled={true} plugin={undefined} />
-  ))
-  .add("form errors", () => (
+);
+
+export const FormErrors = () => (
   <PluginsDetailsPage
     {...props}
     errors={[
-        ...(["active", "Username or account", "Password or license"] as Array<
+      ...(
+        ["active", "Username or account", "Password or license"] as Array<
           keyof PluginDetailsPageFormData
-        >).map(field => ({
+        >
+      ).map(field => ({
         __typename: "PluginError" as "PluginError",
         code: PluginErrorCode.INVALID,
         field,
@@ -46,12 +50,13 @@ storiesOf("Plugins / Plugin details", module)
       },
     ]}
   />
-  ))
-  .add("not configurable", () => (
+);
+
+export const NotConfigurable = () => (
   <PluginsDetailsPage
     {...props}
     plugin={{
       ...plugin,
     }}
   />
-  ));
+);