@strato-admin/cloudscape 0.1.0

package/src/layout/AppLayout.test.tsx

@@ -0,0 +1,87 @@
+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 { TopNavigation } from './TopNavigation';
+
+// Mock strato-core
+vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
+
+// Mock global-styles
+vi.mock('@cloudscape-design/global-styles', () => ({
+  Mode: { Light: 'light', Dark: 'dark' },
+  applyMode: vi.fn(),
+}));
+
+// Mock react-router-dom
+vi.mock('react-router-dom', () => ({
+  useNavigate: vi.fn(),
+}));
+
+// Mock TopNavigation
+vi.mock('./TopNavigation', () => ({
+  TopNavigation: vi.fn(() => <div data-testid="top-navigation" />),
+}));
+
+// Mock Cloudscape components
+vi.mock('@cloudscape-design/components/app-layout', () => ({
+  default: ({ navigation, content }: any) => (
+    <div>
+      <div data-testid="navigation">{navigation}</div>
+      <div data-testid="content">{content}</div>
+    </div>
+  ),
+}));
+
+vi.mock('@cloudscape-design/components/side-navigation', () => ({
+  default: () => <div data-testid="side-navigation" />,
+}));
+
+describe('AppLayout', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should use title from useDefaultTitle hook if no title prop provided', () => {
+    (useDefaultTitle as any).mockReturnValue('Hook Title');
+
+    render(
+      <AppLayout>
+        <div>Content</div>
+      </AppLayout>,
+    );
+
+    expect(vi.mocked(TopNavigation).mock.calls[0][0]).toMatchObject({
+      identity: { title: 'Hook Title' },
+    });
+  });
+
+  it('should prioritize title prop over useDefaultTitle hook', () => {
+    (useDefaultTitle as any).mockReturnValue('Hook Title');
+
+    render(
+      <AppLayout title="Prop Title">
+        <div>Content</div>
+      </AppLayout>,
+    );
+
+    expect(vi.mocked(TopNavigation).mock.calls[0][0]).toMatchObject({
+      identity: { title: 'Prop Title' },
+    });
+  });
+
+  it('should handle undefined default title', () => {
+    (useDefaultTitle as any).mockReturnValue(undefined);
+
+    render(
+      <AppLayout>
+        <div>Content</div>
+      </AppLayout>,
+    );
+
+    expect(vi.mocked(TopNavigation).mock.calls[0][0]).toMatchObject({
+      identity: { title: '' },
+    });
+  });
+});

package/src/layout/AppLayout.tsx

@@ -0,0 +1,60 @@
+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 { useNavigate } from 'react-router-dom';
+import { TopNavigation } from './TopNavigation';
+import ThemeManager from '../theme/ThemeManager';
+
+export interface AppLayoutProps {
+  children: React.ReactNode;
+  header?: React.ReactNode;
+  title?: string;
+}
+
+export const AppLayout = ({ children, header, title }: AppLayoutProps) => {
+  const resources = useResourceDefinitions();
+  const getResourceLabel = useGetResourceLabel();
+  const navigate = useNavigate();
+  const defaultTitle = useDefaultTitle();
+  const [navigationOpen, setNavigationOpen] = useState(true);
+
+  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}`,
+  }));
+
+  return (
+    <>
+      <ThemeManager />
+      {header || <TopNavigation identity={{ title: appTitle, href: '/' }} />}
+      <CloudscapeAppLayout
+        headerSelector="#header"
+        navigationOpen={navigationOpen}
+        onNavigationChange={({ detail }) => setNavigationOpen(detail.open)}
+        navigation={
+          <SideNavigation
+            //header={{
+            //    href: '/',
+            //    text: 'Dashboard',
+            //}}
+            items={items}
+            onFollow={(event) => {
+              if (!event.detail.external) {
+                event.preventDefault();
+                navigate(event.detail.href);
+              }
+            }}
+          />
+        }
+        content={<div>{children}</div>}
+      />
+    </>
+  );
+};
+
+export default AppLayout;

package/src/layout/TopNavigation.test.tsx

@@ -0,0 +1,78 @@
+
+import { render } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { useAuthProvider } from '@strato-admin/core';
+import CloudscapeTopNavigation from '@cloudscape-design/components/top-navigation';
+import TopNavigation from './TopNavigation';
+
+// Mock ra-core
+vi.mock('@strato-admin/core', () => ({
+  useLocale: vi.fn(() => 'en'),
+  useSetLocale: vi.fn(),
+  useLocales: vi.fn(() => []),
+  useTranslate: vi.fn(() => (key: string, options: any) => options?._ || key),
+  useAuthProvider: vi.fn(),
+  useStore: vi.fn(() => ['light', vi.fn()]),
+}));
+
+// Mock Cloudscape components
+vi.mock('@cloudscape-design/components/top-navigation', () => ({
+  default: vi.fn(() => <div data-testid="top-navigation" />),
+}));
+
+// Mock global-styles
+vi.mock('@cloudscape-design/global-styles', () => ({
+  Mode: { Light: 'light', Dark: 'dark' },
+  applyMode: vi.fn(),
+}));
+
+describe('TopNavigation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should display theme toggle', () => {
+    render(<TopNavigation />);
+
+    const navigationProps = (CloudscapeTopNavigation as any).mock.calls[0][0];
+    const themeToggle = navigationProps.utilities.find((u: any) => u.iconSvg !== undefined);
+    expect(themeToggle).toBeDefined();
+    expect(themeToggle.type).toBe('button');
+  });
+
+  it('should not display user menu when authProvider is missing', () => {
+    (useAuthProvider as any).mockReturnValue(undefined);
+
+    render(<TopNavigation />);
+
+    const navigationProps = (CloudscapeTopNavigation as any).mock.calls[0][0];
+    const userMenu = navigationProps.utilities.find((u: any) => u.iconName === 'user-profile');
+    expect(userMenu).toBeUndefined();
+  });
+
+  it('should display user menu when authProvider is present', () => {
+    (useAuthProvider as any).mockReturnValue({});
+
+    render(<TopNavigation />);
+
+    const navigationProps = (CloudscapeTopNavigation as any).mock.calls[0][0];
+    const userMenu = navigationProps.utilities.find((u: any) => u.iconName === 'user-profile');
+    expect(userMenu).toBeDefined();
+    expect(userMenu.text).toBe('User'); // Based on mock translate returning default value
+  });
+
+  it('should use provided identity', () => {
+    render(<TopNavigation identity={{ title: 'Custom Title', href: '/custom' }} />);
+
+    const navigationProps = (CloudscapeTopNavigation as any).mock.calls[0][0];
+    expect(navigationProps.identity).toEqual({ title: 'Custom Title', href: '/custom' });
+  });
+
+  it('should use provided utilities', () => {
+    const customUtilities = [{ type: 'button' as const, text: 'Custom' }];
+    render(<TopNavigation utilities={customUtilities} />);
+
+    const navigationProps = (CloudscapeTopNavigation as any).mock.calls[0][0];
+    expect(navigationProps.utilities).toEqual(customUtilities);
+  });
+});

package/src/layout/TopNavigation.tsx

@@ -0,0 +1,84 @@
+import CloudscapeTopNavigation, { TopNavigationProps } from '@cloudscape-design/components/top-navigation';
+import { useLocale, useSetLocale, useLocales, useTranslate, useAuthProvider, useStore } from '@strato-admin/core';
+
+export interface MyTopNavigationProps extends Omit<TopNavigationProps, 'identity'> {
+  identity?: TopNavigationProps.Identity;
+}
+
+const LightModeIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false">
+    <path d="M8 1.5v13a6.5 6.5 0 0 0 0-13z" fill="currentColor" />
+    <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.5" />
+  </svg>
+);
+
+const DarkModeIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false">
+    <path d="M8 1.5v13a6.5 6.5 0 0 1 0-13z" fill="currentColor" />
+    <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.5" />
+  </svg>
+);
+
+export const TopNavigation = ({ utilities: providedUtilities, identity, ...props }: MyTopNavigationProps) => {
+  const locale = useLocale();
+  const setLocale = useSetLocale();
+  const locales = useLocales();
+  const translate = useTranslate();
+  const authProvider = useAuthProvider();
+  const [theme, setTheme] = useStore('theme', 'light');
+
+  let utilities = providedUtilities;
+
+  if (!utilities) {
+    const autoUtilities: any[] = [];
+
+    autoUtilities.push({
+      type: 'button',
+      iconSvg: theme === 'light' ? LightModeIcon : DarkModeIcon,
+      onClick: () => {
+        setTheme(theme === 'dark' ? 'light' : 'dark');
+      },
+      ariaLabel: translate('strato.action.toggle_theme', { _: 'Toggle theme' }),
+    });
+
+    if (locales && locales.length > 1) {
+      autoUtilities.push({
+        type: 'menu-dropdown',
+        text: locales.find((l: any) => l.locale === locale)?.name || locale,
+        iconName: 'globe',
+        onItemClick: (event: any) => {
+          setLocale(event.detail.id);
+        },
+        items: locales.map((l: any) => ({
+          id: l.locale,
+          text: l.name,
+        })),
+      });
+    }
+
+    if (authProvider) {
+      autoUtilities.push({
+        type: 'menu-dropdown',
+        text: translate('ra.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' }) },
+        ],
+      });
+    }
+    utilities = autoUtilities;
+  }
+
+  return (
+    <div id="header">
+      <CloudscapeTopNavigation
+        identity={identity || { title: 'Strato Admin', href: '/' }}
+        utilities={utilities}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default TopNavigation;

package/src/layout/index.ts

@@ -0,0 +1,2 @@
+export * from './AppLayout';
+export * from './TopNavigation';

package/src/list/Cards.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import CloudscapeCards, { CardsProps } from '@cloudscape-design/components/cards';
+import Pagination from '@cloudscape-design/components/pagination';
+import { RaRecord, RecordContextProvider, useFieldSchema } from '@strato-admin/core';
+import { useCollection } from '../collection-hooks';
+import KeyValuePairs from '../detail/KeyValuePairs';
+
+export interface ListCardsProps<T extends RaRecord = any> extends Omit<CardsProps<T>, 'items' | 'cardDefinition'> {
+  renderItem?: (item: T) => React.ReactNode;
+  include?: string[];
+  exclude?: string[];
+}
+
+export const ListCards = <T extends RaRecord = any>({ 
+  renderItem, 
+  include,
+  exclude,
+  ...props 
+}: ListCardsProps<T>) => {
+  const { items, paginationProps, collectionProps } = useCollection<T>({
+    filtering: {},
+    pagination: {},
+    sorting: {},
+  });
+
+  const schemaChildren = useFieldSchema();
+
+  const defaultRenderItem = (_item: T) => (
+    <KeyValuePairs include={include} exclude={exclude}>
+      {schemaChildren}
+    </KeyValuePairs>
+  );
+
+  const finalRenderItem = renderItem || defaultRenderItem;
+
+  const cardDefinition: CardsProps.CardDefinition<T> = {
+    sections: [
+      {
+        id: 'main',
+        content: (item: T) => <RecordContextProvider value={item}>{finalRenderItem(item) as any}</RecordContextProvider>,
+      },
+    ],
+  };
+
+  return (
+    <CloudscapeCards
+      {...collectionProps}
+      {...props}
+      items={items || []}
+      cardDefinition={cardDefinition}
+      pagination={<Pagination {...paginationProps} />}
+    />
+  );
+};
+
+export const Cards = ListCards;
+
+export default ListCards;

package/src/list/List.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { ListBase, type RaRecord, ResourceSchemaProvider } from '@strato-admin/core';
+import Table from './Table';
+
+export interface ListProps<_RecordType extends RaRecord = any> {
+  children?: React.ReactNode;
+  fieldSchema?: React.ReactNode;
+  include?: string[];
+  exclude?: string[];
+  title?: React.ReactNode;
+  actions?: React.ReactNode;
+  /**
+   * Whether to enable text filtering in the implicit Table.
+   * @default true
+   */
+  filtering?: boolean;
+  /**
+   * Whether to show the preferences button in the implicit Table.
+   * @default true
+   */
+  preferences?: boolean | React.ReactNode;
+  [key: string]: any;
+}
+
+/**
+ * A List component that provides a list context and a Cloudscape Table.
+ *
+ * @example
+ * <List>
+ *   <Table>
+ *     <Table.Column source="name" />
+ *   </Table>
+ * </List>
+ * 
+ * @example
+ * // Using FieldSchema from context
+ * <List include={['name', 'price']} />
+ * 
+ * @example
+ * // Passing a custom field schema
+ * <List fieldSchema={<FieldSchema>...</FieldSchema>}>
+ *   <Table />
+ * </List>
+ */
+export const List = <RecordType extends RaRecord = any>({
+  children,
+  fieldSchema,
+  include,
+  exclude,
+  title,
+  actions,
+  filtering = true,
+  preferences = true,
+  ...props
+}: ListProps<RecordType>) => {
+  const finalChildren = children || (
+    <Table 
+      include={include} 
+      exclude={exclude} 
+      title={title} 
+      actions={actions} 
+      filtering={filtering} 
+      preferences={preferences} 
+    />
+  );
+
+  return (
+    <ListBase {...props}>
+      <ResourceSchemaProvider resource={props.resource} fieldSchema={fieldSchema}>
+        {finalChildren as any}
+      </ResourceSchemaProvider>
+    </ListBase>
+  );
+};
+
+export default List;

package/src/list/Table.examples.tsx

@@ -0,0 +1,11 @@
+import { Table, Column, NumberColumn, DateColumn } from './Table';
+
+export const ProductList = () => (
+  <Table title="Product Catalog">
+    <Column source="name" label="Product Name" />
+    <Column source="category" label="Category" />
+    <NumberColumn source="price" label="Price" />
+    <NumberColumn source="stock" label="Inventory" />
+    <DateColumn source="lastUpdated" label="Last Updated" />
+  </Table>
+);

package/src/list/Table.stories.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Table, Column, NumberColumn, DateColumn } from './Table';
+import { ResourceContext, CoreAdminContext, ListContextProvider } from '@strato-admin/core';
+import { ProductList } from './Table.examples';
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Table',
+  component: Table,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: React.ComponentType) => (
+      <CoreAdminContext dataProvider={{} as any}>
+        <ResourceContext.Provider value="products">
+          <Story />
+        </ResourceContext.Provider>
+      </CoreAdminContext>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+const items = [
+  { id: 1, name: 'Wireless Mouse', category: 'Accessories', price: 25.99, stock: 150, lastUpdated: '2024-03-10' },
+  { id: 2, name: 'Mechanical Keyboard', category: 'Accessories', price: 89.99, stock: 45, lastUpdated: '2024-03-08' },
+  { id: 3, name: '27-inch Monitor', category: 'Hardware', price: 299.99, stock: 20, lastUpdated: '2024-03-05' },
+  { id: 4, name: 'USB-C Cable', category: 'Accessories', price: 12.5, stock: 500, lastUpdated: '2024-03-11' },
+  { id: 5, name: 'Laptop Pro 14', category: 'Hardware', price: 1499.0, stock: 10, lastUpdated: '2024-03-01' },
+];
+
+const listContext = {
+  data: items,
+  total: items.length,
+  isPending: false,
+  isFetching: false,
+  isLoading: false,
+  page: 1,
+  perPage: 10,
+  setPage: () => {},
+  setPerPage: () => {},
+  sort: { field: 'name', order: 'ASC' },
+  setSort: () => {},
+  filterValues: {},
+  setFilters: () => {},
+  selectedIds: [],
+  onSelect: () => {},
+  onToggleItem: () => {},
+  onUnselectItems: () => {},
+  resource: 'products',
+} as any;
+
+export const Basic: Story = {
+  render: () => (
+    <ListContextProvider value={listContext}>
+      <ProductList />
+    </ListContextProvider>
+  ),
+};
+
+export const WithFiltering: Story = {
+  render: () => (
+    <ListContextProvider value={listContext}>
+      <Table title="Inventory Management" filtering preferences>
+        <Column source="name" label="Product Name" />
+        <Column source="category" label="Category" />
+        <NumberColumn source="price" label="Price" />
+        <NumberColumn source="stock" label="Inventory" />
+      </Table>
+    </ListContextProvider>
+  ),
+};