@mitodl/smoot-design 0.0.0-0a23f44

package/dist/esm/components/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,30 @@
+import styled from "@emotion/styled";
+/**
+ * VisuallyHidden is a utility component that hides its children from sighted
+ * users, but keeps them accessible to screen readers.
+ *
+ * Often, screenreader-only content can be handled with an `aria-label`. However,
+ * occasionally we need actual elements.
+ *
+ * Example:
+ *  - a visually hidden aria-live section that reads announcements that
+ *    isual users can ascertain in some other way.
+ *  - a visually hidden Heading for a section whose purpose is clear for sighted users
+ *  - a visually hidden description used for aria-describeddby
+ *     - There is an aria-description attribute that can be used to provide a
+ *       without an actual element on the page. However, it is introduced in
+ *       ARIA 1.3 (working draft), not compatible with some screen readers, and
+ *       flagged problematic by our linting.
+ *
+ * The CSS here is based on https://inclusive-components.design/tooltips-toggletips/
+ */
+const VisuallyHidden = styled.span({
+    clipPath: "inset(100%)",
+    clip: "rect(1px, 1px, 1px, 1px)",
+    height: "1px",
+    overflow: "hidden",
+    position: "absolute",
+    whiteSpace: "nowrap",
+    width: "1px",
+});
+export { VisuallyHidden };

package/dist/esm/components/VisuallyHidden/VisuallyHidden.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { VisuallyHidden } from "./VisuallyHidden";
+declare const meta: Meta<typeof VisuallyHidden>;
+export default meta;
+type Story = StoryObj<typeof VisuallyHidden>;
+export declare const ScreenreaderOnly: Story;

package/dist/esm/components/VisuallyHidden/VisuallyHidden.stories.js

@@ -0,0 +1,10 @@
+import { VisuallyHidden } from "./VisuallyHidden";
+const meta = {
+    title: "smoot-design/VisuallyHidden",
+    component: VisuallyHidden,
+    args: {
+        children: "Not visible, but screen readers can still read this text.",
+    },
+};
+export default meta;
+export const ScreenreaderOnly = {};

package/dist/esm/components/internal/FormHelpers/FormHelpers.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+declare const Description: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    error?: boolean;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+type ControlLabelProps = {
+    htmlFor: string;
+    label: React.ReactNode;
+    required?: boolean;
+    id?: string;
+    fullWidth?: boolean;
+};
+declare const ControlLabel: React.FC<ControlLabelProps>;
+type FormFieldWrapperProps = {
+    label: React.ReactNode;
+    required?: boolean;
+    helpText?: string;
+    error?: boolean;
+    errorText?: string;
+    className?: string;
+    fullWidth?: boolean;
+    /**
+     * The id of the input element. If not provided, a unique id will be generated.
+     */
+    id?: string;
+    children: (childProps: {
+        id: string;
+        required?: boolean;
+        error?: boolean;
+        fullWidth?: boolean;
+        labelId: string;
+        "aria-describedby"?: string;
+    }) => React.ReactNode;
+};
+declare const FormFieldWrapper: React.FC<FormFieldWrapperProps>;
+export { FormFieldWrapper, ControlLabel, Description };
+export type { FormFieldWrapperProps, ControlLabelProps };

package/dist/esm/components/internal/FormHelpers/FormHelpers.js

@@ -0,0 +1,73 @@
+import * as React from "react";
+import styled from "@emotion/styled";
+import { RiErrorWarningLine } from "@remixicon/react";
+import Typography from "@mui/material/Typography";
+const Required = styled.span(({ theme }) => ({
+    color: theme.custom.colors.lightRed,
+    marginLeft: "4px",
+}));
+const Description = styled.div(({ theme, error }) => [
+    Object.assign(Object.assign({}, theme.typography.body2), { color: error
+            ? theme.custom.colors.lightRed
+            : theme.custom.colors.silverGrayDark }),
+    error && {
+        textIndent: "-24px",
+        paddingLeft: "24px",
+        "> svg:first-of-type": {
+            marginRight: "4px",
+            transform: "translateY(2px)",
+            width: "18px",
+            height: "18px",
+            position: "relative",
+            top: "2px",
+        },
+    },
+]);
+const Container = styled.div(({ fullWidth }) => [
+    {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "start",
+        "> *:not(:last-child)": {
+            marginBottom: "4px",
+        },
+    },
+    fullWidth && {
+        width: "100%",
+    },
+]);
+const ControlLabel = ({ htmlFor, label, required, id, fullWidth, }) => {
+    return (React.createElement(Typography, { id: id, component: "label", htmlFor: htmlFor, variant: "subtitle2", sx: { marginBottom: "4px", width: fullWidth ? "100%" : "auto" } },
+        label,
+        required ? React.createElement(Required, { "aria-hidden": "true" }, "*") : null));
+};
+const FormFieldWrapper = ({ label, required, helpText, error, errorText, className, fullWidth, id, children, }) => {
+    const fallbackInputId = React.useId();
+    const inputId = id || fallbackInputId;
+    const helpId = React.useId();
+    const errorId = React.useId();
+    const labelId = React.useId();
+    /**
+     * aria-errormessage would be more semantic for the error message but has
+     * somewhat limited support. See https://github.com/w3c/aria/issues/2048 for
+     * some related information.
+     */
+    const describedBy = [helpText && helpId, error && errorText && errorId]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    return (React.createElement(Container, { className: className, fullWidth: fullWidth },
+        React.createElement(ControlLabel, { htmlFor: inputId, id: labelId, label: label, required: required, fullWidth: fullWidth }),
+        children({
+            id: inputId,
+            error,
+            required,
+            labelId,
+            fullWidth,
+            "aria-describedby": describedBy,
+        }),
+        helpText && React.createElement(Description, { id: helpId }, helpText),
+        error && errorText && (React.createElement(Description, { id: errorId, error: true },
+            React.createElement(RiErrorWarningLine, { fontSize: "inherit" }),
+            errorText))));
+};
+export { FormFieldWrapper, ControlLabel, Description };

package/dist/esm/components/internal/FormHelpers/FormHelpers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/internal/FormHelpers/FormHelpers.test.js

@@ -0,0 +1,91 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { FormFieldWrapper } from "./FormHelpers";
+import { ThemeProvider } from "../../../components/ThemeProvider/ThemeProvider";
+import { faker } from "@faker-js/faker/locale/en";
+const assertDescription = ({ text, total, exists, }) => {
+    var _a;
+    const input = screen.getByRole("textbox");
+    const describedBy = input.getAttribute("aria-describedby");
+    const descriptionIds = (_a = describedBy === null || describedBy === void 0 ? void 0 : describedBy.split(" ")) !== null && _a !== void 0 ? _a : [];
+    if (total === 0) {
+        expect(describedBy).toBe(null);
+    }
+    expect(descriptionIds.length).toBe(total);
+    const description = screen.queryByText(text);
+    expect(!!description).toBe(exists);
+    if (exists) {
+        expect(description).toBeInTheDocument();
+        expect(descriptionIds).toContain(description === null || description === void 0 ? void 0 : description.id);
+    }
+};
+describe("FormFieldWrapper", () => {
+    const setup = (props) => {
+        const defaults = {
+            name: "test-name",
+            value: "test-value",
+            label: "test-label",
+        };
+        const { rerender: _rerender } = render(React.createElement(FormFieldWrapper, Object.assign({}, defaults, props), (_a) => {
+            var { error, labelId, fullWidth } = _a, childProps = __rest(_a, ["error", "labelId", "fullWidth"]);
+            return (React.createElement("input", Object.assign({}, childProps)));
+        }), {
+            wrapper: ThemeProvider,
+        });
+        const rerender = (newProps) => {
+            _rerender(React.createElement(FormFieldWrapper, Object.assign({}, defaults, newProps), (_a) => {
+                var { error, labelId, fullWidth } = _a, childProps = __rest(_a, ["error", "labelId", "fullWidth"]);
+                return (React.createElement("input", Object.assign({}, childProps)));
+            }));
+        };
+        return { rerender };
+    };
+    it("Labels the input", () => {
+        const label = faker.lorem.words();
+        setup({ label });
+        const input = screen.getByRole("textbox", { name: label });
+        expect(input).toBeInstanceOf(HTMLInputElement);
+    });
+    it("Has a description only if description provided", () => {
+        const label = faker.lorem.words();
+        const helpText = faker.lorem.words();
+        const { rerender } = setup({ label, helpText });
+        assertDescription({ text: helpText, total: 1, exists: true });
+        rerender({ label });
+        assertDescription({ text: helpText, total: 0, exists: false });
+    });
+    it("Has an error message only if errorText provided AND error=true", () => {
+        const label = faker.lorem.words();
+        const errorText = faker.lorem.words();
+        const { rerender } = setup({ label, errorText, error: true });
+        assertDescription({ text: errorText, total: 1, exists: true });
+        rerender({ label, errorText });
+        assertDescription({ text: errorText, total: 0, exists: false });
+        rerender({ label, error: true });
+        assertDescription({ text: errorText, total: 0, exists: false });
+        rerender({ label, errorText, error: true });
+        assertDescription({ text: errorText, total: 1, exists: true });
+    });
+    it("Shows both description and errormessage if both provided and error", () => {
+        const label = faker.lorem.words();
+        const errorText = faker.lorem.words();
+        const helpText = faker.lorem.words();
+        const { rerender } = setup({ label, errorText, helpText });
+        assertDescription({ text: helpText, total: 1, exists: true });
+        assertDescription({ text: errorText, total: 1, exists: false });
+        rerender({ label, errorText, helpText, error: true });
+        assertDescription({ text: helpText, total: 2, exists: true });
+        assertDescription({ text: errorText, total: 2, exists: true });
+    });
+});

package/dist/esm/index.d.ts

@@ -0,0 +1,25 @@
+export { default as styled } from "@emotion/styled";
+export { css, Global } from "@emotion/react";
+export { ThemeProvider, createTheme, } from "./components/ThemeProvider/ThemeProvider";
+export { Alert } from "./components/Alert/Alert";
+export type { AlertProps } from "./components/Alert/Alert";
+export { Button, ButtonLoadingIcon, ButtonLink, } from "./components/Button/Button";
+export type { ButtonProps, ButtonLinkProps } from "./components/Button/Button";
+export { ActionButton, ActionButtonLink, } from "./components/Button/ActionButton";
+export type { ActionButtonProps, ActionButtonLinkProps, } from "./components/Button/ActionButton";
+export type { LinkAdapterPropsOverrides } from "./components/LinkAdapter/LinkAdapter";
+export { Input, AdornmentButton } from "./components/Input/Input";
+export type { InputProps, AdornmentButtonProps } from "./components/Input/Input";
+export { TextField } from "./components/TextField/TextField";
+export type { TextFieldProps } from "./components/TextField/TextField";
+export { Checkbox, childCheckboxStyles } from "./components/Checkbox/Checkbox";
+export type { CheckboxProps } from "./components/Checkbox/Checkbox";
+export { CheckboxChoiceField } from "./components/CheckboxChoiceField/CheckboxChoiceField";
+export type { CheckboxChoiceFieldProps } from "./components/CheckboxChoiceField/CheckboxChoiceField";
+export { RadioChoiceField, BooleanRadioChoiceField, } from "./components/RadioChoiceField/RadioChoiceField";
+export type { RadioChoiceFieldProps, BooleanRadioChoiceFieldProps, } from "./components/RadioChoiceField/RadioChoiceField";
+export { SrAnnouncer } from "./components/SrAnnouncer/SrAnnouncer";
+export type { SrAnnouncerProps } from "./components/SrAnnouncer/SrAnnouncer";
+export { TabButton, TabButtonLink, TabButtonList, } from "./components/TabButtons/TabButtonList";
+export { VERSION } from "./VERSION";
+export { VisuallyHidden } from "./components/VisuallyHidden/VisuallyHidden";

package/dist/esm/index.js

@@ -0,0 +1,16 @@
+"use client";
+export { default as styled } from "@emotion/styled";
+export { css, Global } from "@emotion/react";
+export { ThemeProvider, createTheme, } from "./components/ThemeProvider/ThemeProvider";
+export { Alert } from "./components/Alert/Alert";
+export { Button, ButtonLoadingIcon, ButtonLink, } from "./components/Button/Button";
+export { ActionButton, ActionButtonLink, } from "./components/Button/ActionButton";
+export { Input, AdornmentButton } from "./components/Input/Input";
+export { TextField } from "./components/TextField/TextField";
+export { Checkbox, childCheckboxStyles } from "./components/Checkbox/Checkbox";
+export { CheckboxChoiceField } from "./components/CheckboxChoiceField/CheckboxChoiceField";
+export { RadioChoiceField, BooleanRadioChoiceField, } from "./components/RadioChoiceField/RadioChoiceField";
+export { SrAnnouncer } from "./components/SrAnnouncer/SrAnnouncer";
+export { TabButton, TabButtonLink, TabButtonList, } from "./components/TabButtons/TabButtonList";
+export { VERSION } from "./VERSION";
+export { VisuallyHidden } from "./components/VisuallyHidden/VisuallyHidden";

package/dist/esm/jest-setup.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/esm/jest-setup.js

@@ -0,0 +1,16 @@
+import "@testing-library/jest-dom";
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const failOnConsole = require("jest-fail-on-console");
+failOnConsole();
+beforeAll(() => {
+    const scrollBy = jest.fn();
+    HTMLElement.prototype.scrollBy = scrollBy;
+});
+afterEach(() => {
+    /**
+     * Clear all mock call counts between tests.
+     * This does NOT clear mock implementations.
+     * Mock implementations are always cleared between test files.
+     */
+    jest.clearAllMocks();
+});

package/dist/esm/jsdom-extended.d.ts

@@ -0,0 +1,6 @@
+import { TestEnvironment } from "jest-environment-jsdom";
+import { EnvironmentContext, JestEnvironmentConfig } from "@jest/environment";
+declare class JSDOMEnvironmentExtended extends TestEnvironment {
+    constructor(config: JestEnvironmentConfig, context: EnvironmentContext);
+}
+export default JSDOMEnvironmentExtended;

package/dist/esm/jsdom-extended.js

@@ -0,0 +1,12 @@
+// Jest environment extended with Web APIs para tranbajar con MSW
+import { TestEnvironment } from "jest-environment-jsdom";
+class JSDOMEnvironmentExtended extends TestEnvironment {
+    constructor(config, context) {
+        super(config, context);
+        this.global.TransformStream = TransformStream;
+        this.global.ReadableStream = ReadableStream;
+        this.global.Response = Response;
+        this.global.TextDecoderStream = TextDecoderStream;
+    }
+}
+export default JSDOMEnvironmentExtended;

package/dist/esm/story-utils/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A type helper just to make sure an array contains union values.
+ */
+declare const enumValues: <T extends string | undefined>(obj: Record<NonNullable<T>, unknown>) => NonNullable<T>[];
+declare const gitLink: (filepath: string) => string;
+export { enumValues, gitLink };

package/dist/esm/story-utils/index.js

@@ -0,0 +1,13 @@
+/**
+ * A type helper just to make sure an array contains union values.
+ */
+const enumValues = (obj) => {
+    return Object.keys(obj);
+};
+const gitLink = (filepath) => {
+    if (!filepath.startsWith("src/")) {
+        throw new Error(`Invalid filepath: ${filepath}\nShould start with "src/"`);
+    }
+    return `https://github.com/mitodl/smoot-design/blob/${process.env.STORYBOOK_GIT_SHA}/${filepath}`;
+};
+export { enumValues, gitLink };

package/dist/esm/utils/composeRefs.d.ts

@@ -0,0 +1,7 @@
+import type { MutableRefObject, ForwardedRef, RefCallback } from "react";
+/**
+ * Compose 2+ refs. Useful when a reusable component needs a ref itself, but
+ * consumers may also need the ref.
+ */
+declare const composeRefs: <T>(...refs: (ForwardedRef<T> | MutableRefObject<T | undefined> | RefCallback<T>)[]) => RefCallback<T>;
+export { composeRefs };

package/dist/esm/utils/composeRefs.js

@@ -0,0 +1,17 @@
+/**
+ * Compose 2+ refs. Useful when a reusable component needs a ref itself, but
+ * consumers may also need the ref.
+ */
+const composeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref) {
+                ref.current = value;
+            }
+        });
+    };
+};
+export { composeRefs };

package/dist/esm/utils/composeRefs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/composeRefs.test.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { composeRefs } from "./composeRefs";
+import { render, screen } from "@testing-library/react";
+describe("composeRefs", () => {
+    test("Composing object + fn ref", () => {
+        const objRef1 = React.createRef();
+        const objRef2 = React.createRef();
+        const fnRef1 = jest.fn();
+        const fnRef2 = jest.fn();
+        render(React.createElement("div", { "data-testid": "my-div", ref: composeRefs(objRef1, objRef2, fnRef1, fnRef2) }));
+        const el = screen.getByTestId("my-div");
+        expect(objRef1.current).toBe(el);
+        expect(objRef2.current).toBe(el);
+        expect(fnRef1).toHaveBeenCalledWith(el);
+        expect(fnRef2).toHaveBeenCalledWith(el);
+    });
+});

package/dist/esm/utils/retryingFetch.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A wrapper around fetch that retries the request on certain error codes.
+ *
+ * By default:
+ *
+ * Requests will be retried if max retries not exceeded and :
+ *  - The status code is >= 400 AND NOT in the NO_RETRY_ERROR_CODES list,
+ *  - OR the request promise rejected (network error)
+ *
+ * The retry delay is exponential, 1s, 2s, 4s, 8s, ... maxing at 30s.
+ *
+ * Maximum retries is 3.
+ *
+ * NOTE:
+ *  - When NODE_ENV="test", the maximum retries is set 0 by default but can be
+ *  set via the TEST_ENV_MAX_RETRIES environment variable.
+ */
+declare const retryingFetch: ((input: RequestInfo | URL, init?: RequestInit) => Promise<Response>) & typeof globalThis.fetch;
+export default retryingFetch;

package/dist/esm/utils/retryingFetch.js

@@ -0,0 +1,96 @@
+const MAX_RETRIES = 3;
+const NO_RETRY_ERROR_CODES = [400, 401, 403, 404, 405, 409, 422];
+const BASE_RETRY_DELAY = process.env.NODE_ENV === "test" ? 10 : 1000;
+// This is a workaround to ensure retryingFetch uses MSW's fetch version in tests.
+// See https://github.com/jonbern/fetch-retry/issues/95#issuecomment-2613990480
+const fetch = (...args) => window.fetch(...args);
+// From https://github.com/jonbern/fetch-retry/blob/master/index.js
+const fetchRetry = (fetch, { retryDelay, retryOn }) => {
+    return (input, init) => {
+        return new Promise((resolve, reject) => {
+            const wrappedFetch = (attempt) => {
+                const _input = typeof Request !== "undefined" && input instanceof Request
+                    ? input.clone()
+                    : input;
+                fetch(_input, init)
+                    .then((response) => {
+                    try {
+                        Promise.resolve(retryOn(attempt, null, response))
+                            .then((retryOnResponse) => {
+                            if (retryOnResponse) {
+                                retry(attempt, null, response);
+                            }
+                            else {
+                                resolve(response);
+                            }
+                        })
+                            .catch(reject);
+                    }
+                    catch (error) {
+                        reject(error);
+                    }
+                })
+                    .catch((error) => {
+                    try {
+                        Promise.resolve(retryOn(attempt, error, null))
+                            .then((retryOnResponse) => {
+                            if (retryOnResponse) {
+                                retry(attempt, error, null);
+                            }
+                            else {
+                                reject(error);
+                            }
+                        })
+                            .catch((error) => {
+                            reject(error);
+                        });
+                    }
+                    catch (error) {
+                        reject(error);
+                    }
+                });
+            };
+            const retry = (attempt, error, response) => {
+                const delay = retryDelay(attempt, error, response);
+                setTimeout(() => {
+                    wrappedFetch(++attempt);
+                }, delay);
+            };
+            wrappedFetch(0);
+        });
+    };
+};
+/**
+ * A wrapper around fetch that retries the request on certain error codes.
+ *
+ * By default:
+ *
+ * Requests will be retried if max retries not exceeded and :
+ *  - The status code is >= 400 AND NOT in the NO_RETRY_ERROR_CODES list,
+ *  - OR the request promise rejected (network error)
+ *
+ * The retry delay is exponential, 1s, 2s, 4s, 8s, ... maxing at 30s.
+ *
+ * Maximum retries is 3.
+ *
+ * NOTE:
+ *  - When NODE_ENV="test", the maximum retries is set 0 by default but can be
+ *  set via the TEST_ENV_MAX_RETRIES environment variable.
+ */
+const retryingFetch = fetchRetry(fetch, {
+    retryDelay: (attempt, _error, _response) => {
+        return Math.min(BASE_RETRY_DELAY * Math.pow(2, attempt), 30000);
+    },
+    retryOn: (attempt, _error, response) => {
+        if (attempt >= MAX_RETRIES) {
+            return false;
+        }
+        if (response) {
+            if (response.status < 400)
+                return false;
+            return !NO_RETRY_ERROR_CODES.includes(response.status);
+        }
+        return true;
+    },
+});
+export default retryingFetch;

package/dist/esm/utils/retryingFetch.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/retryingFetch.test.js

@@ -0,0 +1,46 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import retryingFetch from "./retryingFetch";
+import { http, HttpResponse } from "msw";
+import { setupServer } from "msw/node";
+const counter = jest.fn(); // use jest.fn as counter because it resets on each test
+const NETWORK_SUCCESS_URL = "http://localhost:3456/success";
+const NETWORK_ERROR_URL = "http://localhost:3456/error";
+const server = setupServer(http.get(NETWORK_SUCCESS_URL, (_a) => __awaiter(void 0, [_a], void 0, function* ({ request }) {
+    var _b;
+    counter();
+    const url = new URL(request.url);
+    const status = +((_b = url.searchParams.get("status")) !== null && _b !== void 0 ? _b : 200);
+    return HttpResponse.text(`Status ${status}`, { status });
+})), http.get(NETWORK_ERROR_URL, () => __awaiter(void 0, void 0, void 0, function* () {
+    counter();
+    return HttpResponse.error();
+})));
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+describe("retryingFetch", () => {
+    beforeAll(() => { });
+    test.each([200, 201, 202, 367, 400, 401, 403])("should not retry on %s", (status) => __awaiter(void 0, void 0, void 0, function* () {
+        const result = yield retryingFetch(`${NETWORK_SUCCESS_URL}?status=${status}`);
+        expect(yield result.text()).toBe(`Status ${status}`);
+        expect(counter).toHaveBeenCalledTimes(1);
+    }));
+    test.each([429, 500, 501, 502, 503])("should retry on %s", (status) => __awaiter(void 0, void 0, void 0, function* () {
+        const result = yield retryingFetch(`${NETWORK_SUCCESS_URL}?status=${status}`);
+        expect(yield result.text()).toBe(`Status ${status}`);
+        expect(counter).toHaveBeenCalledTimes(4);
+    }));
+    test("should retry on error", () => __awaiter(void 0, void 0, void 0, function* () {
+        const result = yield retryingFetch(NETWORK_ERROR_URL).catch((err) => err);
+        expect(result).toBeInstanceOf(Error);
+        expect(counter).toHaveBeenCalledTimes(4);
+    }));
+});

package/dist/esm/utils/useDevCheckStable.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Emits `console.error` if two subsequent values of `jsonSerializable` serialize
+ * to the same thing but are different references.
+ *
+ * This hook does NOT run in production.
+ */
+declare const useDevCheckStable: (jsonSerializable: unknown, msg?: string) => void;
+export { useDevCheckStable };

package/dist/esm/utils/useDevCheckStable.js

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from "react";
+/**
+ * Emits `console.error` if two subsequent values of `jsonSerializable` serialize
+ * to the same thing but are different references.
+ *
+ * This hook does NOT run in production.
+ */
+const useDevCheckStable = (jsonSerializable, msg = "The value has changed. This may cause unnecessary re-renders") => {
+    if (process.env.NODE_ENV !== "production") {
+        /**
+         * Calling hooks conditionally based on env vars is not really a problem.
+         * In a given environment, the hook will always run or always not run.
+         */
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const valRef = useRef(jsonSerializable);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => {
+            const sameJson = JSON.stringify(valRef.current) === JSON.stringify(jsonSerializable);
+            const differentRefs = valRef.current !== jsonSerializable;
+            if (!sameJson || differentRefs) {
+                console.error(`useDevCheckStable: ${msg}`, valRef.current, jsonSerializable);
+            }
+        }, [jsonSerializable, msg]);
+    }
+};
+export { useDevCheckStable };

package/dist/esm/utils/useInterval.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Calls a function at a specified interval.
+ *
+ * Based on https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ */
+declare const useInterval: (callback: () => void, delay: number | null) => void;
+export { useInterval };

package/dist/esm/utils/useInterval.js

@@ -0,0 +1,22 @@
+import { useRef, useEffect } from "react";
+/**
+ * Calls a function at a specified interval.
+ *
+ * Based on https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ */
+const useInterval = (callback, delay) => {
+    const savedCallback = useRef(null);
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    useEffect(() => {
+        if (delay !== null) {
+            const id = setInterval(() => { var _a; return (_a = savedCallback.current) === null || _a === void 0 ? void 0 : _a.call(savedCallback); }, delay);
+            return () => clearInterval(id);
+        }
+        else {
+            return () => { };
+        }
+    }, [delay]);
+};
+export { useInterval };