@strato-admin/cloudscape 0.1.1 → 0.3.0

package/src/detail/Detail-CollectionFields.test.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { useShowController, useResourceContext, useShowContext } from '@strato-admin/ra-core';
+import { useResourceSchema } from '@strato-admin/core';
+import { Detail } from './Detail';
+
+vi.mock('@strato-admin/ra-core', () => import('../__mocks__/ra-core'));
+vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
+
+// Mock Cloudscape components
+vi.mock('@cloudscape-design/components/container', () => ({
+  default: ({ children, header }: any) => (
+    <div data-testid="container">
+      {header && <div data-testid="container-header">{header}</div>}
+      <div data-testid="container-content">{children}</div>
+    </div>
+  ),
+}));
+
+vi.mock('@cloudscape-design/components/header', () => ({
+  default: ({ children }: any) => <header>{children}</header>,
+}));
+
+vi.mock('@cloudscape-design/components/space-between', () => ({
+  default: ({ children }: any) => <div data-testid="space-between">{children}</div>,
+}));
+
+describe('Detail Collection Fields', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useResourceContext as any).mockReturnValue('products');
+    const controllerProps = {
+      record: { id: 1, name: 'Test Product' },
+      isLoading: false,
+      resource: 'products',
+      defaultTitle: 'Products',
+    };
+    (useShowController as any).mockReturnValue(controllerProps);
+    (useShowContext as any).mockReturnValue(controllerProps);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render collection fields after scalar fields when no children are provided', () => {
+    const ScalarField = (props: any) => <div data-testid={`scalar-${props.source}`} />;
+    const CollectionField = (props: any) => <div data-testid={`collection-${props.source}`} />;
+    (CollectionField as any).isCollectionField = true;
+
+    (useResourceSchema as any).mockReturnValue({
+      label: 'Products',
+      fieldSchema: [<ScalarField key="scalar" source="name" />, <CollectionField key="collection" source="items" />],
+    });
+
+    const { getByTestId, queryByTestId } = render(<Detail />);
+
+    // Scalar fields should be inside a container (handled by DetailHub -> KeyValuePairs)
+    // In this test, because we don't mock KeyValuePairs, DetailHub renders <KeyValuePairs />
+    // which in our mock is just the component itself or handled by schema.
+
+    // Collection field should be rendered
+    expect(getByTestId('collection-items')).toBeDefined();
+  });
+
+  it('should respect detailInclude for collection fields', () => {
+    const CollectionField1 = (props: any) => <div data-testid={`collection-${props.source}`} />;
+    (CollectionField1 as any).isCollectionField = true;
+    const CollectionField2 = (props: any) => <div data-testid={`collection-${props.source}`} />;
+    (CollectionField2 as any).isCollectionField = true;
+
+    (useResourceSchema as any).mockReturnValue({
+      label: 'Products',
+      fieldSchema: [<CollectionField1 key="c1" source="items1" />, <CollectionField2 key="c2" source="items2" />],
+      detailInclude: ['items1'],
+    });
+
+    const { getByTestId, queryByTestId } = render(<Detail />);
+
+    expect(getByTestId('collection-items1')).toBeDefined();
+    expect(queryByTestId('collection-items2')).toBeNull();
+  });
+});

package/src/detail/Detail.test.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { useShowController, useResourceContext, useShowContext } from '@strato-admin/ra-core';
+import { Detail } from './Detail';
+
+vi.mock('@strato-admin/ra-core', () => import('../__mocks__/ra-core'));
+vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
+
+// Mock Cloudscape components
+vi.mock('@cloudscape-design/components/container', () => ({
+  default: ({ children, header }: any) => (
+    <div data-testid="container">
+      {header && <div data-testid="container-header">{header}</div>}
+      <div data-testid="container-content">{children}</div>
+    </div>
+  ),
+}));
+
+vi.mock('@cloudscape-design/components/header', () => ({
+  default: ({ children }: any) => <header>{children}</header>,
+}));
+
+vi.mock('@cloudscape-design/components/space-between', () => ({
+  default: ({ children }: any) => <div>{children}</div>,
+}));
+
+// Mock KeyValuePairs
+vi.mock('./KeyValuePairs', () => ({
+  default: ({ children }: any) => <div>{children}</div>,
+}));
+
+describe('Detail', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useResourceContext as any).mockReturnValue('products');
+    const controllerProps = {
+      record: { id: 1, name: 'Test Product' },
+      isLoading: false,
+      resource: 'products',
+      defaultTitle: 'Products',
+    };
+    (useShowController as any).mockReturnValue(controllerProps);
+    (useShowContext as any).mockReturnValue(controllerProps);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render nothing when loading', () => {
+    const controllerProps = {
+      isLoading: true,
+      record: undefined,
+      resource: 'products',
+      defaultTitle: 'Products',
+    };
+    (useShowController as any).mockReturnValue(controllerProps);
+    (useShowContext as any).mockReturnValue(controllerProps);
+
+    const { queryByTestId } = render(
+      <Detail>
+        <div />
+      </Detail>,
+    );
+
+    expect(queryByTestId('container')).toBeNull();
+  });
+
+  it('should render content and title when record is loaded', () => {
+    const { getByTestId, getByText } = render(
+      <Detail>
+        <div data-testid="content">Product Content</div>
+      </Detail>,
+    );
+
+    expect(getByTestId('container')).toBeDefined();
+    expect(getByText('Product Content')).toBeDefined();
+    expect(getByText(/Products/)).toBeDefined();
+  });
+
+  it('should use provided title', () => {
+    const { getByText } = render(
+      <Detail title="Custom Title">
+        <div />
+      </Detail>,
+    );
+
+    expect(getByText('Custom Title')).toBeDefined();
+  });
+});

package/src/detail/Detail.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ShowBaseProps, ShowContextProvider, useShowController } from '@strato-admin/ra-core';
+import { useResourceSchema } from '@strato-admin/core';
+import DetailHub from './DetailHub';
+
+export interface DetailProps extends ShowBaseProps {
+  /**
+   * The title of the detail view.
+   */
+  title?: string;
+  /**
+   * The description of the detail view.
+   */
+  description?: string;
+  /**
+   * Custom fields or components to display in the detail view.
+   */
+  children?: React.ReactNode;
+  /**
+   * Custom actions to display in the header.
+   */
+  actions?: React.ReactNode;
+}
+
+/**
+ * A detail view component that displays a single record's details.
+ * It uses the detailComponent defined in the schema (defaults to DetailHub)
+ * to organize fields into sections.
+ *
+ * @example
+ * <Detail>
+ *   <TextField source="name" />
+ *   <TextField source="description" />
+ * </Detail>
+ */
+export const Detail = (props: DetailProps) => {
+  const { children, ...rest } = props;
+  const { queryOptions, detailComponent: DetailComponent = DetailHub } = useResourceSchema(props.resource);
+  const controllerProps = useShowController({ queryOptions, ...rest });
+
+  return (
+    <ShowContextProvider value={controllerProps}>
+      <DetailComponent {...props} />
+    </ShowContextProvider>
+  );
+};
+
+export default Detail;

package/src/detail/{ShowHeader.test.tsx → DetailHeader.test.tsx}

@@ -1,10 +1,10 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { vi, describe, it, expect, beforeEach } from 'vitest';
-import { useResourceContext, useShowContext } from '@strato-admin/core';
-import { ShowHeader } from './ShowHeader';
+import { useResourceContext, useShowContext } from '@strato-admin/ra-core';
+import { DetailHeader } from './DetailHeader';
 
-// Mock strato-core
+vi.mock('@strato-admin/ra-core', () => import('../__mocks__/ra-core'));
 vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
 
 // Mock react-router-dom
@@ -34,7 +34,7 @@ vi.mock('@cloudscape-design/components/button', () => ({
   ),
 }));
 
-describe('ShowHeader', () => {
+describe('DetailHeader', () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
@@ -43,7 +43,7 @@ describe('ShowHeader', () => {
     (useResourceContext as any).mockReturnValue('products');
     (useShowContext as any).mockReturnValue({ record: { id: 1 }, defaultTitle: 'Products' });
 
-    const { getByTestId } = render(<ShowHeader />);
+    const { getByTestId } = render(<DetailHeader />);
 
     expect(getByTestId('header-title').textContent).toBe('Products');
   });
@@ -52,7 +52,7 @@ describe('ShowHeader', () => {
     (useResourceContext as any).mockReturnValue('products');
     (useShowContext as any).mockReturnValue({ record: { id: 1 }, defaultTitle: 'Products' });
 
-    const { getByTestId } = render(<ShowHeader title="My Product" />);
+    const { getByTestId } = render(<DetailHeader title="My Product" />);
 
     expect(getByTestId('header-title').textContent).toBe('My Product');
   });
@@ -61,7 +61,7 @@ describe('ShowHeader', () => {
     (useResourceContext as any).mockReturnValue('products');
     (useShowContext as any).mockReturnValue({ record: { id: 1 }, defaultTitle: 'Products' });
 
-    const { getByText } = render(<ShowHeader />);
+    const { getByText } = render(<DetailHeader />);
 
     const editButton = getByText('Edit');
     expect(editButton).toBeDefined();
@@ -72,9 +72,11 @@ describe('ShowHeader', () => {
     (useResourceContext as any).mockReturnValue('products');
     (useShowContext as any).mockReturnValue({ record: { id: 1 }, defaultTitle: 'Products' });
 
-    const { getByTestId, queryByText } = render(<ShowHeader actions={<div data-testid="custom-action">Custom</div>} />);
+    const { getByTestId, queryByText } = render(
+      <DetailHeader actions={<div data-testid="custom-action">Custom</div>} />,
+    );
 
     expect(getByTestId('custom-action')).toBeDefined();
-    expect(queryByText('ra.action.edit')).toBeNull();
+    expect(queryByText('strato.action.edit')).toBeNull();
   });
 });

package/src/detail/DetailHeader.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Header, { HeaderProps } from '@cloudscape-design/components/header';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+import { useShowContext, useTranslate } from '@strato-admin/ra-core';
+import { EditButton } from '../button/EditButton';
+
+export interface DetailHeaderProps
+  extends Pick<HeaderProps, 'variant' | 'counter' | 'actions' | 'description' | 'info' | 'headingTagOverride'> {
+  title?: React.ReactNode;
+}
+
+/** @deprecated Use DetailHeader instead */
+export type ShowHeaderProps = DetailHeaderProps;
+
+/** @deprecated Use DetailHeader instead */
+export const ShowHeader = (props: DetailHeaderProps) => <DetailHeader {...props} />;
+
+export const DetailHeader = ({ title, actions, description, counter, info, variant = 'h2', headingTagOverride }: DetailHeaderProps) => {
+  const translate = useTranslate();
+  const { record, defaultTitle } = useShowContext();
+
+  const headerTitle = React.useMemo(() => {
+    if (title !== undefined) {
+      return typeof title === 'string' ? translate(title, { _: title }) : title;
+    }
+    return defaultTitle;
+  }, [title, defaultTitle, translate]);
+
+  const headerActions = actions || (
+    <SpaceBetween direction="horizontal" size="xs">
+      <EditButton record={record} variant="primary" />
+    </SpaceBetween>
+  );
+
+  return (
+    <Header variant={variant} actions={headerActions} description={description} counter={counter} info={info} headingTagOverride={headingTagOverride}>
+      {headerTitle}
+    </Header>
+  );
+};
+
+export default DetailHeader;

package/src/detail/DetailHub.tsx

@@ -0,0 +1,88 @@
+import React, { useMemo, ReactNode, isValidElement } from 'react';
+import Container from '@cloudscape-design/components/container';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+import { useTranslate, useShowContext, RaRecord } from '@strato-admin/ra-core';
+import { useResourceSchema } from '@strato-admin/core';
+import { useSchemaFields } from '../hooks/useSchemaFields';
+import KeyValuePairs from './KeyValuePairs';
+import DetailHeader from './DetailHeader';
+
+export interface DetailHubProps {
+  title?: string;
+  description?: string;
+  children?: ReactNode;
+  actions?: ReactNode;
+}
+
+/**
+ * A detail view component that organizes fields into sections based on their type.
+ * Scalar fields are grouped into a Container with KeyValuePairs, while
+ * collection fields (like ReferenceManyField) are displayed as separate sections
+ * below the main record details.
+ *
+ * It also renders the DetailHeader with the record title and actions (like Edit).
+ *
+ * @example
+ * <DetailHub />
+ *
+ * @example
+ * <DetailHub title="Custom Title">
+ *   <KeyValuePairs columns={3} />
+ *   <ReferenceManyField reference="comments" target="post_id" />
+ * </DetailHub>
+ */
+export const DetailHub = <RecordType extends RaRecord = RaRecord>(props: DetailHubProps) => {
+  const { title, description, children, actions } = props;
+  const { record, resource, isLoading } = useShowContext<RecordType>();
+  const translate = useTranslate();
+  const { label, detailTitle, detailDescription } = useResourceSchema();
+
+  const { getDetailFields } = useSchemaFields();
+
+  const constructedTitle = useMemo(
+    () => label || translate(`resources.${resource}.name`, { smart_count: 1 }),
+    [label, translate, resource],
+  );
+
+  const finalTitle = useMemo(() => {
+    if (title) return title;
+    if (typeof detailTitle === 'function') return detailTitle(record);
+    if (isValidElement(detailTitle)) return detailTitle;
+    if (detailTitle) return translate(detailTitle as string, record);
+    return constructedTitle;
+  }, [record, title, detailTitle, translate, constructedTitle]);
+
+  const finalDescription = useMemo(() => {
+    if (description) return description;
+    if (typeof detailDescription === 'function') return detailDescription(record);
+    if (isValidElement(detailDescription)) return detailDescription;
+    if (detailDescription) return translate(detailDescription as string, record);
+    return undefined;
+  }, [record, description, detailDescription, translate]);
+
+  const { scalarFields, collectionFields } = useMemo(() => getDetailFields(children), [getDetailFields, children]);
+
+  if (isLoading || !record) {
+    return null;
+  }
+
+  const hasScalarFields = scalarFields.length > 0;
+
+  return (
+    <SpaceBetween size="l">
+      <DetailHeader title={finalTitle} description={finalDescription} actions={actions} />
+      {hasScalarFields && (
+        <Container>
+          {React.Children.count(children) > 0 ? (
+            <SpaceBetween size="l">{scalarFields}</SpaceBetween>
+          ) : (
+            <KeyValuePairs />
+          )}
+        </Container>
+      )}
+      {collectionFields}
+    </SpaceBetween>
+  );
+};
+
+export default DetailHub;

package/src/detail/KeyValuePairs.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { vi, describe, it, expect, beforeEach } from 'vitest';
-import { useResourceContext, useTranslate, useRecordContext } from '@strato-admin/core';
+import { useResourceContext, useTranslate, useRecordContext } from '@strato-admin/ra-core';
 import KeyValuePairs from './KeyValuePairs';
 import CloudscapeKeyValuePairs from '@cloudscape-design/components/key-value-pairs';
 
-// Mock strato-core
+vi.mock('@strato-admin/ra-core', () => import('../__mocks__/ra-core'));
 vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
 
 // Mock react-router-dom

package/src/detail/KeyValuePairs.tsx

@@ -2,19 +2,19 @@ import React from 'react';
 import CloudscapeKeyValuePairs, {
   type KeyValuePairsProps as CloudscapeKeyValuePairsProps,
 } from '@cloudscape-design/components/key-value-pairs';
-import {
-  useResourceContext,
-  useRecordContext,
-  FieldTitle,
-  RecordContextProvider,
-  type RaRecord,
-  useFieldSchema,
-} from '@strato-admin/core';
+import { useRecordContext, FieldTitle, RecordContextProvider, type RaRecord } from '@strato-admin/ra-core';
+import { useResourceSchema } from '@strato-admin/core';
 import TextField from '../field/TextField';
 
 export interface KeyValuePairsProps extends Partial<Omit<CloudscapeKeyValuePairsProps, 'items'>> {
   children?: React.ReactNode;
+  /**
+   * List of field sources to include in the key-value pairs list.
+   */
   include?: string[];
+  /**
+   * List of field sources to exclude from the key-value pairs list.
+   */
   exclude?: string[];
   columns?: number;
   minColumnWidth?: number;
@@ -36,7 +36,7 @@ export const KeyValueField = ({ children, source, field: FieldComponent }: KeyVa
     return (
       <>
         {React.Children.map(children, (child) =>
-          React.isValidElement(child) ? React.cloneElement(child, { source } as any) : child
+          React.isValidElement(child) ? React.cloneElement(child, { source } as any) : child,
         )}
       </>
     );
@@ -65,26 +65,33 @@ export const KeyValuePairs = <RecordType extends RaRecord = RaRecord>({
   minColumnWidth,
   ...props
 }: KeyValuePairsProps) => {
-  const resource = useResourceContext();
   const record = useRecordContext<RecordType>();
-  const schemaChildren = useFieldSchema();
+  const { resource, fieldSchema: schemaChildren, detailInclude, detailExclude } = useResourceSchema();
 
   const finalChildren = React.useMemo(() => {
     const baseChildren = children || schemaChildren;
     let result = React.Children.toArray(baseChildren);
 
-    if (include) {
-      result = result.filter(
-        (child) => React.isValidElement(child) && include.includes((child.props as any).source)
-      );
-    } else if (exclude) {
+    const finalInclude = include || detailInclude;
+    const finalExclude = exclude || detailExclude;
+
+    if (finalInclude) {
       result = result.filter(
-        (child) => React.isValidElement(child) && !exclude.includes((child.props as any).source)
+        (child) => React.isValidElement(child) && finalInclude.includes((child.props as any).source),
       );
+    } else {
+      // Filter out fields marked as collection fields by default
+      result = result.filter((child) => React.isValidElement(child) && !(child.type as any).isCollectionField);
+
+      if (finalExclude) {
+        result = result.filter(
+          (child) => React.isValidElement(child) && !finalExclude.includes((child.props as any).source),
+        );
+      }
     }
 
     return result;
-  }, [children, schemaChildren, include, exclude]);
+  }, [children, schemaChildren, include, exclude, detailInclude, detailExclude]);
 
   const items =
     React.Children.map(finalChildren, (child) => {

package/src/detail/index.ts

@@ -1,3 +1,4 @@
 export * from './KeyValuePairs';
-export * from './Show';
-export * from './ShowHeader';
+export * from './Detail';
+export * from './DetailHub';
+export * from './DetailHeader';

package/src/edit/Edit.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { vi, describe, it, expect, beforeEach } from 'vitest';
-import { useEditContext, useResourceContext } from '@strato-admin/core';
+import { useEditContext, useResourceContext } from '@strato-admin/ra-core';
 import { Edit } from './Edit';
 
-// Mock ra-core
+vi.mock('@strato-admin/ra-core', () => import('../__mocks__/ra-core'));
 vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
 
 // Mock Cloudscape components
@@ -57,7 +57,8 @@ describe('Edit', () => {
   it('should render content and title when record is loaded', () => {
     (useEditContext as any).mockReturnValue({
       isLoading: false,
-      record: { id: 1 }, defaultTitle: 'Products',
+      record: { id: 1 },
+      defaultTitle: 'Products',
       resource: 'products',
     });
     (useResourceContext as any).mockReturnValue('products');
@@ -70,13 +71,14 @@ describe('Edit', () => {
 
     expect(getByTestId('container')).toBeDefined();
     expect(getByTestId('content').textContent).toBe('Hello World');
-    expect(getByText('Products')).toBeDefined();
+    expect(getByText(/Products/)).toBeDefined();
   });
 
   it('should use provided title', () => {
     (useEditContext as any).mockReturnValue({
       isLoading: false,
-      record: { id: 1 }, defaultTitle: 'Products',
+      record: { id: 1 },
+      defaultTitle: 'Products',
       resource: 'products',
     });