@strato-admin/cloudscape 0.1.1 → 0.3.0

package/src/button/DeleteButton.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { useDeleteController, useTranslate, useResourceDefinition, RaRecord } from '@strato-admin/ra-core';
+import { useSettingValue } from '@strato-admin/core';
+import Modal from '@cloudscape-design/components/modal';
+import Box from '@cloudscape-design/components/box';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+import { Button } from './Button';
+
+export interface DeleteButtonProps {
+  label?: string;
+  variant?: 'primary' | 'normal' | 'link';
+  mutationMode?: 'undoable' | 'optimistic' | 'pessimistic';
+  successMessage?: string;
+  dialogTitle?: string;
+  dialogDescription?: string;
+  record?: RaRecord;
+  redirect?: string;
+}
+
+export const DeleteButton = ({
+  label,
+  variant = 'normal',
+  mutationMode,
+  successMessage,
+  dialogTitle,
+  dialogDescription,
+  record,
+  redirect,
+}: DeleteButtonProps) => {
+  const translate = useTranslate();
+  const { options } = useResourceDefinition();
+  const resolve = useSettingValue();
+  const { handleDelete, isPending, isLoading } = useDeleteController({
+    mutationMode: resolve(mutationMode, 'mutationMode'),
+    successMessage: successMessage ?? options?.deleteSuccessMessage ?? resolve(undefined, 'deleteSuccessMessage'),
+    record,
+    redirect,
+  });
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (options?.canDelete === false) {
+    return null;
+  }
+
+  const isBusy = isPending || isLoading;
+
+  const handleConfirm = () => {
+    handleDelete();
+    setIsOpen(false);
+  };
+
+  const defaultTitle = translate('strato.message.delete_title', {
+    _: 'Delete this item',
+  });
+
+  const defaultDescription = translate('strato.message.delete_content', {
+    _: 'Are you sure you want to delete this item?',
+  });
+
+  return (
+    <>
+      <Button
+        variant={variant}
+        onClick={() => setIsOpen(true)}
+        loading={isBusy}
+        disabled={isBusy}
+        data-testid="delete-button"
+      >
+        {label || translate('strato.action.delete', { _: 'Delete' })}
+      </Button>
+      <Modal
+        onDismiss={() => setIsOpen(false)}
+        visible={isOpen}
+        closeAriaLabel={translate('strato.action.close', { _: 'Close' })}
+        footer={
+          <Box float="right">
+            <SpaceBetween direction="horizontal" size="xs">
+              <Button variant="link" onClick={() => setIsOpen(false)}>
+                {translate('strato.action.cancel', { _: 'Cancel' })}
+              </Button>
+              <Button variant="primary" onClick={handleConfirm} loading={isBusy} data-testid="confirm-delete">
+                {translate('strato.action.confirm', { _: 'Confirm' })}
+              </Button>
+            </SpaceBetween>
+          </Box>
+        }
+        header={dialogTitle || defaultTitle}
+      >
+        {dialogDescription || defaultDescription}
+      </Modal>
+    </>
+  );
+};
+
+export default DeleteButton;

package/src/button/EditButton.tsx

@@ -1,14 +1,15 @@
-
-import { useResourceContext, useRecordContext, useTranslate, useCreatePath, RaRecord } from '@strato-admin/core';
+import { useResourceContext, useRecordContext, useTranslate, RaRecord } from '@strato-admin/ra-core';
+import { useCreatePath } from '@strato-admin/core';
 import { useNavigate } from 'react-router-dom';
 import { Button, ButtonProps } from './Button';
+import type { ButtonProps as CloudscapeButtonProps } from '@cloudscape-design/components/button';
 
 export interface EditButtonProps extends Omit<ButtonProps, 'children'> {
   label?: string;
   record?: RaRecord;
 }
 
-export const EditButton = ({ label, record: recordProp, variant = 'primary', ...props }: EditButtonProps) => {
+export const EditButton = ({ label, record: recordProp, variant = 'normal', ...props }: EditButtonProps) => {
   const resource = useResourceContext();
   const record = useRecordContext(recordProp);
   const translate = useTranslate();
@@ -19,18 +20,18 @@ export const EditButton = ({ label, record: recordProp, variant = 'primary', ...
     return null;
   }
 
-  const handleClick = () => {
-    const path = createPath({
-      resource,
-      id: record.id,
-      type: 'edit',
-    });
-    navigate(path);
+  const path = createPath({ resource, id: record.id, type: 'edit' });
+
+  const handleClick: NonNullable<CloudscapeButtonProps['onClick']> = (e) => {
+    if (!e.detail.metaKey && !e.detail.ctrlKey && !e.detail.shiftKey && e.detail.button === 0) {
+      e.preventDefault();
+      navigate(path);
+    }
   };
 
   return (
-    <Button variant={variant} onClick={handleClick} {...props}>
-      {label || translate('ra.action.edit', { _: 'Edit' })}
+    <Button variant={variant} href={path} onClick={handleClick} iconName="edit" {...props}>
+      {label || translate('strato.action.edit', { _: 'Edit' })}
     </Button>
   );
 };

package/src/button/SaveButton.tsx

@@ -1,5 +1,4 @@
-
-import { useTranslate } from '@strato-admin/core';
+import { useTranslate } from '@strato-admin/ra-core';
 import { Button, ButtonProps } from './Button';
 
 export interface SaveButtonProps extends Omit<ButtonProps, 'children'> {
@@ -11,7 +10,7 @@ export const SaveButton = ({ label, variant = 'primary', ...props }: SaveButtonP
 
   return (
     <Button variant={variant} formAction="submit" nativeButtonAttributes={{ type: 'submit' }} {...props}>
-      {label || translate('ra.action.save', { _: 'Save' })}
+      {label || translate('strato.action.save', { _: 'Save' })}
     </Button>
   );
 };

package/src/button/index.ts

@@ -1,5 +1,7 @@
 export * from './Button';
 export * from './EditButton';
 export * from './BulkDeleteButton';
+export * from './DeleteButton';
 export * from './SaveButton';
 export * from './CreateButton';
+export * from './CancelButton';

package/src/collection-hooks/interfaces.ts

@@ -18,9 +18,13 @@ export interface CollectionPreferences {
 }
 
 export interface UseCollectionOptions<_T> {
-  filtering?: any;
-  pagination?: any;
-  sorting?: any;
+  /**
+   * Set to true when using a client-side data provider where the data array
+   * contains ALL records, not just the current page. The hook will slice the
+   * array for pagination instead of relying on the server.
+   * @default false
+   */
+  clientSidePagination?: boolean;
   preferences?: {
     pageSizeOptions?: ReadonlyArray<{ value: number; label?: string }>;
     visibleContentOptions?: ReadonlyArray<{

package/src/collection-hooks/useCollection.test.ts

@@ -1,9 +1,9 @@
 import { renderHook, act } from '@testing-library/react';
 import { vi, describe, it, expect } from 'vitest';
-import { useListContext } from '@strato-admin/core';
+import { useListContext } from '@strato-admin/ra-core';
 import { useCollection } from './useCollection';
 
-vi.mock('@strato-admin/core', () => ({
+vi.mock('@strato-admin/ra-core', () => ({
   useListContext: vi.fn(),
 }));
 
@@ -375,6 +375,32 @@ describe('useCollection', () => {
     expect(result.current.preferencesProps.preferences.contentDisplay).toEqual(contentDisplay);
   });
 
+  it('should re-sync visibleContent when options.preferences.visibleContent prop changes after mount', () => {
+    (useListContext as any).mockReturnValue({
+      data: [],
+      perPage: 25,
+      setPerPage: vi.fn(),
+      page: 1,
+      isPending: false,
+      isFetching: false,
+      isLoading: false,
+      setPage: vi.fn(),
+      selectedIds: [],
+      onSelect: vi.fn(),
+    });
+
+    const { result, rerender } = renderHook(
+      ({ visibleContent }: { visibleContent: ReadonlyArray<string> }) =>
+        useCollection({ preferences: { visibleContent } }),
+      { initialProps: { visibleContent: ['id'] } },
+    );
+
+    expect(result.current.preferencesProps.preferences.visibleContent).toEqual(['id']);
+
+    rerender({ visibleContent: ['id', 'name'] });
+    expect(result.current.preferencesProps.preferences.visibleContent).toEqual(['id', 'name']);
+  });
+
   it('should update wrapLines and stripedRows when preferences onConfirm is called', () => {
     (useListContext as any).mockReturnValue({
       data: [],
@@ -411,3 +437,90 @@ describe('useCollection', () => {
     expect(result.current.preferencesProps.preferences.stripedRows).toBe(true);
   });
 });
+
+describe('useCollection — client-side pagination', () => {
+  const makeData = (count: number) => Array.from({ length: count }, (_, i) => ({ id: i + 1, name: `Item ${i + 1}` }));
+
+  const mockContext = (overrides: object) =>
+    (useListContext as any).mockReturnValue({
+      data: [],
+      total: undefined,
+      page: 1,
+      perPage: 25,
+      isPending: false,
+      isFetching: false,
+      isLoading: false,
+      setPage: vi.fn(),
+      setPerPage: vi.fn(),
+      selectedIds: [],
+      onSelect: vi.fn(),
+      sort: undefined,
+      setSort: vi.fn(),
+      filterValues: {},
+      setFilters: vi.fn(),
+      ...overrides,
+    });
+
+  it('should return all data unsliced when clientSidePagination is false (default)', () => {
+    const data = makeData(10);
+    mockContext({ data, total: 10, page: 1, perPage: 3 });
+
+    const { result } = renderHook(() => useCollection({}));
+
+    expect(result.current.items).toEqual(data);
+  });
+
+  it('should return the first page slice when clientSidePagination is true', () => {
+    const data = makeData(10);
+    mockContext({ data, total: 10, page: 1, perPage: 3 });
+
+    const { result } = renderHook(() => useCollection({ clientSidePagination: true }));
+
+    expect(result.current.items).toEqual([
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+      { id: 3, name: 'Item 3' },
+    ]);
+  });
+
+  it('should return the correct slice for a middle page', () => {
+    const data = makeData(10);
+    mockContext({ data, total: 10, page: 2, perPage: 3 });
+
+    const { result } = renderHook(() => useCollection({ clientSidePagination: true }));
+
+    expect(result.current.items).toEqual([
+      { id: 4, name: 'Item 4' },
+      { id: 5, name: 'Item 5' },
+      { id: 6, name: 'Item 6' },
+    ]);
+  });
+
+  it('should return the remaining items on the last partial page', () => {
+    const data = makeData(10);
+    mockContext({ data, total: 10, page: 4, perPage: 3 });
+
+    const { result } = renderHook(() => useCollection({ clientSidePagination: true }));
+
+    expect(result.current.items).toEqual([{ id: 10, name: 'Item 10' }]);
+  });
+
+  it('should NOT slice when a server-side provider returns all items in one response', () => {
+    // 30 items, perPage=25 — old heuristic would have incorrectly sliced to 25
+    const data = makeData(30);
+    mockContext({ data, total: 30, page: 1, perPage: 25 });
+
+    const { result } = renderHook(() => useCollection({}));
+
+    expect(result.current.items).toEqual(data);
+    expect(result.current.items).toHaveLength(30);
+  });
+
+  it('should return undefined items when data is undefined and clientSidePagination is true', () => {
+    mockContext({ data: undefined, total: undefined, page: 1, perPage: 25 });
+
+    const { result } = renderHook(() => useCollection({ clientSidePagination: true }));
+
+    expect(result.current.items).toBeUndefined();
+  });
+});

package/src/collection-hooks/useCollection.ts

@@ -1,5 +1,5 @@
-import { useState, useMemo } from 'react';
-import { useListContext, RaRecord } from '@strato-admin/core';
+import { useState, useMemo, useEffect } from 'react';
+import { useListContext, RaRecord } from '@strato-admin/ra-core';
 import { UseCollectionOptions, UseCollectionResult, TableColumnDisplay } from './interfaces';
 
 export function useCollection<T extends RaRecord>(options: UseCollectionOptions<T>): UseCollectionResult<T> {
@@ -31,17 +31,24 @@ export function useCollection<T extends RaRecord>(options: UseCollectionOptions<
     options.preferences?.visibleContent ?? options.preferences?.visibleContentOptions?.map((o) => o.id),
   );
   const [contentDisplay, setContentDisplay] = useState<ReadonlyArray<TableColumnDisplay> | undefined>(
-    options.preferences?.contentDisplay ?? options.preferences?.contentDisplayOptions?.map((o) => ({ id: o.id, visible: true })),
+    options.preferences?.contentDisplay ??
+      options.preferences?.contentDisplayOptions?.map((o) => ({ id: o.id, visible: true })),
   );
 
-  useMemo(() => {
+  useEffect(() => {
     setVisibleContent(
       options.preferences?.visibleContent ?? options.preferences?.visibleContentOptions?.map((o) => o.id),
     );
     setContentDisplay(
-      options.preferences?.contentDisplay ?? options.preferences?.contentDisplayOptions?.map((o) => ({ id: o.id, visible: true })),
+      options.preferences?.contentDisplay ??
+        options.preferences?.contentDisplayOptions?.map((o) => ({ id: o.id, visible: true })),
     );
-  }, [options.preferences?.visibleContent, options.preferences?.visibleContentOptions, options.preferences?.contentDisplay, options.preferences?.contentDisplayOptions]);
+  }, [
+    options.preferences?.visibleContent,
+    options.preferences?.visibleContentOptions,
+    options.preferences?.contentDisplay,
+    options.preferences?.contentDisplayOptions,
+  ]);
 
   const selectedItems = (selectedIds || []).map((id) => {
     const item = data?.find((i) => i.id === id);
@@ -50,15 +57,13 @@ export function useCollection<T extends RaRecord>(options: UseCollectionOptions<
   });
 
   const items = useMemo(() => {
-    // If it's a client-side list (data contains all records), we need to slice it for pagination.
-    // We detect this by checking if data.length equals total and if data.length is greater than perPage.
-    if (data && total === data.length && data.length > (perPage || 0)) {
+    if (options.clientSidePagination && data) {
       const p = page || 1;
       const pp = perPage || 25;
       return data.slice((p - 1) * pp, p * pp);
     }
     return data;
-  }, [data, total, page, perPage]);
+  }, [data, options.clientSidePagination, page, perPage]);
 
   return {
     items,

package/src/create/Create.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 } from '@strato-admin/core';
+import { useResourceContext } from '@strato-admin/ra-core';
 import { Create } from './Create';
 
-// Mock strato-core
+vi.mock('@strato-admin/ra-core', () => import('../__mocks__/ra-core'));
 vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
 
 // Mock Cloudscape components
@@ -46,7 +46,7 @@ describe('Create', () => {
 
     expect(getByTestId('container')).toBeDefined();
     expect(getByTestId('content').textContent).toBe('Create New');
-    expect(getByText('Products')).toBeDefined();
+    expect(getByText(/Products/)).toBeDefined();
   });
 
   it('should use provided title', () => {

package/src/create/Create.tsx

@@ -1,45 +1,76 @@
 import React from 'react';
-import { CreateBase, type RaRecord, ResourceSchemaProvider } from '@strato-admin/core';
+import { CreateBase, type RaRecord, type CreateBaseProps, Identifier, useTranslate } from '@strato-admin/ra-core';
+import {
+  ResourceSchemaProvider,
+  useResourceSchema,
+  useConstructedPageTitle,
+  useSettingValue,
+} 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> {
+export interface CreateProps<
+  RecordType extends Omit<RaRecord, 'id'> = any,
+  ResultRecordType extends RaRecord = RecordType & { id: Identifier },
+  MutationOptionsError = Error,
+> extends CreateBaseProps<RecordType, ResultRecordType, MutationOptionsError> {
   children?: React.ReactNode;
-  inputSchema?: React.ReactNode;
-  title?: React.ReactNode;
+  title?: React.ReactNode | ((record: Partial<RecordType>) => React.ReactNode);
+  description?: React.ReactNode | ((record: Partial<RecordType>) => React.ReactNode);
   actions?: React.ReactNode;
-  resource?: string;
-  record?: Partial<RecordType>;
-  redirect?: any;
-  transform?: any;
-  mutationOptions?: any;
   include?: string[];
   exclude?: string[];
+  saveButtonLabel?: string;
 }
 
 const CreateUI = ({
   children,
-  resource,
-  inputSchema,
   title,
   actions,
+  description,
   include,
   exclude,
+  saveButtonLabel,
 }: {
   children?: React.ReactNode;
-  resource?: string;
-  inputSchema?: React.ReactNode;
-  title?: React.ReactNode;
+  title?: React.ReactNode | ((record: any) => React.ReactNode);
   actions?: React.ReactNode;
+  description?: React.ReactNode | ((record: any) => React.ReactNode);
   include?: string[];
   exclude?: string[];
+  saveButtonLabel?: string;
 }) => {
-  const finalChildren = children || <Form include={include} exclude={exclude} />;
+  const { label, createTitle, createDescription } = useResourceSchema();
+  const translate = useTranslate();
+  const constructedTitle = useConstructedPageTitle('create', 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(createTitle)) return createTitle;
+    if (createTitle) return translate(createTitle as string);
+    return constructedTitle;
+  }, [title, createTitle, 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(createDescription)) return createDescription;
+    if (createDescription) return translate(createDescription as string);
+    return undefined;
+  }, [description, createDescription, translate]);
+
+  const finalSaveButtonLabel = saveButtonLabel ? translate(saveButtonLabel) : translate('Create');
+
+  const finalChildren = children || <Form include={include} exclude={exclude} saveButtonLabel={finalSaveButtonLabel} />;
+
   return (
-    <ResourceSchemaProvider resource={resource} inputSchema={inputSchema}>
-      <Container header={<CreateHeader title={title} actions={actions} />}>{finalChildren}</Container>
-    </ResourceSchemaProvider>
+    <Container header={<CreateHeader title={finalTitle} description={finalDescription} actions={actions} />}>
+      {finalChildren}
+    </Container>
   );
 };
 
@@ -52,38 +83,38 @@ const CreateUI = ({
  *     <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,
+  description,
   include,
   exclude,
+  redirect,
+  saveButtonLabel,
   ...props
 }: CreateProps<RecordType>) => {
+  const resolve = useSettingValue();
+  const resolvedRedirect = redirect !== undefined ? redirect : resolve(undefined, 'createRedirect');
   return (
-    <CreateBase {...props}>
-      <CreateUI 
-        resource={props.resource}
-        title={title} 
-        actions={actions} 
-        include={include} 
-        exclude={exclude}
-        inputSchema={inputSchema}
-      >
-        {children}
-      </CreateUI>
+    <CreateBase redirect={resolvedRedirect} {...props}>
+      <ResourceSchemaProvider resource={props.resource}>
+        <CreateUI
+          title={title}
+          actions={actions}
+          description={description}
+          include={include}
+          exclude={exclude}
+          saveButtonLabel={saveButtonLabel}
+        >
+          {children}
+        </CreateUI>
+      </ResourceSchemaProvider>
     </CreateBase>
   );
 };

package/src/create/CreateHeader.tsx

@@ -1,13 +1,13 @@
 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';
+import { useCreateContext, useTranslate } from '@strato-admin/ra-core';
 
-export interface CreateHeaderProps extends Omit<HeaderProps, 'children'> {
+export interface CreateHeaderProps
+  extends Pick<HeaderProps, 'variant' | 'counter' | 'actions' | 'description' | 'info' | 'headingTagOverride'> {
   title?: React.ReactNode;
 }
 
-export const CreateHeader = ({ title, actions, ...props }: CreateHeaderProps) => {
+export const CreateHeader = ({ title, actions, description, counter, info, variant = 'h2', headingTagOverride }: CreateHeaderProps) => {
   const translate = useTranslate();
   const { defaultTitle } = useCreateContext();
 
@@ -18,14 +18,10 @@ export const CreateHeader = ({ title, actions, ...props }: CreateHeaderProps) =>
     return defaultTitle;
   }, [title, defaultTitle, translate]);
 
-  const headerActions = actions || (
-    <SpaceBetween direction="horizontal" size="xs">
-      {/* Add default create actions here if needed */}
-    </SpaceBetween>
-  );
+  const headerActions = actions ?? null;
 
   return (
-    <Header variant="h2" {...props} actions={headerActions}>
+    <Header variant={variant} actions={headerActions} description={description} counter={counter} info={info} headingTagOverride={headingTagOverride}>
       {headerTitle}
     </Header>
   );

package/src/defaults.tsx

@@ -0,0 +1,28 @@
+import type { AdminSettings } from '@strato-admin/core';
+import { Message } from './i18n/Message';
+import { Table } from './list';
+import { DetailHub } from './detail';
+
+/**
+ * The framework's last-resort default values for all Admin-level configurable settings.
+ * Override any of these via the `settings` prop on <Admin>.
+ */
+export const FRAMEWORK_DEFAULTS: AdminSettings = {
+  listComponent: Table,
+  detailComponent: DetailHub,
+  editSuccessMessage: <Message>Element updated</Message>,
+  deleteSuccessMessage: <Message>Element deleted</Message>,
+  bulkDeleteSuccessMessage: (countDeleted: number) => (
+    <Message vars={{ countDeleted }}>
+      {'{countDeleted, plural, one {# element deleted} other {# elements deleted}}'}
+    </Message>
+  ),
+  mutationMode: 'pessimistic',
+  createRedirect: 'list',
+  editRedirect: 'detail',
+  listPageSize: 25,
+  listPageSizes: [10, 25, 50, 100],
+  listPageSizeLabel: (pageSize: number) => (
+    <Message vars={{ pageSize }}>{'{pageSize, plural, one {# item} other {# items}}'}</Message>
+  ),
+};