@madie/madie-design-system 1.2.89 → 1.2.91

package/jest.config.js

@@ -6,6 +6,10 @@ module.exports = {
         "^.+\\.(j|t)sx?$": "babel-jest",
     },
     setupFilesAfterEnv: ["@testing-library/jest-dom"],
+    moduleNameMapper: {
+        "^twin.macro$": "<rootDir>/test/__mocks__/twin.macro.js",
+        "^styled-components/macro$": "<rootDir>/test/__mocks__/styled-components-macro.js",
+    },
     globals: {
         "ts-jest": {
             tsconfig: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@madie/madie-design-system",
-    "version": "1.2.89",
+    "version": "1.2.91",
     "description": "Shared style guide across the Madie program.",
     "main": "dist/index.js",
     "homepage": "https://github.com/MeasureAuthoringTool/madie-design-system",
@@ -54,6 +54,7 @@
         "babel-eslint": "^10.1.0",
         "babel-jest": "^27.4.6",
         "babel-loader": "^8.2.3",
+        "babel-plugin-macros": "^3.1.0",
         "chai": "^4.3.4",
         "copy-webpack-plugin": "^5.1.2",
         "css-loader": "^7.1.2",
@@ -73,6 +74,7 @@
         "mini-css-extract-plugin": "^0.11.3",
         "moxios": "^0.4.0",
         "node-fetch": "^2.6.7",
+        "path-browserify": "^1.0.1",
         "prettier": "^2.5.1",
         "raw-loader": "^4.0.2",
         "react": "^17.0.2",
@@ -141,11 +143,16 @@
         "react-draggable": "^4.4.6",
         "react-modal": "^3.14.4",
         "retry": "^0.13.1",
+        "styled-components": "^5.3.7",
         "svgo": "^3.0.3",
+        "tailwindcss": "^3.4.10",
+        "twin.macro": "^3.4.0",
         "what-input": "^5.2.10",
         "xss": "^1.0.10"
     },
     "peerDependencies": {
+        "@tanstack/match-sorter-utils": "^8.8.4",
+        "@tanstack/react-table": "^8.10.3",
         "classnames": "^2.3.1"
     },
     "overrides": {

package/styles/components/_search-and-filter.scss

@@ -0,0 +1,13 @@
+.measure-search-filters {
+  display: flex;
+  flex-direction: row;
+  column-gap: 24px;
+
+  > div {
+    flex-basis: 1;
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    width: 312px;
+  }
+}

package/styles/qppds/components/_search-and-filter.scss

@@ -0,0 +1,13 @@
+.measure-search-filters {
+  display: flex;
+  flex-direction: row;
+  column-gap: 24px;
+
+  > div {
+    flex-basis: 1;
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    width: 312px;
+  }
+}

package/test/__mocks__/styled-components-macro.js

@@ -0,0 +1,2 @@
+
+module.exports = {};

package/test/__mocks__/twin.macro.js

@@ -0,0 +1,24 @@
+const React = require("react");
+
+/**
+ * Returns a tagged-template function that
+ * produces a valid React component.
+ */
+const createMockTag = (tag) => {
+  return () =>
+    React.forwardRef(({ children, ...props }, ref) =>
+      React.createElement(tag, { ref, ...props }, children)
+    );
+};
+
+const proxy = new Proxy(
+  {},
+  {
+    get: (_target, key) => createMockTag(key),
+  }
+);
+
+module.exports = {
+  __esModule: true,
+  default: proxy,
+};

package/test/components/MadieTable.test.js

@@ -0,0 +1,176 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { createColumnHelper, useReactTable, getCoreRowModel } from "@tanstack/react-table";
+import { MadieTable } from "../../components";
+import userEvent from "@testing-library/user-event";
+
+/**
+ * Test helper component to provide a real TanStack table instance
+ */
+const TestTableWrapper = ({
+  data,
+  columns,
+  currentSort,
+  currentDirection,
+  handleSort = jest.fn(),
+  renderExpandedRow,
+}) => {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <MadieTable
+      table={table}
+      currentSort={currentSort}
+      currentDirection={currentDirection}
+      handleSort={handleSort}
+      renderExpandedRow={renderExpandedRow}
+    />
+  );
+};
+
+describe("MadieTable", () => {
+  const columnHelper = createColumnHelper();
+
+  const columns = [
+    columnHelper.accessor("name", {
+      header: "Measure Name",
+      cell: info => info.getValue(),
+    }),
+  ];
+
+  const data = [
+    { id: "1", name: "Test Measure 1" },
+    { id: "2", name: "Test Measure 2" },
+  ];
+
+  it("renders table headers", () => {
+    render(
+      <TestTableWrapper
+        data={data}
+        columns={columns}
+      />
+    );
+
+    expect(screen.getByText("Measure Name")).toBeInTheDocument();
+  });
+
+  it("renders table rows", () => {
+    render(
+      <TestTableWrapper
+        data={data}
+        columns={columns}
+      />
+    );
+
+    expect(screen.getByText("Test Measure 1")).toBeInTheDocument();
+    expect(screen.getByText("Test Measure 2")).toBeInTheDocument();
+  });
+
+  it("shows empty state when there are no rows", () => {
+    render(
+      <TestTableWrapper
+        data={[]}
+        columns={columns}
+      />
+    );
+
+    expect(
+      screen.getByText("No results were found")
+    ).toBeInTheDocument();
+  });
+
+  it("calls handleSort when sortable header is clicked", () => {
+    const handleSort = jest.fn();
+
+    render(
+      <TestTableWrapper
+        data={data}
+        columns={columns}
+        currentSort="name"
+        currentDirection="ASC"
+        handleSort={handleSort}
+      />
+    );
+
+    fireEvent.click(screen.getByTestId("header-name"));
+
+    expect(handleSort).toHaveBeenCalledWith("name");
+  });
+
+  it("renders expanded row content using renderExpandedRow", () => {
+    render(
+      <TestTableWrapper
+        data={data}
+        columns={columns}
+        renderExpandedRow={(row) => (
+          <tr data-testid={`expanded-${row.id}`}>
+            <td colSpan={1}>Expanded content for {row.original.name}</td>
+          </tr>
+        )}
+      />
+    );
+
+    expect(
+      screen.getByText("Expanded content for Test Measure 1")
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByText("Expanded content for Test Measure 2")
+    ).toBeInTheDocument();
+  });
+
+   
+it("shows the hover icon on mouse enter", () => {
+  render(
+    <TestTableWrapper
+      data={data}
+      columns={columns}
+    />
+  );
+  const headerCell = screen
+    .getByTestId("header-name")
+    .closest("th");
+  fireEvent.mouseEnter(headerCell);
+
+  expect(
+    screen.getByTestId("unfold-more-icon")
+  ).toBeInTheDocument();
+});
+
+
+it("renders ascending sort icon when currentSort is ASC", () => {
+  render(
+    <TestTableWrapper
+      data={data}
+      columns={columns}
+      currentSort="name"
+      currentDirection="ASC"
+    />
+  );
+
+  expect(
+    screen.getByTestId("KeyboardArrowUpIcon")
+  ).toBeInTheDocument();
+});
+
+
+it("renders descending sort icon when currentSort is DESC", () => {
+  render(
+    <TestTableWrapper
+      data={data}
+      columns={columns}
+      currentSort="name"
+      currentDirection="DESC"
+    />
+  );
+
+  expect(
+    screen.getByTestId("KeyboardArrowDownIcon")
+  ).toBeInTheDocument();
+});
+
+});

package/test/components/SearchAndFilter.test.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import SearchAndFilter from "../../components/SearchAndFilter";
+
+describe("MeasureSearchFilter", () => {
+  const defaultProps = {
+    filterBy: "",
+    searchField: "",
+    onFilterChange: jest.fn(),
+    onSearchChange: jest.fn(),
+    onSearchTrigger: jest.fn(),
+    onSearchClear: jest.fn(),
+    filterByOpts: ["Measure Name", "CMS ID"],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders filter select and search input", () => {
+    render(<SearchAndFilter {...defaultProps} />);
+
+    expect(screen.getByTestId("filter-by-select")).toBeInTheDocument();
+    expect(
+      screen.getByTestId("test-case-list-search")
+    ).toBeInTheDocument();
+  });
+
+  it("calls onSearchChange when typing in the search field", () => {
+    render(<SearchAndFilter {...defaultProps} />);
+
+    const searchInput = screen.getByTestId(
+      "test-case-list-search-input"
+    );
+
+    fireEvent.change(searchInput, {
+      target: { value: "test search" },
+    });
+
+    expect(defaultProps.onSearchChange).toHaveBeenCalled();
+  });
+
+  it("triggers search when pressing Enter in the search field", () => {
+    render(<SearchAndFilter {...defaultProps} />);
+
+    const searchInput = screen.getByTestId(
+      "test-case-list-search-input"
+    );
+
+    fireEvent.keyPress(searchInput, {
+      key: "Enter",
+      code: "Enter",
+      charCode: 13,
+    });
+
+    expect(defaultProps.onSearchTrigger).toHaveBeenCalled();
+  });
+
+  it("triggers search when clicking the search icon", () => {
+    render(<SearchAndFilter {...defaultProps} />);
+
+    fireEvent.click(
+      screen.getByTestId("test-case-trigger-search")
+    );
+
+    expect(defaultProps.onSearchTrigger).toHaveBeenCalled();
+  });
+
+  it("clears search when clicking the clear icon", () => {
+    render(<SearchAndFilter {...defaultProps} />);
+
+    fireEvent.click(
+      screen.getByTestId("test-case-clear-search")
+    );
+
+    expect(defaultProps.onSearchClear).toHaveBeenCalled();
+  });
+});

package/test/components/UseFilterSearch.test.js

@@ -0,0 +1,164 @@
+import React from "react";
+import { screen, fireEvent, render } from "@testing-library/react";
+import {
+  useFilterSearch,
+  filterByOptions,
+  filterMap,
+} from "../../components/SearchAndFilter/useFilterSearch";
+
+/**
+ * Test harness to expose hook state & handlers
+ */
+const TestHarness = ({ onPageReset }) => {
+  const {
+    filterBy,
+    searchField,
+    finalSearchAndFilterby,
+    handleFilter,
+    handleSearch,
+    finalizeSearchCriteria,
+    blankSearchCriteria,
+  } = useFilterSearch(onPageReset);
+
+  return (
+    <div>
+      <span data-testid="filterBy">{filterBy}</span>
+      <span data-testid="searchField">{searchField}</span>
+      <span data-testid="finalFilterBy">
+        {finalSearchAndFilterby.finalFilterBy}
+      </span>
+      <span data-testid="finalSearchField">
+        {finalSearchAndFilterby.finalSearchField}
+      </span>
+
+      <button
+        data-testid="set-filter"
+        onClick={() =>
+          handleFilter({ target: { value: "Measure" } })
+        }
+      />
+      <button
+        data-testid="set-search"
+        onClick={() =>
+          handleSearch({ target: { value: "Diabetes" } })
+        }
+      />
+      <button
+        data-testid="finalize"
+        onClick={finalizeSearchCriteria}
+      />
+      <button
+        data-testid="clear"
+        onClick={blankSearchCriteria}
+      />
+    </div>
+  );
+};
+
+describe("useFilterSearch", () => {
+  /**
+   * ✅ exported constants
+   */
+  it("exports the correct filter options", () => {
+    expect(filterByOptions).toEqual([
+      "Measure",
+      "Version",
+      "CMS ID",
+    ]);
+  });
+
+  it("exports the correct filter map", () => {
+    expect(filterMap).toEqual({
+      Measure: "measureName",
+      Version: "version",
+      "CMS ID": "cmsId",
+    });
+  });
+
+  /**
+   * ✅ initialization
+   */
+  it("initializes all state as empty strings", () => {
+    render(<TestHarness />);
+
+    expect(screen.getByTestId("filterBy")).toHaveTextContent("");
+    expect(screen.getByTestId("searchField")).toHaveTextContent("");
+    expect(screen.getByTestId("finalFilterBy")).toHaveTextContent("");
+    expect(screen.getByTestId("finalSearchField")).toHaveTextContent("");
+  });
+
+  /**
+   * ✅ state updates
+   */
+  it("updates filterBy and searchField independently", () => {
+    render(<TestHarness />);
+
+    fireEvent.click(screen.getByTestId("set-filter"));
+    expect(screen.getByTestId("filterBy")).toHaveTextContent("Measure");
+
+    fireEvent.click(screen.getByTestId("set-search"));
+    expect(screen.getByTestId("searchField")).toHaveTextContent("Diabetes");
+  });
+
+  /**
+   * ✅ finalize logic
+   */
+  it("finalizes the current filter and search values", () => {
+    render(<TestHarness />);
+
+    fireEvent.click(screen.getByTestId("set-filter"));
+    fireEvent.click(screen.getByTestId("set-search"));
+    fireEvent.click(screen.getByTestId("finalize"));
+
+    expect(screen.getByTestId("finalFilterBy")).toHaveTextContent("Measure");
+    expect(screen.getByTestId("finalSearchField")).toHaveTextContent("Diabetes");
+  });
+
+  /**
+   * ✅ reset logic + callback
+   */
+  it("clears all state and calls onPageReset when provided", () => {
+    const onPageReset = jest.fn();
+
+    render(<TestHarness onPageReset={onPageReset} />);
+
+    fireEvent.click(screen.getByTestId("set-filter"));
+    fireEvent.click(screen.getByTestId("set-search"));
+    fireEvent.click(screen.getByTestId("finalize"));
+    fireEvent.click(screen.getByTestId("clear"));
+
+    expect(screen.getByTestId("filterBy")).toHaveTextContent("");
+    expect(screen.getByTestId("searchField")).toHaveTextContent("");
+    expect(screen.getByTestId("finalFilterBy")).toHaveTextContent("");
+    expect(screen.getByTestId("finalSearchField")).toHaveTextContent("");
+
+    expect(onPageReset).toHaveBeenCalledTimes(1);
+  });
+
+  it("clears state safely when onPageReset is not provided", () => {
+    render(<TestHarness />);
+
+    fireEvent.click(screen.getByTestId("clear"));
+
+    expect(screen.getByTestId("filterBy")).toHaveTextContent("");
+    expect(screen.getByTestId("searchField")).toHaveTextContent("");
+  });
+});
+describe("useFilterSearch", () => {
+  it("exposes the correct static filter options", () => {
+    expect(filterByOptions).toEqual([
+      "Measure",
+      "Version",
+      "CMS ID",
+    ]);
+  });
+
+  it("exposes the correct filter map", () => {
+    expect(filterMap).toEqual({
+      Measure: "measureName",
+      Version: "version",
+      "CMS ID": "cmsId",
+    });
+  });
+
+});

package/webpack.config.js

@@ -74,11 +74,14 @@ const plugins = [
 ];
 
 const resolve = {
-    extensions: [".js", ".jsx", ".json", ".svg", "*"],
+    extensions: [".js", ".jsx", ".json", ".svg"],
     alias: {
         react: "preact/compat",
         "react-dom": "preact/compat",
     },
+    fallback: {
+        path: require.resolve("path-browserify"),
+    }
 };
 
 const optimization = {

package/webpack.config.react.js

@@ -97,7 +97,7 @@ module.exports = {
     module: _module,
     plugins,
     resolve: {
-        extensions: [".js", ".jsx", ".json", ".svg", "*"],
+        extensions: [".js", ".jsx", ".json", ".svg"],
     },
     optimization,
     externals: { react: "react" },

package/components/Search/Search.stories.js

@@ -1,21 +0,0 @@
-import React from "react";
-import Search from "./index";
-import { withKnobs } from "@storybook/addon-knobs";
-
-export default {
-    title: "Search",
-    component: Search,
-    decorators: [withKnobs],
-};
-
-export const ExampleSearch = () => (
-    <Search
-        id="Example id"
-        name="Example name"
-        placeholder="Example placeholder"
-        inputAriaLabel="Example input arial-label"
-        buttonAriaLabel="Example button arial-label"
-    />
-);
-
-ExampleSearch.storyName = "example Search";

package/components/Search/index.js

@@ -1,86 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import SearchIcon from "@mui/icons-material/Search";
-
-const Search = ({
-    id,
-    name,
-    placeholder,
-    disableSearchBtn,
-    disabled,
-    inputValue,
-    onClick,
-    onChange,
-    inputAriaLabel,
-    buttonAriaLabel,
-    inputWidth,
-}) => {
-    const inputStyle = {
-        width: inputWidth,
-        borderColor: "#8C8C8C",
-    };
-    return (
-        <form role="search" className="qpp-c-search qpp-c-search--compact">
-            <label className="qpp-u-visually-hidden" htmlFor={id}>
-                Search
-            </label>
-            <div className="qpp-c-search__wrap">
-                <input
-                    style={inputStyle}
-                    className="qpp-c-text-input"
-                    type="search"
-                    id={id}
-                    name={name}
-                    placeholder={placeholder}
-                    value={inputValue}
-                    disabled={disabled}
-                    onChange={onChange}
-                    aria-label={inputAriaLabel}
-                />
-
-                <button
-                    data-testid="search-btn"
-                    aria-label={buttonAriaLabel}
-                    onClick={onClick}
-                    disabled={disableSearchBtn}
-                    id={`${id}-submit`}
-                    type="submit"
-                    className="qpp-c-search__submit qpp-c-button qpp-c-button--text"
-                >
-                    <span className="qpp-u-visually-hidden">Search</span>
-                    <SearchIcon classes={{ root: "qpp-icon-mat" }} />
-                </button>
-            </div>
-        </form>
-    );
-};
-
-Search.propTypes = {
-    id: PropTypes.string,
-    name: PropTypes.string,
-    placeholder: PropTypes.string,
-    disableSearchBtn: PropTypes.bool,
-    disabled: PropTypes.bool,
-    inputValue: PropTypes.string,
-    onClick: PropTypes.func,
-    onChange: PropTypes.func,
-    inputAriaLabel: PropTypes.string,
-    buttonAriaLabel: PropTypes.string,
-    inputWidth: PropTypes.string,
-};
-
-Search.defaultProps = {
-    id: "search-input",
-    name: "",
-    placeholder: "",
-    disableSearchBtn: false,
-    disabled: false,
-    inputValue: "",
-    onClick: () => null,
-    onChange: () => null,
-    inputAriaLabel: "",
-    buttonAriaLabel: "",
-    inputWidth: "auto",
-};
-
-export default Search;