@madie/madie-design-system 1.2.62 → 2.0.1

package/dist/react/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

package/eslint.config.cjs

@@ -0,0 +1,59 @@
+const {
+    defineConfig,
+    globalIgnores,
+} = require("eslint/config");
+
+const babelParser = require("@babel/eslint-parser");
+const globals = require("globals");
+const js = require("@eslint/js");
+
+const {
+    FlatCompat,
+} = require("@eslint/eslintrc");
+
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+module.exports = defineConfig([{
+    extends: compat.extends("eslint:recommended", "plugin:react/recommended"),
+
+    languageOptions: {
+        parser: babelParser,
+        sourceType: "module",
+
+        parserOptions: {
+            ecmaFeatures: {
+                jsx: true,
+            },
+            ecmaVersion: "latest",
+        },
+
+        globals: {
+            ...globals.node,
+            ...globals.browser,
+            ...globals.jquery,
+            ...globals.mocha,
+        },
+    },
+
+    rules: {
+        "no-unused-vars": ["error", {
+            args: "none",
+        }],
+
+        "linebreak-style": ["error", "unix"],
+        "no-console": 0,
+        "no-prototype-builtins": [0],
+        "react/prop-types": "off"
+
+    },
+
+    settings: {
+        react: {
+            version: "detect",
+        },
+    },
+}, globalIgnores(["**/_*", "**/css", "**/dist", "**/node_modules", "**/test"])]);

package/index.js

@@ -1,15 +1,13 @@
-import ErrorPage from "./components/Error/error";
-import Footer from "./components/Footer/footer";
-
 import "what-input";
-
+import React from 'react'
 const QppStyleComponents = {
-    errorPage(options) {
-        return new ErrorPage(options);
+    errorPage() {
+        return <div data-testId="error-page">
+            Something has gone terribly wrong.
+        </div>;
     },
-
-    footer(options) {
-        return new Footer(options);
+    footer() {
+        return <div data-testId="unused"></div>;
     },
 };
 

package/jest.config.mjs

@@ -0,0 +1,10 @@
+export default {
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+\\.jsx?$": "babel-jest",
+  },
+  moduleNameMapper: {
+    "\\.(css|scss)$": "identity-obj-proxy",
+  },
+  setupFilesAfterEnv: ["@testing-library/jest-dom"],
+};

package/lib/Chevron.jsx

@@ -1,7 +1,7 @@
 import React from "react";
-import PropTypes from "prop-types";
 
-export const Chevron = (props) => {
+export const Chevron = ({ className = "accordion-icon", ...props }) => {
+    
     return (
         <svg
             width="10px"
@@ -22,11 +22,3 @@ export const Chevron = (props) => {
         </svg>
     );
 };
-
-Chevron.propTypes = {
-    className: PropTypes.string,
-};
-
-Chevron.defaultProps = {
-    className: "accordion-icon",
-};

package/package.json

@@ -1,18 +1,23 @@
 {
     "name": "@madie/madie-design-system",
-    "version": "1.2.62",
+    "version": "2.0.1",
     "description": "Shared style guide across the Madie program.",
-    "main": "dist/index.js",
     "homepage": "https://github.com/MeasureAuthoringTool/madie-design-system",
+    "main": "./components/index.js",
+    "exports": {
+        "import": "./dist/react/index.mjs",
+        "require": "./components/index.js",
+        "default": "./components/index.js"
+    },
     "scripts": {
         "prepublishOnly": "npm run build",
         "build": "npm run clean && webpack-cli --progress --color --env production && npm run build-react",
         "dev": "npm run clean && webpack-cli --progress --color --watch --env production=false",
         "clean": "rimraf build && rimraf dist",
-        "build-react": "webpack --progress --config webpack.config.react.js",
-        "build-react-watch": "webpack --progress --watch --config webpack.config.react.js",
+        "build-react": "webpack --progress --config webpack.config.react.mjs && echo '{ \"type\": \"module\" }' > dist/react/package.json",
+        "build-react-watch": "webpack --progress --watch --config webpack.config.react.mjs",
         "start": "npm run build",
-        "test": "jest",
+        "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",        
         "watch-tests": "cross-env BABEL_ENV=test jest --watch",
         "coverage": "cross-env BABEL_ENV=test jest --coverage",
         "precommit": "npm run format && npm run lint && npm run format-styles",
@@ -25,68 +30,41 @@
         "storybook": "storybook dev -p 6007",
         "build-storybook": "storybook build",
         "predeploy": "npm run build-storybook",
-        "deploy": "gh-pages -d storybook-static"
+        "deploy": "gh-pages -d storybook-static",
+        "check-es": "es-check es2020 './dist/react/index.mjs' --module"
     },
     "devDependencies": {
-        "@babel/cli": "^7.25.6",
-        "@babel/core": "^7.25.2",
-        "@babel/preset-env": "^7.25.4",
-        "@babel/preset-react": "^7.24.7",
-        "@babel/register": "^7.24.6",
-        "@storybook/addon-a11y": "^8.3.0",
-        "@storybook/addon-actions": "^8.3.0",
-        "@storybook/addon-backgrounds": "^8.3.0",
-        "@storybook/addon-docs": "^8.3.0",
-        "@storybook/addon-knobs": "^8.0.1",
-        "@storybook/addon-links": "^8.3.0",
-        "@storybook/addon-postcss": "^2.0.0",
-        "@storybook/addon-storysource": "^8.3.0",
-        "@storybook/addon-viewport": "^8.3.0",
-        "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-        "@storybook/addons": "^7.6.17",
-        "@storybook/react": "^8.3.0",
-        "@storybook/react-webpack5": "^8.3.0",
-        "@testing-library/jest-dom": "^6.1.4",
-        "@testing-library/react": "^12.1.2",
-        "@testing-library/user-event": "^13.5.0",
-        "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
-        "autoprefixer": "^10.4.2",
-        "babel-eslint": "^10.1.0",
-        "babel-jest": "^27.4.6",
-        "babel-loader": "^8.2.3",
-        "chai": "^4.3.4",
-        "copy-webpack-plugin": "^5.1.2",
-        "css-loader": "^7.1.2",
+        "@babel/eslint-parser": "^7.27.5",
+        "@storybook/addon-a11y": "^9.0.9",
+        "@storybook/addon-backgrounds": "^9.0.8",
+        "@storybook/addon-controls": "^9.0.8",
+        "@storybook/addon-docs": "^9.0.10",
+        "@storybook/addon-links": "^9.0.9",
+        "@storybook/addon-viewport": "^9.0.8",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+        "@storybook/react-webpack5": "^9.0.10",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
+        "babel-loader": "^10.0.0",
+        "cross-env": "^7.0.3",
+        "d3-selection": "^1.4.2",
+        "d3-shape": "^1.3.7",
         "enzyme": "^3.11.0",
-        "enzyme-to-json": "^3.6.2",
-        "eslint": "^7.32.0",
-        "eslint-config-prettier": "^6.15.0",
-        "eslint-plugin-babel": "^5.3.1",
-        "eslint-plugin-prettier": "^3.4.1",
-        "eslint-plugin-react": "^7.28.0",
-        "feather-icons-react": "^0.4.3",
-        "file-loader": "^6.2.0",
-        "gh-pages": "^6.0.0",
-        "html-webpack-plugin": "^5.5.0",
-        "jest": "^29.7.0",
-        "jest-environment-jsdom": "^29.7.0",
-        "mini-css-extract-plugin": "^0.11.3",
-        "moxios": "^0.4.0",
-        "node-fetch": "^2.6.7",
-        "prettier": "^2.5.1",
-        "raw-loader": "^4.0.2",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-test-renderer": "^17.0.2",
-        "regenerator-runtime": "^0.13.9",
-        "rimraf": "^3.0.2",
-        "sass": "^1.48.0",
-        "sass-loader": "^10.2.1",
-        "sinon": "^12.0.1",
-        "style-loader": "^1.3.0",
-        "svgo-loader": "^4.0.0",
-        "webpack": "^5.70.0",
-        "webpack-cli": "^4.9.2"
+        "es-check": "^9.1.4",
+        "eslint": "^9.30.1",
+        "eslint-plugin-react": "^7.33.2",
+        "globals": "^16.2.0",
+        "jest": "^30.0.0",
+        "jest-environment-jsdom": "^30.0.0",
+        "mini-css-extract-plugin": "^2.9.2",
+        "prettier": "^3.5.3",
+        "rimraf": "^5.0.5",
+        "sass": "^1.89.2",
+        "sass-loader": "^16.0.5",
+        "stylelint": "^15.10.3",
+        "webpack": "^5.99.9",
+        "webpack-cli": "^6.0.1"
     },
     "repository": {
         "type": "git",
@@ -106,16 +84,18 @@
         "url": "https://github.com/MeasureAuthoringTool/madie-design-system/issues"
     },
     "dependencies": {
-        "@cmsgov/design-system": "^5.0.2",
-        "@emotion/react": "^11.8.2",
-        "@emotion/styled": "^11.8.1",
-        "@mui/icons-material": "^6.1.0",
-        "@mui/material": "^6.1.0",
-        "@mui/styles": "^6.1.0",
-        "@mui/system": "^6.1.0",
-        "@mui/x-date-pickers": "^7.17.0",
-        "@reach/portal": "^0.16.2",
-        "@reach/tooltip": "^0.16.2",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-transform-class-properties": "^7.27.1",
+        "@babel/plugin-transform-modules-umd": "^7.27.1",
+        "@babel/preset-env": "^7.27.2",
+        "@babel/preset-react": "^7.27.1",
+        "@cmsgov/design-system": "^12.4.0",
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
+        "@mui/icons-material": "^7.1.1",
+        "@mui/material": "^7.2.0",
+        "@mui/system": "^7.1.1",
+        "@mui/x-date-pickers": "7.29.4",
         "@tiptap/extension-color": "^2.11.7",
         "@tiptap/extension-highlight": "^2.11.7",
         "@tiptap/extension-table": "^2.11.7",
@@ -128,15 +108,14 @@
         "@tiptap/starter-kit": "^2.11.7",
         "axios": "^1.7.4",
         "cookie": "^0.7.2",
-        "cross-env": "^7.0.3",
-        "d3-selection": "^1.4.2",
-        "d3-shape": "^1.3.7",
         "dayjs": "^1.11.7",
         "dompurify": "^3.2.6",
+        "feather-icons-react": "^0.9.0",
         "jwt-decode": "^3.1.2",
         "lodash": "^4.17.21",
         "preact": "^10.6.4",
-        "prop-types": "^15.8.1",
+        "react": "19.1.0",
+        "react-dom": "19.1.0",
         "react-draggable": "^4.4.6",
         "react-modal": "^3.14.4",
         "retry": "^0.13.1",
@@ -144,12 +123,8 @@
         "what-input": "^5.2.10",
         "xss": "^1.0.10"
     },
-    "peerDependencies": {
-        "classnames": "^2.3.1"
-    },
     "overrides": {
         "trim": ">=0.0.3",
-        "webpack": "^5.70.0",
         "trim-newlines": "^3.0.1",
         "glob-parent": "^6.0.1",
         "semver": "^7.5.3",

package/styles/_main.scss

@@ -1,11 +1,12 @@
 @charset "utf-8";
 
-// TODO: Remove @cmsgov/design-system dependancies from shared package
+// CMS DS v12 uses `/src/styles/index` for SCSS sources not `dist/scss`
+// @import "~@cmsgov/design-system/src/styles/index"; // way that npm module says to do it
+@import '@cmsgov/design-system/dist/css/index.css'; // precompiled css instead to make it work since there's some extra webpack stuff going on.
+
 $font-path: "~@cmsgov/design-system/dist/fonts";
 $image-path: "~@cmsgov/design-system/dist/images";
 
-@import "@cmsgov/design-system/dist/scss/index";
-
 @import "paths";
 
 @import "third-party/legacy-bootstrap";

package/test/components/Accordion.test.js

@@ -13,7 +13,7 @@ describe("Accordion", () => {
                 leftItem="leftItem"
             >
                 Content
-            </Accordion>
+            </Accordion>,
         );
         expect(getByTestId("accordion")).toBeTruthy();
         const button = getByRole("button");

package/test/components/AutoComplete.test.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import "@testing-library/jest-dom";
 import { describe, expect } from "@jest/globals";
 import AutoComplete from "../../components/AutoComplete/AutoComplete";
-import {render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 describe("AutoComplete Component", () => {
@@ -18,7 +18,7 @@ describe("AutoComplete Component", () => {
                 options={options}
                 onChange={mockOnChange}
                 placeholder="Search for a value"
-            />
+            />,
         );
 
         const input = screen.getByRole("combobox");
@@ -29,7 +29,12 @@ describe("AutoComplete Component", () => {
         expect(option).toBeInTheDocument();
 
         await userEvent.click(option);
-        expect(mockOnChange).toHaveBeenCalledWith("autocomplete", "Option1", expect.any(String), expect.any(Object));
+        expect(mockOnChange).toHaveBeenCalledWith(
+            "autocomplete",
+            "Option1",
+            expect.any(String),
+            expect.any(Object),
+        );
     });
 
     it("renders AutoComplete in disabled mode", async () => {
@@ -40,7 +45,7 @@ describe("AutoComplete Component", () => {
                 label="Auto Complete"
                 disabled
                 value="Option1"
-            />
+            />,
         );
 
         const readOnlyField = screen.getByRole("textbox");
@@ -55,7 +60,7 @@ describe("AutoComplete Component", () => {
                 dataTestId="autocomplete-helper"
                 label="Auto Complete"
                 helperText="Helper text goes here"
-            />
+            />,
         );
 
         const helperText = screen.getByText("Helper text goes here");
@@ -70,7 +75,7 @@ describe("AutoComplete Component", () => {
                 label="Auto Complete"
                 error
                 helperText="This field is required"
-            />
+            />,
         );
 
         const errorText = screen.getByText("This field is required");

package/test/components/Button.test.js

@@ -10,7 +10,11 @@ describe("Button", () => {
     it("Button renders with provided size, onClick triggers", async () => {
         const onClick = jest.fn();
         render(
-            <Button size="big" onClick={onClick} data-testId="button-test-id" />
+            <Button
+                size="big"
+                onClick={onClick}
+                data-testId="button-test-id"
+            />,
         );
         const button = getByTestId("button-test-id");
         expect(button).toHaveClass("qpp-c-button--big");
@@ -33,7 +37,7 @@ describe("Button", () => {
                 onClick={onClick}
                 href="https://whatwouldkevindo.com/"
                 children="test"
-            />
+            />,
         );
         expect(getByText("test").href).toBe("https://whatwouldkevindo.com/");
     });
@@ -46,27 +50,17 @@ describe("Button", () => {
                 className="test"
                 data-testId="text-test-id"
                 children="test"
-            />
+            />,
         );
         expect(getByText("test")).toBeTruthy();
     });
 
     it("Default props are as expected", async () => {
-        const onClick = Button.defaultProps.onClick();
-        expect(onClick).toBe(null);
-        const children = Button.defaultProps.children;
-        expect(children).toBe(false);
-        const className = Button.defaultProps.className;
-        expect(className).toBe("");
-        const href = Button.defaultProps.href;
-        expect(href).toBe("");
-        const loading = Button.defaultProps.loading;
-        expect(loading).toBe(false);
-        const size = Button.defaultProps.size;
-        expect(size).toBe(null);
-        const type = Button.defaultProps.type;
-        expect(type).toBe("button");
-        const variant = Button.defaultProps.variant;
-        expect(variant).toBe(null);
+        render(<Button>Click me</Button>);
+        const button = screen.getByRole("button", { name: /click me/i });
+        expect(button).toHaveAttribute("type", "button");
+        expect(button).not.toBeDisabled();
+        expect(button).toHaveTextContent("Click me");
+        expect(button.className).toContain("");
     });
 });

package/test/components/DateField.test.js

@@ -2,46 +2,42 @@ import * as React from "react";
 import "@testing-library/jest-dom";
 import { describe, expect } from "@jest/globals";
 import DateField from "../../components/DateField/DateField";
-import { act } from "react-dom/test-utils";
 import { render, screen } from "@testing-library/react";
 import dayjs from "dayjs";
 
 describe("DateField", () => {
+    const { findByText, getByDisplayValue } = screen;
     it("DateField Exists", async () => {
-        await act(async () => {
-            const { findByText, getByDisplayValue } = render(
-                <DateField
-                    label="Status Date"
-                    value={dayjs("2022-04-17")}
-                    handleDateChange={() => console.log("Status Date")}
-                    disabled={false}
-                />
-            );
+        render(
+            <DateField
+                label="Status Date"
+                value={dayjs("2022-04-17")}
+                handleDateChange={() => console.log("Status Date")}
+                disabled={false}
+            />,
+        );
 
-            const labelText = await findByText("Status Date");
-            expect(labelText).toBeInTheDocument();
-            expect(await findByText("Status Date")).toBeInTheDocument();
-            expect(getByDisplayValue("04/17/2022")).toBeInTheDocument();
-        });
+        const labelText = await findByText("Status Date");
+        expect(labelText).toBeInTheDocument();
+        expect(await findByText("Status Date")).toBeInTheDocument();
+        expect(getByDisplayValue("04/17/2022")).toBeInTheDocument();
     });
 
     it("DateField Exists, with empty value", async () => {
-        await act(async () => {
-            const { findByText, container } = render(
-                <DateField
-                    label="Status Date"
-                    handleDateChange={() => console.log("Status Date")}
-                    disabled={false}
-                />
-            );
+        const { findByText, container } = render(
+            <DateField
+                label="Status Date"
+                handleDateChange={() => console.log("Status Date")}
+                disabled={false}
+            />,
+        );
 
-            const labelText = await findByText("Status Date");
-            expect(labelText).toBeInTheDocument();
-            expect(await findByText("Status Date")).toBeInTheDocument();
+        const labelText = await findByText("Status Date");
+        expect(labelText).toBeInTheDocument();
+        expect(await findByText("Status Date")).toBeInTheDocument();
 
-            const dateDisplay = container.querySelector('[value="04/17/2022"]');
-            expect(dateDisplay).toBeNull();
-        });
+        const dateDisplay = container.querySelector('[value="04/17/2022"]');
+        expect(dateDisplay).toBeNull();
     });
 
     it("renders ReadOnlyTextField when disabled is true", () => {

package/test/components/DateTimeField.test.js

@@ -2,34 +2,30 @@ import * as React from "react";
 import "@testing-library/jest-dom";
 import { describe, expect } from "@jest/globals";
 import DateTimeField from "../../components/DateTimeField/DateTimeField";
-import { act } from "react-dom/test-utils";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import dayjs from "dayjs";
 
 describe("DateTimeField", () => {
+    const { findByText, findByTestId, getByDisplayValue } = screen;
     it("DateTimeField Exists", async () => {
-        await act(async () => {
-            const { findByText, findByTestId, getByDisplayValue } = render(
-                <DateTimeField
-                    label="Active Date/Time"
-                    id="active-date-time"
-                    dateTimeValue={dayjs("2022-04-17T15:30Z")}
-                    handleDateTimeChange={() => {
-                        return;
-                    }}
-                    disabled={false}
-                />
-            );
+        render(
+            <DateTimeField
+                label="Active Date/Time"
+                id="active-date-time"
+                dateTimeValue={dayjs("2022-04-17T15:30Z")}
+                handleDateTimeChange={() => {
+                    return;
+                }}
+                disabled={false}
+            />,
+        );
 
-            const labelText = await findByText("Active Date/Time");
-            expect(labelText).toBeInTheDocument();
-            expect(
-                await findByTestId("active-date-time-input")
-            ).toBeInTheDocument();
-            expect(
-                getByDisplayValue("04/17/2022 03:30 PM")
-            ).toBeInTheDocument();
-        });
+        const labelText = await findByText("Active Date/Time");
+        expect(labelText).toBeInTheDocument();
+        expect(
+            await findByTestId("active-date-time-input"),
+        ).toBeInTheDocument();
+        expect(getByDisplayValue("04/17/2022 03:30 PM")).toBeInTheDocument();
     });
 
     it("renders ReadOnlyTextField when disabled is true", () => {
@@ -44,7 +40,7 @@ describe("DateTimeField", () => {
                 handleDateTimeChange={() => {}}
                 disabled={true}
                 id={id}
-            />
+            />,
         );
 
         const readOnlyField = getByLabelText(label);
@@ -64,7 +60,7 @@ describe("DateTimeField", () => {
                 handleDateTimeChange={() => {}}
                 disabled={true}
                 id={id}
-            />
+            />,
         );
 
         const readOnlyField = getByLabelText(label);

package/test/components/Instant.test.js

@@ -44,7 +44,7 @@ describe("Instant", () => {
                     dateTimeValue={dayjs("2022-04-17")}
                     dateFieldSx={{}}
                 />
-            </div>
+            </div>,
         );
         const labelText = await findByText("Status Date");
         expect(labelText).toBeInTheDocument();