rjsf-team · heath-freenome · Jul 20, 2022 · Jul 15, 2022 · nickgros · Jul 20, 2022
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
Copy link Contributor nickgros Jul 20, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. What packages are conflicting that requires this flag? Copy link Member Author heath-freenome Jul 20, 2022 • edited Loading Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. These are the errors I'm seeing: npm ERR! While resolving: @emotion/[email protected] npm ERR! Found: @types/[email protected] npm ERR! node_modules/@types/jest npm ERR! dev @types/jest@"^25.2.3" from the root project npm ERR! @types/jest@"^25.2.1" from [email protected] npm ERR! node_modules/tsdx npm ERR! dev tsdx@"^0.14.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peerOptional @types/jest@"^26.0.14 \|\| ^27.0.0 \|\| ^28.0.0" from @emotion/[email protected] npm ERR! node_modules/@emotion/jest npm ERR! dev @emotion/jest@"^11.9.4" from the root project npm ERR! npm ERR! Conflicting peer dependency: @types/[email protected] npm ERR! node_modules/@types/jest npm ERR! peerOptional @types/jest@"^26.0.14 \|\| ^27.0.0 \|\| ^28.0.0" from @emotion/[email protected] npm ERR! node_modules/@emotion/jest npm ERR! dev @emotion/jest@"^11.9.4" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. Copy link Member Author heath-freenome Jul 20, 2022 • edited Loading Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. Until we figure out a `tsdx` replacement we are kind of stuck on jest 25 :( @nickgros if you have the time I'd love some help with that ;)