@madie/madie-design-system 1.2.36 → 1.2.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madie/madie-design-system",
-  "version": "1.2.36",
+  "version": "1.2.38",
   "description": "Shared style guide across the Madie program.",
   "main": "dist/index.js",
   "homepage": "https://github.com/MeasureAuthoringTool/madie-design-system",

package/styles/_qpp-style.scss

@@ -14,6 +14,7 @@
 @import 'components/links';
 @import 'components/madie-discard-dialog';
 @import 'components/madie-delete-dialog';
+@import 'components/madie-confirm-dialog';
 @import 'components/madie-alert';
 @import 'components/madie-tooltip';
 @import 'components/text-field-variable';

package/styles/components/_madie-confirm-dialog.scss

@@ -0,0 +1,34 @@
+#confirm-dialog-body {
+    font-family: Rubik, sans-serif;
+    display: flex;
+    flex-direction: column;
+  
+    .dialog-warning-body {
+      font-size: 16px;
+      line-height: 19px;
+  
+      p {
+        margin-bottom: 18px;
+      }
+  
+      .strong {
+        font-weight: 500;
+      }
+    }
+  
+    .dialog-warning-action {
+      font-size: 14px;
+      line-height: 26px;
+      font-weight: 400;
+      color: #d92f2f;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-left: -3px;
+  
+      > p {
+        margin-left: 8px;
+        margin-bottom: 0;
+      }
+    }
+  }

package/styles/qppds/components/_madie-confirm-dialog.scss

@@ -0,0 +1,35 @@
+#confirm-dialog-body {
+    font-family: Rubik, sans-serif;
+    display: flex;
+    flex-direction: column;
+  
+    .dialog-warning-body {
+      font-size: 16px;
+      line-height: 19px;
+  
+      p {
+        margin-bottom: 18px;
+      }
+  
+      .strong {
+        font-weight: 500;
+      }
+    }
+  
+    .dialog-warning-action {
+      font-size: 14px;
+      line-height: 26px;
+      font-weight: 400;
+      color: #d92f2f;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-left: -3px;
+  
+      > p {
+        margin-left: 8px;
+        margin-bottom: 0;
+      }
+    }
+  }
+  

package/styles/qppds/components/index.scss

@@ -1,6 +1,7 @@
 @import './link';
 @import './madie-discard-dialog';
 @import './madie-delete-dialog';
+@import './madie-confirm-dialog';
 @import './madie-tooltip';
 @import './madie-alert';
 @import './button';

package/test/components/Instant.test.js

@@ -0,0 +1,83 @@
+import "@testing-library/jest-dom";
+import React, { useState } from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import Instant from "../../components/Instant";
+import dayjs from "dayjs";
+
+export const InstantTester = () => {
+    const [value, setValue] = useState("");
+    const handleDateTimeChange = (v) => {
+        setValue(v)
+    };
+    return (
+        <div>
+            <div data-testId="test-date">{value}</div>
+            <Instant
+                disabled={false}
+                id="status_date_time"
+                label="Status Date"
+                handleDateTimeChange={handleDateTimeChange}
+                dateTimeValue={value}
+                dateFieldSx={{}}
+            />
+        </div>)
+}
+
+
+describe("Instant", () => {
+    const { getByDisplayValue, findByTestId, findByText, getByText, getByTestId } = screen;
+    it("It renders as expected with static values", async () => {
+        const handleDateTimeChange = jest.fn();
+        render(
+            <div>
+                <Instant
+                    disabled={false}
+                    id="status_date_time"
+                    label="Status Date"
+                    handleDateTimeChange={handleDateTimeChange}
+                    dateTimeValue={dayjs("2022-04-17")}
+                    dateFieldSx={{}}
+                />
+            </div>
+        );
+        const labelText = await findByText("Status Date");
+            expect(labelText).toBeInTheDocument();
+            expect(await findByText("Status Date")).toBeInTheDocument();
+            expect(
+                getByDisplayValue("04/17/2022")
+            ).toBeInTheDocument();
+    });
+
+    it("we can change the date from null and when date to date", async () => {
+        await render(<InstantTester />)
+        const labelText = await findByText("Status Date");
+            expect(labelText).toBeInTheDocument();
+            expect(await findByText("Status Date")).toBeInTheDocument();
+            const inputField = await findByTestId("status_date_time-input");
+            fireEvent.change(inputField, { target: { value: "01/01/2026" } })
+            expect(
+                getByText("2026-01-01T00:00:00.000+00:00")
+            ).toBeInTheDocument();
+            fireEvent.change(inputField, { target: { value: "01/01/2027" } })
+            expect(
+                getByText("2027-01-01T00:00:00.000+00:00")
+            ).toBeInTheDocument();
+    });
+    it("Handles change for Hours, minutes, seconds, ms; does not combust.", async () => {
+
+        await render(<InstantTester />)
+        const labelText = await findByText("Status Date");
+        expect(labelText).toBeInTheDocument();
+        expect(await findByText("Status Date")).toBeInTheDocument();
+        const inputField = await findByTestId("status_date_time-input");
+        fireEvent.change(inputField, { target: { value: "01/01/2026" } })
+        expect(getByText("2026-01-01T00:00:00.000+00:00")).toBeInTheDocument();
+        fireEvent.change(getByTestId("status_date_time-hour-input"), { target : {value: "1"}})
+        fireEvent.change(getByTestId("status_date_time-minute-input"), { target : {value: "2"}})
+        fireEvent.change(getByTestId("status_date_time-second-input"), { target : {value: "3"}})
+        fireEvent.change(getByTestId("status_date_time-millisecond-input"), { target : {value: "4"}})
+        expect(
+            getByText("2026-01-01T01:02:03.004+00:00")
+        ).toBeInTheDocument();
+    });
+});

package/test/components/MadieConfirmDialog.test.js

@@ -0,0 +1,159 @@
+import "@testing-library/jest-dom";
+import { describe, expect, test } from "@jest/globals";
+import MadieConfirmDialog from "../../components/MadieConfirmDialog/index";
+import { act } from "react-dom/test-utils";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+
+import React, { useState } from "react";
+
+const DialogTester = () => {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    return (
+        <div>
+            <button
+                data-testid="dialog-tester"
+                onClick={() => setDialogOpen(true)}
+            >
+                dialog tester
+            </button>
+            <MadieConfirmDialog
+                open={dialogOpen}
+                onClose={() => setDialogOpen(false)}
+                onContinue={() => setDialogOpen(false)}
+                dialogTitle="Are You Sure"
+                name="log out of UMLS"
+                action="confirm"
+            />
+        </div>
+    );
+};
+
+const DialogTesterForDiscard = () => {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    return (
+        <div>
+            <button
+                data-testid="discard-dialog-tester"
+                onClick={() => setDialogOpen(true)}
+            >
+                discard dialog tester
+            </button>
+            <MadieConfirmDialog
+                open={dialogOpen}
+                onClose={() => setDialogOpen(false)}
+                onContinue={() => setDialogOpen(false)}
+                action="discard"
+                dialogTitle="Discard Changes"
+                name="discard your changes"
+                continueText= "Yes, Discard All Changes"
+                cancelText="No, Keep Working"
+            />
+        </div>
+    );
+};
+
+const DialogTesterForDelete = () => {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    return (
+        <div>
+            <button
+                data-testid="delete-dialog-tester"
+                onClick={() => setDialogOpen(true)}
+            >
+                delete dialog tester
+            </button>
+            <MadieConfirmDialog
+                open={dialogOpen}
+                onClose={() => setDialogOpen(false)}
+                onContinue={() => setDialogOpen(false)}
+                action="delete"
+                dialogTitle="Are You Sure"
+                name="delete this Definition"
+                continueText="Yes, Delete"
+            />
+        </div>
+    );
+};
+
+describe("MadieConfirmDialog", () => {
+    test("Confirm Dialog renders", async () => {
+        await act(async () => {
+            const { findByTestId, getByTestId, queryByText } = await render(
+                <DialogTester />
+            );
+            const result = await findByTestId("dialog-tester");
+            fireEvent.click(result);
+            const confirmDialog = await getByTestId("confirm-dialog");
+            expect(confirmDialog).toBeInTheDocument();
+            await waitFor(() => {
+                expect(queryByText("log out of UMLS")).toBeVisible();
+            });
+        });
+    });
+
+    test("Discard Dialog renders", async () => {
+        await act(async () => {
+            const { findByTestId, getByTestId, queryByText } = await render(
+                <DialogTesterForDiscard />
+            );
+            const result = await findByTestId("discard-dialog-tester");
+            fireEvent.click(result);
+            const confirmDialog = await getByTestId("discard-dialog");
+            expect(confirmDialog).toBeInTheDocument();
+            await waitFor(() => {
+                expect(queryByText("You have unsaved changes.")).toBeVisible();
+                expect(queryByText("Discard Changes")).toBeVisible();
+            });
+        });
+    });
+
+    test("Delete Dialog renders", async () => {
+        await act(async () => {
+            const { findByTestId, getByTestId, queryByText } = await render(
+                <DialogTesterForDelete />
+            );
+            const result = await findByTestId("delete-dialog-tester");
+            fireEvent.click(result);
+            const confirmDialog = await getByTestId("delete-dialog");
+            expect(confirmDialog).toBeInTheDocument();
+            await waitFor(() => {
+                expect(queryByText("delete this Definition")).toBeVisible();
+            });
+        });
+    });
+
+    test("Dialog disappears onContinue", async () => {
+        await act(async () => {
+            const { findByTestId, getByTestId, queryByText } = await render(
+                <DialogTester />
+            );
+            const result = await findByTestId("dialog-tester");
+            fireEvent.click(result);
+            const continueButton = await getByTestId(
+                "confirm-dialog-continue-button"
+            );
+            expect(continueButton).toBeInTheDocument();
+            fireEvent.click(continueButton);
+            await waitFor(() => {
+                expect(queryByText("log out of UMLS")).not.toBeVisible();
+            });
+        });
+    });
+    test("Dialog disappears onClose", async () => {
+        await act(async () => {
+            const { findByTestId, getByTestId, queryByText } = await render(
+                <DialogTester />
+            );
+            const result = await findByTestId("dialog-tester");
+            fireEvent.click(result);
+            const cancelButton = await getByTestId(
+                "confirm-dialog-cancel-button"
+            );
+            expect(cancelButton).toBeInTheDocument();
+            fireEvent.click(cancelButton);
+            await waitFor(() => {
+                expect(queryByText("log out of UMLS")).not.toBeVisible();
+            });
+        });
+    });
+});

package/webpack.config.react.js

@@ -80,6 +80,19 @@ module.exports = {
         libraryTarget: "umd",
         globalObject: "this",
     },
+    // below lines fix hot reload but put CI/CD into a hanging state
+    // watch: true,
+    // watchOptions: {
+    //     ignored: /node_modules/, // Don't watch files in node_modules
+    //     aggregateTimeout: 300,
+    //     poll: 1000, 
+    //   },
+    //   devServer: {
+    //     // static: path.join(__dirname, "dist/react"),
+    //     // compress: true,
+    //     hot: true, // Enable hot module replacement
+    //     watchFiles: ["src/**/*", "components/**/*"], // Watch these files
+    // },
     devtool: "source-map",
     module: _module,
     plugins,