@strato-admin/cloudscape 0.1.0

package/src/field/StatusIndicatorField.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import StatusIndicatorField from './StatusIndicatorField';
+import { withRaContext } from '../stories/RaStoryDecorator';
+
+const meta: Meta<typeof StatusIndicatorField> = {
+  title: 'Fields/StatusIndicatorField',
+  component: StatusIndicatorField,
+  tags: ['autodocs'],
+  decorators: [
+    withRaContext({
+      id: 1,
+      status: 'active',
+      error_status: 'error',
+      warning_status: 'warning',
+      loading_status: 'loading',
+      custom_value: 'Ready',
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof StatusIndicatorField>;
+
+export const Basic: Story = {
+  args: {
+    source: 'status',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    source: 'status',
+    type: 'success',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    source: 'error_status',
+    type: 'error',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    source: 'warning_status',
+    type: 'warning',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    source: 'loading_status',
+    type: 'loading',
+  },
+};
+
+export const WithMapping: Story = {
+  args: {
+    source: 'status',
+    mapping: {
+      active: 'success',
+      inactive: 'stopped',
+    },
+  },
+};
+
+export const DynamicType: Story = {
+  args: {
+    source: 'status',
+    type: (value) => (value === 'active' ? 'success' : 'error'),
+  },
+};
+
+export const ColorOverride: Story = {
+  args: {
+    source: 'custom_value',
+    type: 'success',
+    colorOverride: 'blue',
+  },
+};
+
+export const WithLabelChildren: Story = {
+  render: (args) => (
+    <StatusIndicatorField {...args}>
+      <StatusIndicatorField.Label value="active" type="success" label="Is Active" />
+      <StatusIndicatorField.Label value="inactive" type="stopped" label="Is Inactive" />
+    </StatusIndicatorField>
+  ),
+  args: {
+    source: 'status',
+  },
+};

package/src/field/StatusIndicatorField.test.tsx

@@ -0,0 +1,143 @@
+import { render, cleanup } from '@testing-library/react';
+import { vi, describe, it, expect, afterEach } from 'vitest';
+import { useFieldValue, useRecordContext } from '@strato-admin/core';
+import StatusIndicatorField from './StatusIndicatorField';
+
+// 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, colorOverride, iconAriaLabel }: any) => (
+    <div
+      data-testid="status-indicator"
+      data-type={type}
+      data-color={colorOverride}
+      data-aria={iconAriaLabel}
+    >
+      {children}
+    </div>
+  ),
+}));
+
+describe('StatusIndicatorField', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render value with default info type', () => {
+    const record = { status: 'active' };
+    (useRecordContext as any).mockReturnValue(record);
+    (useFieldValue as any).mockReturnValue('active');
+
+    const { getByTestId, getByText } = render(<StatusIndicatorField source="status" />);
+
+    const indicator = getByTestId('status-indicator');
+    expect(indicator.getAttribute('data-type')).toBe('info');
+    expect(getByText('active')).toBeDefined();
+  });
+
+  it('should render with specified type', () => {
+    const record = { status: 'active' };
+    (useRecordContext as any).mockReturnValue(record);
+    (useFieldValue as any).mockReturnValue('active');
+
+    const { getByTestId } = render(<StatusIndicatorField source="status" type="success" />);
+
+    const indicator = getByTestId('status-indicator');
+    expect(indicator.getAttribute('data-type')).toBe('success');
+  });
+
+  it('should render with mapping', () => {
+    const record = { status: 'inactive' };
+    (useRecordContext as any).mockReturnValue(record);
+    (useFieldValue as any).mockReturnValue('inactive');
+
+    const { getByTestId } = render(
+      <StatusIndicatorField source="status" mapping={{ active: 'success', inactive: 'stopped' }} />,
+    );
+
+    const indicator = getByTestId('status-indicator');
+    expect(indicator.getAttribute('data-type')).toBe('stopped');
+  });
+
+  it('should render with dynamic type function', () => {
+    const record = { status: 'error' };
+    (useRecordContext as any).mockReturnValue(record);
+    (useFieldValue as any).mockReturnValue('error');
+
+    const { getByTestId } = render(
+      <StatusIndicatorField
+        source="status"
+        type={(val) => (val === 'error' ? 'error' : 'info')}
+      />,
+    );
+
+    const indicator = getByTestId('status-indicator');
+    expect(indicator.getAttribute('data-type')).toBe('error');
+  });
+
+  it('should render nothing when value is missing', () => {
+    (useRecordContext as any).mockReturnValue({});
+    (useFieldValue as any).mockReturnValue(undefined);
+
+    const { queryByTestId } = render(<StatusIndicatorField source="status" />);
+
+    expect(queryByTestId('status-indicator')).toBeNull();
+  });
+
+  it('should render emptyText when value is missing', () => {
+    (useRecordContext as any).mockReturnValue({});
+    (useFieldValue as any).mockReturnValue(undefined);
+
+    const { getByText } = render(
+      <StatusIndicatorField source="status" emptyText="No Status" />,
+    );
+
+    expect(getByText('No Status')).toBeDefined();
+  });
+
+  it('should render with colorOverride', () => {
+    const record = { status: 'custom' };
+    (useRecordContext as any).mockReturnValue(record);
+    (useFieldValue as any).mockReturnValue('custom');
+
+    const { getByTestId } = render(
+      <StatusIndicatorField source="status" type="success" colorOverride="blue" />,
+    );
+
+    const indicator = getByTestId('status-indicator');
+    expect(indicator.getAttribute('data-color')).toBe('blue');
+  });
+
+  it('should render with iconAriaLabel', () => {
+    const record = { status: 'active' };
+    (useRecordContext as any).mockReturnValue(record);
+    (useFieldValue as any).mockReturnValue('active');
+
+    const { getByTestId } = render(
+      <StatusIndicatorField source="status" iconAriaLabel="Active status" />,
+    );
+
+    const indicator = getByTestId('status-indicator');
+    expect(indicator.getAttribute('data-aria')).toBe('Active status');
+  });
+
+  it('should render with Label children mapping', () => {
+    const record = { status: 'rejected' };
+    (useRecordContext as any).mockReturnValue(record);
+    (useFieldValue as any).mockReturnValue('rejected');
+
+    const { getByTestId, getByText } = render(
+      <StatusIndicatorField source="status">
+        <StatusIndicatorField.Label value="accepted" type="success" label="Accepted" />
+        <StatusIndicatorField.Label value="rejected" type="error" label="Rejected" color="red" />
+      </StatusIndicatorField>,
+    );
+
+    const indicator = getByTestId('status-indicator');
+    expect(indicator.getAttribute('data-type')).toBe('error');
+    expect(indicator.getAttribute('data-color')).toBe('red');
+    expect(getByText('Rejected')).toBeDefined();
+  });
+});

package/src/field/StatusIndicatorField.tsx

@@ -0,0 +1,119 @@
+import StatusIndicator, { type StatusIndicatorProps } from '@cloudscape-design/components/status-indicator';
+import React, { type ReactElement } from 'react';
+import { type RaRecord, useFieldValue, useRecordContext, useTranslate } from '@strato-admin/core';
+import RecordLink from '../RecordLink';
+import { type FieldProps } from './types';
+
+export interface StatusIndicatorLabelProps {
+  /**
+   * The value to match against the field's value.
+   */
+  value: any;
+  /**
+   * The type of the status indicator for this value.
+   */
+  type: StatusIndicatorProps.Type;
+  /**
+   * Color override for the status indicator for this value.
+   */
+  color?: StatusIndicatorProps.Color;
+  /**
+   * The label to display. If not provided, the value will be used.
+   */
+  label?: React.ReactNode;
+}
+
+/**
+ * A declarative way to define status indicator mapping.
+ */
+export const StatusIndicatorLabel = (_: StatusIndicatorLabelProps) => null;
+
+export interface StatusIndicatorFieldProps<RecordType extends RaRecord = RaRecord>
+  extends FieldProps<RecordType> {
+  /**
+   * The type of the status indicator.
+   * If provided as a string, it will be used for all values.
+   * If provided as a function, it will be called with the field value and the record.
+   * @default "info"
+   */
+  type?: StatusIndicatorProps.Type | ((value: any, record: RecordType) => StatusIndicatorProps.Type);
+  /**
+   * A mapping from field values to status indicator types.
+   */
+  mapping?: Record<string | number, StatusIndicatorProps.Type>;
+  /**
+   * Icon aria label for screen readers.
+   */
+  iconAriaLabel?: string;
+  /**
+   * Color override for the status indicator.
+   */
+  colorOverride?: StatusIndicatorProps.Color;
+  /**
+   * Declarative mapping using StatusIndicatorLabel children.
+   */
+  children?: React.ReactNode;
+}
+
+const StatusIndicatorField = <RecordType extends RaRecord = RaRecord>(
+  props: StatusIndicatorFieldProps<RecordType>
+) => {
+  const {
+    source,
+    record: recordProp,
+    emptyText,
+    link,
+    type,
+    mapping,
+    iconAriaLabel,
+    colorOverride,
+    children,
+  } = props;
+
+  const record = useRecordContext<RecordType>({ record: recordProp });
+  const value = useFieldValue<RecordType>({ source: source as any, record });
+  const translate = useTranslate();
+  const hasValue = value !== null && value !== undefined && value !== '';
+
+  if (!hasValue) {
+    return <>{emptyText ?? null}</>;
+  }
+
+  // 1. Try to find mapping from children
+  const childrenArray = React.Children.toArray(children) as ReactElement<StatusIndicatorLabelProps>[];
+  const matchingLabel = childrenArray.find((child) => child.props?.value === value);
+
+  let statusType: StatusIndicatorProps.Type = 'info';
+  let finalColorOverride = colorOverride;
+  let label: React.ReactNode = String(value);
+
+  if (matchingLabel) {
+    statusType = matchingLabel.props.type;
+    if (matchingLabel.props.color) {
+      finalColorOverride = matchingLabel.props.color;
+    }
+    if (matchingLabel.props.label) {
+      label = typeof matchingLabel.props.label === 'string'
+        ? translate(matchingLabel.props.label)
+        : matchingLabel.props.label;
+    }
+  } else if (typeof type === 'function') {
+    statusType = type(value, record as RecordType);
+  } else if (type) {
+    statusType = type;
+  } else if (mapping && (value as string | number) in mapping) {
+    statusType = mapping[value as string | number];
+  }
+
+  return (
+    <RecordLink link={link}>
+      <StatusIndicator type={statusType} iconAriaLabel={iconAriaLabel} colorOverride={finalColorOverride}>
+        {label}
+      </StatusIndicator>
+    </RecordLink>
+  );
+};
+
+StatusIndicatorField.Label = StatusIndicatorLabel;
+
+export default StatusIndicatorField;

package/src/field/TextField.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import TextField from './TextField';
+import { withRaContext } from '../stories/RaStoryDecorator';
+
+const meta: Meta<typeof TextField> = {
+  title: 'Fields/TextField',
+  component: TextField,
+  tags: ['autodocs'],
+  decorators: [withRaContext({ id: 1, title: 'Sample Title', description: 'This is a description', empty: '' })],
+};
+
+export default meta;
+type Story = StoryObj<typeof TextField>;
+
+export const Basic: Story = {
+  args: {
+    source: 'title',
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    source: 'description',
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    source: 'empty',
+  },
+};
+
+export const WithEmptyText: Story = {
+  args: {
+    source: 'missing_field',
+    emptyText: 'No value provided',
+  },
+};
+
+export const WithLink: Story = {
+  args: {
+    source: 'title',
+    link: 'show',
+  },
+};

package/src/field/TextField.tsx

@@ -0,0 +1,17 @@
+import { type RaRecord, useFieldValue, useRecordContext } from '@strato-admin/core';
+import RecordLink from '../RecordLink';
+import { type FieldProps } from './types';
+
+export type TextFieldProps<RecordType extends RaRecord = RaRecord> = FieldProps<RecordType>;
+
+const TextField = <RecordType extends RaRecord = RaRecord>(props: TextFieldProps<RecordType>) => {
+  const { source, record: recordProp, emptyText, link } = props;
+
+  const record = useRecordContext<RecordType>({ record: recordProp });
+  const value = useFieldValue<RecordType>({ source: source as any, record });
+  const hasValue = value !== null && value !== undefined && value !== '';
+
+  return <RecordLink link={link}>{hasValue ? String(value) : (emptyText ?? null)}</RecordLink>;
+};
+
+export default TextField;

package/src/field/index.ts

@@ -0,0 +1,23 @@
+export * from './types';
+export { default as StatusIndicatorField } from './StatusIndicatorField';
+export * from './StatusIndicatorField';
+export { default as TextField } from './TextField';
+export { default as IdField } from './IdField';
+export { default as NumberField } from './NumberField';
+export { default as CurrencyField } from './CurrencyField';
+export { default as DateField } from './DateField';
+export { default as BooleanField } from './BooleanField';
+export { default as BadgeField } from './BadgeField';
+export { default as ReferenceField } from './ReferenceField';
+export { default as ReferenceManyField } from './ReferenceManyField';
+export { default as ArrayField } from './ArrayField';
+export * from './TextField';
+export * from './IdField';
+export * from './NumberField';
+export * from './DateField';
+export * from './BooleanField';
+export * from './BadgeField';
+export * from './ReferenceField';
+export * from './ReferenceManyField';
+export * from './ArrayField';
+export * from './CurrencyField';

package/src/field/types.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from 'react';
+import { type BaseFieldProps, type RaRecord } from '@strato-admin/core';
+import { type RecordLinkType } from '../RecordLink';
+
+/**
+ * Common props for all field components in strato-cloudscape.
+ */
+export interface FieldProps<RecordType extends RaRecord = RaRecord>
+  extends Omit<BaseFieldProps<RecordType>, 'source'> {
+  /**
+   * The property name in the record that should be displayed.
+   */
+  source?: string;
+  /**
+   * The label to display for this field. Usually inferred from the source.
+   */
+  label?: ReactNode;
+  /**
+   * Whether the field is sortable in a table.
+   * @default true
+   */
+  sortable?: boolean;
+  /**
+   * Whether to link the field to another page.
+   * - true: links to the 'edit' page of the current resource
+   * - 'edit' | 'show': links to the specified page type
+   * - string: a custom URL
+   * - function: (record, resource) => string
+   */
+  link?: RecordLinkType;
+  /**
+   * The text to display if the value is empty or null.
+   */
+  emptyText?: ReactNode;
+  /**
+   * Configuration for the inferred form input.
+   * - object: Props passed to the inferred Input component.
+   * - ReactElement: A specific Input component to use (escape hatch).
+   * - false: Excludes this field from forms.
+   */
+  input?: Record<string, any> | React.ReactElement | false;
+  /**
+   * Whether the field is required. 
+   * This is used to automatically add validation to the inferred input 
+   * and potentially show warnings in display views.
+   */
+  isRequired?: boolean;
+  /**
+   * Additional text to help the user fill in the field.
+   * Passed to the inferred Input component's FormField.
+   */
+  description?: ReactNode;
+  /**
+   * Text describing constraints (e.g., "Must be between 1 and 100").
+   * Passed to the inferred Input component's FormField.
+   */
+  constraintText?: ReactNode;
+}

package/src/form/Form.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { Form } from './Form';
+
+// Mock ra-core
+vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
+
+// Mock Cloudscape components
+vi.mock('@cloudscape-design/components/form', () => ({
+  default: ({ children, actions }: any) => (
+    <div data-testid="cloudscape-form">
+      <div data-testid="form-content">{children}</div>
+      <div data-testid="form-actions">{actions}</div>
+    </div>
+  ),
+}));
+
+vi.mock('@cloudscape-design/components/space-between', () => ({
+  default: ({ children }: any) => <div>{children}</div>,
+}));
+
+vi.mock('@cloudscape-design/components/button', () => ({
+  default: ({ children, type }: any) => <button type={type}>{children}</button>,
+}));
+
+describe('Form', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render children and default toolbar', () => {
+    const { getByTestId, getByText } = render(
+      <Form>
+        <div data-testid="child" />
+      </Form>,
+    );
+
+    expect(getByTestId('ra-form')).toBeDefined();
+    expect(getByTestId('cloudscape-form')).toBeDefined();
+    expect(getByTestId('child')).toBeDefined();
+    expect(getByText('Save')).toBeDefined();
+  });
+
+  it('should render custom toolbar', () => {
+    const { getByText, queryByText } = render(
+      <Form toolbar={<button>Custom Save</button>}>
+        <div />
+      </Form>,
+    );
+
+    expect(getByText('Custom Save')).toBeDefined();
+    expect(queryByText('Save')).toBeNull();
+  });
+});

package/src/form/Form.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Form as RaForm, type FormProps as RaFormProps, useSaveContext, useInputSchema } from '@strato-admin/core';
+import CloudscapeForm from '@cloudscape-design/components/form';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+import { SaveButton } from '../button/SaveButton';
+import { FormField } from '../input/FormField';
+
+export interface FormProps extends Omit<RaFormProps, 'children'> {
+  children?: React.ReactNode;
+  include?: string[];
+  exclude?: string[];
+  toolbar?: React.ReactNode;
+}
+
+export const Form = ({ children, include, exclude, toolbar, ...props }: FormProps) => {
+  const saveContext = useSaveContext();
+  const schemaChildren = useInputSchema();
+
+  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 handleSubmit = async (values: any, event: any) => {
+    if (props.onSubmit) {
+      return props.onSubmit(values, event);
+    }
+    if (saveContext?.save) {
+      return saveContext.save(values, event);
+    }
+  };
+
+  return (
+    <RaForm {...props} onSubmit={handleSubmit}>
+      <CloudscapeForm
+        actions={
+          toolbar || (
+            <SpaceBetween direction="horizontal" size="xs">
+              <SaveButton />
+            </SpaceBetween>
+          )
+        }
+      >
+        <SpaceBetween direction="vertical" size="l">
+          {finalChildren}
+        </SpaceBetween>
+      </CloudscapeForm>
+    </RaForm>
+  );
+};
+
+Form.Field = FormField;
+
+export default Form;

package/src/form/index.ts

@@ -0,0 +1,2 @@
+export * from './Form';
+export { ValidationError } from '@strato-admin/core';

package/src/index.ts

@@ -0,0 +1,25 @@
+export * from '@strato-admin/core';
+
+export * from './collection-hooks';
+export * from './list';
+export * from './detail';
+export * from './edit';
+export * from './create';
+export * from './field';
+export * from './input';
+export * from './form';
+export * from './layout';
+export * from './theme';
+export * from './button';
+export * from './Admin';
+export { default as RecordLink } from './RecordLink';
+export * from './RecordLink';
+
+// Explicitly export themed components to resolve ambiguity with strato-core (ra-core) re-exports
+export { Admin, type AdminProps } from './Admin';
+export { Form, type FormProps } from './form';
+export { List, type ListProps } from './list';
+export { Create, type CreateProps } from './create';
+export { Edit, type EditProps } from './edit';
+export { Show, type ShowProps } from './detail';
+export { type InputProps } from './input';