@strato-admin/cloudscape 0.1.1 → 0.3.0

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@strato-admin/cloudscape",
-  "version": "0.1.1",
+  "version": "0.3.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"
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
     }
   },
   "files": [
@@ -35,15 +36,17 @@
     "directory": "packages/strato-cloudscape"
   },
   "dependencies": {
+    "@cloudscape-design/code-view": "^3.0.108",
     "@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/language-en": "0.1.1",
-    "@strato-admin/core": "0.1.1",
-    "@strato-admin/i18n": "0.1.1"
+    "@strato-admin/core": "0.3.0",
+    "@strato-admin/i18n": "0.3.0",
+    "@strato-admin/ra-core": "0.3.0",
+    "@strato-admin/language-en": "0.3.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.1",

package/src/Admin.tsx

@@ -3,32 +3,38 @@ import {
   CoreAdmin,
   type CoreAdminProps,
   type AdminChildren,
-  SchemaRegistryProvider,
   localStorageStore,
   useLocaleState,
+} from '@strato-admin/ra-core';
+import {
+  SchemaRegistryProvider,
   registerDefaultResourceComponents,
   registerFieldInputMapping,
+  SettingsContext,
+  type AdminSettings,
 } from '@strato-admin/core';
 import { icuI18nProvider } from '@strato-admin/i18n';
 import englishMessages from '@strato-admin/language-en';
 import AppLayout from './layout/AppLayout';
+import Ready from './layout/Ready';
 import { List } from './list';
 import { Create } from './create';
 import { Edit } from './edit';
-import { Show } from './detail';
+import { Detail } from './detail';
+import { FRAMEWORK_DEFAULTS } from './defaults';
 
-import { TextField, NumberField, CurrencyField, ReferenceField } from './field';
-import { TextInput, NumberInput, ReferenceInput } from './input';
+import { TextField, NumberField, CurrencyField, ReferenceField, ArrayField, BooleanField } from './field';
+import { TextInput, NumberInput, ReferenceInput, ArrayInput, BooleanInput } from './input';
 
 import { I18nProvider, importMessages, I18nProviderProps } from '@cloudscape-design/components/i18n';
 
-// Register Cloudscape themed components as defaults for ResourceSchema.
+// Register Cloudscape themed routing 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,
+  show: Detail,
 });
 
 registerFieldInputMapping(
@@ -36,13 +42,17 @@ registerFieldInputMapping(
     [TextField, TextInput],
     [NumberField, NumberInput],
     [CurrencyField, NumberInput],
+    [BooleanField, BooleanInput],
     [ReferenceField, ReferenceInput],
-  ])
+    [ArrayField, ArrayInput],
+  ]),
 );
 
 export interface AdminProps extends CoreAdminProps {
   children?: AdminChildren;
   title?: string;
+  /** Declarative Admin-level defaults. Pass a <Settings> element. */
+  settings?: React.ReactElement<AdminSettings>;
 }
 
 const defaultI18nProvider = icuI18nProvider(() => englishMessages as any);
@@ -101,22 +111,29 @@ export const Admin = ({
   children,
   title,
   layout: Layout = AppLayout,
+  ready = Ready,
   i18nProvider = defaultI18nProvider,
   store = defaultStore,
+  settings,
   ...props
 }: AdminProps) => {
+  const mergedSettings: AdminSettings = { ...FRAMEWORK_DEFAULTS, ...settings?.props };
+
   return (
-    <SchemaRegistryProvider>
-      <CoreAdmin
-        {...props}
-        layout={(layoutProps: any) => <CloudscapeLayout {...layoutProps} layout={Layout} />}
-        title={title}
-        i18nProvider={i18nProvider}
-        store={store}
-      >
-        {children}
-      </CoreAdmin>
-    </SchemaRegistryProvider>
+    <SettingsContext.Provider value={mergedSettings}>
+      <SchemaRegistryProvider>
+        <CoreAdmin
+          {...props}
+          layout={(layoutProps: any) => <CloudscapeLayout {...layoutProps} layout={Layout} />}
+          title={title}
+          ready={ready}
+          i18nProvider={i18nProvider}
+          store={store}
+        >
+          {children}
+        </CoreAdmin>
+      </SchemaRegistryProvider>
+    </SettingsContext.Provider>
   );
 };
 

package/src/RecordLink.stories.tsx

@@ -19,7 +19,7 @@ export const Default: Story = {
   },
 };
 
-export const Show: Story = {
+export const Detail: Story = {
   args: {
     link: 'show',
     children: 'Show details',

package/src/RecordLink.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Link from '@cloudscape-design/components/link';
-import { useCreatePath, useResourceContext, useRecordContext } from '@strato-admin/core';
+import { useResourceContext, useRecordContext } from '@strato-admin/ra-core';
+import { useCreatePath } from '@strato-admin/core';
 import { useNavigate } from 'react-router-dom';
 
 export type RecordLinkType = string | boolean | ((record: any, reference?: string) => string);
@@ -27,9 +28,9 @@ const RecordLinkImpl = ({ link, resource, children }: RecordLinkProps) => {
   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 });
+    href = createPath({ resource: finalResource, id: record.id, type: 'detail' });
+  } else if (link === 'edit' || link === 'detail' || link === 'show') {
+    href = createPath({ resource: finalResource, id: record.id, type: link === 'show' ? 'detail' : link });
   } else if (typeof link === 'string') {
     href = link;
   }

package/src/Settings.tsx

@@ -0,0 +1,16 @@
+import type { AdminSettings } from '@strato-admin/core';
+
+/**
+ * Declarative configuration for Admin-level defaults.
+ * Pass as the `settings` prop on <Admin>.
+ *
+ * @example
+ * <Admin
+ *   settings={<Settings listComponent={MyTable} deleteSuccessMessage="Deleted!" />}
+ *   dataProvider={myDataProvider}
+ * >
+ *   <Resource name="products" />
+ * </Admin>
+ */
+export const Settings = (_: AdminSettings): null => null;
+Settings.displayName = 'Settings';

package/src/__mocks__/ra-core.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { vi } from 'vitest';
+
+export const useTranslate = vi.fn(() => (key: string, options: any) => {
+  return 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 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 useNotificationContext = vi.fn(() => ({
+  notifications: [],
+  setNotifications: 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 useLocale = vi.fn(() => 'en');
+export const useLocales = vi.fn(() => [{ locale: 'en', name: 'English' }]);
+export const useSetLocale = vi.fn(() => vi.fn());
+export const useAuthProvider = vi.fn(() => null);
+export const useBulkDeleteController = vi.fn(() => ({
+  handleDelete: vi.fn(),
+  isPending: false,
+  isLoading: false,
+}));
+export const useDeleteController = 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 useShowController = vi.fn(() => ({ isLoading: false, record: {}, resource: 'products' }));
+export const useEditController = vi.fn(() => ({ isLoading: false, record: {}, resource: 'products' }));
+export const useCreateController = vi.fn(() => ({ isLoading: false, record: {}, resource: 'products' }));
+
+export const ShowContextProvider = vi.fn(({ children }: any) => <>{children}</>);
+export const EditContextProvider = vi.fn(({ children }: any) => <>{children}</>);
+export const CreateContextProvider = vi.fn(({ children }: any) => <>{children}</>);
+export const ListContextProvider = vi.fn(({ children }: any) => <>{children}</>);
+export const RecordContextProvider = vi.fn(({ children }: any) => <>{children}</>);
+export const ResourceContextProvider = vi.fn(({ children }: any) => <>{children}</>);
+
+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 ReferenceFieldBase = vi.fn(({ children }: any) => <>{children}</>);
+export const ReferenceInputBase = vi.fn(({ children }: any) => <>{children}</>);
+export const ReferenceManyFieldBase = vi.fn(({ children }: any) => <>{children}</>);
+
+export const useList = vi.fn(() => ({ data: [], total: 0, isPending: false }));
+export const TestContext = vi.fn(({ children }: any) => <>{children}</>);
+export const CoreAdmin = vi.fn(({ children }: any) => <>{children}</>);
+export const localStorageStore = vi.fn(() => ({}));
+export const useLocaleState = vi.fn(() => ['en', vi.fn()]);

package/src/__mocks__/strato-core.tsx

@@ -1,52 +1,46 @@
 import React from 'react';
 import { vi } from 'vitest';
+import { useResourceContext } from './ra-core';
 
-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 useResourceSchema = vi.fn((resourceProp?: string) => {
+  const resource = resourceProp || useResourceContext();
+  const label = resource ? resource.charAt(0).toUpperCase() + resource.slice(1) : '';
+  return {
+    resource,
+    fieldSchema: [],
+    inputSchema: [],
+    definition: {
+      name: resource,
+      options: { label },
+    },
+    label,
+    getField: vi.fn(),
+    getInput: vi.fn(),
+  };
+});
+
+export const useSchemaRegistry = vi.fn(() => ({
+  defaultComponents: {},
+  registerSchemas: vi.fn(),
+  getSchemas: vi.fn(),
 }));
 
-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 useSettings = vi.fn(() => ({}));
+
+export const useSettingValue = vi.fn(() => (propValue: any, _settingKey: any, schemaValue?: any) => {
+  if (propValue !== undefined) return propValue;
+  if (schemaValue !== undefined) return schemaValue;
+  return undefined;
+});
+
+export const useConstructedPageTitle = vi.fn((type, label) => `${type} ${label}`);
+
+export const useCreatePath = vi.fn(() => (params: any) => `/${params.resource}/${params.id}/${params.type}`);
 
-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 SchemaRegistryProvider = vi.fn(({ children }: any) => <>{children}</>);
 
-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}</>);
+export const Resource = vi.fn(({ children }: any) => <>{children}</>);

package/src/button/BulkDeleteButton.test.tsx

@@ -1,4 +1,3 @@
-
 import { render, screen, fireEvent, cleanup } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { BulkDeleteButton } from './BulkDeleteButton';
@@ -9,9 +8,9 @@ import {
   useResourceDefinition,
   useResourceContext,
   useGetResourceLabel,
-} from '@strato-admin/core';
+} from '@strato-admin/ra-core';
 
-vi.mock('@strato-admin/core', () => ({
+vi.mock('@strato-admin/ra-core', () => ({
   useListContext: vi.fn(),
   useBulkDeleteController: vi.fn(),
   useTranslate: vi.fn(),
@@ -20,10 +19,24 @@ vi.mock('@strato-admin/core', () => ({
   useGetResourceLabel: vi.fn(),
 }));
 
+vi.mock('@strato-admin/core', () => ({
+  useSchemaRegistry: vi.fn(() => ({ defaultComponents: {} })),
+  useSettings: vi.fn(() => ({})),
+  useSettingValue: vi.fn(() => (propValue: any, _settingKey: any, schemaValue?: any) => {
+    if (propValue !== undefined) return propValue;
+    if (schemaValue !== undefined) return schemaValue;
+    return undefined;
+  }),
+}));
+
 describe('BulkDeleteButton', () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    (useTranslate as any).mockReturnValue((key: string, options: any) => options?._ || key);
+    (useTranslate as any).mockReturnValue((key: string, options: any) => {
+      if (key === 'strato.message.bulk_delete_title') return 'Delete 2 items';
+      if (key === 'strato.message.bulk_delete_content') return 'Are you sure you want to delete these 2 items?';
+      return options?._ || key;
+    });
     (useBulkDeleteController as any).mockReturnValue({
       handleDelete: vi.fn(),
       isPending: false,

package/src/button/BulkDeleteButton.tsx

@@ -1,13 +1,6 @@
-
-import React, { useState } from 'react';
-import {
-  useBulkDeleteController,
-  useTranslate,
-  useListContext,
-  useResourceDefinition,
-  useResourceContext,
-  useGetResourceLabel,
-} from '@strato-admin/core';
+import { useState } from 'react';
+import { useBulkDeleteController, useTranslate, useListContext, useResourceDefinition } from '@strato-admin/ra-core';
+import { useSettingValue } from '@strato-admin/core';
 import Modal from '@cloudscape-design/components/modal';
 import Box from '@cloudscape-design/components/box';
 import SpaceBetween from '@cloudscape-design/components/space-between';
@@ -17,6 +10,7 @@ export interface BulkDeleteButtonProps {
   label?: string;
   variant?: 'primary' | 'normal' | 'link';
   mutationMode?: 'undoable' | 'optimistic' | 'pessimistic';
+  successMessage?: string;
   dialogTitle?: string;
   dialogDescription?: string;
 }
@@ -24,17 +18,20 @@ export interface BulkDeleteButtonProps {
 export const BulkDeleteButton = ({
   label,
   variant = 'normal',
-  mutationMode = 'pessimistic',
+  mutationMode,
+  successMessage,
   dialogTitle,
   dialogDescription,
 }: BulkDeleteButtonProps) => {
   const translate = useTranslate();
   const { selectedIds } = useListContext();
-  const resource = useResourceContext();
-  const getResourceLabel = useGetResourceLabel();
   const { options } = useResourceDefinition();
+  const resolve = useSettingValue();
+  const rawDefault = resolve(undefined, 'bulkDeleteSuccessMessage');
+  const resolvedDefault = typeof rawDefault === 'function' ? rawDefault(selectedIds?.length ?? 0) : rawDefault;
   const { handleDelete, isPending, isLoading } = useBulkDeleteController({
-    mutationMode,
+    mutationMode: resolve(mutationMode, 'mutationMode'),
+    successMessage: successMessage ?? options?.bulkDeleteSuccessMessage ?? resolvedDefault,
   });
 
   const [isOpen, setIsOpen] = useState(false);
@@ -57,15 +54,18 @@ export const BulkDeleteButton = ({
   const handleClose = () => {
     setIsOpen(false);
   };
-  console.log('selectedIds', selectedIds);
-  const defaultTitle = translate('ra.message.bulk_delete_title', {
+  const defaultTitle = translate('strato.message.bulk_delete_title', {
     smart_count: selectedIds?.length || 0,
-    _: `Delete ${selectedIds?.length || 0} items`,
+    _: `{smart_count, plural, one {Delete this item} other {Delete these # items}}`,
   });
 
-  const defaultDescription = translate('ra.message.bulk_delete_content', {
+  const defaultDescription = translate('strato.message.bulk_delete_content', {
     smart_count: selectedIds?.length || 0,
-    _: `Are you sure you want to delete these ${selectedIds?.length || 0} items?`,
+    _: `{
+      smart_count, plural,
+        one {Are you sure you want to delete this item?}
+        other {Are you sure you want to delete these # items?}
+      }`,
   });
   return (
     <>
@@ -75,25 +75,20 @@ export const BulkDeleteButton = ({
         loading={isBusy}
         disabled={isBusy || !selectedIds || selectedIds.length === 0}
       >
-        {label || translate('ra.action.delete', { _: 'Delete' })}
+        {label || translate('strato.action.delete', { _: 'Delete' })}
       </Button>
       <Modal
         onDismiss={handleClose}
         visible={isOpen}
-        closeAriaLabel={translate('ra.action.close', { _: 'Close' })}
+        closeAriaLabel={translate('strato.action.close', { _: 'Close' })}
         footer={
           <Box float="right">
             <SpaceBetween direction="horizontal" size="xs">
               <Button variant="link" onClick={handleClose}>
-                {translate('ra.action.cancel', { _: 'Cancel' })}
+                {translate('strato.action.cancel', { _: 'Cancel' })}
               </Button>
-              <Button
-                variant="primary"
-                onClick={handleConfirm}
-                loading={isBusy}
-                data-testid="confirm-bulk-delete"
-              >
-                {translate('ra.action.confirm', { _: 'Confirm' })}
+              <Button variant="primary" onClick={handleConfirm} loading={isBusy} data-testid="confirm-bulk-delete">
+                {translate('strato.action.confirm', { _: 'Confirm' })}
               </Button>
             </SpaceBetween>
           </Box>

package/src/button/Button.tsx

@@ -1,7 +1,36 @@
-
+import React from 'react';
 import CloudscapeButton, { ButtonProps as CloudscapeButtonProps } from '@cloudscape-design/components/button';
 
-export interface ButtonProps extends CloudscapeButtonProps {
+export interface ButtonProps
+  extends Pick<
+    CloudscapeButtonProps,
+    | 'variant'
+    | 'iconName'
+    | 'iconSvg'
+    | 'iconAlign'
+    | 'iconAlt'
+    | 'href'
+    | 'target'
+    | 'rel'
+    | 'download'
+    | 'onClick'
+    | 'onFollow'
+    | 'loading'
+    | 'loadingText'
+    | 'disabled'
+    | 'disabledReason'
+    | 'ariaLabel'
+    | 'ariaDescribedby'
+    | 'ariaExpanded'
+    | 'ariaControls'
+    | 'formAction'
+    | 'form'
+    | 'nativeButtonAttributes'
+    | 'nativeAnchorAttributes'
+    | 'wrapText'
+    | 'fullWidth'
+    | 'external'
+  > {
   children: React.ReactNode;
 }
 

package/src/button/CancelButton.tsx

@@ -0,0 +1,20 @@
+import { useTranslate } from '@strato-admin/ra-core';
+import { useNavigate } from 'react-router-dom';
+import { Button, ButtonProps } from './Button';
+
+export interface CancelButtonProps extends Omit<ButtonProps, 'children'> {
+  label?: string;
+}
+
+export const CancelButton = ({ label, variant = 'link', ...props }: CancelButtonProps) => {
+  const translate = useTranslate();
+  const navigate = useNavigate();
+
+  return (
+    <Button variant={variant} formAction="none" onClick={() => navigate(-1)} {...props}>
+      {label || translate('strato.action.cancel', { _: 'Cancel' })}
+    </Button>
+  );
+};
+
+export default CancelButton;

package/src/button/CreateButton.tsx

@@ -1,7 +1,8 @@
-
-import { useResourceContext, useTranslate, useCreatePath, useResourceDefinitions } from '@strato-admin/core';
+import { useResourceContext, useTranslate, useResourceDefinitions } from '@strato-admin/ra-core';
+import { useCreatePath } from '@strato-admin/core';
 import { useNavigate } from 'react-router-dom';
 import { Button, ButtonProps } from './Button';
+import type { ButtonProps as CloudscapeButtonProps } from '@cloudscape-design/components/button';
 
 export interface CreateButtonProps extends Omit<ButtonProps, 'children'> {
   label?: string;
@@ -20,17 +21,18 @@ export const CreateButton = ({ label, variant = 'primary', ...props }: CreateBut
     return null;
   }
 
-  const handleClick = () => {
-    const path = createPath({
-      resource,
-      type: 'create',
-    });
-    navigate(path);
+  const path = createPath({ resource, type: 'create' });
+
+  const handleClick: NonNullable<CloudscapeButtonProps['onClick']> = (e) => {
+    if (!e.detail.metaKey && !e.detail.ctrlKey && !e.detail.shiftKey && e.detail.button === 0) {
+      e.preventDefault();
+      navigate(path);
+    }
   };
 
   return (
-    <Button variant={variant} onClick={handleClick} iconName="add-plus" {...props}>
-      {label || translate('ra.action.create', { _: 'Create' })}
+    <Button variant={variant} href={path} onClick={handleClick} iconName="add-plus" {...props}>
+      {label || translate('strato.action.create', { _: 'Create' })}
     </Button>
   );
 };