chore: fix eslint issue

.eslintrc

@@ -1,33 +1,46 @@
 {
+  "root": true,
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    }
+    "ecmaVersion": 7
   },
-  "plugins": ["@typescript-eslint", "react-hooks"],
   "extends": [
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "airbnb-typescript",
+    "prettier",
+    "prettier/react",
+    "prettier/@typescript-eslint"
+  ],
+  "plugins": [
+    "eslint-plugin-react-hooks",
+    "@typescript-eslint/eslint-plugin",
+    "eslint-plugin-testing-library"
   ],
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  },
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "detect"
+    }
+  },
   "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/no-empty-interface": "off",
-    "@typescript-eslint/camelcase": "off",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/ban-ts-ignore": "off",
-    "@typescript-eslint/no-unused-vars": "off",
-    "@typescript-eslint/no-use-before-define": "off",
-    "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/indent": "off",
-    "@typescript-eslint/array-callback-return": "off",
-    "@typescript-eslint/array-type": "off",
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "@typescript-eslint/member-delimiter-style": "off",
-    "@typescript-eslint/no-var-requires": "off",
-    "@typescript-eslint/ban-types": "off",
-    "@typescript-eslint/ban-ts-comment": "off"
+    "prettier/prettier": ["error", { "singleQuote": false }],
+    "@typescript-eslint/ban-ts-comment": "off",
+    "no-param-reassign": "off",
+    "jsx-a11y/no-autofocus": "off",
+    "react/forbid-prop-types": "off",
+    "react/jsx-filename-extension": [
+      "error",
+      { "extensions": [".js", ".tsx"] }
+    ],
+    "react/jsx-props-no-spreading": "off",
+    "react/no-array-index-key": "off",
+    "react/require-default-props": "off",
+    "react/sort-prop-types": "error"
   }
 }

package.json

@@ -50,6 +50,8 @@
     "docs:build": "yarn members:gen && yarn avatars:gen && yarn docs build",
     "docs:dev": "yarn avatars:gen && yarn docs dev",
     "docs:start": "yarn docs start",
+    "dedup": "yarn-deduplicate -s fewer yarn.lock",
+    "dedup:check": "yarn-deduplicate -s fewer yarn.lock --list --fail",
     "core": "yarn workspace @chakra-ui/core",
     "icon": "yarn workspace @chakra-ui/icon",
     "hooks": "yarn workspace @chakra-ui/hooks",
@@ -161,9 +163,8 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.1.5",
     "@types/shelljs": "^0.8.8",
-    "@types/wordpress__jest-console": "^3.0.3",
-    "@typescript-eslint/eslint-plugin": "^4.3.0",
-    "@typescript-eslint/parser": "^3.10.1",
+    "@typescript-eslint/eslint-plugin": "^4.4.0",
+    "@typescript-eslint/parser": "^4.4.0",
     "all-contributors-cli": "^6.17.4",
     "arg": "^4.1.3",
     "babel-eslint": "^10.1.0",
@@ -178,10 +179,14 @@
     "dotenv-cli": "^3.2.0",
     "edit-json-file": "^1.4.1",
     "emotion-theming": "^10.0.27",
+    "yarn-deduplicate": "^3.0.0",
     "eslint": "^7.10.0",
-    "eslint-plugin-jest-dom": "^3.2.3",
+    "eslint-config-prettier": "^6.12.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-config-airbnb-typescript": "^9.0.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.2",
+    "eslint-plugin-react": "^7.21.3",
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-plugin-testing-library": "^3.9.0",
     "esm": "^3.2.25",

packages/transition/package.json

@@ -46,9 +46,7 @@
     "lint:types": "tsc --noEmit"
   },
   "dependencies": {
-    "@chakra-ui/utils": "1.0.0-rc.5",
-    "@types/react-transition-group": "4.4.0",
-    "react-transition-group": "4.4.1"
+    "@chakra-ui/utils": "1.0.0-rc.5"
   },
   "devDependencies": {
     "@chakra-ui/system": "1.0.0-rc.5"

packages/transition/src/collapse.tsx

@@ -0,0 +1,88 @@
+import { forwardRef, PropsOf } from "@chakra-ui/system"
+import { AnimatePresence, motion, Variant } from "framer-motion"
+import * as React from "react"
+
+export type MotionVariants<T extends string> = Record<T, Variant>
+
+export const collapseVariants: MotionVariants<"open" | "collapsed"> = {
+  collapsed: (props: CollapseOptions) => ({
+    opacity: parseInt(props.startingHeight as string, 10) > 0 ? 1 : 0,
+    height: props.startingHeight,
+    transition: { duration: 0.15 },
+  }),
+  open: (props: CollapseOptions) => ({
+    opacity: 1,
+    height: props.endingHeight,
+    transition: {
+      duration: 0.3,
+      ease: [0.04, 0.62, 0.23, 0.98],
+    },
+  }),
+}
+
+export interface CollapseOptions {
+  unMountOnExit?: boolean
+  /**
+   * If `true`, the content will be visible
+   */
+  isOpen?: boolean
+  /**
+   * The height you want the content in it's collapsed state. Set to `0` by default
+   */
+  startingHeight?: number | string
+  /**
+   * The height you want the content in it's expanded state. Set to `auto` by default
+   */
+  endingHeight?: number | string
+  /**
+   * The custom framer-motion variants to use
+   */
+  motionConfig?: MotionVariants<"open" | "collapsed">
+}
+
+interface CollapseProps extends PropsOf<typeof motion.div>, CollapseOptions {}
+
+export const Collapse = forwardRef<CollapseProps, "div">((props, ref) => {
+  const {
+    isOpen,
+    unMountOnExit,
+    startingHeight = 0,
+    endingHeight = "auto",
+    motionConfig,
+    style,
+    ...rest
+  } = props
+
+  /**
+   * Warn 🚨: `startingHeight` and `unMountOnExit` are mutually exclusive
+   *
+   * If you specify a starting height, the collapsed needs to be mounted
+   * for the height to take effect.
+   */
+  if (startingHeight > 0 && unMountOnExit) {
+    console.warn(
+      `startingHeight and unMountOnExit are mutually exclusive. You can't use them together`,
+    )
+  }
+
+  const shouldExpand = unMountOnExit ? isOpen && unMountOnExit : true
+
+  return (
+    <AnimatePresence initial={false} custom={{ startingHeight, endingHeight }}>
+      {shouldExpand && (
+        <motion.div
+          ref={ref}
+          initial="collapsed"
+          animate={isOpen || unMountOnExit ? "open" : "collapsed"}
+          exit="collapsed"
+          {...rest}
+          variants={motionConfig ?? collapseVariants}
+          style={{ overflow: "hidden", ...style }}
+          custom={{ startingHeight, endingHeight }}
+        />
+      )}
+    </AnimatePresence>
+  )
+})
+
+Collapse.displayName = "Collapse"

packages/transition/src/index.ts

@@ -1,10 +1,9 @@
-export * from "./fade"
+export * from "./presets"
 export * from "./scale-fade"
 export * from "./slide"
 export * from "./slide-fade"
 export * from "./transition"
 export * from "./transition-config"
 export * from "./hidden-transition"
-export * from "./use-transition-config"
 export * from "./presets"
 export { CSSTransition } from "react-transition-group"

packages/transition/src/presets.ts

@@ -0,0 +1,27 @@
+import { Variant } from "framer-motion"
+
+export type MotionVariants<T extends string> = { [K in T]?: Variant }
+
+export const fade: MotionVariants<"enter" | "exit"> = {
+  enter: {
+    opacity: 0,
+    transition: { duration: 0.15, ease: [0.175, 0.885, 0.32, 1.175] },
+  },
+  exit: { opacity: 0 },
+}
+
+export const collapse: MotionVariants<"open" | "collapsed"> = {
+  open: {
+    opacity: 1,
+    height: "auto",
+    transition: {
+      duration: 0.3,
+      ease: [0.04, 0.62, 0.23, 0.98],
+    },
+  },
+  collapsed: {
+    opacity: 0,
+    height: 0,
+    transition: { duration: 0.15 },
+  },
+}

packages/transition/src/slide.tsx

@@ -1,6 +1,41 @@
 import * as React from "react"
 import { __DEV__ } from "@chakra-ui/utils"
 import { Transition, TransitionProps } from "./transition"
+import { motion, Variants } from "framer-motion"
+
+export type SlideDirection = "left" | "right" | "bottom" | "top"
+
+const offset = {
+  bottom: { y: "100%" },
+  top: { y: "-100%" },
+  left: { x: "-100%" },
+  right: { x: "100%" },
+}
+
+export const slideVariants: Variants = {
+  hide: (props) => {
+    const directionProps = offset[props.direction]
+    return {
+      ...directionProps,
+      transition: {
+        duration: 0.2,
+        easings: "linear",
+      },
+    }
+  },
+  show: (props) => {
+    const directionProps = offset[props.direction]
+    const [dir] = Object.keys(directionProps)
+    return {
+      [dir]: 0,
+      transition: {
+        type: "spring",
+        damping: 25,
+        stiffness: 180,
+      },
+    }
+  },
+}
 
 type Placement = "left" | "right" | "bottom" | "top"
 
@@ -43,62 +78,8 @@ function createBaseStyle(placement: Placement) {
   }
 }
 
-const getTransformStyle = (placement: Placement, value: string) => {
-  let axis = ""
-  if (placement === "left" || placement === "right") axis = "X"
-  if (placement === "top" || placement === "bottom") axis = "Y"
-  return `translate${axis}(${value})`
+export const Slide = (props) => {
+  return <motion.div />
 }
 
-function getTransitionStyles(placement: Placement) {
-  const offset = {
-    bottom: "100%",
-    top: "-100%",
-    left: "-100%",
-    right: "100%",
-  }
-
-  return {
-    init: {
-      transform: getTransformStyle(placement, offset[placement]),
-    },
-    entered: { transform: getTransformStyle(placement, "0%") },
-    exiting: {
-      transform: getTransformStyle(placement, offset[placement]),
-    },
-  }
-}
-
-export type SlideProps = Omit<TransitionProps, "styles" | "timeout"> & {
-  /** The direction to slide drawer from */
-  placement?: Placement
-  /** The transition timeout */
-  timeout?: number
-}
-
-export const Slide: React.FC<SlideProps> = (props) => {
-  const { placement = "left", timeout = 150, children, ...rest } = props
-
-  const styles = getTransitionStyles(placement)
-
-  const positionStyles: React.CSSProperties = {
-    position: "fixed",
-    willChange: "transform",
-    ...createBaseStyle(placement),
-  }
-
-  return (
-    <Transition
-      styles={styles}
-      transition={`opacity ${timeout}ms cubic-bezier(0, 0, 0.2, 1), transform ${timeout}ms cubic-bezier(0, 0, 0.2, 1)`}
-      timeout={{ enter: 0, exit: timeout }}
-      {...rest}
-    >
-      {(styles) => children({ ...positionStyles, ...styles })}
-    </Transition>
-  )
-}
-
-if (__DEV__) {
-  Slide.displayName = "Slide"
-}
+Slide.displayName = "Slide"