@strato-admin/ra-core 0.1.0

package/src/core/useIsOffline.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { onlineManager } from '@tanstack/react-query';
+
+/**
+ * Hook to determine if the application is offline.
+ * It uses the onlineManager from react-query to check the online status.
+ * It returns true if the application is offline, false otherwise.
+ * @returns {boolean} - True if offline, false if online.
+ */
+export const useIsOffline = () => {
+    const [isOnline, setIsOnline] = React.useState(onlineManager.isOnline());
+
+    React.useEffect(() => {
+        const handleChange = () => {
+            setIsOnline(onlineManager.isOnline());
+        };
+        return onlineManager.subscribe(handleChange);
+    }, []);
+
+    return !isOnline;
+};

package/src/core/useResourceContext.ts

@@ -0,0 +1,43 @@
+import { useContext } from 'react';
+import { ResourceContext, ResourceContextValue } from './ResourceContext';
+
+/**
+ * Hook to read the resource from the ResourceContext.
+ *
+ * Must be used within a <ResourceContextProvider> (e.g. as a descendent of <Resource>
+ * or any reference related components), or called with a resource prop.
+ *
+ * @example
+ *
+ * const ResourceName = (props) => {
+ *   const resource = useResourceContext(props);
+ *   const getResourceLabel = useGetResourceLabel();
+ *   return <>{getResourceLabel(resource, 1)}</>;
+ * }
+ *
+ * // use it in a resource context
+ * const MyComponent = () => (
+ *   <ResourceContextProvider value="posts">
+ *     <ResourceName />
+ *     ...
+ *   </ResourceContextProvider>
+ * );
+ *
+ * // override resource via props
+ * const MyComponent = () => (
+ *   <>
+ *     <ResourceName resource="posts"/>
+ *     ...
+ *   </>
+ * );
+ *
+ * @returns {ResourceContextValue} The resource name, e.g. 'posts'
+ */
+export const useResourceContext = <
+    ResourceInformationsType extends Partial<{ resource: string }>,
+>(
+    props?: ResourceInformationsType
+): ResourceContextValue => {
+    const context = useContext(ResourceContext);
+    return (props && props.resource) || context;
+};

package/src/core/useResourceDefinition.spec.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { useResourceDefinition } from './useResourceDefinition';
+import { ResourceDefinitionContextProvider } from './ResourceDefinitionContext';
+
+describe('useResourceDefinition', () => {
+    const UseResourceDefinition = ({
+        resource = 'posts',
+        callback,
+    }: {
+        resource?: string;
+        callback: (params: any) => void;
+    }) => {
+        const resourceDefinition = useResourceDefinition({ resource });
+        callback(resourceDefinition);
+        return <span />;
+    };
+
+    it('should not fail when used outside of a ResourceDefinitionContext', () => {
+        const callback = jest.fn();
+        render(<UseResourceDefinition callback={callback} />);
+        expect(callback).toHaveBeenCalledWith({
+            hasCreate: undefined,
+            hasEdit: undefined,
+            hasList: undefined,
+            hasShow: undefined,
+        });
+    });
+
+    it('should use the definition from ResourceDefinitionContext', () => {
+        const callback = jest.fn();
+        render(
+            <ResourceDefinitionContextProvider
+                definitions={{
+                    posts: {
+                        name: 'posts',
+                        hasList: true,
+                        options: { label: 'Posts' },
+                        recordRepresentation: 'title',
+                    },
+                    comments: {
+                        name: 'comments',
+                        options: { label: 'Comments' },
+                    },
+                }}
+            >
+                <UseResourceDefinition callback={callback} />
+            </ResourceDefinitionContextProvider>
+        );
+        expect(callback).toHaveBeenCalledWith({
+            name: 'posts',
+            hasCreate: undefined,
+            hasEdit: undefined,
+            hasList: true,
+            hasShow: undefined,
+            recordRepresentation: 'title',
+            options: { label: 'Posts' },
+        });
+    });
+});

package/src/core/useResourceDefinition.ts

@@ -0,0 +1,75 @@
+import { useMemo } from 'react';
+import defaults from 'lodash/defaults.js';
+
+import { useResourceDefinitions } from './useResourceDefinitions';
+import { useResourceContext } from './useResourceContext';
+import {
+    RecordToStringFunction,
+    ResourceDefinition,
+    ResourceOptions,
+} from '../types';
+
+/**
+ * Hook to get the definition of a given resource
+ *
+ * @example // Get the current resource definition (based on ResourceContext)
+ *
+ * const definition = useResourceDefinition();
+ * console.log(definition);
+ * // {
+ * //   name: 'posts',
+ * //   hasList: true,
+ * //   hasEdit: true,
+ * //   hasShow: true,
+ * //   hasCreate: true,
+ * //   options: {},
+ * //   icon: PostIcon,
+ * // }
+ *
+ * @example // Pass a resource prop to check a different resource definition
+ *
+ * const definition = useResourceDefinition({ resource: 'posts' });
+ */
+export const useResourceDefinition = <
+    OptionsType extends ResourceOptions = any,
+>(
+    props?: UseResourceDefinitionOptions
+): ResourceDefinition<OptionsType> => {
+    const resource = useResourceContext(props);
+    const resourceDefinitions = useResourceDefinitions();
+    const { hasCreate, hasEdit, hasList, hasShow, recordRepresentation } =
+        props || {};
+
+    const definition = useMemo(() => {
+        return defaults(
+            {},
+            {
+                hasCreate,
+                hasEdit,
+                hasList,
+                hasShow,
+                recordRepresentation,
+            },
+            resource ? resourceDefinitions[resource] : {}
+        ) as ResourceDefinition<OptionsType>;
+    }, [
+        resource,
+        resourceDefinitions,
+        hasCreate,
+        hasEdit,
+        hasList,
+        hasShow,
+        recordRepresentation,
+    ]);
+
+    return definition;
+};
+
+export interface UseResourceDefinitionOptions {
+    readonly resource?: string;
+    readonly hasList?: boolean;
+    readonly hasEdit?: boolean;
+    readonly hasShow?: boolean;
+    readonly hasCreate?: boolean;
+    readonly recordRepresentation?: React.ReactNode | RecordToStringFunction;
+}

package/src/core/useResourceDefinitionContext.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+
+import { ResourceDefinitionContext } from './ResourceDefinitionContext';
+
+export const useResourceDefinitionContext = () =>
+    useContext(ResourceDefinitionContext);

package/src/core/useResourceDefinitions.spec.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { useResourceDefinitions } from './useResourceDefinitions';
+import { ResourceDefinitionContextProvider } from './ResourceDefinitionContext';
+
+describe('useResourceDefinitions', () => {
+    const UseResourceDefinitions = ({
+        callback,
+    }: {
+        resource?: string;
+        callback: (params: any) => void;
+    }) => {
+        const resourceDefinition = useResourceDefinitions();
+        callback(resourceDefinition);
+        return <span />;
+    };
+
+    it('should not fail when used outside of a ResourceDefinitionContext', () => {
+        const callback = jest.fn();
+        render(<UseResourceDefinitions callback={callback} />);
+        expect(callback).toHaveBeenCalledWith({});
+    });
+
+    it('should use the definition from ResourceDefinitionContext', () => {
+        const callback = jest.fn();
+        render(
+            <ResourceDefinitionContextProvider
+                definitions={{
+                    posts: {
+                        options: { label: 'Posts' },
+                    },
+                    comments: {
+                        options: { label: 'Comments' },
+                    },
+                }}
+            >
+                <UseResourceDefinitions callback={callback} />
+            </ResourceDefinitionContextProvider>
+        );
+        expect(callback).toHaveBeenCalledWith({
+            posts: {
+                options: { label: 'Posts' },
+            },
+            comments: {
+                options: { label: 'Comments' },
+            },
+        });
+    });
+});

package/src/core/useResourceDefinitions.ts

@@ -0,0 +1,26 @@
+import type { ResourceOptions } from '../types';
+import type { ResourceDefinitions } from './ResourceDefinitionContext';
+import { useResourceDefinitionContext } from './useResourceDefinitionContext';
+
+/**
+ * Get the definition of the all resources
+ *
+ * @example
+ *
+ * const definitions = useResourceDefinitions();
+ * console.log(definitions.posts);
+ * // {
+ * //   name: 'posts',
+ * //   hasList: true,
+ * //   hasEdit: true,
+ * //   hasShow: true,
+ * //   hasCreate: true,
+ * //   options: {},
+ * //   icon: PostIcon,
+ * //   recordRepresentation: 'title',
+ * // }
+ */
+export const useResourceDefinitions = <
+    OptionsType extends ResourceOptions = any,
+>(): ResourceDefinitions<OptionsType> =>
+    useResourceDefinitionContext().definitions;

package/src/core/useUserMenu.ts

@@ -0,0 +1,31 @@
+import { useContext } from 'react';
+import { UserMenuContext } from './UserMenuContext';
+
+/**
+ * A hook to retrieve the user menu context, which provides access to a function for closing the user menu.
+ * @returns {UserMenuContextValue}
+ *
+ * @example
+ * import { Logout, MenuItemLink, UserMenu, useUserMenu } from 'react-admin';
+ *
+ * const ConfigurationMenu = () => {
+ *     const { onClose } = useUserMenu();
+ *     return (
+ *         <MenuItemLink
+ *             to="/configuration"
+ *             primaryText="pos.configuration"
+ *             leftIcon={<SettingsIcon />}
+ *             sidebarIsOpen
+ *             onClick={onClose}
+ *         />
+ *     );
+ * };
+ *
+ * export const MyUserMenu = () => (
+ *     <UserMenu>
+ *         <ConfigurationMenu />
+ *         <Logout />
+ *     </UserMenu>
+ * );
+ */
+export const useUserMenu = () => useContext(UserMenuContext);

package/src/core/useWrappedSource.ts

@@ -0,0 +1,16 @@
+import { useSourceContext } from './SourceContext';
+
+/**
+ * Get the source prop for a field or input by checking if a source context is available.
+ * @param {string} source The original source prop
+ * @returns {string} The source prop, either the original one or the one modified by the SourceContext.
+ * @example
+ * const MyInput = ({ source, ...props }) => {
+ *   const finalSource = useWrappedSource(source);
+ *   return <input name={finalSource} {...props} />;
+ * };
+ */
+export const useWrappedSource = (source: string) => {
+    const sourceContext = useSourceContext();
+    return sourceContext.getSource(source);
+};

package/src/dataProvider/DataProviderContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+import { DataProvider } from '../types';
+
+const DataProviderContext = createContext<DataProvider | null>(null);
+
+DataProviderContext.displayName = 'DataProviderContext';
+
+export default DataProviderContext;

package/src/dataProvider/HttpError.ts

@@ -0,0 +1,19 @@
+class HttpError extends Error {
+    status;
+    body;
+    constructor(message, status, body: any = null) {
+        super(message);
+        this.status = status;
+        this.body = body;
+        Object.setPrototypeOf(this, HttpError.prototype);
+        this.name = this.constructor.name;
+        if (typeof Error.captureStackTrace === 'function') {
+            Error.captureStackTrace(this, this.constructor);
+        } else {
+            this.stack = new Error(message).stack;
+        }
+        this.stack = new Error().stack;
+    }
+}
+
+export default HttpError;

package/src/dataProvider/combineDataProviders.spec.ts

@@ -0,0 +1,61 @@
+import expect from 'expect';
+import { testDataProvider } from './testDataProvider';
+import { combineDataProviders } from './combineDataProviders';
+
+describe('combineDataProviders', () => {
+    it('calls the right dataProvider depending on the matcher function', async () => {
+        const dataProvider1 = testDataProvider({
+            getOne: jest
+                .fn()
+                .mockResolvedValue({ data: { id: 1, foo: 'bar' } }),
+        });
+        const dataProvider2 = testDataProvider({
+            getOne: jest
+                .fn()
+                .mockResolvedValue({ data: { id: 1, foo: 'bar' } }),
+        });
+        const dataProvider = combineDataProviders(resource => {
+            switch (resource) {
+                case 'posts':
+                    return dataProvider1;
+                case 'comments':
+                    return dataProvider2;
+                default:
+                    throw new Error('Unknown resource');
+            }
+        });
+        await dataProvider.getOne('comments', { id: 1 });
+        expect(dataProvider1.getOne).not.toHaveBeenCalled();
+        expect(dataProvider2.getOne).toHaveBeenCalledWith('comments', {
+            id: 1,
+        });
+    });
+    it('works with a dataProvider that returns a promise', async () => {
+        const dataProvider1 = testDataProvider({
+            getOne: jest
+                .fn()
+                .mockResolvedValue({ data: { id: 1, foo: 'bar' } }),
+        });
+        const dataProvider2 = testDataProvider({
+            getOne: jest
+                .fn()
+                .mockResolvedValue({ data: { id: 1, foo: 'bar' } }),
+        });
+        const dataProviderValue = combineDataProviders(resource => {
+            switch (resource) {
+                case 'posts':
+                    return dataProvider1;
+                case 'comments':
+                    return dataProvider2;
+                default:
+                    throw new Error('Unknown resource');
+            }
+        });
+        const dataProvider = await dataProviderValue;
+        await dataProvider.getOne('comments', { id: 1 });
+        expect(dataProvider1.getOne).not.toHaveBeenCalled();
+        expect(dataProvider2.getOne).toHaveBeenCalledWith('comments', {
+            id: 1,
+        });
+    });
+});

package/src/dataProvider/combineDataProviders.ts

@@ -0,0 +1,39 @@
+import { DataProvider } from '../types';
+import { defaultDataProvider } from './defaultDataProvider';
+
+export type DataProviderMatcher = (resource: string) => DataProvider;
+
+/**
+ * Combine multiple data providers into one.
+ *
+ * @param dataProviderMatcher A function that returns a data provider for a given resource.
+ *
+ * @example
+ * const dataProvider = combineDataProviders(resource => {
+ *    switch(resource) {
+ *       case 'posts':
+ *       case 'comments':
+ *          return dataProvider1;
+ *       case 'users':
+ *          return dataProvider2;
+ *       default:
+ *         throw new Error('Unknown resource');
+ *    }
+ * });
+ */
+export const combineDataProviders = (
+    dataProviderMatcher: DataProviderMatcher
+): DataProvider =>
+    new Proxy(defaultDataProvider, {
+        get: (target, name) => {
+            if (name === 'then') {
+                return null;
+            }
+            return (resource, ...params) => {
+                if (typeof name === 'symbol') {
+                    return;
+                }
+                return dataProviderMatcher(resource)[name](resource, ...params);
+            };
+        },
+    });

package/src/dataProvider/convertLegacyDataProvider.spec.ts

@@ -0,0 +1,30 @@
+import expect from 'expect';
+
+import convertLegacyDataProvider from './convertLegacyDataProvider';
+
+describe('convertLegacyDataProvider', () => {
+    it('should return a function allowing old style calls', () => {
+        const legacyProvider = jest.fn();
+        const convertedProvider = convertLegacyDataProvider(legacyProvider);
+        convertedProvider.getList('posts', { filter: { foo: 'bar' } });
+        expect(legacyProvider).toHaveBeenCalledWith('GET_LIST', 'posts', {
+            filter: { foo: 'bar' },
+        });
+    });
+    it('should return an object allowing new style calls', () => {
+        const legacyProvider = jest.fn();
+        const convertedProvider = convertLegacyDataProvider(legacyProvider);
+        convertedProvider.getList('posts', {
+            filter: { foo: 'bar' },
+            pagination: { page: 1, perPage: 10 },
+            sort: { field: 'id', order: 'ASC' },
+        });
+        expect(legacyProvider).toHaveBeenCalledWith(
+            'GET_LIST',
+            'posts',
+            expect.objectContaining({
+                filter: { foo: 'bar' },
+            })
+        );
+    });
+});

package/src/dataProvider/convertLegacyDataProvider.ts

@@ -0,0 +1,58 @@
+import {
+    CREATE,
+    DELETE,
+    DELETE_MANY,
+    GET_LIST,
+    GET_MANY,
+    GET_MANY_REFERENCE,
+    GET_ONE,
+    UPDATE,
+    UPDATE_MANY,
+} from './dataFetchActions';
+import { LegacyDataProvider, DataProvider } from '../types';
+import { defaultDataProvider } from './defaultDataProvider';
+
+const fetchMap = {
+    create: CREATE,
+    delete: DELETE,
+    deleteMany: DELETE_MANY,
+    getList: GET_LIST,
+    getMany: GET_MANY,
+    getManyReference: GET_MANY_REFERENCE,
+    getOne: GET_ONE,
+    update: UPDATE,
+    updateMany: UPDATE_MANY,
+};
+
+/**
+ * Turn a function-based dataProvider to an object-based one
+ *
+ * Allows using legacy dataProviders transparently.
+ *
+ * @param {Function} legacyDataProvider A legacy dataProvider (type, resource, params) => Promise<any>
+ *
+ * @returns {Object} A dataProvider that react-admin can use
+ */
+const convertLegacyDataProvider = (
+    legacyDataProvider: LegacyDataProvider
+): DataProvider => {
+    const proxy = new Proxy(defaultDataProvider, {
+        get(_, name) {
+            return (resource, params) => {
+                if (Object.keys(fetchMap).includes(name.toString())) {
+                    const fetchType = fetchMap[name.toString()];
+                    return legacyDataProvider(fetchType, resource, params);
+                }
+
+                return legacyDataProvider(name.toString(), resource, params);
+            };
+        },
+        apply(_, __, args) {
+            return legacyDataProvider.apply(legacyDataProvider, args);
+        },
+    });
+
+    return proxy;
+};
+
+export default convertLegacyDataProvider;

package/src/dataProvider/dataFetchActions.ts

@@ -0,0 +1,52 @@
+export const GET_LIST = 'GET_LIST';
+export const GET_ONE = 'GET_ONE';
+export const GET_MANY = 'GET_MANY';
+export const GET_MANY_REFERENCE = 'GET_MANY_REFERENCE';
+export const CREATE = 'CREATE';
+export const UPDATE = 'UPDATE';
+export const UPDATE_MANY = 'UPDATE_MANY';
+export const DELETE = 'DELETE';
+export const DELETE_MANY = 'DELETE_MANY';
+
+export const fetchActionsWithRecordResponse = ['getOne', 'create', 'update'];
+export const fetchActionsWithArrayOfIdentifiedRecordsResponse = [
+    'getList',
+    'getMany',
+    'getManyReference',
+];
+export const fetchActionsWithArrayOfRecordsResponse = [
+    ...fetchActionsWithArrayOfIdentifiedRecordsResponse,
+    'updateMany',
+    'deleteMany',
+];
+export const fetchActionsWithTotalResponse = ['getList', 'getManyReference'];
+
+export const reactAdminFetchActions = [
+    ...fetchActionsWithRecordResponse,
+    ...fetchActionsWithArrayOfRecordsResponse,
+];
+
+export const sanitizeFetchType = (fetchType: string) => {
+    switch (fetchType) {
+        case GET_LIST:
+            return 'getList';
+        case GET_ONE:
+            return 'getOne';
+        case GET_MANY:
+            return 'getMany';
+        case GET_MANY_REFERENCE:
+            return 'getManyReference';
+        case CREATE:
+            return 'create';
+        case UPDATE:
+            return 'update';
+        case UPDATE_MANY:
+            return 'updateMany';
+        case DELETE:
+            return 'delete';
+        case DELETE_MANY:
+            return 'deleteMany';
+        default:
+            return fetchType;
+    }
+};

package/src/dataProvider/defaultDataProvider.ts

@@ -0,0 +1,20 @@
+import {
+    CreateResult,
+    DataProvider,
+    DeleteResult,
+    GetOneResult,
+    UpdateResult,
+} from '../types';
+
+// avoids adding a context in tests
+export const defaultDataProvider: DataProvider = {
+    create: () => Promise.resolve<CreateResult>({ data: null }),
+    delete: () => Promise.resolve<DeleteResult>({ data: null }),
+    deleteMany: () => Promise.resolve({ data: [] }),
+    getList: () => Promise.resolve({ data: [], total: 0 }),
+    getMany: () => Promise.resolve({ data: [] }),
+    getManyReference: () => Promise.resolve({ data: [], total: 0 }),
+    getOne: () => Promise.resolve<GetOneResult>({ data: null }),
+    update: () => Promise.resolve<UpdateResult>({ data: null }),
+    updateMany: () => Promise.resolve({ data: [] }),
+};