@strato-admin/cloudscape 0.1.0 → 0.3.0

package/src/detail/Show.test.tsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { vi, describe, it, expect, beforeEach } from 'vitest';
-import { useShowContext, useResourceContext } from '@strato-admin/core';
-import Show from './Show';
-
-// Mock strato-core
-vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
-
-// Mock react-router-dom
-vi.mock('react-router-dom', () => ({
-  useNavigate: vi.fn(),
-}));
-
-// Mock Cloudscape components
-vi.mock('@cloudscape-design/components/container', () => ({
-  default: ({ children, header }: any) => (
-    <div data-testid="container">
-      <div data-testid="container-header">{header}</div>
-      <div data-testid="container-content">{children}</div>
-    </div>
-  ),
-}));
-
-vi.mock('@cloudscape-design/components/header', () => ({
-  default: ({ children, actions }: any) => (
-    <header>
-      <div>{children}</div>
-      <div>{actions}</div>
-    </header>
-  ),
-}));
-
-vi.mock('@cloudscape-design/components/space-between', () => ({
-  default: ({ children }: any) => <div>{children}</div>,
-}));
-
-vi.mock('@cloudscape-design/components/button', () => ({
-  default: ({ children }: any) => <button>{children}</button>,
-}));
-
-describe('Show', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('should render nothing when loading', () => {
-    (useShowContext as any).mockReturnValue({
-      isLoading: true,
-      record: undefined,
-    });
-
-    const { queryByTestId } = render(
-      <Show>
-        <div data-testid="content" />
-      </Show>,
-    );
-
-    expect(queryByTestId('container')).toBeNull();
-  });
-
-  it('should render content and title when record is loaded', () => {
-    (useShowContext as any).mockReturnValue({
-      isLoading: false,
-      record: { id: 1 }, defaultTitle: 'Products',
-      resource: 'products',
-    });
-    (useResourceContext as any).mockReturnValue('products');
-
-    const { getByTestId, getByText } = render(
-      <Show>
-        <div data-testid="content">Hello World</div>
-      </Show>,
-    );
-
-    expect(getByTestId('container')).toBeDefined();
-    expect(getByTestId('content').textContent).toBe('Hello World');
-    expect(getByText('Products')).toBeDefined();
-  });
-
-  it('should use provided title', () => {
-    (useShowContext as any).mockReturnValue({
-      isLoading: false,
-      record: { id: 1 }, defaultTitle: 'Products',
-      resource: 'products',
-    });
-
-    const { getByText } = render(
-      <Show title="My Product">
-        <div />
-      </Show>,
-    );
-
-    expect(getByText('My Product')).toBeDefined();
-  });
-});

package/src/detail/Show.tsx

@@ -1,104 +0,0 @@
-import React from 'react';
-import { ShowBase, useShowContext, type RaRecord, ResourceSchemaProvider } from '@strato-admin/core';
-import Container from '@cloudscape-design/components/container';
-import SpaceBetween from '@cloudscape-design/components/space-between';
-import { ShowHeader } from './ShowHeader';
-import KeyValuePairs from './KeyValuePairs';
-
-export interface ShowProps<_RecordType extends RaRecord = RaRecord> {
-  children?: React.ReactNode;
-  fieldSchema?: React.ReactNode;
-  title?: React.ReactNode;
-  actions?: React.ReactNode;
-  resource?: string;
-  id?: any;
-  queryOptions?: any;
-  include?: string[];
-  exclude?: string[];
-}
-
-const ShowUI = ({
-  children,
-  resource,
-  fieldSchema,
-  title,
-  actions,
-  include,
-  exclude,
-}: {
-  children?: React.ReactNode;
-  resource?: string;
-  fieldSchema?: React.ReactNode;
-  title?: React.ReactNode;
-  actions?: React.ReactNode;
-  include?: string[];
-  exclude?: string[];
-}) => {
-  const { record, isLoading } = useShowContext();
-
-  if (isLoading || !record) {
-    return null;
-  }
-
-  const finalChildren = children || <KeyValuePairs include={include} exclude={exclude} />;
-
-  return (
-    <ResourceSchemaProvider resource={resource} fieldSchema={fieldSchema}>
-      <Container header={<ShowHeader title={title} actions={actions} />}>
-        <SpaceBetween direction="vertical" size="l">
-          {finalChildren}
-        </SpaceBetween>
-      </Container>
-    </ResourceSchemaProvider>
-  );
-};
-
-/**
- * A Show component that provides record context and a Cloudscape Container.
- *
- * @example
- * <Show>
- *   <KeyValuePairs>
- *     <TextField source="name" />
- *     <NumberField source="price" />
- *   </KeyValuePairs>
- * </Show>
- * 
- * @example
- * // Using FieldSchema from context
- * <Show include={['name', 'price']} />
- * 
- * @example
- * // Passing a custom field schema
- * <Show fieldSchema={<FieldSchema>...</FieldSchema>}>
- *   <KeyValuePairs />
- * </Show>
- */
-export const Show = <RecordType extends RaRecord = RaRecord>({
-  children,
-  fieldSchema,
-  title,
-  actions,
-  include,
-  exclude,
-  ...props
-}: ShowProps<RecordType>) => {
-  return (
-    <ShowBase {...props}>
-      <ShowUI 
-        resource={props.resource}
-        title={title} 
-        actions={actions} 
-        include={include} 
-        exclude={exclude}
-        fieldSchema={fieldSchema}
-      >
-        {children}
-      </ShowUI>
-    </ShowBase>
-  );
-};
-
-Show.Header = ShowHeader;
-
-export default Show;

package/src/detail/ShowHeader.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import Header, { HeaderProps } from '@cloudscape-design/components/header';
-import SpaceBetween from '@cloudscape-design/components/space-between';
-import { useResourceContext, useShowContext, useTranslate, useResourceDefinitions } from '@strato-admin/core';
-import { EditButton } from '../button/EditButton';
-
-export interface ShowHeaderProps extends Omit<HeaderProps, 'children'> {
-  title?: React.ReactNode;
-}
-
-export const ShowHeader = ({ title, actions, ...props }: ShowHeaderProps) => {
-  const translate = useTranslate();
-  const { record, defaultTitle } = useShowContext();
-
-  const headerTitle = React.useMemo(() => {
-    if (title !== undefined) {
-      return typeof title === 'string' ? translate(title, { _: title }) : title;
-    }
-    return defaultTitle;
-  }, [title, defaultTitle, translate]);
-
-  const headerActions = actions || (
-    <SpaceBetween direction="horizontal" size="xs">
-      <EditButton record={record} />
-    </SpaceBetween>
-  );
-
-  return (
-    <Header variant="h2" {...props} actions={headerActions}>
-      {headerTitle}
-    </Header>
-  );
-};
-
-export default ShowHeader;

package/src/input/AttributeEditor.test.tsx

@@ -1,147 +0,0 @@
-
-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();
-  });
-});