convert to type

Author: siddharthkp

packages/components/src/components/Avatar/index.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { Element } from '../Element';
 import { Text } from '../Text';
 
-interface IAvatarProps {
+type AvatarProps = {
   user: {
     id?: string;
     username: string;
@@ -13,7 +13,7 @@ interface IAvatarProps {
     badges?: any[];
     subscriptionSince?: string | null;
   };
-}
+};
 
 export const AvatarContainer = styled(Element).attrs({ as: 'span' })(
   css({
@@ -54,7 +54,7 @@ export const Pro = styled(Text).attrs({ size: 1, weight: 'bold' })(
   })
 );
 
-export const Avatar = ({ user, ...props }: IAvatarProps) =>
+export const Avatar = ({ user, ...props }: AvatarProps) =>
   user && (
     <AvatarContainer {...props}>
       <AvatarImage src={user.avatarUrl} alt={user.username} />

packages/components/src/components/Checkbox/index.tsx

@@ -5,11 +5,11 @@ import { useId } from '@reach/auto-id';
 import { Element } from '../Element';
 import { Text } from '../Text';
 
-interface ICheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
   checked?: boolean;
   label?: string;
   id?: string;
-}
+};
 
 export const CheckboxElement = styled.input(
   css({
@@ -69,7 +69,7 @@ const Label = styled(Text)(
   })
 );
 
-export const Checkbox: FunctionComponent<ICheckboxProps> = ({
+export const Checkbox: FunctionComponent<CheckboxProps> = ({
   checked,
   id,
   label,

packages/components/src/components/Collapsible/index.tsx

@@ -72,12 +72,12 @@ const ToggleIcon = props => (
   </Icon>
 );
 
-interface ICollapsibleProps {
+type CollapsibleProps = {
   defaultOpen?: boolean;
   title: string;
-}
+};
 
-export const Collapsible: React.FC<ICollapsibleProps> = ({
+export const Collapsible: React.FC<CollapsibleProps> = ({
   defaultOpen,
   title,
   children,

packages/components/src/components/FormField/index.tsx

@@ -3,7 +3,7 @@ import VisuallyHidden from '@reach/visually-hidden';
 import { useId } from '@reach/auto-id';
 import { Element, Stack, Label } from '../../index';
 
-interface IFormFieldProps {
+type FormFieldProps = {
   id?: string;
   // always ask for a label
   label: string;
@@ -15,9 +15,9 @@ interface IFormFieldProps {
   // elements tree.
   hideLabel?: boolean;
   direction?: 'horizontal' | 'vertical';
-}
+};
 
-export const FormField: React.FC<IFormFieldProps> = ({
+export const FormField: React.FC<FormFieldProps> = ({
   label,
   id,
   hideLabel = false,

packages/components/src/components/Input/index.tsx

@@ -7,9 +7,9 @@ const placeholderStyles = {
   fontSize: 3,
 };
 
-interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
-export const Input = styled(Element).attrs({ as: 'input' })<IInputProps>(
+export const Input = styled(Element).attrs({ as: 'input' })<InputProps>(
   css({
     height: '26px',
     width: '100%',

packages/components/src/components/Switch/index.tsx

@@ -51,14 +51,14 @@ const SwitchContainer = styled(Element)(
   })
 );
 
-interface ISwitchProps {
+type SwitchProps = {
   id?: string;
   on?: boolean;
   defaultOn?: boolean;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
+};
 
-export const Switch: React.FC<ISwitchProps> = ({ on, defaultOn, ...props }) => (
+export const Switch: React.FC<SwitchProps> = ({ on, defaultOn, ...props }) => (
   <SwitchContainer as="label">
     <SwitchInput
       type="checkbox"

packages/components/src/components/Textarea/index.tsx

@@ -5,13 +5,12 @@ import Rect from '@reach/rect';
 import VisuallyHidden from '@reach/visually-hidden';
 import { Stack, Input, Text } from '../..';
 
-interface ITextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
   maxLength?: number;
   autosize?: boolean;
   value?: string;
   defaultValue?: string;
-}
+};
 
 export const TextareaComponent: any = styled(Input).attrs({
   as: 'textarea',
@@ -37,7 +36,7 @@ const Count = styled.div<{ limit: boolean }>(({ limit }) =>
   })
 );
 
-export const Textarea: React.FC<ITextareaProps> = ({
+export const Textarea: React.FC<TextareaProps> = ({
   maxLength,
   defaultValue = '',
   value = '',