@strato-admin/cloudscape 0.1.0 → 0.3.0

package/src/list/Cards.tsx

@@ -1,47 +1,145 @@
 import React from 'react';
 import CloudscapeCards, { CardsProps } from '@cloudscape-design/components/cards';
 import Pagination from '@cloudscape-design/components/pagination';
-import { RaRecord, RecordContextProvider, useFieldSchema } from '@strato-admin/core';
+import TextFilter from '@cloudscape-design/components/text-filter';
+import CollectionPreferences from '@cloudscape-design/components/collection-preferences';
+import { RaRecord, RecordContextProvider, useTranslateLabel, useTranslate } from '@strato-admin/ra-core';
+import { useResourceSchema, useSettings } from '@strato-admin/core';
 import { useCollection } from '../collection-hooks';
+import { useSchemaFields } from '../hooks/useSchemaFields';
 import KeyValuePairs from '../detail/KeyValuePairs';
+import TableHeader from './TableHeader';
 
-export interface ListCardsProps<T extends RaRecord = any> extends Omit<CardsProps<T>, 'items' | 'cardDefinition'> {
+export interface ListCardsProps<T extends RaRecord = any> extends Omit<
+  CardsProps<T>,
+  'items' | 'cardDefinition' | 'preferences'
+> {
   renderItem?: (item: T) => React.ReactNode;
   include?: string[];
   exclude?: string[];
+  children?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: string;
+  actions?: React.ReactNode;
+  selectionType?: 'single' | 'multi';
+  /**
+   * Whether to enable text filtering.
+   * @default true
+   */
+  filtering?: boolean;
+  /**
+   * Placeholder text for the filter input.
+   * @default "Search..."
+   */
+  filteringPlaceholder?: string;
+  /**
+   * Options for the page size selector.
+   */
+  pageSizeOptions?: ReadonlyArray<{ value: number; label?: string }>;
+  /**
+   * Whether to show the preferences button or custom preferences content.
+   * @default true
+   */
+  preferences?: boolean | React.ReactNode;
 }
 
-export const ListCards = <T extends RaRecord = any>({ 
-  renderItem, 
+export const ListCards = <T extends RaRecord = any>({
+  renderItem,
   include,
   exclude,
-  ...props 
+  children,
+  title,
+  description,
+  actions,
+  selectionType,
+  filtering = true,
+  filteringPlaceholder,
+  pageSizeOptions,
+  preferences = true,
+  ...props
 }: ListCardsProps<T>) => {
-  const { items, paginationProps, collectionProps } = useCollection<T>({
-    filtering: {},
-    pagination: {},
-    sorting: {},
-  });
+  const translate = useTranslate();
+  const { listPageSizes, listPageSizeLabel } = useSettings();
+
+  const resolvedPageSizeOptions =
+    pageSizeOptions ??
+    (listPageSizes && listPageSizeLabel
+      ? listPageSizes.map((value) => ({ value, label: listPageSizeLabel(value) }))
+      : undefined);
+  const translateLabel = useTranslateLabel();
+  const { resource, label: schemaLabel, definition } = useResourceSchema();
+
+  const { getListFields } = useSchemaFields();
 
-  const schemaChildren = useFieldSchema();
+  const finalSelectionType = selectionType ?? (definition?.options?.canDelete ? 'multi' : undefined);
 
-  const defaultRenderItem = (_item: T) => (
-    <KeyValuePairs include={include} exclude={exclude}>
-      {schemaChildren}
-    </KeyValuePairs>
+  const finalChildren = React.useMemo(
+    () => getListFields(children, { include, exclude }),
+    [getListFields, children, include, exclude],
   );
 
+  const visibleContentOptions = React.useMemo(() => {
+    const options: { id: string; label: string }[] = [];
+    finalChildren.forEach((child, index) => {
+      if (!React.isValidElement(child)) return;
+      const { source, label } = child.props as any;
+      const headerLabel = translateLabel({ label, resource, source });
+      if (typeof headerLabel === 'string') {
+        options.push({
+          id: source || `section-${index}`,
+          label: headerLabel,
+        });
+      }
+    });
+    return options;
+  }, [finalChildren, resource, translateLabel]);
+
+  const { items, paginationProps, collectionProps, filterProps, preferencesProps } = useCollection<T>({
+    preferences: {
+      pageSizeOptions: resolvedPageSizeOptions as any,
+      visibleContentOptions: visibleContentOptions.length > 0 ? visibleContentOptions : undefined,
+    },
+  });
+
+  const displayedChildren = React.useMemo(() => {
+    const { visibleContent } = preferencesProps.preferences;
+    if (!visibleContent) return finalChildren;
+
+    return finalChildren.filter((child) => {
+      if (!React.isValidElement(child)) return true;
+      const { source } = child.props as any;
+      // If the child doesn't have a source, we don't know how to toggle it, so we keep it.
+      if (!source) return true;
+      // If it's not in the options, it's not toggleable, so we keep it.
+      if (!visibleContentOptions.some((opt) => opt.id === source)) return true;
+
+      return visibleContent.includes(source);
+    });
+  }, [finalChildren, preferencesProps.preferences.visibleContent, visibleContentOptions]);
+
+  const defaultRenderItem = (_item: T) => <KeyValuePairs>{displayedChildren}</KeyValuePairs>;
+
   const finalRenderItem = renderItem || defaultRenderItem;
 
   const cardDefinition: CardsProps.CardDefinition<T> = {
     sections: [
       {
         id: 'main',
-        content: (item: T) => <RecordContextProvider value={item}>{finalRenderItem(item) as any}</RecordContextProvider>,
+        content: (item: T) => (
+          <RecordContextProvider value={item}>{finalRenderItem(item) as any}</RecordContextProvider>
+        ),
       },
     ],
   };
 
+  const cardsHeader = React.useMemo(() => {
+    if (React.isValidElement(title)) {
+      return title;
+    }
+    const finalTitle = title !== undefined ? title : schemaLabel;
+    return <TableHeader title={finalTitle} description={description} actions={actions} />;
+  }, [title, description, actions, schemaLabel]);
+
   return (
     <CloudscapeCards
       {...collectionProps}
@@ -49,6 +147,38 @@ export const ListCards = <T extends RaRecord = any>({
       items={items || []}
       cardDefinition={cardDefinition}
       pagination={<Pagination {...paginationProps} />}
+      header={cardsHeader}
+      selectionType={finalSelectionType}
+      filter={filtering && <TextFilter {...filterProps} filteringPlaceholder={filteringPlaceholder} />}
+      preferences={
+        preferences === true || resolvedPageSizeOptions ? (
+          <CollectionPreferences
+            {...preferencesProps}
+            pageSizePreference={
+              resolvedPageSizeOptions
+                ? {
+                    options: resolvedPageSizeOptions as any,
+                  }
+                : undefined
+            }
+            visibleContentPreference={
+              visibleContentOptions.length > 0
+                ? {
+                    title: translate('strato.action.select_sections', { _: 'Select visible sections' }),
+                    options: [
+                      {
+                        label: translate('strato.action.select_sections', { _: 'Select visible sections' }),
+                        options: visibleContentOptions,
+                      },
+                    ],
+                  }
+                : undefined
+            }
+          />
+        ) : React.isValidElement(preferences) ? (
+          preferences
+        ) : undefined
+      }
     />
   );
 };

package/src/list/List.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
-import { ListBase, type RaRecord, ResourceSchemaProvider } from '@strato-admin/core';
+import { ListBase, type RaRecord, type ListBaseProps, useTranslate } from '@strato-admin/ra-core';
+import { ResourceSchemaProvider, useResourceSchema, useConstructedPageTitle, useSettings } from '@strato-admin/core';
 import Table from './Table';
 
-export interface ListProps<_RecordType extends RaRecord = any> {
+export interface ListProps<RecordType extends RaRecord = any> extends ListBaseProps<RecordType> {
   children?: React.ReactNode;
-  fieldSchema?: React.ReactNode;
   include?: string[];
   exclude?: string[];
-  title?: React.ReactNode;
+  title?: React.ReactNode | (() => React.ReactNode);
+  description?: React.ReactNode | (() => React.ReactNode);
   actions?: React.ReactNode;
   /**
    * Whether to enable text filtering in the implicit Table.
@@ -19,9 +20,71 @@ export interface ListProps<_RecordType extends RaRecord = any> {
    * @default true
    */
   preferences?: boolean | React.ReactNode;
-  [key: string]: any;
+  /**
+   * The fields to display by default.
+   */
+  display?: string[];
 }
 
+const ListUI = ({
+  children,
+  title,
+  actions,
+  description,
+  include,
+  exclude,
+  filtering,
+  preferences,
+  display,
+}: {
+  children?: React.ReactNode;
+  title?: React.ReactNode | (() => React.ReactNode);
+  actions?: React.ReactNode;
+  description?: React.ReactNode | (() => React.ReactNode);
+  include?: string[];
+  exclude?: string[];
+  filtering?: boolean;
+  preferences?: boolean | React.ReactNode;
+  display?: string[];
+}) => {
+  const { label, listTitle, listDescription, listComponent: ListComponent = Table } = useResourceSchema();
+  const translate = useTranslate();
+  const constructedTitle = useConstructedPageTitle('list', label);
+
+  const finalTitle = React.useMemo(() => {
+    if (typeof title === 'function') return title();
+    if (React.isValidElement(title)) return title;
+    if (title) return translate(title as string);
+    if (React.isValidElement(listTitle)) return listTitle;
+    if (listTitle) return translate(listTitle as string);
+    return constructedTitle;
+  }, [title, listTitle, translate, constructedTitle]);
+
+  const finalDescription = React.useMemo(() => {
+    if (typeof description === 'function') return description();
+    if (React.isValidElement(description)) return description;
+    if (description) return translate(description as string);
+    if (React.isValidElement(listDescription)) return listDescription;
+    if (listDescription) return translate(listDescription as string);
+    return undefined;
+  }, [description, listDescription, translate]);
+
+  const finalChildren = children || (
+    <ListComponent
+      include={include}
+      exclude={exclude}
+      display={display}
+      title={finalTitle}
+      description={finalDescription}
+      actions={actions}
+      filtering={filtering}
+      preferences={preferences}
+    />
+  );
+
+  return <>{finalChildren}</>;
+};
+
 /**
  * A List component that provides a list context and a Cloudscape Table.
  *
@@ -31,43 +94,41 @@ export interface ListProps<_RecordType extends RaRecord = any> {
  *     <Table.Column source="name" />
  *   </Table>
  * </List>
- * 
+ *
  * @example
  * // Using FieldSchema from context
  * <List include={['name', 'price']} />
- * 
- * @example
- * // Passing a custom field schema
- * <List fieldSchema={<FieldSchema>...</FieldSchema>}>
- *   <Table />
- * </List>
  */
 export const List = <RecordType extends RaRecord = any>({
   children,
-  fieldSchema,
   include,
   exclude,
   title,
   actions,
+  description,
   filtering = true,
   preferences = true,
+  display,
   ...props
 }: ListProps<RecordType>) => {
-  const finalChildren = children || (
-    <Table 
-      include={include} 
-      exclude={exclude} 
-      title={title} 
-      actions={actions} 
-      filtering={filtering} 
-      preferences={preferences} 
-    />
-  );
+  const { queryOptions } = useResourceSchema(props.resource);
+  const { listPageSize } = useSettings();
 
   return (
-    <ListBase {...props}>
-      <ResourceSchemaProvider resource={props.resource} fieldSchema={fieldSchema}>
-        {finalChildren as any}
+    <ListBase queryOptions={queryOptions} {...props} perPage={props.perPage ?? listPageSize}>
+      <ResourceSchemaProvider resource={props.resource}>
+        <ListUI
+          title={title}
+          actions={actions}
+          description={description}
+          include={include}
+          exclude={exclude}
+          filtering={filtering}
+          preferences={preferences}
+          display={display}
+        >
+          {children}
+        </ListUI>
       </ResourceSchemaProvider>
     </ListBase>
   );

package/src/list/Table.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { useResourceContext, useListContext, useResourceDefinitions } from '@strato-admin/core';
+import { useResourceContext, useListContext, useResourceDefinitions } from '@strato-admin/ra-core';
 import { useCollection } from '../collection-hooks';
 import Table from './Table';
 import CloudscapeTable from '@cloudscape-design/components/table';
 
-// Mock ra-core
+vi.mock('@strato-admin/ra-core', () => import('../__mocks__/ra-core'));
 vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
 
 // Mock react-router-dom
@@ -197,11 +197,11 @@ describe('DataTable', () => {
     expect(tableProps.selectionType).toBe('multi');
   });
 
-  it('should pass default visible fields to useCollection', () => {
+  it('should pass display fields to useCollection', () => {
     (useResourceContext as any).mockReturnValue('products');
 
     render(
-      <Table defaultVisibleFields={['name', 'price']}>
+      <Table display={['name', 'price']}>
         <Table.Column source="id" label="ID" />
         <Table.Column source="name" label="Name" />
         <Table.Column source="price" label="Price" />
@@ -219,7 +219,7 @@ describe('DataTable', () => {
     ]);
   });
 
-  it('should default to first 5 columns if defaultVisibleFields is not provided', () => {
+  it('should default to first 5 columns if display is not provided', () => {
     (useResourceContext as any).mockReturnValue('products');
 
     render(
@@ -252,4 +252,39 @@ describe('DataTable', () => {
 
     expect(queryByTestId('table-header')).toBeNull();
   });
+
+  it('should hide collection fields by default', () => {
+    (useResourceContext as any).mockReturnValue('products');
+    const CollectionField = () => <div />;
+    (CollectionField as any).isCollectionField = true;
+
+    render(
+      <Table>
+        <Table.Column source="name" />
+        <CollectionField key="collection" source="items" />
+      </Table>,
+    );
+
+    const tableProps = (CloudscapeTable as any).mock.calls[0][0];
+    expect(tableProps.columnDefinitions).toHaveLength(1);
+    expect(tableProps.columnDefinitions[0].id).toBe('products___name');
+  });
+
+  it('should show collection fields when explicitly included', () => {
+    (useResourceContext as any).mockReturnValue('products');
+    const CollectionField = () => <div />;
+    (CollectionField as any).isCollectionField = true;
+
+    render(
+      <Table include={['name', 'items']}>
+        <Table.Column source="name" />
+        <CollectionField key="collection" source="items" />
+      </Table>,
+    );
+
+    const tableProps = (CloudscapeTable as any).mock.calls[0][0];
+    expect(tableProps.columnDefinitions).toHaveLength(2);
+    expect(tableProps.columnDefinitions[0].id).toBe('products___name');
+    expect(tableProps.columnDefinitions[1].id).toBe('products___items');
+  });
 });