@strato-admin/cloudscape 0.1.0

package/src/create/Create.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { useResourceContext } from '@strato-admin/core';
+import { Create } from './Create';
+
+// Mock strato-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">
+      <div data-testid="container-header">{header}</div>
+      <div data-testid="container-content">{children}</div>
+    </div>
+  ),
+}));
+
+vi.mock('@cloudscape-design/components/header', () => ({
+  default: ({ children, actions }: any) => (
+    <header>
+      <div>{children}</div>
+      <div>{actions}</div>
+    </header>
+  ),
+}));
+
+vi.mock('@cloudscape-design/components/space-between', () => ({
+  default: ({ children }: any) => <div>{children}</div>,
+}));
+
+describe('Create', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render content and title', () => {
+    (useResourceContext as any).mockReturnValue('products');
+
+    const { getByTestId, getByText } = render(
+      <Create>
+        <div data-testid="content">Create New</div>
+      </Create>,
+    );
+
+    expect(getByTestId('container')).toBeDefined();
+    expect(getByTestId('content').textContent).toBe('Create New');
+    expect(getByText('Products')).toBeDefined();
+  });
+
+  it('should use provided title', () => {
+    (useResourceContext as any).mockReturnValue('products');
+
+    const { getByText } = render(
+      <Create title="Add New Product">
+        <div />
+      </Create>,
+    );
+
+    expect(getByText('Add New Product')).toBeDefined();
+  });
+});

package/src/create/Create.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { CreateBase, type RaRecord, ResourceSchemaProvider } from '@strato-admin/core';
+import Container from '@cloudscape-design/components/container';
+import { CreateHeader } from './CreateHeader';
+import Form from '../form/Form';
+
+export interface CreateProps<RecordType extends RaRecord = RaRecord> {
+  children?: React.ReactNode;
+  inputSchema?: React.ReactNode;
+  title?: React.ReactNode;
+  actions?: React.ReactNode;
+  resource?: string;
+  record?: Partial<RecordType>;
+  redirect?: any;
+  transform?: any;
+  mutationOptions?: any;
+  include?: string[];
+  exclude?: string[];
+}
+
+const CreateUI = ({
+  children,
+  resource,
+  inputSchema,
+  title,
+  actions,
+  include,
+  exclude,
+}: {
+  children?: React.ReactNode;
+  resource?: string;
+  inputSchema?: React.ReactNode;
+  title?: React.ReactNode;
+  actions?: React.ReactNode;
+  include?: string[];
+  exclude?: string[];
+}) => {
+  const finalChildren = children || <Form include={include} exclude={exclude} />;
+  return (
+    <ResourceSchemaProvider resource={resource} inputSchema={inputSchema}>
+      <Container header={<CreateHeader title={title} actions={actions} />}>{finalChildren}</Container>
+    </ResourceSchemaProvider>
+  );
+};
+
+/**
+ * A Create component that provides record context and a Cloudscape Container.
+ *
+ * @example
+ * <Create>
+ *   <Form>
+ *     <TextInput source="name" />
+ *   </Form>
+ * </Create>
+ * 
+ * @example
+ * // Using InputSchema from context
+ * <Create include={['name', 'price']} />
+ * 
+ * @example
+ * // Passing a custom input schema
+ * <Create inputSchema={<InputSchema>...</InputSchema>}>
+ *   <Form />
+ * </Create>
+ */
+export const Create = <RecordType extends RaRecord = RaRecord>({
+  children,
+  inputSchema,
+  title,
+  actions,
+  include,
+  exclude,
+  ...props
+}: CreateProps<RecordType>) => {
+  return (
+    <CreateBase {...props}>
+      <CreateUI 
+        resource={props.resource}
+        title={title} 
+        actions={actions} 
+        include={include} 
+        exclude={exclude}
+        inputSchema={inputSchema}
+      >
+        {children}
+      </CreateUI>
+    </CreateBase>
+  );
+};
+
+Create.Header = CreateHeader;
+
+export default Create;

package/src/create/CreateHeader.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Header, { HeaderProps } from '@cloudscape-design/components/header';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+import { useCreateContext, useTranslate } from '@strato-admin/core';
+
+export interface CreateHeaderProps extends Omit<HeaderProps, 'children'> {
+  title?: React.ReactNode;
+}
+
+export const CreateHeader = ({ title, actions, ...props }: CreateHeaderProps) => {
+  const translate = useTranslate();
+  const { defaultTitle } = useCreateContext();
+
+  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">
+      {/* Add default create actions here if needed */}
+    </SpaceBetween>
+  );
+
+  return (
+    <Header variant="h2" {...props} actions={headerActions}>
+      {headerTitle}
+    </Header>
+  );
+};
+
+export default CreateHeader;

package/src/create/index.ts

@@ -0,0 +1,2 @@
+export * from './Create';
+export * from './CreateHeader';

package/src/detail/KeyValuePairs.test.tsx

@@ -0,0 +1,98 @@
+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 KeyValuePairs from './KeyValuePairs';
+import CloudscapeKeyValuePairs from '@cloudscape-design/components/key-value-pairs';
+
+// Mock strato-core
+vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
+
+// Mock react-router-dom
+vi.mock('react-router-dom', () => ({
+  useNavigate: vi.fn(),
+}));
+
+// Mock Cloudscape components
+vi.mock('@cloudscape-design/components/key-value-pairs', () => ({
+  default: vi.fn(({ items }: any) => (
+    <div data-testid="cloudscape-kvp">
+      {items.map((item: any, index: number) => (
+        <div key={index} data-testid={`kv-item-${index}`}>
+          <span data-testid={`kv-label-${index}`}>{item.label}</span>
+          <div data-testid={`kv-value-${index}`}>{item.value}</div>
+        </div>
+      ))}
+    </div>
+  )),
+}));
+
+vi.mock('@cloudscape-design/components/box', () => ({
+  default: ({ children }: any) => <div>{children}</div>,
+}));
+
+describe('KeyValuePairs', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useResourceContext as any).mockReturnValue('products');
+    (useRecordContext as any).mockReturnValue({ id: 1, name: 'Gadget', price: 100 });
+  });
+
+  it('should render children and automatically generate labels', () => {
+    render(
+      <KeyValuePairs>
+        <KeyValuePairs.Field source="name" />
+        <KeyValuePairs.Field source="price" label="Cost" />
+      </KeyValuePairs>,
+    );
+
+    const kvpProps = (CloudscapeKeyValuePairs as any).mock.calls[0][0];
+    expect(kvpProps.items).toHaveLength(2);
+    // We check the source/label props of the FieldTitle component
+    expect(kvpProps.items[0].label.props.source).toBe('name');
+    expect(kvpProps.items[1].label.props.label).toBe('Cost');
+  });
+
+  it('should use translation for labels if available', () => {
+    const translate = vi.fn((key) => {
+      if (key === 'resources.products.fields.name') return 'Product Name';
+      return key;
+    });
+    (useTranslate as any).mockReturnValue(translate);
+
+    render(
+      <KeyValuePairs>
+        <KeyValuePairs.Field source="name" />
+      </KeyValuePairs>,
+    );
+
+    const kvpProps = (CloudscapeKeyValuePairs as any).mock.calls[0][0];
+    expect(kvpProps.items[0].label.props.source).toBe('name');
+  });
+
+  it('should pass columns and minColumnWidth props to CloudscapeKeyValuePairs', () => {
+    render(
+      <KeyValuePairs columns={3} minColumnWidth={200}>
+        <KeyValuePairs.Field source="name" />
+      </KeyValuePairs>,
+    );
+
+    const kvpProps = (CloudscapeKeyValuePairs as any).mock.calls[0][0];
+    expect(kvpProps.columns).toBe(3);
+    expect(kvpProps.minColumnWidth).toBe(200);
+  });
+
+  it('should provide record context to children', () => {
+    const record = { id: 1, name: 'Gadget' };
+    (useRecordContext as any).mockReturnValue(record);
+
+    // TextField should render 'Gadget' because we mocked useFieldValue to return record[source]
+    const { getByTestId } = render(
+      <KeyValuePairs>
+        <KeyValuePairs.Field source="name" />
+      </KeyValuePairs>,
+    );
+
+    expect(getByTestId('kv-value-0').textContent).toBe('Gadget');
+  });
+});

package/src/detail/KeyValuePairs.tsx

@@ -0,0 +1,107 @@
+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 TextField from '../field/TextField';
+
+export interface KeyValuePairsProps extends Partial<Omit<CloudscapeKeyValuePairsProps, 'items'>> {
+  children?: React.ReactNode;
+  include?: string[];
+  exclude?: string[];
+  columns?: number;
+  minColumnWidth?: number;
+}
+
+export interface KeyValueFieldProps {
+  source?: string;
+  label?: string;
+  children?: React.ReactNode;
+  field?: React.ComponentType<any>;
+}
+
+/**
+ * KeyValuePairs.Field is a helper component to define a field in a KeyValuePairs component.
+ * It mirrors the DataTable.Col pattern.
+ */
+export const KeyValueField = ({ children, source, field: FieldComponent }: KeyValueFieldProps) => {
+  if (children) {
+    return (
+      <>
+        {React.Children.map(children, (child) =>
+          React.isValidElement(child) ? React.cloneElement(child, { source } as any) : child
+        )}
+      </>
+    );
+  }
+  if (FieldComponent) {
+    return <FieldComponent source={source} />;
+  }
+  return <TextField source={source} />;
+};
+
+/**
+ * A KeyValuePairs component that mirrors the Cloudscape KeyValuePairs component
+ * but automatically handles labels and record context for its children.
+ *
+ * @example
+ * <KeyValuePairs columns={2}>
+ *   <TextField source="name" label="Full Name" />
+ *   <KeyValuePairs.Field source="age" label="Age" />
+ * </KeyValuePairs>
+ */
+export const KeyValuePairs = <RecordType extends RaRecord = RaRecord>({
+  children,
+  include,
+  exclude,
+  columns = 3, // Default to 3 columns if not specified
+  minColumnWidth,
+  ...props
+}: KeyValuePairsProps) => {
+  const resource = useResourceContext();
+  const record = useRecordContext<RecordType>();
+  const schemaChildren = useFieldSchema();
+
+  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) {
+      result = result.filter(
+        (child) => React.isValidElement(child) && !exclude.includes((child.props as any).source)
+      );
+    }
+
+    return result;
+  }, [children, schemaChildren, include, exclude]);
+
+  const items =
+    React.Children.map(finalChildren, (child) => {
+      if (!React.isValidElement(child)) {
+        return null;
+      }
+
+      const { source, label } = child.props as any;
+      return {
+        label: <FieldTitle source={source} resource={resource} label={label} />,
+        value: <RecordContextProvider value={record}>{child as any}</RecordContextProvider>,
+      };
+    })?.filter((item): item is Exclude<typeof item, null> => item !== null) || [];
+
+  return <CloudscapeKeyValuePairs {...props} items={items} columns={columns} minColumnWidth={minColumnWidth} />;
+};
+
+KeyValuePairs.Field = KeyValueField;
+
+export default KeyValuePairs;

package/src/detail/Show.test.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { useShowContext, useResourceContext } from '@strato-admin/core';
+import Show from './Show';
+
+// Mock strato-core
+vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
+
+// Mock react-router-dom
+vi.mock('react-router-dom', () => ({
+  useNavigate: vi.fn(),
+}));
+
+// Mock Cloudscape components
+vi.mock('@cloudscape-design/components/container', () => ({
+  default: ({ children, header }: any) => (
+    <div data-testid="container">
+      <div data-testid="container-header">{header}</div>
+      <div data-testid="container-content">{children}</div>
+    </div>
+  ),
+}));
+
+vi.mock('@cloudscape-design/components/header', () => ({
+  default: ({ children, actions }: any) => (
+    <header>
+      <div>{children}</div>
+      <div>{actions}</div>
+    </header>
+  ),
+}));
+
+vi.mock('@cloudscape-design/components/space-between', () => ({
+  default: ({ children }: any) => <div>{children}</div>,
+}));
+
+vi.mock('@cloudscape-design/components/button', () => ({
+  default: ({ children }: any) => <button>{children}</button>,
+}));
+
+describe('Show', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render nothing when loading', () => {
+    (useShowContext as any).mockReturnValue({
+      isLoading: true,
+      record: undefined,
+    });
+
+    const { queryByTestId } = render(
+      <Show>
+        <div data-testid="content" />
+      </Show>,
+    );
+
+    expect(queryByTestId('container')).toBeNull();
+  });
+
+  it('should render content and title when record is loaded', () => {
+    (useShowContext as any).mockReturnValue({
+      isLoading: false,
+      record: { id: 1 }, defaultTitle: 'Products',
+      resource: 'products',
+    });
+    (useResourceContext as any).mockReturnValue('products');
+
+    const { getByTestId, getByText } = render(
+      <Show>
+        <div data-testid="content">Hello World</div>
+      </Show>,
+    );
+
+    expect(getByTestId('container')).toBeDefined();
+    expect(getByTestId('content').textContent).toBe('Hello World');
+    expect(getByText('Products')).toBeDefined();
+  });
+
+  it('should use provided title', () => {
+    (useShowContext as any).mockReturnValue({
+      isLoading: false,
+      record: { id: 1 }, defaultTitle: 'Products',
+      resource: 'products',
+    });
+
+    const { getByText } = render(
+      <Show title="My Product">
+        <div />
+      </Show>,
+    );
+
+    expect(getByText('My Product')).toBeDefined();
+  });
+});

package/src/detail/Show.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { ShowBase, useShowContext, type RaRecord, ResourceSchemaProvider } from '@strato-admin/core';
+import Container from '@cloudscape-design/components/container';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+import { ShowHeader } from './ShowHeader';
+import KeyValuePairs from './KeyValuePairs';
+
+export interface ShowProps<_RecordType extends RaRecord = RaRecord> {
+  children?: React.ReactNode;
+  fieldSchema?: React.ReactNode;
+  title?: React.ReactNode;
+  actions?: React.ReactNode;
+  resource?: string;
+  id?: any;
+  queryOptions?: any;
+  include?: string[];
+  exclude?: string[];
+}
+
+const ShowUI = ({
+  children,
+  resource,
+  fieldSchema,
+  title,
+  actions,
+  include,
+  exclude,
+}: {
+  children?: React.ReactNode;
+  resource?: string;
+  fieldSchema?: React.ReactNode;
+  title?: React.ReactNode;
+  actions?: React.ReactNode;
+  include?: string[];
+  exclude?: string[];
+}) => {
+  const { record, isLoading } = useShowContext();
+
+  if (isLoading || !record) {
+    return null;
+  }
+
+  const finalChildren = children || <KeyValuePairs include={include} exclude={exclude} />;
+
+  return (
+    <ResourceSchemaProvider resource={resource} fieldSchema={fieldSchema}>
+      <Container header={<ShowHeader title={title} actions={actions} />}>
+        <SpaceBetween direction="vertical" size="l">
+          {finalChildren}
+        </SpaceBetween>
+      </Container>
+    </ResourceSchemaProvider>
+  );
+};
+
+/**
+ * A Show component that provides record context and a Cloudscape Container.
+ *
+ * @example
+ * <Show>
+ *   <KeyValuePairs>
+ *     <TextField source="name" />
+ *     <NumberField source="price" />
+ *   </KeyValuePairs>
+ * </Show>
+ * 
+ * @example
+ * // Using FieldSchema from context
+ * <Show include={['name', 'price']} />
+ * 
+ * @example
+ * // Passing a custom field schema
+ * <Show fieldSchema={<FieldSchema>...</FieldSchema>}>
+ *   <KeyValuePairs />
+ * </Show>
+ */
+export const Show = <RecordType extends RaRecord = RaRecord>({
+  children,
+  fieldSchema,
+  title,
+  actions,
+  include,
+  exclude,
+  ...props
+}: ShowProps<RecordType>) => {
+  return (
+    <ShowBase {...props}>
+      <ShowUI 
+        resource={props.resource}
+        title={title} 
+        actions={actions} 
+        include={include} 
+        exclude={exclude}
+        fieldSchema={fieldSchema}
+      >
+        {children}
+      </ShowUI>
+    </ShowBase>
+  );
+};
+
+Show.Header = ShowHeader;
+
+export default Show;

package/src/detail/ShowHeader.test.tsx

@@ -0,0 +1,80 @@
+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';
+
+// Mock strato-core
+vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
+
+// Mock react-router-dom
+vi.mock('react-router-dom', () => ({
+  useNavigate: vi.fn(),
+}));
+
+// Mock Cloudscape components
+vi.mock('@cloudscape-design/components/header', () => ({
+  default: ({ children, actions }: any) => (
+    <header>
+      <div data-testid="header-title">{children}</div>
+      <div data-testid="header-actions">{actions}</div>
+    </header>
+  ),
+}));
+
+vi.mock('@cloudscape-design/components/space-between', () => ({
+  default: ({ children }: any) => <div data-testid="space-between">{children}</div>,
+}));
+
+vi.mock('@cloudscape-design/components/button', () => ({
+  default: ({ children, variant }: any) => (
+    <button data-testid="button" data-variant={variant}>
+      {children}
+    </button>
+  ),
+}));
+
+describe('ShowHeader', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render title from resource', () => {
+    (useResourceContext as any).mockReturnValue('products');
+    (useShowContext as any).mockReturnValue({ record: { id: 1 }, defaultTitle: 'Products' });
+
+    const { getByTestId } = render(<ShowHeader />);
+
+    expect(getByTestId('header-title').textContent).toBe('Products');
+  });
+
+  it('should render provided title', () => {
+    (useResourceContext as any).mockReturnValue('products');
+    (useShowContext as any).mockReturnValue({ record: { id: 1 }, defaultTitle: 'Products' });
+
+    const { getByTestId } = render(<ShowHeader title="My Product" />);
+
+    expect(getByTestId('header-title').textContent).toBe('My Product');
+  });
+
+  it('should render EditButton by default as primary', () => {
+    (useResourceContext as any).mockReturnValue('products');
+    (useShowContext as any).mockReturnValue({ record: { id: 1 }, defaultTitle: 'Products' });
+
+    const { getByText } = render(<ShowHeader />);
+
+    const editButton = getByText('Edit');
+    expect(editButton).toBeDefined();
+    expect(editButton.getAttribute('data-variant')).toBe('primary');
+  });
+
+  it('should render custom actions if provided', () => {
+    (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>} />);
+
+    expect(getByTestId('custom-action')).toBeDefined();
+    expect(queryByText('ra.action.edit')).toBeNull();
+  });
+});