@strato-admin/cloudscape 0.1.1 → 0.3.0

package/src/input/ReferenceInput.tsx

@@ -1,11 +1,11 @@
-
 import React from 'react';
-import { ReferenceInputBase, type ReferenceInputBaseProps } from '@strato-admin/core';
-import { useFormFieldContext } from './FormFieldContext';
+import { ReferenceInputBase, type ReferenceInputBaseProps, useInput } from '@strato-admin/ra-core';
+import { FormField } from './FormField';
+import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
 import { AutocompleteInput } from './AutocompleteInput';
 
 export const ReferenceInput = (props: ReferenceInputBaseProps) => {
-  const { children, source: sourceProp, reference, ...rest } = props;
+  const { children, source: sourceProp, reference, isRequired, validate, defaultValue, label, ...rest } = props;
   const context = useFormFieldContext();
 
   // If we have a context, we use the source from it.
@@ -15,22 +15,40 @@ export const ReferenceInput = (props: ReferenceInputBaseProps) => {
     throw new Error('ReferenceInput requires a source prop or a parent FormField Master');
   }
 
+  const inputState =
+    context ??
+    useInput({
+      source,
+      defaultValue,
+      validate,
+      isRequired,
+      ...rest,
+    });
+
   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 source={source} reference={reference} isRequired={isRequired} {...rest}>
+      <FormFieldContext.Provider value={inputState}>
+        {React.isValidElement(finalChildren)
+          ? React.cloneElement(finalChildren as React.ReactElement<any>, {
+              source,
+              isRequired,
+            })
+          : (finalChildren as any)}
+      </FormFieldContext.Provider>
     </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;
+  if (context) {
+    return inner;
+  }
+
+  return (
+    <FormFieldContext.Provider value={inputState}>
+      <FormField {...(props as any)}>{inner}</FormField>
+    </FormFieldContext.Provider>
+  );
 };
 
 export default ReferenceInput;

package/src/input/SelectInput.tsx

@@ -1,29 +1,23 @@
-
 import React from 'react';
-import {
-  useInput,
-  useResourceContext,
-  useChoicesContext,
-  useGetRecordRepresentation,
-} from '@strato-admin/core';
+import { useInput, useResourceContext, useChoicesContext, useGetRecordRepresentation } from '@strato-admin/ra-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;
+  extends InputProps,
+    Pick<CloudscapeSelectProps, 'filteringType' | 'placeholder' | 'disabled' | 'readOnly'> {
+  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 { label, source, defaultValue, validate, choices: choicesProp, emptyText = '-', filteringType, placeholder, disabled, readOnly, ...rest } = props;
   const resource = useResourceContext();
   const { allChoices, isPending } = useChoicesContext(props);
   const getRecordRepresentation = useGetRecordRepresentation(resource);
@@ -63,8 +57,11 @@ export const SelectInput = (props: SelectInputProps) => {
 
   const inner = (
     <CloudscapeSelect
-      {...rest}
       id={id}
+      filteringType={filteringType}
+      placeholder={placeholder}
+      disabled={disabled}
+      readOnly={readOnly}
       options={options}
       selectedOption={selectedOption}
       statusType={isPending ? 'loading' : 'finished'}

package/src/input/SliderInput.test.tsx

@@ -1,11 +1,10 @@
 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 { useInput, useResourceContext } from '@strato-admin/ra-core';
 import { SliderInput } from './SliderInput';
 
-// Mock strato-core
-vi.mock('@strato-admin/core', () => ({
+vi.mock('@strato-admin/ra-core', () => ({
   useInput: vi.fn(),
   useResourceContext: vi.fn(),
   useTranslate: () => (key: string) => key,

package/src/input/SliderInput.tsx

@@ -1,49 +1,59 @@
-import React from 'react';
-import { useInput } from '@strato-admin/core';
+import { useInput } from '@strato-admin/ra-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 {}
+  extends InputProps,
+    Partial<Pick<CloudscapeSliderProps, 'min' | 'max'>>,
+    Pick<CloudscapeSliderProps, 'step' | 'disabled' | 'readOnly' | 'valueFormatter' | 'tickMarks' | 'referenceValues' | 'hideFillLine' | 'ariaLabel' | 'ariaDescription'> {}
 
 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>
-    );
+  const { label, source, defaultValue, validate, min, max, step, disabled, readOnly, valueFormatter, tickMarks, referenceValues, hideFillLine, ariaLabel, ariaDescription, ...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 : (min ?? 0);
+
+  const inner = (
+    <CloudscapeSlider
+      id={id}
+      min={min ?? 0}
+      max={max ?? 100}
+      step={step}
+      disabled={disabled}
+      readOnly={readOnly}
+      valueFormatter={valueFormatter}
+      tickMarks={tickMarks}
+      referenceValues={referenceValues}
+      hideFillLine={hideFillLine}
+      ariaLabel={ariaLabel}
+      ariaDescription={ariaDescription}
+      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

@@ -1,16 +1,15 @@
-
-import { useInput } from '@strato-admin/core';
+import { useInput } from '@strato-admin/ra-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 {}
+  extends InputProps,
+    Pick<CloudscapeTextareaProps, 'placeholder' | 'disabled' | 'readOnly' | 'rows' | 'autoFocus' | 'spellcheck'> {}
 
 export const TextAreaInput = (props: TextAreaInputProps) => {
-    const { label, source, defaultValue, validate, ...rest } = props;
+  const { label, source, defaultValue, validate, placeholder, disabled, readOnly, rows, autoFocus, spellcheck, ...rest } = props;
   const context = useFormFieldContext();
   const inputState =
     context ??
@@ -25,9 +24,14 @@ export const TextAreaInput = (props: TextAreaInputProps) => {
 
   const inner = (
     <CloudscapeTextarea
-      {...rest}
       {...field}
       id={id}
+      placeholder={placeholder}
+      disabled={disabled}
+      readOnly={readOnly}
+      rows={rows}
+      autoFocus={autoFocus}
+      spellcheck={spellcheck}
       value={field.value || ''}
       onChange={(event) => field.onChange(event.detail.value)}
       onBlur={() => field.onBlur()}

package/src/input/TextInput.test.tsx

@@ -1,11 +1,9 @@
-
 import { render } from '@testing-library/react';
 import { vi, describe, it, expect, beforeEach } from 'vitest';
-import { useInput, useResourceContext } from '@strato-admin/core';
+import { useInput, useResourceContext } from '@strato-admin/ra-core';
 import { TextInput } from './TextInput';
 
-// Mock ra-core
-vi.mock('@strato-admin/core', () => ({
+vi.mock('@strato-admin/ra-core', () => ({
   useInput: vi.fn(),
   useResourceContext: vi.fn(),
   useTranslate: () => (key: string) => key,

package/src/input/TextInput.tsx

@@ -1,36 +1,49 @@
-
-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 TextInputProps
-    extends Omit<CloudscapeInputProps, 'onChange' | 'value' | 'onBlur' | 'type'>,
-        InputProps {
-    type?: CloudscapeInputProps['type'];
+  extends InputProps,
+  Pick<CloudscapeInputProps, 'placeholder' | 'disabled' | 'readOnly' | 'autoFocus' | 'autoComplete' | 'spellcheck' | 'inputMode'> {
+  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 {
+    label,
+    source,
+    defaultValue,
+    validate,
+    description,
+    constraintText,
+    info,
+    secondaryControl,
+    type = 'text',
+    placeholder,
+    disabled,
+    readOnly,
+    autoFocus,
+    autoComplete,
+    spellcheck,
+    inputMode,
 
+  } = props;
+  const context = useFormFieldContext();
+  const inputState = context ?? useInput({ source, defaultValue, validate });
+  const { field } = inputState;
   const inner = (
     <CloudscapeInput
-      {...rest}
       {...field}
-      id={id}
       type={type}
+      placeholder={placeholder}
+      disabled={disabled}
+      readOnly={readOnly}
+      autoFocus={autoFocus}
+      autoComplete={autoComplete}
+      spellcheck={spellcheck}
+      inputMode={inputMode}
       value={field.value || ''}
       onChange={(event) => field.onChange(event.detail.value)}
       onBlur={() => field.onBlur()}
@@ -43,7 +56,9 @@ export const TextInput = (props: TextInputProps) => {
 
   return (
     <FormFieldContext.Provider value={inputState}>
-      <FormField {...props}>{inner}</FormField>
+      <FormField source={source} label={label} description={description} constraintText={constraintText} info={info} secondaryControl={secondaryControl}>
+        {inner}
+      </FormField>
     </FormFieldContext.Provider>
   );
 };

package/src/input/index.ts

@@ -1,8 +1,9 @@
 export * from './types';
+export * from './BooleanInput';
 export * from './TextInput';
 export * from './TextAreaInput';
 export * from './NumberInput';
-export * from './AttributeEditor';
+export * from './ArrayInput';
 export * from './SelectInput';
 export * from './AutocompleteInput';
 export * from './ReferenceInput';

package/src/input/types.ts

@@ -1,14 +1,46 @@
-import { ReactNode } from 'react';
-import { InputProps as InputPropsBase } from '@strato-admin/core';
+import React from 'react';
+import { InputProps as InputPropsBase, Validator } from '@strato-admin/ra-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'
-    > {
+/**
+ * Common props shared by all Strato Admin input components.
+ */
+export interface StratoCommonInputProps<T = any> {
+  /** The field name in the record. Used to read and write the value. */
+  source: string;
+  /** Override the auto-generated label. Pass `false` to hide the label entirely. */
   label?: string | false;
+  /** The initial value when no record value exists. */
+  defaultValue?: any;
+  /** Validation rule or array of rules. Use built-in validators (`required()`, `minLength()`, etc.) or provide a custom function. */
+  validate?: Validator | Validator[];
+  /** Transforms the record value before passing it to the input (record → input). */
+  format?: (value: T) => any;
+  /** Transforms the input value before saving to the record (input → record). */
+  parse?: (value: any) => T;
+  /** When `true`, the value is visible but cannot be changed. */
+  readOnly?: boolean;
+  /** When `true`, the input is non-interactive and grayed out. */
+  disabled?: boolean;
+  /** Helper text displayed below the label. */
+  description?: React.ReactNode;
+  /** Additional constraint text. Appended with "(optional)" when the field is not required. */
+  constraintText?: React.ReactNode;
+  /** Info link displayed next to the label (Cloudscape `info` slot). */
+  info?: React.ReactNode;
+  /** Secondary control displayed to the right of the input (Cloudscape `secondaryControl` slot). */
+  secondaryControl?: React.ReactNode;
+  /** When `true`, the form field stretches to fill its container width. */
+  stretch?: boolean;
 }
 
+export interface StratoInputProps<T = any>
+  extends
+    StratoCommonInputProps<T>,
+    Omit<
+      InputPropsBase<T>,
+      'label' | 'source' | 'defaultValue' | 'validate' | 'format' | 'parse' | 'readOnly' | 'disabled'
+    >,
+    Pick<CloudscapeFormFieldProps, 'i18nStrings'> {}
+
 export type InputProps<T = any> = StratoInputProps<T>;

package/src/layout/AppLayout.test.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { vi, describe, it, expect, beforeEach } from 'vitest';
 import { AppLayout } from './AppLayout';
-import { useDefaultTitle, useResourceDefinitions } from '@strato-admin/core';
+import { useDefaultTitle, useResourceDefinitions } from '@strato-admin/ra-core';
 import { TopNavigation } from './TopNavigation';
+import SideNavigationMock from '@cloudscape-design/components/side-navigation';
 
-// Mock strato-core
+vi.mock('@strato-admin/ra-core', () => import('../__mocks__/ra-core'));
 vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
 
 // Mock global-styles
@@ -35,7 +36,7 @@ vi.mock('@cloudscape-design/components/app-layout', () => ({
 }));
 
 vi.mock('@cloudscape-design/components/side-navigation', () => ({
-  default: () => <div data-testid="side-navigation" />,
+  default: vi.fn(() => <div data-testid="side-navigation" />),
 }));
 
 describe('AppLayout', () => {
@@ -43,6 +44,25 @@ describe('AppLayout', () => {
     vi.clearAllMocks();
   });
 
+  it('should only show resources with hasList: true in SideNavigation', () => {
+    (useResourceDefinitions as any).mockReturnValue({
+      posts: { name: 'posts', hasList: true },
+      comments: { name: 'comments', hasList: false },
+      users: { name: 'users', hasList: true },
+    });
+
+    render(
+      <AppLayout>
+        <div>Content</div>
+      </AppLayout>,
+    );
+
+    const sideNavProps = vi.mocked(SideNavigationMock).mock.calls[0][0];
+    expect(sideNavProps.items).toHaveLength(2);
+    expect(sideNavProps.items[0]).toMatchObject({ text: 'posts', href: '/posts' });
+    expect(sideNavProps.items[1]).toMatchObject({ text: 'users', href: '/users' });
+  });
+
   it('should use title from useDefaultTitle hook if no title prop provided', () => {
     (useDefaultTitle as any).mockReturnValue('Hook Title');
 

package/src/layout/AppLayout.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import CloudscapeAppLayout from '@cloudscape-design/components/app-layout';
 import SideNavigation from '@cloudscape-design/components/side-navigation';
-import { useResourceDefinitions, useDefaultTitle, useGetResourceLabel } from '@strato-admin/core';
+import { useResourceDefinitions, useDefaultTitle, useGetResourceLabel } from '@strato-admin/ra-core';
 import { useNavigate } from 'react-router-dom';
 import { TopNavigation } from './TopNavigation';
+import { Notifications } from './Notifications';
 import ThemeManager from '../theme/ThemeManager';
 
 export interface AppLayoutProps {
@@ -19,14 +20,15 @@ export const AppLayout = ({ children, header, title }: AppLayoutProps) => {
   const defaultTitle = useDefaultTitle();
   const [navigationOpen, setNavigationOpen] = useState(true);
 
-  const appTitle =
-    title ?? (typeof defaultTitle === 'string' ? defaultTitle : '');
+  const appTitle = title ?? (typeof defaultTitle === 'string' ? defaultTitle : '');
 
-  const items = Object.values(resources).map((resource) => ({
-    type: 'link' as const,
-    text: getResourceLabel(resource.name),
-    href: `/${resource.name}`,
-  }));
+  const items = Object.values(resources)
+    .filter((resource) => resource.hasList)
+    .map((resource) => ({
+      type: 'link' as const,
+      text: getResourceLabel(resource.name),
+      href: `/${resource.name}`,
+    }));
 
   return (
     <>
@@ -51,6 +53,7 @@ export const AppLayout = ({ children, header, title }: AppLayoutProps) => {
             }}
           />
         }
+        notifications={<Notifications />}
         content={<div>{children}</div>}
       />
     </>

package/src/layout/Notifications.test.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { Notifications } from './Notifications';
+import { useNotificationContext, useTranslate } from '@strato-admin/ra-core';
+
+vi.mock('@strato-admin/ra-core', () => import('../__mocks__/ra-core'));
+
+vi.mock('@cloudscape-design/components/flashbar', () => ({
+  default: ({ items }: any) => (
+    <div data-testid="flashbar">
+      {items.map((item: any) => (
+        <div key={item.id} data-testid={`flash-item-${item.id}`} data-type={item.type}>
+          <span data-testid="flash-content">{item.content}</span>
+          {item.dismissible && (
+            <button data-testid={`dismiss-${item.id}`} onClick={item.onDismiss}>
+              Dismiss
+            </button>
+          )}
+        </div>
+      ))}
+    </div>
+  ),
+}));
+
+describe('Notifications', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders nothing when there are no notifications', () => {
+    (useNotificationContext as any).mockReturnValue({ notifications: [], setNotifications: vi.fn() });
+    const { container } = render(<Notifications />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders a Flashbar item for each notification', () => {
+    const n1 = { message: 'Saved', type: 'success' as const };
+    const n2 = { message: 'Error occurred', type: 'error' as const };
+    (useNotificationContext as any).mockReturnValue({
+      notifications: [n1, n2],
+      setNotifications: vi.fn(),
+    });
+    render(<Notifications />);
+    expect(screen.getByTestId('flashbar')).toBeDefined();
+    expect(screen.getAllByTestId('flash-content')).toHaveLength(2);
+  });
+
+  it('passes the correct type to each Flashbar item', () => {
+    const types = ['success', 'info', 'warning', 'error'] as const;
+    const notifications = types.map((type) => ({ message: type, type }));
+    (useNotificationContext as any).mockReturnValue({ notifications, setNotifications: vi.fn() });
+    render(<Notifications />);
+    const items = screen.getAllByTestId(/^flash-item-/);
+    expect(items.map((el) => el.getAttribute('data-type'))).toEqual(types);
+  });
+
+  it('translates string messages', () => {
+    (useTranslate as any).mockReturnValue((key: string) => `translated:${key}`);
+    (useNotificationContext as any).mockReturnValue({
+      notifications: [{ message: 'ra.action.save', type: 'success' as const }],
+      setNotifications: vi.fn(),
+    });
+    render(<Notifications />);
+    expect(screen.getByTestId('flash-content').textContent).toBe('translated:ra.action.save');
+  });
+
+  it('calls setNotifications to remove the dismissed notification', () => {
+    const notification = { message: 'Done', type: 'success' as const };
+    const setNotifications = vi.fn();
+    (useNotificationContext as any).mockReturnValue({
+      notifications: [notification],
+      setNotifications,
+    });
+    render(<Notifications />);
+    const dismissButtons = screen.getAllByTestId(/^dismiss-/);
+    fireEvent.click(dismissButtons[0]);
+    expect(setNotifications).toHaveBeenCalled();
+    const updater = setNotifications.mock.calls[0][0];
+    const result = updater([notification, { message: 'Other', type: 'info' as const }]);
+    expect(result).toHaveLength(1);
+    expect(result[0].message).toBe('Other');
+  });
+
+  it('does not auto-hide when autoHideDuration is null', () => {
+    vi.useFakeTimers();
+    const notification = {
+      message: 'Persistent',
+      type: 'info' as const,
+      notificationOptions: { autoHideDuration: null },
+    };
+    const setNotifications = vi.fn();
+    (useNotificationContext as any).mockReturnValue({
+      notifications: [notification],
+      setNotifications,
+    });
+    render(<Notifications />);
+    vi.advanceTimersByTime(10000);
+    expect(setNotifications).not.toHaveBeenCalled();
+    vi.useRealTimers();
+  });
+});