Cleanup in preparation for new LayoutGridField (#4501)

There was some cleanup and package.json changes in support of the upcoming `LayoutGridField`
- Updated the `ArrayField[Item]Template` in the themes to switch to using the non-deprecated `ArrayFieldItemTemplateType` instead of `ArrayFieldTemplateItemType`
- Updated `@rjsf/utils` to add `nanoid` to the `package.json` as it will be used soon
  - Updated the `jest.config.js` to add the `transformIgnorePatterns`
- Updated `@rjsf/docs` to remove the `clsx` library and it's usage since it was unnecessary

Author: heath-freenome

package-lock.json

@@ -1,6 +1,6 @@
 import { Button, Col, Row } from 'antd';
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   getUiOptions,
   getTemplate,
@@ -24,7 +24,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
   const { children, buttonsProps, hasToolbar, index, registry, uiSchema } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(

packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx

@@ -2,7 +2,7 @@ import {
   getTemplate,
   getUiOptions,
   ArrayFieldTemplateProps,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   GenericObjectType,
   RJSFSchema,
@@ -100,7 +100,7 @@ export default function ArrayFieldTemplate<
         )}
         <Col className='row array-item-list' span={24}>
           {items &&
-            items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+            items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
               <ArrayFieldItemTemplate key={key} {...itemProps} />
             ))}
         </Col>

packages/antd/src/templates/ArrayFieldTemplate/index.tsx

@@ -1,6 +1,6 @@
 import { Box, ButtonGroup, HStack } from '@chakra-ui/react';
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -12,7 +12,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
   const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(

packages/chakra-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -2,7 +2,7 @@ import { Box, Grid, GridItem } from '@chakra-ui/react';
 import {
   getTemplate,
   getUiOptions,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   ArrayFieldTemplateProps,
   StrictRJSFSchema,
   RJSFSchema,
@@ -57,7 +57,7 @@ export default function ArrayFieldTemplate<
       <Grid key={`array-item-list-${idSchema.$id}`}>
         <GridItem>
           {items.length > 0 &&
-            items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+            items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
               <ArrayFieldItemTemplate key={key} {...itemProps} />
             ))}
         </GridItem>

packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -16,7 +16,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
   const { children, className, buttonsProps, hasToolbar, registry, uiSchema } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(

packages/core/src/components/templates/ArrayFieldItemTemplate.tsx

@@ -2,7 +2,7 @@ import {
   getTemplate,
   getUiOptions,
   ArrayFieldTemplateProps,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -71,7 +71,7 @@ export default function ArrayFieldTemplate<
       />
       <div className='row array-item-list'>
         {items &&
-          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+          items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
             <ArrayFieldItemTemplate key={key} {...itemProps} />
           ))}
       </div>

packages/core/src/components/templates/ArrayFieldTemplate.tsx

@@ -30,7 +30,6 @@
     "@docusaurus/preset-classic": "^2.4.3",
     "@mdx-js/react": "^1.6.22",
     "ajv": "^8.12.0",
-    "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

packages/docs/package.json

@@ -1,5 +1,4 @@
 import React from 'react';
-import clsx from 'clsx';
 import styles from './styles.module.css';
 
 type FeatureItem = {
@@ -43,7 +42,7 @@ const FeatureList: FeatureItem[] = [
 
 function Feature({ title, Svg, description }: FeatureItem) {
   return (
-    <div className={clsx('col col--4')}>
+    <div className='col col--4'>
       <div className='text--center'>
         <Svg className={styles.featureSvg} role='img' />
       </div>

packages/docs/src/components/HomepageFeatures/index.tsx

@@ -1,5 +1,5 @@
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -25,7 +25,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
   const classes = useStyles();
   const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);

packages/fluentui-rc/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -4,7 +4,7 @@ import {
   getTemplate,
   getUiOptions,
   ArrayFieldTemplateProps,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -68,7 +68,7 @@ export default function ArrayFieldTemplate<
       />
       <Flex column key={`array-item-list-${idSchema.$id}`} className={classes.arrayItemList}>
         {items &&
-          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+          items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
             <ArrayFieldItemTemplate key={key} {...itemProps} />
           ))}
         {canAdd && (

packages/fluentui-rc/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
 import Grid2 from '@mui/material/Grid2';
 import Paper from '@mui/material/Paper';
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   getUiOptions,
   getTemplate,
@@ -19,7 +19,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
   const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(

packages/mui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -5,7 +5,7 @@ import {
   getTemplate,
   getUiOptions,
   ArrayFieldTemplateProps,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -62,7 +62,7 @@ export default function ArrayFieldTemplate<
           registry={registry}
         />
         {items &&
-          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+          items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
             <ArrayFieldItemTemplate key={key} {...itemProps} />
           ))}
         {canAdd && (

packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -14,7 +14,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
   const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(

packages/react-bootstrap/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -2,7 +2,7 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Container from 'react-bootstrap/Container';
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   ArrayFieldTemplateProps,
   buttonId,
   FormContextType,
@@ -60,7 +60,7 @@ export default function ArrayFieldTemplate<
           />
           <Container fluid key={`array-item-list-${idSchema.$id}`} className='p-0 m-0'>
             {items &&
-              items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+              items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
                 <ArrayFieldItemTemplate key={key} {...itemProps} />
               ))}
             {canAdd && (

packages/react-bootstrap/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -1,5 +1,5 @@
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   GenericObjectType,
   RJSFSchema,
@@ -24,7 +24,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
   const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(

packages/semantic-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -3,7 +3,7 @@ import {
   getUiOptions,
   isFixedItems,
   ArrayFieldTemplateProps,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -86,7 +86,7 @@ export default function ArrayFieldTemplate<
       <div key={`array-item-list-${idSchema.$id}`}>
         <div className='row array-item-list'>
           {items &&
-            items.map(({ key, uiSchema: itemUiSchema = {}, ...props }: ArrayFieldTemplateItemType<T, S, F>) => {
+            items.map(({ key, uiSchema: itemUiSchema = {}, ...props }: ArrayFieldItemTemplateType<T, S, F>) => {
               // Merge in the semantic props from the ArrayFieldTemplate into each of the items
               const mergedUiSchema = {
                 ...itemUiSchema,

packages/semantic-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -5,6 +5,7 @@ module.exports = {
     browsers: ['chrome', 'firefox', 'safari'],
   },
   testMatch: ['**/test/**/*.test.ts?(x)'],
+  transformIgnorePatterns: [`/node_modules/(?!nanoid)`],
   coverageDirectory: '<rootDir>/coverage/',
   collectCoverage: true,
   coveragePathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/test'],

packages/utils/jest.config.js

@@ -40,6 +40,7 @@
     "jsonpointer": "^5.0.1",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
+    "nanoid": "^3.3.7",
     "react-is": "^18.2.0"
   },
   "devDependencies": {