@madie/madie-design-system 1.2.101 → 1.2.103

package/.babelrc

@@ -1,7 +1,6 @@
 {
   "presets": ["@babel/preset-react", "@babel/preset-env"],
   "plugins": [
-    "babel-plugin-macros",
     "@babel/plugin-transform-modules-umd",
     "@babel/plugin-transform-class-properties"
   ]

package/.storybook/main.mjs

@@ -0,0 +1,38 @@
+export default {
+    stories: ["../components/**/*.@(mdx|stories.@(js|jsx))"],
+
+    addons: [
+        "@storybook/addon-links",
+        "@storybook/addon-a11y",
+        "@storybook/addon-docs"
+    ],
+
+    framework: {
+        name: "@storybook/react-vite",
+        options: {}
+    },
+
+    docs: {},
+
+    typescript: {
+        reactDocgen: "react-docgen"
+    },
+
+    // stories and components are .js files that contain JSX
+    viteFinal: async (config) => {
+        config.esbuild = {
+            ...config.esbuild,
+            loader: "jsx",
+            include: /(components|lib|\.storybook)\/.*\.jsx?$/,
+            exclude: [],
+        };
+        config.optimizeDeps = {
+            ...config.optimizeDeps,
+            esbuildOptions: {
+                ...(config.optimizeDeps && config.optimizeDeps.esbuildOptions),
+                loader: { ".js": "jsx" },
+            },
+        };
+        return config;
+    },
+};

package/README.md

@@ -1,3 +1,21 @@
 # Madie/madie-design-system React
 
 This directory contains react implementations of the components for Madie.
+
+## Testing
+
+Use Node 20 to match CI. The test suite uses Jest 30, `babel-jest` 30, and
+`jest-environment-jsdom` 30 (JSDOM 26).
+
+```sh
+npm ci
+npm test
+npm run coverage
+```
+
+To run selected suites, use `npm test -- --runTestsByPath test/components/Button.test.js`
+or `npm test -- --testPathPatterns=Button`.
+
+When updating tests, follow the [Jest 30 migration guide](https://jestjs.io/docs/upgrading-to-jest30).
+Use canonical matcher names such as `toHaveBeenCalled` rather than the removed
+`toBeCalled` aliases.

package/components/Breadcrumb/Breadcrumb.stories.js

@@ -1,17 +1,18 @@
 import React from "react";
 import Breadcrumb from "./index";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
 
 export default {
     title: "Breadcrumb",
     component: Breadcrumb,
-    decorators: [withKnobs],
+    args: {
+        newBreadcrumb: true,
+    },
 };
 
-export const ExampleLightBreadcrumb = () => (
+export const ExampleLightBreadcrumb = (args) => (
     <div className="qppds qpp-u-padding--16 qpp-u-fill--blue-80">
         <Breadcrumb
-            newBreadcrumb={boolean("newBreadcrumb", true)}
+            newBreadcrumb={args.newBreadcrumb}
             crumbs={[
                 {
                     url: "/",
@@ -32,10 +33,10 @@ export const ExampleLightBreadcrumb = () => (
 
 ExampleLightBreadcrumb.storyName = "Light";
 
-export const ExampleScreenreaderOnlyBreadcrumb = () => (
+export const ExampleScreenreaderOnlyBreadcrumb = (args) => (
     <div className="qppds qpp-u-padding--16 qpp-u-fill--blue-80">
         <Breadcrumb
-            newBreadcrumb={boolean("newBreadcrumb", true)}
+            newBreadcrumb={args.newBreadcrumb}
             crumbs={[
                 {
                     url: "/",
@@ -50,10 +51,10 @@ export const ExampleScreenreaderOnlyBreadcrumb = () => (
 );
 ExampleScreenreaderOnlyBreadcrumb.storyName = "SR Only Breadcrumb";
 
-export const ExampleDarkBreadcrumb = () => (
+export const ExampleDarkBreadcrumb = (args) => (
     <div className="qppds qpp-u-padding--16">
         <Breadcrumb
-            newBreadcrumb={boolean("newBreadcrumb", true)}
+            newBreadcrumb={args.newBreadcrumb}
             dark
             crumbs={[
                 {

package/components/Button/Button.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import FeatherIcon from "feather-icons-react";
 
 import Button, { TextButton } from "./index";
@@ -8,7 +7,6 @@ import Button, { TextButton } from "./index";
 export default {
     title: "Button",
     component: Button,
-    decorators: [withKnobs],
 };
 
 const Container = ({ className = "", children }) => (

package/components/CalloutBox/CalloutBox.stories.js

@@ -1,12 +1,10 @@
 import React, { useState } from "react";
-import { withKnobs } from "@storybook/addon-knobs";
 
 import CalloutBox from "./index";
 
 export default {
     title: "CalloutBox",
     component: CalloutBox,
-    decorators: [withKnobs],
 };
 
 export const Default = () => {

package/components/Card/Card.stories.js

@@ -1,12 +1,10 @@
 import React from "react";
-import { withKnobs } from "@storybook/addon-knobs";
 
 import Card from "./index";
 
 export default {
     title: "Card",
     component: Card,
-    decorators: [withKnobs],
 };
 
 export const Default = () => {

package/components/DateField/DateField.stories.jsx

@@ -1,11 +1,9 @@
 import React, { useState } from "react";
 import DateField from "./DateField";
-import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
     title: "DateField",
     component: DateField,
-    decorators: [withKnobs],
 };
 export const DateFieldComponent = (args) => {
     const [value, setValue] = useState("");

package/components/DateTimeField/DateTimeField.stories.jsx

@@ -1,11 +1,9 @@
 import React, { useState } from "react";
 import DateTimeField from "./DateTimeField";
-import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
     title: "DateTimeField",
     component: DateTimeField,
-    decorators: [withKnobs],
 };
 
 export const TimeDateFieldComponent = (args) => {

package/components/Dropdown/Dropdown.stories.js

@@ -1,11 +1,9 @@
 import React from "react";
 import Dropdown from "./index";
-import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
     title: "Dropdown",
     component: Dropdown,
-    decorators: [withKnobs],
 };
 
 export const DropdownField = () => (

package/components/Footer/Footer.stories.js

@@ -1,19 +1,23 @@
 import React from "react";
 import Footer from "./FooterUI";
-import { withKnobs, boolean, text } from "@storybook/addon-knobs";
 
 export default {
     title: "Footer",
     component: Footer,
-    decorators: [withKnobs],
+    args: {
+        isFullWidth: false,
+        buildVersion: "BUILD VERSION",
+        isNewFooter: false,
+        showHcdResearch: false,
+    },
 };
 
-export const ExampleFooter = () => (
+export const ExampleFooter = (args) => (
     <Footer
-        isFullWidth={boolean("isFullWidth", false)}
-        buildVersion={text("buildVersion", "BUILD VERSION")}
-        isNewFooter={boolean("isNewFooter", false)}
-        showHcdResearch={boolean("showHcdResearch", false)}
+        isFullWidth={args.isFullWidth}
+        buildVersion={args.buildVersion}
+        isNewFooter={args.isNewFooter}
+        showHcdResearch={args.showHcdResearch}
     />
 );
 

package/components/HowItWorks/HowItWorks.stories.js

@@ -1,12 +1,10 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import HowItWorks from "./index";
 
 export default {
     title: "HowItWorks",
     component: HowItWorks,
-    decorators: [withKnobs],
 };
 
 const Wrapper = ({ children }) => (

package/components/Infotip/Infotip.stories.js

@@ -1,12 +1,11 @@
 import React from "react";
 import Infotip from "./index";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
 
 export default {
     title: "Infotip",
     component: Infotip,
+    args: { lightIcon: false },
     decorators: [
-        withKnobs,
         (storyFn) => (
             <div style={{ marginTop: "120px", marginLeft: "100px" }}>
                 {storyFn()}
@@ -15,8 +14,8 @@ export default {
     ],
 };
 
-export const ExampleInfoTip = () => (
-    <Infotip label="Tooltip Content!" lightIcon={boolean("lightIcon", false)} />
+export const ExampleInfoTip = (args) => (
+    <Infotip label="Tooltip Content!" lightIcon={args.lightIcon} />
 );
 
 ExampleInfoTip.storyName = "qpp themed Infotip";

package/components/Instant/Instant.stories.js

@@ -1,11 +1,9 @@
 import React, { useState } from "react";
 import Instant from "./index";
-import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
     title: "Instant",
     component: Instant,
-    decorators: [withKnobs],
 };
 
 export const InstantComponent = (args) => {

package/components/Link/Link.stories.js

@@ -1,12 +1,10 @@
 import React from "react";
 import DSLink from "./index";
-import { withKnobs } from "@storybook/addon-knobs";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
 export default {
     title: "Link",
     component: DSLink,
-    decorators: [withKnobs],
 };
 
 export const LinkLabel = () => <DSLink href="#">Link Label</DSLink>;

package/components/MadieAlert/MadieAlert.stories.js

@@ -1,12 +1,10 @@
 import React from "react";
 import MadieAlert from "./index";
-import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
     title: "Madie Alert",
     component: MadieAlert,
     decorators: [
-        withKnobs,
         (storyFn) => (
             <div style={{ padding: "120px", backgroundColor: "gray" }}>
                 {storyFn()}

package/components/MadieConfirmDialog/MadieConfirmDialog.stories.js

@@ -1,12 +1,10 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import MadieConfirmDialog from "./index";
 import Button from "../Button";
 export default {
     title: "MadieConfirmDialog",
     component: MadieConfirmDialog,
-    decorators: [withKnobs],
 };
 
 const Wrapper = ({ children }) => (

package/components/MadieDeleteDialog/MadieDeleteDialog.stories.js

@@ -1,12 +1,10 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import MadieDeleteDialog from "./index";
 import Button from "../Button";
 export default {
     title: "MadieDeleteDialog",
     component: MadieDeleteDialog,
-    decorators: [withKnobs],
 };
 
 const Wrapper = ({ children }) => (

package/components/MadieDialog/MadieDialog.stories.js

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import MadieDialog from "./index";
 import TextArea from "../TextArea/index";
 import Select from "../Select/index";
@@ -11,7 +10,6 @@ import { DialogContent, Typography } from "@mui/material";
 export default {
     title: "MadieDialog",
     component: MadieDialog,
-    decorators: [withKnobs],
 };
 
 const Wrapper = ({ children }) => (

package/components/MadieDiscardDialog/MadieDiscardDialog.stories.js

@@ -1,12 +1,10 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import MadieDiscardDialog from "./index";
 import Button from "../Button";
 export default {
     title: "MadieDiscardDialog",
     component: MadieDiscardDialog,
-    decorators: [withKnobs],
 };
 
 const Wrapper = ({ children }) => (

package/components/MadieSpinner/MadieSpinner.stories.js

@@ -1,12 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import MadieSpinner from "./index";
 
 export default {
     title: "MadieSpinner",
     component: MadieSpinner,
-    decorators: [withKnobs],
 };
 
 const Wrapper = ({ children }) => (

package/components/MadieTable/MadieTable.stories.js

@@ -0,0 +1,93 @@
+import React, { useMemo, useState } from "react";
+import {
+    createColumnHelper,
+    getCoreRowModel,
+    getSortedRowModel,
+    useReactTable,
+} from "@tanstack/react-table";
+import MadieTable from "./index";
+import TruncateText from "../TruncateText";
+
+export default {
+    title: "Madie Table",
+    component: MadieTable,
+};
+
+const longDescription =
+    "Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing Domain. This description is intentionally long so that it is truncated and exposes a keyboard focusable Show more button.";
+
+const rows = [
+    { id: "1", name: "Measure A", version: "1.0.000", description: longDescription },
+    { id: "2", name: "Measure B", version: "0.0.001", description: "Short description" },
+    { id: "3", name: "Measure C", version: "2.1.000", description: longDescription },
+];
+
+const columnHelper = createColumnHelper();
+
+const useStoryTable = (data) => {
+    const [sorting, setSorting] = useState([]);
+    const columns = useMemo(
+        () => [
+            columnHelper.accessor("name", { header: "Name" }),
+            columnHelper.accessor("version", { header: "Version" }),
+            columnHelper.accessor("description", {
+                header: "Description",
+                enableSorting: false,
+                cell: (info) => (
+                    <TruncateText
+                        text={info.getValue()}
+                        maxLength={60}
+                        dataTestId={`description-${info.row.original.id}`}
+                    />
+                ),
+            }),
+        ],
+        []
+    );
+    const table = useReactTable({
+        data,
+        columns,
+        state: { sorting },
+        onSortingChange: setSorting,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+    });
+
+    // asc -> desc -> cleared, matching how the consuming apps drive MadieTable
+    const handleSort = (columnId) => {
+        const current = sorting[0];
+        if (!current || current.id !== columnId) {
+            setSorting([{ id: columnId, desc: false }]);
+        } else if (!current.desc) {
+            setSorting([{ id: columnId, desc: true }]);
+        } else {
+            setSorting([]);
+        }
+    };
+
+    return {
+        table,
+        handleSort,
+        currentSort: sorting[0]?.id,
+        currentDirection: sorting[0] ? (sorting[0].desc ? "DESC" : "ASC") : undefined,
+    };
+};
+
+export const WithTruncatedText = () => {
+    const tableProps = useStoryTable(rows);
+    return (
+        <div className="measure-table" style={{ padding: 24 }}>
+            <MadieTable {...tableProps} ariaLabel="Measures" />
+        </div>
+    );
+};
+WithTruncatedText.storyName = "With TruncateText cells";
+
+export const Empty = () => {
+    const tableProps = useStoryTable([]);
+    return (
+        <div className="measure-table" style={{ padding: 24 }}>
+            <MadieTable {...tableProps} ariaLabel="Measures" />
+        </div>
+    );
+};

package/components/MadieTable/index.jsx

@@ -4,8 +4,20 @@ import { flexRender } from "@tanstack/react-table";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
-import tw from "twin.macro";
-import "styled-components/macro";
+import styled from "@emotion/styled";
+
+const StyledTable = styled.table`
+  min-width: 100%;
+`;
+
+const TH = styled.th`
+  padding: 0.75rem;
+  text-align: left;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+  text-transform: capitalize;
+`;
 
 const MadieTable = ({
   table,
@@ -15,16 +27,15 @@ const MadieTable = ({
   renderExpandedRow,
   emptyMessage = "No results were found",
   id="measureListTable",
-  dataTestId = "measure-list-tbl"
+  dataTestId = "measure-list-tbl",
+  ariaLabel,
 }) => {
-    const TH = tw.th`p-3 text-left text-sm font-bold capitalize`;
     const [hoveredHeader, setHoveredHeader] = useState(null);
 
   return (
-    <table
-      /* eslint-disable-next-line react/no-unknown-property */
-      tw="min-w-full"
+    <StyledTable
       id={id}
+      aria-label={ariaLabel}
       data-testid={dataTestId}
       className="tcl-table"
       style={{
@@ -39,11 +50,23 @@ const MadieTable = ({
           <tr key={headerGroup.id}>
             {headerGroup.headers.map((header) => {
               const isHovered = hoveredHeader?.includes(header.id);
+              const isSorted =
+                currentSort === header.column.id.replace("_", ".");
+              const ariaSort = header.column.getCanSort()
+                ? isSorted
+                  ? currentDirection === "ASC"
+                    ? "ascending"
+                    : currentDirection === "DESC"
+                    ? "descending"
+                    : "none"
+                  : "none"
+                : undefined;
 
               return (
                 <TH
                   key={header.id}
                   scope="col"
+                  aria-sort={ariaSort}
                   onMouseEnter={() => setHoveredHeader(header.id)}
                   onMouseLeave={() => setHoveredHeader(null)}
                   className="header-cell"
@@ -59,6 +82,8 @@ const MadieTable = ({
                       onClick={() =>
                         handleSort(header.id.replace("_", "."))
                       }
+                      onFocus={() => setHoveredHeader(header.id)}
+                      onBlur={() => setHoveredHeader(null)}
                       data-testid={`header-${header.id.replace("_", ".")}`}
                       title={
                         header.column.getCanSort()
@@ -139,7 +164,7 @@ const MadieTable = ({
                   </React.Fragment>
                 ))}
               </tbody>
-    </table>
+    </StyledTable>
   );
 };
 
@@ -157,6 +182,7 @@ MadieTable.propTypes = {
   emptyMessage: PropTypes.node,
 
   id: PropTypes.string,
+  ariaLabel: PropTypes.string,
   dataTestId: PropTypes.string,
 };