@strato-admin/cloudscape 0.1.0

package/src/field/DateField.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import DateField from './DateField';
+import { withRaContext } from '../stories/RaStoryDecorator';
+
+const meta: Meta<typeof DateField> = {
+  title: 'Fields/DateField',
+  component: DateField,
+  tags: ['autodocs'],
+  decorators: [
+    withRaContext({
+      id: 1,
+      published_at: '2023-10-27T10:00:00Z',
+      last_seen: new Date('2024-01-15T15:30:00Z'),
+      empty: null,
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof DateField>;
+
+export const Basic: Story = {
+  args: {
+    source: 'published_at',
+  },
+};
+
+export const WithDateObject: Story = {
+  args: {
+    source: 'last_seen',
+  },
+};
+
+export const CustomOptions: Story = {
+  args: {
+    source: 'published_at',
+    options: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
+  },
+};
+
+export const CustomLocale: Story = {
+  args: {
+    source: 'published_at',
+    locales: 'fr-FR',
+    options: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    source: 'empty',
+  },
+};
+
+export const WithEmptyText: Story = {
+  args: {
+    source: 'empty',
+    emptyText: 'Not set',
+  },
+};
+
+export const WithLink: Story = {
+  args: {
+    source: 'published_at',
+    link: 'show',
+  },
+};

package/src/field/DateField.tsx

@@ -0,0 +1,33 @@
+import { type RaRecord, useFieldValue, useRecordContext, useLocale } from '@strato-admin/core';
+import RecordLink from '../RecordLink';
+import { type FieldProps } from './types';
+
+export type DateFieldProps<RecordType extends RaRecord = RaRecord> = FieldProps<RecordType> & {
+  /**
+   * Options for Intl.DateTimeFormat.
+   */
+  options?: Intl.DateTimeFormatOptions;
+  /**
+   * Locale(s) to use for formatting. Defaults to the current app locale.
+   */
+  locales?: string | string[];
+};
+
+const DateField = <RecordType extends RaRecord = RaRecord>(props: DateFieldProps<RecordType>) => {
+  const { source, record: recordProp, emptyText, options, locales, link } = 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 dateValue = value instanceof Date ? value : new Date(value);
+  const formattedValue = new Intl.DateTimeFormat(locales || currentLocale, options).format(dateValue);
+
+  return <RecordLink link={link}>{formattedValue}</RecordLink>;
+};
+
+export default DateField;

package/src/field/IdField.test.tsx

@@ -0,0 +1,88 @@
+import { render, cleanup } from '@testing-library/react';
+import { vi, describe, it, expect, afterEach } from 'vitest';
+import {
+  useFieldValue,
+  useRecordContext,
+  useResourceDefinition,
+} from '@strato-admin/core';
+import IdField from './IdField';
+
+// Mock strato-core
+vi.mock('@strato-admin/core', () => ({
+  useRecordContext: vi.fn(),
+  useFieldValue: vi.fn(),
+  useResourceDefinition: vi.fn(),
+}));
+
+// Mock RecordLink
+vi.mock('../RecordLink', () => ({
+  default: ({ children, link }: any) => (
+    <a data-testid="record-link" data-link={link}>
+      {children}
+    </a>
+  ),
+}));
+
+describe('IdField', () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it('should render the ID and link to show by default if hasShow is true', () => {
+    const record = { id: '123' };
+    (useRecordContext as any).mockReturnValue(record);
+    (useFieldValue as any).mockImplementation(
+      ({ source }: any) => (record as any)[source]
+    );
+    (useResourceDefinition as any).mockReturnValue({ hasShow: true });
+
+    const { getByTestId, getByText } = render(<IdField />);
+
+    expect(getByText('123')).toBeDefined();
+    const link = getByTestId('record-link');
+    expect(link.getAttribute('data-link')).toBe('show');
+  });
+
+  it('should not link by default if hasShow is false', () => {
+    const record = { id: '123' };
+    (useRecordContext as any).mockReturnValue(record);
+    (useFieldValue as any).mockImplementation(
+      ({ source }: any) => (record as any)[source]
+    );
+    (useResourceDefinition as any).mockReturnValue({ hasShow: false });
+
+    const { getByTestId, getByText } = render(<IdField />);
+
+    expect(getByText('123')).toBeDefined();
+    const link = getByTestId('record-link');
+    expect(link.getAttribute('data-link')).toBe(null);
+  });
+
+  it('should use custom source if provided', () => {
+    const record = { identifier: 'abc' };
+    (useRecordContext as any).mockReturnValue(record);
+    (useFieldValue as any).mockImplementation(
+      ({ source }: any) => (record as any)[source]
+    );
+    (useResourceDefinition as any).mockReturnValue({ hasShow: true });
+
+    const { getByText } = render(<IdField source="identifier" />);
+
+    expect(getByText('abc')).toBeDefined();
+  });
+
+  it('should allow overriding link', () => {
+    const record = { id: '123' };
+    (useRecordContext as any).mockReturnValue(record);
+    (useFieldValue as any).mockImplementation(
+      ({ source }: any) => (record as any)[source]
+    );
+    (useResourceDefinition as any).mockReturnValue({ hasShow: true });
+
+    const { getByTestId } = render(<IdField link="edit" />);
+
+    const link = getByTestId('record-link');
+    expect(link.getAttribute('data-link')).toBe('edit');
+  });
+});

package/src/field/IdField.tsx

@@ -0,0 +1,40 @@
+import { type RaRecord, useResourceDefinition } from '@strato-admin/core';
+import TextField, { type TextFieldProps } from './TextField';
+
+export type IdFieldProps<RecordType extends RaRecord = RaRecord> =
+  TextFieldProps<RecordType>;
+
+/**
+ * A field that displays the record's ID.
+ *
+ * Defaults to:
+ * - source="id"
+ * - input={false} (hidden in forms)
+ * - link="show" if the resource has a show page
+ *
+ * @example
+ * <IdField />
+ * <IdField source="identifier" />
+ */
+const IdField = <RecordType extends RaRecord = RaRecord>(
+  props: IdFieldProps<RecordType>
+) => {
+  const { hasShow } = useResourceDefinition(props);
+  const {
+    source = 'id',
+    link = hasShow ? 'show' : undefined,
+    input = false,
+    ...rest
+  } = props;
+
+  return (
+    <TextField<RecordType>
+      source={source}
+      link={link}
+      input={input}
+      {...rest}
+    />
+  );
+};
+
+export default IdField;

package/src/field/NumberField.stories.tsx

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

package/src/field/NumberField.tsx

@@ -0,0 +1,35 @@
+import { type RaRecord, useFieldValue, useRecordContext, useLocale } from '@strato-admin/core';
+import RecordLink from '../RecordLink';
+import { type FieldProps } from './types';
+
+export type NumberFieldProps<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[];
+};
+
+const NumberField = <RecordType extends RaRecord = RaRecord>(props: NumberFieldProps<RecordType>) => {
+  const { source, record: recordProp, emptyText, options, locales, link } = 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 formattedValue = new Intl.NumberFormat(locales || currentLocale, options).format(numberValue);
+
+  return <RecordLink link={link}>{formattedValue}</RecordLink>;
+};
+
+(NumberField as any).isNumberColumn = true;
+
+export default NumberField;

package/src/field/ReferenceField.test.tsx

@@ -0,0 +1,88 @@
+
+import { render, screen } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import ReferenceField from './ReferenceField';
+import { useRecordContext, useGetRecordRepresentation } from '@strato-admin/core';
+
+// Mock ra-core
+vi.mock('@strato-admin/core', () => ({
+  ReferenceFieldBase: vi.fn(({ children }: any) => <div data-testid="ra-reference-field-base">{children}</div>),
+  useRecordContext: vi.fn(),
+  useGetRecordRepresentation: vi.fn(),
+  useResourceDefinition: vi.fn(),
+  useResourceContext: vi.fn(() => 'categories'),
+  useCreatePath: vi.fn(() => (params: any) => `/${params.resource}/${params.id}/${params.type}`),
+  ResourceContextProvider: ({ children }: any) => <div data-testid="resource-context-provider">{children}</div>,
+}));
+
+// Mock react-router-dom
+vi.mock('react-router-dom', () => ({
+  useNavigate: vi.fn(),
+}));
+
+// Mock Cloudscape Box
+vi.mock('@cloudscape-design/components/box', () => ({
+  default: ({ children }: any) => <div>{children}</div>,
+}));
+
+// Mock Cloudscape Link
+vi.mock('@cloudscape-design/components/link', () => ({
+  default: ({ children, href }: any) => (
+    <a href={href} data-testid="cloudscape-link">
+      {children}
+    </a>
+  ),
+}));
+
+describe('ReferenceField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render children when provided', () => {
+    (useRecordContext as any).mockReturnValue({ id: 1, name: 'Category 1' });
+    (useGetRecordRepresentation as any).mockReturnValue(() => 'Category 1');
+
+    render(
+      <ReferenceField source="categoryId" reference="categories">
+        <span data-testid="child">Child Content</span>
+      </ReferenceField>,
+    );
+
+    expect(screen.getByTestId('child')).toBeDefined();
+    expect(screen.getByTestId('child').textContent).toBe('Child Content');
+  });
+
+  it('should render record representation when no children provided', () => {
+    const record = { id: 1, name: 'Category 1' };
+    (useRecordContext as any).mockReturnValue(record);
+    (useGetRecordRepresentation as any).mockReturnValue((rec: any) => rec.name);
+
+    render(<ReferenceField source="categoryId" reference="categories" />);
+
+    expect(screen.getByText('Category 1')).toBeDefined();
+  });
+
+  it('should render id if no other representation is provided', () => {
+    const record = { id: 1 };
+    (useRecordContext as any).mockReturnValue(record);
+    (useGetRecordRepresentation as any).mockReturnValue((rec: any) => `#${rec.id}`);
+
+    render(<ReferenceField source="categoryId" reference="categories" />);
+
+    expect(screen.getByText('#1')).toBeDefined();
+  });
+
+  it('should render a link when link prop is provided', () => {
+    const record = { id: 1, name: 'Category 1' };
+    (useRecordContext as any).mockReturnValue(record);
+    (useGetRecordRepresentation as any).mockReturnValue(() => 'Category 1');
+
+    render(<ReferenceField source="categoryId" reference="categories" link="show" />);
+
+    const link = screen.getByTestId('cloudscape-link');
+    expect(link).toBeDefined();
+    expect(link.getAttribute('href')).toBe('/categories/1/show');
+    expect(link.textContent).toBe('Category 1');
+  });
+});

package/src/field/ReferenceField.tsx

@@ -0,0 +1,64 @@
+import { type ReactNode } from 'react';
+import {
+  ReferenceFieldBase,
+  type RaRecord,
+  useRecordContext,
+  useGetRecordRepresentation,
+} from '@strato-admin/core';
+import RecordLink from '../RecordLink';
+import { type FieldProps } from './types';
+
+export type ReferenceFieldProps<RecordType extends RaRecord = RaRecord> = FieldProps<RecordType> & {
+  /**
+   * The resource name that this field refers to.
+   */
+  reference: string;
+  /**
+   * Optional custom representation of the related record. If not provided,
+   * the recordRepresentation of the referenced resource will be used.
+   */
+  children?: ReactNode;
+};
+
+const ReferenceField = <RecordType extends RaRecord = RaRecord>(props: ReferenceFieldProps<RecordType>) => {
+  const { source, reference, children, emptyText, record, link } = props;
+
+  if (!source) {
+    return null; // Or some fallback
+  }
+
+  return (
+    <ReferenceFieldBase source={source} reference={reference} record={record} empty={<>{emptyText ?? null}</>}>
+      <ReferenceFieldValue emptyText={emptyText} link={link} reference={reference}>
+        {children}
+      </ReferenceFieldValue>
+    </ReferenceFieldBase>
+  );
+};
+
+const ReferenceFieldValue = ({ children, emptyText, link, reference }: any) => {
+  const record = useRecordContext();
+  const getRecordRepresentation = useGetRecordRepresentation();
+
+  if (!record) {
+    return <>{emptyText ?? null}</>;
+  }
+
+  if (children) {
+    return (
+      <RecordLink link={link} resource={reference}>
+        {children}
+      </RecordLink>
+    );
+  }
+
+  const representation = getRecordRepresentation(record);
+
+  return (
+    <RecordLink link={link} resource={reference}>
+      {representation ? String(representation) : (emptyText ?? null)}
+    </RecordLink>
+  );
+};
+
+export default ReferenceField;

package/src/field/ReferenceManyField.test.tsx

@@ -0,0 +1,41 @@
+
+import React from 'react';
+import { render, screen, cleanup } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import ReferenceManyField from './ReferenceManyField';
+
+// Mock ra-core (via strato-core)
+vi.mock('@strato-admin/core', () => ({
+  ReferenceManyFieldBase: vi.fn(({ children }: any) => <div data-testid="ra-reference-many-field-base">{children}</div>),
+  ResourceSchemaProvider: vi.fn(({ children }: any) => <div data-testid="resource-schema-provider">{children}</div>),
+  ResourceContextProvider: ({ children }: any) => <div data-testid="resource-context-provider">{children}</div>,
+}));
+
+describe('ReferenceManyField', () => {
+  beforeEach(() => {
+    cleanup();
+  });
+
+  it('should render children within providers', () => {
+    render(
+      <ReferenceManyField reference="comments" target="post_id">
+        <div data-testid="child">Child Content</div>
+      </ReferenceManyField>,
+    );
+
+    expect(screen.getByTestId('ra-reference-many-field-base')).toBeDefined();
+    expect(screen.getByTestId('resource-schema-provider')).toBeDefined();
+    expect(screen.getByTestId('child')).toBeDefined();
+    expect(screen.getByTestId('child').textContent).toBe('Child Content');
+  });
+
+  it('should pass correct resource to ResourceSchemaProvider', () => {
+    render(
+      <ReferenceManyField reference="reviews" target="product_id">
+        <div data-testid="child">Child Content</div>
+      </ReferenceManyField>,
+    );
+
+    expect(screen.getByTestId('resource-schema-provider')).toBeDefined();
+  });
+});

package/src/field/ReferenceManyField.tsx

@@ -0,0 +1,73 @@
+import React, { ReactNode } from 'react';
+import { ReferenceManyFieldBase, type RaRecord, ResourceSchemaProvider } from '@strato-admin/core';
+import { type FieldProps } from './types';
+
+export interface ReferenceManyFieldProps<
+  RecordType extends RaRecord = RaRecord,
+  ReferenceRecordType extends RaRecord = RaRecord,
+> extends FieldProps<RecordType> {
+  children?: ReactNode;
+  reference: string;
+  target: string;
+  filter?: any;
+  sort?: { field: string; order: 'ASC' | 'DESC' };
+  perPage?: number;
+  page?: number;
+  fieldSchema?: ReactNode;
+  /**
+   * Element to display during loading.
+   */
+  loading?: ReactNode;
+  /**
+   * Element to display if there's no data.
+   */
+  empty?: ReactNode;
+  /**
+   * Element to display if there's an error.
+   */
+  error?: ReactNode;
+  /**
+   * Element to display if the application is offline.
+   */
+  offline?: ReactNode;
+  /**
+   * Debounce time for filtering.
+   */
+  debounce?: number;
+  /**
+   * Whether to synchronize the list with the URL.
+   * @default false
+   */
+  synchronizeWithLocation?: boolean;
+}
+
+/**
+ * Render related records to the current one.
+ *
+ * @example
+ * <ReferenceManyField reference="comments" target="post_id">
+ *     <Table title="Comments">
+ *         <Table.Column source="id" />
+ *         <Table.Column source="body" />
+ *         <Table.Column source="created_at" />
+ *     </Table>
+ * </ReferenceManyField>
+ */
+export const ReferenceManyField = <
+  RecordType extends RaRecord = RaRecord,
+  ReferenceRecordType extends RaRecord = RaRecord,
+>(
+  props: ReferenceManyFieldProps<RecordType, ReferenceRecordType>
+) => {
+  const { children, reference, fieldSchema, ...rest } = props;
+
+  return (
+    <ReferenceManyFieldBase reference={reference} {...rest}>
+      <ResourceSchemaProvider resource={reference} fieldSchema={fieldSchema}>
+        {children}
+      </ResourceSchemaProvider>
+    </ReferenceManyFieldBase>
+  );
+};
+
+export default ReferenceManyField;