Added support for node 16, formatting and linting (bootstrap-4) (#2936)

* Added support for node 16, formatting and linting - Regenerated the `package-lock.json` file with node-16 - Also added packages to support linting - 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 * - Fixed build
rjsf-team · Jul 20, 2022 · 04d9353 · 04d9353
1 parent be7296f
commit 04d9353
Show file tree

Hide file tree

Showing 55 changed files with 150,478 additions and 10,335 deletions.
diff --git a/packages/bootstrap-4/.eslintrc b/packages/bootstrap-4/.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/bootstrap-4/package-lock.json b/packages/bootstrap-4/package-lock.json
diff --git a/packages/bootstrap-4/package.json b/packages/bootstrap-4/package.json
@@ -15,9 +15,18 @@
   "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"
   },
+  "lint-staged": {
+    "{src,test}/**/*.ts?(x)": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
   "peerDependencies": {
     "@rjsf/core": "^4.0.0",
     "@rjsf/utils": "^4.2.0",
@@ -41,6 +50,12 @@
     "@types/react": "^16.14.0",
     "@types/react-dom": "^16.9.16",
     "@types/react-test-renderer": "^16.9.5",
+    "@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",
     "react": "^16.14.0",
     "react-bootstrap": "^1.0.1",
     "react-dom": "^16.14.0",

diff --git a/packages/bootstrap-4/src/AddButton/AddButton.tsx b/packages/bootstrap-4/src/AddButton/AddButton.tsx
@@ -5,8 +5,12 @@ import Button from "react-bootstrap/Button";
 import { BsPlus } from "react-icons/bs";
 
 const AddButton: React.ComponentType<AddButtonProps> = props => (
-  <Button {...props} style={{width: "100%"}} className={`ml-1 ${props.className}`}>
-    <BsPlus/>
+  <Button
+    {...props}
+    style={{ width: "100%" }}
+    className={`ml-1 ${props.className}`}
+  >
+    <BsPlus />
   </Button>
 );
 

diff --git a/packages/bootstrap-4/src/AddButton/index.ts b/packages/bootstrap-4/src/AddButton/index.ts
@@ -1,2 +1,2 @@
-export { default } from './AddButton';
-export * from './AddButton';
+export { default } from "./AddButton";
+export * from "./AddButton";
diff --git a/packages/bootstrap-4/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/bootstrap-4/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -69,7 +69,9 @@ const DefaultArrayItem = (props: any) => {
   return (
     <div key={props.key}>
       <Row className="mb-2  d-flex align-items-center">
-        <Col xs="9" lg="9">{props.children}</Col>
+        <Col xs="9" lg="9">
+          {props.children}
+        </Col>
 
         <Col xs="3" lg="3" className="py-4">
           {props.hasToolbar && (
@@ -137,14 +139,16 @@ const DefaultFixedArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
       {(uiOptions.description || props.schema.description) && (
         <div
           className="field-description"
-          key={`field-description-${props.idSchema.$id}`}>
+          key={`field-description-${props.idSchema.$id}`}
+        >
           {uiOptions.description || props.schema.description}
         </div>
       )}
 
       <div
         className="row array-item-list"
-        key={`array-item-list-${props.idSchema.$id}`}>
+        key={`array-item-list-${props.idSchema.$id}`}
+      >
         {props.items && props.items.map(DefaultArrayItem)}
       </div>
 
@@ -178,13 +182,15 @@ const DefaultNormalArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
               key={`array-field-description-${props.idSchema.$id}`}
               DescriptionField={props.DescriptionField}
               idSchema={props.idSchema}
-              description={
-                uiOptions.description || props.schema.description
-              }
+              description={uiOptions.description || props.schema.description}
             />
           )}
 
-          <Container fluid key={`array-item-list-${props.idSchema.$id}`} className="p-0 m-0">
+          <Container
+            fluid
+            key={`array-item-list-${props.idSchema.$id}`}
+            className="p-0 m-0"
+          >
             {props.items && props.items.map(p => DefaultArrayItem(p))}
 
             {props.canAdd && (

diff --git a/packages/bootstrap-4/src/ArrayFieldTemplate/index.ts b/packages/bootstrap-4/src/ArrayFieldTemplate/index.ts
@@ -1,2 +1,2 @@
-export { default } from './ArrayFieldTemplate';
-export * from './ArrayFieldTemplate';
+export { default } from "./ArrayFieldTemplate";
+export * from "./ArrayFieldTemplate";
diff --git a/packages/bootstrap-4/src/CheckboxWidget/CheckboxWidget.tsx b/packages/bootstrap-4/src/CheckboxWidget/CheckboxWidget.tsx
@@ -30,20 +30,22 @@ const CheckboxWidget = (props: WidgetProps) => {
 
   const desc = label || schema.description;
   return (
-    <Form.Group  className={`checkbox ${disabled || readonly ? "disabled" : ""}`}>
-        <Form.Check
-          id={id}
-          label={desc}
-          checked={typeof value === "undefined" ? false : value}
-          required={required}
-          disabled={disabled || readonly}
-          autoFocus={autofocus}
-          onChange={_onChange}
-          type="checkbox"
-          onBlur={_onBlur}
-          onFocus={_onFocus}
-        />
-        </Form.Group>
+    <Form.Group
+      className={`checkbox ${disabled || readonly ? "disabled" : ""}`}
+    >
+      <Form.Check
+        id={id}
+        label={desc}
+        checked={typeof value === "undefined" ? false : value}
+        required={required}
+        disabled={disabled || readonly}
+        autoFocus={autofocus}
+        onChange={_onChange}
+        type="checkbox"
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+      />
+    </Form.Group>
   );
 };
 

diff --git a/packages/bootstrap-4/src/CheckboxWidget/index.ts b/packages/bootstrap-4/src/CheckboxWidget/index.ts
@@ -1,2 +1,2 @@
-export { default } from './CheckboxWidget';
-export * from './CheckboxWidget';
+export { default } from "./CheckboxWidget";
+export * from "./CheckboxWidget";
diff --git a/packages/bootstrap-4/src/CheckboxesWidget/index.ts b/packages/bootstrap-4/src/CheckboxesWidget/index.ts
@@ -1,2 +1,2 @@
-export { default } from './CheckboxesWidget';
-export * from './CheckboxesWidget';
+export { default } from "./CheckboxesWidget";
+export * from "./CheckboxesWidget";
diff --git a/packages/bootstrap-4/src/ColorWidget/ColorWidget.tsx b/packages/bootstrap-4/src/ColorWidget/ColorWidget.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { WidgetProps } from '@rjsf/utils';
+import { WidgetProps } from "@rjsf/utils";
 
 const ColorWidget = (props: WidgetProps) => {
   const { registry } = props;

diff --git a/packages/bootstrap-4/src/DateWidget/DateWidget.tsx b/packages/bootstrap-4/src/DateWidget/DateWidget.tsx
@@ -1,15 +1,10 @@
 import React from "react";
-import { WidgetProps } from '@rjsf/utils';
+import { WidgetProps } from "@rjsf/utils";
 
 const DateWidget = (props: WidgetProps) => {
   const { registry } = props;
   const { TextWidget } = registry.widgets;
-  return (
-    <TextWidget
-      {...props}
-      type="date"
-    />
-  );
+  return <TextWidget {...props} type="date" />;
 };
 
 export default DateWidget;
diff --git a/packages/bootstrap-4/src/DescriptionField/DescriptionField.tsx b/packages/bootstrap-4/src/DescriptionField/DescriptionField.tsx
@@ -7,7 +7,11 @@ export interface DescriptionFieldProps extends Partial<FieldProps> {
 
 const DescriptionField = ({ description }: Partial<FieldProps>) => {
   if (description) {
-    return <div><div className="mb-3">{description}</div></div>;
+    return (
+      <div>
+        <div className="mb-3">{description}</div>
+      </div>
+    );
   }
 
   return null;

diff --git a/packages/bootstrap-4/src/DescriptionField/index.ts b/packages/bootstrap-4/src/DescriptionField/index.ts
@@ -1,2 +1,2 @@
-export { default } from './DescriptionField';
-export * from './DescriptionField';
+export { default } from "./DescriptionField";
+export * from "./DescriptionField";
diff --git a/packages/bootstrap-4/src/EmailWidget/EmailWidget.tsx b/packages/bootstrap-4/src/EmailWidget/EmailWidget.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { WidgetProps } from '@rjsf/utils';
+import { WidgetProps } from "@rjsf/utils";
 
 const EmailWidget = (props: WidgetProps) => {
   const { registry } = props;

diff --git a/packages/bootstrap-4/src/EmailWidget/index.ts b/packages/bootstrap-4/src/EmailWidget/index.ts
@@ -1,2 +1,2 @@
-export { default } from './EmailWidget';
-export * from './EmailWidget';
+export { default } from "./EmailWidget";
+export * from "./EmailWidget";
diff --git a/packages/bootstrap-4/src/ErrorList/ErrorList.tsx b/packages/bootstrap-4/src/ErrorList/ErrorList.tsx
@@ -9,7 +9,7 @@ const ErrorList = ({ errors }: ErrorListProps) => (
   <Card border="danger" className="mb-4">
     <Card.Header className="alert-danger">Errors</Card.Header>
     <Card.Body className="p-0">
-      <ListGroup >
+      <ListGroup>
         {errors.map((error, i: number) => {
           return (
             <ListGroup.Item key={i} className="border-0">

diff --git a/packages/bootstrap-4/src/ErrorList/index.ts b/packages/bootstrap-4/src/ErrorList/index.ts
@@ -1,2 +1,2 @@
-export { default } from './ErrorList';
-export * from './ErrorList';
+export { default } from "./ErrorList";
+export * from "./ErrorList";
diff --git a/packages/bootstrap-4/src/FieldTemplate/FieldTemplate.tsx b/packages/bootstrap-4/src/FieldTemplate/FieldTemplate.tsx
@@ -33,22 +33,27 @@ const FieldTemplate = ({
       onKeyChange={onKeyChange}
       readonly={readonly}
       required={required}
-      schema={schema}>
+      schema={schema}
+    >
       <Form.Group>
         {children}
         {displayLabel && rawDescription && (
-          <Form.Text className={rawErrors.length > 0 ? "text-danger" : "text-muted"}>
+          <Form.Text
+            className={rawErrors.length > 0 ? "text-danger" : "text-muted"}
+          >
             {rawDescription}
           </Form.Text>
         )}
         {rawErrors.length > 0 && (
           <ListGroup as="ul">
             {rawErrors.map((error: string) => {
               return (
-                <ListGroup.Item as="li" key={error} className="border-0 m-0 p-0">
-                  <small className="m-0 text-danger">
-                    {error}
-                  </small>
+                <ListGroup.Item
+                  as="li"
+                  key={error}
+                  className="border-0 m-0 p-0"
+                >
+                  <small className="m-0 text-danger">{error}</small>
                 </ListGroup.Item>
               );
             })}
@@ -57,7 +62,8 @@ const FieldTemplate = ({
         {rawHelp && (
           <Form.Text
             className={rawErrors.length > 0 ? "text-danger" : "text-muted"}
-            id={id}>
+            id={id}
+          >
             {rawHelp}
           </Form.Text>
         )}

diff --git a/packages/bootstrap-4/src/FieldTemplate/WrapIfAdditional.tsx b/packages/bootstrap-4/src/FieldTemplate/WrapIfAdditional.tsx
@@ -8,11 +8,18 @@ import Form from "react-bootstrap/Form";
 
 import IconButton from "../IconButton/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 = ({
   children,
@@ -51,9 +58,7 @@ const WrapIfAdditional = ({
           />
         </Form.Group>
       </Col>
-      <Col xs={5}>
-        {children}
-      </Col>
+      <Col xs={5}>{children}</Col>
       <Col xs={2} className="py-4">
         <IconButton
           block={true}

diff --git a/packages/bootstrap-4/src/FieldTemplate/index.ts b/packages/bootstrap-4/src/FieldTemplate/index.ts
@@ -1,2 +1,2 @@
-export { default } from './FieldTemplate';
-export * from './FieldTemplate';
+export { default } from "./FieldTemplate";
+export * from "./FieldTemplate";
diff --git a/packages/bootstrap-4/src/Fields/Fields.ts b/packages/bootstrap-4/src/Fields/Fields.ts
@@ -1,5 +1,5 @@
-import DescriptionField from '../DescriptionField/DescriptionField';
-import TitleField from '../TitleField/TitleField';
+import DescriptionField from "../DescriptionField/DescriptionField";
+import TitleField from "../TitleField/TitleField";
 
 export default {
   DescriptionField,

diff --git a/packages/bootstrap-4/src/Fields/index.ts b/packages/bootstrap-4/src/Fields/index.ts
@@ -1,2 +1,2 @@
-export { default } from './Fields';
-export * from './Fields';
+export { default } from "./Fields";
+export * from "./Fields";
diff --git a/packages/bootstrap-4/src/FileWidget/FileWidget.tsx b/packages/bootstrap-4/src/FileWidget/FileWidget.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { WidgetProps } from '@rjsf/utils';
+import { WidgetProps } from "@rjsf/utils";
 
 const FileWidget = (props: WidgetProps) => {
   const { registry } = props;
   const { TextWidget } = registry.widgets;
-  return <TextWidget {...props} type="file"/>;
+  return <TextWidget {...props} type="file" />;
 };
 
 export default FileWidget;
diff --git a/packages/bootstrap-4/src/FileWidget/index.ts b/packages/bootstrap-4/src/FileWidget/index.ts
@@ -1,2 +1,2 @@
-export { default } from './FileWidget';
-export * from './FileWidget';
+export { default } from "./FileWidget";
+export * from "./FileWidget";
diff --git a/packages/bootstrap-4/src/IconButton/IconButton.tsx b/packages/bootstrap-4/src/IconButton/IconButton.tsx
@@ -13,7 +13,7 @@ const mappings: any = {
 
 type IconButtonProps = ButtonProps & {
   icon: string;
-  variant?: ButtonProps['variant'];
+  variant?: ButtonProps["variant"];
   className?: string;
   tabIndex?: number;
   style?: any;

diff --git a/packages/bootstrap-4/src/IconButton/index.ts b/packages/bootstrap-4/src/IconButton/index.ts
@@ -1,2 +1,2 @@
-export { default } from './IconButton';
-export * from './IconButton';
+export { default } from "./IconButton";
+export * from "./IconButton";