fix(types): fix multiple TypeScript issues

Including:
- Omitting default React props that we are redefining
- Making Select value type generic
- Etc.

Author: WesSouza

src/Button/Button.stories.tsx

@@ -106,7 +106,6 @@ export function Menu() {
                 top: '100%',
                 zIndex: '9999'
               }}
-              open={open}
               onClick={() => setOpen(false)}
             >
               <ListItem size='sm'>Copy link</ListItem>

src/Button/Button.tsx

@@ -25,7 +25,10 @@ type ButtonProps = {
   square?: boolean;
   type?: string;
   variant?: 'default' | 'menu' | 'flat';
-} & React.ButtonHTMLAttributes<HTMLButtonElement> &
+} & Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'disabled' | 'onClick' | 'onTouchStart' | 'type'
+> &
   CommonStyledProps;
 
 type StyledButtonProps = Pick<

src/Checkbox/Checkbox.tsx

@@ -26,7 +26,18 @@ type CheckboxProps = {
   style?: React.CSSProperties;
   value?: number | string;
   variant?: 'default' | 'flat' | 'menu';
-} & React.InputHTMLAttributes<HTMLInputElement>;
+} & Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  | 'checked'
+  | 'className'
+  | 'defaultChecked'
+  | 'disabled'
+  | 'label'
+  | 'name'
+  | 'onChange'
+  | 'style'
+  | 'value'
+>;
 
 type CheckmarkProps = {
   $disabled: boolean;

src/Fieldset/Fieldset.stories.tsx

@@ -82,7 +82,6 @@ export function ToggleExample() {
               style={{ margin: 0 }}
               label='Enable'
               checked={!state}
-              value={!state}
               onChange={() => setState(!state)}
             />
           }

src/List/List.stories.tsx

@@ -25,7 +25,14 @@ export function Default() {
     <>
       <List>
         <ListItem primary>Photos</ListItem>
-        <ListItem as='a' href='https://expensive.toys' target='_blank'>
+        <ListItem
+          as='a'
+          // TODO: Come up with a more elegant way to allow props when `as` is used
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          href='https://expensive.toys'
+          target='_blank'
+        >
           Link
         </ListItem>
         <ListItem disabled>Other</ListItem>

src/ListItem/ListItem.tsx

@@ -14,7 +14,7 @@ type ListItemProps = {
   CommonStyledProps;
 
 export const StyledListItem = styled.li<{
-  disabled?: boolean;
+  $disabled?: boolean;
   square?: boolean;
   primary?: boolean;
   size: Sizes;
@@ -34,19 +34,19 @@ export const StyledListItem = styled.li<{
   text-align: center;
   line-height: ${props => blockSizes[props.size]};
   color: ${({ theme }) => theme.materialText};
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+  pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};
   font-weight: ${({ primary }) => (primary ? 'bold' : 'normal')};
   &:hover {
-    ${({ theme, disabled }) =>
-      !disabled &&
+    ${({ theme, $disabled }) =>
+      !$disabled &&
       `
         color: ${theme.materialTextInvert};
         background: ${theme.hoverBackground};
       `}
 
     cursor: default;
   }
-  ${props => props.disabled && createDisabledTextStyles()}
+  ${props => props.$disabled && createDisabledTextStyles()}
 `;
 
 const ListItem = forwardRef<HTMLLIElement, ListItemProps>(function ListItem(
@@ -69,8 +69,8 @@ const ListItem = forwardRef<HTMLLIElement, ListItemProps>(function ListItem(
 
   return (
     <StyledListItem
+      $disabled={disabled}
       size={size}
-      disabled={disabled}
       square={square}
       onClick={disabled ? undefined : onClick}
       primary={primary}

src/Radio/Radio.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentMeta } from '@storybook/react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import {
   Cutout,
   Divider,
@@ -33,7 +33,8 @@ export default {
 
 export function Default() {
   const [state, setState] = useState('Pear');
-  const handleChange = e => setState(e.target.value);
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setState(e.target.value);
 
   return (
     <Window>
@@ -83,7 +84,8 @@ Default.story = {
 
 export function Flat() {
   const [state, setState] = useState('Pear');
-  const handleChange = e => setState(e.target.value);
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setState(e.target.value);
 
   return (
     <Window>
@@ -147,8 +149,10 @@ export function Menu() {
     tool: 'Brush',
     color: 'Black'
   });
-  const handleToolChange = e => setState({ ...state, tool: e.target.value });
-  const handleColorChange = e => setState({ ...state, color: e.target.value });
+  const handleToolChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setState({ ...state, tool: e.target.value });
+  const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setState({ ...state, color: e.target.value });
 
   const { tool, color } = state;
 

src/Radio/Radio.tsx

@@ -24,7 +24,10 @@ type RadioProps = {
   style?: CSSProperties;
   value?: string | number | boolean;
   variant?: RadioVariant;
-} & React.InputHTMLAttributes<HTMLInputElement> &
+} & Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'checked' | 'className' | 'disabled' | 'name' | 'onChange' | 'style' | 'value'
+> &
   CommonStyledProps;
 
 const sharedCheckboxStyles = css`

src/Select/Select.spec.tsx

@@ -6,7 +6,7 @@ import { renderWithTheme } from '../../test/utils';
 import { Select } from './Select';
 import { SelectOption, SelectRef } from './Select.types';
 
-const options: SelectOption[] = [
+const options: SelectOption<number>[] = [
   { label: 'ten', value: 10 },
   { label: 'twenty', value: 20 },
   { label: 'thirty', value: 30 }
@@ -65,7 +65,7 @@ describe('<Select />', () => {
           }
         }}
         options={[
-          { label: 'ten', value: 10 },
+          { label: 'ten', value: '10' },
           { label: 'none', value: '' }
         ]}
       />
@@ -153,7 +153,7 @@ describe('<Select />', () => {
     it('should get selected option from arguments', () => {
       const onChange = jest.fn();
       const { getAllByRole, getByRole } = renderWithTheme(
-        <Select onChange={onChange} value='0' options={options} />
+        <Select onChange={onChange} value={0} options={options} />
       );
       fireEvent.mouseDown(getByRole('button'));
       getAllByRole('option')[1].click();
@@ -331,7 +331,7 @@ describe('<Select />', () => {
   describe('prop: readOnly', () => {
     it('should not trigger any event with readOnly', () => {
       const { getByRole, queryByRole } = renderWithTheme(
-        <Select readOnly value='10' options={options} />
+        <Select readOnly value={10} options={options} />
       );
       getByRole('button').focus();
       const focusedButton = document.activeElement as HTMLElement;
@@ -347,7 +347,7 @@ describe('<Select />', () => {
       const { getByRole } = renderWithTheme(
         <Select
           SelectDisplayProps={{ 'data-test': 'SelectDisplay' }}
-          value='10'
+          value={10}
           options={options}
         />
       );
@@ -357,7 +357,7 @@ describe('<Select />', () => {
 
   describe('prop: renderValue', () => {
     it('should use the prop to render the value', () => {
-      const formatDisplay = (x: SelectOption) =>
+      const formatDisplay = (x: SelectOption<number>) =>
         `0b${Number(x.value).toString(2)}`;
       const { getByRole } = renderWithTheme(
         <Select

src/Select/Select.stories.tsx

@@ -38,7 +38,7 @@ const Wrapper = styled.div`
   }
 `;
 
-const onChange = (event: SelectChangeEvent, option: SelectOption) =>
+const onChange = <T,>(event: SelectChangeEvent<T>, option: SelectOption<T>) =>
   console.log(event, option);
 
 export default {
@@ -156,9 +156,7 @@ Flat.story = {
 export function CustomDisplayFormatting() {
   return (
     <Select
-      formatDisplay={(opt: SelectOption<number>) =>
-        `${opt.label.toUpperCase()} 👍 👍`
-      }
+      formatDisplay={opt => `${opt.label.toUpperCase()} 👍 👍`}
       onChange={onChange}
       options={options}
       width={220}