Merge pull request #98 from mirumee/fix/storybook

Update dependencies to suppress storybook build errors

CHANGELOG.md

@@ -5,3 +5,4 @@ All notable, unreleased changes to this project will be documented in this file.
 ## [Unreleased]
 
 - Add changelog and github issue/PR templates - #97 by @dominik-zeglen
+- Update dependencies to suppress storybook build errors - #98 by @dominik-zeglen

package.json

@@ -20,9 +20,9 @@
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.2",
     "@material-ui/styles": "^3.0.0-alpha.10",
-    "apollo": "^2.15.0",
+    "apollo": "^2.17.2",
     "apollo-cache-inmemory": "^1.6.2",
-    "apollo-client": "^2.6.3",
+    "apollo-client": "^2.6.4",
     "apollo-client-preset": "^1.0.6",
     "apollo-link": "^1.2.12",
     "apollo-link-batch-http": "^1.2.12",
@@ -49,9 +49,9 @@
     "lodash-es": "^4.17.14",
     "moment-timezone": "^0.5.26",
     "qs": "^6.7.0",
-    "react": "^16.8.6",
-    "react-apollo": "^2.5.8",
-    "react-dom": "^16.8.6",
+    "react": "^16.9.0",
+    "react-apollo": "^3.0.0",
+    "react-dom": "^16.9.0",
     "react-dropzone": "^8.2.0",
     "react-helmet": "^5.2.1",
     "react-infinite-scroller": "^1.2.4",
@@ -88,8 +88,8 @@
     "@types/jest": "^23.3.14",
     "@types/lodash-es": "^4.17.3",
     "@types/moment-timezone": "^0.5.12",
-    "@types/react": "16.8.12",
-    "@types/react-dom": "^16.8.4",
+    "@types/react": "^16.9.1",
+    "@types/react-dom": "^16.8.5",
     "@types/react-dropzone": "^4.2.2",
     "@types/react-helmet": "^5.0.8",
     "@types/react-infinite-scroller": "^1.2.1",

src/misc.ts

@@ -1,5 +1,5 @@
 import moment from "moment-timezone";
-import { MutationFn, MutationResult } from "react-apollo";
+import { MutationFunction, MutationResult } from "react-apollo";
 import urlJoin from "url-join";
 
 import { ConfirmButtonTransitionState } from "./components/ConfirmButton/ConfirmButton";
@@ -189,7 +189,7 @@ export function getMutationState(
 }
 
 export function getMutationProviderData<TData, TVariables>(
-  mutateFn: MutationFn<TData, TVariables>,
+  mutateFn: MutationFunction<TData, TVariables>,
   opts: MutationResult<TData>
 ): PartialMutationProviderOutput<TData, TVariables> {
   return {

src/mutations.tsx

@@ -1,19 +1,14 @@
-import { ApolloError } from "apollo-client";
+import { ApolloError, MutationUpdaterFn } from "apollo-client";
 import { DocumentNode } from "graphql";
 import React from "react";
-import {
-  Mutation,
-  MutationFn,
-  MutationResult,
-  MutationUpdaterFn
-} from "react-apollo";
+import { Mutation, MutationFunction, MutationResult } from "react-apollo";
 
 import useNotifier from "./hooks/useNotifier";
 import i18n from "./i18n";
 
 export interface TypedMutationInnerProps<TData, TVariables> {
   children: (
-    mutateFn: MutationFn<TData, TVariables>,
+    mutateFn: MutationFunction<TData, TVariables>,
     result: MutationResult<TData>
   ) => React.ReactNode;
   onCompleted?: (data: TData) => void;
@@ -21,26 +16,17 @@ export interface TypedMutationInnerProps<TData, TVariables> {
   variables?: TVariables;
 }
 
+// For some reason Mutation returns () => Element instead of () => ReactNode
 export function TypedMutation<TData, TVariables>(
   mutation: DocumentNode,
   update?: MutationUpdaterFn<TData>
 ) {
-  class StrictTypedMutation extends Mutation<TData, TVariables> {}
   return (props: TypedMutationInnerProps<TData, TVariables>) => {
     const notify = useNotifier();
-    // Obviously, this is workaround to the problem described here:
-    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/32588
-    const {
-      children,
-      onCompleted,
-      onError,
-      variables
-    } = props as JSX.LibraryManagedAttributes<
-      typeof StrictTypedMutation,
-      typeof props
-    >;
+    const { children, onCompleted, onError, variables } = props;
+
     return (
-      <StrictTypedMutation
+      <Mutation
         mutation={mutation}
         onCompleted={onCompleted}
         onError={err => {
@@ -55,8 +41,8 @@ export function TypedMutation<TData, TVariables>(
         variables={variables}
         update={update}
       >
-        {children}
-      </StrictTypedMutation>
+        {(mutateFn, result) => <>{children(mutateFn, result)}</>}
+      </Mutation>
     );
   };
 }

src/productTypes/containers/ProductTypeOperations.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { MutationFn } from "react-apollo";
+import { MutationFunction } from "react-apollo";
 
 import { AttributeTypeEnum, ReorderInput } from "@saleor/types/globalTypes";
 import { getMutationProviderData } from "../../misc";
@@ -119,7 +119,7 @@ const ProductTypeOperations: React.StatelessComponent<
                         reorderAttributeMutation,
                         reorderAttributeMutationResult
                       ) => {
-                        const reorderAttributeMutationFn: MutationFn<
+                        const reorderAttributeMutationFn: MutationFunction<
                           ProductTypeAttributeReorder,
                           ProductTypeAttributeReorderVariables
                         > = opts => {

src/queries.tsx

@@ -1,9 +1,9 @@
+import { ApolloQueryResult } from "apollo-client";
 import { DocumentNode } from "graphql";
 import gql from "graphql-tag";
 import React from "react";
 import { Query, QueryResult } from "react-apollo";
 
-import { ApolloQueryResult } from "apollo-client";
 import AppProgress from "./components/AppProgress";
 import ErrorPage from "./components/ErrorPage/ErrorPage";
 import useNavigator from "./hooks/useNavigator";
@@ -62,98 +62,82 @@ class QueryProgress extends React.Component<QueryProgressProps, {}> {
   }
 }
 
+// For some reason Query returns () => Element instead of () => ReactNode
 export function TypedQuery<TData, TVariables>(
   query: DocumentNode
 ): React.FC<TypedQueryInnerProps<TData, TVariables>> {
-  class StrictTypedQuery extends Query<TData, TVariables> {}
-  return props => {
+  return ({ children, displayLoader, skip, variables, require }) => {
     const navigate = useNavigator();
     const pushMessage = useNotifier();
 
     return (
       <AppProgress>
-        {({ setProgressState }) => {
-          // Obviously, this is workaround to the problem described here:
-          // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/32588
-          const {
-            children,
-            displayLoader,
-            skip,
-            variables,
-            require
-          } = props as JSX.LibraryManagedAttributes<
-            typeof StrictTypedQuery,
-            typeof props
-          >;
-          return (
-            <StrictTypedQuery
-              fetchPolicy="cache-and-network"
-              query={query}
-              variables={variables}
-              skip={skip}
-              context={{ useBatching: true }}
-            >
-              {queryData => {
-                if (queryData.error) {
-                  const msg = i18n.t("Something went wrong: {{ message }}", {
-                    message: queryData.error.message
-                  });
-                  pushMessage({ text: msg });
-                }
-
-                const loadMore = (
-                  mergeFunc: (
-                    previousResults: TData,
-                    fetchMoreResult: TData
-                  ) => TData,
-                  extraVariables: RequireAtLeastOne<TVariables>
-                ) =>
-                  queryData.fetchMore({
-                    query,
-                    updateQuery: (previousResults, { fetchMoreResult }) => {
-                      if (!fetchMoreResult) {
-                        return previousResults;
-                      }
-                      return mergeFunc(previousResults, fetchMoreResult);
-                    },
-                    variables: { ...variables, ...extraVariables }
-                  });
-
-                let childrenOrNotFound = children({
-                  ...queryData,
-                  loadMore
+        {({ setProgressState }) => (
+          <Query
+            fetchPolicy="cache-and-network"
+            query={query}
+            variables={variables}
+            skip={skip}
+            context={{ useBatching: true }}
+          >
+            {queryData => {
+              if (queryData.error) {
+                const msg = i18n.t("Something went wrong: {{ message }}", {
+                  message: queryData.error.message
                 });
-                if (
-                  !queryData.loading &&
-                  require &&
-                  queryData.data &&
-                  !require.reduce(
-                    (acc, key) => acc && queryData.data[key] !== null,
-                    true
-                  )
-                ) {
-                  childrenOrNotFound = (
-                    <ErrorPage onBack={() => navigate("/")} />
-                  );
-                }
+                pushMessage({ text: msg });
+              }
 
-                if (displayLoader) {
-                  return (
-                    <QueryProgress
-                      loading={queryData.loading}
-                      onCompleted={() => setProgressState(false)}
-                      onLoading={() => setProgressState(true)}
-                    >
-                      {childrenOrNotFound}
-                    </QueryProgress>
-                  );
-                }
+              const loadMore = (
+                mergeFunc: (
+                  previousResults: TData,
+                  fetchMoreResult: TData
+                ) => TData,
+                extraVariables: RequireAtLeastOne<TVariables>
+              ) =>
+                queryData.fetchMore({
+                  query,
+                  updateQuery: (previousResults, { fetchMoreResult }) => {
+                    if (!fetchMoreResult) {
+                      return previousResults;
+                    }
+                    return mergeFunc(previousResults, fetchMoreResult);
+                  },
+                  variables: { ...variables, ...extraVariables }
+                });
 
-                return childrenOrNotFound;
-              }}
-            </StrictTypedQuery>
-          );
-        }}
+              let childrenOrNotFound = children({
+                ...queryData,
+                loadMore
+              });
+              if (
+                !queryData.loading &&
+                require &&
+                queryData.data &&
+                !require.reduce(
+                  (acc, key) => acc && queryData.data[key] !== null,
+                  true
+                )
+              ) {
+                childrenOrNotFound = <ErrorPage onBack={() => navigate("/")} />;
+              }
+
+              if (displayLoader) {
+                return (
+                  <QueryProgress
+                    loading={queryData.loading}
+                    onCompleted={() => setProgressState(false)}
+                    onLoading={() => setProgressState(true)}
+                  >
+                    {childrenOrNotFound}
+                  </QueryProgress>
+                );
+              }
+
+              return <>{childrenOrNotFound}</>;
+            }}
+          </Query>
+        )}
       </AppProgress>
     );
   };

src/storybook/config.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-configure = require("@storybook/react").configure;
+const { configure } = require("@storybook/react");
 
 function loadStories() {
   // Components

src/storybook/stories/categories/CategoryUpdatePage.tsx

@@ -1,7 +1,7 @@
+import placeholderImage from "@assets/images/placeholder255x255.png";
 import { Omit } from "@material-ui/core";
 import { storiesOf } from "@storybook/react";
 import React from "react";
-import placeholderImage from "../@assets/images/placeholder255x255.png";
 
 import { category as categoryFixture } from "../../../categories/fixtures";
 

src/storybook/stories/collections/CollectionDetailsPage.tsx

@@ -2,14 +2,14 @@ import { Omit } from "@material-ui/core";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import placeholderCollectionImage from "@assets/images/block1.jpg";
+import placeholderProductImage from "@assets/images/placeholder60x60.png";
 import CollectionDetailsPage, {
   CollectionDetailsPageProps
 } from "../../../collections/components/CollectionDetailsPage";
 import { collection as collectionFixture } from "../../../collections/fixtures";
 import { listActionsProps, pageListProps } from "../../../fixtures";
 import Decorator from "../../Decorator";
-import placeholderCollectionImage from "../@assets/images/block1.jpg";
-import placeholderProductImage from "../@assets/images/placeholder60x60.png";
 
 const collection = collectionFixture(
   placeholderCollectionImage,

src/storybook/stories/components/AssignProductDialog.tsx

@@ -1,12 +1,12 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import placeholderImage from "@assets/images/placeholder60x60.png";
 import AssignProductDialog, {
   AssignProductDialogProps
 } from "@saleor/components/AssignProductDialog";
 import { products } from "@saleor/products/fixtures";
 import Decorator from "../../Decorator";
-import placeholderImage from "../@assets/images/placeholder60x60.png";
 
 const props: AssignProductDialogProps = {
   confirmButtonState: "default",

src/storybook/stories/home/HomePage.tsx

@@ -2,10 +2,10 @@ import { Omit } from "@material-ui/core";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import placeholderImage from "@assets/images/placeholder60x60.png";
 import HomePage, { HomePageProps } from "../../../home/components/HomePage";
 import { shop as shopFixture } from "../../../home/fixtures";
 import Decorator from "../../Decorator";
-import placeholderImage from "../@assets/images/placeholder60x60.png";
 
 const shop = shopFixture(placeholderImage);
 

src/storybook/stories/orders/OrderDetailsPage.tsx

@@ -2,6 +2,7 @@ import { Omit } from "@material-ui/core";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import placeholderImage from "@assets/images/placeholder60x60.png";
 import OrderDetailsPage, {
   OrderDetailsPageProps
 } from "../../../orders/components/OrderDetailsPage";
@@ -12,7 +13,6 @@ import {
   PaymentChargeStatusEnum
 } from "../../../types/globalTypes";
 import Decorator from "../../Decorator";
-import placeholderImage from "../@assets/images/placeholder60x60.png";
 
 const order = orderFixture(placeholderImage);
 

src/storybook/stories/orders/OrderDraftPage.tsx

@@ -2,12 +2,12 @@ import { Omit } from "@material-ui/core";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import placeholderImage from "@assets/images/placeholder60x60.png";
 import OrderDraftPage, {
   OrderDraftPageProps
 } from "../../../orders/components/OrderDraftPage";
 import { clients, countries, draftOrder } from "../../../orders/fixtures";
 import Decorator from "../../Decorator";
-import placeholderImage from "../@assets/images/placeholder60x60.png";
 
 const order = draftOrder(placeholderImage);
 

src/storybook/stories/orders/OrderFulfillmentDialog.tsx

@@ -2,12 +2,12 @@ import { Omit } from "@material-ui/core";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import placeholderImage from "@assets/images/placeholder60x60.png";
 import OrderFulfillmentDialog, {
   OrderFulfillmentDialogProps
 } from "../../../orders/components/OrderFulfillmentDialog";
 import { order as orderFixture } from "../../../orders/fixtures";
 import Decorator from "../../Decorator";
-import placeholderImage from "../@assets/images/placeholder60x60.png";
 
 const order = orderFixture(placeholderImage);
 

src/storybook/stories/orders/OrderProductAddDialog.tsx

@@ -1,10 +1,10 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import placeholderImage from "@assets/images/placeholder60x60.png";
 import OrderProductAddDialog from "../../../orders/components/OrderProductAddDialog";
 import { orderLineSearch } from "../../../orders/fixtures";
 import Decorator from "../../Decorator";
-import placeholderImage from "../@assets/images/placeholder60x60.png";
 
 storiesOf("Orders / OrderProductAddDialog", module)
   .addDecorator(Decorator)

src/storybook/stories/products/ProductImagePage.tsx

@@ -1,9 +1,9 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import placeholder from "@assets/images/placeholder1080x1080.png";
 import ProductImagePage from "../../../products/components/ProductImagePage";
 import Decorator from "../../Decorator";
-import placeholder from "../@assets/images/placeholder1080x1080.png";
 
 const image = { id: "", url: placeholder, alt: "Lorem ipsum" };
 const images = (Array(8) as any)

src/storybook/stories/products/ProductListPage.tsx

@@ -1,6 +1,7 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import placeholderImage from "@assets/images/placeholder255x255.png";
 import { defaultListSettings } from "@saleor/config";
 import { ListViews } from "@saleor/types";
 import { category as categoryFixture } from "../../../categories/fixtures";
@@ -14,7 +15,6 @@ import ProductListPage, {
   ProductListPageProps
 } from "../../../products/components/ProductListPage";
 import Decorator from "../../Decorator";
-import placeholderImage from "../@assets/images/placeholder255x255.png";
 
 const products = categoryFixture(placeholderImage).products.edges.map(
   edge => edge.node

src/storybook/stories/products/ProductUpdatePage.tsx

@@ -1,6 +1,7 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import placeholderImage from "@assets/images/placeholder255x255.png";
 import { collections } from "@saleor/collections/fixtures";
 import { listActionsProps } from "@saleor/fixtures";
 import ProductUpdatePage, {
@@ -8,7 +9,6 @@ import ProductUpdatePage, {
 } from "@saleor/products/components/ProductUpdatePage";
 import { product as productFixture } from "@saleor/products/fixtures";
 import Decorator from "../../Decorator";
-import placeholderImage from "../@assets/images/placeholder255x255.png";
 
 const product = productFixture(placeholderImage);
 

src/storybook/stories/products/ProductVariantCreatePage.tsx

@@ -1,11 +1,11 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import placeholderImage from "@assets/images/placeholder255x255.png";
 import { formError } from "@saleor/storybook/misc";
 import ProductVariantCreatePage from "../../../products/components/ProductVariantCreatePage";
 import { product as productFixture } from "../../../products/fixtures";
 import Decorator from "../../Decorator";
-import placeholderImage from "../@assets/images/placeholder255x255.png";
 
 const product = productFixture(placeholderImage);
 

src/storybook/stories/products/ProductVariantImageSelectDialog.tsx

@@ -1,12 +1,12 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import placeholderImage from "@assets/images/placeholder255x255.png";
 import ProductVariantImageSelectDialog from "../../../products/components/ProductVariantImageSelectDialog";
 import {
   variantImages as variantImagesFixture,
   variantProductImages as variantProductImagesFixture
 } from "../../../products/fixtures";
-import placeholderImage from "../@assets/images/placeholder255x255.png";
 
 const variantImages = variantImagesFixture(placeholderImage);
 const variantProductImages = variantProductImagesFixture(placeholderImage);