Added support for node 16, formatting and linting (rjsf-team#2937)

- Regenerated the `package-lock.json` file with node-16 - Also added packages to support linting - Explicity added the latest `prettier` because it in implicitly picking up the wrong one - Added the `cs-check`, `cs-format` and `lint` scripts along with `lint-staged` to the `package.json` file - Ran `eslint --fix` and `cs-format` over the `src` and `test` directories to fix the build - Added a slight adaptation of the `.eslintrc` file from `core` to this package - Added `.npmrc` to enable `legacy-peer-deps` to allow things to work with node 16 - Deleted `.prettierrc` since the override is no longer needed
heath-freenome · Aug 27, 2022 · 5cf731d · 5cf731d
1 parent 28d3b1f
commit 5cf731d
Show file tree

Hide file tree

Showing 27 changed files with 28,875 additions and 13,617 deletions.
diff --git a/packages/chakra-ui/.eslintrc b/packages/chakra-ui/.eslintrc
@@ -0,0 +1,37 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "react/jsx-tag-spacing": [1, {
+      "beforeSelfClosing": "always"
+    }],
+    "curly": [2],
+    "linebreak-style": [2, "unix"],
+    "semi": [2, "always"],
+    "comma-dangle": [0],
+    "@typescript-eslint/no-unused-vars": [2, {
+      "vars": "all",
+      "args": "none",
+      "ignoreRestSiblings": true
+    }],
+    "no-console": [0],
+    "object-curly-spacing": [2, "always"],
+    "keyword-spacing": ["error"],
+    "no-prototype-builtins": "warn",
+    "@typescript-eslint/no-empty-function": "warn",
+    "@typescript-eslint/no-var-requires": "warn"
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  },
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "plugins": [
+    "@typescript-eslint",
+    "jsx-a11y",
+    "react"
+  ]
+}
diff --git a/packages/chakra-ui/.npmrc b/packages/chakra-ui/.npmrc
@@ -0,0 +1,2 @@
+# Use legacy peer deps to allow things to install with node 16
+legacy-peer-deps=true
diff --git a/packages/chakra-ui/.prettierrc b/packages/chakra-ui/.prettierrc
diff --git a/packages/chakra-ui/package-lock.json b/packages/chakra-ui/package-lock.json
diff --git a/packages/chakra-ui/package.json b/packages/chakra-ui/package.json
@@ -11,10 +11,19 @@
   "scripts": {
     "start": "tsdx watch",
     "build": "rimraf dist && tsdx build --format cjs,es,umd",
+    "cs-check": "prettier -l \"{src,test}/**/*.ts?(x)\"",
+    "cs-format": "prettier \"{src,test}/**/*.ts?(x)\" --write",
+    "lint": "eslint src test",
     "test": "tsdx test",
     "test:update": "tsdx test --u",
     "test:watch": "tsdx test --watch"
   },
+  "lint-staged": {
+    "{src,test}/**/*.ts?(x)": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
   "engineStrict": false,
   "engines": {
     "node": ">=12"
@@ -46,7 +55,7 @@
     "@babel/preset-react": "^7.18.6",
     "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react": "^1.7.3",
-    "@emotion/jest": "^11.9.3",
+    "@emotion/jest": "^11.9.4",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@rjsf/core": "^4.2.0",
@@ -56,7 +65,14 @@
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "@types/react-test-renderer": "^17.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
+    "eslint": "^8.19.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-react": "^7.30.1",
     "framer-motion": "^5.5.5",
+    "prettier": "^2.7.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",

diff --git a/packages/chakra-ui/src/AddButton/AddButton.tsx b/packages/chakra-ui/src/AddButton/AddButton.tsx
@@ -5,7 +5,9 @@ import { AddButtonProps } from "@rjsf/core";
 import { Button, ButtonProps } from "@chakra-ui/react";
 import { AddIcon } from "@chakra-ui/icons";
 
-const AddButton: React.ComponentType<AddButtonProps & ButtonProps> = props => (
+const AddButton: React.ComponentType<AddButtonProps & ButtonProps> = (
+  props
+) => (
   <Button leftIcon={<AddIcon />} {...props}>
     Add Item
   </Button>

diff --git a/packages/chakra-ui/src/AltDateWidget/AltDateWidget.tsx b/packages/chakra-ui/src/AltDateWidget/AltDateWidget.tsx
@@ -1,9 +1,15 @@
 import React, { MouseEvent, useEffect, useState } from "react";
-import { DateObject, pad, parseDateString, toDateString, WidgetProps } from "@rjsf/utils";
+import {
+  DateObject,
+  pad,
+  parseDateString,
+  toDateString,
+  WidgetProps,
+} from "@rjsf/utils";
 import { Box, Button } from "@chakra-ui/react";
 
 const rangeOptions = (start: number, stop: number) => {
-  let options = [];
+  const options = [];
   for (let i = start; i <= stop; i++) {
     options.push({ value: i, label: pad(i, 2) });
   }
@@ -16,7 +22,7 @@ interface AltDateStateType extends DateObject {
 
 const readyForChange = (state: AltDateStateType) => {
   return Object.keys(state).every(
-    key => typeof state[key] !== "undefined" && state[key] !== -1
+    (key) => typeof state[key] !== "undefined" && state[key] !== -1
   );
 };
 
@@ -73,7 +79,7 @@ const AltDateWidget = (props: any) => {
   const dateElementProps = () => {
     const { year, month, day, hour, minute, second } = state;
 
-    const data: {type: string, range: any, value?: number}[] = [
+    const data: { type: string; range: any; value?: number }[] = [
       { type: "year", range: options.yearsRange, value: year },
       { type: "month", range: [1, 12], value: month },
       { type: "day", range: [1, 31], value: day },
@@ -91,7 +97,7 @@ const AltDateWidget = (props: any) => {
   };
 
   const renderDateElement = (elemProps: WidgetProps) => {
-    const value = Boolean(elemProps.value) ? elemProps.value : undefined;
+    const value = elemProps.value ? elemProps.value : undefined;
     return (
       <SelectWidget
         {...elemProps}

diff --git a/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -60,20 +60,35 @@ const ArrayFieldDescription = ({
 
 // Used in the two templates
 const DefaultArrayItem = ({
-  index, readonly, disabled, children, hasToolbar, hasRemove, hasMoveUp, hasMoveDown, onReorderClick, onDropIndexClick
+  index,
+  readonly,
+  disabled,
+  children,
+  hasToolbar,
+  hasRemove,
+  hasMoveUp,
+  hasMoveDown,
+  onReorderClick,
+  onDropIndexClick,
 }: any) => {
+  const onRemoveClick = useMemo(
+    () => onDropIndexClick(index),
+    [index, onDropIndexClick]
+  );
 
-  const onRemoveClick = useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
-
-  const onArrowUpClick = useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
+  const onArrowUpClick = useMemo(
+    () => onReorderClick(index, index - 1),
+    [index, onReorderClick]
+  );
 
-  const onArrowDownClick = useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
+  const onArrowDownClick = useMemo(
+    () => onReorderClick(index, index + 1),
+    [index, onReorderClick]
+  );
 
   return (
     <HStack alignItems={"flex-end"} py={1}>
-      <Box w="100%">
-        {children}
-      </Box>
+      <Box w="100%">{children}</Box>
 
       {hasToolbar && (
         <Box>
@@ -91,9 +106,7 @@ const DefaultArrayItem = ({
               <IconButton
                 icon="arrow-down"
                 tabIndex={-1}
-                disabled={
-                  disabled || readonly || !hasMoveDown
-                }
+                disabled={disabled || readonly || !hasMoveDown}
                 onClick={onArrowDownClick}
               />
             )}
@@ -139,10 +152,13 @@ const DefaultFixedArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
         className="row array-item-list"
         key={`array-item-list-${props.idSchema.$id}`}
       >
-        {props.items && props.items.map((p) => {
-          const { key, ...itemProps } = p;
-          return <DefaultArrayItem key={key} {...itemProps}></DefaultArrayItem>;
-        })}
+        {props.items &&
+          props.items.map((p) => {
+            const { key, ...itemProps } = p;
+            return (
+              <DefaultArrayItem key={key} {...itemProps}></DefaultArrayItem>
+            );
+          })}
       </div>
 
       {props.canAdd && (
@@ -155,7 +171,7 @@ const DefaultFixedArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
       )}
     </fieldset>
   );
-}
+};
 
 const DefaultNormalArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
   const uiOptions = getUiOptions(props.uiSchema);
@@ -180,10 +196,13 @@ const DefaultNormalArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
 
       <Grid key={`array-item-list-${props.idSchema.$id}`}>
         <GridItem>
-          {props.items.length > 0 && props.items.map((p) => {
-            const { key, ...itemProps } = p;
-            return <DefaultArrayItem key={key} {...itemProps}></DefaultArrayItem>;
-          })}
+          {props.items.length > 0 &&
+            props.items.map((p) => {
+              const { key, ...itemProps } = p;
+              return (
+                <DefaultArrayItem key={key} {...itemProps}></DefaultArrayItem>
+              );
+            })}
         </GridItem>
         {props.canAdd && (
           <GridItem justifySelf={"flex-end"}>
@@ -199,6 +218,6 @@ const DefaultNormalArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
       </Grid>
     </Box>
   );
-}
+};
 
 export default ArrayFieldTemplate;
diff --git a/packages/chakra-ui/src/ChakraFrameProvider.tsx b/packages/chakra-ui/src/ChakraFrameProvider.tsx
@@ -20,22 +20,24 @@ import CSSReset from "./CssReset";
  * Also see: https://github.com/emotion-js/emotion/issues/760#issuecomment-404353706
  */
 
-let memoizedCreateCacheWithContainer = weakMemoize((container: HTMLElement) => {
-  let newCache = createCache({ container, key: "rjsf" });
-  return newCache;
-});
+const memoizedCreateCacheWithContainer = weakMemoize(
+  (container: HTMLElement) => {
+    const newCache = createCache({ container, key: "rjsf" });
+    return newCache;
+  }
+);
 
-export const __createChakraFrameProvider = (props: any) => ({
-  document,
-}: any) => {
-  return (
-    <div style={{ margin: 2 }}>
-      <CacheProvider value={memoizedCreateCacheWithContainer(document.head)}>
-        <ChakraProvider resetCSS={false}>
-          <CSSReset />
-          {props.children}
-        </ChakraProvider>
-      </CacheProvider>
-    </div>
-  );
-};
+export const __createChakraFrameProvider =
+  (props: any) =>
+  ({ document }: any) => {
+    return (
+      <div style={{ margin: 2 }}>
+        <CacheProvider value={memoizedCreateCacheWithContainer(document.head)}>
+          <ChakraProvider resetCSS={false}>
+            <CSSReset />
+            {props.children}
+          </ChakraProvider>
+        </CacheProvider>
+      </div>
+    );
+  };
diff --git a/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx
@@ -70,7 +70,10 @@ const CheckboxesWidget = (props: WidgetProps) => {
       isInvalid={rawErrors && rawErrors.length > 0}
     >
       <FormLabel htmlFor={id}>{label || schema.title}</FormLabel>
-      <CheckboxGroup onChange={option => onChange(option)} defaultValue={value}>
+      <CheckboxGroup
+        onChange={(option) => onChange(option)}
+        defaultValue={value}
+      >
         <Stack direction={row ? "row" : "column"}>
           {(enumOptions as any).map(
             (option: { value: any; label: any }, index: any) => {

diff --git a/packages/chakra-ui/src/DescriptionField/DescriptionField.tsx b/packages/chakra-ui/src/DescriptionField/DescriptionField.tsx
@@ -5,10 +5,16 @@ import { FieldProps } from "@rjsf/utils";
 import { Text } from "@chakra-ui/react";
 
 const DescriptionField = ({ description, id }: FieldProps) => {
-  if (!description) return null;
+  if (!description) {
+    return null;
+  }
 
   if (typeof description === "string") {
-    return <Text id={id} mt={2} mb={4}>{description}</Text>;
+    return (
+      <Text id={id} mt={2} mb={4}>
+        {description}
+      </Text>
+    );
   }
 
   return <>{description}</>;

diff --git a/packages/chakra-ui/src/ErrorList/ErrorList.tsx b/packages/chakra-ui/src/ErrorList/ErrorList.tsx
@@ -1,12 +1,6 @@
 import React from "react";
 import { ErrorListProps } from "@rjsf/utils";
-import {
-  List,
-  ListIcon,
-  ListItem,
-  Alert,
-  AlertTitle,
-} from "@chakra-ui/react";
+import { List, ListIcon, ListItem, Alert, AlertTitle } from "@chakra-ui/react";
 import { WarningIcon } from "@chakra-ui/icons";
 
 const ErrorList = ({ errors }: ErrorListProps) => {
@@ -17,9 +11,7 @@ const ErrorList = ({ errors }: ErrorListProps) => {
       gap={3}
       status="error"
     >
-      <AlertTitle>
-        Errors
-      </AlertTitle>
+      <AlertTitle>Errors</AlertTitle>
 
       <List>
         {errors.map((error, i) => (

diff --git a/packages/chakra-ui/src/FieldTemplate/WrapIfAdditional.tsx b/packages/chakra-ui/src/FieldTemplate/WrapIfAdditional.tsx
@@ -12,11 +12,18 @@ import {
 
 import IconButton from "../IconButton";
 
-type WrapIfAdditionalProps = { children: React.ReactElement; } &
-  Pick<
-    FieldTemplateProps,
-    'classNames' | 'disabled' | 'id' | 'label' | 'onDropPropertyClick' | 'onKeyChange' | 'readonly' | 'required' | 'schema'
-  >;
+type WrapIfAdditionalProps = { children: React.ReactElement } & Pick<
+  FieldTemplateProps,
+  | "classNames"
+  | "disabled"
+  | "id"
+  | "label"
+  | "onDropPropertyClick"
+  | "onKeyChange"
+  | "readonly"
+  | "required"
+  | "schema"
+>;
 
 const WrapIfAdditional = (props: WrapIfAdditionalProps) => {
   const {

diff --git a/packages/chakra-ui/src/IconButton/IconButton.tsx b/packages/chakra-ui/src/IconButton/IconButton.tsx
@@ -8,7 +8,7 @@ import {
   AddIcon,
   ArrowUpIcon,
   ArrowDownIcon,
-  DeleteIcon
+  DeleteIcon,
 } from "@chakra-ui/icons";
 
 const mappings = {
@@ -31,6 +31,6 @@ const ChakraIconButton = memo((props: IconButtonProps) => {
   return <IconButton {...otherProps} icon={mappings[icon]} aria-label={icon} />;
 });
 
-ChakraIconButton.displayName = 'ChakraIconButton';
+ChakraIconButton.displayName = "ChakraIconButton";
 
 export default ChakraIconButton;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Use legacy peer deps to allow things to install with node 16
		legacy-peer-deps=true