@madie/madie-design-system 2.0.0 → 2.0.2

package/dist/react/package.json

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

package/{eslint.config.js → eslint.config.cjs}

@@ -28,6 +28,7 @@ module.exports = defineConfig([{
             ecmaFeatures: {
                 jsx: true,
             },
+            ecmaVersion: "latest",
         },
 
         globals: {
@@ -46,6 +47,8 @@ module.exports = defineConfig([{
         "linebreak-style": ["error", "unix"],
         "no-console": 0,
         "no-prototype-builtins": [0],
+        "react/prop-types": "off"
+
     },
 
     settings: {

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": "2.0.00",
+    "version": "2.0.2",
     "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,7 +30,8 @@
         "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/eslint-parser": "^7.27.5",
@@ -45,7 +51,8 @@
         "d3-selection": "^1.4.2",
         "d3-shape": "^1.3.7",
         "enzyme": "^3.11.0",
-        "eslint": "^9.29.0",
+        "es-check": "^9.1.4",
+        "eslint": "^9.30.1",
         "eslint-plugin-react": "^7.33.2",
         "globals": "^16.2.0",
         "jest": "^30.0.0",
@@ -77,15 +84,16 @@
         "url": "https://github.com/MeasureAuthoringTool/madie-design-system/issues"
     },
     "dependencies": {
+        "@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": "^5.0.2",
+        "@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.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",
@@ -103,10 +111,10 @@
         "dayjs": "^1.11.7",
         "dompurify": "^3.2.6",
         "feather-icons-react": "^0.9.0",
+        "html-react-parser": "^5.2.6",
         "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",

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/Button.test.js

@@ -56,21 +56,11 @@ describe("Button", () => {
     });
 
     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/MadieDeleteDialog.test.js

@@ -24,7 +24,7 @@ const DialogTester = () => {
     );
 };
 
-const { findByTestId, getByTestId, queryByText } = screen;
+const { findByTestId, getByTestId, queryByText, getByText } = screen;
 describe("MadieDeleteDialog", () => {
     test("Dialog renders", async () => {
         render(<DialogTester />);
@@ -90,4 +90,33 @@ describe("MadieDeleteDialog", () => {
             ).not.toBeInTheDocument();
         });
     });
+
+    test("Dialog strip out html tags", async () => {
+        render(
+            <MadieDeleteDialog
+                open={true}
+                onClose={() => setDialogOpen(false)}
+                onContinue={() => setDialogOpen(false)}
+                hideWarning={true}
+                dialogTitle="Delete Measure Reference"
+                name={"<p><strong>test &</strong></p><p>test2</p>"}
+            />,
+        );
+
+        const deleteDialog = await getByTestId("delete-dialog");
+        expect(deleteDialog).toBeInTheDocument();
+        await waitFor(() => {
+            expect(
+                queryByText("Are you sure you want to delete ?"),
+            ).toBeVisible();
+            expect(
+                queryByText("This Action cannot be undone."),
+            ).not.toBeInTheDocument();
+            expect(
+                queryByText("<p><strong>test &</strong></p><p>test2</p>"),
+            ).not.toBeInTheDocument();
+            expect(getByText("test &")).toBeInTheDocument();
+            expect(getByText("test2")).toBeInTheDocument();
+        });
+    });
 });

package/test/components/Search.test.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
-import { Search } from "../../components";
+import Search from "../../components/Search";
 
 describe("Search Component", () => {
     const defaultProps = {

package/test/components/TruncateText.test.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
-import { TruncateText } from "../../components";
+import TruncateText from "../../components/TruncateText";
 
 describe("TruncateText", () => {
     const longText =

package/webpack.config.mjs

@@ -0,0 +1,79 @@
+import path from "path";
+import { fileURLToPath } from "url";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import TerserPlugin from "terser-webpack-plugin";
+// import pkg from "./package.json" assert { type: "json" };
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const entry = ["./index.js"];
+
+const _module = {
+  rules: [
+    {
+      test: /\.(js|jsx)?$/,
+      exclude: /node_modules/,
+      use: {
+        loader: "babel-loader"
+      }
+    },
+    {
+      test: /\.scss$/,
+      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+      exclude: /node_modules/,
+    },
+    {
+      test: /\.(ttf|eot|woff|otf|woff2)$/,
+      loader: "file-loader",
+      options: {
+        name: "fonts/[name].[ext]",
+      },
+    },
+    {
+      test: /\.svg$/,
+      use: ["raw-loader", "svgo-loader"],
+    },
+  ],
+};
+
+const plugins = [
+  new MiniCssExtractPlugin({ filename: "style.css" })
+];
+
+const resolve = {
+  extensions: [".js", ".jsx", ".json", ".svg"],
+};
+
+const optimization = {
+  minimize: true,
+  minimizer: [new TerserPlugin()],
+};
+
+export default {
+  mode: "production",
+  entry,
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "index.js",
+    module: true,
+    library: {
+      type: "module",
+    },
+    environment: {
+      module: true,
+    },
+  },
+  experiments: {
+    outputModule: true,
+  },
+  devtool: "source-map",
+  module: _module,
+  plugins,
+  resolve,
+  optimization,
+  externals: {
+    react: "react",
+    "react-dom": "react-dom"
+  }
+};

package/webpack.config.react.mjs

@@ -0,0 +1,72 @@
+import path from "path";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import TerserPlugin from "terser-webpack-plugin";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const _module = {
+  rules: [
+    {
+      test: /\.(js|jsx)?$/,
+      exclude: /node_modules/,
+      use: {
+        loader: "babel-loader"
+      }
+    },
+    {
+      test: /\.scss$/,
+      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+      exclude: /node_modules/,
+    },
+    {
+      test: /\.(ttf|eot|woff|otf|woff2)$/,
+      loader: "file-loader",
+      options: {
+        name: "fonts/[name].[ext]",
+      },
+    },
+    {
+      test: /\.svg$/,
+      use: ["raw-loader", "svgo-loader"],
+    },
+  ],
+};
+
+export default {
+  mode: "production",
+  entry: "./components/index.mjs",
+  output: {
+    filename: "index.mjs",
+    path: path.resolve(__dirname, "dist/react"),
+    module: true,
+    library: {
+      type: "module",
+    },
+    environment: {
+      module: true,
+    },
+  },
+  experiments: {
+    outputModule: true,
+  },
+  devtool: "source-map",
+  module: _module,
+  plugins: [
+    new MiniCssExtractPlugin({ filename: "style.css" }),
+    new HtmlWebpackPlugin(),
+  ],
+  resolve: {
+    extensions: [".js", ".jsx", ".json", ".svg"],
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()],
+  },
+  externals: {
+    react: "react",
+    "react-dom": "react-dom"
+  }
+};

package/components/NotificationBanner/NotificationBanner.stories.js

@@ -1,29 +0,0 @@
-import React from "react";
-import NotificationBanner from "./index";
-
-export default {
-    title: "NotificationBanner",
-    component: NotificationBanner,
-    args: {
-        result: {
-            content: "CONTENT",
-            label: "Label",
-            name: "name",
-            color: "blue",
-            dismissable: false,
-        },
-    },
-    argTypes: {
-        result: {
-            control: "object",
-        },
-        "result.dismissable": {
-            control: "boolean",
-        },
-    },
-};
-
-const Template = (args) => <NotificationBanner {...args} />;
-
-export const ExampleNotificationBanner = Template.bind({});
-ExampleNotificationBanner.storyName = "example NotificationBanner";