Improve DateMonthYearWidget component (#22652)

* Improve DateMonthYearWidget component

* migrate to TypeScript, add type annotations
* include props definition
* support Storybook
* add a basic unit test

frontend/src/metabase/components/DateMonthYearWidget/DateMonthYearWidget.stories.tsx

+import React from "react";
+import { ComponentStory } from "@storybook/react";
+import { useArgs } from "@storybook/client-api";
+import DateMonthYearWidget from "./DateMonthYearWidget";
+
+export default {
+  title: "Parameters/DateMonthYearWidget",
+  component: DateMonthYearWidget,
+};
+
+const Template: ComponentStory<typeof DateMonthYearWidget> = args => {
+  const [{ value }, updateArgs] = useArgs();
+
+  const handleSetValue = (v: string) => {
+    updateArgs({ value: v });
+  };
+
+  const handleClose = () => {
+    // do nothing
+  };
+
+  return (
+    <DateMonthYearWidget
+      {...args}
+      value={value}
+      setValue={handleSetValue}
+      onClose={handleClose}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  value: "",
+};
+
+export const ThisYear = Template.bind({});
+ThisYear.args = {
+  value: "2022",
+};
+
+export const LastYear = Template.bind({});
+LastYear.args = {
+  value: "2021-07",
+};

frontend/src/metabase/parameters/components/widgets/DateMonthYearWidget.jsx → frontend/src/metabase/components/DateMonthYearWidget/DateMonthYearWidget.tsx

-/* eslint-disable react/prop-types */
 import React from "react";
 import moment from "moment";
 import _ from "underscore";
@@ -8,9 +7,25 @@ import YearPicker from "metabase/components/YearPicker";
 
 import { MonthContainer, MonthList } from "./DateMonthYearWidget.styled";
 
-export default class DateMonthYearWidget extends React.Component {
-  constructor(props, context) {
-    super(props, context);
+type Props = {
+  value: string;
+  setValue: (v: string) => void;
+  onClose: () => void;
+};
+
+type State = {
+  month: number | null;
+  year: number;
+};
+
+class DateMonthYearWidget extends React.Component<Props, State> {
+  state: State = {
+    month: null,
+    year: moment().year(),
+  };
+
+  constructor(props: Props) {
+    super(props);
 
     const initial = moment(this.props.value, "YYYY-MM");
     if (initial.isValid()) {
@@ -26,10 +41,7 @@ export default class DateMonthYearWidget extends React.Component {
     }
   }
 
-  static propTypes = {};
-  static defaultProps = {};
-
-  static format = value => {
+  static format = (value: string) => {
     const m = moment(value, "YYYY-MM");
     return m.isValid() ? m.format("MMMM, YYYY") : "";
   };
@@ -74,8 +86,15 @@ export default class DateMonthYearWidget extends React.Component {
   }
 }
 
-const Month = ({ month, selected, onClick }) => (
+interface MonthProp {
+  month: number;
+  selected: boolean;
+  onClick: () => void;
+}
+
+const Month = ({ month, selected, onClick }: MonthProp) => (
   <div
+    aria-selected={selected}
     className={cx(
       "cursor-pointer text-bold full text-centered py1 px2 circular my1",
       {
@@ -90,3 +109,5 @@ const Month = ({ month, selected, onClick }) => (
       .format("MMMM")}
   </div>
 );
+
+export default DateMonthYearWidget;

frontend/src/metabase/components/DateMonthYearWidget/DateMonthYearWidget.unit.spec.tsx

+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import DateMonthYearWidget from "./DateMonthYearWidget";
+
+describe("DateMonthYearWidget", () => {
+  it("should render correctly", () => {
+    const { container } = render(
+      <DateMonthYearWidget
+        value={"2021-07"}
+        setValue={jest.fn()}
+        onClose={jest.fn()}
+      ></DateMonthYearWidget>,
+    );
+
+    expect(screen.getByText("January")).toBeVisible();
+    expect(screen.getByText("December")).toBeVisible();
+
+    // 07 = July and year 2021
+    expect(screen.getByTestId("select-button")).toHaveTextContent("2021");
+    expect(
+      container.querySelector("div[aria-selected='true']"),
+    ).toHaveTextContent("July");
+  });
+});

frontend/src/metabase/components/DateMonthYearWidget/index.ts

+export { default } from "./DateMonthYearWidget";

frontend/src/metabase/parameters/components/ParameterValueWidget.jsx

@@ -8,7 +8,7 @@ import Icon from "metabase/components/Icon";
 import DateSingleWidget from "./widgets/DateSingleWidget";
 import DateRangeWidget from "./widgets/DateRangeWidget";
 import DateRelativeWidget from "./widgets/DateRelativeWidget";
-import DateMonthYearWidget from "./widgets/DateMonthYearWidget";
+import DateMonthYearWidget from "metabase/components/DateMonthYearWidget";
 import DateQuarterYearWidget from "./widgets/DateQuarterYearWidget";
 import DateAllOptionsWidget from "./widgets/DateAllOptionsWidget";
 import TextWidget from "./widgets/TextWidget";