Components: extend react types to reduce repetition (codesandbox#3548)

* extend react types

* fix tag error

* cant belive that worked?

* include label props to build them with text

Author: siddharthkp

packages/components/package.json

@@ -21,7 +21,7 @@
     "lint": "eslint --ext .js,.ts,.tsx src",
     "start": "yarn tsc --watch",
     "start:storybook": "start-storybook",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit --pretty",
     "chromatic": "if-env CIRCLE_BRANCH=master && yarn chromatic:master || yarn chromatic:branch",
     "chromatic:master": "CHROMATIC_APP_CODE=nffds42ndde ./node_modules/.bin/chromatic --build-script-name=build:storybook --exit-zero-on-changes --auto-accept-changes",
     "chromatic:branch": "CHROMATIC_APP_CODE=nffds42ndde ./node_modules/.bin/chromatic --build-script-name=build:storybook --exit-zero-on-changes",

packages/components/src/components/Button/index.tsx

@@ -70,54 +70,54 @@ const variantStyles = {
   },
 };
 
-export const Button = styled(Element).attrs({ as: 'button' })<{
-  type?: 'submit' | 'button' | 'reset';
+interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'link' | 'danger';
-  disabled?: boolean;
-  onClick?: any;
-}>(({ variant = 'primary', ...props }) =>
-  css(
-    deepmerge(
-      // @ts-ignore deepmerge allows functions as values
-      // it overrides instead of merging, which is what we want
-      // but it's types don't like it. so we're going to ignore that
-      // TODO: raise a pull request for deepmerge or pick a different
-      // library to deep merge objects
-      variantStyles[variant],
-      // static styles:
-      {
-        display: 'inline-flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flex: 'none', // as a flex child
-        cursor: 'pointer',
-        fontFamily: 'Inter, sans-serif',
-        paddingY: 0,
-        paddingX: 2,
-        height: '26px', // match with inputs
-        width: '100%',
-        fontSize: 2,
-        fontWeight: 'medium',
-        lineHeight: 1, // trust the height
-        border: 'none',
-        borderRadius: 'small',
-        transition: 'all ease-in',
-        transitionDuration: theme => theme.speeds[2],
+}
 
-        ':focus': {
-          outline: 'none',
-        },
-        ':active': {
-          transform: 'scale(0.98)',
-        },
-        ':disabled': {
-          opacity: '0.4',
-          cursor: 'not-allowed',
-        },
-        ...props.css,
-      }
+export const Button = styled(Element).attrs({ as: 'button' })<IButtonProps>(
+  ({ variant = 'primary', ...props }) =>
+    css(
+      deepmerge(
+        // @ts-ignore deepmerge allows functions as values
+        // it overrides instead of merging, which is what we want
+        // but it's types don't like it. so we're going to ignore that
+        // TODO: raise a pull request for deepmerge or pick a different
+        // library to deep merge objects
+        variantStyles[variant],
+        // static styles:
+        {
+          display: 'inline-flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          flex: 'none', // as a flex child
+          cursor: 'pointer',
+          fontFamily: 'Inter, sans-serif',
+          paddingY: 0,
+          paddingX: 2,
+          height: '26px', // match with inputs
+          width: '100%',
+          fontSize: 2,
+          fontWeight: 'medium',
+          lineHeight: 1, // trust the height
+          border: 'none',
+          borderRadius: 'small',
+          transition: 'all ease-in',
+          transitionDuration: theme => theme.speeds[2],
+
+          ':focus': {
+            outline: 'none',
+          },
+          ':active': {
+            transform: 'scale(0.98)',
+          },
+          ':disabled': {
+            opacity: '0.4',
+            cursor: 'not-allowed',
+          },
+          ...props.css,
+        }
+      )
     )
-  )
 );
 
 Button.defaultProps = {

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

@@ -7,20 +7,9 @@ const placeholderStyles = {
   fontSize: 3,
 };
 
-export const Input = styled(Element).attrs({ as: 'input' })<{
-  type?: string;
-  onBlur?: any;
-  onChange?: any;
-  onKeyUp?: any;
-  placeholder?: string;
-  ref?: any;
-  required?: boolean;
-  value?: string | number;
-  defaultValue?: string | number;
-  autoComplete?: 'on' | 'off';
-  spellCheck?: 'true' | 'false';
-  autoFocus?: boolean;
-}>(
+interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export const Input = styled(Element).attrs({ as: 'input' })<IInputProps>(
   css({
     height: '26px',
     width: '100%',

packages/components/src/components/Label/index.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import css from '@styled-system/css';
-import { Text } from '../Text';
+import { Text, ITextProps } from '../Text';
 
-export const Label = styled(Text).attrs({ as: 'label' })<{ htmlFor: string }>(
-  css({})
-);
+type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & ITextProps & {};
+
+export const Label = styled(Text).attrs({ as: 'label' })<LabelProps>(css({}));

packages/components/src/components/Label/label.stories.tsx

@@ -6,7 +6,9 @@ export default {
   component: Label,
 };
 
-export const Basic = () => <Label>Plan old boring text</Label>;
+export const Basic = () => (
+  <Label htmlFor="input-element">Plan old boring text</Label>
+);
 
 export const Block = () => (
   <Label block marginX={2}>

packages/components/src/components/Link/index.tsx

@@ -3,14 +3,12 @@ import styled from 'styled-components';
 import css from '@styled-system/css';
 import { Text } from '../Text';
 
-interface ILinkProps {
-  href: string;
-  target?: string;
-  rel?: string;
-  variant?: 'body' | 'muted' | 'danger'; // from Text
-}
+type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
+  React.AnchorHTMLAttributes<HTMLSpanElement> & {
+    variant?: 'body' | 'muted' | 'danger'; // same as Text
+  };
 
-const LinkElement = styled(Text).attrs({ as: 'a' })<ILinkProps>(
+const LinkElement = styled(Text).attrs({ as: 'a' })<LinkProps>(
   css({
     cursor: 'pointer',
     textDecoration: 'none',
@@ -22,7 +20,7 @@ const LinkElement = styled(Text).attrs({ as: 'a' })<ILinkProps>(
   })
 );
 
-export const Link: React.FC<ILinkProps> = props => (
+export const Link: React.FC<LinkProps> = props => (
   <LinkElement
     rel={props.target === '_blank' ? 'noopener noreferrer' : null}
     {...props}

packages/components/src/components/Select/index.tsx

@@ -102,22 +102,18 @@ const SelectWithIcon = styled(Element)<{
   })
 );
 
-interface ISelectProps {
-  icon?: any;
-  placeholder?: string;
-  children?: any;
-  disabled?: boolean;
-  onChange?: any;
-  value?: string | number;
-  defaultValue?: string | number;
-  variant?: string;
-}
+type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement> &
+  React.SelectHTMLAttributes<HTMLInputElement> & {
+    icon?: any;
+    placeholder?: string;
+    variant?: 'default' | 'link';
+  };
 
 export const Select = ({
   icon = null,
   placeholder = null,
   ...props
-}: ISelectProps) => {
+}: SelectProps) => {
   const PrefixIcon = icon;
 
   if (icon)

packages/components/src/components/Tags/Tag.tsx

@@ -34,7 +34,7 @@ export function Tag({ tag, onRemove }: TagProps) {
         <Button
           variant="link"
           css={{ width: 'auto' }}
-          onClick={onRemove}
+          onClick={() => onRemove(tag)}
           marginLeft={1}
         >
           <CrossIcon />

packages/components/src/components/Text/index.tsx

@@ -14,21 +14,24 @@ const overflowStyles = {
   whiteSpace: 'nowrap',
 };
 
-export const Text = styled(Element).attrs({ as: 'span' })<{
+export interface ITextProps extends React.HTMLAttributes<HTMLSpanElement> {
   size?: number;
   align?: string;
   weight?: string;
   block?: boolean;
-  variant?: 'body' | 'muted' | 'danger';
   maxWidth?: number | string;
-}>(({ size, align, weight, block, variant = 'body', maxWidth, ...props }) =>
-  css({
-    fontSize: size || 'inherit', // from theme.fontSizes
-    textAlign: align || 'left',
-    fontWeight: weight || null, // from theme.fontWeights
-    display: block ? 'block' : 'inline',
-    color: variants[variant],
-    maxWidth,
-    ...(maxWidth ? overflowStyles : {}),
-  })
+  variant?: 'body' | 'muted' | 'danger';
+}
+
+export const Text = styled(Element).attrs({ as: 'span' })<ITextProps>(
+  ({ size, align, weight, block, variant = 'body', maxWidth, ...props }) =>
+    css({
+      fontSize: size || 'inherit', // from theme.fontSizes
+      textAlign: align || 'left',
+      fontWeight: weight || null, // from theme.fontWeights
+      display: block ? 'block' : 'inline',
+      color: variants[variant],
+      maxWidth,
+      ...(maxWidth ? overflowStyles : {}),
+    })
 );

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

@@ -7,7 +7,6 @@ interface ITextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   maxLength?: number;
   autosize?: boolean;
-  ref?: any;
   value?: string;
 }