@strato-admin/cloudscape 0.1.0

package/src/input/AttributeEditor.test.tsx

@@ -0,0 +1,147 @@
+
+import { render } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { AttributeEditor } from './AttributeEditor';
+import { useFormContext, useFieldArray } from 'react-hook-form';
+import { useInput, useResourceContext } from '@strato-admin/core';
+import { useFormFieldContext } from './FormFieldContext';
+
+// Mock Cloudscape components
+vi.mock('@cloudscape-design/components/attribute-editor', () => ({
+  default: ({ items, definition, onAddButtonClick, disableAddButton, hideAddButton }: any) => (
+    <div data-testid="attribute-editor">
+      {!hideAddButton && (
+        <button onClick={onAddButtonClick} disabled={disableAddButton} data-testid="add-button">
+          Add item
+        </button>
+      )}
+      {items.map((item: any, index: number) => (
+        <div key={index} data-testid={`item-${index}`}>
+          {definition.map((def: any, defIndex: number) => (
+            <div key={defIndex} data-testid={`field-${defIndex}`}>
+              {def.control(item, index)}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  ),
+}));
+
+vi.mock('@cloudscape-design/components/box', () => ({
+  default: ({ children }: any) => <div>{children}</div>,
+}));
+
+// Mock ra-core hooks
+vi.mock('@strato-admin/core', () => ({
+  useInput: vi.fn(),
+  useResourceContext: vi.fn(),
+  RecordContextProvider: ({ children }: any) => <>{children}</>,
+  ArrayInputContext: {
+    Provider: ({ children }: any) => <>{children}</>,
+  },
+}));
+
+// Mock react-hook-form hooks
+vi.mock('react-hook-form', () => ({
+  useFormContext: vi.fn(),
+  useFieldArray: vi.fn(),
+}));
+
+// Mock local components and contexts
+vi.mock('./FormFieldContext', () => ({
+  useFormFieldContext: vi.fn(),
+  FormFieldContext: {
+    Provider: ({ children }: any) => <>{children}</>,
+  },
+}));
+
+vi.mock('./FieldTitle', () => ({
+  FieldTitle: () => <div data-testid="field-title" />,
+}));
+
+vi.mock('./TextInput', () => ({
+  default: ({ source }: any) => <div data-testid="text-input" data-source={source} />,
+}));
+
+vi.mock('./FormField', () => ({
+  default: ({ children }: any) => <div data-testid="form-field">{children}</div>,
+}));
+
+describe('AttributeEditor', () => {
+  const defaultFormContext = { control: {} };
+  const defaultFieldArray = {
+    fields: [{}],
+    append: vi.fn(),
+    remove: vi.fn(),
+  };
+  const defaultInput = {
+    id: 'test',
+    field: { name: 'test', value: [], onChange: vi.fn(), onBlur: vi.fn() },
+    fieldState: { error: undefined, isTouched: false, isDirty: false },
+    formState: { isSubmitted: false },
+    isRequired: false,
+  };
+
+  beforeEach(() => {
+    vi.mocked(useFormContext).mockReturnValue(defaultFormContext as any);
+    vi.mocked(useFieldArray).mockReturnValue(defaultFieldArray as any);
+    vi.mocked(useInput).mockReturnValue(defaultInput as any);
+    vi.mocked(useFormFieldContext).mockReturnValue(undefined);
+    vi.mocked(useResourceContext).mockReturnValue('test-resource');
+  });
+
+  it('should prefix source prop of immediate children', () => {
+    const Child = ({ source }: any) => <div data-testid="child">{source}</div>;
+
+    const { getByTestId } = render(
+      <AttributeEditor source="products">
+        <Child source="id" />
+      </AttributeEditor>,
+    );
+
+    expect(getByTestId('child').textContent).toBe('products.0.id');
+  });
+
+  it('should NOT add source prop to children that do not have one', () => {
+    const NonInput = ({ children }: any) => <div data-testid="non-input">{children}</div>;
+
+    const { getByTestId } = render(
+      <AttributeEditor source="products">
+        <NonInput />
+      </AttributeEditor>,
+    );
+
+    expect(getByTestId('non-input').getAttribute('source')).toBeNull();
+  });
+
+  it('should disable the add button when disableAddButton is true', () => {
+    vi.mocked(useFieldArray).mockReturnValue({
+      ...defaultFieldArray,
+      fields: [],
+    } as any);
+
+    const { getByTestId } = render(
+      <AttributeEditor source="products" disableAddButton>
+        <div resource="id" />
+      </AttributeEditor>,
+    );
+
+    expect(getByTestId('add-button').hasAttribute('disabled')).toBe(true);
+  });
+
+  it('should hide the add button when hideAddButton is true', () => {
+    vi.mocked(useFieldArray).mockReturnValue({
+      ...defaultFieldArray,
+      fields: [],
+    } as any);
+
+    const { queryByTestId } = render(
+      <AttributeEditor source="products" hideAddButton>
+        <div resource="id" />
+      </AttributeEditor>,
+    );
+
+    expect(queryByTestId('add-button')).toBeNull();
+  });
+});

package/src/input/AttributeEditor.tsx

@@ -0,0 +1,185 @@
+import React, { useMemo } from 'react';
+import { useInput, RecordContextProvider, useResourceContext } from '@strato-admin/core';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import CloudscapeAttributeEditor from '@cloudscape-design/components/attribute-editor';
+import Box from '@cloudscape-design/components/box';
+import { FieldTitle } from './FieldTitle';
+import TextInput from './TextInput';
+import FormField from './FormField';
+import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
+import { InputProps } from './types';
+
+export interface AttributeEditorItemProps {
+  source: string;
+  label?: string | false;
+  field?: React.ComponentType<any>;
+  validate?: any;
+  defaultValue?: any;
+  children?: React.ReactNode;
+}
+
+export const Item = (_props: AttributeEditorItemProps) => {
+  // This is a placeholder component used to collect props.
+  // The actual rendering is handled by the AttributeEditor.
+  return null;
+};
+
+export interface AttributeEditorProps extends Omit<InputProps, 'source'> {
+  source?: string;
+  children: React.ReactNode;
+  addButtonText?: string;
+  removeButtonText?: string;
+  empty?: React.ReactNode;
+  disableAddButton?: boolean;
+  hideAddButton?: boolean;
+}
+
+export const AttributeEditor = (props: AttributeEditorProps) => {
+  const {
+    children,
+    label,
+    source: sourceProp,
+    validate,
+    defaultValue,
+    addButtonText = 'Add item',
+    removeButtonText = 'Remove item',
+    empty,
+    disableAddButton,
+    hideAddButton,
+    ...rest
+  } = props;
+
+  const { control } = useFormContext();
+  const contextValue = useFormFieldContext();
+  const resource = useResourceContext();
+
+  // Attempt to get source from context if not provided
+  const source = sourceProp || contextValue?.source || '';
+
+  const inputState =
+    contextValue ??
+    useInput({
+      source,
+      validate,
+      defaultValue,
+      ...rest,
+    });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: source,
+  });
+
+  const handleAdd = () => {
+    append({});
+  };
+
+  const handleRemove = (index: number) => {
+    remove(index);
+  };
+
+  const definition = useMemo(() => {
+    return React.Children.map(children, (child) => {
+      if (!React.isValidElement(child)) return null;
+
+      const childProps = child.props as any;
+      const childSource = childProps.source;
+      const childLabel = childProps.label;
+      const childValidate = childProps.validate;
+
+      // Determine if the field is required by checking validators
+      const isRequired = Array.isArray(childValidate)
+        ? childValidate.some((v: any) => v.isRequired)
+        : childValidate?.isRequired || childProps.isRequired;
+
+      return {
+        label: <FieldTitle label={childLabel} source={childSource} resource={resource} isRequired={isRequired} />,
+        control: (item: any, index: number) => {
+          const prefixedSource = `${source}.${index}.${childSource}`;
+
+          let content;
+          if (child.type === Item) {
+            const {
+              field: FieldComponent,
+              children: itemChildren,
+              validate: itemValidate,
+              defaultValue: itemDefaultValue,
+            } = childProps;
+            content = itemChildren ? (
+              <FormField source={prefixedSource} label={false} validate={itemValidate} defaultValue={itemDefaultValue}>
+                {itemChildren}
+              </FormField>
+            ) : FieldComponent ? (
+              <FieldComponent
+                source={prefixedSource}
+                label={false}
+                validate={itemValidate}
+                defaultValue={itemDefaultValue}
+              />
+            ) : (
+              <TextInput
+                source={prefixedSource}
+                label={false}
+                validate={itemValidate}
+                defaultValue={itemDefaultValue}
+              />
+            );
+          } else {
+            // Standard child (e.g. TextInput)
+            content = React.cloneElement(
+              child as React.ReactElement<any>,
+              {
+                source: prefixedSource,
+                label: false,
+              } as any,
+            );
+          }
+
+          return (
+            <RecordContextProvider value={item}>
+              <Box padding={{ top: 's' }}>{content}</Box>
+            </RecordContextProvider>
+          );
+        },
+      };
+    })?.filter(Boolean) as any[];
+  }, [children, source, resource]);
+
+  const inner = (
+    <FormFieldContext.Provider value={undefined}>
+      <CloudscapeAttributeEditor
+        items={fields}
+        definition={definition}
+        onAddButtonClick={handleAdd}
+        onRemoveButtonClick={({ detail: { itemIndex } }) => handleRemove(itemIndex)}
+        empty={
+          empty || (
+            <Box textAlign="center" color="inherit">
+              No items added yet.
+            </Box>
+          )
+        }
+        addButtonText={addButtonText}
+        removeButtonText={removeButtonText}
+        disableAddButton={disableAddButton}
+        hideAddButton={hideAddButton}
+      />
+    </FormFieldContext.Provider>
+  );
+
+  if (contextValue) {
+    return inner;
+  }
+
+  return (
+    <FormFieldContext.Provider value={{ ...inputState, source }}>
+      <FormField {...props} source={source}>
+        {inner}
+      </FormField>
+    </FormFieldContext.Provider>
+  );
+};
+
+AttributeEditor.Item = Item;
+
+export default AttributeEditor;

package/src/input/AutocompleteInput.test.tsx

@@ -0,0 +1,178 @@
+
+import { render, fireEvent } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { useInput, useResourceContext, useChoicesContext } from '@strato-admin/core';
+import { AutocompleteInput } from './AutocompleteInput';
+
+// Mock ra-core
+vi.mock('@strato-admin/core', () => ({
+  useInput: vi.fn(),
+  useResourceContext: vi.fn(),
+  useChoicesContext: vi.fn().mockReturnValue({ allChoices: [], isPending: false }),
+  useTranslate: () => (key: string) => key,
+  useGetRecordRepresentation: () => (record: any) => record?.name || record?.id || record,
+  ValidationError: ({ error }: any) => <span>{error}</span>,
+}));
+
+// Mock FieldTitle
+vi.mock('./FieldTitle', () => ({
+  FieldTitle: ({ label, source }: any) => <span data-testid="field-title">{label || source}</span>,
+}));
+
+// Mock Cloudscape components
+vi.mock('@cloudscape-design/components/autosuggest', () => ({
+  default: ({ value, onChange, id, options, onBlur, onSelect }: any) => (
+    <div data-testid="cloudscape-autosuggest">
+      <input
+        id={id}
+        value={value}
+        onChange={(e) => onChange({ detail: { value: e.target.value } })}
+        onBlur={() => onBlur()}
+      />
+      <ul>
+        {options.map((opt: any) => (
+          <li
+            key={opt.value}
+            onClick={() => onSelect({ detail: { value: opt.value } })}
+            data-testid={`option-${opt.value}`}
+          >
+            {opt.label}
+          </li>
+        ))}
+      </ul>
+    </div>
+  ),
+}));
+
+vi.mock('@cloudscape-design/components/form-field', () => ({
+  default: ({ children, label, errorText, id }: any) => (
+    <div data-testid="form-field" id={id}>
+      <label>{label}</label>
+      {children}
+      {errorText && <span data-testid="error-text">{errorText}</span>}
+    </div>
+  ),
+}));
+
+describe('AutocompleteInput', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useChoicesContext as any).mockReturnValue({ allChoices: [], isPending: false });
+  });
+
+  const choices = [
+    { id: '1', name: 'Option 1' },
+    { id: '2', name: 'Option 2' },
+  ];
+
+  it('should render correctly and resolve ID to label', () => {
+    (useInput as any).mockReturnValue({
+      id: 'test-autocomplete',
+      field: { value: '1', onChange: vi.fn(), onBlur: vi.fn() },
+      fieldState: { isTouched: false, invalid: false, error: null },
+      formState: { isSubmitted: false },
+      isRequired: false,
+    });
+    (useChoicesContext as any).mockReturnValue({ allChoices: choices, isPending: false });
+    (useResourceContext as any).mockReturnValue('products');
+
+    const { getByTestId, getByText } = render(
+      <AutocompleteInput source="category" label="Category" choices={choices} />,
+    );
+
+    expect(getByTestId('cloudscape-autosuggest')).toBeDefined();
+    const input = getByTestId('cloudscape-autosuggest').querySelector('input');
+    expect(input?.value).toBe('Option 1');
+    expect(getByText('Category')).toBeDefined();
+    expect(getByText('Option 1')).toBeDefined();
+    expect(getByText('Option 2')).toBeDefined();
+  });
+
+  it('should not display the ID while loading choices', () => {
+    (useChoicesContext as any).mockReturnValue({ allChoices: [], isPending: true });
+
+    (useInput as any).mockReturnValue({
+      id: 'test-autocomplete',
+      field: { value: '1', onChange: vi.fn(), onBlur: vi.fn() },
+      fieldState: { isTouched: false, invalid: false, error: null },
+      formState: { isSubmitted: false },
+      isRequired: false,
+    });
+
+    const { getByTestId } = render(<AutocompleteInput source="category" />);
+
+    const input = getByTestId('cloudscape-autosuggest').querySelector('input');
+    expect(input?.value).toBe('');
+  });
+
+  it('should show error when touched and invalid', () => {
+    (useInput as any).mockReturnValue({
+      id: 'test-autocomplete',
+      field: { value: '', onChange: vi.fn(), onBlur: vi.fn() },
+      fieldState: { isTouched: true, invalid: true, error: { message: 'Required' } },
+      formState: { isSubmitted: false },
+      isRequired: true,
+    });
+
+    const { getByTestId } = render(<AutocompleteInput source="category" choices={choices} />);
+
+    expect(getByTestId('error-text').textContent).toBe('Required');
+  });
+
+  it('should call field.onChange when an option is selected', () => {
+    const onChange = vi.fn();
+    (useInput as any).mockReturnValue({
+      id: 'test-autocomplete',
+      field: { value: '', onChange, onBlur: vi.fn() },
+      fieldState: { isTouched: false, invalid: false, error: null },
+      formState: { isSubmitted: false },
+      isRequired: false,
+    });
+    (useChoicesContext as any).mockReturnValue({ allChoices: choices, isPending: false });
+
+    const { getByTestId } = render(<AutocompleteInput source="category" choices={choices} />);
+
+    const option = getByTestId('option-1');
+    fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledWith('1');
+  });
+
+  it('should call field.onChange with null when input is cleared', () => {
+    const onChange = vi.fn();
+    (useInput as any).mockReturnValue({
+      id: 'test-autocomplete',
+      field: { value: '1', onChange, onBlur: vi.fn() },
+      fieldState: { isTouched: false, invalid: false, error: null },
+      formState: { isSubmitted: false },
+      isRequired: false,
+    });
+
+    const { getByTestId } = render(<AutocompleteInput source="category" choices={choices} />);
+
+    const input = getByTestId('cloudscape-autosuggest').querySelector('input');
+    if (input) {
+      fireEvent.change(input, { target: { value: '' } });
+    }
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
+  it('should call field.onBlur when input is blurred', () => {
+    const onBlur = vi.fn();
+    (useInput as any).mockReturnValue({
+      id: 'test-autocomplete',
+      field: { value: '', onChange: vi.fn(), onBlur },
+      fieldState: { isTouched: false, invalid: false, error: null },
+      formState: { isSubmitted: false },
+      isRequired: false,
+    });
+
+    const { getByTestId } = render(<AutocompleteInput source="category" choices={choices} />);
+
+    const input = getByTestId('cloudscape-autosuggest').querySelector('input');
+    if (input) {
+      fireEvent.blur(input);
+    }
+    expect(onBlur).toHaveBeenCalled();
+  });
+});

package/src/input/AutocompleteInput.tsx

@@ -0,0 +1,116 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+  useInput,
+  useResourceContext,
+  useChoicesContext,
+  useGetRecordRepresentation,
+} from '@strato-admin/core';
+import CloudscapeAutosuggest, {
+  AutosuggestProps as CloudscapeAutosuggestProps,
+} from '@cloudscape-design/components/autosuggest';
+import { FormField } from './FormField';
+import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
+import { InputProps } from './types';
+
+export interface AutocompleteInputProps
+    extends Omit<CloudscapeAutosuggestProps, 'onChange' | 'value' | 'options' | 'onBlur'>,
+        InputProps {
+    choices?: Array<{ id: string | number; [key: string]: any }>;
+}
+
+export const AutocompleteInput = (props: AutocompleteInputProps) => {
+    const { label, source, defaultValue, validate, choices: choicesProp, ...rest } = props;
+  const resource = useResourceContext();
+  const { allChoices, isPending, setFilters } = useChoicesContext(props);
+  const getRecordRepresentation = useGetRecordRepresentation(resource);
+  const context = useFormFieldContext();
+  const inputState =
+    context ??
+    useInput({
+      source,
+      defaultValue,
+      validate,
+      ...rest,
+    });
+
+  const { id, field } = inputState;
+
+  const choices = choicesProp || allChoices || [];
+
+  const selectedChoice = useMemo(
+    () => choices.find((c) => String(c.id) === String(field.value)),
+    [choices, field.value],
+  );
+
+  const [filterValue, setFilterValue] = useState('');
+
+  // Keep track of the last value we synced from the field
+  const lastSyncedValue = React.useRef<any>(undefined);
+
+  useEffect(() => {
+    if (selectedChoice) {
+      setFilterValue(String(getRecordRepresentation(selectedChoice)));
+      lastSyncedValue.current = field.value;
+    } else if (!field.value) {
+      setFilterValue('');
+      lastSyncedValue.current = field.value;
+    } else if (field.value !== lastSyncedValue.current) {
+      // If we have a value but no choice yet, and we are not loading,
+      // we show the ID as a last resort.
+      if (!isPending) {
+        setFilterValue(String(field.value));
+        lastSyncedValue.current = field.value;
+      }
+    }
+  }, [field.value, selectedChoice, getRecordRepresentation, isPending]);
+
+  const options = useMemo(
+    () =>
+      choices.map((choice) => ({
+        label: String(getRecordRepresentation(choice)),
+        value: String(choice.id),
+      })),
+    [choices, getRecordRepresentation],
+  );
+
+  const handleChange = ({ detail }: { detail: { value: string } }) => {
+    setFilterValue(detail.value);
+    if (setFilters) {
+      setFilters(detail.value);
+    }
+    // If the user cleared the input, we clear the field value
+    if (detail.value === '') {
+      field.onChange(null);
+    }
+  };
+
+  const handleSelect = ({ detail }: { detail: { value: string } }) => {
+    field.onChange(detail.value);
+  };
+
+  const inner = (
+    <CloudscapeAutosuggest
+      {...rest}
+      id={id}
+      options={options}
+      value={filterValue}
+      statusType={isPending ? 'loading' : 'finished'}
+      expandToViewport={true}
+      onChange={handleChange}
+      onSelect={handleSelect}
+      onBlur={() => field.onBlur()}
+    />
+  );
+
+  if (context) {
+    return inner;
+  }
+
+  return (
+    <FormFieldContext.Provider value={inputState}>
+      <FormField {...props}>{inner}</FormField>
+    </FormFieldContext.Provider>
+  );
+};
+
+export default AutocompleteInput;

package/src/input/FieldTitle.tsx

@@ -0,0 +1,53 @@
+
+import React from 'react';
+import { useTranslate, useResourceDefinitions } from '@strato-admin/core';
+import { humanize } from 'inflection';
+
+export interface FieldTitleProps {
+  resource?: string;
+  source?: string;
+  label?: string;
+  isRequired?: boolean;
+}
+
+export const FieldTitle = (props: FieldTitleProps) => {
+  const { resource, source, label, isRequired } = props;
+  const translate = useTranslate();
+  const definitions = useResourceDefinitions();
+
+  const labelString = React.useMemo(() => {
+    if (label !== undefined) {
+      return translate(label, { _: label });
+    }
+    if (!resource || !source) {
+      return source ? humanize(source) : '';
+    }
+
+    const definition = definitions[resource] as any;
+    const fieldDefinition = definition?.fields?.[source];
+    const defaultLabel = fieldDefinition?.label
+      ? translate(fieldDefinition.label, { _: fieldDefinition.label })
+      : source
+        ? humanize(source)
+        : '';
+
+    return translate(`resources.${resource}.fields.${source}`, {
+      _: defaultLabel,
+    });
+  }, [label, translate, resource, source, definitions]);
+
+  return (
+    <span>
+      {labelString}
+      {!isRequired && (
+        <span
+          style={{ color: '#687078', fontWeight: 'normal', fontStyle: 'italic', fontSize: '12px', marginLeft: '4px' }}
+        >
+          (optional)
+        </span>
+      )}
+    </span>
+  );
+};
+
+export default FieldTitle;