@jobber/hooks 2.0.3-dar.45 → 2.0.3-dar.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/hooks",
-  "version": "2.0.3-dar.45+5394c5a6",
+  "version": "2.0.3-dar.47+2396d450",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",
@@ -10,7 +10,8 @@
     "bootstrap": "npm run clean; npm run build"
   },
   "files": [
-    "dist/*"
+    "dist/*",
+    "src"
   ],
   "devDependencies": {
     "@apollo/react-testing": "^4.0.0",
@@ -38,5 +39,5 @@
     "@apollo/client": "^3.7.10",
     "react": "^18"
   },
-  "gitHead": "5394c5a679f3c75026680a7714526d1b8d6d1b53"
+  "gitHead": "2396d45004d1464b14b68e1861dd9835ae7c3d98"
 }

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from "./useAssert";
+export * from "./useCollectionQuery";
+export * from "./useFocusTrap";
+export * from "./useFormState";
+export * from "./useIsMounted";
+export * from "./useLiveAnnounce";
+export * from "./useOnKeyDown";
+export * from "./usePasswordStrength";
+export * from "./useRefocusOnActivator";
+export * from "./useResizeObserver";

package/src/useAssert/index.ts

@@ -0,0 +1 @@
+export { useAssert } from "./useAssert";

package/src/useAssert/useAssert.stories.mdx

@@ -0,0 +1,32 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Hooks/useAssert" />
+
+# useAssert
+
+During development, disrupt the render of a component when a conditional is met.
+This is helpful when you want to limit something that Typescript can't do...
+yet.
+
+```ts
+import { useAssert } from "@jobber/hooks";
+```
+
+```ts
+const child: ReactElement = <Avatar initials="JBR" />;
+// Make sure the child can only be an <Icon /> component
+useAssert(child.type !== Icon, "You can only pass in an <Icon /> child");
+```
+
+## Warn
+
+If you still want to assert but doesn't want to disrupt the render, you can pass
+in a `warn: true` param. This will throw a warning on your browser console.
+
+```ts
+const url: string = "http://getjobber.com";
+// Make sure the url always starts with https://
+useAssert(url.startsWith("http://"), "Please pass in an `https://` url", {
+  warn: true,
+});
+```

package/src/useAssert/useAssert.tsx

@@ -0,0 +1,19 @@
+import process from "process";
+
+interface Options {
+  readonly warn: boolean;
+}
+
+export function useAssert(
+  shouldShow: boolean,
+  message: string,
+  options?: Options,
+) {
+  if (process.env.NODE_ENV !== "production" && shouldShow) {
+    if (options?.warn) {
+      console.warn(message);
+    } else {
+      throw new Error(message);
+    }
+  }
+}

package/src/useCollectionQuery/index.ts

@@ -0,0 +1 @@
+export { useCollectionQuery } from "./useCollectionQuery";

package/src/useCollectionQuery/mdxUtils.ts

@@ -0,0 +1,190 @@
+import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
+
+export interface ListQueryType {
+  allPlanets: {
+    __typename?: "PlanetsConnection";
+    pageInfo: {
+      hasNextPage: boolean;
+      endCursor: string;
+    };
+    edges: Array<{
+      __typename?: "PlanetsEdge";
+      node: {
+        __typename?: "Planet";
+        name: "string";
+        id: "string";
+      };
+      cursor: string;
+    }>;
+    totalCount?: number;
+  };
+}
+
+export const LIST_QUERY = gql`
+  query ListQuery($cursor: String) {
+    allPlanets(first: 4, after: $cursor) {
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+      edges {
+        node {
+          name
+          id
+        }
+        cursor
+      }
+    }
+  }
+`;
+
+export const apolloClient = new ApolloClient({
+  uri: "https://swapi-graphql.netlify.app/.netlify/functions/index",
+  cache: new InMemoryCache(),
+});
+
+interface LoadingState {
+  loadingStatus: string;
+  loading: boolean;
+}
+
+export function getLoadingState(
+  loadingInitialContent: boolean,
+  loadingRefresh: boolean,
+  loadingNextPage: boolean,
+): LoadingState {
+  if (loadingInitialContent) {
+    return {
+      loading: true,
+      loadingStatus: "Initial Loading",
+    };
+  }
+  if (loadingRefresh) {
+    return {
+      loading: true,
+      loadingStatus: "Refreshing",
+    };
+  }
+  if (loadingNextPage) {
+    return {
+      loading: true,
+      loadingStatus: "Fetching More",
+    };
+  }
+  return {
+    loading: false,
+    loadingStatus: "Loaded",
+  };
+}
+
+export const propsList = [
+  {
+    id: 0,
+    title: "query",
+    caption: "The graphQL query that fetches the collection",
+    value: "DocumentNode",
+  },
+  {
+    id: 1,
+    title: "queryOptions",
+    caption:
+      "A list of options for us to pass into the apollo `useQuery` hook. \
+       Click to see more query options!",
+    url: "https://www.apollographql.com/docs/react/data/queries/#options",
+    value: "QueryHookOptions",
+  },
+  {
+    id: 2,
+    title: "getCollectionByPath",
+    caption:
+      "A function that returns the location where the \
+      {@link Collection} is located. The collection is the part of the \
+      result that needs to be paginated.",
+    value: "GetCollectionByPathFunction<TQuery>",
+  },
+  {
+    id: 3,
+    title: "subscription (optional)",
+    caption:
+      "A list of subscription options if \
+      you want to create a GraphQL subscription to listen for more content.",
+    value: "SubscriptionProps",
+  },
+];
+
+export const subscriptionPropsList = [
+  {
+    id: 0,
+    title: "document",
+    caption:
+      "The graphQL subscription that listens for more data. This query \
+      should return a single Node that matches the data structure in \
+      getCollectionByPath<TQuery>(...).edges.node and \
+      getCollectionByPath<TQuery>(...).nodes",
+    value: "DocumentNode",
+  },
+  {
+    id: 1,
+    title: "options",
+    caption:
+      " A list of variables to pass into the apollo `subscribeToMore` function.",
+    value: "SubscribeToMoreOptions<TSubscription>",
+  },
+  {
+    id: 2,
+    title: "getNodeByPath",
+    caption:
+      " A function that returns the location where the `Node` is \
+      located on the TSubscription object. It should return a single Node \
+      that matches the data structure in \
+      getCollectionByPath<TQuery>(...).edges.node and \
+      getCollectionByPath<TQuery>(...).nodes",
+    value: "GetNodeByPath<TSubscription>",
+  },
+];
+
+export const returnValues = [
+  {
+    id: 0,
+    title: "data",
+    caption: "The payload returned from the query",
+    value: "ListQueryType | undefined",
+  },
+  {
+    id: 1,
+    title: "error",
+    caption: "Any errors returned from the query",
+    value: "ApolloError | undefined",
+  },
+  {
+    id: 2,
+    title: "refresh",
+    caption: "A funtion that enables you to re-execute the query",
+    value: "() => void",
+  },
+  {
+    id: 3,
+    title: "nextPage",
+    caption:
+      "A funtion that helps you fetch the next set of results for a paginated list",
+    value: "() => void",
+  },
+  {
+    id: 4,
+    title: "loadingRefresh",
+    caption: "An indicator that a refresh is in progress",
+    value: "boolean",
+  },
+  {
+    id: 5,
+    title: "loadingNextPage",
+    caption: "An indicator that a fetch more is in progress",
+    value: "boolean",
+  },
+  {
+    id: 6,
+    title: "loadingInitialContent",
+    caption: "An indicator that the initial content is being fetched",
+    value: "boolean",
+  },
+];

package/src/useCollectionQuery/test-utilities/index.ts

@@ -0,0 +1,3 @@
+export * from "./queries";
+export * from "./utils";
+export * from "./mocks";

package/src/useCollectionQuery/test-utilities/mocks.tsx

@@ -0,0 +1,147 @@
+import { DocumentNode } from "@apollo/client";
+import { MockedProvider, MockedResponse } from "@apollo/react-testing";
+import React from "react";
+import { v1 as uuidv1 } from "uuid";
+import { SUBSCRIPTION_QUERY } from "./queries";
+
+export function wrapper(mocks: MockedResponse[]) {
+  function ApolloMockedProvider({
+    children,
+  }: {
+    children: React.ReactElement;
+  }) {
+    return (
+      <MockedProvider addTypename={true} mocks={mocks}>
+        {children}
+      </MockedProvider>
+    );
+  }
+
+  return ApolloMockedProvider as React.FunctionComponent;
+}
+
+let listQueryHasNextPage = true;
+export const listQueryResponseMock = jest.fn(id => {
+  return {
+    data: {
+      conversation: {
+        __typename: "Conversation",
+        smsMessages: {
+          __typename: "SMSMessageConnection",
+          edges: [
+            {
+              __typename: "SMSMessageEdge",
+              node: {
+                __typename: "SMSMessage",
+                id: id || uuidv1(),
+              },
+            },
+          ],
+          nodes: [
+            {
+              __typename: "SMSMessage",
+              id: id || uuidv1(),
+            },
+          ],
+          pageInfo: {
+            __typename: "PageInfo",
+            endCursor: "MZ",
+            hasNextPage: listQueryHasNextPage,
+          },
+        },
+      },
+    },
+  };
+});
+
+export const listQueryWithTotalCountResponseMock = jest.fn(id => {
+  return {
+    data: {
+      conversation: {
+        __typename: "Conversation",
+        smsMessages: {
+          __typename: "SMSMessageConnection",
+          edges: [
+            {
+              __typename: "SMSMessageEdge",
+              node: {
+                __typename: "SMSMessage",
+                id: id || uuidv1(),
+              },
+            },
+          ],
+          nodes: [
+            {
+              __typename: "SMSMessage",
+              id: id || uuidv1(),
+            },
+          ],
+          pageInfo: {
+            __typename: "PageInfo",
+            endCursor: "MZ",
+            hasNextPage: listQueryHasNextPage,
+          },
+          totalCount: 42,
+        },
+      },
+    },
+  };
+});
+
+export const subscriptionQueryMock = jest.fn(id => {
+  return {
+    data: {
+      conversationMessage: {
+        __typename: "conversationMessage",
+        id: "other stuff",
+        smsMessage: {
+          __typename: "SMSMessageData",
+          id: id,
+        },
+      },
+    },
+  };
+});
+
+export function buildListRequestMock(
+  query: DocumentNode,
+  responseMock: jest.Mock,
+  id?: string | undefined,
+  searchTerm?: string | undefined,
+) {
+  return {
+    request: {
+      query: query,
+      variables: { searchTerm: searchTerm },
+    },
+    result: () => responseMock(id),
+  };
+}
+
+export function buildSubscriptionRequestMock(id?: string | undefined) {
+  return {
+    request: {
+      query: SUBSCRIPTION_QUERY,
+    },
+    result: () => subscriptionQueryMock(id),
+    delay: 100,
+  };
+}
+
+export function buildListRequestMockForNextPage(
+  query: DocumentNode,
+  responseMock: jest.Mock,
+  id?: string | undefined,
+) {
+  return {
+    request: {
+      query: query,
+      variables: { cursor: "MZ" },
+    },
+    result: () => responseMock(id),
+  };
+}
+
+export function setListQueryMockHasNextPage(hasNextPage: boolean) {
+  listQueryHasNextPage = hasNextPage;
+}

package/src/useCollectionQuery/test-utilities/queries.ts

@@ -0,0 +1,95 @@
+import { gql } from "@apollo/client";
+
+export const LIST_QUERY = gql`
+  query ConversationMessages($cursor: string, $searchTerm: string) {
+    conversation(id: "MQ==") {
+      smsMessages(first: 1, after: $cursor, searchTerm: $searchTerm) {
+        edges {
+          node {
+            __typename
+            id
+          }
+        }
+        nodes {
+          __typename
+          id
+        }
+        pageInfo {
+          endCursor
+          hasNextPage
+        }
+      }
+    }
+  }
+`;
+
+export const LIST_QUERY_WITH_TOTAL_COUNT = gql`
+  query ConversationMessages($cursor: string, $searchTerm: string) {
+    conversation(id: "MQ==") {
+      smsMessages(first: 1, after: $cursor, searchTerm: $searchTerm) {
+        edges {
+          node {
+            __typename
+            id
+          }
+        }
+        nodes {
+          __typename
+          id
+        }
+        pageInfo {
+          endCursor
+          hasNextPage
+        }
+        totalCount
+      }
+    }
+  }
+`;
+
+export interface ListQueryType {
+  __typename?: "Query";
+  conversation?: {
+    __typename?: "Conversation";
+    smsMessages: {
+      edges: Array<{
+        __typename?: "SMSMessageConnection";
+        node: {
+          __typename?: "SMSMessage";
+          id: string;
+        };
+        cursor: string;
+      }>;
+      nodes: Array<{
+        __typename?: "SMSMessage";
+        id: string;
+      }>;
+      pageInfo: {
+        endCursor: string;
+        hasNextPage: boolean;
+      };
+      totalCount?: number;
+    };
+  };
+}
+
+export const SUBSCRIPTION_QUERY = gql`
+  subscription ConversationMessage($conversationId: EncodedId!) {
+    conversationMessage(conversationId: $conversationId) {
+      smsMessage {
+        __typename
+        id
+      }
+    }
+  }
+`;
+
+export interface SubscriptionQueryType {
+  __typename?: "Subscription";
+  conversationMessage?: {
+    smsMessage: {
+      __typename?: "SMSMessage";
+      id: string;
+    };
+  };
+}

package/src/useCollectionQuery/test-utilities/utils.ts

@@ -0,0 +1,3 @@
+export async function wait(milliseconds = 0) {
+  await new Promise(resolve => setTimeout(resolve, milliseconds));
+}

package/src/useCollectionQuery/uniqueEdges.tsx

@@ -0,0 +1,26 @@
+import { Node } from "./uniqueNodes";
+
+export interface Edge {
+  __typename?: unknown;
+  node: Node;
+  cursor: string;
+}
+
+export function createEdge(node: Node): Edge {
+  return {
+    node: node,
+    cursor: "",
+    __typename: `${node.__typename}Edge`,
+  };
+}
+
+export function uniqueEdges(edges: Edge[]): Edge[] {
+  const result = new Map<string, Edge>();
+  edges.forEach(edge => {
+    result.set(
+      `${edge.__typename}-${edge.node.__typename}-${edge.node.id}`,
+      edge,
+    );
+  });
+  return Array.from(result.values());
+}

package/src/useCollectionQuery/uniqueNodes.tsx

@@ -0,0 +1,12 @@
+export interface Node {
+  id: unknown;
+  __typename?: unknown;
+}
+
+export function uniqueNodes(nodes: Node[]): Node[] {
+  const result = new Map<string, Node>();
+  nodes.forEach(node => {
+    result.set(`${node.__typename}-${node.id}`, node);
+  });
+  return Array.from(result.values());
+}

package/src/useCollectionQuery/useCollectionQuery.stories.mdx

@@ -0,0 +1,129 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import { List } from "@jobber/components/List";
+import { Button } from "@jobber/components/Button";
+import { Spinner } from "@jobber/components/Spinner";
+import { InlineLabel } from "@jobber/components/InlineLabel";
+import * as hooks from ".";
+import {
+  LIST_QUERY,
+  apolloClient,
+  getLoadingState,
+  propsList,
+  returnValues,
+  subscriptionPropsList,
+} from "./mdxUtils";
+
+<Meta title="Hooks/useCollectionQuery" component={hooks.useCollectionQuery} />
+
+# UseCollectionQuery
+
+`useCollectionQuery` is a generalized hook that aids in the interaction of data
+collections. For use with any lists populated by graphQL collections.
+
+```tsx
+import { useCollectionQuery } from "@jobber/hooks";
+
+const {
+  data,
+  error,
+  refresh,
+  nextPage,
+  loadingRefresh,
+  loadingNextPage,
+  loadingInitialContent,
+} = useCollectionQuery<ListQueryType, SubscriptionType>({
+  query: LIST_QUERY,
+  queryOptions: {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "cache-first",
+  },
+  getCollectionByPath(items) {
+    return items.path.to.collection;
+  },
+  subscription: {
+    // subscriptions are optional
+    document: SUBSCRIPTION_QUERY,
+    getNodeByPath(items) {
+      return items.path.to.node;
+    },
+});
+```
+
+<Canvas>
+  <Story name="useCollectionQuery">
+    {() => {
+      const {
+        data,
+        refresh,
+        nextPage,
+        loadingRefresh,
+        loadingNextPage,
+        loadingInitialContent,
+      } = hooks.useCollectionQuery({
+        // useCollectionQuery should be called with the query type, and
+        // optionally, the subscription type. The Canvas errors with
+        // typing included, so typing has been removed in this example.
+        // Please see the first example for appropriate typing.
+        query: LIST_QUERY,
+        queryOptions: {
+          fetchPolicy: "network-only",
+          nextFetchPolicy: "cache-first",
+          client: apolloClient,
+        },
+        getCollectionByPath(items) {
+          return items.allPlanets;
+        },
+      });
+      const { loadingStatus, loading } = getLoadingState(
+        loadingInitialContent,
+        loadingRefresh,
+        loadingNextPage
+      );
+      let items = [];
+      if (data) {
+        items = data.allPlanets.edges.map(edge => {
+          return {
+            section: "Star Wars Planets",
+            id: edge.node.id,
+            icon: "starFill",
+            iconColor: "green",
+            content: edge.node.name,
+          };
+        });
+      }
+      return (
+        <>
+          <InlineLabel size="large">{loadingStatus}</InlineLabel>
+          {loading && <Spinner size="small" inline={true} />}
+          <List items={items} />
+          <Button
+            label={"Refresh"}
+            onClick={() => {
+              refresh();
+            }}
+          />
+          <Button
+            label={"Fetch More"}
+            onClick={() => {
+              nextPage();
+            }}
+          />
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Props
+
+<List items={propsList} />
+
+## Subscription props
+
+<List items={subscriptionPropsList} />
+
+## Return values
+
+<List items={returnValues} />
+
+---