[CLOV-64] BpkStarRating Migrate JS to TypeScript

packages/backpack-web/src/bpk-component-star-rating/index.js → packages/backpack-web/src/bpk-component-star-rating/index.ts

@@ -16,12 +16,21 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
-import BpkInteractiveStar from './src/BpkInteractiveStar';
-import BpkInteractiveStarRating from './src/BpkInteractiveStarRating';
-import BpkStar, { BpkStarNonRtl, STAR_TYPES } from './src/BpkStar';
-import BpkStarRating, { ROUNDING_TYPES } from './src/BpkStarRating';
+import BpkInteractiveStar, {
+  type Props as BpkInteractiveStarProps,
+} from './src/BpkInteractiveStar';
+import BpkInteractiveStarRating, {
+  type Props as BpkInteractiveStarRatingProps,
+} from './src/BpkInteractiveStarRating';
+import BpkStar, {
+  BpkStarNonRtl,
+  STAR_TYPES,
+  type Props as BpkStarProps,
+} from './src/BpkStar';
+import BpkStarRating, {
+  ROUNDING_TYPES,
+  type Props as BpkStarRatingProps,
+} from './src/BpkStarRating';
 import themeAttributes from './src/themeAttributes';
 import withInteractiveStarRatingState from './src/withInteractiveStarRatingState';
 
@@ -35,4 +44,10 @@ export {
   withInteractiveStarRatingState,
   themeAttributes,
 };
+export type {
+  BpkStarProps,
+  BpkStarRatingProps,
+  BpkInteractiveStarProps,
+  BpkInteractiveStarRatingProps,
+};
 export default BpkStarRating;

packages/backpack-web/src/bpk-component-star-rating/src/BpkInteractiveStar-test.js → packages/backpack-web/src/bpk-component-star-rating/src/BpkInteractiveStar-test.tsx

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
 import { render } from '@testing-library/react';
 
 import BpkInteractiveStar from './BpkInteractiveStar';

packages/backpack-web/src/bpk-component-star-rating/src/BpkInteractiveStar.js → packages/backpack-web/src/bpk-component-star-rating/src/BpkInteractiveStar.tsx

@@ -16,26 +16,30 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
-import PropTypes from 'prop-types';
+import type { ButtonHTMLAttributes, MouseEventHandler } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 
-import { BpkStarNonRtl, STAR_TYPES } from './BpkStar';
+import { BpkStarNonRtl, type STAR_TYPES } from './BpkStar';
 
 import STYLES from './BpkInteractiveStar.module.scss';
 
 const getClassName = cssModules(STYLES);
 
-type Props = {
-  label: string,
-  name: string,
-  onClick: () => mixed,
-  onMouseEnter: () => mixed,
-  type: typeof STAR_TYPES.EMPTY | typeof STAR_TYPES.FULL,
-  value: number,
-  selected: boolean,
+type InteractiveStarType = typeof STAR_TYPES.EMPTY | typeof STAR_TYPES.FULL;
+
+type NativeButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+
+export type Props = Omit<NativeButtonProps, 'className' | 'type' | 'onClick' | 'onMouseEnter' | 'name' | 'value' | 'aria-label' | 'aria-pressed'> & {
+  label: string;
+  name: string;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  onMouseEnter: MouseEventHandler<HTMLButtonElement>;
+  type: InteractiveStarType;
+  value: number;
+  selected?: boolean;
+  large?: boolean;
+  extraLarge?: boolean;
 };
 
 const BpkInteractiveStar = ({
@@ -73,22 +77,11 @@ const BpkInteractiveStar = ({
       <div className={iconClassNames} >
         <BpkStarNonRtl
           type={type}
-          /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md */
           {...rest}
         />
       </div>
     </button>
   );
 };
 
-BpkInteractiveStar.propTypes = {
-  label: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-  onMouseEnter: PropTypes.func.isRequired,
-  type: PropTypes.oneOf([STAR_TYPES.EMPTY, STAR_TYPES.FULL]).isRequired,
-  value: PropTypes.number.isRequired,
-  selected: PropTypes.bool,
-};
-
 export default BpkInteractiveStar;

packages/backpack-web/src/bpk-component-star-rating/src/BpkInteractiveStarRating-test.js → packages/backpack-web/src/bpk-component-star-rating/src/BpkInteractiveStarRating-test.tsx

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
 import { render, fireEvent, screen } from '@testing-library/react';
 
 import BpkInteractiveStarRating, {

packages/backpack-web/src/bpk-component-star-rating/src/BpkInteractiveStarRating.js → packages/backpack-web/src/bpk-component-star-rating/src/BpkInteractiveStarRating.tsx

@@ -16,9 +16,7 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
-import PropTypes from 'prop-types';
+import type { HTMLAttributes, MouseEvent } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 
@@ -39,18 +37,27 @@ export const getTypeByRating = (starNumber: number, rating: number) => {
   return STAR_TYPES.FULL;
 };
 
-type Props = {
-  getStarLabel: (number, number) => string,
-  id: string,
-  className: ?string,
-  hoverRating: number,
-  large: boolean,
-  extraLarge: boolean,
-  maxRating: number,
-  onMouseLeave: () => mixed,
-  onRatingHover: (number, any) => mixed,
-  onRatingSelect: (number, any) => mixed,
+type StarLabel = (rating: number, maxRating: number) => string;
+
+type RatingHandler = (
   rating: number,
+  event: MouseEvent<HTMLButtonElement>,
+) => unknown;
+
+type NativeDivProps = HTMLAttributes<HTMLDivElement>;
+
+export type Props = Omit<NativeDivProps, 'className' | 'id' | 'onMouseLeave'> & {
+  getStarLabel: StarLabel;
+  id: string;
+  className?: string | null;
+  hoverRating?: number;
+  large?: boolean;
+  extraLarge?: boolean;
+  maxRating?: number;
+  onMouseLeave?: () => unknown;
+  onRatingHover?: RatingHandler;
+  onRatingSelect?: RatingHandler;
+  rating?: number;
 };
 
 const BpkInteractiveStarRating = ({
@@ -103,18 +110,4 @@ const BpkInteractiveStarRating = ({
   );
 };
 
-BpkInteractiveStarRating.propTypes = {
-  getStarLabel: PropTypes.func.isRequired,
-  id: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  hoverRating: PropTypes.number,
-  large: PropTypes.bool,
-  extraLarge: PropTypes.bool,
-  maxRating: PropTypes.number,
-  onMouseLeave: PropTypes.func,
-  onRatingHover: PropTypes.func,
-  onRatingSelect: PropTypes.func,
-  rating: PropTypes.number,
-};
-
 export default BpkInteractiveStarRating;

packages/backpack-web/src/bpk-component-star-rating/src/BpkStar-test.js → packages/backpack-web/src/bpk-component-star-rating/src/BpkStar-test.tsx

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
 import { render } from '@testing-library/react';
 
 import BpkStar, { STAR_TYPES } from './BpkStar';

packages/backpack-web/src/bpk-component-star-rating/src/BpkStar.js → packages/backpack-web/src/bpk-component-star-rating/src/BpkStar.tsx

@@ -16,10 +16,6 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-
 import { withRtlSupport } from '../../bpk-component-icon';
 import LargeIcon from '../../bpk-component-icon/lg/star';
 import HalfLargeIcon from '../../bpk-component-icon/lg/star-half';
@@ -42,13 +38,15 @@ export const STAR_TYPES = {
   EMPTY: 'empty',
   HALF: 'half',
   FULL: 'full',
-};
+} as const;
 
-type Props = {
-  type: $Keys<typeof STAR_TYPES>,
-  className: ?string,
-  large: boolean,
-  extraLarge: boolean,
+export type StarType = (typeof STAR_TYPES)[keyof typeof STAR_TYPES];
+
+export type Props = {
+  type: StarType;
+  className?: string | null;
+  large?: boolean;
+  extraLarge?: boolean;
 };
 
 const BpkStar = ({
@@ -98,8 +96,7 @@ const BpkStar = ({
 
   if (type === STAR_TYPES.HALF) {
     return (
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-      <span className={[containerClassNames, halfIconClassNames]} {...rest}>
+      <span className={[containerClassNames, halfIconClassNames] as unknown as string} {...rest}>
         <HalfIcon />
       </span>
     );
@@ -108,27 +105,17 @@ const BpkStar = ({
   return type === STAR_TYPES.FULL ? (
     <span className={iconClassNames} >
       <Icon
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
       {...rest} />
     </span>
 
   ) : (
     <span className={iconClassNames} >
       <OutlineIcon
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
       {...rest} />
     </span>
 
   );
 };
 
-BpkStar.propTypes = {
-  type: PropTypes.oneOf([STAR_TYPES.EMPTY, STAR_TYPES.HALF, STAR_TYPES.FULL])
-    .isRequired,
-  className: PropTypes.string,
-  large: PropTypes.bool,
-  extraLarge: PropTypes.bool,
-};
-
 export const BpkStarNonRtl = BpkStar;
 export default withRtlSupport(BpkStar);

packages/backpack-web/src/bpk-component-star-rating/src/BpkStarRating-test.js → packages/backpack-web/src/bpk-component-star-rating/src/BpkStarRating-test.tsx

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
 import { render } from '@testing-library/react';
 
 import { STAR_TYPES } from './BpkStar';

packages/backpack-web/src/bpk-component-star-rating/src/BpkStarRating.stories.tsx

@@ -28,18 +28,16 @@ import {
   BpkTableHead,
   BpkTableHeadCell,
 } from '../../bpk-component-table';
-// @ts-expect-error Untyped import
 import { BpkStar, STAR_TYPES, ROUNDING_TYPES, BpkInteractiveStarRating, withInteractiveStarRatingState } from '../index';
 
-// @ts-expect-error Untyped import
 import BpkStarRating from './BpkStarRating';
 
 import type { Meta } from '@storybook/react';
 
 const InteractiveStarRating = withInteractiveStarRatingState(
   BpkInteractiveStarRating,
 );
-const StarRating = (props: { rating: number; large?: boolean; extraLarge?: boolean; rounding?: string }) => (
+const StarRating = (props: { rating: number; large?: boolean; extraLarge?: boolean; rounding?: (n: number) => number }) => (
   <BpkStarRating ratingLabel={(r: number, m: number) => `${r} out of ${m} stars`} {...props} />
 );
 

packages/backpack-web/src/bpk-component-star-rating/src/BpkStarRating.js → packages/backpack-web/src/bpk-component-star-rating/src/BpkStarRating.tsx

@@ -16,9 +16,7 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
-import PropTypes from 'prop-types';
+import type { HTMLAttributes } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 
@@ -47,17 +45,23 @@ export const ROUNDING_TYPES = {
   nearest: (n: number) => Math.round(n * 2) / 2,
 };
 
-type Props = {
-  ratingLabel: string | ((number, number) => mixed),
-  className: ?string,
-  large: boolean,
-  extraLarge: boolean,
-  maxRating: number,
-  rating: number,
-  rounding:
-    | typeof ROUNDING_TYPES.down
-    | typeof ROUNDING_TYPES.up
-    | typeof ROUNDING_TYPES.nearest,
+type RatingLabel = string | ((rating: number, maxRating: number) => string);
+
+type Rounding =
+  | typeof ROUNDING_TYPES.down
+  | typeof ROUNDING_TYPES.up
+  | typeof ROUNDING_TYPES.nearest;
+
+type NativeDivProps = HTMLAttributes<HTMLDivElement>;
+
+export type Props = Omit<NativeDivProps, 'className' | 'aria-label'> & {
+  ratingLabel: RatingLabel;
+  className?: string | null;
+  large?: boolean;
+  extraLarge?: boolean;
+  maxRating?: number;
+  rating?: number;
+  rounding?: Rounding;
 };
 
 const BpkStarRating = ({
@@ -105,19 +109,4 @@ const BpkStarRating = ({
   );
 };
 
-BpkStarRating.propTypes = {
-  ratingLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
-    .isRequired,
-  className: PropTypes.string,
-  large: PropTypes.bool,
-  extraLarge: PropTypes.bool,
-  maxRating: PropTypes.number,
-  rating: PropTypes.number,
-  rounding: PropTypes.oneOf([
-    ROUNDING_TYPES.down,
-    ROUNDING_TYPES.up,
-    ROUNDING_TYPES.nearest,
-  ]),
-};
-
 export default BpkStarRating;

packages/backpack-web/src/bpk-component-star-rating/src/accessibility-test.js → packages/backpack-web/src/bpk-component-star-rating/src/accessibility-test.tsx

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
 import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 

packages/backpack-web/src/bpk-component-star-rating/src/themeAttributes-test.js → packages/backpack-web/src/bpk-component-star-rating/src/themeAttributes-test.ts

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
 import themeAttributes from './themeAttributes';
 
 describe('themeAttributes', () => {

packages/backpack-web/src/bpk-component-star-rating/src/themeAttributes.js → packages/backpack-web/src/bpk-component-star-rating/src/themeAttributes.ts

@@ -16,6 +16,4 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
 export default ['starRatingFilledColor'];