Improve YearPicker component (#22603)

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

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

+import React from "react";
+import { ComponentStory } from "@storybook/react";
+import { useArgs } from "@storybook/client-api";
+import YearPicker from "./YearPicker";
+
+export default {
+  title: "Parameters/YearPicker",
+  component: YearPicker,
+};
+
+const Template: ComponentStory<typeof YearPicker> = args => {
+  const [{ value }, updateArgs] = useArgs();
+
+  const handleChange = (year: number) => {
+    updateArgs({ value: year });
+  };
+
+  return <YearPicker {...args} value={value} onChange={handleChange} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  value: 2022,
+};

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

-/* eslint-disable react/prop-types */
-import React from "react";
+import React, { ChangeEvent } from "react";
 
 import Select from "metabase/core/components/Select";
 import _ from "underscore";
 
 const YEARS = _.range(new Date().getFullYear(), 1900, -1);
 
-const YearPicker = ({ value, onChange }) => (
+export interface YearPickerProps {
+  value: number;
+  onChange: (v: number) => void;
+}
+
+const YearPicker = ({ value, onChange }: YearPickerProps) => (
   <Select
     className="borderless"
     value={value}
     options={YEARS}
-    optionNameFn={option => option}
-    optionValueFn={option => option}
-    onChange={({ target: { value } }) => onChange(value)}
+    optionNameFn={(option: any) => option}
+    optionValueFn={(option: any) => option}
+    onChange={({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+      onChange(parseInt(value as string, 10))
+    }
   />
 );
 

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

+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import YearPicker from "./YearPicker";
+
+describe("YearPicker", () => {
+  it("should render correctly", () => {
+    render(<YearPicker value={2022} onChange={jest.fn()}></YearPicker>);
+    expect(screen.getByRole("button")).toHaveTextContent("2022");
+  });
+});

frontend/src/metabase/components/YearPicker/index.tsx

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

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

 /* eslint-disable react/prop-types */
 import React from "react";
-import YearPicker from "./YearPicker";
-
 import moment from "moment";
 import _ from "underscore";
 import cx from "classnames";
+
+import YearPicker from "metabase/components/YearPicker";
+
 import { MonthContainer, MonthList } from "./DateMonthYearWidget.styled";
 
 export default class DateMonthYearWidget extends React.Component {

frontend/src/metabase/parameters/components/widgets/DateQuarterYearWidget.jsx

 /* eslint-disable react/prop-types */
 import React, { Component } from "react";
-
-import YearPicker from "./YearPicker";
-
 import moment from "moment";
 import _ from "underscore";
 import cx from "classnames";
 import { t } from "ttag";
 
+import YearPicker from "metabase/components/YearPicker";
+
 // translator: this is a "moment" format string (https://momentjs.com/docs/#/displaying/format/) It should include "Q" for the quarter number, and raw text can be escaped by brackets. For eample "[Quarter] Q" will be rendered as "Quarter 1" etc
 const QUARTER_FORMAT_STRING = t`[Q]Q`;