Revert "[WIP] feat: bump ts version and add new eslint config"

MacPaw · Jun 7, 2023 · f3b7dcc · f3b7dcc
1 parent 52fa33a
commit f3b7dcc
Show file tree

Hide file tree

Showing 111 changed files with 2,973 additions and 2,633 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     continue-on-error: false
     steps:
-      - name: Checkout
+      - name: Checkout    
         uses: actions/checkout@v2
 
       - name: Setup node
@@ -21,7 +21,7 @@ jobs:
           node-version: '16.x'
           registry-url: 'https://registry.npmjs.org'
           cache: 'npm'
-
+       
       - name: Install dependencies
         run: npm i
         env:
@@ -47,7 +47,7 @@ jobs:
         uses: actions/download-artifact@v2
         with:
           name: ui-kit-artifact
-
+      
       - name: Unpack artifact
         run: tar xf artifact.tar.gz
 
@@ -67,7 +67,7 @@ jobs:
 
       - name: Unpack artifact
         run: tar xf artifact.tar.gz
-
+          
       - name: Run typescript compile
         run: yarn tsc --noEmit
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@macpaw/macpaw-ui",
-  "version": "4.11.0",
+  "version": "4.10.6",
   "main": "lib/ui.js",
   "scripts": {
     "dev": "next -p 1234",
@@ -35,9 +35,8 @@
   },
   "devDependencies": {
     "@babel/runtime": "^7.18.3",
-    "@macpaw/eslint-config-react": "^3.1.0",
-    "@macpaw/eslint-config-typescript": "^3.1.0",
-    "@macpaw/eslint-config-prettier": "^1.1.0",
+    "@macpaw/eslint-config-react": "^2.0.1",
+    "@macpaw/eslint-config-typescript": "^2.0.1",
     "@mdx-js/loader": "^2.1.1",
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^12.1.6",
@@ -55,7 +54,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "sass": "^1.52.1",
-    "typescript": "^5.0.4"
+    "typescript": "^4.7.2"
   },
   "files": [
     "src",

diff --git a/pages/tooltip.mdx b/pages/tooltip.mdx
@@ -77,7 +77,7 @@ import { Tooltip, Button, Grid, GridRow, GridCell } from '../src/ui';
 
 ## Tooltip with max width
 
-<Tooltip
+<Tooltip 
   maxWidth={100}
   position="right"
   content="So small"
@@ -88,7 +88,7 @@ import { Tooltip, Button, Grid, GridRow, GridCell } from '../src/ui';
 </Tooltip>
 
 ```
-<Tooltip
+<Tooltip 
   maxWidth={100}
   position="right"
   content="Hi there"
@@ -102,7 +102,7 @@ import { Tooltip, Button, Grid, GridRow, GridCell } from '../src/ui';
 
 ## Tooltip that opens on click
 
-<Tooltip
+<Tooltip 
   position="right"
   content="Hi there!"
   openOnClick
@@ -113,7 +113,7 @@ import { Tooltip, Button, Grid, GridRow, GridCell } from '../src/ui';
 </Tooltip>
 
 ```
-<Tooltip
+<Tooltip 
   position="right"
   content="Hi there!"
   openOnClick
@@ -138,7 +138,7 @@ export const ControlledTooltip = () => {
             </Button>
         </GridCell>
         <GridCell>
-          <Tooltip
+          <Tooltip 
             position="top"
             content={`Hi there! I'm ${tooltipBehaviorTitle} tooltip.`}
             forceShow={isVisible}
@@ -148,7 +148,7 @@ export const ControlledTooltip = () => {
             </Button>
           </Tooltip>
         </GridCell>
-      </GridRow>
+      </GridRow>     
     </Grid>
   );
 };
@@ -162,7 +162,7 @@ const tooltipBehaviorTitle = isVisible ? 'always visible' : 'normal'
 <Button onClick={() => setIsVisible(current=>!current)}>
   Toggle behavior: {tooltipBehaviorTitle}
 </Button>
-<Tooltip
+<Tooltip 
   position="top"
   content={`Hi there! I'm ${tooltipBehaviorTitle} tooltip.`}
   forceShow={isVisible}
@@ -174,7 +174,7 @@ const tooltipBehaviorTitle = isVisible ? 'always visible' : 'normal'
 
 ```
 
-## Tooltip force hidding
+## Tooltip force hidding 
 
 export const HiddenTooltip = () => {
   const [isHidden, setIsHidden] = useState(false);
@@ -188,7 +188,7 @@ export const HiddenTooltip = () => {
             </Button>
         </GridCell>
         <GridCell>
-          <Tooltip
+          <Tooltip 
             position="top"
             content={`Hi there! I'm ${tooltipBehaviorTitle} tooltip.`}
             forceHide={isHidden}
@@ -198,7 +198,7 @@ export const HiddenTooltip = () => {
             </Button>
           </Tooltip>
         </GridCell>
-      </GridRow>
+      </GridRow>     
     </Grid>
   );
 };
@@ -212,7 +212,7 @@ const tooltipBehaviorTitle = isHidden ? 'always hidden' : 'normal';
 <Button onClick={() => setIsHidden(current=>!current)}>
   Toggle behavior: {tooltipBehaviorTitle}
 </Button>
-<Tooltip
+<Tooltip 
   position="top"
   content={`Hi there! I'm ${tooltipBehaviorTitle} tooltip.`}
   forceHide={isHidden}
@@ -238,7 +238,7 @@ export const FullyControlledTooltip = () => {
             </Button>
         </GridCell>
         <GridCell>
-          <Tooltip
+          <Tooltip 
             position="top"
             content={`Hi there! I'm ${tooltipBehaviorTitle} tooltip.`}
             forceShow={isVisible}
@@ -249,7 +249,7 @@ export const FullyControlledTooltip = () => {
             </Button>
           </Tooltip>
         </GridCell>
-      </GridRow>
+      </GridRow>     
     </Grid>
   );
 };
@@ -263,7 +263,7 @@ const tooltipBehaviorTitle = isVisible ? 'always visible' : 'always hidden';
 <Button onClick={() => setIsVisible(current=>!current)}>
   Toggle behavior: {tooltipBehaviorTitle}
 </Button>
-<Tooltip
+<Tooltip 
   position="top"
   content={`Hi there! I'm ${tooltipBehaviorTitle} tooltip.`}
   forceShow={isVisible}

diff --git a/src/.eslintrc.json b/src/.eslintrc.json
@@ -1,62 +1,6 @@
 {
   "extends": [
     "@macpaw/eslint-config-react",
-    "@macpaw/eslint-config-typescript",
-    "@macpaw/eslint-config-prettier"
-  ],
-  "rules": {
-    "no-param-reassign": [2, { "props": true, "ignorePropertyModificationsForRegex": ["(R|r)ef"] }],
-    "no-multiple-empty-lines": [2, { "max": 1, "maxBOF": 0, "maxEOF": 0 }],
-    "import/order": [2, {
-      "alphabetize": {
-        "order": "asc",
-        "caseInsensitive": true
-      },
-      "pathGroups": [
-        {
-          "pattern": "react",
-          "group": "builtin",
-          "position": "before"
-        },
-        {
-          "pattern": "react*",
-          "group": "builtin"
-        },
-        {
-          "pattern": "@macpaw/**",
-          "group": "internal",
-          "position": "before"
-        },
-        {
-          "pattern": "*.sass",
-          "group": "index",
-          "position": "after"
-        }
-      ],
-      "pathGroupsExcludedImportTypes": ["react"],
-      "groups": [
-        "builtin",
-        "external",
-        "internal",
-        "parent",
-        "sibling",
-        "index",
-        "object",
-        "type"
-      ]
-    }],
-    "@typescript-eslint/no-explicit-any": 2,
-    "no-magic-numbers": 0,
-    "@typescript-eslint/no-magic-numbers": [
-      2,
-      {
-        "ignore": [0, 1],
-        "ignoreEnums": true,
-        "ignoreNumericLiteralTypes": true,
-        "ignoreTypeIndexes": true
-      }
-    ],
-    "import/no-cycle": 2,
-    "react/react-in-jsx-scope": 0
-  }
+    "@macpaw/eslint-config-typescript"
+  ]
 }
diff --git a/src/Accordion/Accordion.tsx b/src/Accordion/Accordion.tsx
@@ -11,7 +11,9 @@ const Accordion: React.FC<React.PropsWithChildren<Accordion>> = (props) => {
 
   const onToggle = (key: string | null) => {
     setActiveKey(key);
-    if (onChange) onChange(key);
+    if (onChange) {
+      onChange(key);
+    }
   };
 
   return <AccordionContext.Provider value={{ activeKey, onToggle }}>{children}</AccordionContext.Provider>;

diff --git a/src/Accordion/AccordionCollapsible.tsx b/src/Accordion/AccordionCollapsible.tsx
@@ -6,13 +6,11 @@ export interface AccordionCollapsible extends HTMLAttributes<HTMLDivElement> {
   sectionKey: string;
 }
 
-const TIMEOUT = 20;
-
 const AccordionCollapsible: React.FC<React.PropsWithChildren<AccordionCollapsible>> = (props) => {
   const timeout = 300;
   const { sectionKey, children, ...other } = props;
   const [isExpanded, setIsExpanded] = useState(false);
-  const nodeRef = useRef<HTMLDivElement>(null as unknown as HTMLDivElement);
+  const nodeRef = useRef<HTMLDivElement>(null);
   const { activeKey } = useContext(AccordionContext);
 
   useEffect(() => {
@@ -27,40 +25,46 @@ const AccordionCollapsible: React.FC<React.PropsWithChildren<AccordionCollapsibl
     transition: `${timeout}ms cubic-bezier(0.4, 0, 0.2, 1)`,
   };
 
-  const onEnter = () => {
+  function onEnter() {
     if (nodeRef.current) {
       nodeRef.current.style.height = `${0}px`;
       nodeRef.current.style.visibility = 'visible';
     }
-  };
+  }
 
-  const onEntering = () => {
-    if (nodeRef.current) nodeRef.current.style.height = `${nodeRef.current.scrollHeight}px`;
-  };
+  function onEntering() {
+    if (nodeRef.current) {
+      nodeRef.current.style.height = `${nodeRef.current.scrollHeight}px`;
+    }
+  }
 
-  const onEntered = () => {
+  function onEntered() {
     if (nodeRef.current) {
       nodeRef.current.style.height = 'auto';
       nodeRef.current.style.overflow = 'visible';
     }
-  };
+  }
 
-  const onExit = () => {
+  function onExit() {
     if (nodeRef.current) {
       nodeRef.current.style.overflow = 'hidden';
       nodeRef.current.style.height = `${nodeRef.current.clientHeight}px`;
     }
-  };
+  }
 
-  const onExiting = () => {
+  function onExiting() {
     setTimeout(() => {
-      if (nodeRef.current) nodeRef.current.style.height = `${0}px`;
-    }, TIMEOUT);
-  };
+      if (nodeRef.current) {
+        nodeRef.current.style.height = `${0}px`;
+      }
+    }, 20);
+  }
 
-  const onExited = () => {
-    if (nodeRef.current) nodeRef.current.style.visibility = 'hidden';
-  };
+  function onExited() {
+    if (nodeRef.current) {
+      nodeRef.current.style.visibility = 'hidden';
+    }
+  }
 
   return (
     <Transition

diff --git a/src/Accordion/AccordionTrigger.tsx b/src/Accordion/AccordionTrigger.tsx
@@ -11,7 +11,9 @@ const AccordionTrigger: React.FC<React.PropsWithChildren<AccordionTrigger>> = (p
   const { activeKey, onToggle } = useContext(AccordionContext);
   const onTrigger = (event: React.SyntheticEvent) => {
     onToggle(sectionKey === activeKey ? null : sectionKey);
-    if (onClick) onClick(event);
+    if (onClick) {
+      onClick(event);
+    }
   };
 
   return (
@@ -20,7 +22,9 @@ const AccordionTrigger: React.FC<React.PropsWithChildren<AccordionTrigger>> = (p
       tabIndex={0}
       onClick={onTrigger}
       onKeyPress={(event: React.KeyboardEvent) => {
-        if (event.key === 'Enter') onTrigger(event);
+        if (event.which === 13) {
+          onTrigger(event);
+        }
       }}
       {...other}
     >

diff --git a/src/Banner/Banner.tsx b/src/Banner/Banner.tsx
@@ -8,7 +8,14 @@ export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const Banner: FC<React.PropsWithChildren<BannerProps>> = (props) => {
-  const { className, children, type, icon, action, ...other } = props;
+  const {
+    className,
+    children,
+    type,
+    icon,
+    action,
+    ...other
+  } = props;
 
   const classNames = cx('banner', className, {
     '-secondary': type === 'secondary',

diff --git a/src/Breadcrumbs/Breadcrumbs.tsx b/src/Breadcrumbs/Breadcrumbs.tsx
@@ -1,7 +1,8 @@
 import React, { FC, HTMLAttributes } from 'react';
 import cx from 'clsx';
 
-export interface BreadcrumbsProps extends HTMLAttributes<HTMLUListElement> {}
+export interface BreadcrumbsProps extends HTMLAttributes<HTMLUListElement> {
+}
 
 const Breadcrumbs: FC<React.PropsWithChildren<BreadcrumbsProps>> = (props) => {
   const { className, children, ...other } = props;