introduce TextArrayField and use it in ShowGuesser

Author: slax57

packages/ra-ui-materialui/src/detail/ShowGuesser.spec.tsx

@@ -11,7 +11,7 @@ describe('<ShowGuesser />', () => {
         await screen.findByText('john doe');
         expect(logSpy).toHaveBeenCalledWith(`Guessed Show:
 
-import { ArrayField, BooleanField, DataTable, DateField, EmailField, NumberField, ReferenceArrayField, ReferenceField, RichTextField, Show, SimpleShowLayout, TextField, UrlField } from 'react-admin';
+import { ArrayField, BooleanField, DataTable, DateField, EmailField, NumberField, ReferenceArrayField, ReferenceField, RichTextField, Show, SimpleShowLayout, TextArrayField, TextField, UrlField } from 'react-admin';
 
 export const BookShow = () => (
     <Show>
@@ -39,6 +39,7 @@ export const BookShow = () => (
             <UrlField source="url" />
             <EmailField source="email" />
             <BooleanField source="isAlreadyPublished" />
+            <TextArrayField source="genres" />
         </SimpleShowLayout>
     </Show>
 );`);

packages/ra-ui-materialui/src/detail/ShowGuesser.stories.tsx

@@ -26,6 +26,12 @@ published serially, then in its entirety in 1869.</p>
             url: 'https://www.myshop.com/tags/top-seller',
             email: '[email protected]',
             isAlreadyPublished: true,
+            genres: [
+                'Fiction',
+                'Historical Fiction',
+                'Classic Literature',
+                'Russian Literature',
+            ],
         },
     ],
     tags: [

packages/ra-ui-materialui/src/detail/showFieldTypes.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import type { InferredElement, InferredTypeMap, InputProps } from 'ra-core';
+import {
+    type InferredElement,
+    type InferredTypeMap,
+    type InputProps,
+} from 'ra-core';
 import {
     ArrayField,
     BooleanField,
@@ -15,6 +19,7 @@ import {
     TextField,
     UrlField,
     ChipField,
+    TextArrayField,
 } from '../field';
 import { SimpleShowLayout, SimpleShowLayoutProps } from './SimpleShowLayout';
 import { DataTable, SingleFieldList } from '../list';
@@ -55,6 +60,11 @@ ${children.map(child => `            ${child.getRepresentation()}`).join('\n')}
                 </DataTable>
             </ArrayField>`,
     },
+    scalar_array: {
+        component: TextArrayField,
+        representation: (props: InputProps) =>
+            `<TextArrayField source="${props.source}" />`,
+    },
     boolean: {
         component: BooleanField,
         representation: (props: InputProps) =>

packages/ra-ui-materialui/src/field/TextArrayField.spec.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { Basic } from './TextArrayField.stories';
+
+describe('<TextArrayField />', () => {
+    it('should render the array values', async () => {
+        render(<Basic />);
+        await screen.findByText('Fiction');
+        await screen.findByText('Historical Fiction');
+        await screen.findByText('Classic Literature');
+        await screen.findByText('Russian Literature');
+    });
+});

packages/ra-ui-materialui/src/field/TextArrayField.stories.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { TextArrayField } from './TextArrayField';
+
+export default { title: 'ra-ui-materialui/fields/TextArrayField' };
+
+const book = {
+    id: 1,
+    title: 'War and Peace',
+    genres: [
+        'Fiction',
+        'Historical Fiction',
+        'Classic Literature',
+        'Russian Literature',
+    ],
+};
+
+export const Basic = () => <TextArrayField record={book} source="genres" />;
+
+export const EmptyText = () => (
+    <TextArrayField
+        record={{ genres: [] }}
+        source="genres"
+        emptyText="No genres available"
+    />
+);
+
+export const Size = () => (
+    <TextArrayField record={book} source="genres" size="medium" />
+);
+
+export const Color = () => (
+    <TextArrayField record={book} source="genres" color="secondary" />
+);
+
+export const Variant = () => (
+    <TextArrayField record={book} source="genres" variant="outlined" />
+);
+
+export const Direction = () => (
+    <TextArrayField
+        record={book}
+        source="genres"
+        direction="column"
+        alignItems="flex-start"
+    />
+);
+
+export const Gap = () => (
+    <TextArrayField record={book} source="genres" gap={2} />
+);

packages/ra-ui-materialui/src/field/TextArrayField.tsx

@@ -0,0 +1,68 @@
+import { useFieldValue } from 'ra-core';
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+import { Chip, ChipProps, Stack, StackProps } from '@mui/material';
+import { FieldProps } from './types';
+
+/**
+ * Renders an array of scalar values using MUI Stack and Chips.
+ *
+ * @example
+ * // const post = {
+ * //   id: 123
+ * //   genres: [
+ * //     'Fiction',
+ * //     'Historical Fiction',
+ * //     'Classic Literature',
+ * //     'Russian Literature',
+ * //   ]
+ * // };
+ * const PostShow = () => (
+ *    <Show>
+ *       <SimpleShowLayout>
+ *           <TextArrayField source="genres" />
+ *      </SimpleShowLayout>
+ *   </Show>
+ * );
+ */
+export const TextArrayField = <
+    RecordType extends Record<string, any> = Record<string, any>,
+>(
+    props: TextArrayFieldProps<RecordType>
+) => {
+    const {
+        emptyText,
+        source,
+        record,
+        resource,
+        size = 'small',
+        color,
+        variant,
+        ...rest
+    } = props;
+    const data = useFieldValue(props) || emptyArray;
+    return (
+        <Stack direction="row" gap={1} {...rest}>
+            {data.length === 0
+                ? emptyText
+                : data.map((item: ReactNode, index: number) => (
+                      <Chip
+                          key={index}
+                          label={item}
+                          size={size}
+                          color={color}
+                          variant={variant}
+                      />
+                  ))}
+        </Stack>
+    );
+};
+
+export interface TextArrayFieldProps<
+    RecordType extends Record<string, any> = Record<string, any>,
+> extends FieldProps<RecordType>,
+        Omit<StackProps, 'textAlign' | 'color'>,
+        Pick<ChipProps, 'size' | 'color' | 'variant'> {}
+
+const emptyArray = [];

packages/ra-ui-materialui/src/field/index.ts

@@ -18,6 +18,7 @@ export * from './ReferenceOneField';
 export * from './RichTextField';
 export * from './sanitizeFieldRestProps';
 export * from './SelectField';
+export * from './TextArrayField';
 export * from './TextField';
 export * from './TranslatableFields';
 export * from './TranslatableFieldsTab';