@strato-admin/core 0.1.1 → 0.3.0

package/dist/ra-core/src/routing/index.js

@@ -0,0 +1,28 @@
+export * from './AdminRouter';
+export * from './BasenameContextProvider';
+export * from './RestoreScrollPosition';
+export * from './useBasename';
+export * from './useCreatePath';
+export * from './useGetPathForRecord';
+export * from './useGetPathForRecordCallback';
+export * from './useRedirect';
+export * from './useResetErrorBoundaryOnLocationChange';
+export * from './useScrollToTop';
+export * from './useRestoreScrollPosition';
+export * from './types';
+export * from './TestMemoryRouter';
+export * from './useSplatPathBase';
+export * from './RouterProvider';
+export * from './RouterProviderContext';
+export * from './adapters/reactRouterProvider';
+export * from './useLocation';
+export * from './useNavigate';
+export * from './useParams';
+export * from './useBlocker';
+export * from './useMatch';
+export * from './useInRouterContext';
+export * from './useCanBlock';
+export * from './useMatchPath';
+export * from './LinkBase';
+export * from './Navigate';
+export * from './Outlet';

package/dist/ra-core/src/routing/types.d.ts

@@ -0,0 +1,3 @@
+import { RaRecord } from '../types';
+export type LinkToFunctionType<RecordType extends RaRecord = RaRecord> = (record: RecordType, reference: string) => string | false | Promise<string | false>;
+export type LinkToType<RecordType extends RaRecord = RaRecord> = string | false | LinkToFunctionType<RecordType>;

package/dist/ra-core/src/routing/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ra-core/src/routing/useBasename.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Get the string to append to all links to the admin app.
+ *
+ * Useful when the app is mounted on a sub path, e.g. '/admin'.
+ *
+ * This hook is used internally by all react-admin components that
+ * contain a link, and requires that the basename is set via the
+ * `<BasenameContextProvider>` component (or via the `<Admin>` component,
+ * which calls BasenameContextProvider internally).
+ *
+ * @see BasenameContextProvider
+ *
+ * @example
+ * import { useBasename } from 'react-admin';
+ *
+ * const ArticleLink = ({ title, id }) => {
+ *    const basename = useBasename();
+ *    return <a href={`${basename}/articles/${id}`}>{title}</a>;
+ * };
+ */
+export declare const useBasename: () => string;

package/dist/ra-core/src/routing/useBasename.js

@@ -0,0 +1,23 @@
+import { useContext } from 'react';
+import { BasenameContext } from './BasenameContext';
+/**
+ * Get the string to append to all links to the admin app.
+ *
+ * Useful when the app is mounted on a sub path, e.g. '/admin'.
+ *
+ * This hook is used internally by all react-admin components that
+ * contain a link, and requires that the basename is set via the
+ * `<BasenameContextProvider>` component (or via the `<Admin>` component,
+ * which calls BasenameContextProvider internally).
+ *
+ * @see BasenameContextProvider
+ *
+ * @example
+ * import { useBasename } from 'react-admin';
+ *
+ * const ArticleLink = ({ title, id }) => {
+ *    const basename = useBasename();
+ *    return <a href={`${basename}/articles/${id}`}>{title}</a>;
+ * };
+ */
+export const useBasename = () => useContext(BasenameContext);

package/dist/ra-core/src/routing/useBlocker.d.ts

@@ -0,0 +1,14 @@
+import type { RouterBlocker, RouterBlockerFunction } from './RouterProvider';
+/**
+ * Hook to block navigation based on a condition.
+ * This is a router-agnostic wrapper that uses the configured router provider.
+ * Used by useWarnWhenUnsavedChanges to prevent losing form data.
+ *
+ * @example
+ * const blocker = useBlocker(shouldBlock);
+ * if (blocker.state === 'blocked') {
+ *   // Show confirmation dialog
+ *   blocker.proceed(); // or blocker.reset();
+ * }
+ */
+export declare const useBlocker: (shouldBlock: RouterBlockerFunction | boolean) => RouterBlocker;

package/dist/ra-core/src/routing/useBlocker.js

@@ -0,0 +1,17 @@
+import { useRouterProvider } from './RouterProviderContext';
+/**
+ * Hook to block navigation based on a condition.
+ * This is a router-agnostic wrapper that uses the configured router provider.
+ * Used by useWarnWhenUnsavedChanges to prevent losing form data.
+ *
+ * @example
+ * const blocker = useBlocker(shouldBlock);
+ * if (blocker.state === 'blocked') {
+ *   // Show confirmation dialog
+ *   blocker.proceed(); // or blocker.reset();
+ * }
+ */
+export const useBlocker = (shouldBlock) => {
+    const provider = useRouterProvider();
+    return provider.useBlocker(shouldBlock);
+};

package/dist/ra-core/src/routing/useCanBlock.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns whether navigation blocking (useBlocker) is supported in the current context.
+ * For react-router, this requires a data router. For other routers, it may always be true.
+ *
+ * @returns {boolean} Whether blocking is supported
+ */
+export declare const useCanBlock: () => boolean;

package/dist/ra-core/src/routing/useCanBlock.js

@@ -0,0 +1,11 @@
+import { useRouterProvider } from './RouterProviderContext';
+/**
+ * Returns whether navigation blocking (useBlocker) is supported in the current context.
+ * For react-router, this requires a data router. For other routers, it may always be true.
+ *
+ * @returns {boolean} Whether blocking is supported
+ */
+export const useCanBlock = () => {
+    const provider = useRouterProvider();
+    return provider.useCanBlock();
+};

package/dist/ra-core/src/routing/useCreatePath.d.ts

@@ -0,0 +1,42 @@
+import { HintedString, Identifier } from '../types';
+/**
+ * Get a callback to create a link to a given page in the admin app.
+ *
+ * The callback expects an object as parameter, containing the following properties:
+ *   - type: 'list', 'edit', 'show' or 'create'
+ *   - resource
+ *   - id (optional), for 'edit' or 'show' pages
+ *
+ * This is used internally by react-admin to allow default components to work
+ * in applications that are mounted on a sub path, e.g. '/admin'. If your app
+ * is mounted in the root path, you don't need it, and you can create links by
+ * hand, e.g. '/articles/1/show'.
+ *
+ * @example
+ * import { useCreatePath, useRecordContext, useNavigate } from 'react-admin';
+ *
+ * const PostEditButton = () => {
+ *     const createPath = useCreatePath();
+ *     const record = useRecordContext();
+ *     const navigate = useNavigate();
+ *
+ *     const handleClick = () => {
+ *         const link = createPath({
+ *            type: 'edit',
+ *            resource: 'posts',
+ *            id: record.id
+ *         });
+ *         navigate(link);
+ *     };
+ *
+ *    return <button onClick={handleClick}>Edit Post</button>;
+ * };
+ */
+export declare const useCreatePath: () => ({ resource, id, type }: CreatePathParams) => string;
+export type CreatePathType = HintedString<'list' | 'edit' | 'show' | 'create'>;
+export interface CreatePathParams {
+    type: CreatePathType;
+    resource?: string;
+    id?: Identifier;
+}
+export declare const removeDoubleSlashes: (path: string) => string;

package/dist/ra-core/src/routing/useCreatePath.js

@@ -0,0 +1,69 @@
+import { useCallback } from 'react';
+import { useBasename } from './useBasename';
+/**
+ * Get a callback to create a link to a given page in the admin app.
+ *
+ * The callback expects an object as parameter, containing the following properties:
+ *   - type: 'list', 'edit', 'show' or 'create'
+ *   - resource
+ *   - id (optional), for 'edit' or 'show' pages
+ *
+ * This is used internally by react-admin to allow default components to work
+ * in applications that are mounted on a sub path, e.g. '/admin'. If your app
+ * is mounted in the root path, you don't need it, and you can create links by
+ * hand, e.g. '/articles/1/show'.
+ *
+ * @example
+ * import { useCreatePath, useRecordContext, useNavigate } from 'react-admin';
+ *
+ * const PostEditButton = () => {
+ *     const createPath = useCreatePath();
+ *     const record = useRecordContext();
+ *     const navigate = useNavigate();
+ *
+ *     const handleClick = () => {
+ *         const link = createPath({
+ *            type: 'edit',
+ *            resource: 'posts',
+ *            id: record.id
+ *         });
+ *         navigate(link);
+ *     };
+ *
+ *    return <button onClick={handleClick}>Edit Post</button>;
+ * };
+ */
+export const useCreatePath = () => {
+    const basename = useBasename();
+    return useCallback(({ resource, id, type }) => {
+        if (['list', 'create', 'edit', 'show'].includes(type) &&
+            !resource) {
+            throw new Error('Cannot create a link without a resource. You must provide the resource name.');
+        }
+        switch (type) {
+            case 'list':
+                return removeDoubleSlashes(`${basename}/${resource}`);
+            case 'create':
+                return removeDoubleSlashes(`${basename}/${resource}/create`);
+            case 'edit': {
+                if (id == null) {
+                    // maybe the id isn't defined yet
+                    // instead of throwing an error, fallback to list link
+                    return removeDoubleSlashes(`${basename}/${resource}`);
+                }
+                return removeDoubleSlashes(`${basename}/${resource}/${encodeURIComponent(id)}`);
+            }
+            case 'show': {
+                if (id == null) {
+                    // maybe the id isn't defined yet
+                    // instead of throwing an error, fallback to list link
+                    return removeDoubleSlashes(`${basename}/${resource}`);
+                }
+                return removeDoubleSlashes(`${basename}/${resource}/${encodeURIComponent(id)}/show`);
+            }
+            default:
+                return type;
+        }
+    }, [basename]);
+};
+export const removeDoubleSlashes = (path) => path.replace('//', '/');

package/dist/ra-core/src/routing/useGetPathForRecord.d.ts

@@ -0,0 +1,42 @@
+import type { RaRecord } from '../types';
+import type { LinkToType } from './types';
+/**
+ * Get a path for a record, based on the current resource and the link type.
+ *
+ * Accepted link types are 'edit', 'show', a route string, false, or a function returning one of these types.
+ *
+ * @example
+ * // basic usage (leverages RecordContext, ResourceContext and ResourceDefinitionContext)
+ * const EditLink = () => {
+ *   const path = useGetPathForRecord();
+ *   return path ? <Link to={path}>Edit</Link> : null;
+ * };
+ *
+ * // controlled mode
+ * const EditLink = ({ record, resource }) => {
+ *    const path = useGetPathForRecord({ record, resource, link: 'edit' });
+ *    return path ? <Link to={path}>Edit</Link> : null;
+ * };
+ *
+ * // the link option can be a function
+ * const EditLink = ({ record, resource }) => {
+ *   const path = useGetPathForRecord({ record, resource, link: (record, resource) => record.canEdit ? 'edit' : false });
+ *   return path ? <Link to={path}>Edit</Link> : null;
+ * };
+ *
+ * // the link option can be a function returning a promise
+ * const EditLink = ({ record, resource }) => {
+ *   const path = useGetPathForRecord({ record, resource, link: async (record, resource) => {
+ *     const canEdit = await canEditRecord(record, resource);
+ *     return canEdit ? 'edit' : false;
+ *   }});
+ *   return path ? <Link to={path}>Edit</Link> : null;
+ * };
+ */
+export declare const useGetPathForRecord: <RecordType extends RaRecord = RaRecord>(options?: UseGetPathForRecordOptions<RecordType>) => string | false | undefined;
+export interface UseGetPathForRecordOptions<RecordType extends RaRecord = RaRecord> {
+    resource?: string;
+    record?: RecordType;
+    link?: LinkToType<RecordType>;
+}
+export type UseGetRouteForRecordOptions<RecordType extends RaRecord = RaRecord> = UseGetPathForRecordOptions<RecordType>;

package/dist/ra-core/src/routing/useGetPathForRecord.js

@@ -0,0 +1,135 @@
+import { useState, useEffect } from 'react';
+import { useResourceContext } from '../core/useResourceContext';
+import { useRecordContext } from '../controller/record/useRecordContext';
+import { useCanAccess } from '../auth';
+import { useResourceDefinition } from '../core';
+import { useCreatePath } from './useCreatePath';
+/**
+ * Get a path for a record, based on the current resource and the link type.
+ *
+ * Accepted link types are 'edit', 'show', a route string, false, or a function returning one of these types.
+ *
+ * @example
+ * // basic usage (leverages RecordContext, ResourceContext and ResourceDefinitionContext)
+ * const EditLink = () => {
+ *   const path = useGetPathForRecord();
+ *   return path ? <Link to={path}>Edit</Link> : null;
+ * };
+ *
+ * // controlled mode
+ * const EditLink = ({ record, resource }) => {
+ *    const path = useGetPathForRecord({ record, resource, link: 'edit' });
+ *    return path ? <Link to={path}>Edit</Link> : null;
+ * };
+ *
+ * // the link option can be a function
+ * const EditLink = ({ record, resource }) => {
+ *   const path = useGetPathForRecord({ record, resource, link: (record, resource) => record.canEdit ? 'edit' : false });
+ *   return path ? <Link to={path}>Edit</Link> : null;
+ * };
+ *
+ * // the link option can be a function returning a promise
+ * const EditLink = ({ record, resource }) => {
+ *   const path = useGetPathForRecord({ record, resource, link: async (record, resource) => {
+ *     const canEdit = await canEditRecord(record, resource);
+ *     return canEdit ? 'edit' : false;
+ *   }});
+ *   return path ? <Link to={path}>Edit</Link> : null;
+ * };
+ */
+export const useGetPathForRecord = (options = {}) => {
+    const { link } = options || {};
+    const record = useRecordContext(options);
+    const resource = useResourceContext(options);
+    if (!resource) {
+        throw new Error('Cannot generate a link for a record without a resource. You must use useGetPathForRecord within a ResourceContextProvider, or pass a resource prop.');
+    }
+    const resourceDefinition = useResourceDefinition(options);
+    const createPath = useCreatePath();
+    const [path, setPath] = useState(link && typeof link !== 'function' && record != null
+        ? createPath({
+            resource,
+            id: record.id,
+            type: link,
+        })
+        : false);
+    // in preparation for the default value, does the user have access to the show and edit pages?
+    // (we can't run hooks conditionally, so we need to run them even though the link is specified)
+    const { canAccess: canAccessShow } = useCanAccess({
+        action: 'show',
+        resource,
+        record,
+        enabled: link == null && resourceDefinition.hasShow,
+    });
+    const { canAccess: canAccessEdit } = useCanAccess({
+        action: 'edit',
+        resource,
+        record,
+        enabled: link == null && resourceDefinition.hasEdit,
+    });
+    useEffect(() => {
+        if (!record)
+            return;
+        if (link === false) {
+            setPath(false);
+            return;
+        }
+        // Handle the inferred link type case
+        if (link == null) {
+            // We must check whether the resource has an edit view because if there is no
+            // authProvider, canAccessShow will always be true
+            if (resourceDefinition.hasShow && canAccessShow) {
+                setPath(createPath({
+                    resource,
+                    id: record.id,
+                    type: 'show',
+                }));
+                return;
+            }
+            // We must check whether the resource has an edit view because if there is no
+            // authProvider, canAccessEdit will always be true
+            if (resourceDefinition.hasEdit && canAccessEdit) {
+                setPath(createPath({
+                    resource,
+                    id: record.id,
+                    type: 'edit',
+                }));
+                return;
+            }
+        }
+        // Handle the link function case
+        if (typeof link === 'function') {
+            const linkResult = link(record, resource);
+            if (linkResult instanceof Promise) {
+                linkResult.then(resolvedPath => setPath(resolvedPath));
+                return;
+            }
+            setPath(linkResult
+                ? createPath({
+                    resource,
+                    id: record.id,
+                    type: linkResult,
+                })
+                : false);
+            return;
+        }
+        // handle string case
+        if (link) {
+            setPath(createPath({
+                resource,
+                id: record.id,
+                type: link,
+            }));
+        }
+    }, [
+        createPath,
+        canAccessShow,
+        canAccessEdit,
+        link,
+        record,
+        resource,
+        resourceDefinition.hasEdit,
+        resourceDefinition.hasShow,
+    ]);
+    return path;
+};

package/dist/ra-core/src/routing/useGetPathForRecordCallback.d.ts

@@ -0,0 +1,6 @@
+import type { RaRecord } from '../types';
+import { UseGetRouteForRecordOptions } from './useGetPathForRecord';
+export declare const useGetPathForRecordCallback: <RecordType extends RaRecord = RaRecord>(options?: UseGetPathForRecordCallbackOptions) => (params: UseGetRouteForRecordOptions<RecordType>) => Promise<string | false | undefined>;
+export interface UseGetPathForRecordCallbackOptions {
+    resource?: string;
+}

package/dist/ra-core/src/routing/useGetPathForRecordCallback.js

@@ -0,0 +1,82 @@
+import { useCallback } from 'react';
+import { useResourceContext } from '../core/useResourceContext';
+import { useResourceDefinitions } from '../core/useResourceDefinitions';
+import { useCanAccessCallback } from '../auth/useCanAccessCallback';
+import { useCreatePath } from './useCreatePath';
+export const useGetPathForRecordCallback = (options = {}) => {
+    const resource = useResourceContext(options);
+    const resourceDefinitions = useResourceDefinitions();
+    const createPath = useCreatePath();
+    const canAccess = useCanAccessCallback();
+    return useCallback(async (params) => {
+        const { link, record } = params || {};
+        const finalResource = params.resource ?? resource;
+        if (!finalResource) {
+            throw new Error('Cannot generate a link for a record without a resource. You must use useGetPathForRecordCallback within a ResourceContextProvider, or pass a resource parameter.');
+        }
+        const resourceDefinition = resourceDefinitions[finalResource] ?? {};
+        if (record == null || link === false) {
+            return false;
+        }
+        // When the link prop is not provided, we infer a default value and check whether users
+        // can access it
+        if (link == null) {
+            // check if the user can access the show and edit pages in parallel
+            const [canAccessShow, canAccessEdit] = await Promise.all([
+                resourceDefinition.hasShow
+                    ? canAccess({
+                        action: 'show',
+                        resource: finalResource,
+                        record,
+                    })
+                    : Promise.resolve(false),
+                resourceDefinition.hasEdit
+                    ? canAccess({
+                        action: 'edit',
+                        resource: finalResource,
+                        record,
+                    })
+                    : Promise.resolve(false),
+            ]);
+            if (canAccessShow) {
+                return createPath({
+                    resource: finalResource,
+                    id: record.id,
+                    type: 'show',
+                });
+            }
+            if (canAccessEdit) {
+                return createPath({
+                    resource: finalResource,
+                    id: record.id,
+                    type: 'edit',
+                });
+            }
+            return false;
+        }
+        const linkFunc = typeof link === 'function' ? link : () => link;
+        const linkResult = linkFunc(record, finalResource);
+        if (linkResult === false) {
+            return false;
+        }
+        const linkResultIsPromise = isPromise(linkResult);
+        if (linkResultIsPromise) {
+            const resolvedLink = await linkResult;
+            if (resolvedLink === false) {
+                // already set to false by default
+                return;
+            }
+            return createPath({
+                resource: finalResource,
+                id: record.id,
+                type: resolvedLink,
+            });
+        }
+        return createPath({
+            resource: finalResource,
+            id: record.id,
+            type: linkResult,
+        });
+    }, [canAccess, createPath, resourceDefinitions, resource]);
+};
+const isPromise = (value) => value && typeof value.then === 'function';

package/dist/ra-core/src/routing/useInRouterContext.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook to check if we are inside a router context.
+ * This is a router-agnostic wrapper that uses the configured router provider.
+ *
+ * @example
+ * const isInRouter = useInRouterContext();
+ * if (!isInRouter) {
+ *   // Need to wrap with a router
+ * }
+ */
+export declare const useInRouterContext: () => boolean;

package/dist/ra-core/src/routing/useInRouterContext.js

@@ -0,0 +1,15 @@
+import { useRouterProvider } from './RouterProviderContext';
+/**
+ * Hook to check if we are inside a router context.
+ * This is a router-agnostic wrapper that uses the configured router provider.
+ *
+ * @example
+ * const isInRouter = useInRouterContext();
+ * if (!isInRouter) {
+ *   // Need to wrap with a router
+ * }
+ */
+export const useInRouterContext = () => {
+    const provider = useRouterProvider();
+    return provider.useInRouterContext();
+};

package/dist/ra-core/src/routing/useLocation.d.ts

@@ -0,0 +1,10 @@
+import type { RouterLocation } from './RouterProvider';
+/**
+ * Hook to access the current location.
+ * This is a router-agnostic wrapper that uses the configured router provider.
+ *
+ * @example
+ * const location = useLocation();
+ * console.log(location.pathname);
+ */
+export declare const useLocation: () => RouterLocation;

package/dist/ra-core/src/routing/useLocation.js

@@ -0,0 +1,13 @@
+import { useRouterProvider } from './RouterProviderContext';
+/**
+ * Hook to access the current location.
+ * This is a router-agnostic wrapper that uses the configured router provider.
+ *
+ * @example
+ * const location = useLocation();
+ * console.log(location.pathname);
+ */
+export const useLocation = () => {
+    const provider = useRouterProvider();
+    return provider.useLocation();
+};

package/dist/ra-core/src/routing/useMatch.d.ts

@@ -0,0 +1,15 @@
+import type { RouterMatch } from './RouterProvider';
+/**
+ * Hook to match the current location against a pattern.
+ * This is a router-agnostic wrapper that uses the configured router provider.
+ *
+ * @example
+ * const match = useMatch({ path: '/posts/:id', end: true });
+ * if (match) {
+ *   console.log(match.params.id);
+ * }
+ */
+export declare const useMatch: (pattern: {
+    path: string;
+    end?: boolean;
+}) => RouterMatch | null;

package/dist/ra-core/src/routing/useMatch.js

@@ -0,0 +1,15 @@
+import { useRouterProvider } from './RouterProviderContext';
+/**
+ * Hook to match the current location against a pattern.
+ * This is a router-agnostic wrapper that uses the configured router provider.
+ *
+ * @example
+ * const match = useMatch({ path: '/posts/:id', end: true });
+ * if (match) {
+ *   console.log(match.params.id);
+ * }
+ */
+export const useMatch = (pattern) => {
+    const provider = useRouterProvider();
+    return provider.useMatch(pattern);
+};

package/dist/ra-core/src/routing/useMatchPath.d.ts

@@ -0,0 +1,17 @@
+import type { RouterMatch } from './RouterProvider';
+/**
+ * Returns the matchPath function from the configured router provider.
+ *
+ * @example
+ * import { useMatchPath } from 'react-admin';
+ *
+ * const MyComponent = () => {
+ *     const matchPath = useMatchPath();
+ *     const match = matchPath('/posts/:id', '/posts/123');
+ *     // match.params.id === '123'
+ * };
+ */
+export declare const useMatchPath: () => ((pattern: string | {
+    path: string;
+    end?: boolean;
+}, pathname: string) => RouterMatch | null);

package/dist/ra-core/src/routing/useMatchPath.js

@@ -0,0 +1,17 @@
+import { useRouterProvider } from './RouterProviderContext';
+/**
+ * Returns the matchPath function from the configured router provider.
+ *
+ * @example
+ * import { useMatchPath } from 'react-admin';
+ *
+ * const MyComponent = () => {
+ *     const matchPath = useMatchPath();
+ *     const match = matchPath('/posts/:id', '/posts/123');
+ *     // match.params.id === '123'
+ * };
+ */
+export const useMatchPath = () => {
+    const provider = useRouterProvider();
+    return provider.matchPath;
+};

package/dist/ra-core/src/routing/useNavigate.d.ts

@@ -0,0 +1,12 @@
+import type { RouterNavigateFunction } from './RouterProvider';
+/**
+ * Hook to access the navigate function.
+ * This is a router-agnostic wrapper that uses the configured router provider.
+ *
+ * @example
+ * const navigate = useNavigate();
+ * navigate('/posts');
+ * navigate('/posts', { replace: true });
+ * navigate(-1); // go back
+ */
+export declare const useNavigate: () => RouterNavigateFunction;