@strato-admin/cloudscape 0.1.0

package/src/detail/ShowHeader.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Header, { HeaderProps } from '@cloudscape-design/components/header';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+import { useResourceContext, useShowContext, useTranslate, useResourceDefinitions } from '@strato-admin/core';
+import { EditButton } from '../button/EditButton';
+
+export interface ShowHeaderProps extends Omit<HeaderProps, 'children'> {
+  title?: React.ReactNode;
+}
+
+export const ShowHeader = ({ title, actions, ...props }: ShowHeaderProps) => {
+  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} />
+    </SpaceBetween>
+  );
+
+  return (
+    <Header variant="h2" {...props} actions={headerActions}>
+      {headerTitle}
+    </Header>
+  );
+};
+
+export default ShowHeader;

package/src/detail/index.ts

@@ -0,0 +1,3 @@
+export * from './KeyValuePairs';
+export * from './Show';
+export * from './ShowHeader';

package/src/edit/Edit.test.tsx

@@ -0,0 +1,91 @@
+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 { Edit } from './Edit';
+
+// Mock 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">
+      <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('Edit', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render nothing when loading', () => {
+    (useEditContext as any).mockReturnValue({
+      isLoading: true,
+      record: undefined,
+    });
+
+    const { queryByTestId } = render(
+      <Edit>
+        <div data-testid="content" />
+      </Edit>,
+    );
+
+    expect(queryByTestId('container')).toBeNull();
+  });
+
+  it('should render content and title when record is loaded', () => {
+    (useEditContext as any).mockReturnValue({
+      isLoading: false,
+      record: { id: 1 }, defaultTitle: 'Products',
+      resource: 'products',
+    });
+    (useResourceContext as any).mockReturnValue('products');
+
+    const { getByTestId, getByText } = render(
+      <Edit>
+        <div data-testid="content">Hello World</div>
+      </Edit>,
+    );
+
+    expect(getByTestId('container')).toBeDefined();
+    expect(getByTestId('content').textContent).toBe('Hello World');
+    expect(getByText('Products')).toBeDefined();
+  });
+
+  it('should use provided title', () => {
+    (useEditContext as any).mockReturnValue({
+      isLoading: false,
+      record: { id: 1 }, defaultTitle: 'Products',
+      resource: 'products',
+    });
+
+    const { getByText } = render(
+      <Edit title="My Product">
+        <div />
+      </Edit>,
+    );
+
+    expect(getByText('My Product')).toBeDefined();
+  });
+});

package/src/edit/Edit.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { EditBase, useEditContext, type RaRecord, ResourceSchemaProvider } from '@strato-admin/core';
+import Container from '@cloudscape-design/components/container';
+import { EditHeader } from './EditHeader';
+import Form from '../form/Form';
+
+export interface EditProps<_RecordType extends RaRecord = RaRecord> {
+  children?: React.ReactNode;
+  inputSchema?: React.ReactNode;
+  title?: React.ReactNode;
+  actions?: React.ReactNode;
+  resource?: string;
+  id?: any;
+  mutationMode?: 'pessimistic' | 'optimistic' | 'undoable';
+  mutationOptions?: any;
+  queryOptions?: any;
+  redirect?: any;
+  transform?: any;
+  include?: string[];
+  exclude?: string[];
+}
+
+const EditUI = ({
+  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 { record, isLoading } = useEditContext();
+
+  if (isLoading || !record) {
+    return null;
+  }
+
+  const finalChildren = children || <Form include={include} exclude={exclude} />;
+
+  return (
+    <ResourceSchemaProvider resource={resource} inputSchema={inputSchema}>
+      <Container header={<EditHeader title={title} actions={actions} />}>{finalChildren}</Container>
+    </ResourceSchemaProvider>
+  );
+};
+
+/**
+ * An Edit component that provides record context and a Cloudscape Container.
+ *
+ * @example
+ * <Edit>
+ *   <Form>
+ *     <TextInput source="name" />
+ *   </Form>
+ * </Edit>
+ * 
+ * @example
+ * // Using InputSchema from context
+ * <Edit include={['name', 'price']} />
+ * 
+ * @example
+ * // Passing a custom input schema
+ * <Edit inputSchema={<InputSchema>...</InputSchema>}>
+ *   <Form />
+ * </Edit>
+ */
+export const Edit = <RecordType extends RaRecord = any>({
+  children,
+  inputSchema,
+  title,
+  actions,
+  include,
+  exclude,
+  ...props
+}: EditProps<RecordType>) => {
+  return (
+    <EditBase {...props}>
+      <EditUI 
+        resource={props.resource}
+        title={title} 
+        actions={actions} 
+        include={include} 
+        exclude={exclude}
+        inputSchema={inputSchema}
+      >
+        {children}
+      </EditUI>
+    </EditBase>
+  );
+};
+
+Edit.Header = EditHeader;
+
+export default Edit;

package/src/edit/EditHeader.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 { useResourceContext, useEditContext, useTranslate, useResourceDefinitions } from '@strato-admin/core';
+
+export interface EditHeaderProps extends Omit<HeaderProps, 'children'> {
+  title?: React.ReactNode;
+}
+
+export const EditHeader = ({ title, actions, ...props }: EditHeaderProps) => {
+  const translate = useTranslate();
+  const { defaultTitle } = useEditContext();
+
+  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 edit actions here if needed */}
+    </SpaceBetween>
+  );
+
+  return (
+    <Header variant="h2" {...props} actions={headerActions}>
+      {headerTitle}
+    </Header>
+  );
+};
+
+export default EditHeader;

package/src/edit/index.ts

@@ -0,0 +1,2 @@
+export * from './Edit';
+export * from './EditHeader';

package/src/field/ArrayField.tsx

@@ -0,0 +1,51 @@
+import { useRecordContext, useList, ListContextProvider, ResourceContextProvider, type RaRecord } from '@strato-admin/core';
+import { type FieldProps } from './types';
+
+export interface ArrayFieldProps<RecordType extends RaRecord = RaRecord> extends FieldProps<RecordType> {
+  /**
+   * Thecomponents to render for each item in the array.
+   */
+  children: React.ReactNode;
+  /**
+   * Number of items per page if pagination is used within the field.
+   */
+  perPage?: number;
+}
+
+/**
+ * ArrayField component that wraps its children with a ListContextProvider
+ * and ResourceContextProvider initialized with the array data and resource name.
+ *
+ * This allows using components that expect a ListContext or ResourceContext
+ * (like DataTable) to display nested arrays within a record.
+ *
+ * @example
+ * <ArrayField source="products" resource="products">
+ *   <DataTable variant="embedded">
+ *     <DataTable.Col source="title" label="Title" />
+ *     <DataTable.NumberCol source="price" label="Price" />
+ *   </DataTable>
+ * </ArrayField>
+ */
+export const ArrayField = <RecordType extends RaRecord = any>(props: ArrayFieldProps<RecordType>) => {
+  const { source, resource, children, perPage = 10 } = props;
+
+  const record = useRecordContext<RecordType>();
+  const data = (source && record?.[source]) || [];
+
+  const targetResource = resource || source || '';
+
+  const listContext = useList({
+    data,
+    resource: targetResource,
+    perPage,
+  });
+
+  return (
+    <ResourceContextProvider value={targetResource}>
+      <ListContextProvider value={listContext}>{children as any}</ListContextProvider>
+    </ResourceContextProvider>
+  );
+};
+
+export default ArrayField;

package/src/field/BadgeField.tsx

@@ -0,0 +1,33 @@
+import Badge, { type BadgeProps } from '@cloudscape-design/components/badge';
+import { type RaRecord, useFieldValue, useRecordContext } from '@strato-admin/core';
+import RecordLink from '../RecordLink';
+import { type FieldProps } from './types';
+
+export interface BadgeFieldProps<RecordType extends RaRecord = RaRecord>
+  extends FieldProps<RecordType> {
+  /**
+   * The color of the badge.
+   * @default "grey"
+   */
+  color?: BadgeProps['color'];
+}
+
+const BadgeField = <RecordType extends RaRecord = RaRecord>(props: BadgeFieldProps<RecordType>) => {
+  const { source, record: recordProp, emptyText, link, color = 'grey' } = props;
+
+  const record = useRecordContext<RecordType>({ record: recordProp });
+  const value = useFieldValue<RecordType>({ source: source as any, record });
+  const hasValue = value !== null && value !== undefined && value !== '';
+
+  if (!hasValue) {
+    return <>{emptyText ?? null}</>;
+  }
+
+  return (
+    <RecordLink link={link}>
+      <Badge color={color}>{String(value)}</Badge>
+    </RecordLink>
+  );
+};
+
+export default BadgeField;

package/src/field/BooleanField.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BooleanField from './BooleanField';
+import { withRaContext } from '../stories/RaStoryDecorator';
+
+const meta: Meta<typeof BooleanField> = {
+  title: 'Fields/BooleanField',
+  component: BooleanField,
+  tags: ['autodocs'],
+  decorators: [withRaContext({ id: 1, isTrue: true, isFalse: false, isUndefined: undefined })],
+};
+
+export default meta;
+type Story = StoryObj<typeof BooleanField>;
+
+export const TrueValue: Story = {
+  args: {
+    source: 'isTrue',
+  },
+};
+
+export const FalseValue: Story = {
+  args: {
+    source: 'isFalse',
+  },
+};
+
+export const UndefinedValue: Story = {
+  args: {
+    source: 'isUndefined',
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    source: 'isTrue',
+    showLabel: true,
+  },
+};
+
+export const CustomLabels: Story = {
+  args: {
+    source: 'isTrue',
+    showLabel: true,
+    trueLabel: 'Active',
+    falseLabel: 'Inactive',
+  },
+};
+
+export const CustomLabelsFalse: Story = {
+  args: {
+    source: 'isFalse',
+    showLabel: true,
+    trueLabel: 'Active',
+    falseLabel: 'Inactive',
+  },
+};

package/src/field/BooleanField.test.tsx

@@ -0,0 +1,63 @@
+
+import { render } from '@testing-library/react';
+import { vi, describe, it, expect } from 'vitest';
+import { useFieldValue, useRecordContext } from '@strato-admin/core';
+import BooleanField from './BooleanField';
+
+// Mock ra-core
+vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
+
+// Mock Cloudscape components
+vi.mock('@cloudscape-design/components/status-indicator', () => ({
+  default: ({ children, type }: any) => (
+    <div data-testid="status-indicator" data-type={type}>
+      {children}
+    </div>
+  ),
+}));
+
+describe('BooleanField', () => {
+  it('should render check icon for true value', () => {
+    const record = { is_active: true };
+    (useRecordContext as any).mockReturnValue(record);
+    (useFieldValue as any).mockReturnValue(true);
+
+    const { getByTestId } = render(<BooleanField source="is_active" />);
+
+    const indicator = getByTestId('status-indicator');
+    expect(indicator.getAttribute('data-type')).toBe('success');
+  });
+
+  it('should render close icon for false value', () => {
+    const record = { is_active: false };
+    (useRecordContext as any).mockReturnValue(record);
+    (useFieldValue as any).mockReturnValue(false);
+
+    const { getByTestId } = render(<BooleanField source="is_active" />);
+
+    const indicator = getByTestId('status-indicator');
+    expect(indicator.getAttribute('data-type')).toBe('not-started');
+  });
+
+  it('should render label when showLabel is true', () => {
+    const record = { is_active: true };
+    (useRecordContext as any).mockReturnValue(record);
+    (useFieldValue as any).mockReturnValue(true);
+
+    const { getByText } = render(<BooleanField source="is_active" showLabel />);
+
+    expect(getByText('Yes')).toBeDefined();
+  });
+
+  it('should render custom labels', () => {
+    const record = { is_active: false };
+    (useRecordContext as any).mockReturnValue(record);
+    (useFieldValue as any).mockReturnValue(false);
+
+    const { getByText } = render(
+      <BooleanField source="is_active" showLabel trueLabel="Enabled" falseLabel="Disabled" />,
+    );
+
+    expect(getByText('Disabled')).toBeDefined();
+  });
+});

package/src/field/BooleanField.tsx

@@ -0,0 +1,42 @@
+import StatusIndicator from '@cloudscape-design/components/status-indicator';
+import { RaRecord, useFieldValue, useRecordContext, useTranslate } from '@strato-admin/core';
+import RecordLink from '../RecordLink';
+import { type FieldProps } from './types';
+
+export type BooleanFieldProps<RecordType extends RaRecord = RaRecord> = FieldProps<RecordType> & {
+  /**
+   * The label to display when the value is true. Defaults to "Yes".
+   */
+  trueLabel?: string;
+  /**
+   * The label to display when the value is false. Defaults to "No".
+   */
+  falseLabel?: string;
+  /**
+   * Whether to show the text label alongside the icon.
+   */
+  showLabel?: boolean;
+};
+
+const BooleanField = <RecordType extends RaRecord = RaRecord>(props: BooleanFieldProps<RecordType>) => {
+  const { source, record: recordProp, trueLabel, falseLabel, showLabel = false, link } = props;
+  const record = useRecordContext<RecordType>({ record: recordProp });
+  const value = useFieldValue<RecordType>({ source: source as any, record });
+  const translate = useTranslate();
+
+  const isTrue = !!value;
+
+  const content = isTrue ? (
+    <StatusIndicator type="success" colorOverride="green">
+      {showLabel ? (trueLabel ?? translate('ra.boolean.true', { _: 'Yes' })) : null}
+    </StatusIndicator>
+  ) : (
+    <StatusIndicator type="not-started">
+      {showLabel ? (falseLabel ?? translate('ra.boolean.false', { _: 'No' })) : null}
+    </StatusIndicator>
+  );
+
+  return <RecordLink link={link}>{content}</RecordLink>;
+};
+
+export default BooleanField;

package/src/field/CurrencyField.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CurrencyField from './CurrencyField';
+import { withRaContext } from '../stories/RaStoryDecorator';
+
+const meta: Meta<typeof CurrencyField> = {
+  title: 'Fields/CurrencyField',
+  component: CurrencyField,
+  tags: ['autodocs'],
+  decorators: [
+    withRaContext({
+      id: 1,
+      price: 123.45,
+      quantity: 10,
+      score: 0.85,
+      empty: null,
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof CurrencyField>;
+
+export const Basic: Story = {
+  args: {
+    source: 'price',
+    currency: 'USD',
+  },
+};
+
+export const CustomLocale: Story = {
+  args: {
+    source: 'price',
+    locales: 'de-DE',
+    currency: 'EUR',
+  },
+};
+
+export const WithOptions: Story = {
+  args: {
+    source: 'price',
+    currency: 'USD',
+    options: { minimumFractionDigits: 2 },
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    source: 'empty',
+    currency: 'USD',
+  },
+};
+
+export const WithEmptyText: Story = {
+  args: {
+    source: 'empty',
+    emptyText: 'N/A',
+    currency: 'USD',
+  },
+};
+
+export const WithLink: Story = {
+  args: {
+    source: 'price',
+    link: 'show',
+    currency: 'USD',
+  },
+};

package/src/field/CurrencyField.tsx

@@ -0,0 +1,45 @@
+import { type RaRecord, useFieldValue, useRecordContext, useLocale } from '@strato-admin/core';
+import RecordLink from '../RecordLink';
+import { type FieldProps } from './types';
+
+export type CurrencyFieldProps<RecordType extends RaRecord = RaRecord> = FieldProps<RecordType> & {
+  /**
+   * Options for Intl.NumberFormat.
+   */
+  options?: Intl.NumberFormatOptions;
+  /**
+   * Locale(s) to use for formatting. Defaults to the current app locale.
+   */
+  locales?: string | string[];
+  /**
+   * The currency to use in currency formatting.
+   * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currency_2
+   */
+  currency: string;
+};
+
+const CurrencyField = <RecordType extends RaRecord = RaRecord>(props: CurrencyFieldProps<RecordType>) => {
+  const { source, record: recordProp, emptyText, options, locales, link, currency } = props;
+  const record = useRecordContext<RecordType>({ record: recordProp });
+  const value = useFieldValue<RecordType>({ source: source as any, record });
+  const currentLocale = useLocale();
+  const hasValue = value !== null && value !== undefined && value !== '';
+
+  if (!hasValue) {
+    return <>{emptyText ?? null}</>;
+  }
+
+  const numberValue = typeof value === 'string' ? parseFloat(value) : value;
+  const formatOptions: Intl.NumberFormatOptions = {
+    style: 'currency',
+    currency,
+    ...options,
+  };
+  const formattedValue = new Intl.NumberFormat(locales || currentLocale, formatOptions).format(numberValue);
+
+  return <RecordLink link={link}>{formattedValue}</RecordLink>;
+};
+
+(CurrencyField as any).isNumberColumn = true;
+
+export default CurrencyField;