Fix type issues from ts-lint

packages/chakra-ui/.lintstagedrc

@@ -0,0 +1,5 @@
+{
+  "*.js": ["eslint --fix"],
+  "*.ts": ["tslint -c tslint.json"],
+  "**/*.+(js|jsx|ts|tsx|d.ts|md|mdx)": ["prettier --write", "git add"]
+}

packages/chakra-ui/package.json

@@ -6,25 +6,29 @@
   "module": "dist/esm/index.js",
   "sideEffects": false,
   "scripts": {
-    "build": "yarn build:cjs && yarn build:esm && yarn build:copy-types",
     "prebuild": "rimraf dist",
+    "build": "yarn build:cjs && yarn build:esm && yarn build:copy-types",
     "build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs babel ./src --out-dir ./dist --ignore \"**/examples.js\"",
     "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel ./src --out-dir ./dist/esm --ignore \"**/examples.js\"",
     "build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel ./src --out-dir ./dist/es --ignore \"**/examples.js\"",
     "build:umd": "cross-env NODE_ENV=production-umd rollup -c",
     "build:copy-types": "node ./scripts/copy-files.js",
-    "release": "yarn build && npm version patch && npm run publish",
-    "prepublishOnly": "npm run build",
+    "version": "npm run build",
+    "postversion": "git push && git push --tags && npm publish",
     "lint": "eslint src",
     "tslint": "tslint -c tslint.json 'src/**/*.ts'",
     "prettier": "prettier \"**/*.+(js|jsx|ts|tsx|d.ts|md|mdx)\"",
     "format": "npm run prettier -- --write",
-    "validate": "npm run lint && npm run prettier -- --list-different",
-    "precommit": "npm run validate",
+    "validate": "npm run lint && npm run prettier -- --list-different && npm run tslint",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "build-watch": "nodemon -w src -x 'rm .babelrc &> /dev/null; yarn build'"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
   "dependencies": {
     "@reach/alert": "0.1.5",
     "@reach/alert-dialog": "0.2.9",
@@ -105,6 +109,7 @@
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-terser": "5.1.1",
     "tslint": "5.18.0",
+    "tslint-config-prettier": "1.18.0",
     "typescript": "3.5.3"
   },
   "author": "Segun Adebayo <sage@adebayosegun.com>",

packages/chakra-ui/src/Accordion/index.d.ts

@@ -22,7 +22,6 @@ interface IAccordion {
   defaultIsOpen?: boolean;
   /**
    * The callback fired when the accordion is expanded/collapsed.
-   *  @param {Boolean} isOpen - the next state of the accordion
    */
   onOpenChange?: (isOpen: boolean) => void;
   /**

packages/chakra-ui/src/Box/index.d.ts

@@ -1,7 +1,8 @@
 import * as StyledSystem from "styled-system";
 import * as Emotion from "@emotion/styled";
 import * as React from "react";
-import * as CSS from "csstype";
+
+type CSS = Emotion.CSSObject;
 
 interface ICustomConfig {
   // Border radius shorthand
@@ -22,42 +23,38 @@ interface ICustomConfig {
   borderLeftColor?: StyledSystem.BorderColorProps;
 
   // CSS properties
-  textDecoration?: StyledSystem.ResponsiveValue<CSS.TextDecorationProperty>;
-  textTransform?: StyledSystem.ResponsiveValue<CSS.TextTransformProperty>;
-  overflowX?: StyledSystem.ResponsiveValue<CSS.OverflowXProperty>;
-  overflowY?: StyledSystem.ResponsiveValue<CSS.OverflowYProperty>;
-  appearance?: StyledSystem.ResponsiveValue<CSS.AppearanceProperty>;
-  transform?: StyledSystem.ResponsiveValue<CSS.TransformProperty>;
-  transformOrigin?: StyledSystem.ResponsiveValue<
-    CSS.TransformOriginProperty<string>
-  >;
-  whiteSpace?: StyledSystem.ResponsiveValue<CSS.WhiteSpaceProperty>;
-  animation?: StyledSystem.ResponsiveValue<CSS.AnimationProperty>;
-  userSelect?: StyledSystem.ResponsiveValue<CSS.UserSelectProperty>;
-  pointerEvents?: StyledSystem.ResponsiveValue<CSS.PointerEventsProperty>;
-  boxSizing?: StyledSystem.ResponsiveValue<CSS.BoxSizingProperty>;
-  cursor?: StyledSystem.ResponsiveValue<CSS.CursorProperty>;
-  resize?: StyledSystem.ResponsiveValue<CSS.ResizeProperty>;
-  transition?: StyledSystem.ResponsiveValue<CSS.TransitionProperty>;
-  objectFit?: StyledSystem.ResponsiveValue<CSS.ObjectFitProperty>;
-  objectPosition?: StyledSystem.ResponsiveValue<
-    CSS.ObjectPositionProperty<string>
-  >;
+  textDecoration?: StyledSystem.ResponsiveValue<CSS["textDecoration"]>;
+  textTransform?: StyledSystem.ResponsiveValue<CSS["textTransform"]>;
+  overflowX?: StyledSystem.ResponsiveValue<CSS["overflowX"]>;
+  overflowY?: StyledSystem.ResponsiveValue<CSS["overflowY"]>;
+  appearance?: StyledSystem.ResponsiveValue<CSS["appearance"]>;
+  transform?: StyledSystem.ResponsiveValue<CSS["transform"]>;
+  transformOrigin?: StyledSystem.ResponsiveValue<CSS["transformOrigin"]>;
+  whiteSpace?: StyledSystem.ResponsiveValue<CSS["whiteSpace"]>;
+  animation?: StyledSystem.ResponsiveValue<CSS["animation"]>;
+  userSelect?: StyledSystem.ResponsiveValue<CSS["userSelect"]>;
+  pointerEvents?: StyledSystem.ResponsiveValue<CSS["pointerEvents"]>;
+  boxSizing?: StyledSystem.ResponsiveValue<CSS["boxSizing"]>;
+  cursor?: StyledSystem.ResponsiveValue<CSS["cursor"]>;
+  resize?: StyledSystem.ResponsiveValue<CSS["resize"]>;
+  transition?: StyledSystem.ResponsiveValue<CSS["transition"]>;
+  objectFit?: StyledSystem.ResponsiveValue<CSS["objectFit"]>;
+  objectPosition?: StyledSystem.ResponsiveValue<CSS["objectPosition"]>;
   backgroundAttachment?: StyledSystem.ResponsiveValue<
-    CSS.BackgroundAttachmentProperty
+    CSS["backgroundAttachment"]
   >;
-  bgAttachment?: StyledSystem.ResponsiveValue<CSS.BackgroundAttachmentProperty>;
+  bgAttachment?: StyledSystem.ResponsiveValue<CSS["backgroundAttachment"]>;
 
   // SVG color properties
   fill?: StyledSystem.ColorProps;
   stroke?: StyledSystem.ColorProps;
 }
 
-interface FontSizeProps {
+interface IFontSize {
   fontSize: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
 }
 
-interface FontWeightProps {
+interface IFontWeight {
   fontWeight?:
     | "hairline"
     | "thin"
@@ -70,11 +67,11 @@ interface FontWeightProps {
     | "black";
 }
 
-interface LineHeightProps {
+interface ILineHeight {
   lineHeight: "none" | "shorter" | "short" | "normal" | "tall" | "taller";
 }
 
-interface LetterSpacingProps {
+interface ILetterSpacing {
   letterSpacing: "tighter" | "tight" | "normal" | "wide" | "wider" | "widest";
 }
 
@@ -91,9 +88,9 @@ export type BoxProps = React.AriaAttributes &
   StyledSystem.ShadowProps &
   StyledSystem.OpacityProps &
   StyledSystem.TypographyProps &
-  FontSizeProps &
-  LetterSpacingProps &
-  LineHeightProps &
+  IFontSize &
+  ILetterSpacing &
+  ILineHeight &
   ICustomConfig & {
     wordBreak: "normal" | "words" | "all" | "truncate";
     as: React.ReactType;

packages/chakra-ui/src/ButtonGroup/index.d.ts

@@ -10,7 +10,7 @@ export interface IButtonGroup {
   /**
    * If `true`, the borderRadius of button that are direct children will be altered
    * to look flushed together
-   * */
+   */
   isAttached?: boolean;
   spacing?: StyledSystem.MarginRightProps;
   children: React.ReactNode;

packages/chakra-ui/src/Collapse/index.d.ts

@@ -1,13 +1,13 @@
-import { BoxProps } from "../Box";
 import * as React from "react";
+import { BoxProps } from "../Box";
 
-interface ICollapse {
+export interface ICollapse {
   isOpen?: boolean;
   animateOpacity?: boolean;
-  onAnimationEnd?(props: { newHeight: number }): void;
-  onAnimationStart?(props: { newHeight: number }): void;
   duration?: number;
   collapsedHeight?: number;
+  onAnimationEnd?(props: { newHeight: number }): void;
+  onAnimationStart?(props: { newHeight: number }): void;
 }
 
 export type CollapseProps = ICollapse &

packages/chakra-ui/src/Editable/index.d.ts

@@ -13,13 +13,11 @@ interface IEditable {
   defaultValue?: string;
   /**
    * Whether the text can be edited.
-   * @default false
    */
   isDisabled?: boolean;
   /**
    * Whether the component should start with the edit mode active
    * If `true`, the input is shown by default.
-   * @default false
    */
   isEditing?: boolean;
   /**
@@ -40,17 +38,16 @@ interface IEditable {
   onEdit?: () => void;
   /**
    * If `true`, the input's text will be highlighted on focus.
-   * @default false
    */
   selectAllOnFocus?: boolean;
   /**
    * Placeholder text when the value is empty.
-   * @default "Click to Edit"
    */
   placeholder?: string;
-  /** The content of the EditableText
-   *  Ideally only `EditablePreview` and `EditableInput` should
-   *  be the children (but you add other elements too)
+  /**
+   * The content of the EditableText
+   * Ideally only `EditablePreview` and `EditableInput` should
+   * be the children (but you add other elements too)
    */
   children: React.ReactNode;
 }

packages/chakra-ui/src/Link/index.d.ts

@@ -1,16 +1,17 @@
+import * as React from "react";
 import * as StyledSystem from "styled-system";
 import * as Emotion from "@emotion/styled";
 import { PseudoBoxProps } from "../PseudoBox";
 
-export interface LinkProps
-  extends React.AnchorHTMLAttributes<{}>,
-    PseudoBoxProps {
+export interface ILink {
   isDisabled?: boolean;
   color?: string;
   isUnstyled?: boolean;
   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
 }
 
+export type LinkProps = ILink & PseudoBoxProps;
+
 declare const Link: React.FunctionComponent<LinkProps>;
 
 export default Link;

packages/chakra-ui/src/Menu/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as PopperJS from "popper.js";
+import * as ReactPopper from "react-popper";
 import { BoxProps } from "../Box";
 
 interface IRenderProps {
@@ -18,7 +18,7 @@ export interface IMenu {
   autoSelect?: boolean;
   closeOnBlur?: boolean;
   closeOnSelect?: boolean;
-  placement?: PopperJS.Placement;
+  placement?: ReactPopper.PopperProps["placement"];
 }
 
 export type MenuProps = IMenu & ChildrenProp;
@@ -38,11 +38,11 @@ export const MenuList: React.FC<MenuListProps>;
 
 interface IMenuItem {
   isDisabled?: boolean;
+  role?: "menuitem" | "menuitemradio" | "menuitemcheckbox";
   onClick?: React.KeyboardEventHandler;
   onMouseLeave?: React.MouseEventHandler;
   onKeyDown?: React.KeyboardEventHandler;
   onMouseMove?: React.MouseEventHandler;
-  role?: "menuitem" | "menuitemradio" | "menuitemcheckbox";
 }
 export type MenuItemProps = IMenuItem &
   BoxProps &

packages/chakra-ui/src/Popover/index.d.ts

@@ -1,15 +1,15 @@
-import * as PopperJS from "popper.js";
+import * as React from "react";
+import * as ReactPopper from "react-popper";
 import StyledSystem from "styled-system";
 import { BoxProps } from "../Box";
-import * as React from "react";
 import { PseudoBoxProps } from "../PseudoBox";
 
 interface IPopover {
   isOpen?: boolean;
   defaultOpen?: boolean;
   maxWidth?: StyledSystem.MaxWidthProps;
   trigger?: React.ReactNode;
-  placement?: PopperJS.Placement;
+  placement?: ReactPopper.PopperProps["placement"];
   children: React.ReactNode;
   showArrow?: boolean;
   showCloseButton?: boolean;

packages/chakra-ui/src/VisuallyHidden/index.d.ts

@@ -3,4 +3,4 @@ import { BoxProps } from "../Box";
 
 declare const VisuallyHidden: React.FC<BoxProps>;
 
-export const VisuallyHidden;
+export default VisuallyHidden;

packages/chakra-ui/src/theme/index.d.ts

@@ -5,6 +5,10 @@ interface IIcon {
   viewBox?: string;
 }
 
-export interface Theme extends StyledSystem.Theme {
+export interface ITheme extends StyledSystem.Theme {
   icons: IIcon;
 }
+
+declare const theme: ITheme;
+
+export default theme;

packages/chakra-ui/src/useClipboard/index.d.ts

@@ -7,4 +7,6 @@ interface IClipboard<T> {
 /**
  * `useClipboard` is a custom hook to handle copying content to clipboard
  */
-export default function useClipboard<T>(value: T): IClipboard<T>;
+declare function useClipboard<T>(value: T): IClipboard<T>;
+
+export default useClipboard;

packages/chakra-ui/src/useDisclosure/index.d.ts

@@ -12,4 +12,6 @@ interface IDisclosure {
  * useDisclosure is a custom hook to help handle common `open`, `close`, or `toggle` scenarios
  * @returns An object of `isOpen, onOpen, onClose, onToggle`
  */
-export default function useDisclosure(defaultIsOpen?: string): IDisclosure;
+declare function useDisclosure(defaultIsOpen?: string): IDisclosure;
+
+export default useDisclosure;

packages/chakra-ui/tslint.json

@@ -1,15 +1,16 @@
 {
   "defaultSeverity": "error",
-  "extends": ["dtslint/dtslint.json", "tslint:recommended"],
+  "extends": [
+    "dtslint/dtslint.json",
+    "tslint:latest",
+    "tslint-config-prettier"
+  ],
   "jsRules": {},
   "rules": {
-    "ordered-imports": false,
     "deprecation": true,
-    "no-empty-interface": false,
+    "ordered-imports": false,
     "no-unnecessary-callback-wrapper": false,
-    "no-unnecessary-generics": false,
-    "semicolon": [true, "always", "ignore-bound-class-methods"],
-    "interface-name": false
+    "no-unnecessary-generics": false
   },
   "rulesDirectory": []
 }

packages/chakra-ui/yarn.lock

@@ -10385,6 +10385,11 @@ tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
 
+tslint-config-prettier@1.18.0:
+  version "1.18.0"
+  resolved "https://registry.yarnpkg.com/tslint-config-prettier/-/tslint-config-prettier-1.18.0.tgz#75f140bde947d35d8f0d238e0ebf809d64592c37"
+  integrity sha512-xPw9PgNPLG3iKRxmK7DWr+Ea/SzrvfHtjFt5LBl61gk2UBG/DB9kCXRjv+xyIU1rUtnayLeMUVJBcMX8Z17nDg==
+
 tslint@5.14.0:
   version "5.14.0"
   resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.14.0.tgz#be62637135ac244fc9b37ed6ea5252c9eba1616e"