Review Mantine theme for the rjsf-v6

 - Review all templates and widgets
 - Add FileWidget
 - Add GridTemplate

Author: zfarhad

packages/mantine/src/templates/ArrayFieldItemTemplate.tsx

@@ -1,41 +1,46 @@
-import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import {
+  ArrayFieldItemTemplateType,
+  FormContextType,
+  getTemplate,
+  getUiOptions,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 import { Box, Flex, Group } from '@mantine/core';
 
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *
- * @param props - The `ArrayFieldTemplateItemType` props for the component
+ * @param props - The `ArrayFieldItemTemplateType` props for the component
  */
 export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
-  const {
-    disabled,
-    className,
-    hasCopy,
-    hasMoveDown,
-    hasMoveUp,
-    hasRemove,
-    hasToolbar,
-    index,
-    onCopyIndexClick,
-    onDropIndexClick,
-    onReorderClick,
-    readonly,
-    uiSchema,
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
+  const { buttonsProps, className, hasToolbar, index, uiSchema, registry, children } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
+    'ArrayFieldItemButtonsTemplate',
     registry,
-    children,
-  } = props;
-  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
+    uiOptions
+  );
 
   return (
     <Box key={`array-item-${index}`} className={className || 'array-item'} mb='xs'>
       <Flex gap='xs' align='end' justify='center'>
         <Box w='100%'>{children}</Box>
         {hasToolbar && (
-          <Group wrap='nowrap' gap={2}>
-            {(hasMoveUp || hasMoveDown) && (
+          <Group wrap='nowrap' gap={2} mb={7}>
+            <ArrayFieldItemButtonsTemplate {...buttonsProps} />
+          </Group>
+        )}
+      </Flex>
+    </Box>
+  );
+}
+
+/*
+{(hasMoveUp || hasMoveDown) && (
               <MoveUpButton
                 iconType='sm'
                 className='array-item-move-up'
@@ -75,9 +80,4 @@ export default function ArrayFieldItemTemplate<
                 registry={registry}
               />
             )}
-          </Group>
-        )}
-      </Flex>
-    </Box>
-  );
-}
+ */

packages/mantine/src/templates/ArrayFieldTemplate.tsx

@@ -2,7 +2,7 @@ import {
   getTemplate,
   getUiOptions,
   ArrayFieldTemplateProps,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -11,7 +11,7 @@ import { Fieldset, Box, Group } from '@mantine/core';
 
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
- * @param props - The `ArrayFieldTemplateItemType` props for the component
+ * @param props - The `ArrayFieldItemTemplateType` props for the component
  */
 export default function ArrayFieldTemplate<
   T = any,
@@ -79,7 +79,7 @@ export default function ArrayFieldTemplate<
 
       <Box 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} />
           ))}
       </Box>
@@ -92,6 +92,7 @@ export default function ArrayFieldTemplate<
             onClick={onAddClick}
             uiSchema={uiSchema}
             registry={registry}
+            iconType='md'
           />
         </Group>
       )}

packages/mantine/src/templates/BaseInputTemplate.tsx

@@ -35,6 +35,7 @@ export default function BaseInputTemplate<
     onFocus,
     options,
     rawErrors,
+    children,
   } = props;
 
   const inputProps = getInputProps<T, S, F>(schema, type, options, false);
@@ -97,6 +98,7 @@ export default function BaseInputTemplate<
   return (
     <>
       {input}
+      {children}
       {Array.isArray(schema.examples) && (
         <datalist id={examplesId<T>(id)}>
           {(schema.examples as string[])

packages/mantine/src/templates/ButtonTemplates/IconButton.tsx

@@ -12,7 +12,7 @@ export type MantineIconButtonProps<
 export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: MantineIconButtonProps<T, S, F>
 ) {
-  const { icon, iconType, color, onClick, uiSchema, registry, ...otherProps } = props;
+  const { icon, iconType = 'sm', color, onClick, uiSchema, registry, ...otherProps } = props;
   return (
     <ActionIcon
       size={iconType as ActionIconProps['size']}

packages/mantine/src/templates/GridTemplate.tsx

@@ -0,0 +1,19 @@
+import { GridTemplateProps } from '@rjsf/utils';
+import { Grid } from '@mantine/core';
+
+/** Renders a `GridTemplate` for mantine, which is expecting the column sizing information coming in via the
+ * extra props provided by the caller, which are spread directly on the `Grid`/`Grid.Col`.
+ *
+ * @param props - The GridTemplateProps, including the extra props containing the chakra-ui grid positioning details
+ */
+export default function GridTemplate(props: GridTemplateProps) {
+  const { children, column, ...rest } = props;
+  if (column) {
+    return <Grid.Col {...rest}>{children}</Grid.Col>;
+  }
+  return (
+    <Grid grow {...rest}>
+      {children}
+    </Grid>
+  );
+}

packages/mantine/src/templates/index.ts

@@ -10,6 +10,7 @@ import ButtonTemplates from './ButtonTemplates';
 import FieldErrorTemplate from './FieldErrorTemplate';
 import FieldTemplate from './FieldTemplate';
 import FieldHelpTemplate from './FieldHelpTemplate';
+import GridTemplate from './GridTemplate';
 import ObjectFieldTemplate from './ObjectFieldTemplate';
 import TitleField from './TitleField';
 import WrapIfAdditionalTemplate from './WrapIfAdditionalTemplate';
@@ -30,6 +31,7 @@ export function generateTemplates<
     FieldErrorTemplate,
     FieldTemplate,
     FieldHelpTemplate,
+    GridTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,

packages/mantine/src/widgets/CheckboxWidget.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback } from 'react';
 import {
+  descriptionId,
+  getTemplate,
   StrictRJSFSchema,
   RJSFSchema,
   FormContextType,
@@ -25,15 +27,24 @@ export default function CheckboxWidget<
     autofocus,
     label,
     hideLabel,
+    schema,
     rawErrors,
     options,
     onChange,
     onBlur,
     onFocus,
+    registry,
+    uiSchema,
   } = props;
 
   const themeProps = cleanupOptions(options);
 
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    options
+  );
+
   const handleCheckboxChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       if (!disabled && !readonly && onChange) {
@@ -61,21 +72,33 @@ export default function CheckboxWidget<
     [onFocus, id]
   );
 
+  const description = options.description || schema.description;
   return (
-    <Checkbox
-      id={id}
-      name={name}
-      label={labelValue(label || undefined, hideLabel, false)}
-      disabled={disabled || readonly}
-      required={required}
-      autoFocus={autofocus}
-      checked={typeof value === 'undefined' ? false : value === 'true' || value}
-      onChange={handleCheckboxChange}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-      error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
-      aria-describedby={ariaDescribedByIds<T>(id)}
-      {...themeProps}
-    />
+    <>
+      {!hideLabel && !!description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(id)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <Checkbox
+        id={id}
+        name={name}
+        label={labelValue(label || undefined, hideLabel, false)}
+        disabled={disabled || readonly}
+        required={required}
+        autoFocus={autofocus}
+        checked={typeof value === 'undefined' ? false : value === 'true' || value}
+        onChange={handleCheckboxChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
+        aria-describedby={ariaDescribedByIds<T>(id)}
+        {...themeProps}
+      />
+    </>
   );
 }