@jobber/hooks 2.0.3-dar.46 → 2.0.3-es6.48

package/dist/index.js

@@ -8,4 +8,3 @@ export * from "./useOnKeyDown";
 export * from "./usePasswordStrength";
 export * from "./useRefocusOnActivator";
 export * from "./useResizeObserver";
-//# sourceMappingURL=index.js.map

package/dist/useAssert/index.js

@@ -1,2 +1 @@
 export { useAssert } from "./useAssert";
-//# sourceMappingURL=index.js.map

package/dist/useAssert/useAssert.js

@@ -9,4 +9,3 @@ export function useAssert(shouldShow, message, options) {
         }
     }
 }
-//# sourceMappingURL=useAssert.js.map

package/dist/useCollectionQuery/index.js

@@ -1,2 +1 @@
 export { useCollectionQuery } from "./useCollectionQuery";
-//# sourceMappingURL=index.js.map

package/dist/useCollectionQuery/mdxUtils.js

@@ -146,4 +146,3 @@ export const returnValues = [
         value: "boolean",
     },
 ];
-//# sourceMappingURL=mdxUtils.js.map

package/dist/useCollectionQuery/test-utilities/index.js

@@ -1,4 +1,3 @@
 export * from "./queries";
 export * from "./utils";
 export * from "./mocks";
-//# sourceMappingURL=index.js.map

package/dist/useCollectionQuery/test-utilities/mocks.js

@@ -118,4 +118,3 @@ export function buildListRequestMockForNextPage(query, responseMock, id) {
 export function setListQueryMockHasNextPage(hasNextPage) {
     listQueryHasNextPage = hasNextPage;
 }
-//# sourceMappingURL=mocks.js.map

package/dist/useCollectionQuery/test-utilities/queries.js

@@ -54,4 +54,3 @@ export const SUBSCRIPTION_QUERY = gql `
     }
   }
 `;
-//# sourceMappingURL=queries.js.map

package/dist/useCollectionQuery/test-utilities/utils.js

@@ -12,4 +12,3 @@ export function wait(milliseconds = 0) {
         yield new Promise(resolve => setTimeout(resolve, milliseconds));
     });
 }
-//# sourceMappingURL=utils.js.map

package/dist/useCollectionQuery/uniqueEdges.js

@@ -12,4 +12,3 @@ export function uniqueEdges(edges) {
     });
     return Array.from(result.values());
 }
-//# sourceMappingURL=uniqueEdges.js.map

package/dist/useCollectionQuery/uniqueNodes.js

@@ -5,4 +5,3 @@ export function uniqueNodes(nodes) {
     });
     return Array.from(result.values());
 }
-//# sourceMappingURL=uniqueNodes.js.map

package/dist/useCollectionQuery/useCollectionQuery.js

@@ -174,4 +174,3 @@ function getUpdatedNodes(prevNodes, nextNodes, appendToEnd = true) {
         : [...nextNodes, ...prevNodes];
     return uniqueNodes(newNodes);
 }
-//# sourceMappingURL=useCollectionQuery.js.map

package/dist/useCollectionQuery/useCollectionQuery.test.js

@@ -323,4 +323,3 @@ describe("useCollectionQuery", () => {
         });
     });
 });
-//# sourceMappingURL=useCollectionQuery.test.js.map

package/dist/useFocusTrap/index.js

@@ -1,2 +1 @@
 export { useFocusTrap } from "./useFocusTrap";
-//# sourceMappingURL=index.js.map

package/dist/useFocusTrap/useFocusTrap.js

@@ -57,4 +57,3 @@ function getElements(ref) {
     const lastElement = elements[elements.length - 1];
     return { firstElement, lastElement };
 }
-//# sourceMappingURL=useFocusTrap.js.map

package/dist/useFocusTrap/useFocusTrap.test.js

@@ -45,4 +45,3 @@ function TestComponent({ trap = true }) {
             React.createElement("span", { tabIndex: -1 })),
         React.createElement("input", { type: "calendar" })));
 }
-//# sourceMappingURL=useFocusTrap.test.js.map

package/dist/useFormState/index.js

@@ -1,2 +1 @@
 export { useFormState } from "./useFormState";
-//# sourceMappingURL=index.js.map

package/dist/useFormState/useFormState.js

@@ -6,4 +6,3 @@ export function useFormState() {
     });
     return [formState, setFormState];
 }
-//# sourceMappingURL=useFormState.js.map

package/dist/useIsMounted/index.js

@@ -1,2 +1 @@
 export { useIsMounted } from "./useIsMounted";
-//# sourceMappingURL=index.js.map

package/dist/useIsMounted/useIsMounted.js

@@ -25,4 +25,3 @@ export function useIsMounted() {
     }, []);
     return isMounted;
 }
-//# sourceMappingURL=useIsMounted.js.map

package/dist/useIsMounted/useIsMounted.test.js

@@ -11,4 +11,3 @@ it("should return false when the component is unmounted", () => {
     unmount();
     expect(isMounted.current).toBe(false);
 });
-//# sourceMappingURL=useIsMounted.test.js.map

package/dist/useLiveAnnounce/index.js

@@ -1,2 +1 @@
 export { useLiveAnnounce } from "./useLiveAnnounce";
-//# sourceMappingURL=index.js.map

package/dist/useLiveAnnounce/useLiveAnnounce.js

@@ -36,4 +36,3 @@ function createAnnouncedElement() {
     document.body.appendChild(el);
     return el;
 }
-//# sourceMappingURL=useLiveAnnounce.js.map

package/dist/useLiveAnnounce/useLiveAnnounce.test.js

@@ -53,4 +53,3 @@ it("should only have 1 div to announce a message on a single instance of the hoo
         expect(screen.getByRole("status").textContent).toBe(secondMessage);
     });
 }));
-//# sourceMappingURL=useLiveAnnounce.test.js.map

package/dist/useOnKeyDown/index.js

@@ -1,2 +1 @@
 export { useOnKeyDown } from "./useOnKeyDown";
-//# sourceMappingURL=index.js.map

package/dist/useOnKeyDown/useOnKeyDown.js

@@ -24,4 +24,3 @@ export function useOnKeyDown(callback, keys) {
         }
     }
 }
-//# sourceMappingURL=useOnKeyDown.js.map

package/dist/useOnKeyDown/useOnKeyDown.test.js

@@ -16,4 +16,3 @@ function TestComponent({ callback }) {
     useOnKeyDown(callback, "Enter");
     return React.createElement(React.Fragment, null, "Look at me!");
 }
-//# sourceMappingURL=useOnKeyDown.test.js.map

package/dist/usePasswordStrength/index.js

@@ -1,2 +1 @@
 export { usePasswordStrength } from "./usePasswordStrength";
-//# sourceMappingURL=index.js.map

package/dist/usePasswordStrength/usePasswordStrength.d.ts

@@ -1,8 +1,7 @@
-import calculateStrength from "zxcvbn";
 export declare function usePasswordStrength(password: string, dictionary?: string[]): {
     guesses: number;
-    score: calculateStrength.ZXCVBNScore;
-    warning: calculateStrength.ZXCVBNFeedbackWarning;
-    suggestions: string[];
-    timeToCrack: string | number;
+    score: number;
+    warning: any;
+    suggestions: any;
+    timeToCrack: any;
 };

package/dist/usePasswordStrength/usePasswordStrength.js

@@ -1,7 +1,9 @@
 import { useMemo } from "react";
-import calculateStrength from "zxcvbn";
+import calculateStrength from "@caesar-team/zxcvbn-lightweight";
 export function usePasswordStrength(password, dictionary) {
-    const { guesses, score, feedback: { warning, suggestions }, crack_times_display: { offline_fast_hashing_1e10_per_second: timeToCrack }, } = useMemo(() => calculateStrength(password, dictionary), [password, dictionary]);
+    const { guesses, score, 
+    // @ts-expect-error - bypass baby!
+    feedback: { warning, suggestions }, crackTimesDisplay: { offline_fast_hashing_1e10_per_second: timeToCrack }, } = useMemo(() => calculateStrength(password, dictionary), [password, dictionary]);
     return {
         guesses,
         score,
@@ -10,4 +12,3 @@ export function usePasswordStrength(password, dictionary) {
         timeToCrack,
     };
 }
-//# sourceMappingURL=usePasswordStrength.js.map

package/dist/useRefocusOnActivator/index.js

@@ -1,2 +1 @@
 export { useRefocusOnActivator } from "./useRefocusOnActivator";
-//# sourceMappingURL=index.js.map

package/dist/useRefocusOnActivator/useRefocusOnActivator.js

@@ -21,4 +21,3 @@ export function useRefocusOnActivator(active) {
         };
     }, [active]);
 }
-//# sourceMappingURL=useRefocusOnActivator.js.map

package/dist/useResizeObserver/index.js

@@ -1,2 +1 @@
 export * from "./useResizeObserver";
-//# sourceMappingURL=index.js.map

package/dist/useResizeObserver/useResizeObserver.js

@@ -49,4 +49,3 @@ function getSize(sizes, comparable) {
     return (sortedSizes.find(value => value <= comparable) ||
         sortedSizes[sortedSizes.length - 1]);
 }
-//# sourceMappingURL=useResizeObserver.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/hooks",
-  "version": "2.0.3-dar.46+0c5dadd0",
+  "version": "2.0.3-es6.48+fca738f5",
   "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",
@@ -27,16 +28,16 @@
     "uuid": "^8.3.2"
   },
   "dependencies": {
+    "@caesar-team/zxcvbn-lightweight": "^4.5.2",
     "@use-it/event-listener": "^0.1.6",
     "lodash": "^4.17.20",
     "resize-observer-polyfill": "^1.5.1",
     "ts-xor": "^1.0.8",
-    "use-resize-observer": "^6.1.0",
-    "zxcvbn": "^4.4.2"
+    "use-resize-observer": "^6.1.0"
   },
   "peerDependencies": {
     "@apollo/client": "^3.7.10",
     "react": "^18"
   },
-  "gitHead": "0c5dadd0305cfbb22fed038f99ab0e4239407380"
+  "gitHead": "fca738f5c76b58d95b9e89bf849f38fec161661f"
 }

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;
+}