@mitodl/smoot-design 0.0.0-355a925

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,16 @@
+export { default as styled } from "@emotion/styled";
+export { css, Global } from "@emotion/react";
+export { ThemeProvider, createTheme, } from "./components/ThemeProvider/ThemeProvider";
+export { Button, 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 } from "./components/Input/Input";
+export type { InputProps } from "./components/Input/Input";
+export { TextField } from "./components/TextField/TextField";
+export type { TextFieldProps } from "./components/TextField/TextField";
+export { SrAnnouncer } from "./components/SrAnnouncer/SrAnnouncer";
+export type { SrAnnouncerProps } from "./components/SrAnnouncer/SrAnnouncer";
+export { TabButton, TabButtonLink, TabButtonList, } from "./components/TabButtons/TabButtonList";
+export { VisuallyHidden } from "./components/VisuallyHidden/VisuallyHidden";

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+"use client";
+export { default as styled } from "@emotion/styled";
+export { css, Global } from "@emotion/react";
+export { ThemeProvider, createTheme, } from "./components/ThemeProvider/ThemeProvider";
+export { Button, ButtonLink } from "./components/Button/Button";
+export { ActionButton, ActionButtonLink, } from "./components/Button/ActionButton";
+export { Input } from "./components/Input/Input";
+export { TextField } from "./components/TextField/TextField";
+export { SrAnnouncer } from "./components/SrAnnouncer/SrAnnouncer";
+export { TabButton, TabButtonLink, TabButtonList, } from "./components/TabButtons/TabButtonList";
+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/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 };