@madie/madie-design-system 2.0.0 → 2.0.1

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.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,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",
@@ -106,7 +114,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/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";

package/components/NotificationBanner/index.js

@@ -1,279 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-
-import SanitizedContent from "../SanitizedContent";
-import { CloseXIcon, BellOutline } from "../../lib/SvgComponents.jsx";
-import { withGetConfig } from "../hooks/useGetConfig";
-
-class NotificationBanner extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            height: "100%",
-            expanded: true,
-        };
-
-        this._renderCloseButton = this.renderCloseButton.bind(this);
-        this._collapseNotification = this.collapseNotification.bind(this);
-        this._expandNotification = this.expandNotification.bind(this);
-        this._setBannerHeight = this.setBannerHeight.bind(this);
-    }
-
-    componentDidMount() {
-        if (window.innerWidth <= 767) {
-            this.setState({
-                expanded: false,
-            });
-        }
-
-        window.addEventListener("load", this._setBannerHeight);
-        window.addEventListener("resize", this._setBannerHeight);
-    }
-
-    // Populate state with notification from localStorage
-    componentDidUpdate(prevProps) {
-        if (prevProps.result !== this.props?.result) {
-            const { result: notifications } = this.props;
-            if (Object.keys(notifications).length > 0) {
-                this.setState({
-                    expanded: this.isNotificationExpanded(
-                        notifications.content,
-                    ),
-                });
-            }
-        }
-    }
-
-    setBannerHeight() {
-        const {
-            result: {
-                content: { content },
-            },
-        } = this.props;
-        if (content) {
-            this.bannerContainer.style.transition = "none";
-
-            this.state.expanded
-                ? this.collapsedBanner.setAttribute("tabIndex", "-1")
-                : this.collapsedBanner.setAttribute("tabIndex", " ");
-
-            this.setState({
-                height: this.state.expanded
-                    ? "100%"
-                    : this.collapsedWrapper.offsetHeight + "px",
-            });
-        }
-    }
-
-    isNotificationExpanded(notification) {
-        const dateDismissed = new Date(notification.dateDismissed);
-        const dateUpdated = new Date(notification.dateUpdated);
-        const notDismissed =
-            (this.isDateValid(dateUpdated) &&
-                this.isDateValid(dateDismissed) &&
-                dateUpdated >= dateDismissed) ||
-            !this.isDateValid(dateDismissed);
-
-        return notDismissed;
-    }
-
-    /**
-     * Whether the date is valid, i.e. not null
-     *
-     * @param {Date} date
-     * @return {Boolean}
-     */
-    isDateValid(date) {
-        return !isNaN(Date.parse(date));
-    }
-
-    /**
-     * Try to find this NotificationBanner instance in localStorage, or else add
-     * a minimal version of it, and mark it with a dateDismissed, then update
-     * localStorage.
-     */
-    markNotificationClosed() {
-        const { result } = this.props;
-        const dateDismissed = new Date().toISOString();
-        const storageNotification = result || {};
-
-        if (
-            storageNotification &&
-            Object.keys(storageNotification).length > 0
-        ) {
-            window.localStorage.setItem(
-                "notifications",
-                JSON.stringify({
-                    ...storageNotification,
-                    content: {
-                        ...storageNotification.content,
-                        dateDismissed,
-                    },
-                }),
-            );
-        } else {
-            window.localStorage.setItem(
-                "notifications",
-                JSON.stringify({
-                    ...storageNotification,
-                    content: {
-                        name: "header-notification",
-                        dateDismissed,
-                    },
-                }),
-            );
-        }
-    }
-
-    /**
-     * Callback when the user dimisses a notification. Mark it as dismissed in
-     * localStorage, empty the contents, and dispatch a custom event to notify
-     * any observers that it has been dismissed.
-     */
-    collapseNotification(e) {
-        e.stopPropagation();
-        this.markNotificationClosed();
-        this.collapsedBanner.setAttribute("tabIndex", " ");
-        this.bannerContainer.style.transition = "height .2s ease-out";
-        this.setState({
-            expanded: false,
-            height: this.collapsedWrapper.offsetHeight + "px",
-        });
-    }
-
-    expandNotification() {
-        if (!this.state.expanded) {
-            this.collapsedBanner.setAttribute("tabIndex", "-1");
-            this.bannerContainer.style.transition = "height .2s ease-out";
-            this.setState({
-                expanded: true,
-                height: "100%",
-            });
-        }
-    }
-
-    /**
-     * Renders the close button if the notification instance is dismissable.
-     *
-     * @return {String} HTML content
-     */
-    renderCloseButton() {
-        const {
-            result: {
-                content: { dismissable },
-            },
-        } = this.props;
-        if (dismissable) {
-            return (
-                <button
-                    onClick={this._collapseNotification}
-                    type="button"
-                    className="notification-banner-close"
-                >
-                    <svg
-                        className="close-icon"
-                        aria-hidden="true"
-                        focusable="false"
-                    >
-                        <CloseXIcon />
-                    </svg>
-                    <span className="sr-only">Close</span>
-                </button>
-            );
-        } else {
-            return "";
-        }
-    }
-
-    /**
-     * Render the notification if it has any contents.
-     *
-     * @return {String} HTML content
-     */
-    render() {
-        const { expanded, height } = this.state;
-        const { result: { content: { enabled, content } = {} } = {} } =
-            this.props;
-        if (!content || !enabled) {
-            return <div id="notification-banner" />;
-        } else {
-            const notificationStatus = expanded ? "expanded" : "collapsed";
-            const { color = "blue", label = "Update" } = content;
-            const className = `notification-banner  notification-banner-${color} ${notificationStatus}`;
-
-            return (
-                <div
-                    style={{ height }}
-                    ref={(elem) => (this.bannerContainer = elem)}
-                    className={className}
-                >
-                    <div
-                        ref={(elem) => (this.expandedWrapper = elem)}
-                        className={`notification-banner-wrapper expanded-view`}
-                    >
-                        <div className="notification-banner-label">{label}</div>
-                        <div className="notification-banner-content">
-                            <SanitizedContent
-                                html={
-                                    expanded
-                                        ? content
-                                        : "<p>Nothing to see here</p>"
-                                }
-                            />
-                        </div>
-                        {expanded && this._renderCloseButton()}
-                    </div>
-
-                    <div
-                        ref={(elem) => (this.collapsedWrapper = elem)}
-                        className={`notification-banner-wrapper collapsed-view`}
-                        onClick={this._expandNotification}
-                    >
-                        <button
-                            ref={(elem) => (this.collapsedBanner = elem)}
-                            className={`notification-banner-label`}
-                        >
-                            {label}
-                            <span className="bell-icon">
-                                <svg aria-hidden="true" focusable="false">
-                                    <BellOutline />
-                                </svg>
-                            </span>
-                        </button>
-                    </div>
-                </div>
-            );
-        }
-    }
-}
-
-NotificationBanner.propTypes = {
-    result: PropTypes.shape({
-        content: PropTypes.shape({
-            content: PropTypes.string,
-            label: PropTypes.string,
-            color: PropTypes.string,
-            dismissable: PropTypes.bool,
-        }),
-    }),
-};
-
-NotificationBanner.defaultProps = {
-    result: {
-        content: {
-            content: null,
-            label: "Update",
-            color: "blue",
-            dismissable: true,
-        },
-    },
-};
-
-export default withGetConfig(NotificationBanner, {
-    timeout: 5,
-    url: "/config/notification",
-    localStorageName: "active_notification",
-    equalityCheckExclude: ["dateDismissed", "dateUpdated"],
-    defaultContent: {},
-});

package/components/UnwrappedSpinner/index.js

@@ -1,8 +0,0 @@
-import React, { Component } from "react";
-import DSSpinner from "@cmsgov/design-system/dist/components/Spinner/Spinner";
-
-export default class SpinnerUI extends Component {
-    render() {
-        return <DSSpinner />;
-    }
-}