@strato-admin/cloudscape 0.1.0 → 0.3.0

package/src/i18n/types.ts

@@ -0,0 +1,19 @@
+export interface MessageProps {
+  children: string;
+  /**
+   * Explicit stable message ID. Used directly as the lookup key — bypasses
+   * hashing entirely. Takes priority over `context`. Written as `#. id: <id>`
+   * in PO files so translators see the stable identifier alongside the source text.
+   */
+  id?: string;
+  /**
+   * Disambiguation context. Prepended to the message before hashing so that
+   * the same string in different contexts produces different translation entries.
+   * Ignored when `id` is provided. Stored as `msgctxt` in PO files.
+   */
+  context?: string;
+  /** Translator note written into the PO file as a `#` comment. Ignored at runtime. */
+  comment?: string;
+  /** ICU variables substituted into the message at runtime. */
+  vars?: Record<string, any>;
+}

package/src/index.ts

@@ -11,7 +11,9 @@ export * from './form';
 export * from './layout';
 export * from './theme';
 export * from './button';
+export * from './i18n';
 export * from './Admin';
+export * from './Settings';
 export { default as RecordLink } from './RecordLink';
 export * from './RecordLink';
 
@@ -21,5 +23,7 @@ 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 { Detail, type DetailProps, Detail as Show, type DetailProps as ShowProps } from './detail';
 export { type InputProps } from './input';
+export { Ready, AppLayout, TopNavigation } from './layout';
+export { Button } from './button';

package/src/input/ArrayInput.test.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { useForm, FormProvider } from 'react-hook-form';
+import { ArrayInput } from './ArrayInput';
+import TextInput from './TextInput';
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => {
+  const methods = useForm({
+    defaultValues: {
+      items: [{ name: 'Item 1' }, { name: 'Item 2' }],
+    },
+  });
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+describe('ArrayInput', () => {
+  it('should render items from default values', () => {
+    render(
+      <TestWrapper>
+        <ArrayInput source="items">
+          <TextInput source="name" label="Name" />
+        </ArrayInput>
+      </TestWrapper>,
+    );
+
+    expect(screen.getByDisplayValue('Item 1')).toBeDefined();
+    expect(screen.getByDisplayValue('Item 2')).toBeDefined();
+  });
+
+  it('should add a new item when clicking the add button', async () => {
+    render(
+      <TestWrapper>
+        <ArrayInput source="items" addButtonText="Add new one">
+          <TextInput source="name" label="Name" />
+        </ArrayInput>
+      </TestWrapper>,
+    );
+
+    const addButton = screen.getByText('Add new one');
+    fireEvent.click(addButton);
+
+    // AttributeEditor might have some internal delay or we need to wait for react-hook-form
+    await waitFor(() => {
+      const inputs = screen.getAllByRole('textbox');
+      expect(inputs).toHaveLength(3);
+    });
+  });
+
+  it('should remove an item when clicking the remove button', async () => {
+    render(
+      <TestWrapper>
+        <ArrayInput source="items" removeButtonText="Remove this">
+          <TextInput source="name" label="Name" />
+        </ArrayInput>
+      </TestWrapper>,
+    );
+
+    const removeButtons = screen.getAllByText('Remove this');
+    fireEvent.click(removeButtons[0]);
+
+    await waitFor(() => {
+      const inputs = screen.getAllByRole('textbox');
+      expect(inputs).toHaveLength(1);
+    });
+  });
+
+  it('should support gridLayout prop', () => {
+    // This is mostly a smoke test to ensure the prop doesn't crash
+    const gridLayout = [{ rows: [[1]] }];
+    render(
+      <TestWrapper>
+        <ArrayInput source="items" gridLayout={gridLayout}>
+          <TextInput source="name" label="Name" />
+        </ArrayInput>
+      </TestWrapper>,
+    );
+
+    expect(screen.getByDisplayValue('Item 1')).toBeDefined();
+  });
+});

package/src/input/{AttributeEditor.tsx → ArrayInput.tsx}

@@ -1,7 +1,9 @@
 import React, { useMemo } from 'react';
-import { useInput, RecordContextProvider, useResourceContext } from '@strato-admin/core';
+import { useInput, RecordContextProvider, useResourceContext } from '@strato-admin/ra-core';
 import { useFieldArray, useFormContext } from 'react-hook-form';
-import CloudscapeAttributeEditor from '@cloudscape-design/components/attribute-editor';
+import CloudscapeAttributeEditor, {
+  AttributeEditorProps as CloudscapeAttributeEditorProps,
+} from '@cloudscape-design/components/attribute-editor';
 import Box from '@cloudscape-design/components/box';
 import { FieldTitle } from './FieldTitle';
 import TextInput from './TextInput';
@@ -9,7 +11,7 @@ import FormField from './FormField';
 import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
 import { InputProps } from './types';
 
-export interface AttributeEditorItemProps {
+export interface ArrayInputItemProps {
   source: string;
   label?: string | false;
   field?: React.ComponentType<any>;
@@ -18,23 +20,30 @@ export interface AttributeEditorItemProps {
   children?: React.ReactNode;
 }
 
-export const Item = (_props: AttributeEditorItemProps) => {
+export const Item = (_props: ArrayInputItemProps) => {
   // This is a placeholder component used to collect props.
-  // The actual rendering is handled by the AttributeEditor.
+  // The actual rendering is handled by the ArrayInput.
   return null;
 };
 
-export interface AttributeEditorProps extends Omit<InputProps, 'source'> {
+export interface ArrayInputProps extends Omit<InputProps, 'source'> {
   source?: string;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   addButtonText?: string;
   removeButtonText?: string;
   empty?: React.ReactNode;
   disableAddButton?: boolean;
   hideAddButton?: boolean;
+  /**
+   * Optionally specifies the layout of the attributes.
+   */
+  gridLayout?: ReadonlyArray<CloudscapeAttributeEditorProps.GridLayout>;
 }
 
-export const AttributeEditor = (props: AttributeEditorProps) => {
+/**
+ * ArrayInput component that uses Cloudscape's AttributeEditor to edit arrays of objects.
+ */
+export const ArrayInput = (props: ArrayInputProps) => {
   const {
     children,
     label,
@@ -46,6 +55,7 @@ export const AttributeEditor = (props: AttributeEditorProps) => {
     empty,
     disableAddButton,
     hideAddButton,
+    gridLayout,
     ...rest
   } = props;
 
@@ -86,14 +96,25 @@ export const AttributeEditor = (props: AttributeEditorProps) => {
       const childSource = childProps.source;
       const childLabel = childProps.label;
       const childValidate = childProps.validate;
+      const childDescription = childProps.description;
+      const childInfo = childProps.info;
 
       // Determine if the field is required by checking validators
       const isRequired = Array.isArray(childValidate)
-        ? childValidate.some((v: any) => v.isRequired)
-        : childValidate?.isRequired || childProps.isRequired;
+        ? childValidate.some((v: any) => v.isRequired || v.name === 'required')
+        : childValidate?.isRequired || childValidate?.name === 'required' || childProps.isRequired;
 
       return {
-        label: <FieldTitle label={childLabel} source={childSource} resource={resource} isRequired={isRequired} />,
+        label: (
+          <FieldTitle
+            label={childLabel}
+            source={childSource}
+            resource={childProps.resource || resource}
+            isRequired={isRequired}
+          />
+        ),
+        description: childDescription,
+        info: childInfo,
         control: (item: any, index: number) => {
           const prefixedSource = `${source}.${index}.${childSource}`;
 
@@ -135,11 +156,7 @@ export const AttributeEditor = (props: AttributeEditorProps) => {
             );
           }
 
-          return (
-            <RecordContextProvider value={item}>
-              <Box padding={{ top: 's' }}>{content}</Box>
-            </RecordContextProvider>
-          );
+          return <RecordContextProvider value={item}>{content}</RecordContextProvider>;
         },
       };
     })?.filter(Boolean) as any[];
@@ -163,6 +180,7 @@ export const AttributeEditor = (props: AttributeEditorProps) => {
         removeButtonText={removeButtonText}
         disableAddButton={disableAddButton}
         hideAddButton={hideAddButton}
+        gridLayout={gridLayout}
       />
     </FormFieldContext.Provider>
   );
@@ -180,6 +198,6 @@ export const AttributeEditor = (props: AttributeEditorProps) => {
   );
 };
 
-AttributeEditor.Item = Item;
+ArrayInput.Item = Item;
 
-export default AttributeEditor;
+export default ArrayInput;

package/src/input/AutocompleteInput.test.tsx

@@ -1,11 +1,9 @@
-
 import { render, fireEvent } from '@testing-library/react';
 import { vi, describe, it, expect, beforeEach } from 'vitest';
-import { useInput, useResourceContext, useChoicesContext } from '@strato-admin/core';
+import { useInput, useResourceContext, useChoicesContext } from '@strato-admin/ra-core';
 import { AutocompleteInput } from './AutocompleteInput';
 
-// Mock ra-core
-vi.mock('@strato-admin/core', () => ({
+vi.mock('@strato-admin/ra-core', () => ({
   useInput: vi.fn(),
   useResourceContext: vi.fn(),
   useChoicesContext: vi.fn().mockReturnValue({ allChoices: [], isPending: false }),

package/src/input/AutocompleteInput.tsx

@@ -1,10 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import {
-  useInput,
-  useResourceContext,
-  useChoicesContext,
-  useGetRecordRepresentation,
-} from '@strato-admin/core';
+import { useInput, useResourceContext, useChoicesContext, useGetRecordRepresentation } from '@strato-admin/ra-core';
 import CloudscapeAutosuggest, {
   AutosuggestProps as CloudscapeAutosuggestProps,
 } from '@cloudscape-design/components/autosuggest';
@@ -13,13 +8,13 @@ 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 }>;
+  extends InputProps,
+    Pick<CloudscapeAutosuggestProps, 'placeholder' | 'disabled' | 'readOnly' | 'enteredTextLabel'> {
+  choices?: Array<{ id: string | number; [key: string]: any }>;
 }
 
 export const AutocompleteInput = (props: AutocompleteInputProps) => {
-    const { label, source, defaultValue, validate, choices: choicesProp, ...rest } = props;
+  const { label, source, defaultValue, validate, choices: choicesProp, placeholder, disabled, readOnly, enteredTextLabel, ...rest } = props;
   const resource = useResourceContext();
   const { allChoices, isPending, setFilters } = useChoicesContext(props);
   const getRecordRepresentation = useGetRecordRepresentation(resource);
@@ -90,8 +85,11 @@ export const AutocompleteInput = (props: AutocompleteInputProps) => {
 
   const inner = (
     <CloudscapeAutosuggest
-      {...rest}
       id={id}
+      placeholder={placeholder}
+      disabled={disabled}
+      readOnly={readOnly}
+      enteredTextLabel={enteredTextLabel}
       options={options}
       value={filterValue}
       statusType={isPending ? 'loading' : 'finished'}

package/src/input/BooleanInput.tsx

@@ -0,0 +1,42 @@
+import { useInput } from '@strato-admin/ra-core';
+import Toggle, { ToggleProps } from '@cloudscape-design/components/toggle';
+import { FormField } from './FormField';
+import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
+import { InputProps } from './types';
+
+export interface BooleanInputProps
+  extends InputProps,
+    Pick<ToggleProps, 'disabled' | 'readOnly' | 'children' | 'ariaLabel'> {}
+
+export const BooleanInput = (props: BooleanInputProps) => {
+  const { label, source, defaultValue, validate, disabled, readOnly, children, ariaLabel, ...rest } = props;
+  const context = useFormFieldContext();
+  const inputState =
+    context ??
+    useInput({
+      source,
+      defaultValue: defaultValue ?? false,
+      validate,
+      ...rest,
+    });
+
+  const { field } = inputState;
+
+  const inner = (
+    <Toggle disabled={disabled} readOnly={readOnly} ariaLabel={ariaLabel} checked={!!field.value} onChange={(event) => field.onChange(event.detail.checked)}>
+      {children}
+    </Toggle>
+  );
+
+  if (context) {
+    return inner;
+  }
+
+  return (
+    <FormFieldContext.Provider value={inputState}>
+      <FormField {...props}>{inner}</FormField>
+    </FormFieldContext.Provider>
+  );
+};
+
+export default BooleanInput;

package/src/input/CommonInputProps.tsx

@@ -0,0 +1,8 @@
+import { StratoCommonInputProps } from './types';
+
+/**
+ * @internal Stub component for react-docgen-typescript to extract StratoCommonInputProps.
+ * Not intended for direct use.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const CommonInputProps = (_props: StratoCommonInputProps) => null;

package/src/input/FieldTitle.tsx

@@ -1,6 +1,5 @@
-
 import React from 'react';
-import { useTranslate, useResourceDefinitions } from '@strato-admin/core';
+import { useTranslate, useResourceDefinitions } from '@strato-admin/ra-core';
 import { humanize } from 'inflection';
 
 export interface FieldTitleProps {
@@ -11,7 +10,7 @@ export interface FieldTitleProps {
 }
 
 export const FieldTitle = (props: FieldTitleProps) => {
-  const { resource, source, label, isRequired } = props;
+  const { resource, source, label } = props;
   const translate = useTranslate();
   const definitions = useResourceDefinitions();
 
@@ -36,18 +35,7 @@ export const FieldTitle = (props: FieldTitleProps) => {
     });
   }, [label, translate, resource, source, definitions]);
 
-  return (
-    <span>
-      {labelString}
-      {!isRequired && (
-        <span
-          style={{ color: '#687078', fontWeight: 'normal', fontStyle: 'italic', fontSize: '12px', marginLeft: '4px' }}
-        >
-          (optional)
-        </span>
-      )}
-    </span>
-  );
+  return <span>{labelString}</span>;
 };
 
 export default FieldTitle;

package/src/input/FormField.tsx

@@ -1,87 +1,98 @@
-
 import React from 'react';
-import { useInput, useResourceContext, ValidationError } from '@strato-admin/core';
+import { useInput, useResourceContext, ValidationError, useTranslate } from '@strato-admin/ra-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;
+  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 {
+    children,
+    label,
+    source,
+    defaultValue,
+    validate,
+    description,
+    constraintText,
+    info,
+    secondaryControl,
+    stretch,
+    i18nStrings,
+    ...rest
+  } = props;
+  const resource = useResourceContext();
+  const translate = useTranslate();
+  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 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 {
+    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 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>
+  const finalConstraintText = React.useMemo(() => {
+    if (isRequired) return constraintText;
+    const optionalLabel = `(${translate('optional')})`;
+    if (!constraintText) return optionalLabel;
+    return (
+      <>
+        {constraintText} ({optionalLabel})
+      </>
     );
+  }, [isRequired, constraintText, translate]);
+
+  const content = (
+    <CloudscapeFormField
+      id={id}
+      label={
+        label === false ? undefined : (
+          <FieldTitle label={label} source={source} resource={resource} isRequired={isRequired} />
+        )
+      }
+      description={label === false ? undefined : description}
+      constraintText={label === false ? undefined : finalConstraintText}
+      info={info}
+      secondaryControl={secondaryControl}
+      stretch={stretch}
+      i18nStrings={i18nStrings}
+      errorText={errorText}
+    >
+      {children}
+    </CloudscapeFormField>
+  );
 
-    if (context) {
-        return content;
-    }
+  if (context) {
+    return content;
+  }
 
-    return <FormFieldContext.Provider value={contextValue}>{content}</FormFieldContext.Provider>;
+  return <FormFieldContext.Provider value={contextValue}>{content}</FormFieldContext.Provider>;
 };
 
 export default FormField;

package/src/input/FormFieldContext.ts

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-import { UseInputValue } from '@strato-admin/core';
+import { UseInputValue } from '@strato-admin/ra-core';
 
 export interface FormFieldContextValue extends UseInputValue {
   source?: string;

package/src/input/NumberInput.tsx

@@ -1,18 +1,17 @@
-
-import { useInput } from '@strato-admin/core';
+import { useInput } from '@strato-admin/ra-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'];
+  extends InputProps,
+    Pick<CloudscapeInputProps, 'placeholder' | 'disabled' | 'readOnly' | 'autoFocus' | 'step'> {
+  type?: CloudscapeInputProps['type'];
 }
 
 export const NumberInput = (props: NumberInputProps) => {
-    const { label, source, defaultValue, validate, type = 'number', ...rest } = props;
+  const { label, source, defaultValue, validate, type = 'number', placeholder, disabled, readOnly, autoFocus, step, ...rest } = props;
   const context = useFormFieldContext();
   const inputState =
     context ??
@@ -32,10 +31,14 @@ export const NumberInput = (props: NumberInputProps) => {
 
   const inner = (
     <CloudscapeInput
-      {...rest}
       {...field}
       id={id}
       type={type}
+      placeholder={placeholder}
+      disabled={disabled}
+      readOnly={readOnly}
+      autoFocus={autoFocus}
+      step={step}
       value={field.value?.toString() || ''}
       onChange={(event) => handleChange(event.detail.value)}
       onBlur={() => field.onBlur()}

package/src/input/ReferenceInput.test.tsx

@@ -1,11 +1,21 @@
-
 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', () => ({
+vi.mock('@strato-admin/ra-core', () => ({
   ReferenceInputBase: ({ children }: any) => <div data-testid="reference-input-base">{children}</div>,
+  useInput: vi.fn(() => ({
+    id: 'test',
+    field: { value: '', onChange: vi.fn(), onBlur: vi.fn() },
+    fieldState: { isTouched: false, invalid: false, error: null },
+    formState: { isSubmitted: false },
+    isRequired: false,
+  })),
+  useResourceContext: vi.fn(() => 'products'),
+  useTranslate: vi.fn(() => (key: string) => key),
+  useResourceDefinitions: vi.fn(() => ({})),
+  ValidationError: ({ error }: any) => <span>{error}</span>,
 }));
 
 describe('ReferenceInput', () => {