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,31 +62,18 @@ 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
+        {({ setProgressState }) => (
+          <Query
             fetchPolicy="cache-and-network"
             query={query}
             variables={variables}
@@ -132,9 +119,7 @@ export function TypedQuery<TData, TVariables>(
                   true
                 )
               ) {
-                  childrenOrNotFound = (
-                    <ErrorPage onBack={() => navigate("/")} />
-                  );
+                childrenOrNotFound = <ErrorPage onBack={() => navigate("/")} />;
               }
 
               if (displayLoader) {
@@ -149,11 +134,10 @@ export function TypedQuery<TData, TVariables>(
                 );
               }
 
-                return childrenOrNotFound;
-              }}
-            </StrictTypedQuery>
-          );
+              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);