chore(Select): convert Select and SelectField to TS

packages/forma-36-react-components/.eslintrc.js

@@ -51,5 +51,7 @@ module.exports = {
     ],
     '@typescript-eslint/no-for-in-array': 'error',
     '@typescript-eslint/no-var-requires': 'off',
+    // enable again once all components are Typescript
+    '@typescript-eslint/no-explicit-any': 'off',
   },
 };

packages/forma-36-react-components/index.d.ts

@@ -50,6 +50,9 @@
 /// <reference path="./dist/components/TextField/TextField.d.ts" />
 /// <reference path="./dist/components/Illustration/Illustration.d.ts" />
 /// <reference path="./dist/components/CopyButton/CopyButton.d.ts" />
+/// <reference path="./dist/components/Select/Select/Select.d.ts" />
+/// <reference path="./dist/components/Select/Option/Option.d.ts" />
+/// <reference path="./dist/components/SelectField/SelectField.d.ts" />
 
 import * as React from 'react';
 
@@ -111,6 +114,9 @@ import ParagraphComponent from './dist/components/Typography/Paragraph/Paragraph
 import SectionHeadingComponent from './dist/components/Typography/SectionHeading/SectionHeading';
 import SubheadingComponent from './dist/components/Typography/Subheading/Subheading';
 import CopyButtonComponent from './dist/components/CopyButton/CopyButton';
+import SelectComponent from './dist/components/Select/Select/Select';
+import OptionComponent from './dist/components/Select/Option/Option';
+import SelectFieldComponent from './dist/components/SelectField/SelectField';
 
 export const Button: typeof ButtonComponent;
 export const Spinner: typeof SpinnerComponent;
@@ -170,6 +176,9 @@ export const Paragraph: typeof ParagraphComponent;
 export const SectionHeading: typeof SectionHeadingComponent;
 export const Subheading: typeof SubheadingComponent;
 export const CopyButton: typeof CopyButtonComponent;
+export const Select: typeof SelectComponent;
+export const Option: typeof OptionComponent;
+export const SelectField: typeof SelectFieldComponent;
 
 export interface EditorToolbarProps {
   extraClassNames?: string;
@@ -252,60 +261,6 @@ export interface HeaderProps {
 
 export const Header: React.SFC<HeaderProps>;
 
-export type SelectWidth = 'auto' | 'small' | 'medium' | 'large' | 'full';
-
-export interface SelectProps {
-  required?: boolean;
-  children: React.ReactNode;
-  name?: string;
-  id?: string;
-  hasError?: boolean;
-  value?: string;
-  isDisabled?: boolean;
-  onChange?: (...args: any[]) => any;
-  onBlur?: (...args: any[]) => any;
-  testId?: string;
-  onFocus?: (...args: any[]) => any;
-  extraClassNames?: string;
-  width?: SelectWidth;
-}
-
-export class Select extends React.Component<SelectProps, any> {
-  render(): JSX.Element;
-}
-
-export interface OptionProps {
-  value: string;
-  children: React.ReactNode;
-}
-
-export class Option extends React.Component<OptionProps, any> {
-  render(): JSX.Element;
-}
-export type SelectFieldValue = string | number;
-
-export interface SelectFieldProps {
-  value?: SelectFieldValue;
-  validationMessage?: string;
-  testId?: string;
-  children: React.ReactNode;
-  extraClassNames?: string;
-  formLabelProps?: Object;
-  textLinkProps?: Object;
-  selectProps?: Object;
-  name: string;
-  id: string;
-  labelText?: string;
-  helpText?: string;
-  required?: boolean;
-  onChange?: (...args: any[]) => any;
-  onBlur?: (...args: any[]) => any;
-}
-
-export class SelectField extends React.Component<SelectFieldProps, any> {
-  render(): JSX.Element;
-}
-
 export type TooltipPlace = 'top' | 'bottom' | 'right' | 'left';
 
 export type TooltipMaxWidth = number | string;

packages/forma-36-react-components/src/components/Button/Button.tsx

@@ -69,7 +69,6 @@ export class Button extends Component<ButtonProps> {
     const iconColor =
       buttonType === 'muted' || buttonType === 'naked' ? 'secondary' : 'white';
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const Element: any = href ? 'a' : 'button';
 
     return (

packages/forma-36-react-components/src/components/CopyButton/CopyButton.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import React, { Component } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import cn from 'classnames';

packages/forma-36-react-components/src/components/Icon/Icon.stories.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { text, select } from '@storybook/addon-knobs';

packages/forma-36-react-components/src/components/Icon/Icon.test.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { axe } from 'jest-axe';

packages/forma-36-react-components/src/components/List/ListItem/ListItem.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import React, { Component } from 'react';
 import cn from 'classnames';
 

packages/forma-36-react-components/src/components/Select/Option/Option.tsx

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+export interface OptionProps {
+  value: string;
+  children: React.ReactNode;
+}
+
+export class Option extends Component<OptionProps> {
+  render() {
+    const { value, children, ...otherProps } = this.props;
+
+    return (
+      <option value={value} {...otherProps}>
+        {children}
+      </option>
+    );
+  }
+}
+
+export default Option;

packages/forma-36-react-components/src/components/Select/Select/Select.stories.js → packages/forma-36-react-components/src/components/Select/Select/Select.stories.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { text, boolean, select } from '@storybook/addon-knobs';
-import { withInfo } from '@storybook/addon-info';
 
 import Select from './Select';
 import Option from '../Option';
 
 storiesOf('Components|Select', module)
-  .addDecorator(withInfo)
+  .addParameters({
+    propTypes: [Select['__docgenInfo'], Option['__docgenInfo']],
+  })
   .add('default', () => (
     <Select
       extraClassNames={text('Extra Class Names', '')}

packages/forma-36-react-components/src/components/Select/Select/Select.test.js → packages/forma-36-react-components/src/components/Select/Select/Select.test.tsx

@@ -53,15 +53,6 @@ it('renders the component with a value', () => {
   expect(output).toMatchSnapshot();
 });
 
-it('renders the component with an onClick', () => {
-  const output = shallow(
-    <Select name="optionSelect" id="optionSelect" onClick={() => {}}>
-      <Option value="optionOne">Option One</Option>
-    </Select>,
-  );
-  expect(output).toMatchSnapshot();
-});
-
 it('renders the component as required', () => {
   const output = shallow(
     <Select name="optionSelect" id="optionSelect" required>

packages/forma-36-react-components/src/components/Select/Select/Select.js → packages/forma-36-react-components/src/components/Select/Select/Select.tsx

@@ -1,36 +1,35 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import cn from 'classnames';
 import Icon from '../../Icon/Icon';
 import styles from './Select.css';
 
-export class Select extends React.Component {
-  static propTypes = {
-    required: PropTypes.bool,
-    children: PropTypes.node.isRequired,
-    name: PropTypes.string,
-    id: PropTypes.string,
-    hasError: PropTypes.bool,
-    value: PropTypes.string,
-    isDisabled: PropTypes.bool,
-    onChange: PropTypes.func,
-    onBlur: PropTypes.func,
-    testId: PropTypes.string,
-    onFocus: PropTypes.func,
-    extraClassNames: PropTypes.string,
-    width: PropTypes.oneOf(['auto', 'small', 'medium', 'large', 'full']),
-  };
+export interface SelectProps {
+  required?: boolean;
+  children: React.ReactNode;
+  name?: string;
+  id?: string;
+  hasError?: boolean;
+  value?: string;
+  isDisabled?: boolean;
+  onChange?: (...args: any[]) => any;
+  onBlur?: (...args: any[]) => any;
+  testId?: string;
+  onFocus?: (...args: any[]) => any;
+  extraClassNames?: string;
+  width?: 'auto' | 'small' | 'medium' | 'large' | 'full';
+}
+
+export interface SelectState {
+  value?: string;
+}
 
+export class Select extends Component<SelectProps, SelectState> {
   static defaultProps = {
-    name: undefined,
-    id: undefined,
-    extraClassNames: undefined,
     testId: 'cf-ui-select',
     required: false,
     hasError: false,
     isDisabled: false,
     width: 'full',
-    value: undefined,
     onBlur: () => {},
     onFocus: () => {},
     onChange: () => {},
@@ -66,13 +65,13 @@ export class Select extends React.Component {
     } = this.props;
 
     const widthClass = `Select--${width}`;
-    const classNames = cn(styles.Select, {
+    const classNames = cn(styles['Select'], {
       [styles['Select--disabled']]: isDisabled,
       [styles['Select--negative']]: hasError,
     });
 
     const wrapperClassNames = cn(
-      styles.Select__wrapper,
+      styles['Select__wrapper'],
       styles[widthClass],
       extraClassNames,
     );
@@ -84,8 +83,6 @@ export class Select extends React.Component {
           required={required}
           name={name}
           aria-label={name}
-          // but select doesn't support for attribute :(
-          htmlFor={name}
           data-test-id={testId}
           className={classNames}
           value={this.state.value}
@@ -105,7 +102,7 @@ export class Select extends React.Component {
           {children}
         </select>
         <Icon
-          extraClassNames={styles.Select__icon}
+          extraClassNames={styles['Select__icon']}
           icon="ArrowDown"
           color="muted"
         />

packages/forma-36-react-components/src/components/Select/Select/__snapshots__/Select.test.js.snap → packages/forma-36-react-components/src/components/Select/Select/__snapshots__/Select.test.tsx.snap

@@ -9,7 +9,6 @@ exports[`renders the component 1`] = `
     className="Select"
     data-test-id="cf-ui-select"
     disabled={false}
-    htmlFor="optionSelect"
     id="optionSelect"
     name="optionSelect"
     onBlur={[Function]}
@@ -42,7 +41,6 @@ exports[`renders the component as required 1`] = `
     className="Select"
     data-test-id="cf-ui-select"
     disabled={false}
-    htmlFor="optionSelect"
     id="optionSelect"
     name="optionSelect"
     onBlur={[Function]}
@@ -75,7 +73,6 @@ exports[`renders the component in disabled state 1`] = `
     className="Select Select--disabled"
     data-test-id="cf-ui-select"
     disabled={true}
-    htmlFor="optionSelect"
     id="optionSelect"
     name="optionSelect"
     onBlur={[Function]}
@@ -108,7 +105,6 @@ exports[`renders the component with a value 1`] = `
     className="Select"
     data-test-id="cf-ui-select"
     disabled={false}
-    htmlFor="optionSelect"
     id="optionSelect"
     name="optionSelect"
     onBlur={[Function]}
@@ -142,7 +138,6 @@ exports[`renders the component with an extra class name 1`] = `
     className="Select"
     data-test-id="cf-ui-select"
     disabled={false}
-    htmlFor="optionSelect"
     id="optionSelect"
     name="optionSelect"
     onBlur={[Function]}
@@ -166,40 +161,6 @@ exports[`renders the component with an extra class name 1`] = `
 </div>
 `;
 
-exports[`renders the component with an onClick 1`] = `
-<div
-  className="Select__wrapper Select--full"
->
-  <select
-    aria-label="optionSelect"
-    className="Select"
-    data-test-id="cf-ui-select"
-    disabled={false}
-    htmlFor="optionSelect"
-    id="optionSelect"
-    name="optionSelect"
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    required={false}
-  >
-    <Option
-      value="optionOne"
-    >
-      Option One
-    </Option>
-  </select>
-  <Icon
-    color="muted"
-    extraClassNames="Select__icon"
-    icon="ArrowDown"
-    size="small"
-    testId="cf-ui-icon"
-  />
-</div>
-`;
-
 exports[`renders the component with error 1`] = `
 <div
   className="Select__wrapper Select--full"
@@ -209,7 +170,6 @@ exports[`renders the component with error 1`] = `
     className="Select Select--negative"
     data-test-id="cf-ui-select"
     disabled={false}
-    htmlFor="optionSelect"
     id="optionSelect"
     name="optionSelect"
     onBlur={[Function]}