@strato-admin/core 0.1.0 → 0.3.0

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

@@ -0,0 +1,15 @@
+import { useRouterProvider } from './RouterProviderContext';
+/**
+ * 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 const useNavigate = () => {
+    const provider = useRouterProvider();
+    return provider.useNavigate();
+};

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

@@ -0,0 +1,9 @@
+/**
+ * Hook to access URL parameters.
+ * This is a router-agnostic wrapper that uses the configured router provider.
+ *
+ * @example
+ * const params = useParams<{ id: string }>();
+ * console.log(params.id);
+ */
+export declare const useParams: <T extends Record<string, string | undefined> = Record<string, string | undefined>>() => T;

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

@@ -0,0 +1,13 @@
+import { useRouterProvider } from './RouterProviderContext';
+/**
+ * Hook to access URL parameters.
+ * This is a router-agnostic wrapper that uses the configured router provider.
+ *
+ * @example
+ * const params = useParams<{ id: string }>();
+ * console.log(params.id);
+ */
+export const useParams = () => {
+    const provider = useRouterProvider();
+    return provider.useParams();
+};

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

@@ -0,0 +1,30 @@
+import { Identifier, RaRecord } from '../types';
+import { CreatePathType } from './useCreatePath';
+import type { RouterTo } from './RouterProvider';
+/**
+ * Target for redirection - can be a path string or a location object
+ */
+type RedirectTarget = RouterTo;
+type RedirectToFunction = (resource?: string, id?: Identifier, data?: Partial<RaRecord>, state?: object) => RedirectTarget;
+export type RedirectionSideEffect = CreatePathType | false | RedirectToFunction;
+/**
+ * Hook for Redirection Side Effect
+ *
+ * @example
+ *
+ * const redirect = useRedirect();
+ * // redirect to list view
+ * redirect('list', 'posts');
+ * // redirect to edit view
+ * redirect('edit', 'posts', 123);
+ * // redirect to edit view with state data
+ * redirect('edit', 'comments', 123, {}, { record: { post_id: record.id } });
+ * // do not redirect
+ * redirect(false);
+ * // redirect to the result of a function
+ * redirect((resource, id, data) => ...)
+ * // redirect to an absolute URL
+ * redirect('https://marmelab.com/react-admin');
+ */
+export declare const useRedirect: () => (redirectTo: RedirectionSideEffect, resource?: string, id?: Identifier, data?: Partial<RaRecord>, state?: object) => void;
+export {};

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

@@ -0,0 +1,66 @@
+import { useCallback } from 'react';
+import { useBasename } from './useBasename';
+import { useCreatePath } from './useCreatePath';
+import { useNavigate } from './useNavigate';
+/**
+ * Hook for Redirection Side Effect
+ *
+ * @example
+ *
+ * const redirect = useRedirect();
+ * // redirect to list view
+ * redirect('list', 'posts');
+ * // redirect to edit view
+ * redirect('edit', 'posts', 123);
+ * // redirect to edit view with state data
+ * redirect('edit', 'comments', 123, {}, { record: { post_id: record.id } });
+ * // do not redirect
+ * redirect(false);
+ * // redirect to the result of a function
+ * redirect((resource, id, data) => ...)
+ * // redirect to an absolute URL
+ * redirect('https://marmelab.com/react-admin');
+ */
+export const useRedirect = () => {
+    const navigate = useNavigate();
+    const basename = useBasename();
+    const createPath = useCreatePath();
+    return useCallback((redirectTo, resource = '', id, data, state = {}) => {
+        if (!redirectTo) {
+            return;
+        }
+        else if (typeof redirectTo === 'function') {
+            const target = redirectTo(resource, id, data);
+            const absoluteTarget = typeof target === 'string'
+                ? `${basename}${target.startsWith('/') ? '' : '/'}${target}`
+                : {
+                    pathname: `${basename}${target.pathname?.startsWith('/') ? '' : '/'}${target.pathname}`,
+                    ...target,
+                };
+            navigate(absoluteTarget, {
+                state: { _scrollToTop: true, ...state },
+            });
+            return;
+        }
+        else if (typeof redirectTo === 'string' &&
+            redirectTo.startsWith('http') &&
+            window) {
+            // redirection to an absolute url
+            // history doesn't handle that case, so we handle it by hand
+            window.location.href = redirectTo;
+            return;
+        }
+        else {
+            // redirection to an internal link
+            navigate(createPath({ resource, id, type: redirectTo }), {
+                state: 
+                // We force the scrollToTop except when navigating to a list
+                // where this is already done by <RestoreScrollPosition> in <Resource>
+                redirectTo === 'list'
+                    ? state
+                    : { _scrollToTop: true, ...state },
+            });
+            return;
+        }
+    }, [navigate, basename, createPath]);
+};

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

@@ -0,0 +1,7 @@
+/**
+ * A hook to use inside the component passed to FallbackComponent
+ * of react-error-boundary. It resets the error boundary state whenever
+ * the location changes
+ * @param {Function} resetErrorBoundary
+ */
+export declare const useResetErrorBoundaryOnLocationChange: (resetErrorBoundary: () => void) => void;

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

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+import { useLocation } from './useLocation';
+/**
+ * A hook to use inside the component passed to FallbackComponent
+ * of react-error-boundary. It resets the error boundary state whenever
+ * the location changes
+ * @param {Function} resetErrorBoundary
+ */
+export const useResetErrorBoundaryOnLocationChange = (resetErrorBoundary) => {
+    const { pathname } = useLocation();
+    const originalPathname = useRef(pathname);
+    useEffect(() => {
+        if (pathname !== originalPathname.current) {
+            resetErrorBoundary();
+        }
+    }, [pathname, resetErrorBoundary]);
+};

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

@@ -0,0 +1,40 @@
+/**
+ * A hook that tracks the scroll position and restores it when the component mounts.
+ * @param storeKey The key under which to store the scroll position in the store
+ * @param debounceMs The debounce time in milliseconds
+ *
+ * @example
+ * import { useRestoreScrollPosition } from '@strato-admin/ra-core';
+ *
+ * const MyCustomPage = () => {
+ *   useRestoreScrollPosition('my-list');
+ *
+ *   return (
+ *     <div>
+ *       <h1>My Custom Page</h1>
+ *       <VeryLongContent />
+ *     </div>
+ *   );
+ * };
+ */
+export declare const useRestoreScrollPosition: (storeKey: string, debounceMs?: number) => void;
+/**
+ * A hook that tracks the scroll position and stores it.
+ * @param storeKey The key under which to store the scroll position in the store
+ * @param debounceMs The debounce time in milliseconds
+ *
+ * @example
+ * import { useTrackScrollPosition } from '@strato-admin/ra-core';
+ *
+ * const MyCustomPage = () => {
+ *   useTrackScrollPosition('my-list');
+ *
+ *   return (
+ *     <div>
+ *       <h1>My Custom Page</h1>
+ *       <VeryLongContent />
+ *     </div>
+ *   );
+ * };
+ */
+export declare const useTrackScrollPosition: (storeKey: string, debounceMs?: number) => [number | undefined, (value: number | undefined) => void];

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

@@ -0,0 +1,70 @@
+import { useEffect } from 'react';
+import debounce from 'lodash/debounce.js';
+import { useStore } from '../store';
+import { useLocation } from './useLocation';
+/**
+ * A hook that tracks the scroll position and restores it when the component mounts.
+ * @param storeKey The key under which to store the scroll position in the store
+ * @param debounceMs The debounce time in milliseconds
+ *
+ * @example
+ * import { useRestoreScrollPosition } from '@strato-admin/ra-core';
+ *
+ * const MyCustomPage = () => {
+ *   useRestoreScrollPosition('my-list');
+ *
+ *   return (
+ *     <div>
+ *       <h1>My Custom Page</h1>
+ *       <VeryLongContent />
+ *     </div>
+ *   );
+ * };
+ */
+export const useRestoreScrollPosition = (storeKey, debounceMs = 250) => {
+    const [position, setPosition] = useTrackScrollPosition(storeKey, debounceMs);
+    const location = useLocation();
+    useEffect(() => {
+        if (position != null && location.state?._scrollToTop !== true) {
+            setPosition(undefined);
+            window.scrollTo(0, position);
+        }
+        // We only want to run this effect on mount
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+};
+/**
+ * A hook that tracks the scroll position and stores it.
+ * @param storeKey The key under which to store the scroll position in the store
+ * @param debounceMs The debounce time in milliseconds
+ *
+ * @example
+ * import { useTrackScrollPosition } from '@strato-admin/ra-core';
+ *
+ * const MyCustomPage = () => {
+ *   useTrackScrollPosition('my-list');
+ *
+ *   return (
+ *     <div>
+ *       <h1>My Custom Page</h1>
+ *       <VeryLongContent />
+ *     </div>
+ *   );
+ * };
+ */
+export const useTrackScrollPosition = (storeKey, debounceMs = 250) => {
+    const [position, setPosition] = useStore(storeKey);
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const handleScroll = debounce(() => {
+            setPosition(window.scrollY);
+        }, debounceMs);
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, [debounceMs, setPosition]);
+    return [position, setPosition];
+};

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

@@ -0,0 +1,22 @@
+/**
+ * Scroll the window to top when the target location contains the _scrollToTop state
+ *
+ * @see CoreAdminRouter where it's enabled by default
+ *
+ * @example // usage in buttons
+ * import { Link } from 'react-router-dom';
+ * import { Button } from '@mui/material';
+ *
+ * const FooButton = () => (
+ *     <Button
+ *         component={Link}
+ *         to={{
+ *             pathname: '/foo',
+ *             state: { _scrollToTop: true },
+ *         }}
+ *     >
+ *         Go to foo
+ *     </Button>
+ * );
+ */
+export declare const useScrollToTop: () => void;

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

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { useLocation } from './useLocation';
+/**
+ * Scroll the window to top when the target location contains the _scrollToTop state
+ *
+ * @see CoreAdminRouter where it's enabled by default
+ *
+ * @example // usage in buttons
+ * import { Link } from 'react-router-dom';
+ * import { Button } from '@mui/material';
+ *
+ * const FooButton = () => (
+ *     <Button
+ *         component={Link}
+ *         to={{
+ *             pathname: '/foo',
+ *             state: { _scrollToTop: true },
+ *         }}
+ *     >
+ *         Go to foo
+ *     </Button>
+ * );
+ */
+export const useScrollToTop = () => {
+    const location = useLocation();
+    useEffect(() => {
+        if (location.state?._scrollToTop &&
+            typeof window != 'undefined' &&
+            typeof window.scrollTo === 'function') {
+            window.scrollTo(0, 0);
+        }
+    }, [location]);
+};

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

@@ -0,0 +1,13 @@
+/**
+ * Utility hook to get the base path of a splat path.
+ * Compatible both with react-router v6 and v7.
+ *
+ * Example:
+ * If a splat path is defined as `/posts/:id/show/*`,
+ * and the current location is `/posts/12/show/3`,
+ * this hook will return `/posts/12/show`.
+ *
+ * Solution inspired by
+ * https://github.com/remix-run/react-router/issues/11052#issuecomment-1828470203
+ */
+export declare const useSplatPathBase: () => string;

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

@@ -0,0 +1,21 @@
+import { useLocation } from './useLocation';
+import { useParams } from './useParams';
+/**
+ * Utility hook to get the base path of a splat path.
+ * Compatible both with react-router v6 and v7.
+ *
+ * Example:
+ * If a splat path is defined as `/posts/:id/show/*`,
+ * and the current location is `/posts/12/show/3`,
+ * this hook will return `/posts/12/show`.
+ *
+ * Solution inspired by
+ * https://github.com/remix-run/react-router/issues/11052#issuecomment-1828470203
+ */
+export const useSplatPathBase = () => {
+    const location = useLocation();
+    const params = useParams();
+    const splatPathRelativePart = params['*'];
+    const splatPathBase = location.pathname.replace(new RegExp(`/${splatPathRelativePart}$`), '');
+    return splatPathBase;
+};

package/dist/ra-core/src/store/StoreContext.d.ts

@@ -0,0 +1,2 @@
+import { Store } from './types';
+export declare const StoreContext: import("react").Context<Store>;

package/dist/ra-core/src/store/StoreContext.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { memoryStore } from './memoryStore';
+const defaultStore = memoryStore();
+export const StoreContext = createContext(defaultStore);

package/dist/ra-core/src/store/StoreContextProvider.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Store } from './types';
+export declare const StoreContextProvider: ({ value: Store, children, }: StoreContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export interface StoreContextProviderProps {
+    value: Store;
+    children: React.ReactNode;
+}

package/dist/ra-core/src/store/StoreContextProvider.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { StoreContext } from './StoreContext';
+export const StoreContextProvider = ({ value: Store, children, }) => {
+    useEffect(() => {
+        Store.setup();
+        return () => {
+            Store.teardown();
+        };
+    }, [Store]);
+    return (_jsx(StoreContext.Provider, { value: Store, children: children }));
+};

package/dist/ra-core/src/store/StoreSetter.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+/**
+ * A component to set store state for a key on mount declaratively
+ *
+ * To use it, just wrap any component that need to use the corresponding
+ * store item with <StoreSetter name="my.key" value="myvalue">.
+ * This wrapping needs to be done to ensure that the corresponding store item
+ * is set before rendering the wrapped component.
+ *
+ * Tip: <StoreSetter> is a great helper for mocking the store in
+ * unit tests. Prefer it to calling the Store manually.
+ *
+ * @example
+ *
+ *     <StoreSetter name="list.density" value="small">
+ *         <MyStoreDependentComponent />
+ *     </StoreSetter>
+ *
+ * @example // Using <StoreSetter> is equivalent to using `useStoreContext` and setting its value directly.
+ *
+ * const [, setDensity] = useStore('list.density');
+ *
+ * useEffect(() => {
+ *     setDensity('small');
+ * }, []);
+ *
+ * @param {Props}    props
+ * @param {string}   props.name Store item key. Required. Separate with dots to namespace, e.g. 'posts.list.columns'
+ * @param {any}      props.value Store item value. Required.
+ * @param {children} props.children Children are rendered as is, on mount
+ */
+export declare const StoreSetter: ({ value, name, children }: StoreSetterProps) => import("react/jsx-runtime").JSX.Element;
+export interface StoreSetterProps {
+    name: string;
+    value: any;
+    children: ReactNode;
+}

package/dist/ra-core/src/store/StoreSetter.js

@@ -0,0 +1,40 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useStoreContext } from './useStoreContext';
+/**
+ * A component to set store state for a key on mount declaratively
+ *
+ * To use it, just wrap any component that need to use the corresponding
+ * store item with <StoreSetter name="my.key" value="myvalue">.
+ * This wrapping needs to be done to ensure that the corresponding store item
+ * is set before rendering the wrapped component.
+ *
+ * Tip: <StoreSetter> is a great helper for mocking the store in
+ * unit tests. Prefer it to calling the Store manually.
+ *
+ * @example
+ *
+ *     <StoreSetter name="list.density" value="small">
+ *         <MyStoreDependentComponent />
+ *     </StoreSetter>
+ *
+ * @example // Using <StoreSetter> is equivalent to using `useStoreContext` and setting its value directly.
+ *
+ * const [, setDensity] = useStore('list.density');
+ *
+ * useEffect(() => {
+ *     setDensity('small');
+ * }, []);
+ *
+ * @param {Props}    props
+ * @param {string}   props.name Store item key. Required. Separate with dots to namespace, e.g. 'posts.list.columns'
+ * @param {any}      props.value Store item value. Required.
+ * @param {children} props.children Children are rendered as is, on mount
+ */
+export const StoreSetter = ({ value, name, children }) => {
+    const { setItem } = useStoreContext();
+    useEffect(() => {
+        setItem(name, value);
+    }, [name, setItem, value]);
+    return _jsx(_Fragment, { children: children });
+};

package/dist/ra-core/src/store/index.d.ts

@@ -0,0 +1,11 @@
+export * from './localStorageStore';
+export * from './memoryStore';
+export * from './StoreContext';
+export * from './StoreContextProvider';
+export * from './StoreSetter';
+export * from './types';
+export * from './useStore';
+export * from './useStoreContext';
+export * from './useRemoveFromStore';
+export * from './useRemoveItemsFromStore';
+export * from './useResetStore';

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

@@ -0,0 +1,11 @@
+export * from './localStorageStore';
+export * from './memoryStore';
+export * from './StoreContext';
+export * from './StoreContextProvider';
+export * from './StoreSetter';
+export * from './types';
+export * from './useStore';
+export * from './useStoreContext';
+export * from './useRemoveFromStore';
+export * from './useRemoveItemsFromStore';
+export * from './useResetStore';

package/dist/ra-core/src/store/localStorageStore.d.ts

@@ -0,0 +1,27 @@
+import { Store } from './types';
+/**
+ * Store using localStorage, or memory storage in incognito mode
+ *
+ * @example
+ *
+ * import { localStorageStore } from 'react-admin';
+ *
+ * const App = () => (
+ *    <Admin store={localStorageStore()}>
+ *       ...
+ *   </Admin>
+ * );
+ */
+export declare const localStorageStore: (version?: string, appKey?: string) => Store;
+declare class LocalStorageShim {
+    valuesMap: any;
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+    removeItem(key: string): void;
+    removeItems(keyPrefix: string): void;
+    clear(): void;
+    key(i: any): string;
+    get length(): any;
+}
+export declare const getStorage: () => LocalStorageShim | Storage;
+export {};