feat(select): convert to TypeScript and export types

Author: WesSouza

src/Select/Select.js

@@ -3,9 +3,9 @@ name: Select
 menu: Components
 ---
 
-import Select from './Select'
-import Window from '../Window/Window'
-import WindowContent from '../WindowContent/WindowContent'
+import { Select } from './Select';
+import Window from '../Window/Window';
+import WindowContent from '../WindowContent/WindowContent';
 import { Cutout } from '../Cutout/Cutout';
 
 # Select

src/Select/Select.mdx

@@ -1,10 +1,12 @@
 // Bsased on https://github.com/mui-org/material-ui
-import React from 'react';
+
 import { fireEvent } from '@testing-library/react';
+import React from 'react';
 import { renderWithTheme } from '../../test/utils';
-import Select from './Select';
+import { Select } from './Select';
+import { SelectOption, SelectRef } from './Select.types';
 
-const options = [
+const options: SelectOption[] = [
   { label: 'ten', value: 10 },
   { label: 'twenty', value: 20 },
   { label: 'thirty', value: 30 }
@@ -15,7 +17,9 @@ describe('<Select />', () => {
     const { container } = renderWithTheme(
       <Select value={10} options={options} />
     );
-    expect(container.querySelector('input').value).toBe('10');
+
+    const input = container.querySelector('input') as HTMLInputElement;
+    expect(input.value).toBe('10');
   });
 
   it('renders dropdown button with icon', () => {
@@ -85,14 +89,17 @@ describe('<Select />', () => {
     expect(o[1]).toHaveAttribute('data-value', '20');
   });
   [' ', 'ArrowUp', 'ArrowDown', 'Enter'].forEach(key => {
-    it(`should open menu when pressed ${key} key on select`, () => {
+    it(`should open menu when pressed ${
+      key === ' ' ? 'Space' : key
+    } key on select`, () => {
       const { getByRole } = renderWithTheme(
         <Select value='' options={[{ label: 'none', value: '' }]} />
       );
       getByRole('button').focus();
-      fireEvent.keyDown(document.activeElement, { key });
+      const focusedButton = document.activeElement as HTMLButtonElement;
+      fireEvent.keyDown(focusedButton, { key });
       expect(getByRole('listbox', { hidden: false })).toBeInTheDocument();
-      fireEvent.keyUp(document.activeElement, { key });
+      fireEvent.keyUp(focusedButton, { key });
       expect(getByRole('listbox', { hidden: false })).toBeInTheDocument();
     });
   });
@@ -135,9 +142,9 @@ describe('<Select />', () => {
         <Select value={10} open options={options} menuMaxHeight={220} />
       );
 
-      const listbox = getByRole('listbox');
+      const listbox = getByRole('listbox') as HTMLElement;
       expect(
-        listbox.getAttribute('style').includes('max-height: 220px')
+        listbox.getAttribute('style')?.includes('max-height: 220px')
       ).toBeTruthy();
     });
   });
@@ -182,7 +189,10 @@ describe('<Select />', () => {
         <Select
           open
           value={obj1}
-          options={[{ value: obj1 }, { value: obj2 }]}
+          options={[
+            { label: '1', value: obj1 },
+            { label: '2', value: obj2 }
+          ]}
         />
       );
       const o = getAllByRole('option');
@@ -324,9 +334,10 @@ describe('<Select />', () => {
         <Select readOnly value='10' options={options} />
       );
       getByRole('button').focus();
-      fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' });
+      const focusedButton = document.activeElement as HTMLElement;
+      fireEvent.keyDown(focusedButton, { key: 'ArrowDown' });
       expect(queryByRole('listbox')).not.toBeInTheDocument();
-      fireEvent.keyUp(document.activeElement, { key: 'ArrowDown' });
+      fireEvent.keyUp(focusedButton, { key: 'ArrowDown' });
       expect(queryByRole('listbox')).not.toBeInTheDocument();
     });
   });
@@ -346,7 +357,8 @@ describe('<Select />', () => {
 
   describe('prop: renderValue', () => {
     it('should use the prop to render the value', () => {
-      const formatDisplay = x => `0b${x.value.toString(2)}`;
+      const formatDisplay = (x: SelectOption) =>
+        `0b${Number(x.value).toString(2)}`;
       const { getByRole } = renderWithTheme(
         <Select
           formatDisplay={formatDisplay}
@@ -381,15 +393,15 @@ describe('<Select />', () => {
 
   describe('prop: inputRef', () => {
     it('should be able to return the input node via a ref object', () => {
-      const ref = React.createRef();
+      const ref = React.createRef<SelectRef>();
       renderWithTheme(<Select inputRef={ref} value='' />);
-      expect(ref.current.node).toHaveProperty('tagName', 'INPUT');
+      expect(ref.current?.node).toHaveProperty('tagName', 'INPUT');
     });
 
     it('should be able focus the trigger imperatively', () => {
-      const ref = React.createRef();
+      const ref = React.createRef<SelectRef>();
       const { getByRole } = renderWithTheme(<Select inputRef={ref} value='' />);
-      ref.current.focus();
+      ref.current?.focus();
       expect(getByRole('button')).toHaveFocus();
     });
   });

src/Select/Select.spec.js renamed to src/Select/Select.spec.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable no-console */
-import React from 'react';
-import styled from 'styled-components';
 
-import { Select, Window, WindowContent, Cutout, Fieldset } from 'react95';
+import { ComponentMeta } from '@storybook/react';
+import { Cutout, Fieldset, Select, Window, WindowContent } from 'react95';
+import styled from 'styled-components';
+import { SelectChangeEvent, SelectOption } from './Select.types';
 
 const options = [
   { value: 1, label: '⚡ Pikachu' },
@@ -37,13 +38,14 @@ const Wrapper = styled.div`
   }
 `;
 
-const onChange = (evt, nextSelection) => console.log(evt, nextSelection);
+const onChange = (event: SelectChangeEvent, option: SelectOption) =>
+  console.log(event, option);
 
 export default {
   title: 'Select',
   component: Select,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-};
+} as ComponentMeta<typeof Select>;
 
 export function Default() {
   return (
@@ -154,7 +156,9 @@ Flat.story = {
 export function CustomDisplayFormatting() {
   return (
     <Select
-      formatDisplay={opt => `${opt.label.toUpperCase()} 👍 👍`}
+      formatDisplay={(opt: SelectOption<number>) =>
+        `${opt.label.toUpperCase()} 👍 👍`
+      }
       onChange={onChange}
       options={options}
       width={220}

src/Select/Select.stories.js renamed to src/Select/Select.stories.tsx

@@ -1,14 +1,23 @@
 import styled, { css } from 'styled-components';
-import { StyledButton as Button } from '../Button/Button';
 
+import { StyledButton as Button } from '../Button/Button';
 import {
-  shadow as commonShadow,
   createDisabledTextStyles,
   createFlatBoxStyles,
-  createScrollbars
+  createScrollbars,
+  shadow as commonShadow
 } from '../common';
 import { blockSizes } from '../common/system';
 import { StyledCutout } from '../Cutout/Cutout';
+import { CommonThemeProps } from '../types';
+
+import { SelectVariants } from './Select.types';
+
+type CommonSelectStyleProps = {
+  $disabled?: boolean;
+  native?: boolean;
+  variant?: SelectVariants;
+} & CommonThemeProps;
 
 const sharedInputContentStyles = css`
   box-sizing: border-box;
@@ -48,29 +57,29 @@ export const StyledSelectContent = styled.div`
     border: 2px dotted ${({ theme }) => theme.focusSecondary};
   }
 `;
-const sharedWrapperStyles = css`
+const sharedWrapperStyles = css<CommonSelectStyleProps>`
   height: ${blockSizes.md};
   display: inline-block;
-  color: ${({ theme, isDisabled }) =>
-    isDisabled ? createDisabledTextStyles() : theme.canvasText};
+  color: ${({ $disabled = false, theme }) =>
+    $disabled ? createDisabledTextStyles() : theme.canvasText};
   font-size: 1rem;
-  cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};
+  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
 `;
 
-export const StyledSelectWrapper = styled(StyledCutout)`
+export const StyledSelectWrapper = styled(StyledCutout)<CommonSelectStyleProps>`
   ${sharedWrapperStyles}
-  background: ${({ theme, isDisabled }) =>
-    isDisabled ? theme.material : theme.canvas};
+  background: ${({ $disabled = false, theme }) =>
+    $disabled ? theme.material : theme.canvas};
   &:focus {
     outline: 0;
   }
 `;
 
-export const StyledFlatSelectWrapper = styled.div`
+export const StyledFlatSelectWrapper = styled.div<CommonSelectStyleProps>`
   ${createFlatBoxStyles()}
   ${sharedWrapperStyles}
-  background: ${({ theme, isDisabled }) =>
-    isDisabled ? theme.flatLight : theme.canvas};
+  background: ${({ $disabled = false, theme }) =>
+    $disabled ? theme.flatLight : theme.canvas};
 `;
 
 export const StyledNativeSelect = styled.select`
@@ -96,11 +105,11 @@ export const StyledNativeSelect = styled.select`
   }
 `;
 
-export const StyledDropdownButton = styled(Button)`
+export const StyledDropdownButton = styled(Button)<CommonSelectStyleProps>`
   width: 30px;
   padding: 0;
   flex-shrink: 0;
-  ${({ variant }) =>
+  ${({ variant = 'default' }) =>
     variant === 'flat'
       ? css`
           height: 100%;
@@ -116,7 +125,7 @@ export const StyledDropdownButton = styled(Button)`
               inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
           }
         `}
-  ${({ native, variant }) =>
+  ${({ native = false, variant = 'default' }) =>
     native &&
     (variant === 'flat'
       ? `
@@ -130,11 +139,11 @@ export const StyledDropdownButton = styled(Button)`
     right: 2px;
     height: calc(100% - 4px);
     `)}
-    pointer-events: ${({ isDisabled, native }) =>
-    isDisabled || native ? 'none' : 'auto'}
+    pointer-events: ${({ $disabled = false, native = false }) =>
+    $disabled || native ? 'none' : 'auto'}
 `;
 
-export const StyledDropdownIcon = styled.span`
+export const StyledDropdownIcon = styled.span<CommonSelectStyleProps>`
   position: absolute;
   left: 50%;
   top: 50%;
@@ -145,10 +154,10 @@ export const StyledDropdownIcon = styled.span`
   border-right: 6px solid transparent;
   display: inline-block;
   border-top: 6px solid
-    ${({ theme, isDisabled }) =>
-      isDisabled ? theme.materialTextDisabled : theme.materialText};
-  ${({ theme, isDisabled }) =>
-    isDisabled &&
+    ${({ $disabled = false, theme }) =>
+      $disabled ? theme.materialTextDisabled : theme.materialText};
+  ${({ $disabled = false, theme }) =>
+    $disabled &&
     `
     filter: drop-shadow(1px 1px 0px ${theme.materialTextDisabledShadow});
     border-top-color: ${theme.materialTextDisabled};
@@ -158,7 +167,7 @@ export const StyledDropdownIcon = styled.span`
   }
 `;
 
-export const StyledDropdownMenu = styled.ul`
+export const StyledDropdownMenu = styled.ul<CommonSelectStyleProps>`
   box-sizing: border-box;
 
   font-size: 1rem;
@@ -172,7 +181,7 @@ export const StyledDropdownMenu = styled.ul`
   z-index: 1;
   cursor: pointer;
   box-shadow: ${commonShadow};
-  ${({ variant }) =>
+  ${({ variant = 'default' }) =>
     variant === 'flat'
       ? css`
           bottom: 2px;
@@ -184,7 +193,7 @@ export const StyledDropdownMenu = styled.ul`
           width: calc(100% - 2px);
           border: 2px solid ${({ theme }) => theme.borderDarkest};
         `}
-  ${({ variant }) => createScrollbars(variant)}
+  ${({ variant = 'default' }) => createScrollbars(variant)}
 `;
 
 export const StyledDropdownMenuItem = styled.li`