@strato-admin/cloudscape 0.1.0

package/src/Admin.tsx

@@ -0,0 +1,123 @@
+import React, { ReactNode, useState, useEffect } from 'react';
+import {
+  CoreAdmin,
+  type CoreAdminProps,
+  type AdminChildren,
+  SchemaRegistryProvider,
+  localStorageStore,
+  useLocaleState,
+  registerDefaultResourceComponents,
+  registerFieldInputMapping,
+} from '@strato-admin/core';
+import { icuI18nProvider } from '@strato-admin/i18n';
+import englishMessages from '@strato-admin/language-en';
+import AppLayout from './layout/AppLayout';
+import { List } from './list';
+import { Create } from './create';
+import { Edit } from './edit';
+import { Show } from './detail';
+
+import { TextField, NumberField, CurrencyField, ReferenceField } from './field';
+import { TextInput, NumberInput, ReferenceInput } from './input';
+
+import { I18nProvider, importMessages, I18nProviderProps } from '@cloudscape-design/components/i18n';
+
+// Register Cloudscape themed components as defaults for ResourceSchema.
+// This is done once, here, to avoid circular dependencies at the module level.
+registerDefaultResourceComponents({
+  list: List,
+  create: Create,
+  edit: Edit,
+  show: Show,
+});
+
+registerFieldInputMapping(
+  new Map<any, any>([
+    [TextField, TextInput],
+    [NumberField, NumberInput],
+    [CurrencyField, NumberInput],
+    [ReferenceField, ReferenceInput],
+  ])
+);
+
+export interface AdminProps extends CoreAdminProps {
+  children?: AdminChildren;
+  title?: string;
+}
+
+const defaultI18nProvider = icuI18nProvider(() => englishMessages as any);
+const defaultStore = localStorageStore();
+
+/**
+ * Syncs Cloudscape I18n with React-Admin locale.
+ */
+const CloudscapeI18n = ({ children }: { children: ReactNode }) => {
+  const [locale] = useLocaleState();
+  const [messages, setMessages] = useState<ReadonlyArray<I18nProviderProps.Messages>>([]);
+
+  useEffect(() => {
+    let active = true;
+    importMessages(locale).then((msgs) => {
+      if (active) {
+        setMessages(msgs);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [locale]);
+
+  if (messages.length === 0) {
+    return null;
+  }
+
+  return (
+    <I18nProvider locale={locale} messages={messages}>
+      {children}
+    </I18nProvider>
+  );
+};
+
+const CloudscapeLayout = (props: any) => {
+  const { children, layout: Layout = AppLayout, ...rest } = props;
+  return (
+    <CloudscapeI18n>
+      <Layout {...rest}>{children}</Layout>
+    </CloudscapeI18n>
+  );
+};
+
+/**
+ * The root component of a Strato Admin application.
+ *
+ * It sets up the data fetching context, authentication, and layout using Cloudscape.
+ *
+ * @example
+ * <Admin dataProvider={myDataProvider} title="My App">
+ *   <Resource name="posts" list={PostList} />
+ * </Admin>
+ */
+export const Admin = ({
+  children,
+  title,
+  layout: Layout = AppLayout,
+  i18nProvider = defaultI18nProvider,
+  store = defaultStore,
+  ...props
+}: AdminProps) => {
+  return (
+    <SchemaRegistryProvider>
+      <CoreAdmin
+        {...props}
+        layout={(layoutProps: any) => <CloudscapeLayout {...layoutProps} layout={Layout} />}
+        title={title}
+        i18nProvider={i18nProvider}
+        store={store}
+      >
+        {children}
+      </CoreAdmin>
+    </SchemaRegistryProvider>
+  );
+};
+
+export default Admin;

package/src/RecordLink.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import RecordLink from './RecordLink';
+import { withRaContext } from './stories/RaStoryDecorator';
+
+const meta: Meta<typeof RecordLink> = {
+  title: 'Components/RecordLink',
+  component: RecordLink,
+  tags: ['autodocs'],
+  decorators: [withRaContext({ id: 123, name: 'Sample Record' }, 'samples')],
+};
+
+export default meta;
+type Story = StoryObj<typeof RecordLink>;
+
+export const Default: Story = {
+  args: {
+    link: 'edit',
+    children: 'Edit this record',
+  },
+};
+
+export const Show: Story = {
+  args: {
+    link: 'show',
+    children: 'Show details',
+  },
+};
+
+export const CustomString: Story = {
+  args: {
+    link: '/custom-path/123',
+    children: 'Go to custom path',
+  },
+};
+
+export const FunctionLink: Story = {
+  args: {
+    link: (record) => `/records/${record.id}/manage`,
+    children: 'Manage Record',
+  },
+};
+
+export const NoLink: Story = {
+  args: {
+    link: false,
+    children: 'Plain text (link=false)',
+  },
+};
+
+export const ResourceOverride: Story = {
+  args: {
+    link: 'edit',
+    resource: 'other-resource',
+    children: 'Edit other-resource',
+  },
+};

package/src/RecordLink.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import Link from '@cloudscape-design/components/link';
+import { useCreatePath, useResourceContext, useRecordContext } from '@strato-admin/core';
+import { useNavigate } from 'react-router-dom';
+
+export type RecordLinkType = string | boolean | ((record: any, reference?: string) => string);
+
+export interface RecordLinkProps {
+  link?: RecordLinkType;
+  resource?: string;
+  children: React.ReactNode;
+}
+
+const RecordLinkImpl = ({ link, resource, children }: RecordLinkProps) => {
+  const contextResource = useResourceContext();
+  const record = useRecordContext();
+  const createPath = useCreatePath();
+  const navigate = useNavigate();
+
+  const finalResource = resource ?? contextResource;
+
+  if (!record || !finalResource) {
+    return <>{children}</>;
+  }
+
+  let href = '';
+  if (typeof link === 'function') {
+    href = link(record, finalResource);
+  } else if (link === true) {
+    href = createPath({ resource: finalResource, id: record.id, type: 'edit' });
+  } else if (link === 'edit' || link === 'show') {
+    href = createPath({ resource: finalResource, id: record.id, type: link });
+  } else if (typeof link === 'string') {
+    href = link;
+  }
+
+  if (!href) {
+    return <>{children}</>;
+  }
+
+  return (
+    <Link
+      href={href}
+      onFollow={(event) => {
+        if (!event.detail.external) {
+          event.preventDefault();
+          navigate(href);
+        }
+      }}
+    >
+      {children}
+    </Link>
+  );
+};
+
+const RecordLink = ({ link, resource, children }: RecordLinkProps) => {
+  if (!link) {
+    return <>{children}</>;
+  }
+  return (
+    <RecordLinkImpl link={link} resource={resource}>
+      {children}
+    </RecordLinkImpl>
+  );
+};
+
+export default RecordLink;

package/src/__mocks__/strato-core.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { vi } from 'vitest';
+
+export const useTranslate = vi.fn(() => (key: string, options: any) => options?._ || key);
+export const useTranslateLabel = vi.fn(() => (label: any) => typeof label === 'string' ? label : label?.source || '');
+export const useGetResourceLabel = vi.fn(() => (resource: string) => {
+  if (resource === 'products') return 'Products';
+  if (resource === 'categories') return 'Categories';
+  return resource;
+});
+export const useResourceDefinitions = vi.fn(() => ({}));
+export const useResourceDefinition = vi.fn(() => ({
+  name: 'products',
+  options: { label: 'Products' },
+}));
+export const useResourceContext = vi.fn();
+export const useRecordContext = vi.fn((record) => record || {});
+export const useDefaultTitle = vi.fn(() => '');
+export const useInput = vi.fn();
+export const useChoicesContext = vi.fn(() => ({ allChoices: [], isPending: false }));
+export const useGetRecordRepresentation = vi.fn(() => (record: any) => record?.name || record?.id || record);
+export const useFieldSchema = vi.fn(() => []);
+export const useInputSchema = vi.fn(() => []);
+export const ResourceSchemaProvider = vi.fn(({ children }: any) => children);
+export const ValidationError = vi.fn(({ error }: any) => <span>{error}</span>);
+export const useStore = vi.fn(() => ['light', vi.fn()]);
+export const useSaveContext = vi.fn(() => ({ save: vi.fn(), saving: false }));
+export const useNotify = vi.fn(() => vi.fn());
+export const useRedirect = vi.fn(() => vi.fn());
+export const useRefresh = vi.fn(() => vi.fn());
+export const useFieldValue = vi.fn(({ source, record }: any) => record?.[source]);
+export const useCreatePath = vi.fn(() => (params: any) => `/${params.resource}/${params.id}/${params.type}`);
+export const useLocale = vi.fn(() => 'en');
+export const useBulkDeleteController = vi.fn(() => ({
+  handleDelete: vi.fn(),
+  isPending: false,
+  isLoading: false,
+}));
+
+export const CreateBase = vi.fn(({ children }: any) => <div data-testid="create-base">{children}</div>);
+export const EditBase = vi.fn(({ children }: any) => <div data-testid="edit-base">{children}</div>);
+export const ShowBase = vi.fn(({ children }: any) => <div data-testid="show-base">{children}</div>);
+export const ListBase = vi.fn(({ children }: any) => <div data-testid="list-base">{children}</div>);
+
+export const useShowContext = vi.fn(() => ({ isLoading: false, record: {}, defaultTitle: 'Products' }));
+export const useEditContext = vi.fn(() => ({ isLoading: false, record: {}, defaultTitle: 'Products' }));
+export const useCreateContext = vi.fn(() => ({ isLoading: false, record: {}, defaultTitle: 'Products' }));
+export const useListContext = vi.fn(() => ({ total: 0, isPending: false, selectedIds: [], defaultTitle: 'Products' }));
+
+export const Form = vi.fn(({ children }: any) => <div data-testid="ra-form">{children}</div>);
+export const FieldTitle = vi.fn(({ label, source }: any) => <span data-testid="field-title">{label || source}</span>);
+export const RecordContextProvider = vi.fn(({ children }: any) => <>{children}</>);

package/src/button/BulkDeleteButton.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BulkDeleteButton } from './BulkDeleteButton';
+import { withRaContext } from '../stories/RaStoryDecorator';
+
+const meta: Meta<typeof BulkDeleteButton> = {
+  title: 'Components/BulkDeleteButton',
+  component: BulkDeleteButton,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof BulkDeleteButton>;
+
+export const Default: Story = {
+  decorators: [
+    withRaContext(
+      undefined,
+      'posts',
+      { posts: { name: 'posts' } },
+      {
+        selectedIds: [1, 2, 3],
+        resource: 'posts',
+      },
+    ),
+  ],
+  args: {},
+};
+
+export const Disabled: Story = {
+  decorators: [
+    withRaContext(
+      undefined,
+      'posts',
+      { posts: { name: 'posts' } },
+      {
+        selectedIds: [],
+        resource: 'posts',
+      },
+    ),
+  ],
+  args: {},
+};
+
+export const Loading: Story = {
+  decorators: [
+    withRaContext(
+      undefined,
+      'posts',
+      { posts: { name: 'posts' } },
+      {
+        selectedIds: [1, 2, 3],
+        resource: 'posts',
+      },
+    ),
+  ],
+  args: {
+    label: 'Deleting...',
+  },
+};

package/src/button/BulkDeleteButton.test.tsx

@@ -0,0 +1,64 @@
+
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { BulkDeleteButton } from './BulkDeleteButton';
+import { useListContext, useBulkDeleteController, useTranslate, useResourceDefinition } from '@strato-admin/core';
+
+vi.mock('@strato-admin/core', () => ({
+  useListContext: vi.fn(),
+  useBulkDeleteController: vi.fn(),
+  useTranslate: vi.fn(),
+  useResourceDefinition: vi.fn(),
+}));
+
+describe('BulkDeleteButton', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useTranslate as any).mockReturnValue((key: string, options: any) => options?._ || key);
+    (useBulkDeleteController as any).mockReturnValue({
+      handleDelete: vi.fn(),
+      isPending: false,
+      isLoading: false,
+    });
+    (useResourceDefinition as any).mockReturnValue({ options: {} });
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should be disabled when no ids are selected', () => {
+    (useListContext as any).mockReturnValue({ selectedIds: [] });
+    render(<BulkDeleteButton />);
+    expect(screen.getByRole('button')).toHaveProperty('disabled', true);
+  });
+
+  it('should render when ids are selected', () => {
+    (useListContext as any).mockReturnValue({ selectedIds: [1, 2] });
+    render(<BulkDeleteButton />);
+    expect(screen.getByRole('button')).toBeDefined();
+    expect(screen.getByText('Delete')).toBeDefined();
+  });
+
+  it('should return null when canDelete is false', () => {
+    (useResourceDefinition as any).mockReturnValue({ options: { canDelete: false } });
+    (useListContext as any).mockReturnValue({ selectedIds: [1, 2] });
+    const { container } = render(<BulkDeleteButton />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should call handleDelete on click', () => {
+    const handleDelete = vi.fn();
+    (useBulkDeleteController as any).mockReturnValue({
+      handleDelete,
+      isPending: false,
+      isLoading: false,
+    });
+    (useListContext as any).mockReturnValue({ selectedIds: [1, 2] });
+
+    render(<BulkDeleteButton />);
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(handleDelete).toHaveBeenCalled();
+  });
+});

package/src/button/BulkDeleteButton.tsx

@@ -0,0 +1,41 @@
+
+import { useBulkDeleteController, useTranslate, useListContext, useResourceDefinition } from '@strato-admin/core';
+import { Button } from './Button';
+
+export interface BulkDeleteButtonProps {
+  label?: string;
+  variant?: 'primary' | 'normal' | 'link';
+  mutationMode?: 'undoable' | 'optimistic' | 'pessimistic';
+}
+
+export const BulkDeleteButton = ({
+  label,
+  variant = 'normal',
+  mutationMode = 'pessimistic',
+}: BulkDeleteButtonProps) => {
+  const translate = useTranslate();
+  const { selectedIds } = useListContext();
+  const { options } = useResourceDefinition();
+  const { handleDelete, isPending, isLoading } = useBulkDeleteController({
+    mutationMode,
+  });
+
+  if (options?.canDelete === false) {
+    return null;
+  }
+
+  const isBusy = isPending || isLoading;
+
+  return (
+    <Button
+      variant={variant}
+      onClick={handleDelete}
+      loading={isBusy}
+      disabled={isBusy || !selectedIds || selectedIds.length === 0}
+    >
+      {label || translate('ra.action.delete', { _: 'Delete' })}
+    </Button>
+  );
+};
+
+export default BulkDeleteButton;

package/src/button/Button.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      options: ['primary', 'normal', 'link', 'icon', 'inline-icon'],
+      control: { type: 'select' },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Save Changes',
+  },
+};
+
+export const Normal: Story = {
+  args: {
+    variant: 'normal',
+    children: 'Cancel',
+  },
+};

package/src/button/Button.tsx

@@ -0,0 +1,12 @@
+
+import CloudscapeButton, { ButtonProps as CloudscapeButtonProps } from '@cloudscape-design/components/button';
+
+export interface ButtonProps extends CloudscapeButtonProps {
+  children: React.ReactNode;
+}
+
+export const Button = ({ children, ...props }: ButtonProps) => {
+  return <CloudscapeButton {...props}>{children}</CloudscapeButton>;
+};
+
+export default Button;

package/src/button/CreateButton.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CreateButton } from './CreateButton';
+import { withRaContext } from '../stories/RaStoryDecorator';
+
+const meta: Meta<typeof CreateButton> = {
+  title: 'Components/CreateButton',
+  component: CreateButton,
+  tags: ['autodocs'],
+  decorators: [
+    withRaContext(undefined, 'posts', {
+      posts: { name: 'posts', hasCreate: true },
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof CreateButton>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const CustomLabel: Story = {
+  args: {
+    label: 'New Post',
+  },
+};
+
+export const Normal: Story = {
+  args: {
+    variant: 'normal',
+  },
+};
+
+export const WithoutPermission: Story = {
+  decorators: [
+    withRaContext(undefined, 'posts', {
+      posts: { name: 'posts', hasCreate: false },
+    }),
+  ],
+  args: {},
+};

package/src/button/CreateButton.tsx

@@ -0,0 +1,38 @@
+
+import { useResourceContext, useTranslate, useCreatePath, useResourceDefinitions } from '@strato-admin/core';
+import { useNavigate } from 'react-router-dom';
+import { Button, ButtonProps } from './Button';
+
+export interface CreateButtonProps extends Omit<ButtonProps, 'children'> {
+  label?: string;
+}
+
+export const CreateButton = ({ label, variant = 'primary', ...props }: CreateButtonProps) => {
+  const resource = useResourceContext();
+  const translate = useTranslate();
+  const createPath = useCreatePath();
+  const navigate = useNavigate();
+  const definitions = useResourceDefinitions();
+
+  const definition = resource ? definitions[resource] : undefined;
+
+  if (!definition || !definition.hasCreate) {
+    return null;
+  }
+
+  const handleClick = () => {
+    const path = createPath({
+      resource,
+      type: 'create',
+    });
+    navigate(path);
+  };
+
+  return (
+    <Button variant={variant} onClick={handleClick} iconName="add-plus" {...props}>
+      {label || translate('ra.action.create', { _: 'Create' })}
+    </Button>
+  );
+};
+
+export default CreateButton;

package/src/button/EditButton.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EditButton } from './EditButton';
+import { withRaContext } from '../stories/RaStoryDecorator';
+
+const meta: Meta<typeof EditButton> = {
+  title: 'Components/EditButton',
+  component: EditButton,
+  tags: ['autodocs'],
+  decorators: [withRaContext({ id: 123, title: 'Sample Record' }, 'posts')],
+};
+
+export default meta;
+type Story = StoryObj<typeof EditButton>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const CustomLabel: Story = {
+  args: {
+    label: 'Modify Post',
+  },
+};
+
+export const Normal: Story = {
+  args: {
+    variant: 'normal',
+  },
+};

package/src/button/EditButton.tsx

@@ -0,0 +1,38 @@
+
+import { useResourceContext, useRecordContext, useTranslate, useCreatePath, RaRecord } from '@strato-admin/core';
+import { useNavigate } from 'react-router-dom';
+import { Button, ButtonProps } from './Button';
+
+export interface EditButtonProps extends Omit<ButtonProps, 'children'> {
+  label?: string;
+  record?: RaRecord;
+}
+
+export const EditButton = ({ label, record: recordProp, variant = 'primary', ...props }: EditButtonProps) => {
+  const resource = useResourceContext();
+  const record = useRecordContext(recordProp);
+  const translate = useTranslate();
+  const createPath = useCreatePath();
+  const navigate = useNavigate();
+
+  if (!record) {
+    return null;
+  }
+
+  const handleClick = () => {
+    const path = createPath({
+      resource,
+      id: record.id,
+      type: 'edit',
+    });
+    navigate(path);
+  };
+
+  return (
+    <Button variant={variant} onClick={handleClick} {...props}>
+      {label || translate('ra.action.edit', { _: 'Edit' })}
+    </Button>
+  );
+};
+
+export default EditButton;

package/src/button/SaveButton.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SaveButton } from './SaveButton';
+import { withRaContext } from '../stories/RaStoryDecorator';
+
+const meta: Meta<typeof SaveButton> = {
+  title: 'Components/SaveButton',
+  component: SaveButton,
+  tags: ['autodocs'],
+  decorators: [withRaContext()],
+};
+
+export default meta;
+type Story = StoryObj<typeof SaveButton>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const CustomLabel: Story = {
+  args: {
+    label: 'Commit Changes',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+};