@strato-admin/cloudscape 0.1.0

package/src/input/FormField.tsx

@@ -0,0 +1,87 @@
+
+import React from 'react';
+import { useInput, useResourceContext, ValidationError } from '@strato-admin/core';
+import CloudscapeFormField from '@cloudscape-design/components/form-field';
+import { FieldTitle } from './FieldTitle';
+import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
+import { InputProps } from './types';
+
+export interface FormFieldProps extends InputProps {
+    children: React.ReactNode;
+}
+
+export const FormField = (props: FormFieldProps) => {
+    const {
+        children,
+        label,
+        source,
+        defaultValue,
+        validate,
+        description,
+        constraintText,
+        info,
+        secondaryControl,
+        stretch,
+        i18nStrings,
+        ...rest
+    } = props;
+    const resource = useResourceContext();
+    const context = useFormFieldContext();
+    const inputState =
+        context ??
+        useInput({
+            source,
+            defaultValue,
+            validate,
+            ...rest,
+        });
+
+    const contextValue = React.useMemo(() => {
+        if (!inputState) return undefined;
+        return {
+            ...inputState,
+            source: source || context?.source || '',
+        };
+    }, [inputState, source, context?.source]);
+
+    const {
+        id,
+        fieldState: { isTouched, invalid, error },
+        formState: { isSubmitted },
+        isRequired,
+    } = inputState;
+
+    const errorToProcess = (error as any)?.message || (error as any)?.root?.message;
+    const errorText =
+        (isTouched || isSubmitted) && invalid && typeof errorToProcess === 'string' ? (
+            <ValidationError error={errorToProcess} />
+        ) : undefined;
+
+    const content = (
+        <CloudscapeFormField
+            id={id}
+            label={
+                label === false ? undefined : (
+                    <FieldTitle label={label} source={source} resource={resource} isRequired={isRequired} />
+                )
+            }
+            description={description}
+            constraintText={constraintText}
+            info={info}
+            secondaryControl={secondaryControl}
+            stretch={stretch}
+            i18nStrings={i18nStrings}
+            errorText={errorText}
+        >
+            {children}
+        </CloudscapeFormField>
+    );
+
+    if (context) {
+        return content;
+    }
+
+    return <FormFieldContext.Provider value={contextValue}>{content}</FormFieldContext.Provider>;
+};
+
+export default FormField;

package/src/input/FormFieldContext.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+import { UseInputValue } from '@strato-admin/core';
+
+export interface FormFieldContextValue extends UseInputValue {
+  source?: string;
+}
+
+export const FormFieldContext = createContext<FormFieldContextValue | undefined>(undefined);
+export const useFormFieldContext = () => useContext(FormFieldContext);

package/src/input/NumberInput.tsx

@@ -0,0 +1,56 @@
+
+import { useInput } from '@strato-admin/core';
+import CloudscapeInput, { InputProps as CloudscapeInputProps } from '@cloudscape-design/components/input';
+import { FormField } from './FormField';
+import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
+import { InputProps } from './types';
+
+export interface NumberInputProps
+    extends Omit<CloudscapeInputProps, 'onChange' | 'value' | 'onBlur' | 'type'>,
+        InputProps {
+    type?: CloudscapeInputProps['type'];
+}
+
+export const NumberInput = (props: NumberInputProps) => {
+    const { label, source, defaultValue, validate, type = 'number', ...rest } = props;
+  const context = useFormFieldContext();
+  const inputState =
+    context ??
+    useInput({
+      source,
+      defaultValue,
+      validate,
+      ...rest,
+    });
+
+  const { id, field } = inputState;
+
+  const handleChange = (value: string) => {
+    const floatValue = parseFloat(value);
+    field.onChange(isNaN(floatValue) ? null : floatValue);
+  };
+
+  const inner = (
+    <CloudscapeInput
+      {...rest}
+      {...field}
+      id={id}
+      type={type}
+      value={field.value?.toString() || ''}
+      onChange={(event) => handleChange(event.detail.value)}
+      onBlur={() => field.onBlur()}
+    />
+  );
+
+  if (context) {
+    return inner;
+  }
+
+  return (
+    <FormFieldContext.Provider value={inputState}>
+      <FormField {...props}>{inner}</FormField>
+    </FormFieldContext.Provider>
+  );
+};
+
+export default NumberInput;

package/src/input/ReferenceInput.test.tsx

@@ -0,0 +1,35 @@
+
+import { render } from '@testing-library/react';
+import { vi, describe, it, expect } from 'vitest';
+import { ReferenceInput } from './ReferenceInput';
+
+// Mock ra-core
+vi.mock('@strato-admin/core', () => ({
+  ReferenceInputBase: ({ children }: any) => <div data-testid="reference-input-base">{children}</div>,
+}));
+
+describe('ReferenceInput', () => {
+  it('should propagate source prop to children', () => {
+    const Child = ({ source }: any) => <div data-testid="child">{source}</div>;
+
+    const { getByTestId } = render(
+      <ReferenceInput reference="products" source="productId">
+        <Child />
+      </ReferenceInput>,
+    );
+
+    expect(getByTestId('child').textContent).toBe('productId');
+  });
+
+  it('should overwrite child source prop with its own source prop', () => {
+    const Child = ({ source }: any) => <div data-testid="child">{source}</div>;
+
+    const { getByTestId } = render(
+      <ReferenceInput reference="products" source="prefixed.productId">
+        <Child source="productId" />
+      </ReferenceInput>,
+    );
+
+    expect(getByTestId('child').textContent).toBe('prefixed.productId');
+  });
+});

package/src/input/ReferenceInput.tsx

@@ -0,0 +1,36 @@
+
+import React from 'react';
+import { ReferenceInputBase, type ReferenceInputBaseProps } from '@strato-admin/core';
+import { useFormFieldContext } from './FormFieldContext';
+import { AutocompleteInput } from './AutocompleteInput';
+
+export const ReferenceInput = (props: ReferenceInputBaseProps) => {
+  const { children, source: sourceProp, reference, ...rest } = props;
+  const context = useFormFieldContext();
+
+  // If we have a context, we use the source from it.
+  const source = sourceProp || context?.source;
+
+  if (!source) {
+    throw new Error('ReferenceInput requires a source prop or a parent FormField Master');
+  }
+
+  const finalChildren = children || <AutocompleteInput source={source} />;
+
+  const inner = (
+    <ReferenceInputBase source={source} reference={reference} {...rest}>
+      {React.isValidElement(finalChildren)
+        ? React.cloneElement(finalChildren as React.ReactElement<any>, {
+            source,
+          })
+        : (finalChildren as any)}
+    </ReferenceInputBase>
+  );
+
+  // ReferenceInput is unique because it's a wrapper.
+  // It doesn't use FormFieldContext for its state directly (ReferenceInputBase does),
+  // but it needs to ensure its children can consume the state it provides via ReferenceInputBase.
+  return inner;
+};
+
+export default ReferenceInput;

package/src/input/SelectInput.tsx

@@ -0,0 +1,91 @@
+
+import React from 'react';
+import {
+  useInput,
+  useResourceContext,
+  useChoicesContext,
+  useGetRecordRepresentation,
+} from '@strato-admin/core';
+import CloudscapeSelect, { SelectProps as CloudscapeSelectProps } from '@cloudscape-design/components/select';
+import { FormField } from './FormField';
+import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
+import { InputProps } from './types';
+
+export interface SelectInputProps
+    extends Omit<CloudscapeSelectProps, 'onChange' | 'selectedOption' | 'options' | 'onBlur'>,
+        InputProps {
+    choices?: Array<{ id: string | number; [key: string]: any }>;
+    /**
+     * The text to display for the empty option when isRequired is false.
+     * @default "-"
+     */
+    emptyText?: string;
+}
+
+export const SelectInput = (props: SelectInputProps) => {
+    const { label, source, defaultValue, validate, choices: choicesProp, emptyText = '-', ...rest } = props;
+  const resource = useResourceContext();
+  const { allChoices, isPending } = useChoicesContext(props);
+  const getRecordRepresentation = useGetRecordRepresentation(resource);
+  const context = useFormFieldContext();
+  const inputState =
+    context ??
+    useInput({
+      source,
+      defaultValue,
+      validate,
+      ...rest,
+    });
+
+  const { id, field, isRequired } = inputState;
+
+  const choices = choicesProp || allChoices || [];
+
+  const options = React.useMemo(() => {
+    const opts = choices.map((choice) => ({
+      label: String(getRecordRepresentation(choice)),
+      value: String(choice.id),
+    }));
+
+    if (!isRequired) {
+      opts.unshift({ label: emptyText, value: '__EMPTY__' });
+    }
+    return opts;
+  }, [choices, getRecordRepresentation, isRequired, emptyText]);
+
+  const selectedOption =
+    options.find((option) => {
+      if (!field.value) {
+        return option.value === '__EMPTY__';
+      }
+      return option.value === String(field.value);
+    }) || null;
+
+  const inner = (
+    <CloudscapeSelect
+      {...rest}
+      id={id}
+      options={options}
+      selectedOption={selectedOption}
+      statusType={isPending ? 'loading' : 'finished'}
+      expandToViewport={true}
+      onChange={({ detail }) => {
+        const value = detail.selectedOption.value === '__EMPTY__' ? null : detail.selectedOption.value;
+        field.onChange(value);
+      }}
+      onBlur={() => field.onBlur()}
+    />
+  );
+
+  if (context) {
+    return inner;
+  }
+
+  return (
+    <FormFieldContext.Provider value={inputState}>
+      <FormField {...props}>{inner}</FormField>
+    </FormFieldContext.Provider>
+  );
+};
+
+export default SelectInput;

package/src/input/SliderInput.test.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { useInput, useResourceContext } from '@strato-admin/core';
+import { SliderInput } from './SliderInput';
+
+// Mock strato-core
+vi.mock('@strato-admin/core', () => ({
+  useInput: vi.fn(),
+  useResourceContext: vi.fn(),
+  useTranslate: () => (key: string) => key,
+  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/slider', () => ({
+  default: ({ value, onChange, id, min, max, step }: any) => (
+    <input
+      type="range"
+      data-testid="cloudscape-slider"
+      id={id}
+      value={value}
+      min={min}
+      max={max}
+      step={step}
+      onChange={(e) => onChange({ detail: { value: Number(e.target.value) } })}
+    />
+  ),
+}));
+
+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('SliderInput', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render correctly', () => {
+    (useInput as any).mockReturnValue({
+      id: 'test-slider',
+      field: { value: 50, onChange: vi.fn(), onBlur: vi.fn() },
+      fieldState: { isTouched: false, invalid: false, error: null },
+      formState: { isSubmitted: false },
+      isRequired: false,
+    });
+    (useResourceContext as any).mockReturnValue('products');
+
+    const { getByTestId, getByText } = render(<SliderInput source="rating" label="Rating" min={0} max={100} />);
+
+    expect(getByTestId('cloudscape-slider')).toBeDefined();
+    expect((getByTestId('cloudscape-slider') as HTMLInputElement).value).toBe('50');
+    expect(getByText('Rating')).toBeDefined();
+  });
+
+  it('should use min value if field value is null', () => {
+    (useInput as any).mockReturnValue({
+      id: 'test-slider',
+      field: { value: null, onChange: vi.fn(), onBlur: vi.fn() },
+      fieldState: { isTouched: false, invalid: false, error: null },
+      formState: { isSubmitted: false },
+      isRequired: false,
+    });
+
+    const { getByTestId } = render(<SliderInput source="rating" min={10} />);
+
+    expect((getByTestId('cloudscape-slider') as HTMLInputElement).value).toBe('10');
+  });
+
+  it('should call onChange with numeric value', () => {
+    const onChange = vi.fn();
+    (useInput as any).mockReturnValue({
+      id: 'test-slider',
+      field: { value: 50, onChange, onBlur: vi.fn() },
+      fieldState: { isTouched: false, invalid: false, error: null },
+      formState: { isSubmitted: false },
+      isRequired: false,
+    });
+
+    const { getByTestId } = render(<SliderInput source="rating" />);
+    const slider = getByTestId('cloudscape-slider');
+
+    fireEvent.change(slider, { target: { value: '75' } });
+
+    expect(onChange).toHaveBeenCalledWith(75);
+  });
+});

package/src/input/SliderInput.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useInput } from '@strato-admin/core';
+import CloudscapeSlider, { SliderProps as CloudscapeSliderProps } from '@cloudscape-design/components/slider';
+import { FormField } from './FormField';
+import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
+import { InputProps } from './types';
+
+export interface SliderInputProps
+    extends Omit<CloudscapeSliderProps, 'onChange' | 'value' | 'i18nStrings'>,
+        InputProps {}
+
+export const SliderInput = (props: SliderInputProps) => {
+    const { label, source, defaultValue, validate, ...rest } = props;
+    const context = useFormFieldContext();
+    const inputState =
+        context ??
+        useInput({
+            source,
+            defaultValue,
+            validate,
+            ...rest,
+        });
+
+    const { id, field } = inputState;
+
+    // Cloudscape Slider requires a number value
+    const value = typeof field.value === 'number' ? field.value : props.min ?? 0;
+
+    const inner = (
+        <CloudscapeSlider
+            {...(rest as any)}
+            id={id}
+            value={value}
+            onChange={(event) => field.onChange(event.detail.value)}
+        />
+    );
+
+    if (context) {
+        return inner;
+    }
+
+    return (
+        <FormFieldContext.Provider value={inputState}>
+            <FormField {...props}>{inner}</FormField>
+        </FormFieldContext.Provider>
+    );
+};
+
+export default SliderInput;

package/src/input/TextAreaInput.tsx

@@ -0,0 +1,48 @@
+
+import { useInput } from '@strato-admin/core';
+import CloudscapeTextarea, { TextareaProps as CloudscapeTextareaProps } from '@cloudscape-design/components/textarea';
+import { FormField } from './FormField';
+import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
+import { InputProps } from './types';
+
+export interface TextAreaInputProps
+    extends Omit<CloudscapeTextareaProps, 'onChange' | 'value' | 'onBlur'>,
+        InputProps {}
+
+export const TextAreaInput = (props: TextAreaInputProps) => {
+    const { label, source, defaultValue, validate, ...rest } = props;
+  const context = useFormFieldContext();
+  const inputState =
+    context ??
+    useInput({
+      source,
+      defaultValue,
+      validate,
+      ...rest,
+    });
+
+  const { id, field } = inputState;
+
+  const inner = (
+    <CloudscapeTextarea
+      {...rest}
+      {...field}
+      id={id}
+      value={field.value || ''}
+      onChange={(event) => field.onChange(event.detail.value)}
+      onBlur={() => field.onBlur()}
+    />
+  );
+
+  if (context) {
+    return inner;
+  }
+
+  return (
+    <FormFieldContext.Provider value={inputState}>
+      <FormField {...props}>{inner}</FormField>
+    </FormFieldContext.Provider>
+  );
+};
+
+export default TextAreaInput;

package/src/input/TextInput.test.tsx

@@ -0,0 +1,91 @@
+
+import { render } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { useInput, useResourceContext } from '@strato-admin/core';
+import { TextInput } from './TextInput';
+
+// Mock ra-core
+vi.mock('@strato-admin/core', () => ({
+  useInput: vi.fn(),
+  useResourceContext: vi.fn(),
+  useTranslate: () => (key: string) => key,
+  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/input', () => ({
+  default: ({ value, onChange, id }: any) => (
+    <input
+      data-testid="cloudscape-input"
+      id={id}
+      value={value}
+      onChange={(e) => onChange({ detail: { value: e.target.value } })}
+    />
+  ),
+}));
+
+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('TextInput', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render correctly', () => {
+    (useInput as any).mockReturnValue({
+      id: 'test-input',
+      field: { value: 'test value', onChange: vi.fn(), onBlur: vi.fn() },
+      fieldState: { isTouched: false, invalid: false, error: null },
+      formState: { isSubmitted: false },
+      isRequired: false,
+    });
+    (useResourceContext as any).mockReturnValue('products');
+
+    const { getByTestId, getByText } = render(<TextInput source="title" label="Product Title" />);
+
+    expect(getByTestId('cloudscape-input')).toBeDefined();
+    expect((getByTestId('cloudscape-input') as HTMLInputElement).value).toBe('test value');
+    expect(getByText('Product Title')).toBeDefined();
+  });
+
+  it('should show error when touched and invalid', () => {
+    (useInput as any).mockReturnValue({
+      id: 'test-input',
+      field: { value: '', onChange: vi.fn(), onBlur: vi.fn() },
+      fieldState: { isTouched: true, invalid: true, error: { message: 'Required' } },
+      formState: { isSubmitted: false },
+      isRequired: true,
+    });
+
+    const { getByTestId } = render(<TextInput source="title" />);
+
+    expect(getByTestId('error-text').textContent).toBe('Required');
+  });
+
+  it('should show error when submitted and invalid', () => {
+    (useInput as any).mockReturnValue({
+      id: 'test-input',
+      field: { value: '', onChange: vi.fn(), onBlur: vi.fn() },
+      fieldState: { isTouched: false, invalid: true, error: { message: 'Required' } },
+      formState: { isSubmitted: true },
+      isRequired: true,
+    });
+
+    const { getByTestId } = render(<TextInput source="title" />);
+
+    expect(getByTestId('error-text').textContent).toBe('Required');
+  });
+});

package/src/input/TextInput.tsx

@@ -0,0 +1,51 @@
+
+import { useInput } from '@strato-admin/core';
+import CloudscapeInput, { InputProps as CloudscapeInputProps } from '@cloudscape-design/components/input';
+import { FormField } from './FormField';
+import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
+import { InputProps } from './types';
+
+export interface TextInputProps
+    extends Omit<CloudscapeInputProps, 'onChange' | 'value' | 'onBlur' | 'type'>,
+        InputProps {
+    type?: CloudscapeInputProps['type'];
+}
+
+export const TextInput = (props: TextInputProps) => {
+    const { label, source, defaultValue, validate, type = 'text', ...rest } = props;
+  const context = useFormFieldContext();
+  const inputState =
+    context ??
+    useInput({
+      source,
+      defaultValue,
+      validate,
+      ...rest,
+    });
+
+  const { id, field } = inputState;
+
+  const inner = (
+    <CloudscapeInput
+      {...rest}
+      {...field}
+      id={id}
+      type={type}
+      value={field.value || ''}
+      onChange={(event) => field.onChange(event.detail.value)}
+      onBlur={() => field.onBlur()}
+    />
+  );
+
+  if (context) {
+    return inner;
+  }
+
+  return (
+    <FormFieldContext.Provider value={inputState}>
+      <FormField {...props}>{inner}</FormField>
+    </FormFieldContext.Provider>
+  );
+};
+
+export default TextInput;

package/src/input/index.ts

@@ -0,0 +1,11 @@
+export * from './types';
+export * from './TextInput';
+export * from './TextAreaInput';
+export * from './NumberInput';
+export * from './AttributeEditor';
+export * from './SelectInput';
+export * from './AutocompleteInput';
+export * from './ReferenceInput';
+export * from './SliderInput';
+export * from './FormFieldContext';
+export * from './FormField';

package/src/input/types.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { InputProps as InputPropsBase } from '@strato-admin/core';
+import { FormFieldProps as CloudscapeFormFieldProps } from '@cloudscape-design/components/form-field';
+
+export interface StratoInputProps<T = any>
+  extends Omit<InputPropsBase<T>, 'label'>,
+    Pick<
+      CloudscapeFormFieldProps,
+      'description' | 'constraintText' | 'info' | 'secondaryControl' | 'stretch' | 'i18nStrings'
+    > {
+  label?: string | false;
+}
+
+export type InputProps<T = any> = StratoInputProps<T>;