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
@@ -50,4 +51,4 @@ cypress/reports
 django-queries-results.html
 
 !.env.template
-!.dependency-cruiser.js
+!.dependency-cruiser.js

.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>
-                        <div
-                          style={{
-                            padding: 24,
-                          }}
-                        >
-                          {storyFn()}
-                        </div>
+                        <DevModeProvider>
+                          <div
+                            style={{
+                              padding: 24,
+                            }}
+                          >
+                            {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", () => (
-    <AppListPage
-      {...props}
-      installedApps={[]}
-      installableMarketplaceApps={[]}
-      comingSoonMarketplaceApps={[]}
-    />
-  ));
+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", () => (
-    <AppPage {...props} url={appDetails.configurationUrl!} />
-  ));
+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", () => (
-    <LoginPage {...props} errors={["externalLoginError"]} />
-  ))
-  .add("disabled", () => <LoginPage {...props} disabled={true} />)
-  .add("loading", () => <LoginPage {...props} loading={true} />);
+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"]} />
+);
+
+export const Disabled = () => <LoginPage {...props} disabled={true} />;
+
+export const Loading = () => <LoginPage {...props} loading={true} />;

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

@@ -1,30 +1,32 @@
 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", () => (
-    <NewPasswordPage errors={[]} loading={false} onSubmit={() => undefined} />
-  ))
-  .add("loading", () => (
-    <NewPasswordPage errors={[]} loading={true} onSubmit={() => undefined} />
-  ))
-  .add("too short error", () => (
-    <NewPasswordPage
-      errors={["password"].map(field => ({
-        __typename: "AccountError",
-        code: AccountErrorCode.PASSWORD_TOO_SHORT,
-        field,
-        addressType: null,
-        message: null,
-      }))}
-      loading={false}
-      onSubmit={() => undefined}
-    />
-  ));
+export default {
+  title: "Authentication / Set up a new password",
+  decorators: [CardDecorator],
+};
+
+export const Default = () => (
+  <NewPasswordPage errors={[]} loading={false} onSubmit={() => undefined} />
+);
+
+export const Loading = () => (
+  <NewPasswordPage errors={[]} loading={true} onSubmit={() => undefined} />
+);
+
+export const TooShortError = () => (
+  <NewPasswordPage
+    errors={["password"].map(field => ({
+      __typename: "AccountError",
+      code: AccountErrorCode.PASSWORD_TOO_SHORT,
+      field,
+      addressType: null,
+      message: null,
+    }))}
+    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", () => (
-    <ResetPasswordPage {...props} error={formError("").message} />
-  ));
+
+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,29 +13,33 @@ const createProps: CategoryCreatePageProps = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Categories / Create category", module)
-  .addDecorator(Decorator)
-  .add("default", () => <CategoryCreatePage {...createProps} />)
-  .add("When loading", () => (
-    <CategoryCreatePage {...createProps} disabled={true} />
-  ))
-  .add("form errors", () => (
-    <CategoryCreatePage
-      {...createProps}
-      errors={[
-        {
-          code: ProductErrorCode.REQUIRED,
-          field: "name",
-          message: "Product field name required",
-        },
-        {
-          code: ProductErrorCode.REQUIRED,
-          field: "description",
-          message: "Product field description required",
-        },
-      ].map(err => ({
-        __typename: "ProductError",
-        ...err,
-      }))}
-    />
-  ));
+export default {
+  title: "Categories / Create category",
+};
+
+export const Default = () => <CategoryCreatePage {...createProps} />;
+
+export const WhenLoading = () => (
+  <CategoryCreatePage {...createProps} disabled={true} />
+);
+
+export const FormErrors = () => (
+  <CategoryCreatePage
+    {...createProps}
+    errors={[
+      {
+        code: ProductErrorCode.REQUIRED,
+        field: "name",
+        message: "Product field name required",
+      },
+      {
+        code: ProductErrorCode.REQUIRED,
+        field: "description",
+        message: "Product field description required",
+      },
+    ].map(err => ({
+      __typename: "ProductError",
+      ...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", () => (
-    <CategoryListPage {...categoryTableProps} categories={undefined} />
-  ))
-  .add("empty", () => (
-    <CategoryListPage {...categoryTableProps} categories={[]} />
-  ));
+export default {
+  title: "Categories / Category list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <CategoryListPage {...categoryTableProps} />;
+
+export const Loading = () => (
+  <CategoryListPage {...categoryTableProps} categories={undefined} />
+);
+
+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,61 +33,66 @@ 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", () => (
-    <CategoryUpdatePage
-      {...updateProps}
-      category={{
-        ...category,
-        backgroundImage: null,
-      }}
-    />
-  ))
-  .add("no subcategories", () => (
-    <CategoryUpdatePage {...updateProps} subcategories={[]} />
-  ))
-  .add("no products", () => (
-    <CategoryUpdatePage
-      {...updateProps}
-      products={[]}
-      currentTab={CategoryPageTab.products}
-    />
-  ))
-  .add("loading", () => (
-    <CategoryUpdatePage
-      {...updateProps}
-      subcategories={undefined}
-      disabled={true}
-      products={undefined}
-      category={undefined}
-    />
-  ))
-  .add("form errors", () => (
-    <CategoryUpdatePage
-      {...updateProps}
-      errors={[
-        {
-          code: ProductErrorCode.REQUIRED,
-          field: "name",
-          message: "Product field name required",
-        },
-        {
-          code: ProductErrorCode.REQUIRED,
-          field: "description",
-          message: "Product field description required",
-        },
-      ].map(err => ({
-        __typename: "ProductError",
-        ...err,
-      }))}
-    />
-  ));
+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={{
+      ...category,
+      backgroundImage: null,
+    }}
+  />
+);
+
+export const NoSubcategories = () => (
+  <CategoryUpdatePage {...updateProps} subcategories={[]} />
+);
+
+export const NoProducts = () => (
+  <CategoryUpdatePage
+    {...updateProps}
+    products={[]}
+    currentTab={CategoryPageTab.products}
+  />
+);
+
+export const Loading = () => (
+  <CategoryUpdatePage
+    {...updateProps}
+    subcategories={undefined}
+    disabled={true}
+    products={undefined}
+    category={undefined}
+  />
+);
+
+export const FormErrors = () => (
+  <CategoryUpdatePage
+    {...updateProps}
+    errors={[
+      {
+        code: ProductErrorCode.REQUIRED,
+        field: "name",
+        message: "Product field name required",
+      },
+      {
+        code: ProductErrorCode.REQUIRED,
+        field: "description",
+        message: "Product field description required",
+      },
+    ].map(err => ({
+      __typename: "ProductError",
+      ...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", () => (
-    <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", () => (
-    <ChannelDetailsPage {...props} errors={channelCreateErrors} />
-  ));
+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"} />
+);
+
+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", () => (
-    <ChannelsListPage {...props} limits={limitsReached} />
-  ));
+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,27 +21,33 @@ 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", () => (
-    <CollectionCreatePage
-      {...props}
-      errors={[
-        {
-          code: CollectionErrorCode.REQUIRED,
-          field: "name",
-          message: "Collection field name required",
-        },
-        {
-          code: CollectionErrorCode.REQUIRED,
-          field: "description",
-          message: "Collection field description required",
-        },
-      ].map(err => ({
-        __typename: "CollectionError",
-        ...err,
-      }))}
-    />
-  ));
+export default {
+  title: "Collections / Create collection",
+};
+
+export const Default = () => <CollectionCreatePage {...props} />;
+
+export const Loading = () => (
+  <CollectionCreatePage {...props} disabled={true} />
+);
+
+export const FormErrors = () => (
+  <CollectionCreatePage
+    {...props}
+    errors={[
+      {
+        code: CollectionErrorCode.REQUIRED,
+        field: "name",
+        message: "Collection field name required",
+      },
+      {
+        code: CollectionErrorCode.REQUIRED,
+        field: "description",
+        message: "Collection field description required",
+      },
+    ].map(err => ({
+      __typename: "CollectionError",
+      ...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,42 +37,47 @@ const props: Omit<CollectionDetailsPageProps, "classes"> = {
   selectedChannelId: "123",
 };
 
-storiesOf("Collections / Collection detailsCollection details", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <CollectionDetailsPage {...props} />)
-  .add("loading", () => (
-    <CollectionDetailsPage {...props} collection={undefined} disabled={true} />
-  ))
-  .add("form errors", () => (
-    <CollectionDetailsPage
-      {...props}
-      errors={[
-        {
-          code: CollectionErrorCode.REQUIRED,
-          field: "name",
-          message: "Collection field name required",
-        },
-        {
-          code: CollectionErrorCode.REQUIRED,
-          field: "description",
-          message: "Collection field description required",
-        },
-      ].map(err => ({
-        __typename: "CollectionError",
-        ...err,
-      }))}
-    />
-  ))
-  .add("no products", () => (
-    <CollectionDetailsPage
-      {...props}
-      collection={{
-        ...collection,
-        products: {
-          ...collection.products,
-          edges: [],
-        },
-      }}
-    />
-  ));
+export default {
+  title: "Collections / Collection detailsCollection details",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <CollectionDetailsPage {...props} />;
+
+export const Loading = () => (
+  <CollectionDetailsPage {...props} collection={undefined} disabled={true} />
+);
+
+export const FormErrors = () => (
+  <CollectionDetailsPage
+    {...props}
+    errors={[
+      {
+        code: CollectionErrorCode.REQUIRED,
+        field: "name",
+        message: "Collection field name required",
+      },
+      {
+        code: CollectionErrorCode.REQUIRED,
+        field: "description",
+        message: "Collection field description required",
+      },
+    ].map(err => ({
+      __typename: "CollectionError",
+      ...err,
+    }))}
+  />
+);
+
+export const NoProducts = () => (
+  <CollectionDetailsPage
+    {...props}
+    collection={{
+      ...collection,
+      products: {
+        ...collection.products,
+        edges: [],
+      },
+    }}
+  />
+);

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", () => (
-    <CollectionListPage {...props} collections={undefined} disabled={true} />
-  ))
-  .add("no data", () => <CollectionListPage {...props} collections={[]} />);
+export default {
+  title: "Collections / Collection list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <CollectionListPage {...props} />;
+
+export const Loading = () => (
+  <CollectionListPage {...props} collections={undefined} disabled={true} />
+);
+
+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", () => (
-    <AppStateContext.Provider value={initialAppStateFixture}>
-      <ErrorPage {...props} />
-    </AppStateContext.Provider>
-  ))
-  .add("with error id", () => (
-    <AppStateContext.Provider value={errorAppStateFixture}>
-      <ErrorPage {...props} />
-    </AppStateContext.Provider>
-  ));
+export default {
+  title: "Error / Error page",
+};
+
+export const Default = () => (
+  <AppStateContext.Provider value={initialAppStateFixture}>
+    <ErrorPage {...props} />
+  </AppStateContext.Provider>
+);
+
+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", () => (
-    <Story
-      user={{
-        ...user,
-        userPermissions: user.userPermissions.slice(2, 6),
-      }}
-    />
-  ));
+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,21 +16,29 @@ 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", () => (
-    <WebhookDetailsPage {...props} webhook={undefined} disabled={true} />
-  ))
-  .add("form errors", () => (
-    <WebhookDetailsPage
-      {...props}
-      errors={["name", "targetUrl", "secretKey", null].map(field => ({
-        __typename: "WebhookError",
-        code: WebhookErrorCode.INVALID,
-        field,
-        message: "Webhook invalid",
-      }))}
-    />
-  ));
+
+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} />
+);
+
+export const FormErrors = () => (
+  <WebhookDetailsPage
+    {...props}
+    errors={["name", "targetUrl", "secretKey", null].map(field => ({
+      __typename: "WebhookError",
+      code: WebhookErrorCode.INVALID,
+      field,
+      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", () => (
-    <CustomerAddressListPage {...props} customer={undefined} disabled={true} />
-  ))
-  .add("no data", () => (
-    <CustomerAddressListPage
-      {...props}
-      customer={{ ...customer, addresses: [] }}
-    />
-  ));
+export default {
+  title: "Customers / Address Book",
+};
+
+export const Default = () => <CustomerAddressListPage {...props} />;
+
+export const Loading = () => (
+  <CustomerAddressListPage {...props} customer={undefined} disabled={true} />
+);
+
+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", () => (
-    <CustomerCreatePage
-      {...props}
-      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={(
+      [
         "city",
         "cityArea",
         "companyName",
@@ -40,12 +43,13 @@ storiesOf("Customers / Create customer", module)
         "postalCode",
         "streetAddress1",
         "streetAddress2",
-      ] as Array<keyof CustomerCreatePageFormData>).map(field => ({
-        __typename: "AccountError",
-        code: AccountErrorCode.INVALID,
-        field,
-        addressType: null,
-        message: "Account invalid error",
-      }))}
-    />
-  ));
+      ] as Array<keyof CustomerCreatePageFormData>
+    ).map(field => ({
+      __typename: "AccountError",
+      code: AccountErrorCode.INVALID,
+      field,
+      addressType: null,
+      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,84 +30,96 @@ const CustomerDetailsPage = props => (
   </MockedUserProvider>
 );
 
-storiesOf("Customers / Customer details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <CustomerDetailsPage {...props} />)
-  .add("loading", () => (
-    <CustomerDetailsPage {...props} customer={undefined} disabled={true} />
-  ))
-  .add("form errors", () => (
-    <CustomerDetailsPage
-      {...props}
-      errors={(["email", "firstName", "lastName"] as Array<
+export default {
+  title: "Customers / Customer details",
+};
+
+export const Default = () => <CustomerDetailsPage {...props} />;
+
+export const Loading = () => (
+  <CustomerDetailsPage {...props} customer={undefined} disabled={true} />
+);
+
+export const FormErrors = () => (
+  <CustomerDetailsPage
+    {...props}
+    errors={(
+      ["email", "firstName", "lastName"] as Array<
         keyof CustomerDetailsPageErrors
-      >).map(field => ({
-        __typename: "AccountError",
-        code: AccountErrorCode.INVALID,
-        field,
-        addressType: null,
-        message: "Account invalid",
-      }))}
-    />
-  ))
-  .add("different addresses", () => (
-    <CustomerDetailsPage
-      {...props}
-      customer={{
-        ...customer,
-        defaultBillingAddress: {
-          ...customer.defaultBillingAddress,
-          id: "AvSduf72=",
-        },
-      }}
-    />
-  ))
-  .add("never logged", () => (
-    <CustomerDetailsPage
-      {...props}
-      customer={{
-        ...customer,
-        lastLogin: null,
-      }}
-    />
-  ))
-  .add("never placed order", () => (
-    <CustomerDetailsPage
-      {...props}
-      customer={{
-        ...customer,
-        lastPlacedOrder: {
-          ...customer.lastPlacedOrder,
-          edges: [],
-        },
-      }}
-    />
-  ))
-  .add("no default billing address", () => (
-    <CustomerDetailsPage
-      {...props}
-      customer={{
-        ...customer,
-        defaultBillingAddress: null,
-      }}
-    />
-  ))
-  .add("no default shipping address", () => (
-    <CustomerDetailsPage
-      {...props}
-      customer={{
-        ...customer,
-        defaultShippingAddress: null,
-      }}
-    />
-  ))
-  .add("no address at all", () => (
-    <CustomerDetailsPage
-      {...props}
-      customer={{
-        ...customer,
-        defaultBillingAddress: null,
-        defaultShippingAddress: null,
-      }}
-    />
-  ));
+      >
+    ).map(field => ({
+      __typename: "AccountError",
+      code: AccountErrorCode.INVALID,
+      field,
+      addressType: null,
+      message: "Account invalid",
+    }))}
+  />
+);
+
+export const DifferentAddresses = () => (
+  <CustomerDetailsPage
+    {...props}
+    customer={{
+      ...customer,
+      defaultBillingAddress: {
+        ...customer.defaultBillingAddress,
+        id: "AvSduf72=",
+      },
+    }}
+  />
+);
+
+export const NeverLogged = () => (
+  <CustomerDetailsPage
+    {...props}
+    customer={{
+      ...customer,
+      lastLogin: null,
+    }}
+  />
+);
+
+export const NeverPlacedOrder = () => (
+  <CustomerDetailsPage
+    {...props}
+    customer={{
+      ...customer,
+      lastPlacedOrder: {
+        ...customer.lastPlacedOrder,
+        edges: [],
+      },
+    }}
+  />
+);
+
+export const NoDefaultBillingAddress = () => (
+  <CustomerDetailsPage
+    {...props}
+    customer={{
+      ...customer,
+      defaultBillingAddress: null,
+    }}
+  />
+);
+
+export const NoDefaultShippingAddress = () => (
+  <CustomerDetailsPage
+    {...props}
+    customer={{
+      ...customer,
+      defaultShippingAddress: null,
+    }}
+  />
+);
+
+export const NoAddressAtAll = () => (
+  <CustomerDetailsPage
+    {...props}
+    customer={{
+      ...customer,
+      defaultBillingAddress: null,
+      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", () => (
-    <CustomerListPage {...props} disabled={true} customers={undefined} />
-  ))
-  .add("no data", () => <CustomerListPage {...props} customers={[]} />);
+export default {
+  title: "Customers / Customer list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <CustomerListPage {...props} />;
+
+export const Loading = () => (
+  <CustomerListPage {...props} disabled={true} customers={undefined} />
+);
+
+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,19 +19,23 @@ 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", () => (
-    <SaleCreatePage
-      {...props}
-      errors={["name", "startDate", "endDate", "value"].map(field => ({
-        __typename: "DiscountError",
-        channels: [],
-        code: DiscountErrorCode.INVALID,
-        field,
-        message: "Discount invalid",
-      }))}
-    />
-  ));
+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 => ({
+      __typename: "DiscountError",
+      channels: [],
+      code: DiscountErrorCode.INVALID,
+      field,
+      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,28 +48,34 @@ const props: SaleDetailsPageProps = {
   ...listActionsProps,
 };
 
-storiesOf(" Discounts / Sale details", module)
-  .addDecorator(Decorator)
-  .addDecorator(PaginatorContextDecorator)
-  .add("default", () => <SaleDetailsPage {...props} />)
-  .add("loading", () => (
-    <SaleDetailsPage {...props} sale={undefined} disabled={true} />
-  ))
-  .add("form errors", () => (
-    <SaleDetailsPage
-      {...props}
-      errors={["name", "startDate", "endDate", "value"].map(field => ({
-        __typename: "DiscountError",
-        channels: [],
-        code: DiscountErrorCode.INVALID,
-        field,
-        message: "Discount invalid",
-      }))}
-    />
-  ))
-  .add("collections", () => (
-    <SaleDetailsPage {...props} activeTab={SaleDetailsPageTab.collections} />
-  ))
-  .add("products", () => (
-    <SaleDetailsPage {...props} activeTab={SaleDetailsPageTab.products} />
-  ));
+export default {
+  title: " Discounts / Sale details",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <SaleDetailsPage {...props} />;
+
+export const Loading = () => (
+  <SaleDetailsPage {...props} sale={undefined} disabled={true} />
+);
+
+export const FormErrors = () => (
+  <SaleDetailsPage
+    {...props}
+    errors={["name", "startDate", "endDate", "value"].map(field => ({
+      __typename: "DiscountError",
+      channels: [],
+      code: DiscountErrorCode.INVALID,
+      field,
+      message: "Discount invalid",
+    }))}
+  />
+);
+
+export const Collections = () => (
+  <SaleDetailsPage {...props} activeTab={SaleDetailsPageTab.collections} />
+);
+
+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", () => (
-    <SaleListPage
-      {...props}
-      sales={saleList.map(sale => ({ ...sale, channelListings: [] }))}
-      selectedChannelId=""
-    />
-  ));
+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", () => (
-    <VoucherCreatePage
-      {...props}
-      errors={([
+export default {
+  title: "Discounts / Voucher create",
+};
+
+export const Default = () => <VoucherCreatePage {...props} />;
+
+export const FormErrors = () => (
+  <VoucherCreatePage
+    {...props}
+    errors={(
+      [
         "applyOncePerOrder",
         "code",
         "discountType",
@@ -40,12 +42,13 @@ storiesOf("Discounts / Voucher create", module)
         "type",
         "usageLimit",
         "value",
-      ] as Array<keyof FormData>).map(field => ({
-        __typename: "DiscountError",
-        channels: [],
-        code: DiscountErrorCode.INVALID,
-        field,
-        message: "Discount invalid",
-      }))}
-    />
-  ));
+      ] as Array<keyof FormData>
+    ).map(field => ({
+      __typename: "DiscountError",
+      channels: [],
+      code: DiscountErrorCode.INVALID,
+      field,
+      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", () => (
-    <VoucherDetailsPage {...props} disabled={true} voucher={undefined} />
-  ))
-  .add("form errors", () => (
-    <VoucherDetailsPage
-      {...props}
-      errors={([
+export default {
+  title: "Discounts / Voucher details",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <VoucherDetailsPage {...props} />;
+
+export const Loading = () => (
+  <VoucherDetailsPage {...props} disabled={true} voucher={undefined} />
+);
+
+export const Error = () => (
+  <VoucherDetailsPage
+    {...props}
+    errors={(
+      [
         "applyOncePerOrder",
         "code",
         "discountType",
@@ -75,12 +78,13 @@ storiesOf("Discounts / Voucher details", module)
         "type",
         "usageLimit",
         "discountValue",
-      ] as Array<keyof VoucherDetailsPageFormData>).map(field => ({
-        __typename: "DiscountError",
-        channels: [],
-        code: DiscountErrorCode.INVALID,
-        field,
-        message: "Discount invalid",
-      }))}
-    />
-  ));
+      ] as Array<keyof VoucherDetailsPageFormData>
+    ).map(field => ({
+      __typename: "DiscountError",
+      channels: [],
+      code: DiscountErrorCode.INVALID,
+      field,
+      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,19 +63,24 @@ 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", () => (
-    <VoucherListPage
-      {...props}
-      selectedChannelId=""
-      vouchers={voucherList.map(voucher => ({
-        ...voucher,
-        channelListings: [],
-      }))}
-    />
-  ));
+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=""
+    vouchers={voucherList.map(voucher => ({
+      ...voucher,
+      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,41 +36,48 @@ const HomePage = props => {
   );
 };
 
-storiesOf("Home", module)
-  .addDecorator(Decorator)
-  .add("default", () => <HomePage {...homePageProps} />)
-  .add("loading", () => (
-    <HomePage
-      {...homePageProps}
-      activities={undefined}
-      orders={undefined}
-      ordersToCapture={undefined}
-      ordersToFulfill={undefined}
-      productsOutOfStock={undefined}
-      sales={undefined}
-      topProducts={undefined}
-      userName={undefined}
-    />
-  ))
-  .add("no data", () => (
-    <HomePage {...homePageProps} topProducts={[]} activities={[]} />
-  ))
-  .add("no permissions", () => (
-    <HomePage {...homePageProps} customPermissions={[]} />
-  ))
-  .add("product permissions", () => (
-    <HomePage
-      {...homePageProps}
-      customPermissions={adminUserPermissions.filter(
-        perm => perm.code === PermissionEnum.MANAGE_PRODUCTS,
-      )}
-    />
-  ))
-  .add("order permissions", () => (
-    <HomePage
-      {...homePageProps}
-      customPermissions={adminUserPermissions.filter(
-        perm => perm.code === PermissionEnum.MANAGE_ORDERS,
-      )}
-    />
-  ));
+export default {
+  title: "Home / Home",
+};
+
+export const Default = () => <HomePage {...homePageProps} />;
+
+export const Loading = () => (
+  <HomePage
+    {...homePageProps}
+    activities={undefined}
+    orders={undefined}
+    ordersToCapture={undefined}
+    ordersToFulfill={undefined}
+    productsOutOfStock={undefined}
+    sales={undefined}
+    topProducts={undefined}
+    userName={undefined}
+  />
+);
+
+export const NoData = () => (
+  <HomePage {...homePageProps} topProducts={[]} activities={[]} />
+);
+
+export const NoPermissions = () => (
+  <HomePage {...homePageProps} customPermissions={[]} />
+);
+
+export const ProductPermissions = () => (
+  <HomePage
+    {...homePageProps}
+    customPermissions={adminUserPermissions.filter(
+      perm => perm.code === PermissionEnum.MANAGE_PRODUCTS,
+    )}
+  />
+);
+
+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,29 +16,24 @@ const props: MenuDetailsPageProps = {
   saveButtonState: "default",
 };
 
-storiesOf("Navigation / Menu details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <MenuDetailsPage {...props} />)
-  .add("loading", () => (
-    <MenuDetailsPage {...props} disabled={true} menu={undefined} />
-  ))
-  .add("no data", () => (
-    <MenuDetailsPage
-      {...props}
-      menu={{
-        ...props.menu,
-        items: [],
-      }}
-    />
-  ))
-  .add("form errors", () => (
-    <MenuDetailsPage
-      {...props}
-      errors={["name"].map(field => ({
-        __typename: "MenuError",
-        code: MenuErrorCode.INVALID,
-        field,
-        message: "Invalid field",
-      }))}
-    />
-  ));
+export default {
+  title: "Navigation / Menu details",
+};
+
+export const Default = () => <MenuDetailsPage {...props} />;
+
+export const Loading = () => (
+  <MenuDetailsPage {...props} disabled={true} menu={undefined} />
+);
+
+export const FormErrors = () => (
+  <MenuDetailsPage
+    {...props}
+    errors={["name"].map(field => ({
+      __typename: "MenuError",
+      code: MenuErrorCode.INVALID,
+      field,
+      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", () => (
-    <MenuListPage {...props} disabled={true} menus={undefined} />
-  ))
-  .add("no data", () => <MenuListPage {...props} menus={[]} />);
+export default {
+  title: "Navigation / Menu list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <MenuListPage {...props} />;
+
+export const Loading = () => (
+  <MenuListPage {...props} disabled={true} menus={undefined} />
+);
+
+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,325 +42,159 @@ const props: Omit<OrderDetailsPageProps, "classes"> = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Orders / Order details", module)
-  .addDecorator(Decorator)
-  .add("pending", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        transactions: [],
-        paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
-        payments: [payments.pending],
-      }}
-    />
-  ))
-  .add("authorized", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        transactions: [],
-        paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
-        payments: [payments.authorized],
-      }}
-    />
-  ))
-  .add("completed", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        transactions: [],
-        paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED,
-        payments: [payments.completed],
-      }}
-    />
-  ))
-  .add("no payment", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        transactions: [],
-        paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
-        payments: [],
-        totalAuthorized: prepareMoney(0),
-      }}
-    />
-  ))
-  .add("refunded", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        transactions: [],
-        paymentStatus: PaymentChargeStatusEnum.FULLY_REFUNDED,
-        payments: [payments.refunded],
-      }}
-    />
-  ))
-  .add("partial refund", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        transactions: [],
-        paymentStatus: PaymentChargeStatusEnum.PARTIALLY_REFUNDED,
-        payments: [payments.partialRefund],
-      }}
-    />
-  ))
-  .add("rejected", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        transactions: [],
-        paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
-        payments: [payments.rejected],
-      }}
-    />
-  ));
+export default {
+  title: "Orders / Order details",
+};
 
-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 Pending = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      transactions: [],
+      paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
+      payments: [payments.pending],
+    }}
+  />
+);
 
-storiesOf("Views / Orders / Order details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <OrderDetailsPage {...props} />)
-  .add("loading", () => <OrderDetailsPage {...props} order={undefined} />)
-  .add("cancelled", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        fulfillments: props.order.fulfillments.map(fulfillment => ({
-          ...fulfillment,
-          status: FulfillmentStatus.CANCELED,
-        })),
-        status: OrderStatus.CANCELED,
-      }}
-    />
-  ))
-  .add("fulfilled", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        status: OrderStatus.FULFILLED,
-      }}
-    />
-  ))
-  .add("partially fulfilled", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        status: OrderStatus.PARTIALLY_FULFILLED,
-      }}
-    />
-  ))
-  .add("unfulfilled", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        status: OrderStatus.UNFULFILLED,
-      }}
-    />
-  ))
-  .add("no shipping address", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        shippingAddress: null,
-      }}
-    />
-  ))
-  .add("no customer note", () => (
-    <OrderDetailsPage
-      {...props}
-      order={{
-        ...props.order,
-        customerNote: "",
-      }}
-    />
-  ));
+export const Authorized = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      transactions: [],
+      paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
+      payments: [payments.authorized],
+    }}
+  />
+);
+
+export const Completed = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      transactions: [],
+      paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED,
+      payments: [payments.completed],
+    }}
+  />
+);
+
+export const NoPayment = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      transactions: [],
+      paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
+      payments: [],
+      totalAuthorized: prepareMoney(0),
+    }}
+  />
+);
+
+export const Refunded = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      transactions: [],
+      paymentStatus: PaymentChargeStatusEnum.FULLY_REFUNDED,
+      payments: [payments.refunded],
+    }}
+  />
+);
+
+export const PartialRefund = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      transactions: [],
+      paymentStatus: PaymentChargeStatusEnum.PARTIALLY_REFUNDED,
+      payments: [payments.partialRefund],
+    }}
+  />
+);
+
+export const Rejected = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      transactions: [],
+      paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
+      payments: [payments.rejected],
+    }}
+  />
+);
+
+export const Default = () => <OrderDetailsPage {...props} />;
+
+export const Loading = () => <OrderDetailsPage {...props} order={undefined} />;
+
+export const Cancelled = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      fulfillments: props.order.fulfillments.map(fulfillment => ({
+        ...fulfillment,
+        status: FulfillmentStatus.CANCELED,
+      })),
+      status: OrderStatus.CANCELED,
+    }}
+  />
+);
+
+export const Fulfilled = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      status: OrderStatus.FULFILLED,
+    }}
+  />
+);
+
+export const PartiallyFulfilled = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      status: OrderStatus.PARTIALLY_FULFILLED,
+    }}
+  />
+);
+
+export const Unfulfilled = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      status: OrderStatus.UNFULFILLED,
+    }}
+  />
+);
+
+export const NoShippingAddress = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      shippingAddress: null,
+    }}
+  />
+);
+
+export const NoCustomerNote = () => (
+  <OrderDetailsPage
+    {...props}
+    order={{
+      ...props.order,
+      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", () => (
-    <OrderDraftListPage {...props} disabled orders={undefined} />
-  ))
-  .add("when no data", () => <OrderDraftListPage {...props} orders={[]} />)
-  .add("limits reached", () => (
-    <OrderDraftListPage {...props} limits={limitsReached} />
-  ));
+export default {
+  title: "Orders / Draft order list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <OrderDraftListPage {...props} />;
+
+export const Loading = () => (
+  <OrderDraftListPage {...props} disabled orders={undefined} />
+);
+
+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", () => (
-    <OrderDraftPage
-      {...props}
-      disabled={true}
-      order={undefined}
-      channelUsabilityData={undefined}
-    />
-  ))
-  .add("without lines", () => (
-    <OrderDraftPage {...props} order={{ ...order, lines: [] }} />
-  ))
-  .add("no user permissions", () => (
-    <OrderDraftPage {...props} customPermissions={[]} />
-  ))
-  .add("with errors", () => (
-    <OrderDraftPage {...props} errors={finalizeErrors} />
-  ));
+export default {
+  title: "Orders / Order draft",
+  decorators: [DiscountsDecorator],
+};
+
+export const Default = () => <OrderDraftPage {...props} />;
+
+export const Loading = () => (
+  <OrderDraftPage
+    {...props}
+    disabled={true}
+    order={undefined}
+    channelUsabilityData={undefined}
+  />
+);
+
+export const NoUserPermissions = () => (
+  <OrderDraftPage {...props} customPermissions={[]} />
+);
+
+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,26 +16,31 @@ const props: OrderFulfillPageProps = {
   closeModal: () => undefined,
 };
 
-storiesOf("Orders / Fulfill order", module)
-  .addDecorator(Decorator)
-  .add("default", () => <OrderFulfillPage {...props} />)
-  .add("loading", () => (
-    <OrderFulfillPage {...props} loading={true} order={undefined} />
-  ))
-  .add("error", () => (
-    <OrderFulfillPage
-      {...props}
-      errors={[
-        {
-          __typename: "OrderError",
-          code: OrderErrorCode.INSUFFICIENT_STOCK,
-          field: null,
-          orderLines: [orderToFulfill.lines[0].id],
-          warehouse: warehouseList[0].id,
-          addressType: null,
-          message: "Insufficient stock",
-        },
-      ]}
-    />
-  ))
-  .add("one warehouse", () => <OrderFulfillPage {...props} />);
+export default {
+  title: "Orders / Fulfill order",
+};
+
+export const Default = () => <OrderFulfillPage {...props} />;
+
+export const Loading = () => (
+  <OrderFulfillPage {...props} loading={true} order={undefined} />
+);
+
+export const Error = () => (
+  <OrderFulfillPage
+    {...props}
+    errors={[
+      {
+        __typename: "OrderError",
+        code: OrderErrorCode.INSUFFICIENT_STOCK,
+        field: null,
+        orderLines: [orderToFulfill.lines[0].id],
+        warehouse: warehouseList[0].id,
+        addressType: null,
+        message: "Insufficient stock",
+      },
+    ]}
+  />
+);
+
+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", () => (
-    <OrderGrantRefundPage
-      submitState="loading"
-      order={null}
-      loading={true}
-      onSubmit={() => undefined}
-    />
-  ));
+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", () => (
-    <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", () => (
-    <OrderListPage {...props} limits={limitsReached} />
-  ));
+export default {
+  title: "Orders / Order list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <OrderListPage {...props} />;
+
+export const Loading = () => (
+  <OrderListPage
+    {...props}
+    orders={undefined}
+    currentTab={undefined}
+    disabled={true}
+  />
+);
+
+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", () => (
-    <OrderRefundPage {...props} defaultType={OrderRefundType.PRODUCTS} />
-  ))
-  .add("miscellaneous", () => (
-    <OrderRefundPage {...props} defaultType={OrderRefundType.MISCELLANEOUS} />
-  ))
-  .add("loading", () => (
-    <OrderRefundPage {...props} disabled={true} order={undefined} />
-  ));
+export default {
+  title: "Orders / Refund order",
+};
+
+export const Products = () => (
+  <OrderRefundPage {...props} defaultType={OrderRefundType.PRODUCTS} />
+);
+
+export const Miscellaneous = () => (
+  <OrderRefundPage {...props} defaultType={OrderRefundType.MISCELLANEOUS} />
+);
+
+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,19 +11,23 @@ const props: OrderSendRefundPageProps = {
   addManualRefundError: undefined,
 };
 
-storiesOf("Views / Orders / Send refund order", module)
-  .addDecorator(Decorator)
-  .add("settled", () => <OrderSendRefund {...props} />)
-  .add("unsettled", () => (
-    <OrderSendRefund
-      {...props}
-      order={{
-        ...orderFixture(null),
-        totalGrantedRefund: prepareMoney(10),
-        totalRemainingGrant: prepareMoney(10),
-      }}
-    />
-  ))
-  .add("loading", () => (
-    <OrderSendRefund {...props} order={null} loading={true} />
-  ));
+export default {
+  title: "Orders / Send refund order",
+};
+
+export const Settled = () => <OrderSendRefund {...props} />;
+
+export const Unsettled = () => (
+  <OrderSendRefund
+    {...props}
+    order={{
+      ...orderFixture(null),
+      totalGrantedRefund: prepareMoney(10),
+      totalRemainingGrant: prepareMoney(10),
+    }}
+  />
+);
+
+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", () => (
-    <OrderSettings
-      {...props}
-      disabled={true}
-      orderSettings={undefined}
-      shop={undefined}
-    />
-  ));
+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,22 +12,26 @@ 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", () => (
-    <PageTypeCreatePage
-      {...props}
-      errors={[
-        {
-          code: PageErrorCode.REQUIRED,
-          field: "name",
-          message: "Field is required",
-        },
-      ].map(err => ({
-        __typename: "PageError",
-        ...err,
-      }))}
-    />
-  ));
+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={[
+      {
+        code: PageErrorCode.REQUIRED,
+        field: "name",
+        message: "Field is required",
+      },
+    ].map(err => ({
+      __typename: "PageError",
+      ...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,38 +21,33 @@ const props: Omit<PageTypeDetailsPageProps, "classes"> = {
   saveButtonBarState: "default",
 };
 
-storiesOf("Page types / Page type details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <PageTypeDetailsPage {...props} />)
-  .add("loading", () => (
-    <PageTypeDetailsPage
-      {...props}
-      disabled={true}
-      pageTitle={undefined}
-      pageType={undefined}
-    />
-  ))
-  .add("no attributes", () => (
-    <PageTypeDetailsPage
-      {...props}
-      pageType={{
-        ...pageType,
-        attributes: [],
-      }}
-    />
-  ))
-  .add("form errors", () => (
-    <PageTypeDetailsPage
-      {...props}
-      errors={[
-        {
-          code: PageErrorCode.REQUIRED,
-          field: "name",
-          message: "Field is required",
-        },
-      ].map(err => ({
-        __typename: "PageError",
-        ...err,
-      }))}
-    />
-  ));
+export default {
+  title: "Page types / Page type details",
+};
+
+export const Default = () => <PageTypeDetailsPage {...props} />;
+
+export const Loading = () => (
+  <PageTypeDetailsPage
+    {...props}
+    disabled={true}
+    pageTitle={undefined}
+    pageType={undefined}
+  />
+);
+
+export const FormErrors = () => (
+  <PageTypeDetailsPage
+    {...props}
+    errors={[
+      {
+        code: PageErrorCode.REQUIRED,
+        field: "name",
+        message: "Field is required",
+      },
+    ].map(err => ({
+      __typename: "PageError",
+      ...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", () => (
-    <PageTypeListPage {...props} disabled={true} pageTypes={undefined} />
-  ))
-  .add("no data", () => <PageTypeListPage {...props} pageTypes={[]} />);
+export default {
+  title: "Page types / Page types list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <PageTypeListPage {...props} />;
+
+export const Loading = () => (
+  <PageTypeListPage {...props} disabled={true} pageTypes={undefined} />
+);
+
+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", () => (
-    <PageDetailsPage {...props} loading={true} page={undefined} />
-  ))
-  .add("form errors", () => (
-    <PageDetailsPage
-      {...props}
-      errors={([
+export default {
+  title: "Pages / Page details",
+};
+
+export const Default = () => <PageDetailsPage {...props} />;
+
+export const Loading = () => (
+  <PageDetailsPage {...props} loading={true} page={undefined} />
+);
+
+export const FormErrors = () => (
+  <PageDetailsPage
+    {...props}
+    errors={(
+      [
         "title",
         "slug",
         "content",
@@ -42,12 +45,13 @@ storiesOf("Pages / Page details", module)
         "isPublished",
         "seoDescription",
         "seoTitle",
-      ] as Array<keyof PageData>).map(field => ({
-        __typename: "PageError",
-        attributes: [],
-        code: PageErrorCode.INVALID,
-        field,
-        message: "Page field error",
-      }))}
-    />
-  ));
+      ] as Array<keyof PageData>
+    ).map(field => ({
+      __typename: "PageError",
+      attributes: [],
+      code: PageErrorCode.INVALID,
+      field,
+      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", () => (
-    <PageListPage {...props} disabled={true} pages={undefined} />
-  ))
-  .add("no data", () => <PageListPage {...props} pages={[]} />);
+export default {
+  title: "Pages / Page list",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <PageListPage {...props} />;
+
+export const Loading = () => (
+  <PageListPage {...props} disabled={true} pages={undefined} />
+);
+
+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", () => (
-    <PermissionGroupCreatePage {...props} disabled={true} />
-  ))
-  .add("errors", () => (
-    <PermissionGroupCreatePage
-      {...props}
-      errors={errorsOfPermissionGroupCreate}
-    />
-  ));
+export default {
+  title: "Permission Groups / Permission Group Create",
+};
+
+export const Default = () => <PermissionGroupCreatePage {...props} />;
+
+export const Loading = () => (
+  <PermissionGroupCreatePage {...props} disabled={true} />
+);
+
+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", () => (
-    <PermissionGroupDetailsPage
-      {...props}
-      members={[]}
-      permissionGroup={emptyPermissionGroup}
-    />
-  ))
-  .add("loading", () => (
-    <PermissionGroupDetailsPage
-      {...props}
-      disabled={true}
-      permissionGroup={undefined}
-      permissions={undefined}
-    />
-  ));
+export default {
+  title: "Permission Groups / Permission Group Details",
+};
+
+export const Default = () => <PermissionGroupDetailsPage {...props} />;
+
+export const NoMembers = () => (
+  <PermissionGroupDetailsPage
+    {...props}
+    members={[]}
+    permissionGroup={emptyPermissionGroup}
+  />
+);
+
+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", () => (
-    <PermissionGroupListPage
-      {...props}
-      permissionGroups={undefined}
-      disabled={true}
-    />
-  ))
-  .add("no data", () => (
-    <PermissionGroupListPage {...props} permissionGroups={[]} disabled={true} />
-  ));
+export default {
+  title: "Permission Groups / Permission Group List",
+  decorators: [PaginatorContextDecorator],
+};
+
+export const Default = () => <PermissionGroupListPage {...props} />;
+
+export const Loading = () => (
+  <PermissionGroupListPage
+    {...props}
+    permissionGroups={undefined}
+    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,20 +90,21 @@ export const permissionGroups: PermissionGroupFragment[] = [
   },
 ].map(edge => edge.node);
 
-export const userPermissionGroups: StaffMemberDetailsFragment["permissionGroups"] = [
-  {
-    id: "R3JvdXA6MQ==",
-    name: "Full Access",
-    userCanManage: false,
-    __typename: "Group",
-  },
-  {
-    id: "R3JvdXA6Mg==",
-    name: "Customer Support",
-    userCanManage: true,
-    __typename: "Group",
-  },
-];
+export const userPermissionGroups: StaffMemberDetailsFragment["permissionGroups"] =
+  [
+    {
+      id: "R3JvdXA6MQ==",
+      name: "Full Access",
+      userCanManage: false,
+      __typename: "Group",
+    },
+    {
+      id: "R3JvdXA6Mg==",
+      name: "Customer Support",
+      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,38 +18,45 @@ const props: PluginsDetailsPageProps = {
   setSelectedChannelId: () => undefined,
 };
 
-storiesOf("Plugins / Plugin details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <PluginsDetailsPage {...props} />)
-  .add("loading", () => (
-    <PluginsDetailsPage {...props} disabled={true} plugin={undefined} />
-  ))
-  .add("form errors", () => (
-    <PluginsDetailsPage
-      {...props}
-      errors={[
-        ...(["active", "Username or account", "Password or license"] as Array<
+export default {
+  title: "Plugins / Plugin details",
+};
+
+export const Default = () => <PluginsDetailsPage {...props} />;
+
+export const Loading = () => (
+  <PluginsDetailsPage {...props} disabled={true} plugin={undefined} />
+);
+
+export const FormErrors = () => (
+  <PluginsDetailsPage
+    {...props}
+    errors={[
+      ...(
+        ["active", "Username or account", "Password or license"] as Array<
           keyof PluginDetailsPageFormData
-        >).map(field => ({
-          __typename: "PluginError" as "PluginError",
-          code: PluginErrorCode.INVALID,
-          field,
-          message: "Plugin invalid",
-        })),
-        {
-          __typename: "PluginError" as "PluginError",
-          code: PluginErrorCode.PLUGIN_MISCONFIGURED,
-          field: null,
-          message: "Plugin missconfigured",
-        },
-      ]}
-    />
-  ))
-  .add("not configurable", () => (
-    <PluginsDetailsPage
-      {...props}
-      plugin={{
-        ...plugin,
-      }}
-    />
-  ));
+        >
+      ).map(field => ({
+        __typename: "PluginError" as "PluginError",
+        code: PluginErrorCode.INVALID,
+        field,
+        message: "Plugin invalid",
+      })),
+      {
+        __typename: "PluginError" as "PluginError",
+        code: PluginErrorCode.PLUGIN_MISCONFIGURED,
+        field: null,
+        message: "Plugin missconfigured",
+      },
+    ]}
+  />
+);
+
+export const NotConfigurable = () => (
+  <PluginsDetailsPage
+    {...props}
+    plugin={{
+      ...plugin,
+    }}
+  />
+);