Refactor: Utilisation de TypeScript

packages/react/src/components/a11y/visuallyhidden.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Children } from '../buttons/abstract-button';
+import styles from './styles/visuallyhidden';
+
+const Hidden = styled.span`
+  ${styles}
+`;
+
+const VisuallyHidden =  ({ children }: {children: Children}) => (
+    <Hidden>
+        {children}
+    </Hidden>
+);
+
+export { VisuallyHidden };

packages/react/src/components/buttons/abstract-button.tsx

@@ -3,8 +3,10 @@ import styled from 'styled-components';
 
 import abstractStyle from './styles/abstract';
 
+export type Children = ReactNode[] | string | Element;
+
 export interface AbstractButtonProps {
-    children?: ReactNode[];
+    children?: Children;
     disabled?: boolean;
     onClick(): void;
 }

packages/react/src/components/buttons/button.tsx

@@ -7,7 +7,7 @@ import tertiaryStyle from './styles/tertiary';
 
 import { AbstractButton, AbstractButtonProps } from './abstract-button';
 
-export type ButtonType = 'primary' | 'secondary' | 'tertiary';
+type ButtonType = 'primary' | 'secondary' | 'tertiary';
 
 export interface ButtonProps extends AbstractButtonProps {
     buttonType: ButtonType;

packages/react/src/components/buttons/search-button.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { AbstractButton, AbstractButtonProps } from './abstract-button';
 
-export interface SearchButtonProps extends AbstractButtonProps {
+interface SearchButtonProps extends AbstractButtonProps {
     className: string;
 }
 

packages/react/src/components/card.jsx → packages/react/src/components/card.tsx

@@ -10,4 +10,4 @@ const Card = styled.div`
   padding: 3rem 2rem;
 `;
 
-export default Card;
+export { Card };

packages/react/src/components/enso-spinner.jsx → packages/react/src/components/enso-spinner.tsx

@@ -15,4 +15,4 @@ const EnsoSpinner = styled(Enso)`
   }
 `;
 
-export default EnsoSpinner;
+export { EnsoSpinner };

packages/react/src/components/feedbacks/invalid-field.jsx → packages/react/src/components/feedbacks/invalid-field.tsx

@@ -10,7 +10,12 @@ const Field = styled.div`
   margin: 0.25rem 0 0;
 `;
 
-const InvalidField = ({ controlId, feedbackMsg }) => (
+interface InvalidFieldProps {
+    controlId: string;
+    feedbackMsg: string;
+}
+
+const InvalidField = ({ controlId, feedbackMsg }: InvalidFieldProps) => (
     <Field
         role="alert"
         aria-live="polite"
@@ -20,4 +25,4 @@ const InvalidField = ({ controlId, feedbackMsg }) => (
     </Field>
 );
 
-export default InvalidField;
+export { InvalidField };

packages/react/src/components/forms/field-container.jsx → packages/react/src/components/forms/field-container.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import Label from './label';
-import InvalidField from '../feedbacks/invalid-field';
+import { Children } from '../buttons/abstract-button';
+import { InvalidField } from '../feedbacks/invalid-field';
+import { Label } from './label';
 
 const StyledDiv = styled.div`
   margin: 0 0 1.5rem;
@@ -18,7 +19,16 @@ const StyledDiv = styled.div`
   }
 `;
 
-const FieldContainer = ({ children, fieldId, label, valid, validMsg, ...props }) => (
+interface FieldContainerProps {
+    children: Children;
+    fieldId: string;
+    label: string;
+    valid: boolean;
+    validMsg: string;
+
+}
+
+const FieldContainer = ({ children, fieldId, label, valid, validMsg, ...props }: FieldContainerProps) => (
     <StyledDiv {...props} valid={valid}>
         {label && (
             <Label forId={fieldId}>
@@ -34,4 +44,4 @@ const FieldContainer = ({ children, fieldId, label, valid, validMsg, ...props })
     </StyledDiv>
 );
 
-export default FieldContainer;
+export { FieldContainer } ;

packages/react/src/components/forms/inputs/checkbox.jsx → packages/react/src/components/forms/inputs/checkbox.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import styled from 'styled-components';
 
 const Input = styled.input`
@@ -7,8 +7,15 @@ const Input = styled.input`
   width: 16px;
 `;
 
-const Checkbox = ({ defaultChecked, onChange }) => {
-    const ref = React.createRef();
+interface CheckboxProps {
+    defaultChecked?: boolean;
+    onChange: ((...args: any[]) => void);
+}
+
+type Ref = ((instance: HTMLInputElement) => void) | RefObject<HTMLInputElement>;
+
+const Checkbox = ({ defaultChecked, onChange }: CheckboxProps) => {
+    const ref: Ref = React.createRef();
 
     const handleChange = () => {
         if (typeof onChange === 'function') {
@@ -21,4 +28,4 @@ const Checkbox = ({ defaultChecked, onChange }) => {
     );
 };
 
-export default Checkbox;
+export { Checkbox };

packages/react/src/components/forms/inputs/option-button.jsx → packages/react/src/components/forms/inputs/option-button.tsx

@@ -24,11 +24,18 @@ const Input = styled.input`
   }
 `;
 
-const OptionButton = ({ checked, label, name, value }) => (
+interface OptionButtonProps {
+    checked?: boolean;
+    label: string;
+    name: string;
+    value: number;
+}
+
+const OptionButton = ({ checked, label, name, value }: OptionButtonProps) => (
     <div>
         <Input checked={checked} id="id" name={name} type="radio" value={value} />
         <label htmlFor="id">{label}</label>
     </div>
 );
 
-export default OptionButton;
+export { OptionButton };

packages/react/src/components/forms/inputs/search-contextual.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { SearchInput, SearchInputProps } from './search-input';
+
+const SearchContextual = ({ disabled, id, label, onChange }: SearchInputProps) => (
+    <SearchInput
+        disabled={disabled}
+        id={id}
+        label={label}
+        onChange={onChange}
+    />
+);
+
+export { SearchContextual };

packages/react/src/components/forms/inputs/search-global.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SearchInput, SearchInputProps } from './search-input';
+
+const SearchGlobal = ({ disabled, id, label, onSearch }: SearchInputProps) => (
+    <SearchInput
+        disabled={disabled}
+        hasButton
+        id={id}
+        label={label}
+        onSearch={onSearch}
+    />
+);
+
+export { SearchGlobal };

packages/react/src/components/forms/inputs/search-input.jsx → packages/react/src/components/forms/inputs/search-input.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
-import styled from 'styled-components';
+
 import SearchIcon from 'feather-icons/dist/icons/search.svg';
 import XIcon from 'feather-icons/dist/icons/x.svg';
+import styled from 'styled-components';
 
-import VisuallyHidden from '../../a11y/visuallyhidden';
+import { VisuallyHidden } from '../../a11y/visuallyhidden';
 import { SearchButton } from '../../buttons/search-button';
 
+import { Label } from '../label';
 import style from '../styles/inputs';
-import Label from '../label';
 
 const SearchWrapper = styled.div`
   display: flex;
@@ -86,10 +87,19 @@ const SearchSubmit = styled(SearchButton)`
   position: relative;
 `;
 
-const SearchInput = ({ disabled, hasButton, id, label, onChange, onSearch }) => {
+export interface SearchInputProps {
+    disabled?: boolean;
+    hasButton?: boolean;
+    id: string;
+    label: string;
+    onChange?: ((...args: any[]) => void);
+    onSearch?: ((...args: any[]) => void);
+}
+
+const SearchInput = ({ disabled, hasButton, id, label, onChange, onSearch }: SearchInputProps) => {
     const [{ value }, setValue] = useState({ value: '' });
 
-    const handleChange = event => {
+    const handleChange = (event: any) => {
         const newValue = event.target.value;
         setValue({ value: newValue });
 
@@ -98,7 +108,7 @@ const SearchInput = ({ disabled, hasButton, id, label, onChange, onSearch }) =>
         }
     };
 
-    const handleKeyDown = event => {
+    const handleKeyDown = (event: any) => {
         if (typeof onSearch === 'function' && event.keyCode === 13) {
             onSearch(value);
         }
@@ -154,4 +164,4 @@ const SearchInput = ({ disabled, hasButton, id, label, onChange, onSearch }) =>
     );
 };
 
-export default SearchInput;
+export { SearchInput };

packages/react/src/components/forms/inputs/text-area.jsx → packages/react/src/components/forms/inputs/text-area.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import style from '../styles/inputs';
 
-import FieldContainer from '../field-container';
+import { FieldContainer } from '../field-container';
 
 const StyledTextArea = styled.textarea`
   ${style}
@@ -14,11 +14,23 @@ const StyledTextArea = styled.textarea`
   resize: vertical;
 `;
 
-const TextArea = ({ defaultValue, disabled, id, label, onBlur, onChange, onFocus, required, validMsg }) => {
+export interface TextAreaProps {
+    defaultValue?: string;
+    disabled?: boolean;
+    id: string;
+    label: string;
+    onBlur?: ((...args: any[]) => void);
+    onChange?: ((...args: any[]) => void);
+    onFocus?: ((...args: any[]) => void);
+    required?: boolean;
+    validMsg?: string;
+}
+
+const TextArea = ({ defaultValue, disabled, id, label, onBlur, onChange, onFocus, required, validMsg }: TextAreaProps) => {
     const [{ value }, setValue] = useState({ value: defaultValue || '' });
     const [{ validity }, setValidity] = useState({ validity: true });
 
-    const handleBlur = event => {
+    const handleBlur = (event: any) => {
         const newValue = event.target.value;
 
         setValue({ value: newValue });
@@ -29,7 +41,7 @@ const TextArea = ({ defaultValue, disabled, id, label, onBlur, onChange, onFocus
         }
     };
 
-    const handleChange = event => {
+    const handleChange = (event: any) => {
         const newValue = event.target.value;
         setValue({ value: newValue });
 
@@ -56,12 +68,12 @@ const TextArea = ({ defaultValue, disabled, id, label, onBlur, onChange, onFocus
                 id={id}
                 onBlur={event => handleBlur(event)}
                 onChange={event => handleChange(event)}
-                onFocus={event => handleFocus(event)}
+                onFocus={event => handleFocus()}
                 required={required}
                 value={value}
             />
         </FieldContainer>
     );
 };
 
-export default TextArea;
+export { TextArea };