@strato-admin/cloudscape 0.1.0 → 0.3.0

package/src/layout/Notifications.tsx

@@ -0,0 +1,61 @@
+import { useCallback, useEffect, useRef } from 'react';
+import Flashbar, { FlashbarProps } from '@cloudscape-design/components/flashbar';
+import { useNotificationContext, useTranslate, NotificationPayload } from '@strato-admin/ra-core';
+
+const DEFAULT_AUTO_HIDE_MS = null;
+
+let idCounter = 0;
+const stableIds = new WeakMap<object, string>();
+const getStableId = (obj: object): string => {
+  if (!stableIds.has(obj)) stableIds.set(obj, String(++idCounter));
+  return stableIds.get(obj)!;
+};
+
+export const Notifications = () => {
+  const { notifications, setNotifications } = useNotificationContext();
+  const translate = useTranslate();
+  const timers = useRef(new Map<string, ReturnType<typeof setTimeout>>());
+
+  const dismiss = useCallback(
+    (notification: NotificationPayload) => {
+      const id = getStableId(notification);
+      clearTimeout(timers.current.get(id));
+      timers.current.delete(id);
+      setNotifications((prev: NotificationPayload[]) => prev.filter((n) => n !== notification));
+    },
+    [setNotifications],
+  );
+
+  useEffect(() => {
+    notifications.forEach((notification) => {
+      const id = getStableId(notification);
+      if (timers.current.has(id)) return;
+      const ms = notification.notificationOptions?.autoHideDuration ?? DEFAULT_AUTO_HIDE_MS;
+      if (ms === null) return;
+      timers.current.set(
+        id,
+        setTimeout(() => dismiss(notification), ms),
+      );
+    });
+
+    return () => {
+      timers.current.forEach((timer) => clearTimeout(timer));
+      timers.current.clear();
+    };
+  }, [notifications, dismiss]);
+
+  if (notifications.length === 0) return null;
+
+  const items: FlashbarProps.MessageDefinition[] = notifications.map((notification) => {
+    const { message, type, notificationOptions } = notification;
+    return {
+      id: getStableId(notification),
+      type,
+      content: typeof message === 'string' ? translate(message, notificationOptions?.messageArgs) : message,
+      dismissible: true,
+      onDismiss: () => dismiss(notification),
+    };
+  });
+
+  return <Flashbar items={items} />;
+};

package/src/layout/Ready.tsx

@@ -0,0 +1,123 @@
+import {
+  Box,
+  Button,
+  Container,
+  Header,
+  SpaceBetween,
+  Link,
+  Icon,
+  ContentLayout,
+  ColumnLayout,
+} from '@cloudscape-design/components';
+import { CodeView } from '@cloudscape-design/code-view';
+import typescriptHighlight from '@cloudscape-design/code-view/highlight/typescript';
+import { useDefaultTitle } from '@strato-admin/ra-core';
+
+/**
+ * Default component to display when the admin has no resources.
+ * This is a Cloudscape-themed replacement for the default react-admin Ready component.
+ */
+export const Ready = () => {
+  const defaultTitle = useDefaultTitle();
+  const appTitle = typeof defaultTitle === 'string' ? defaultTitle : 'Strato Admin';
+
+  const codeSnippet = `import { Admin, ResourceSchema, TextField } from '@strato-admin/admin';
+
+export const App = () => (
+    <Admin dataProvider={...}>
+        <ResourceSchema name="posts" >
+          <TextField source="id" />
+        </ResourceSchema>
+    </Admin>
+);`;
+
+  return (
+    <ContentLayout
+      maxContentWidth={1040}
+      headerVariant="high-contrast"
+      header={
+        <Box padding={{ vertical: 'xxxl' }} textAlign="center">
+          <SpaceBetween size="l">
+            <Header variant="h1" description="Your Strato Admin application is properly configured and ready to go.">
+              Welcome to {appTitle}
+            </Header>
+            <Box variant="p">
+              Strato Admin uses a <strong>Schema First</strong> approach to build admin interfaces efficiently. Start by
+              defining your resources and let us handle the rest.
+            </Box>
+            <Box margin={{ top: 'm' }}>
+              <SpaceBetween direction="horizontal" size="xs">
+                <Button
+                  variant="primary"
+                  href="https://strato-admin.dev/docs/getting-started/tutorial"
+                  iconName="external"
+                  iconAlign="right"
+                >
+                  Get started with the tutorial
+                </Button>
+                <Button href="https://github.com/vadimgu/strato-admin" iconName="external" iconAlign="right">
+                  View on GitHub
+                </Button>
+              </SpaceBetween>
+            </Box>
+          </SpaceBetween>
+        </Box>
+      }
+    >
+      <SpaceBetween size="xxl">
+        {/* Features / Details Section */}
+        <SpaceBetween size="l">
+          <Container header={<Header variant="h2">How to add your first resource</Header>}>
+            <SpaceBetween size="m">
+              <Box variant="p">
+                Add a <code>&lt;ResourceSchema&gt;</code> component as a child of your <code>&lt;Admin&gt;</code> to
+                define your data model.
+              </Box>
+              <CodeView content={codeSnippet} highlight={typescriptHighlight} />
+            </SpaceBetween>
+          </Container>
+
+          <Container header={<Header variant="h2">Next steps</Header>}>
+            <ColumnLayout columns={2} variant="text-grid">
+              <div>
+                <Box variant="h3" fontWeight="bold">
+                  <Icon name="status-info" variant="link" /> Core Concepts
+                </Box>
+                <Box variant="p">
+                  Learn how{' '}
+                  <Link href="https://strato-admin.dev/docs/core-concepts/schema" external>
+                    Schemas
+                  </Link>{' '}
+                  work to automate your UI.
+                </Box>
+              </div>
+              <div>
+                <Box variant="h3" fontWeight="bold">
+                  <Icon name="star" variant="warning" /> Design System
+                </Box>
+                <Box variant="p">
+                  Explore the{' '}
+                  <Link href="https://cloudscape.design/" external>
+                    Cloudscape design system
+                  </Link>{' '}
+                  components.
+                </Box>
+              </div>
+            </ColumnLayout>
+          </Container>
+        </SpaceBetween>
+
+        {/* Footer */}
+        <Box textAlign="center" color="text-label" margin={{ top: 'xs' }} padding={{ bottom: 'xxxl' }}>
+          Built with{' '}
+          <Link href="https://www.strato-admin.dev" external>
+            Strato Admin
+          </Link>
+          .
+        </Box>
+      </SpaceBetween>
+    </ContentLayout>
+  );
+};
+
+export default Ready;

package/src/layout/TopNavigation.test.tsx

@@ -1,12 +1,11 @@
-
 import { render } from '@testing-library/react';
 import { vi, describe, it, expect, beforeEach } from 'vitest';
-import { useAuthProvider } from '@strato-admin/core';
+import { useAuthProvider } from '@strato-admin/ra-core';
 import CloudscapeTopNavigation from '@cloudscape-design/components/top-navigation';
 import TopNavigation from './TopNavigation';
 
 // Mock ra-core
-vi.mock('@strato-admin/core', () => ({
+vi.mock('@strato-admin/ra-core', () => ({
   useLocale: vi.fn(() => 'en'),
   useSetLocale: vi.fn(),
   useLocales: vi.fn(() => []),

package/src/layout/TopNavigation.tsx

@@ -1,8 +1,10 @@
 import CloudscapeTopNavigation, { TopNavigationProps } from '@cloudscape-design/components/top-navigation';
-import { useLocale, useSetLocale, useLocales, useTranslate, useAuthProvider, useStore } from '@strato-admin/core';
+import { useLocale, useSetLocale, useLocales, useTranslate, useAuthProvider, useStore } from '@strato-admin/ra-core';
 
-export interface MyTopNavigationProps extends Omit<TopNavigationProps, 'identity'> {
+export interface MyTopNavigationProps {
   identity?: TopNavigationProps.Identity;
+  utilities?: ReadonlyArray<TopNavigationProps.Utility>;
+  extraUtilities?: ReadonlyArray<TopNavigationProps.Utility>;
 }
 
 const LightModeIcon = (
@@ -19,7 +21,7 @@ const DarkModeIcon = (
   </svg>
 );
 
-export const TopNavigation = ({ utilities: providedUtilities, identity, ...props }: MyTopNavigationProps) => {
+export const TopNavigation = ({ utilities: providedUtilities, identity, extraUtilities }: MyTopNavigationProps) => {
   const locale = useLocale();
   const setLocale = useSetLocale();
   const locales = useLocales();
@@ -59,15 +61,15 @@ export const TopNavigation = ({ utilities: providedUtilities, identity, ...props
     if (authProvider) {
       autoUtilities.push({
         type: 'menu-dropdown',
-        text: translate('ra.auth.user_menu', { _: 'User' }),
+        text: translate('strato.auth.user_menu', { _: 'User' }),
         iconName: 'user-profile',
         items: [
-          { id: 'profile', text: translate('ra.auth.profile', { _: 'Profile' }) },
-          { id: 'signout', text: translate('ra.auth.logout', { _: 'Sign out' }) },
+          { id: 'profile', text: translate('strato.auth.profile', { _: 'Profile' }) },
+          { id: 'signout', text: translate('strato.auth.logout', { _: 'Sign out' }) },
         ],
       });
     }
-    utilities = autoUtilities;
+    utilities = extraUtilities ? [...autoUtilities, ...extraUtilities] : autoUtilities;
   }
 
   return (
@@ -75,7 +77,6 @@ export const TopNavigation = ({ utilities: providedUtilities, identity, ...props
       <CloudscapeTopNavigation
         identity={identity || { title: 'Strato Admin', href: '/' }}
         utilities={utilities}
-        {...props}
       />
     </div>
   );

package/src/layout/index.ts

@@ -1,2 +1,4 @@
 export * from './AppLayout';
 export * from './TopNavigation';
+export * from './Ready';
+export * from './Notifications';

package/src/list/Cards.test.tsx

@@ -0,0 +1,320 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { useTranslate, useTranslateLabel } from '@strato-admin/ra-core';
+import { useResourceSchema } from '@strato-admin/core';
+import { useCollection } from '../collection-hooks';
+import Cards from './Cards';
+import CloudscapeCards from '@cloudscape-design/components/cards';
+import KeyValuePairs from '../detail/KeyValuePairs';
+
+vi.mock('@strato-admin/ra-core', () => import('../__mocks__/ra-core'));
+vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
+
+// Mock useCollection
+vi.mock('../collection-hooks', () => ({
+  useCollection: vi.fn(),
+}));
+
+// Mock Cloudscape components
+vi.mock('@cloudscape-design/components/cards', () => ({
+  default: vi.fn(({ items, cardDefinition, header, selectionType, filter, preferences }: any) => (
+    <div data-testid="cloudscape-cards" data-selection-type={selectionType}>
+      {header && <div data-testid="cards-header">{header}</div>}
+      {filter && <div data-testid="cards-filter">{filter}</div>}
+      {preferences && <div data-testid="cards-preferences">{preferences}</div>}
+      {items.map((item: any, index: number) => (
+        <div key={index} data-testid="card">
+          {cardDefinition.sections.map((section: any) => (
+            <div key={section.id} data-testid={`section-${section.id}`}>
+              {section.content(item)}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  )),
+}));
+
+vi.mock('@cloudscape-design/components/pagination', () => ({
+  default: () => <div data-testid="pagination" />,
+}));
+
+vi.mock('@cloudscape-design/components/text-filter', () => ({
+  default: vi.fn(({ filteringPlaceholder }: any) => <div data-testid="text-filter">{filteringPlaceholder}</div>),
+}));
+
+vi.mock('@cloudscape-design/components/collection-preferences', () => ({
+  default: vi.fn(() => <div data-testid="collection-preferences" />),
+}));
+
+vi.mock('../detail/KeyValuePairs', () => ({
+  default: vi.fn(({ children }: any) => <div data-testid="key-value-pairs">{children}</div>),
+}));
+
+vi.mock('./TableHeader', () => ({
+  default: vi.fn(({ title, description, actions }: any) => (
+    <div data-testid="mock-table-header">
+      <div data-testid="header-title">{title}</div>
+      <div data-testid="header-description">{description}</div>
+      <div data-testid="header-actions">{actions}</div>
+    </div>
+  )),
+}));
+
+describe('Cards', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useCollection as any).mockReturnValue({
+      items: [{ id: 1, name: 'Product 1', price: 100, description: 'Desc 1' }],
+      paginationProps: {},
+      collectionProps: {},
+      filterProps: { filteringPlaceholder: 'Search...' },
+      preferencesProps: {
+        preferences: {},
+        onConfirm: vi.fn(),
+      },
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should honor listInclude from resource schema', () => {
+    (useResourceSchema as any).mockReturnValue({
+      fieldSchema: [
+        <div key="name" source="name" data-testid="field-name" />,
+        <div key="price" source="price" data-testid="field-price" />,
+        <div key="description" source="description" data-testid="field-description" />,
+      ],
+      listInclude: ['name', 'price'],
+    });
+
+    render(<Cards />);
+
+    // Check that KeyValuePairs received only name and price fields
+    const keyValuePairsProps = (KeyValuePairs as any).mock.calls[0][0];
+    const children = React.Children.toArray(keyValuePairsProps.children);
+
+    expect(children).toHaveLength(2);
+    expect((children[0] as any).props.source).toBe('name');
+    expect((children[1] as any).props.source).toBe('price');
+  });
+
+  it('should honor listExclude from resource schema', () => {
+    (useResourceSchema as any).mockReturnValue({
+      fieldSchema: [
+        <div key="name" source="name" data-testid="field-name" />,
+        <div key="price" source="price" data-testid="field-price" />,
+        <div key="description" source="description" data-testid="field-description" />,
+      ],
+      listExclude: ['description'],
+    });
+
+    render(<Cards />);
+
+    const keyValuePairsProps = (KeyValuePairs as any).mock.calls[0][0];
+    const children = React.Children.toArray(keyValuePairsProps.children);
+
+    expect(children).toHaveLength(2);
+    expect((children[0] as any).props.source).toBe('name');
+    expect((children[1] as any).props.source).toBe('price');
+  });
+
+  it('should honor include prop over listInclude from schema', () => {
+    (useResourceSchema as any).mockReturnValue({
+      fieldSchema: [
+        <div key="name" source="name" data-testid="field-name" />,
+        <div key="price" source="price" data-testid="field-price" />,
+        <div key="description" source="description" data-testid="field-description" />,
+      ],
+      listInclude: ['name'],
+    });
+
+    render(<Cards include={['price', 'description']} />);
+
+    const keyValuePairsProps = (KeyValuePairs as any).mock.calls[0][0];
+    const children = React.Children.toArray(keyValuePairsProps.children);
+
+    expect(children).toHaveLength(2);
+    expect((children[0] as any).props.source).toBe('price');
+    expect((children[1] as any).props.source).toBe('description');
+  });
+
+  it('should support declarative children', () => {
+    (useResourceSchema as any).mockReturnValue({
+      fieldSchema: [<div key="name" source="name" data-testid="field-name" />],
+    });
+
+    render(
+      <Cards>
+        <div source="custom" data-testid="field-custom" />
+      </Cards>,
+    );
+
+    const keyValuePairsProps = (KeyValuePairs as any).mock.calls[0][0];
+    const children = React.Children.toArray(keyValuePairsProps.children);
+
+    expect(children).toHaveLength(1);
+    expect((children[0] as any).props.source).toBe('custom');
+  });
+
+  it('should render TableHeader with correct title and description', () => {
+    (useResourceSchema as any).mockReturnValue({
+      fieldSchema: [],
+      label: 'Products',
+    });
+
+    const { getByTestId } = render(<Cards title="Custom Title" description="Custom Description" />);
+
+    expect(getByTestId('header-title').textContent).toBe('Custom Title');
+    expect(getByTestId('header-description').textContent).toBe('Custom Description');
+  });
+
+  it('should use schema label as default title', () => {
+    (useResourceSchema as any).mockReturnValue({
+      fieldSchema: [],
+      label: 'Schema Products',
+    });
+
+    const { getByTestId } = render(<Cards />);
+
+    expect(getByTestId('header-title').textContent).toBe('Schema Products');
+  });
+
+  it('should pass selectionType to CloudscapeCards', () => {
+    (useResourceSchema as any).mockReturnValue({
+      fieldSchema: [],
+    });
+
+    const { getByTestId } = render(<Cards selectionType="multi" />);
+
+    expect(getByTestId('cloudscape-cards').getAttribute('data-selection-type')).toBe('multi');
+  });
+
+  it('should default selectionType to multi if canDelete is true', () => {
+    (useResourceSchema as any).mockReturnValue({
+      fieldSchema: [],
+      definition: {
+        options: { canDelete: true },
+      },
+    });
+
+    const { getByTestId } = render(<Cards />);
+
+    expect(getByTestId('cloudscape-cards').getAttribute('data-selection-type')).toBe('multi');
+  });
+
+  it('should render TextFilter by default', () => {
+    (useResourceSchema as any).mockReturnValue({
+      fieldSchema: [],
+    });
+
+    const { getByTestId } = render(<Cards />);
+
+    expect(getByTestId('text-filter')).toBeDefined();
+  });
+
+  it('should not render TextFilter if filtering is false', () => {
+    (useResourceSchema as any).mockReturnValue({
+      fieldSchema: [],
+    });
+
+    const { queryByTestId } = render(<Cards filtering={false} />);
+
+    expect(queryByTestId('text-filter')).toBeNull();
+  });
+
+  it('should pass filteringPlaceholder to TextFilter', () => {
+    (useResourceSchema as any).mockReturnValue({
+      fieldSchema: [],
+    });
+
+    const { getByTestId } = render(<Cards filteringPlaceholder="Custom Search" />);
+
+    expect(getByTestId('text-filter').textContent).toBe('Custom Search');
+  });
+
+  it('should render CollectionPreferences by default', () => {
+    (useResourceSchema as any).mockReturnValue({
+      fieldSchema: [],
+    });
+
+    const { getByTestId } = render(<Cards />);
+
+    expect(getByTestId('collection-preferences')).toBeDefined();
+  });
+
+  it('should pass pageSizeOptions to useCollection', () => {
+    (useResourceSchema as any).mockReturnValue({
+      fieldSchema: [],
+    });
+
+    const pageSizeOptions = [{ value: 5, label: '5 items' }];
+    render(<Cards pageSizeOptions={pageSizeOptions} />);
+
+    expect(useCollection).toHaveBeenCalledWith(
+      expect.objectContaining({
+        preferences: expect.objectContaining({
+          pageSizeOptions,
+        } as any),
+      }),
+    );
+  });
+
+  it('should filter children based on visibleContent preference', () => {
+    (useResourceSchema as any).mockReturnValue({
+      fieldSchema: [
+        <div key="name" source="name" data-testid="field-name" />,
+        <div key="price" source="price" data-testid="field-price" />,
+      ],
+    });
+
+    (useCollection as any).mockReturnValue({
+      items: [{ id: 1, name: 'Product 1', price: 100 }],
+      paginationProps: {},
+      collectionProps: {},
+      filterProps: {},
+      preferencesProps: {
+        preferences: {
+          visibleContent: ['name'],
+        },
+      },
+    });
+
+    render(<Cards />);
+
+    const keyValuePairsProps = (KeyValuePairs as any).mock.calls[0][0];
+    const children = React.Children.toArray(keyValuePairsProps.children);
+
+    expect(children).toHaveLength(1);
+    expect((children[0] as any).props.source).toBe('name');
+  });
+
+  it('should not filter children if visibleContent preference is not set', () => {
+    (useResourceSchema as any).mockReturnValue({
+      fieldSchema: [
+        <div key="name" source="name" data-testid="field-name" />,
+        <div key="price" source="price" data-testid="field-price" />,
+      ],
+    });
+
+    (useCollection as any).mockReturnValue({
+      items: [{ id: 1, name: 'Product 1', price: 100 }],
+      paginationProps: {},
+      collectionProps: {},
+      filterProps: {},
+      preferencesProps: {
+        preferences: {},
+      },
+    });
+
+    render(<Cards />);
+
+    const keyValuePairsProps = (KeyValuePairs as any).mock.calls[0][0];
+    const children = React.Children.toArray(keyValuePairsProps.children);
+
+    expect(children).toHaveLength(2);
+  });
+});