@mitodl/smoot-design 3.4.0 → 3.4.1

package/dist/esm/components/AiChat/AiChat.test.js

@@ -15,17 +15,18 @@ import { AiChat } from "./AiChat";
 import { ThemeProvider } from "../ThemeProvider/ThemeProvider";
 import * as React from "react";
 import { faker } from "@faker-js/faker/locale/en";
+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 mockFetch = jest.mocked(jest.fn(() => {
+const API_URL = "http://localhost:4567/test";
+const server = setupServer(http.post(API_URL, () => __awaiter(void 0, void 0, void 0, function* () {
     const count = counter.mock.calls.length;
     counter();
-    return Promise.resolve(new Response(`AI Response ${count}`, {
-        headers: {
-            "Content-Type": "application/json",
-        },
-    }));
-}));
-window.fetch = mockFetch;
+    return HttpResponse.text(`AI Response ${count}`);
+})));
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
 jest.mock("react-markdown", () => {
     return {
         __esModule: true,
@@ -58,9 +59,9 @@ describe("AiChat", () => {
             { content: faker.lorem.sentence() },
             { content: faker.lorem.sentence() },
         ];
-        const view = render(React.createElement(AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" }, placeholder: "Type a message..." }, props)), { wrapper: ThemeProvider });
+        const view = render(React.createElement(AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: API_URL }, placeholder: "Type a message..." }, props)), { wrapper: ThemeProvider });
         const rerender = (newProps) => {
-            view.rerender(React.createElement(AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" } }, newProps)));
+            view.rerender(React.createElement(AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: API_URL } }, newProps)));
         };
         return { initialMessages, conversationStarters, rerender };
     };
@@ -106,11 +107,11 @@ describe("AiChat", () => {
         yield whenCount(getMessages, 3);
     }));
     test("transformBody is called before sending requests", () => __awaiter(void 0, void 0, void 0, function* () {
+        const mockFetch = jest.spyOn(window, "fetch");
         const fakeBody = { message: faker.lorem.sentence() };
-        const apiUrl = faker.internet.url();
         const transformBody = jest.fn(() => fakeBody);
         const { initialMessages } = setup({
-            requestOpts: { apiUrl, transformBody },
+            requestOpts: { apiUrl: API_URL, transformBody },
         });
         yield user.click(screen.getByPlaceholderText("Type a message..."));
         yield user.paste("User message");
@@ -120,16 +121,15 @@ describe("AiChat", () => {
             expect.objectContaining({ content: "User message", role: "user" }),
         ]);
         expect(mockFetch).toHaveBeenCalledTimes(1);
-        expect(mockFetch).toHaveBeenCalledWith(apiUrl, expect.objectContaining({
+        expect(mockFetch).toHaveBeenCalledWith(API_URL, expect.objectContaining({
             body: JSON.stringify(fakeBody),
         }));
     }));
     test("parseContent is called on the API-received message content", () => __awaiter(void 0, void 0, void 0, function* () {
         const fakeBody = { message: faker.lorem.sentence() };
-        const apiUrl = faker.internet.url();
         const transformBody = jest.fn(() => fakeBody);
         const { initialMessages, conversationStarters } = setup({
-            requestOpts: { apiUrl, transformBody },
+            requestOpts: { apiUrl: API_URL, transformBody },
             parseContent: jest.fn((content) => `Parsed: ${content}`),
         });
         yield user.click(getConversationStarters()[0]);
@@ -149,12 +149,20 @@ describe("AiChat", () => {
     }));
     test("Passes extra attributes to root", () => {
         const fakeBody = { message: faker.lorem.sentence() };
-        const apiUrl = faker.internet.url();
         const transformBody = jest.fn(() => fakeBody);
         setup({
-            requestOpts: { apiUrl, transformBody },
+            requestOpts: { apiUrl: API_URL, transformBody },
             parseContent: jest.fn((content) => `Parsed: ${content}`),
         });
         expect(screen.getByTestId("ai-chat")).toBeInTheDocument();
     });
+    test("If the API returns an error, an alert is shown", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup();
+        server.use(http.post(API_URL, () => __awaiter(void 0, void 0, void 0, function* () {
+            return new HttpResponse(null, { status: 500 });
+        })));
+        yield user.click(getConversationStarters()[0]);
+        const alert = yield screen.findByRole("alert");
+        expect(alert).toHaveTextContent("An unexpected error has occurred");
+    }));
 });

package/dist/esm/components/AiChat/test-utils/api.d.ts

@@ -0,0 +1,2 @@
+declare const handlers: import("msw").HttpHandler[];
+export { handlers };

package/dist/{cjs/components/AiChat/story-utils.js → esm/components/AiChat/test-utils/api.js}

@@ -1,4 +1,3 @@
-"use strict";
 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) {
@@ -8,8 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mockJson = exports.mockStreaming = void 0;
+import { http, HttpResponse, delay } from "msw";
 const SAMPLE_RESPONSES = [
     `For exploring AI applications in business, I recommend the following course from MIT:
 
@@ -45,59 +43,67 @@ const rand = (min, max) => {
     // min and max included
     return Math.floor(Math.random() * (max - min + 1) + min);
 };
-const mockStreaming = function mockApi() {
-    return __awaiter(this, void 0, void 0, function* () {
-        let timerId;
-        const response = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
-        const chunks = response.split(" ").reduce((acc, word) => {
-            const last = acc[acc.length - 1];
-            if (acc.length === 0) {
-                acc.push(word);
-            }
-            else if (Math.random() < 0.75) {
-                acc[acc.length - 1] = `${last} ${word}`;
-            }
-            else {
-                acc.push(` ${word}`);
-            }
-            return acc;
-        }, []);
-        const num = chunks.length;
-        let i = 0;
-        yield new Promise((resolve) => setTimeout(resolve, 800));
-        const body = new ReadableStream({
-            start(controller) {
-                timerId = setInterval(() => {
-                    const msg = new TextEncoder().encode(chunks[i]);
-                    controller.enqueue(msg);
-                    i++;
-                    if (i === num) {
-                        controller.close();
-                        clearInterval(timerId);
-                    }
-                }, 100);
-            },
-            cancel() {
-                if (timerId) {
+const getReadableStream = () => {
+    let timerId;
+    const response = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
+    const chunks = response.split(" ").reduce((acc, word) => {
+        const last = acc[acc.length - 1];
+        if (acc.length === 0) {
+            acc.push(word);
+        }
+        else if (Math.random() < 0.75) {
+            acc[acc.length - 1] = `${last} ${word}`;
+        }
+        else {
+            acc.push(` ${word}`);
+        }
+        return acc;
+    }, []);
+    const num = chunks.length;
+    let i = 0;
+    return new ReadableStream({
+        start(controller) {
+            timerId = setInterval(() => {
+                const msg = new TextEncoder().encode(chunks[i]);
+                controller.enqueue(msg);
+                i++;
+                if (i === num) {
+                    controller.close();
                     clearInterval(timerId);
                 }
-            },
-        });
-        return Promise.resolve(new Response(body, {
-            headers: {
-                "Content-Type": "text/event-stream",
-            },
-        }));
+            }, 100);
+        },
+        cancel() {
+            if (timerId) {
+                clearInterval(timerId);
+            }
+        },
     });
 };
-exports.mockStreaming = mockStreaming;
-const mockJson = () => __awaiter(void 0, void 0, void 0, function* () {
-    const message = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
-    yield new Promise((res) => setTimeout(res, 1000));
-    return Promise.resolve(new Response(JSON.stringify({ message }), {
-        headers: {
-            "Content-Type": "application/json",
-        },
-    }));
-});
-exports.mockJson = mockJson;
+const handlers = [
+    http.post("http://localhost:4567/streaming", (_a) => __awaiter(void 0, [_a], void 0, function* ({ request }) {
+        yield delay(600);
+        const body = getReadableStream();
+        const requestBody = yield request.json();
+        if (Array.isArray(requestBody)) {
+            const last = requestBody[requestBody.length - 1];
+            const { content } = last;
+            if (content === "error") {
+                return new HttpResponse("Internal Server Error", {
+                    status: 500,
+                });
+            }
+        }
+        return new HttpResponse(body, {
+            headers: {
+                "Content-Type": "text/plain",
+            },
+        });
+    })),
+    http.post("http://localhost:4567/json", () => __awaiter(void 0, void 0, void 0, function* () {
+        const message = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
+        yield delay(800);
+        return HttpResponse.json({ message });
+    })),
+];
+export { handlers };

package/dist/esm/components/Alert/Alert.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { AlertColor } from "@mui/material/Alert";
+type AlertProps = {
+    visible?: boolean;
+    closable?: boolean;
+    className?: string;
+    severity?: AlertColor;
+    /**
+     * Alert Content
+     */
+    children?: React.ReactNode;
+};
+declare const Alert: React.FC<AlertProps>;
+export { Alert };
+export type { AlertProps };

package/dist/esm/components/Alert/Alert.js

@@ -0,0 +1,59 @@
+"use client";
+import * as React from "react";
+import styled from "@emotion/styled";
+import { default as MuiAlert } from "@mui/material/Alert";
+const getColor = (theme, severity) => {
+    return {
+        info: theme.custom.colors.blue,
+        success: theme.custom.colors.green,
+        warning: theme.custom.colors.orange,
+        error: theme.custom.colors.lightRed,
+    }[severity];
+};
+const AlertStyled = styled(MuiAlert)(({ theme, severity }) => ({
+    padding: "11px 16px",
+    borderRadius: 4,
+    borderWidth: 2,
+    borderStyle: "solid",
+    borderColor: getColor(theme, severity),
+    background: "#FFF",
+    ".MuiAlert-message": Object.assign(Object.assign({}, theme.typography.body2), { color: theme.custom.colors.darkGray2, alignSelf: "center" }),
+    "> div": {
+        paddingTop: 0,
+        paddingBottom: 0,
+    },
+    ".MuiAlert-icon": {
+        marginRight: 8,
+        svg: {
+            width: 16,
+            fill: getColor(theme, severity),
+        },
+    },
+    button: {
+        padding: 0,
+        ":hover": {
+            margin: 0,
+            background: "none",
+        },
+    },
+}));
+const Hidden = styled.span({ display: "none" });
+const Alert = ({ visible = true, severity = "info", closable, children, className, }) => {
+    const [_visible, setVisible] = React.useState(visible);
+    const id = React.useId();
+    const onCloseClick = () => {
+        setVisible(false);
+    };
+    React.useEffect(() => {
+        setVisible(visible);
+    }, [visible]);
+    if (!_visible) {
+        return null;
+    }
+    return (React.createElement(AlertStyled, { severity: severity, onClose: closable ? onCloseClick : undefined, role: "alert", "aria-describedby": id, className: className },
+        children,
+        React.createElement(Hidden, { id: id },
+            severity,
+            " message")));
+};
+export { Alert };

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert } from "./Alert";
+declare const meta: Meta<typeof Alert>;
+export default meta;
+type Story = StoryObj<typeof Alert>;
+export declare const Basic: Story;
+export declare const Closable: Story;
+export declare const Variants: Story;

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

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Alert } from "./Alert";
+import Stack from "@mui/material/Stack";
+const meta = {
+    title: "smoot-design/Alert",
+    component: Alert,
+};
+export default meta;
+export const Basic = {
+    args: {
+        severity: "info",
+    },
+    render: (args) => (React.createElement(Alert, Object.assign({}, args),
+        "Alert with severity \"",
+        args.severity,
+        "\"")),
+};
+export const Closable = {
+    args: {
+        severity: "warning",
+        closable: true,
+    },
+    render: (args) => (React.createElement(Alert, Object.assign({}, args),
+        "Closable alert with severity \"",
+        args.severity,
+        "\"")),
+};
+export const Variants = {
+    argTypes: {
+        severity: {
+            table: {
+                disable: true,
+            },
+        },
+        closable: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    render: (args) => (React.createElement(Stack, { direction: "column", gap: 2, sx: { my: 2 } },
+        React.createElement(Alert, Object.assign({}, args, { severity: "info" }), "Alert with severity \"info\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "info" }), "Closable alert with severity \"info\""),
+        React.createElement(Alert, Object.assign({}, args, { severity: "success" }), "Alert with severity \"success\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "success" }), "Closable alert with severity \"success\""),
+        React.createElement(Alert, Object.assign({}, args, { severity: "warning" }), "Alert with severity \"warning\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "warning" }), "Closable alert with severity \"warning\""),
+        React.createElement(Alert, Object.assign({}, args, { severity: "error" }), "Alert with severity \"error\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "error" }), "Closable alert with severity \"error\""))),
+};