feat: array

packages/carbon/src/AddButton/AddButton.tsx

@@ -1,3 +1,4 @@
+import { Add } from '@carbon/icons-react';
 import { Button } from '@carbon/react';
 import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
 
@@ -8,7 +9,7 @@ export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSche
 }: IconButtonProps<T, S, F>) {
   const { translateString } = registry;
   return (
-    <Button size='sm' kind='tertiary' {...props}>
+    <Button size='sm' kind='ghost' renderIcon={Add} {...props}>
       {translateString(TranslatableString.AddItemButton)}
     </Button>
   );

packages/carbon/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -0,0 +1,76 @@
+import { useMemo } from 'react';
+import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export default function ArrayFieldItemTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTemplateItemType<T, S, F>) {
+  const {
+    children,
+    disabled,
+    hasToolbar,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    uiSchema,
+    registry,
+  } = props;
+  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
+  const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
+
+  const onRemoveClick = useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
+
+  const onArrowUpClick = useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
+
+  const onArrowDownClick = useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'center' }}>
+      <div style={{ flex: 1 }}>{children}</div>
+      {hasToolbar && (
+        <div
+          style={{
+            marginLeft: '1rem',
+            maxWidth: '4rem',
+          }}
+        >
+          {(hasMoveUp || hasMoveDown) && (
+            <MoveUpButton
+              disabled={disabled || readonly || !hasMoveUp}
+              onClick={onArrowUpClick}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          {(hasMoveUp || hasMoveDown) && (
+            <MoveDownButton
+              disabled={disabled || readonly || !hasMoveDown}
+              onClick={onArrowDownClick}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          {hasCopy && (
+            <CopyButton disabled={disabled || readonly} onClick={onCopyClick} uiSchema={uiSchema} registry={registry} />
+          )}
+          {hasRemove && (
+            <RemoveButton
+              disabled={disabled || readonly}
+              onClick={onRemoveClick}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          <span />
+        </div>
+      )}
+    </div>
+  );
+}

packages/carbon/src/ArrayFieldItemTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ArrayFieldItemTemplate';
+export * from './ArrayFieldItemTemplate';

packages/carbon/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -0,0 +1,81 @@
+// @ts-expect-error there's no type definition for Stack
+import { Stack } from '@carbon/react';
+import {
+  getTemplate,
+  getUiOptions,
+  ArrayFieldTemplateItemType,
+  ArrayFieldTemplateProps,
+  StrictRJSFSchema,
+  RJSFSchema,
+  FormContextType,
+} from '@rjsf/utils';
+import { Layer, LayerBackground } from '../components/Layer';
+
+export default function ArrayFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTemplateProps<T, S, F>) {
+  const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } =
+    props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
+    'ArrayFieldDescriptionTemplate',
+    registry,
+    uiOptions
+  );
+  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
+    'ArrayFieldItemTemplate',
+    registry,
+    uiOptions
+  );
+  const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
+    'ArrayFieldTitleTemplate',
+    registry,
+    uiOptions
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  return (
+    <div>
+      <ArrayFieldTitleTemplate
+        idSchema={idSchema}
+        title={uiOptions.title || title}
+        schema={schema}
+        uiSchema={uiSchema}
+        required={required}
+        registry={registry}
+      />
+      <ArrayFieldDescriptionTemplate
+        idSchema={idSchema}
+        description={uiOptions.description || schema.description}
+        schema={schema}
+        uiSchema={uiSchema}
+        registry={registry}
+      />
+      <LayerBackground>
+        <Stack gap={7}>
+          <Layer>
+            <Stack gap={7}>
+              {items.length > 0 &&
+                items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+                  <ArrayFieldItemTemplate key={key} {...itemProps} />
+                ))}
+            </Stack>
+          </Layer>
+          {canAdd && (
+            <AddButton
+              className='array-item-add'
+              onClick={onAddClick}
+              disabled={disabled || readonly}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+        </Stack>
+      </LayerBackground>
+    </div>
+  );
+}

packages/carbon/src/ArrayFieldTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ArrayFieldTemplate';
+export * from './ArrayFieldTemplate';

packages/carbon/src/IconButton/IconButton.tsx

@@ -12,7 +12,7 @@ export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   return (
     <Button
       size='sm'
-      kind='tertiary'
+      kind='ghost'
       hasIconOnly
       iconDescription={translateString(TranslatableString.CopyButton)}
       renderIcon={Copy}
@@ -30,7 +30,7 @@ export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema,
   return (
     <Button
       size='sm'
-      kind='tertiary'
+      kind='ghost'
       hasIconOnly
       iconDescription={translateString(TranslatableString.MoveDownButton)}
       renderIcon={ArrowDown}
@@ -48,7 +48,7 @@ export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   return (
     <Button
       size='sm'
-      kind='tertiary'
+      kind='ghost'
       hasIconOnly
       iconDescription={translateString(TranslatableString.MoveUpButton)}
       renderIcon={ArrowUp}
@@ -66,7 +66,9 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   return (
     <Button
       size='sm'
-      kind='danger--tertiary'
+      kind='danger--ghost'
+      // there's a css bug in carbon design
+      style={{ paddingRight: 0 }}
       hasIconOnly
       iconDescription={translateString(TranslatableString.RemoveButton)}
       {...props}

packages/carbon/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -12,8 +12,8 @@ import {
   titleId,
   TranslatableString,
 } from '@rjsf/utils';
-import { useCarbonOptions, useNestDepth } from '../contexts';
-import { Layer } from '../components/Layer';
+import { useCarbonOptions } from '../contexts';
+import { Layer, LayerBackground } from '../components/Layer';
 import { Add } from '@carbon/icons-react';
 
 export default function ObjectFieldTemplate<
@@ -37,7 +37,6 @@ export default function ObjectFieldTemplate<
   } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const carbonOptions = useCarbonOptions();
-  const nestDepth = useNestDepth();
   const { translateString } = registry;
   const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>('TitleFieldTemplate', registry, uiOptions);
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
@@ -73,18 +72,7 @@ export default function ObjectFieldTemplate<
           />
         </div>
       )}
-      <div
-        style={
-          nestDepth
-            ? {
-                padding: '1rem',
-                backgroundColor: 'var(--cds-layer)',
-              }
-            : {
-                margin: '2.5rem 0',
-              }
-        }
-      >
+      <LayerBackground>
         <Stack gap={carbonOptions.stackGap}>
           <Layer>
             <Stack gap={carbonOptions.stackGap}>{properties.map((item) => item.content)}</Stack>
@@ -103,7 +91,7 @@ export default function ObjectFieldTemplate<
             </Button>
           )}
         </Stack>
-      </div>
+      </LayerBackground>
     </>
   );
 }

packages/carbon/src/Templates/Templates.ts

@@ -9,6 +9,8 @@ import FieldHelpTemplate from '../FieldHelpTemplate';
 import DescriptionField from '../DescriptionField';
 import FieldErrorTemplate from '../FieldErrorTemplate';
 import TitleField from '../TitleField';
+import ArrayFieldTemplate from '../ArrayFieldTemplate';
+import ArrayFieldItemTemplate from '../ArrayFieldItemTemplate';
 
 export function generateTemplates<
   T = any,
@@ -31,6 +33,8 @@ export function generateTemplates<
     FieldTemplate,
     FieldHelpTemplate,
     ObjectFieldTemplate,
+    ArrayFieldTemplate,
+    ArrayFieldItemTemplate,
   };
 }
 

packages/carbon/src/components/Layer.tsx

@@ -11,3 +11,23 @@ export function Layer({ children }: { children: ReactNode }) {
     </CarbonLayer>
   );
 }
+
+export function LayerBackground({ children }: { children: ReactNode }) {
+  const nestDepth = useNestDepth();
+  return (
+    <div
+      style={
+        nestDepth
+          ? {
+              padding: '1rem',
+              backgroundColor: 'var(--cds-layer)',
+            }
+          : {
+              margin: '2.5rem 0',
+            }
+      }
+    >
+      {children}
+    </div>
+  );
+}