@strato-admin/cloudscape 0.1.0

package/dist/list/List.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { type RaRecord } from '@strato-admin/core';
+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 declare const List: <RecordType extends RaRecord = any>({ children, fieldSchema, include, exclude, title, actions, filtering, preferences, ...props }: ListProps<RecordType>) => import("react/jsx-runtime").JSX.Element;
+export default List;

package/dist/list/List.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListBase, ResourceSchemaProvider } from '@strato-admin/core';
+import Table from './Table';
+/**
+ * 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 = ({ children, fieldSchema, include, exclude, title, actions, filtering = true, preferences = true, ...props }) => {
+    const finalChildren = children || (_jsx(Table, { include: include, exclude: exclude, title: title, actions: actions, filtering: filtering, preferences: preferences }));
+    return (_jsx(ListBase, { ...props, children: _jsx(ResourceSchemaProvider, { resource: props.resource, fieldSchema: fieldSchema, children: finalChildren }) }));
+};
+export default List;

package/dist/list/Table.d.ts

@@ -0,0 +1,112 @@
+import React from 'react';
+import { TableProps as CloudscapeTableProps } from '@cloudscape-design/components/table';
+import { RaRecord } from '@strato-admin/core';
+import { type RecordLinkType } from '../RecordLink';
+export type CloudscapeColumnDefinitionProps = Partial<Omit<CloudscapeTableProps.ColumnDefinition<any>, 'id' | 'header' | 'cell' | 'sortingField'>>;
+export interface ColumnProps extends CloudscapeColumnDefinitionProps {
+    source?: string;
+    label?: string | React.ReactNode;
+    header?: React.ReactNode;
+    children?: React.ReactNode;
+    sortable?: boolean;
+    link?: RecordLinkType;
+    field?: React.ComponentType<any>;
+}
+export declare const Column: ({ children, source, link, field: FieldComponent }: ColumnProps) => import("react/jsx-runtime").JSX.Element;
+export interface NumberColumnProps extends ColumnProps {
+    source?: string;
+}
+export declare const NumberColumn: ({ children, source, link, field: FieldComponent }: NumberColumnProps) => import("react/jsx-runtime").JSX.Element;
+export interface DateColumnProps extends ColumnProps {
+    source?: string;
+}
+export declare const DateColumn: ({ children, source, link, field: FieldComponent }: DateColumnProps) => import("react/jsx-runtime").JSX.Element;
+export interface BooleanColumnProps extends ColumnProps {
+    source?: string;
+}
+export declare const BooleanColumn: ({ children, source, field: FieldComponent }: BooleanColumnProps) => import("react/jsx-runtime").JSX.Element;
+export interface ReferenceColumnProps extends ColumnProps {
+    source?: string;
+    reference: string;
+}
+export declare const ReferenceColumn: ({ children, source, reference, link, field: FieldComponent }: ReferenceColumnProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Properties for the Table component.
+ */
+export interface TableProps<RecordType extends RaRecord = any> extends Partial<Omit<CloudscapeTableProps<RecordType>, 'items' | 'columnDefinitions' | 'preferences'>> {
+    /**
+     * The title content of the table. Can be a string or a React node.
+     */
+    title?: React.ReactNode;
+    /**
+     * Actions to display in the table header, typically a button group.
+     */
+    actions?: React.ReactNode;
+    /**
+     * The columns to display, usually using `Table.Column` and its variants.
+     */
+    children?: React.ReactNode;
+    /**
+     * Include only these fields from the schema.
+     */
+    include?: string[];
+    /**
+     * Exclude these fields from the schema.
+     */
+    exclude?: string[];
+    /**
+     * Whether to enable text filtering.
+     * @default true
+     */
+    filtering?: boolean;
+    /**
+     * Placeholder text for the filter input.
+     * @default "Search..."
+     */
+    filteringPlaceholder?: string;
+    /**
+     * Options for the page size selector.
+     */
+    pageSizeOptions?: ReadonlyArray<{
+        value: number;
+        label?: string;
+    }>;
+    /**
+     * Whether to show the preferences button or custom preferences content.
+     * @default true
+     */
+    preferences?: boolean | React.ReactNode;
+    /**
+     * Whether columns can be reordered by the user.
+     * @default true
+     */
+    reorderable?: boolean;
+    /**
+     * The fields to display by default.
+     * Can be an array of field sources/IDs.
+     * If not specified, the first 5 fields will be shown.
+     */
+    defaultVisibleFields?: string[];
+}
+/**
+ * The Table component provides a declarative way to build data tables with Cloudscape components
+ * while integrating with React Admin's data fetching and state management.
+ *
+ * @example
+ * ```tsx
+ * <Table title="Products">
+ *   <Table.Column source="name" label="Name" />
+ *   <Table.NumberColumn source="price" label="Price" />
+ * </Table>
+ * ```
+ */
+export declare const Table: {
+    <RecordType extends RaRecord = any>({ title, actions, children, include, exclude, filtering, filteringPlaceholder, pageSizeOptions, preferences, reorderable, defaultVisibleFields, selectionType, ...props }: TableProps<RecordType>): import("react/jsx-runtime").JSX.Element;
+    Column: ({ children, source, link, field: FieldComponent }: ColumnProps) => import("react/jsx-runtime").JSX.Element;
+    NumberColumn: ({ children, source, link, field: FieldComponent }: NumberColumnProps) => import("react/jsx-runtime").JSX.Element;
+    DateColumn: ({ children, source, link, field: FieldComponent }: DateColumnProps) => import("react/jsx-runtime").JSX.Element;
+    BooleanColumn: ({ children, source, field: FieldComponent }: BooleanColumnProps) => import("react/jsx-runtime").JSX.Element;
+    ReferenceColumn: ({ children, source, reference, link, field: FieldComponent }: ReferenceColumnProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ title, actions, ...props }: import("./TableHeader").TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Table;

package/dist/list/Table.examples.d.ts

@@ -0,0 +1 @@
+export declare const ProductList: () => import("react/jsx-runtime").JSX.Element;

package/dist/list/Table.examples.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, Column, NumberColumn, DateColumn } from './Table';
+export const ProductList = () => (_jsxs(Table, { title: "Product Catalog", children: [_jsx(Column, { source: "name", label: "Product Name" }), _jsx(Column, { source: "category", label: "Category" }), _jsx(NumberColumn, { source: "price", label: "Price" }), _jsx(NumberColumn, { source: "stock", label: "Inventory" }), _jsx(DateColumn, { source: "lastUpdated", label: "Last Updated" })] }));

package/dist/list/Table.js

@@ -0,0 +1,218 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import CloudscapeTable from '@cloudscape-design/components/table';
+import Pagination from '@cloudscape-design/components/pagination';
+import Box from '@cloudscape-design/components/box';
+import TextFilter from '@cloudscape-design/components/text-filter';
+import CollectionPreferences from '@cloudscape-design/components/collection-preferences';
+import { RecordContextProvider, useResourceContext, useFieldSchema, useResourceDefinition, useGetResourceLabel, useTranslateLabel, useTranslate } from '@strato-admin/core';
+import { useCollection } from '../collection-hooks';
+import TextField from '../field/TextField';
+import NumberField from '../field/NumberField';
+import DateField from '../field/DateField';
+import BooleanField from '../field/BooleanField';
+import ReferenceField from '../field/ReferenceField';
+import { TableHeader } from './TableHeader';
+export const Column = ({ children, source, link, field: FieldComponent }) => {
+    if (children) {
+        return (_jsx(_Fragment, { children: React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child, { source }) : child) }));
+    }
+    if (FieldComponent) {
+        return _jsx(FieldComponent, { link: link, source: source });
+    }
+    return _jsx(TextField, { link: link, source: source });
+};
+export const NumberColumn = ({ children, source, link, field: FieldComponent }) => {
+    if (children) {
+        return (_jsx(_Fragment, { children: React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child, { source }) : child) }));
+    }
+    if (FieldComponent) {
+        return _jsx(FieldComponent, { link: link, source: source });
+    }
+    return _jsx(NumberField, { link: link, source: source });
+};
+NumberColumn.isNumberColumn = true;
+export const DateColumn = ({ children, source, link, field: FieldComponent }) => {
+    if (children) {
+        return (_jsx(_Fragment, { children: React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child, { source }) : child) }));
+    }
+    if (FieldComponent) {
+        return _jsx(FieldComponent, { link: link, source: source });
+    }
+    return _jsx(DateField, { link: link, source: source });
+};
+export const BooleanColumn = ({ children, source, field: FieldComponent }) => {
+    if (children) {
+        return (_jsx(_Fragment, { children: React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child, { source }) : child) }));
+    }
+    if (FieldComponent) {
+        return _jsx(FieldComponent, { source: source });
+    }
+    return _jsx(BooleanField, { source: source });
+};
+export const ReferenceColumn = ({ children, source, reference, link, field: FieldComponent }) => {
+    // ReferenceCol requires reference, so we pass it down
+    if (FieldComponent) {
+        return (_jsx(FieldComponent, { reference: reference, link: link, source: source, children: children }));
+    }
+    return (_jsx(ReferenceField, { reference: reference, link: link, source: source, children: children }));
+};
+const defaultPageSizeOptions = [
+    { value: 10, label: '10 items' },
+    { value: 25, label: '25 items' },
+    { value: 50, label: '50 items' },
+    { value: 100, label: '100 items' },
+];
+/**
+ * The Table component provides a declarative way to build data tables with Cloudscape components
+ * while integrating with React Admin's data fetching and state management.
+ *
+ * @example
+ * ```tsx
+ * <Table title="Products">
+ *   <Table.Column source="name" label="Name" />
+ *   <Table.NumberColumn source="price" label="Price" />
+ * </Table>
+ * ```
+ */
+export const Table = ({ title, actions, children, include, exclude, filtering = true, filteringPlaceholder, pageSizeOptions = defaultPageSizeOptions, preferences = true, reorderable = true, defaultVisibleFields, selectionType, ...props }) => {
+    const resource = useResourceContext();
+    const translate = useTranslate();
+    const translateLabel = useTranslateLabel();
+    const schemaChildren = useFieldSchema();
+    const resourceDefinition = useResourceDefinition({ resource });
+    const finalSelectionType = selectionType ?? (resourceDefinition?.options?.canDelete ? 'multi' : undefined);
+    const finalChildren = React.useMemo(() => {
+        const baseChildren = children || schemaChildren;
+        let result = React.Children.toArray(baseChildren);
+        if (include) {
+            result = result.filter((child) => React.isValidElement(child) && include.includes(child.props.source));
+        }
+        else if (exclude) {
+            result = result.filter((child) => React.isValidElement(child) && !exclude.includes(child.props.source));
+        }
+        return result;
+    }, [children, schemaChildren, include, exclude]);
+    // 1. Extract columns and options before calling useCollection
+    const extractedColumns = React.useMemo(() => {
+        const columns = [];
+        const options = [];
+        finalChildren.forEach((child, index) => {
+            if (!React.isValidElement(child)) {
+                return;
+            }
+            const { source, label, header: childHeader, sortable, link, field, children: childChildren, ...restColumnProps } = child.props;
+            const isNumberColumn = child.type?.isNumberColumn;
+            const headerLabel = translateLabel({ label, resource, source });
+            const finalHeader = isNumberColumn ? _jsx(Box, { textAlign: "right", children: headerLabel }) : headerLabel;
+            const columnId = source || `col-${index}`;
+            const id = resource ? `${resource}___${columnId}` : columnId;
+            columns.push({
+                ...restColumnProps,
+                id,
+                header: finalHeader,
+                cell: (item) => {
+                    const content = _jsx(RecordContextProvider, { value: item, children: child });
+                    return isNumberColumn ? _jsx(Box, { textAlign: "right", children: content }) : content;
+                },
+                sortingField: sortable !== false ? source : undefined,
+            });
+            // If we have a meaningful label/header string, allow toggling
+            if (typeof headerLabel === 'string') {
+                options.push({
+                    id,
+                    label: headerLabel,
+                });
+            }
+        });
+        return { columns, options };
+    }, [finalChildren, resource, translateLabel]);
+    const defaultVisibleContent = React.useMemo(() => {
+        if (extractedColumns.options.length === 0)
+            return undefined;
+        if (defaultVisibleFields) {
+            // Map user-provided fields to their actual IDs
+            return extractedColumns.options
+                .filter((opt) => {
+                const column = extractedColumns.columns.find((c) => c.id === opt.id);
+                return (defaultVisibleFields.includes(opt.id) ||
+                    (column?.sortingField && defaultVisibleFields.includes(column.sortingField)));
+            })
+                .map((opt) => opt.id);
+        }
+        // Default to first 5 toggleable columns
+        return extractedColumns.options.slice(0, 5).map((opt) => opt.id);
+    }, [extractedColumns, defaultVisibleFields]);
+    const defaultContentDisplay = React.useMemo(() => {
+        if (extractedColumns.options.length === 0)
+            return undefined;
+        const visibleIds = defaultVisibleContent || [];
+        return extractedColumns.options.map((opt) => ({
+            id: opt.id,
+            visible: visibleIds.includes(opt.id),
+        }));
+    }, [extractedColumns.options, defaultVisibleContent]);
+    const { items, paginationProps, collectionProps, filterProps, preferencesProps } = useCollection({
+        filtering: {},
+        pagination: {},
+        sorting: {},
+        preferences: {
+            pageSizeOptions,
+            visibleContentOptions: !reorderable && extractedColumns.options.length > 0 ? extractedColumns.options : undefined,
+            contentDisplayOptions: reorderable && extractedColumns.options.length > 0 ? extractedColumns.options : undefined,
+            visibleContent: defaultVisibleContent,
+            contentDisplay: defaultContentDisplay,
+        },
+    });
+    // 2. Filter columnDefinitions if reordering is disabled (Cloudscape Table handles it if columnDisplay is passed)
+    const columnDefinitions = React.useMemo(() => {
+        if (reorderable || !preferencesProps.preferences.visibleContent) {
+            return extractedColumns.columns;
+        }
+        return extractedColumns.columns.filter((col) => {
+            // Always show columns that are not in options (non-toggleable columns like Actions)
+            const isToggleable = extractedColumns.options.some((opt) => opt.id === col.id);
+            if (!isToggleable)
+                return true;
+            return preferencesProps.preferences.visibleContent?.includes(col.id);
+        });
+    }, [extractedColumns.columns, extractedColumns.options, preferencesProps.preferences.visibleContent, reorderable]);
+    const getResourceLabel = useGetResourceLabel();
+    const tableHeader = React.useMemo(() => {
+        if (title === null || title === false) {
+            return undefined;
+        }
+        if (React.isValidElement(title)) {
+            return title;
+        }
+        const finalTitle = title !== undefined ? title : getResourceLabel(resource, 2);
+        return _jsx(TableHeader, { title: finalTitle, actions: actions });
+    }, [title, actions, resource, getResourceLabel]);
+    return (_jsx(CloudscapeTable, { ...collectionProps, ...props, selectionType: finalSelectionType, stripedRows: preferencesProps.preferences.stripedRows, wrapLines: preferencesProps.preferences.wrapLines, columnDefinitions: columnDefinitions, columnDisplay: reorderable ? preferencesProps.preferences.contentDisplay : undefined, items: items || [], header: tableHeader, filter: filtering && (_jsx(TextFilter, { ...filterProps })), pagination: _jsx(Pagination, { ...paginationProps }), preferences: preferences === true || pageSizeOptions ? (_jsx(CollectionPreferences, { ...preferencesProps, pageSizePreference: pageSizeOptions
+                ? {
+                    options: pageSizeOptions,
+                }
+                : undefined, visibleContentPreference: !reorderable && extractedColumns.options.length > 0
+                ? {
+                    title: translate('ra.action.select_columns', { _: 'Select visible columns' }),
+                    options: [
+                        {
+                            label: translate('ra.action.select_columns', { _: 'Select visible columns' }),
+                            options: extractedColumns.options,
+                        },
+                    ],
+                }
+                : undefined, contentDisplayPreference: reorderable && extractedColumns.options.length > 0
+                ? {
+                    title: translate('ra.action.select_columns', { _: 'Select visible columns' }),
+                    options: extractedColumns.options,
+                }
+                : undefined })) : React.isValidElement(preferences) ? (preferences) : undefined }));
+};
+Table.Column = Column;
+Table.NumberColumn = NumberColumn;
+Table.DateColumn = DateColumn;
+Table.BooleanColumn = BooleanColumn;
+Table.ReferenceColumn = ReferenceColumn;
+Table.Header = TableHeader;
+export default Table;

package/dist/list/TableHeader.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { HeaderProps } from '@cloudscape-design/components/header';
+export interface TableHeaderProps extends Omit<HeaderProps, 'children'> {
+    title?: React.ReactNode;
+}
+export declare const TableHeader: ({ title, actions, ...props }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default TableHeader;

package/dist/list/TableHeader.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Header from '@cloudscape-design/components/header';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+import { useListContext, useTranslate, useLocale } from '@strato-admin/core';
+import { BulkDeleteButton } from '../button/BulkDeleteButton';
+import { CreateButton } from '../button/CreateButton';
+export const TableHeader = ({ title, actions, ...props }) => {
+    const translate = useTranslate();
+    const locale = useLocale();
+    const { total, isPending, defaultTitle } = useListContext();
+    const headerTitle = React.useMemo(() => {
+        if (title !== undefined) {
+            return typeof title === 'string' ? translate(title, { _: title }) : title;
+        }
+        return defaultTitle;
+    }, [title, defaultTitle, translate, locale]);
+    const counter = props.counter !== undefined ? props.counter : !isPending && total !== undefined ? `(${total})` : undefined;
+    const headerActions = actions !== undefined ? (actions) : (_jsxs(SpaceBetween, { direction: "horizontal", size: "xs", children: [_jsx(BulkDeleteButton, {}), _jsx(CreateButton, {})] }));
+    return (_jsx(Header, { variant: "h2", ...props, actions: headerActions, counter: counter, children: headerTitle }));
+};
+export default TableHeader;

package/dist/list/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Table';
+export * from './Cards';
+export * from './TableHeader';
+export * from './List';

package/dist/list/index.js

@@ -0,0 +1,4 @@
+export * from './Table';
+export * from './Cards';
+export * from './TableHeader';
+export * from './List';

package/dist/preferences/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/theme/ThemeManager.d.ts

@@ -0,0 +1,2 @@
+export declare const ThemeManager: () => null;
+export default ThemeManager;

package/dist/theme/ThemeManager.js

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import { useStore } from '@strato-admin/core';
+import { Mode, applyMode } from '@cloudscape-design/global-styles';
+export const ThemeManager = () => {
+    const [theme] = useStore('theme', 'light');
+    useEffect(() => {
+        applyMode(theme === 'dark' ? Mode.Dark : Mode.Light);
+    }, [theme]);
+    return null;
+};
+export default ThemeManager;

package/dist/theme/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ThemeManager } from './ThemeManager';
+export * from './ThemeManager';

package/dist/theme/index.js

@@ -0,0 +1,2 @@
+export { default as ThemeManager } from './ThemeManager';
+export * from './ThemeManager';

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@strato-admin/cloudscape",
+  "version": "0.1.0",
+  "description": "Strato Admin Cloudscape implementation - UI component library and theme for React Admin",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "strato",
+    "admin",
+    "react-admin",
+    "cloudscape",
+    "aws",
+    "ui"
+  ],
+  "author": "Vadim Gubergrits <vadim.gubergrits@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vgrits/strato-admin.git",
+    "directory": "packages/strato-cloudscape"
+  },
+  "dependencies": {
+    "@cloudscape-design/collection-hooks": "^1.0.85",
+    "@cloudscape-design/components": "^3.0.1217",
+    "@cloudscape-design/global-styles": "^1.0.0",
+    "inflection": "^3.0.2",
+    "react-hook-form": "^7.71.2",
+    "react-router-dom": "^6.22.3",
+    "@strato-admin/core": "0.1.0",
+    "@strato-admin/i18n": "0.1.0",
+    "@strato-admin/language-en": "0.1.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@playwright/test": "^1.58.2",
+    "@storybook/addon-a11y": "^10.2.17",
+    "@storybook/addon-docs": "^10.2.17",
+    "@storybook/addon-onboarding": "^10.2.17",
+    "@storybook/addon-vitest": "^10.2.17",
+    "@storybook/react": "^10.2.17",
+    "@storybook/react-vite": "^10.2.17",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "eslint-plugin-storybook": "^10.2.17",
+    "playwright": "^1.58.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^10.2.17"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  }
+}

package/src/Admin.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Admin } from './Admin';
+import { Resource } from '@strato-admin/core';
+
+// Mock Cloudscape TopNavigation
+vi.mock('./layout/TopNavigation', () => ({
+  TopNavigation: () => <div data-testid="top-nav" />,
+}));
+
+describe('Admin', () => {
+  it('should render without crashing when no i18nProvider is provided', () => {
+    const dataProvider = {
+      getList: () => Promise.resolve({ data: [], total: 0 }),
+      getOne: () => Promise.resolve({ data: {} }),
+      getMany: () => Promise.resolve({ data: [] }),
+      getManyReference: () => Promise.resolve({ data: [], total: 0 }),
+      update: () => Promise.resolve({ data: {} }),
+      updateMany: () => Promise.resolve({ data: [] }),
+      create: () => Promise.resolve({ data: {} }),
+      delete: () => Promise.resolve({ data: {} }),
+      deleteMany: () => Promise.resolve({ data: [] }),
+    } as any;
+
+    render(
+      <Admin dataProvider={dataProvider}>
+        <Resource name="posts" list={() => <div>Posts List</div>} />
+      </Admin>,
+    );
+  });
+});