@mitodl/smoot-design 0.0.0-7bc0c0f

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

@@ -0,0 +1,93 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("@testing-library/react");
+const FormHelpers_1 = require("./FormHelpers");
+const ThemeProvider_1 = require("../../../components/ThemeProvider/ThemeProvider");
+const en_1 = require("@faker-js/faker/locale/en");
+const assertDescription = ({ text, total, exists, }) => {
+    var _a;
+    const input = react_1.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 = react_1.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 } = (0, react_1.render)(React.createElement(FormHelpers_1.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_1.ThemeProvider,
+        });
+        const rerender = (newProps) => {
+            _rerender(React.createElement(FormHelpers_1.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 = en_1.faker.lorem.words();
+        setup({ label });
+        const input = react_1.screen.getByRole("textbox", { name: label });
+        expect(input).toBeInstanceOf(HTMLInputElement);
+    });
+    it("Has a description only if description provided", () => {
+        const label = en_1.faker.lorem.words();
+        const helpText = en_1.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 = en_1.faker.lorem.words();
+        const errorText = en_1.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 = en_1.faker.lorem.words();
+        const errorText = en_1.faker.lorem.words();
+        const helpText = en_1.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/cjs/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/cjs/index.js

@@ -0,0 +1,30 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisuallyHidden = exports.TabButtonList = exports.TabButtonLink = exports.TabButton = exports.SrAnnouncer = exports.TextField = exports.Input = exports.ActionButtonLink = exports.ActionButton = exports.ButtonLink = exports.Button = exports.createTheme = exports.ThemeProvider = exports.Global = exports.css = exports.styled = void 0;
+var styled_1 = require("@emotion/styled");
+Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return styled_1.default; } });
+var react_1 = require("@emotion/react");
+Object.defineProperty(exports, "css", { enumerable: true, get: function () { return react_1.css; } });
+Object.defineProperty(exports, "Global", { enumerable: true, get: function () { return react_1.Global; } });
+var ThemeProvider_1 = require("./components/ThemeProvider/ThemeProvider");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeProvider_1.ThemeProvider; } });
+Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return ThemeProvider_1.createTheme; } });
+var Button_1 = require("./components/Button/Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+Object.defineProperty(exports, "ButtonLink", { enumerable: true, get: function () { return Button_1.ButtonLink; } });
+var ActionButton_1 = require("./components/Button/ActionButton");
+Object.defineProperty(exports, "ActionButton", { enumerable: true, get: function () { return ActionButton_1.ActionButton; } });
+Object.defineProperty(exports, "ActionButtonLink", { enumerable: true, get: function () { return ActionButton_1.ActionButtonLink; } });
+var Input_1 = require("./components/Input/Input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
+var TextField_1 = require("./components/TextField/TextField");
+Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return TextField_1.TextField; } });
+var SrAnnouncer_1 = require("./components/SrAnnouncer/SrAnnouncer");
+Object.defineProperty(exports, "SrAnnouncer", { enumerable: true, get: function () { return SrAnnouncer_1.SrAnnouncer; } });
+var TabButtonList_1 = require("./components/TabButtons/TabButtonList");
+Object.defineProperty(exports, "TabButton", { enumerable: true, get: function () { return TabButtonList_1.TabButton; } });
+Object.defineProperty(exports, "TabButtonLink", { enumerable: true, get: function () { return TabButtonList_1.TabButtonLink; } });
+Object.defineProperty(exports, "TabButtonList", { enumerable: true, get: function () { return TabButtonList_1.TabButtonList; } });
+var VisuallyHidden_1 = require("./components/VisuallyHidden/VisuallyHidden");
+Object.defineProperty(exports, "VisuallyHidden", { enumerable: true, get: function () { return VisuallyHidden_1.VisuallyHidden; } });

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

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

package/dist/cjs/jest-setup.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@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/cjs/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/cjs/jsdom-extended.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Jest environment extended with Web APIs para tranbajar con MSW
+const jest_environment_jsdom_1 = require("jest-environment-jsdom");
+class JSDOMEnvironmentExtended extends jest_environment_jsdom_1.TestEnvironment {
+    constructor(config, context) {
+        super(config, context);
+        this.global.TransformStream = TransformStream;
+        this.global.ReadableStream = ReadableStream;
+        this.global.Response = Response;
+        this.global.TextDecoderStream = TextDecoderStream;
+    }
+}
+exports.default = JSDOMEnvironmentExtended;

package/dist/cjs/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/cjs/story-utils/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gitLink = exports.enumValues = void 0;
+/**
+ * A type helper just to make sure an array contains union values.
+ */
+const enumValues = (obj) => {
+    return Object.keys(obj);
+};
+exports.enumValues = enumValues;
+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}`;
+};
+exports.gitLink = gitLink;

package/dist/cjs/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/cjs/utils/composeRefs.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.composeRefs = void 0;
+/**
+ * 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;
+            }
+        });
+    };
+};
+exports.composeRefs = composeRefs;

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

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

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const composeRefs_1 = require("./composeRefs");
+const react_1 = require("@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();
+        (0, react_1.render)(React.createElement("div", { "data-testid": "my-div", ref: (0, composeRefs_1.composeRefs)(objRef1, objRef2, fnRef1, fnRef2) }));
+        const el = react_1.screen.getByTestId("my-div");
+        expect(objRef1.current).toBe(el);
+        expect(objRef2.current).toBe(el);
+        expect(fnRef1).toHaveBeenCalledWith(el);
+        expect(fnRef2).toHaveBeenCalledWith(el);
+    });
+});

package/dist/cjs/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/cjs/utils/useDevCheckStable.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDevCheckStable = void 0;
+const react_1 = require("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 = (0, react_1.useRef)(jsonSerializable);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.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]);
+    }
+};
+exports.useDevCheckStable = useDevCheckStable;

package/dist/cjs/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/cjs/utils/useInterval.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInterval = void 0;
+const react_1 = require("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 = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    (0, react_1.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]);
+};
+exports.useInterval = useInterval;

package/dist/esm/ai.d.ts

@@ -0,0 +1,3 @@
+export { AiChat } from "./components/AiChat/AiChat";
+export type { AiChatProps } from "./components/AiChat/AiChat";
+export type { AiChatMessage } from "./components/AiChat/types";

package/dist/esm/ai.js

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

package/dist/esm/bundles/RemoteTutorDrawer/FlashcardsScreen.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export type Flashcard = {
+    question: string;
+    answer: string;
+};
+export declare const FlashcardsScreen: ({ flashcards, wasKeyboardFocus, }: {
+    flashcards?: Flashcard[];
+    wasKeyboardFocus: boolean;
+}) => React.JSX.Element | null;

package/dist/esm/bundles/RemoteTutorDrawer/FlashcardsScreen.js

@@ -0,0 +1,83 @@
+import { ActionButton } from "../../components/Button/ActionButton";
+import Typography from "@mui/material/Typography";
+import * as React from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
+import styled from "@emotion/styled";
+import { RiArrowRightLine, RiArrowLeftLine } from "@remixicon/react";
+const Container = styled.div ``;
+const FlashcardContainer = styled.div(({ theme }) => ({
+    display: "flex",
+    height: 300,
+    padding: 40,
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch",
+    borderRadius: 8,
+    border: `1px solid ${theme.custom.colors.lightGray2}`,
+    marginTop: "8px",
+    cursor: "pointer",
+    textAlign: "center",
+}));
+const Navigation = styled.div({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    marginTop: "24px",
+});
+const Page = styled.div(({ theme }) => (Object.assign({ color: theme.custom.colors.silverGrayDark }, theme.typography.body2)));
+const Flashcard = React.forwardRef(({ content, "aria-label": ariaLabel }, ref) => {
+    const [screen, setScreen] = useState(0);
+    useEffect(() => setScreen(0), [content]);
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            setScreen(screen === 0 ? 1 : 0);
+        }
+    };
+    return (React.createElement(FlashcardContainer, { ref: ref, onClick: () => setScreen(screen === 0 ? 1 : 0), onKeyDown: handleKeyDown, tabIndex: 0, "aria-label": ariaLabel },
+        React.createElement(Typography, { variant: "h5" }, screen === 0 ? `Q: ${content.question}` : `Answer: ${content.answer}`)));
+});
+Flashcard.displayName = "Flashcard";
+export const FlashcardsScreen = ({ flashcards, wasKeyboardFocus, }) => {
+    const [cardIndex, setCardIndex] = useState(0);
+    const containerRef = useRef(null);
+    const flashcardRef = useRef(null);
+    const handleKeyDown = useCallback((e) => {
+        var _a;
+        if (!flashcards)
+            return;
+        if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) &&
+            wasKeyboardFocus) {
+            return;
+        }
+        if (e.key === "ArrowRight") {
+            setCardIndex((prevIndex) => (prevIndex + 1) % flashcards.length);
+        }
+        else if (e.key === "ArrowLeft") {
+            setCardIndex((prevIndex) => (prevIndex - 1 + flashcards.length) % flashcards.length);
+        }
+    }, [flashcards, wasKeyboardFocus]);
+    useEffect(() => {
+        var _a;
+        (_a = flashcardRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [cardIndex]);
+    useEffect(() => {
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [handleKeyDown]);
+    if (!(flashcards === null || flashcards === void 0 ? void 0 : flashcards.length)) {
+        return null;
+    }
+    return (React.createElement(Container, { ref: containerRef },
+        React.createElement(Flashcard, { ref: flashcardRef, content: flashcards[cardIndex], "aria-label": `Flashcard ${cardIndex + 1} of ${flashcards.length}` }),
+        React.createElement(Navigation, null,
+            React.createElement(ActionButton, { onClick: () => setCardIndex(cardIndex - 1), disabled: cardIndex === 0, variant: "secondary", color: "secondary", size: "small", "aria-label": "Previous card" },
+                React.createElement(RiArrowLeftLine, { "aria-hidden": true })),
+            React.createElement(Page, null,
+                cardIndex + 1,
+                " / ",
+                flashcards.length),
+            React.createElement(ActionButton, { onClick: () => setCardIndex(cardIndex + 1), disabled: cardIndex === flashcards.length - 1, variant: "secondary", color: "secondary", size: "small", "aria-label": "Next card" },
+                React.createElement(RiArrowRightLine, { "aria-hidden": true })))));
+};

package/dist/esm/bundles/RemoteTutorDrawer/RemoteTutorDrawer.d.ts

@@ -0,0 +1,57 @@
+import { FC } from "react";
+import { AiChatMessage } from "../../components/AiChat/types";
+import type { AiChatProps } from "../../components/AiChat/AiChat";
+type RemoteTutorDrawerInitMessage = {
+    type: "smoot-design::tutor-drawer-open";
+    payload: {
+        blockType?: "problem" | "video";
+        target?: string;
+        /**
+         * If the title begins "AskTIM", it is styled as the AskTIM logo.
+         */
+        title?: string;
+        chat: {
+            chatId?: AiChatProps["chatId"];
+            conversationStarters?: AiChatProps["conversationStarters"];
+            initialMessages?: AiChatProps["initialMessages"];
+            apiUrl: AiChatProps["requestOpts"]["apiUrl"];
+            requestBody?: Record<string, unknown>;
+            entryScreenEnabled?: AiChatProps["entryScreenEnabled"];
+            entryScreenTitle?: AiChatProps["entryScreenTitle"];
+        };
+        summary?: {
+            apiUrl: string;
+        };
+    };
+};
+type RemoteTutorDrawerProps = {
+    className?: string;
+    /**
+     * The origin of the messages that will be received to open the chat.
+     * The drawer will ignore all message events not from this origin.
+     */
+    messageOrigin: string;
+    /**
+     * Transform the body of the request before sending it to the server.
+     * Its result will be merged with the per-message requestBody opt, with
+     * transformBody taking precedence.
+     *
+     * *This cannot be supplied via message events since the function is not serializable.*
+     *
+     */
+    transformBody?: (messages: AiChatMessage[]) => Iterable<unknown>;
+    /**
+     * Fetch options to be passed to the fetch call.
+     *
+     * NOTE: By default, the credentials are set to "include" to enable thread-
+     * identifying cookies.
+     */
+    fetchOpts?: AiChatProps["requestOpts"]["fetchOpts"];
+    /**
+     * Pass to target a specific drawer instance where multiple are on the page.
+     */
+    target?: string;
+};
+declare const RemoteTutorDrawer: FC<RemoteTutorDrawerProps>;
+export { RemoteTutorDrawer };
+export type { RemoteTutorDrawerProps, RemoteTutorDrawerInitMessage };