ci: run CI on node 18 (#205)

* Update main.yml * Make linting work * more changes
Arize-ai · May 6, 2024 · 78b1458 · 78b1458
1 parent 83848be
commit 78b1458
Show file tree

Hide file tree

Showing 73 changed files with 999 additions and 400 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+dist
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,75 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+    jest: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    impliedStrict: true,
+  },
+  plugins: [
+    '@typescript-eslint',
+    'react',
+    'import',
+    // Not strictly needed but fixes un-used imports via --fix
+    'unused-imports',
+  ],
+  rules: {
+    'import/order': 'error',
+    'no-unused-vars': 'off',
+    'unused-imports/no-unused-imports': 'error',
+    /**
+     * ignore if the variable starts with an underscore
+     */
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
+    ],
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'react/prop-types': 0,
+    'react/display-name': 0,
+    'no-console': 'error',
+    'func-names': ['error', 'always'],
+    strict: ['error', 'global'],
+    'prefer-const': 'off',
+    'react/no-unknown-property': [
+      'error',
+      {
+        ignore: [
+          'css',
+          'vertexColors',
+          'args',
+          'attach',
+          'transparent',
+          'geometry',
+          'visible',
+          'wireframe',
+        ],
+      },
+    ],
+  },
+  settings: {
+    react: {
+      createClass: 'createReactClass', // Regex for Component Factory to use,
+      // default to "createReactClass"
+      pragma: 'React', // Pragma to use, default to "React"
+      version: 'detect', // React version. "detect" automatically picks the version you have installed.
+    },
+  },
+};
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -7,7 +7,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['14.x']
+        node: ['18.x']
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:

diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
+    "lint": "eslint ./src",
+    "lint:fix": "eslint --fix ./src",
     "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
@@ -86,6 +87,9 @@
     "babel-plugin-polished": "^1.1.0",
     "chromatic": "^7.2.0",
     "eslint": "7.17.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-unused-imports": "^3.2.0",
     "husky": "^8.0.1",
     "polished": "^4.2.2",
     "react": "18",

diff --git a/src/alert/Alert.tsx b/src/alert/Alert.tsx
@@ -4,9 +4,9 @@ import theme from '../theme';
 import { classNames } from '../utils';
 import { Text } from '../content';
 import { Icon, CloseOutline } from '../icon';
+import { SeverityLevel } from '../types';
 import { useSeverityStyle } from './useSeverityStyle';
 import { getSeverityIcon } from './getSeverityIcon';
-import { SeverityLevel } from '../types';
 export interface AlertProps {
   variant: SeverityLevel;
   children?: ReactNode;
@@ -55,7 +55,7 @@ export const Alert = ({
   extra,
   ...otherProps
 }: AlertProps) => {
-  let variantStyle = useSeverityStyle(variant);
+  const variantStyle = useSeverityStyle(variant);
 
   if (!icon && showIcon) {
     icon = getSeverityIcon(variant);

diff --git a/src/breadcrumbs/BreadcrumbItem.tsx b/src/breadcrumbs/BreadcrumbItem.tsx
@@ -1,26 +1,26 @@
 import { BreadcrumbItemProps } from '@react-types/breadcrumbs';
-import { ChevronRightOutline, Icon } from '../icon';
-import { classNames, getWrappedElement } from '../utils';
 import { FocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
 import React, { Fragment, useRef } from 'react';
 import { useBreadcrumbItem } from '@react-aria/breadcrumbs';
 import { useHover } from '@react-aria/interactions';
+import { classNames, getWrappedElement } from '../utils';
+import { ChevronRightOutline, Icon } from '../icon';
 
 export function BreadcrumbItem(props: BreadcrumbItemProps) {
-  let { children, isCurrent, isDisabled } = props;
+  const { children, isCurrent, isDisabled } = props;
 
-  let ref = useRef(null);
-  let { itemProps } = useBreadcrumbItem(
+  const ref = useRef(null);
+  const { itemProps } = useBreadcrumbItem(
     {
       ...props,
       elementType: typeof children === 'string' ? 'span' : 'a',
     },
     ref
   );
-  let { hoverProps, isHovered } = useHover(props);
+  const { hoverProps, isHovered } = useHover(props);
 
-  let element = React.cloneElement(getWrappedElement(children), {
+  const element = React.cloneElement(getWrappedElement(children), {
     ...mergeProps(itemProps, hoverProps),
     ref,
     className: classNames('ac-breadcrumbs-item-link', {

diff --git a/src/breadcrumbs/Breadcrumbs.tsx b/src/breadcrumbs/Breadcrumbs.tsx
@@ -1,22 +1,23 @@
-import { ActionButton } from '../button';
-import { BreadcrumbItem } from './BreadcrumbItem';
-import { classNames, useDOMRef } from '../utils';
 import { DOMRef } from '@react-types/shared';
-import { FolderOutline } from '../icon/Icons';
-import { Menu } from '../menu/Menu';
-import { MenuTrigger } from '../menu/MenuTrigger';
 import React, { Key, ReactElement, useCallback, useRef } from 'react';
 import { useBreadcrumbs } from '@react-aria/breadcrumbs';
 import { useLayoutEffect, useValueEffect } from '@react-aria/utils';
-import { useProviderProps } from '../provider';
 import { useResizeObserver } from '@react-aria/utils';
 import { css } from '@emotion/react';
+import { useProviderProps } from '../provider';
+import { MenuTrigger } from '../menu/MenuTrigger';
+import { Menu } from '../menu/Menu';
+import { FolderOutline } from '../icon/Icons';
+import { classNames, useDOMRef } from '../utils';
+import { ActionButton } from '../button';
 import theme from '../theme';
 import { AriaLabelingProps, DOMProps, ItemProps, StyleProps } from '../types';
+import { BreadcrumbItem } from './BreadcrumbItem';
 
 const MIN_VISIBLE_ITEMS = 1;
 const MAX_VISIBLE_ITEMS = 4;
 
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface BreadcrumbsProps {}
 export interface AriaBreadcrumbsProps
   extends BreadcrumbsProps,
@@ -89,7 +90,7 @@ const liCSS = css`
 
 function Breadcrumbs<T>(props: ArizeBreadcrumbsProps<T>, ref: DOMRef) {
   props = useProviderProps(props);
-  let {
+  const {
     size = 'L',
     isMultiline,
     children,
@@ -100,31 +101,31 @@ function Breadcrumbs<T>(props: ArizeBreadcrumbsProps<T>, ref: DOMRef) {
   } = props;
 
   // Not using React.Children.toArray because it mutates the key prop.
-  let childArray: ReactElement[] = [];
+  const childArray: ReactElement[] = [];
   React.Children.forEach(children, child => {
     if (React.isValidElement(child)) {
       childArray.push(child);
     }
   });
 
-  let domRef = useDOMRef(ref);
-  let listRef = useRef<HTMLUListElement>(null);
+  const domRef = useDOMRef(ref);
+  const listRef = useRef<HTMLUListElement>(null);
 
-  let [visibleItems, setVisibleItems] = useValueEffect(childArray.length);
+  const [visibleItems, setVisibleItems] = useValueEffect(childArray.length);
 
-  let { navProps } = useBreadcrumbs(props);
+  const { navProps } = useBreadcrumbs(props);
 
-  let updateOverflow = useCallback(() => {
-    let computeVisibleItems = (visibleItems: number) => {
+  const updateOverflow = useCallback(() => {
+    const computeVisibleItems = (visibleItems: number) => {
       // Refs can be null at runtime.
-      let currListRef: HTMLUListElement | null = listRef.current;
+      const currListRef: HTMLUListElement | null = listRef.current;
       if (!currListRef) {
         return;
       }
 
       const listItems = Array.from(currListRef.children) as HTMLLIElement[];
       const containerWidth = currListRef.offsetWidth;
-      let isShowingMenu = childArray.length > visibleItems;
+      const isShowingMenu = childArray.length > visibleItems;
       let calculatedWidth = 0;
       let newVisibleItems = 0;
       let maxVisibleItems = MAX_VISIBLE_ITEMS;
@@ -150,7 +151,7 @@ function Breadcrumbs<T>(props: ArizeBreadcrumbsProps<T>, ref: DOMRef) {
       } else {
         if (listItems.length > 0) {
           // Ensure the last breadcrumb isn't truncated when we measure it.
-          let last = listItems.pop() as HTMLLIElement;
+          const last = listItems.pop() as HTMLLIElement;
           last.style.overflow = 'visible';
 
           calculatedWidth += last.offsetWidth;
@@ -162,7 +163,7 @@ function Breadcrumbs<T>(props: ArizeBreadcrumbsProps<T>, ref: DOMRef) {
         }
       }
 
-      for (let breadcrumb of listItems.reverse()) {
+      for (const breadcrumb of listItems.reverse()) {
         calculatedWidth += breadcrumb.offsetWidth;
         if (calculatedWidth < containerWidth) {
           newVisibleItems++;
@@ -175,12 +176,13 @@ function Breadcrumbs<T>(props: ArizeBreadcrumbsProps<T>, ref: DOMRef) {
       );
     };
 
+    // eslint-disable-next-line func-names
     setVisibleItems(function*() {
       // Update to show all items.
       yield childArray.length;
 
       // Measure, and update to show the items that fit.
-      let newVisibleItems = computeVisibleItems(childArray.length);
+      const newVisibleItems = computeVisibleItems(childArray.length);
       yield newVisibleItems;
 
       // If the number of items is less than the number of children,
@@ -202,16 +204,16 @@ function Breadcrumbs<T>(props: ArizeBreadcrumbsProps<T>, ref: DOMRef) {
 
   let contents = childArray;
   if (childArray.length > visibleItems) {
-    let selectedItem = childArray[childArray.length - 1];
-    let selectedKey = selectedItem.key ?? childArray.length - 1;
-    let onMenuAction = (key: Key) => {
+    const selectedItem = childArray[childArray.length - 1];
+    const selectedKey = selectedItem.key ?? childArray.length - 1;
+    const onMenuAction = (key: Key) => {
       // Don't fire onAction when clicking on the last item
       if (key !== selectedKey && onAction) {
         onAction(key);
       }
     };
 
-    let menuItem = (
+    const menuItem = (
       <BreadcrumbItem key="menu">
         <MenuTrigger>
           <ActionButton aria-label="…" isDisabled={isDisabled}>
@@ -229,7 +231,7 @@ function Breadcrumbs<T>(props: ArizeBreadcrumbsProps<T>, ref: DOMRef) {
     );
 
     contents = [menuItem];
-    let breadcrumbs = [...childArray];
+    const breadcrumbs = [...childArray];
     let endItems = visibleItems;
     if (showRoot && visibleItems > 1) {
       contents.unshift(breadcrumbs.shift() as ReactElement);
@@ -238,11 +240,11 @@ function Breadcrumbs<T>(props: ArizeBreadcrumbsProps<T>, ref: DOMRef) {
     contents.push(...breadcrumbs.slice(-endItems));
   }
 
-  let lastIndex = contents.length - 1;
-  let breadcrumbItems = contents.map((child, index) => {
-    let isCurrent = index === lastIndex;
-    let key = child.key ?? index;
-    let onPress = () => {
+  const lastIndex = contents.length - 1;
+  const breadcrumbItems = contents.map((child, index) => {
+    const isCurrent = index === lastIndex;
+    const key = child.key ?? index;
+    const onPress = () => {
       if (onAction) {
         onAction(key);
       }
@@ -291,5 +293,5 @@ function Breadcrumbs<T>(props: ArizeBreadcrumbsProps<T>, ref: DOMRef) {
 /**
  * Breadcrumbs show hierarchy and navigational context for a user’s location within an application.
  */
-let _Breadcrumbs = React.forwardRef(Breadcrumbs);
+const _Breadcrumbs = React.forwardRef(Breadcrumbs);
 export { _Breadcrumbs as Breadcrumbs };
diff --git a/src/button/ActionButton.tsx b/src/button/ActionButton.tsx
@@ -1,12 +1,12 @@
 import React, { CSSProperties } from 'react';
-import { classNames } from '../utils/classNames';
 import { mergeProps } from '@react-aria/utils';
 import { useButton } from '@react-aria/button';
 import { useHover } from '@react-aria/interactions';
+import { css } from '@emotion/react';
+import { classNames } from '../utils/classNames';
 import { FocusableRef, PressEvents } from '../types';
 import { useFocusableRef } from '../utils/useDOMRef';
 import { BaseButtonProps } from '../types/button';
-import { css } from '@emotion/react';
 import { theme } from '../theme';
 
 interface ActionButtonProps extends BaseButtonProps, PressEvents {
@@ -28,7 +28,7 @@ function ActionButton(
   props: ActionButtonProps,
   ref: FocusableRef<HTMLButtonElement>
 ) {
-  let domRef = useFocusableRef(ref);
+  const domRef = useFocusableRef(ref);
   const { isDisabled, children, style, isQuiet = false, ...otherProps } = props;
   const { buttonProps, isPressed } = useButton(props, domRef);
   const { hoverProps, isHovered } = useHover({ isDisabled });
@@ -72,5 +72,5 @@ const quietButtonCSS = css`
  * ActionButtons allow users to perform an action.
  * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.
  */
-let _ActionButton = React.forwardRef(ActionButton);
+const _ActionButton = React.forwardRef(ActionButton);
 export { _ActionButton as ActionButton };
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
+import { mergeProps } from '@react-aria/utils';
+import { useButton } from '@react-aria/button';
+import { useHover } from '@react-aria/interactions';
 import Spinner from '../Spinner';
 import { Text } from '../content';
 import { FocusableRef } from '../types';
 import { useFocusableRef } from '../utils/useDOMRef';
 import { classNames } from '../utils/classNames';
-import { mergeProps } from '@react-aria/utils';
-import { useButton } from '@react-aria/button';
-import { useHover } from '@react-aria/interactions';
 import { ButtonProps } from '../types';
 import { buttonCSS } from './styles';
 
 const Button = (props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) => {
-  let domRef = useFocusableRef(ref);
+  const domRef = useFocusableRef(ref);
   const {
     disabled,
     children,
@@ -53,5 +53,5 @@ const Button = (props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) => {
   );
 };
 
-let _Button = React.forwardRef(Button);
+const _Button = React.forwardRef(Button);
 export { _Button as Button, ButtonProps };