Update Storybook to latest version

package.json

@@ -108,8 +108,8 @@
     "@release-it/bumper": "^2.0.0",
     "@saleor/app-bridge": "^0.1.7",
     "@sentry/webpack-plugin": "^1.14.0",
-    "@storybook/addon-storyshots": "^5.2.8",
-    "@storybook/react": "^5.1.9",
+    "@storybook/addon-storyshots": "^6.4.22",
+    "@storybook/react": "^6.4.22",
     "@testing-library/react-hooks": "^1.1.0",
     "@types/classnames": "^2.2.9",
     "@types/color-convert": "^2.0.0",
@@ -131,7 +131,7 @@
     "@types/react-test-renderer": "^16.9.5",
     "@types/semver-compare": "^1.0.1",
     "@types/setup-polly-jest": "^0.5.0",
-    "@types/storybook__addon-storyshots": "^3.4.9",
+    "@types/storybook__addon-storyshots": "^5.1.2",
     "@types/storybook__react": "^4.0.2",
     "@types/url-join": "^4.0.0",
     "@types/webappsec-credential-management": "^0.5.1",
@@ -274,7 +274,7 @@
     "cy:run:refactored:locally": "cypress run --env tags=refactored --spec 'cypress/integration/navigation.js','cypress/integration/products/createProduct.js', 'cypress/integration/products/productsVariants.js', --reporter cypress-mochawesome-reporter --reporter-options reportDir='cypress/reports',overwrite=true,charts=true",
     "cy:run:critical": "cypress run --record --env tags=critical --spec 'cypress/integration/navigation.js','cypress/integration/products/createProduct.js', 'cypress/integration/products/productsVariants.js'",
     "cy:run:allEnv": "cypress run --record --env tags=all",
-    "cy:run:allEnv:parallel": "cypress run --record --env tags=all --parallel", 
+    "cy:run:allEnv:parallel": "cypress run --record --env tags=all --parallel",
     "test:e2e:run": "start-server-and-test start http://localhost:9000 cy:run",
     "test:e2e:run:record": "start-server-and-test start http://localhost:9000 cy:run:record",
     "test:e2e:dev": "start-server-and-test start http://localhost:9000 cy:open",

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

@@ -1,5 +1,4 @@
 import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import AppActivateDialog, { AppActivateDialogProps } from "./AppActivateDialog";
@@ -12,7 +11,19 @@ const props: AppActivateDialogProps = {
   open: true
 };
 
-storiesOf("Views / Apps / Activate app", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppActivateDialog {...props} />)
-  .add("unnamed app", () => <AppActivateDialog {...props} name={null} />);
+export default {
+  title: "Views / Apps / Activate app",
+  decorators: [Decorator]
+};
+
+export const Default = () => <AppActivateDialog {...props} />;
+
+Default.story = {
+  name: "default"
+};
+
+export const UnnamedApp = () => <AppActivateDialog {...props} name={null} />;
+
+UnnamedApp.story = {
+  name: "unnamed app"
+};

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

@@ -1,5 +1,4 @@
 import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import AppDeactivateDialog, {
@@ -14,7 +13,19 @@ const props: AppDeactivateDialogProps = {
   open: true
 };
 
-storiesOf("Views / Apps / Deactivate app", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppDeactivateDialog {...props} />)
-  .add("unnamed app", () => <AppDeactivateDialog {...props} name={null} />);
+export default {
+  title: "Views / Apps / Deactivate app",
+  decorators: [Decorator]
+};
+
+export const Default = () => <AppDeactivateDialog {...props} />;
+
+Default.story = {
+  name: "default"
+};
+
+export const UnnamedApp = () => <AppDeactivateDialog {...props} name={null} />;
+
+UnnamedApp.story = {
+  name: "unnamed app"
+};

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

@@ -1,5 +1,4 @@
 import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import AppDeleteDialog, { AppDeleteDialogProps } from "./AppDeleteDialog";
@@ -13,7 +12,19 @@ const props: AppDeleteDialogProps = {
   type: "EXTERNAL"
 };
 
-storiesOf("Views / Apps / Delete app", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppDeleteDialog {...props} />)
-  .add("unnamed app", () => <AppDeleteDialog {...props} name={null} />);
+export default {
+  title: "Views / Apps / Delete app",
+  decorators: [Decorator]
+};
+
+export const Default = () => <AppDeleteDialog {...props} />;
+
+Default.story = {
+  name: "default"
+};
+
+export const UnnamedApp = () => <AppDeleteDialog {...props} name={null} />;
+
+UnnamedApp.story = {
+  name: "unnamed app"
+};

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

@@ -1,5 +1,4 @@
 import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { appDetails } from "../../fixtures";
@@ -15,7 +14,19 @@ const props: AppDetailsPageProps = {
   onBack: () => undefined
 };
 
-storiesOf("Views / Apps / App details", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppDetailsPage {...props} />)
-  .add("loading", () => <AppDetailsPage {...props} loading={true} />);
+export default {
+  title: "Views / Apps / App details",
+  decorators: [Decorator]
+};
+
+export const Default = () => <AppDetailsPage {...props} />;
+
+Default.story = {
+  name: "default"
+};
+
+export const Loading = () => <AppDetailsPage {...props} loading={true} />;
+
+Loading.story = {
+  name: "loading"
+};

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

@@ -1,5 +1,4 @@
 import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import AppInProgressDeleteDialog, {
@@ -14,9 +13,21 @@ const props: AppInProgressDeleteDialogProps = {
   open: true
 };
 
-storiesOf("Views / Apps / Delete app failed installation", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppInProgressDeleteDialog {...props} />)
-  .add("unnamed app", () => (
-    <AppInProgressDeleteDialog {...props} name={null} />
-  ));
+export default {
+  title: "Views / Apps / Delete app failed installation",
+  decorators: [Decorator]
+};
+
+export const Default = () => <AppInProgressDeleteDialog {...props} />;
+
+Default.story = {
+  name: "default"
+};
+
+export const UnnamedApp = () => (
+  <AppInProgressDeleteDialog {...props} name={null} />
+);
+
+UnnamedApp.story = {
+  name: "unnamed app"
+};

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

@@ -1,5 +1,4 @@
 import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { installApp } from "../../fixtures";
@@ -12,7 +11,19 @@ const props: AppInstallPageProps = {
   onSubmit: () => undefined
 };
 
-storiesOf("Views / Apps / Install App", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppInstallPage {...props} />)
-  .add("loading", () => <AppInstallPage {...props} loading={true} />);
+export default {
+  title: "Views / Apps / Install App",
+  decorators: [Decorator]
+};
+
+export const Default = () => <AppInstallPage {...props} />;
+
+Default.story = {
+  name: "default"
+};
+
+export const Loading = () => <AppInstallPage {...props} loading={true} />;
+
+Loading.story = {
+  name: "loading"
+};

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

@@ -1,5 +1,4 @@
 import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { appDetails } from "../../fixtures";
@@ -13,9 +12,21 @@ const props: AppPageProps = {
   onError: () => undefined
 };
 
-storiesOf("Views / Apps / App", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppPage {...props} />)
-  .add("settings", () => (
-    <AppPage {...props} url={appDetails.configurationUrl} />
-  ));
+export default {
+  title: "Views / Apps / App",
+  decorators: [Decorator]
+};
+
+export const Default = () => <AppPage {...props} />;
+
+Default.story = {
+  name: "default"
+};
+
+export const Settings = () => (
+  <AppPage {...props} url={appDetails.configurationUrl} />
+);
+
+Settings.story = {
+  name: "settings"
+};

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

@@ -6,7 +6,6 @@ import {
   tabPageProps
 } from "@saleor/fixtures";
 import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { appsInProgress, appsList, customAppsList } from "../../fixtures";
@@ -38,24 +37,41 @@ const props: AppsListPageProps = {
   onRowAboutClick: () => undefined
 };
 
-storiesOf("Views / Apps / Apps list", module)
-  .addDecorator(Decorator)
-  .add("default", () => <AppsListPage {...props} />)
-  .add("loading", () => (
-    <AppsListPage
-      {...props}
-      appsInProgressList={undefined}
-      disabled={true}
-      loadingAppsInProgress={true}
-      installedAppsList={undefined}
-      customAppsList={undefined}
-    />
-  ))
-  .add("no data", () => (
-    <AppsListPage
-      {...props}
-      appsInProgressList={undefined}
-      installedAppsList={[]}
-      customAppsList={[]}
-    />
-  ));
+export default {
+  title: "Views / Apps / Apps list",
+  decorators: [Decorator]
+};
+
+export const Default = () => <AppsListPage {...props} />;
+
+Default.story = {
+  name: "default"
+};
+
+export const Loading = () => (
+  <AppsListPage
+    {...props}
+    appsInProgressList={undefined}
+    disabled={true}
+    loadingAppsInProgress={true}
+    installedAppsList={undefined}
+    customAppsList={undefined}
+  />
+);
+
+Loading.story = {
+  name: "loading"
+};
+
+export const NoData = () => (
+  <AppsListPage
+    {...props}
+    appsInProgressList={undefined}
+    installedAppsList={[]}
+    customAppsList={[]}
+  />
+);
+
+NoData.story = {
+  name: "no data"
+};

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

@@ -1,6 +1,5 @@
 import { Typography } from "@material-ui/core";
 import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import HorizontalSpacer from "./HorizontalSpacer";
@@ -15,22 +14,39 @@ const HelperWrapper: React.FC<HelperWrapperProps> = ({ children }) => (
 
 const Text: React.FC = () => <Typography>{"<- The spacer is here"}</Typography>;
 
-storiesOf("Generics / Horizontal Spacer", module)
-  .addDecorator(Decorator)
-  .add("without", () => (
-    <HelperWrapper>
-      <Typography>No spacer</Typography>
-    </HelperWrapper>
-  ))
-  .add("default", () => (
-    <HelperWrapper>
-      <HorizontalSpacer />
-      <Text />
-    </HelperWrapper>
-  ))
-  .add("with bigger spacing provided", () => (
-    <HelperWrapper>
-      <HorizontalSpacer spacing={4} />
-      <Text />
-    </HelperWrapper>
-  ));
+export default {
+  title: "Generics / Horizontal Spacer",
+  decorators: [Decorator]
+};
+
+export const Without = () => (
+  <HelperWrapper>
+    <Typography>No spacer</Typography>
+  </HelperWrapper>
+);
+
+Without.story = {
+  name: "without"
+};
+
+export const Default = () => (
+  <HelperWrapper>
+    <HorizontalSpacer />
+    <Text />
+  </HelperWrapper>
+);
+
+Default.story = {
+  name: "default"
+};
+
+export const WithBiggerSpacingProvided = () => (
+  <HelperWrapper>
+    <HorizontalSpacer spacing={4} />
+    <Text />
+  </HelperWrapper>
+);
+
+WithBiggerSpacingProvided.story = {
+  name: "with bigger spacing provided"
+};