@strato-admin/core 0.1.0 → 0.3.0

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

@@ -0,0 +1,198 @@
+const RA_STORE = 'RaStore';
+// localStorage isn't available in incognito mode. We need to detect it
+const testLocalStorage = () => {
+    // eslint-disable-next-line eqeqeq
+    if (typeof window === 'undefined' || window.localStorage == undefined) {
+        return false;
+    }
+    try {
+        window.localStorage.setItem('test', 'test');
+        window.localStorage.removeItem('test');
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+};
+const localStorageAvailable = testLocalStorage();
+/**
+ * Store using localStorage, or memory storage in incognito mode
+ *
+ * @example
+ *
+ * import { localStorageStore } from 'react-admin';
+ *
+ * const App = () => (
+ *    <Admin store={localStorageStore()}>
+ *       ...
+ *   </Admin>
+ * );
+ */
+export const localStorageStore = (version = '1', appKey = '') => {
+    const prefix = `${RA_STORE}${appKey}`;
+    const prefixLength = prefix.length;
+    const subscriptions = {};
+    const publish = (key, value) => {
+        Object.keys(subscriptions).forEach(id => {
+            if (!subscriptions[id])
+                return; // may happen if a component unmounts after a first subscriber was notified
+            if (subscriptions[id].key === key) {
+                subscriptions[id].callback(value);
+            }
+        });
+    };
+    // Whenever the local storage changes in another document, look for matching subscribers.
+    // This allows to synchronize state across tabs
+    const onLocalStorageChange = (event) => {
+        if (event.key?.substring(0, prefixLength) !== prefix) {
+            return;
+        }
+        const key = event.key.substring(prefixLength + 1);
+        const value = event.newValue ? tryParse(event.newValue) : undefined;
+        Object.keys(subscriptions).forEach(id => {
+            if (!subscriptions[id])
+                return; // may happen if a component unmounts after a first subscriber was notified
+            if (subscriptions[id].key === key) {
+                if (value === null) {
+                    // an event with a null value is sent when the key is deleted.
+                    // to enable default value, we need to call setValue(undefined) instead of setValue(null)
+                    subscriptions[id].callback(undefined);
+                }
+                else {
+                    subscriptions[id].callback(value == null ? undefined : value);
+                }
+            }
+        });
+    };
+    return {
+        setup: () => {
+            if (localStorageAvailable) {
+                const storedVersion = getStorage().getItem(`${prefix}.version`);
+                if (storedVersion && storedVersion !== version) {
+                    const storage = getStorage();
+                    Object.keys(storage).forEach(key => {
+                        if (key.startsWith(prefix)) {
+                            storage.removeItem(key);
+                        }
+                    });
+                }
+                getStorage().setItem(`${prefix}.version`, version);
+                window.addEventListener('storage', onLocalStorageChange);
+            }
+        },
+        teardown: () => {
+            if (localStorageAvailable) {
+                window.removeEventListener('storage', onLocalStorageChange);
+            }
+        },
+        getItem(key, defaultValue) {
+            const valueFromStorage = getStorage().getItem(`${prefix}.${key}`);
+            return valueFromStorage == null
+                ? defaultValue
+                : tryParse(valueFromStorage);
+        },
+        setItem(key, value) {
+            if (value === undefined) {
+                getStorage().removeItem(`${prefix}.${key}`);
+            }
+            else {
+                getStorage().setItem(`${prefix}.${key}`, JSON.stringify(value));
+            }
+            publish(key, value);
+        },
+        removeItem(key) {
+            getStorage().removeItem(`${prefix}.${key}`);
+            publish(key, undefined);
+        },
+        removeItems(keyPrefix) {
+            const storage = getStorage();
+            Object.keys(storage).forEach(key => {
+                if (key.startsWith(`${prefix}.${keyPrefix}`)) {
+                    storage.removeItem(key);
+                    const publishKey = key.substring(prefixLength + 1);
+                    publish(publishKey, undefined);
+                }
+            });
+        },
+        reset() {
+            const storage = getStorage();
+            Object.keys(storage).forEach(key => {
+                if (key.startsWith(prefix)) {
+                    storage.removeItem(key);
+                    const publishKey = key.substring(prefixLength + 1);
+                    publish(publishKey, undefined);
+                }
+            });
+        },
+        subscribe: (key, callback) => {
+            const id = Math.random().toString();
+            subscriptions[id] = {
+                key,
+                callback,
+            };
+            return () => {
+                delete subscriptions[id];
+            };
+        },
+        listItems: (keyPrefix) => {
+            const storage = getStorage();
+            const fullPrefix = `${prefix}.${keyPrefix != null ? keyPrefix : ''}`;
+            return Object.entries(storage).reduce((acc, [key, value]) => {
+                if (
+                // version is considered internal
+                key !== `${prefix}.version` &&
+                    key.startsWith(fullPrefix)) {
+                    acc[key.substring(prefix.length + 1)] = tryParse(value);
+                }
+                return acc;
+            }, {});
+        },
+    };
+};
+const tryParse = (value) => {
+    try {
+        return JSON.parse(value);
+    }
+    catch (e) {
+        return value;
+    }
+};
+class LocalStorageShim {
+    valuesMap = new Map();
+    getItem(key) {
+        if (this.valuesMap.has(key)) {
+            return String(this.valuesMap.get(key));
+        }
+        return null;
+    }
+    setItem(key, value) {
+        this.valuesMap.set(key, value);
+    }
+    removeItem(key) {
+        this.valuesMap.delete(key);
+    }
+    removeItems(keyPrefix) {
+        this.valuesMap.forEach((value, key) => {
+            if (key.startsWith(keyPrefix)) {
+                this.valuesMap.delete(key);
+            }
+        });
+    }
+    clear() {
+        this.valuesMap.clear();
+    }
+    key(i) {
+        if (arguments.length === 0) {
+            throw new TypeError("Failed to execute 'key' on 'Storage': 1 argument required, but only 0 present."); // this is a TypeError implemented on Chrome, Firefox throws Not enough arguments to Storage.key.
+        }
+        const arr = Array.from(this.valuesMap.keys());
+        return arr[i];
+    }
+    get length() {
+        return this.valuesMap.size;
+    }
+}
+const memoryStorage = new LocalStorageShim();
+export const getStorage = () => {
+    return localStorageAvailable ? window.localStorage : memoryStorage;
+};

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

@@ -0,0 +1,15 @@
+import { Store } from './types';
+/**
+ * Store using memory
+ *
+ * @example
+ *
+ * import { memoryStore } from 'react-admin';
+ *
+ * const App = () => (
+ *    <Admin store={memoryStore()}>
+ *       ...
+ *   </Admin>
+ * );
+ */
+export declare const memoryStore: (initialStorage?: Record<string, any>) => Store;

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

@@ -0,0 +1,108 @@
+/**
+ * Store using memory
+ *
+ * @example
+ *
+ * import { memoryStore } from 'react-admin';
+ *
+ * const App = () => (
+ *    <Admin store={memoryStore()}>
+ *       ...
+ *   </Admin>
+ * );
+ */
+export const memoryStore = (initialStorage = {}) => {
+    // Use a flat Map to store key-value pairs directly without treating dots as nested paths
+    let storage = new Map(Object.entries(initialStorage ?? {}));
+    const subscriptions = {};
+    let initialized = false;
+    let itemsToSetAfterInitialization = {};
+    const publish = (key, value) => {
+        Object.keys(subscriptions).forEach(id => {
+            if (!subscriptions[id])
+                return; // may happen if a component unmounts after a first subscriber was notified
+            if (subscriptions[id].key === key) {
+                subscriptions[id].callback(value);
+            }
+        });
+    };
+    return {
+        setup: () => {
+            storage = new Map(Object.entries(initialStorage));
+            // Because children might call setItem before the store is initialized,
+            // we store those calls parameters and apply them once the store is ready
+            if (Object.keys(itemsToSetAfterInitialization).length > 0) {
+                const items = Object.entries(itemsToSetAfterInitialization);
+                for (const [key, value] of items) {
+                    storage.set(key, value);
+                    publish(key, value);
+                }
+                itemsToSetAfterInitialization = {};
+            }
+            initialized = true;
+        },
+        teardown: () => {
+            storage.clear();
+        },
+        getItem(key, defaultValue) {
+            return storage.has(key)
+                ? storage.get(key)
+                : defaultValue;
+        },
+        setItem(key, value) {
+            // Because children might call setItem before the store is initialized,
+            // we store those calls parameters and apply them once the store is ready
+            if (!initialized) {
+                itemsToSetAfterInitialization[key] = value;
+                return;
+            }
+            storage.set(key, value);
+            publish(key, value);
+        },
+        removeItem(key) {
+            storage.delete(key);
+            publish(key, undefined);
+        },
+        removeItems(keyPrefix) {
+            const keysToDelete = [];
+            storage.forEach((_, key) => {
+                if (key.startsWith(keyPrefix)) {
+                    keysToDelete.push(key);
+                }
+            });
+            keysToDelete.forEach(key => {
+                storage.delete(key);
+                publish(key, undefined);
+            });
+        },
+        reset() {
+            const keysToDelete = [];
+            storage.forEach((_, key) => {
+                keysToDelete.push(key);
+            });
+            storage.clear();
+            keysToDelete.forEach(key => {
+                publish(key, undefined);
+            });
+        },
+        subscribe: (key, callback) => {
+            const id = Math.random().toString();
+            subscriptions[id] = {
+                key,
+                callback,
+            };
+            return () => {
+                delete subscriptions[id];
+            };
+        },
+        listItems: (keyPrefix) => {
+            return Array.from(storage.entries()).reduce((acc, [key, value]) => {
+                if (keyPrefix != null && !key.startsWith(keyPrefix)) {
+                    return acc;
+                }
+                acc[key] = value;
+                return acc;
+            }, {});
+        },
+    };
+};

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

@@ -0,0 +1,11 @@
+export interface Store {
+    setup: () => void;
+    teardown: () => void;
+    getItem: <T = any>(key: string, defaultValue?: T) => T | undefined;
+    setItem: <T = any>(key: string, value: T) => void;
+    removeItem: (key: string) => void;
+    removeItems: (keyPrefix: string) => void;
+    reset: () => void;
+    subscribe: (key: string, callback: (value: any) => void) => () => void;
+    listItems?: (keyPrefix?: string) => Record<string, unknown>;
+}

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

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

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

@@ -0,0 +1,17 @@
+/**
+ * Get a callback to remove an item from the store
+ *
+ * @example
+ * import { useRemoveFromStore } from 'react-admin';
+ *
+ * const ResetDatagridPrefs = () {
+ *    const removeItem = useRemoveFromStore();
+ *
+ *    const handleClick = () => {
+ *        removeItem('datagrid.prefs');
+ *    };
+ *
+ *    return <Button onClick={hancleClick}>Reset datagrid preferences</Button>;
+ * }
+ */
+export declare const useRemoveFromStore: (hookTimeKey?: string) => (key?: string) => void;

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

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+import { useStoreContext } from './useStoreContext';
+/**
+ * Get a callback to remove an item from the store
+ *
+ * @example
+ * import { useRemoveFromStore } from 'react-admin';
+ *
+ * const ResetDatagridPrefs = () {
+ *    const removeItem = useRemoveFromStore();
+ *
+ *    const handleClick = () => {
+ *        removeItem('datagrid.prefs');
+ *    };
+ *
+ *    return <Button onClick={hancleClick}>Reset datagrid preferences</Button>;
+ * }
+ */
+export const useRemoveFromStore = (hookTimeKey) => {
+    const { removeItem } = useStoreContext();
+    return useCallback((key) => {
+        if (typeof key === 'undefined' &&
+            typeof hookTimeKey === 'undefined') {
+            throw new Error('You must provide a key to remove an item from the store');
+        }
+        // @ts-ignore
+        return removeItem(key ?? hookTimeKey);
+    }, [removeItem, hookTimeKey]);
+};

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

@@ -0,0 +1,17 @@
+/**
+ * Get a callback to remove all item with a certain key prefix from the store
+ *
+ * @example
+ * import { useRemoveItemsFromStore } from 'react-admin';
+ *
+ * const ResetDatagridPrefs = () {
+ *    const removeItems = useRemoveItemsFromStore();
+ *
+ *    const handleClick = () => {
+ *        removeItems('datagrid.prefs');
+ *    };
+ *
+ *    return <Button onClick={hancleClick}>Reset datagrid preferences</Button>;
+ * }
+ */
+export declare const useRemoveItemsFromStore: (hookTimeKeyPrefix?: string | null) => (keyPrefix?: string) => void;

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

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+import { useStoreContext } from './useStoreContext';
+/**
+ * Get a callback to remove all item with a certain key prefix from the store
+ *
+ * @example
+ * import { useRemoveItemsFromStore } from 'react-admin';
+ *
+ * const ResetDatagridPrefs = () {
+ *    const removeItems = useRemoveItemsFromStore();
+ *
+ *    const handleClick = () => {
+ *        removeItems('datagrid.prefs');
+ *    };
+ *
+ *    return <Button onClick={hancleClick}>Reset datagrid preferences</Button>;
+ * }
+ */
+export const useRemoveItemsFromStore = (hookTimeKeyPrefix) => {
+    const { removeItems } = useStoreContext();
+    return useCallback((keyPrefix) => {
+        if (typeof keyPrefix === 'undefined' &&
+            typeof hookTimeKeyPrefix === 'undefined') {
+            throw new Error('You must provide a key to remove an item from the store');
+        }
+        // @ts-ignore
+        return removeItems(keyPrefix ?? hookTimeKeyPrefix);
+    }, [removeItems, hookTimeKeyPrefix]);
+};

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

@@ -0,0 +1,17 @@
+/**
+ * Get a callback to remove all items from the store
+ *
+ * @example
+ * import { useResetStore } from 'react-admin';
+ *
+ * const ResetPrefs = () {
+ *    const reset = useResetStore();
+ *
+ *    const handleClick = () => {
+ *        reset();
+ *    };
+ *
+ *    return <Button onClick={handleClick}>Reset preferences</Button>;
+ * }
+ */
+export declare const useResetStore: () => () => void;

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

@@ -0,0 +1,21 @@
+import { useStoreContext } from './useStoreContext';
+/**
+ * Get a callback to remove all items from the store
+ *
+ * @example
+ * import { useResetStore } from 'react-admin';
+ *
+ * const ResetPrefs = () {
+ *    const reset = useResetStore();
+ *
+ *    const handleClick = () => {
+ *        reset();
+ *    };
+ *
+ *    return <Button onClick={handleClick}>Reset preferences</Button>;
+ * }
+ */
+export const useResetStore = () => {
+    const { reset } = useStoreContext();
+    return reset;
+};

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

@@ -0,0 +1,48 @@
+/**
+ * Read and write a value from the Store
+ *
+ * useState-like hook using the global Store for persistence.
+ * Each time a store value is changed, all components using this value will be re-rendered.
+ *
+ * @param {string} key Name of the store key. Separate with dots to namespace, e.g. 'posts.list.columns'.
+ * @param {any} defaultValue Default value
+ *
+ * @return {Object} A value and a setter for the value, in an array - just like for useState()
+ *
+ * @example
+ * import { useStore } from 'react-admin';
+ *
+ * const PostList = () => {
+ *     const [density] = useStore('posts.list.density', 'small');
+ *
+ *     return (
+ *         <List>
+ *             <Datagrid size={density}>
+ *                 ...
+ *             </Datagrid>
+ *         </List>
+ *     );
+ * }
+ *
+ * // Clicking on this button will trigger a rerender of the PostList!
+ * const ChangeDensity: FC<any> = () => {
+ *     const [density, setDensity] = useStore('posts.list.density', 'small');
+ *
+ *     const changeDensity = (): void => {
+ *         setDensity(density === 'small' ? 'medium' : 'small');
+ *     };
+ *
+ *     return (
+ *         <Button onClick={changeDensity}>
+ *             {`Change density (current ${density})`}
+ *         </Button>
+ *     );
+ * };
+ */
+declare function useStore<T>(key: string, defaultValue: T): [T, (value: T | ((value: T) => void), defaultValue?: T) => void];
+declare function useStore<T = undefined>(key: string, defaultValue?: T | undefined): [T | undefined, (value: T | ((value: T) => void), defaultValue?: T) => void];
+export type useStoreResult<T = any> = [
+    T,
+    (value: T | ((value: T) => void), defaultValue?: T) => void
+];
+export { useStore };

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

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import isEqual from 'lodash/isEqual.js';
+import { useEvent } from '../util';
+import { useStoreContext } from './useStoreContext';
+function useStore(key, defaultValue) {
+    const { getItem, setItem, subscribe } = useStoreContext();
+    const [value, setValue] = useState(() => getItem(key, defaultValue));
+    // subscribe to changes on this key, and change the state when they happen
+    useEffect(() => {
+        const storedValue = getItem(key, defaultValue);
+        if (!isEqual(value, storedValue)) {
+            setValue(storedValue);
+        }
+        const unsubscribe = subscribe(key, newValue => {
+            setValue(typeof newValue === 'undefined' ? defaultValue : newValue);
+        });
+        return () => unsubscribe();
+    }, [key, subscribe, defaultValue, getItem, value]);
+    const set = useEvent((valueParam, runtimeDefaultValue) => {
+        const newValue = typeof valueParam === 'function' ? valueParam(value) : valueParam;
+        // we only set the value in the Store;
+        // the value in the local state will be updated
+        // by the useEffect during the next render
+        setItem(key, typeof newValue === 'undefined'
+            ? typeof runtimeDefaultValue === 'undefined'
+                ? defaultValue
+                : runtimeDefaultValue
+            : newValue);
+    });
+    return [value, set];
+}
+export { useStore };

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

@@ -0,0 +1,4 @@
+/**
+ * Get the Store stored in the StoreContext
+ */
+export declare const useStoreContext: () => import("@strato-admin/core").Store;

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

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { StoreContext } from './StoreContext';
+/**
+ * Get the Store stored in the StoreContext
+ */
+export const useStoreContext = () => useContext(StoreContext);

package/dist/ra-core/src/test-ui/Admin.d.ts

@@ -0,0 +1,2 @@
+import { CoreAdminProps } from '../core/CoreAdmin';
+export declare const Admin: (props: CoreAdminProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ra-core/src/test-ui/Admin.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CoreAdmin } from '../core/CoreAdmin';
+import { Layout } from './Layout';
+import { defaultI18nProvider } from './defaultI18nProvider';
+export const Admin = (props) => {
+    const { layout = Layout } = props;
+    return (_jsx(CoreAdmin, { i18nProvider: defaultI18nProvider, layout: layout, ...props }));
+};

package/dist/ra-core/src/test-ui/ArrayInput.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { InputProps } from '../form/useInput';
+export declare const ArrayInput: (props: ArrayInputProps) => import("react/jsx-runtime").JSX.Element;
+export interface ArrayInputProps extends Omit<InputProps, 'disabled' | 'readOnly'> {
+    className?: string;
+    children: React.ReactNode;
+    isFetching?: boolean;
+    isLoading?: boolean;
+    isPending?: boolean;
+}

package/dist/ra-core/src/test-ui/ArrayInput.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isRequired } from '../form/validation/validate';
+import { FieldTitle } from '../util/FieldTitle';
+import { ArrayInputBase } from '../controller/input/ArrayInputBase';
+export const ArrayInput = (props) => {
+    const { label, children, resource: resourceFromProps, source: arraySource, validate, } = props;
+    return (_jsxs("div", { children: [_jsx("div", { children: _jsx(FieldTitle, { label: label, source: arraySource, resource: resourceFromProps, isRequired: isRequired(validate) }) }), _jsx(ArrayInputBase, { ...props, children: children })] }));
+};

package/dist/ra-core/src/test-ui/AutocompleteArrayInput.d.ts

@@ -0,0 +1,5 @@
+import type { InputProps } from '../form/useInput';
+import type { ChoicesProps } from '../form/choices/useChoices';
+export declare const AutocompleteArrayInput: (props: Partial<InputProps> & Partial<ChoicesProps> & {
+    multiple?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/ra-core/src/test-ui/AutocompleteArrayInput.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AutocompleteInput } from './AutocompleteInput';
+export const AutocompleteArrayInput = (props) => {
+    return _jsx(AutocompleteInput, { ...props, multiple: true });
+};

package/dist/ra-core/src/test-ui/AutocompleteInput.d.ts

@@ -0,0 +1,5 @@
+import { type InputProps } from '../form/useInput';
+import { type ChoicesProps } from '../form/choices/useChoices';
+export declare const AutocompleteInput: (props: Partial<InputProps> & Partial<ChoicesProps> & {
+    multiple?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/ra-core/src/test-ui/AutocompleteInput.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInput } from '../form/useInput';
+import { useChoices } from '../form/choices/useChoices';
+import { useChoicesContext } from '../form/choices/useChoicesContext';
+import { isRequired } from '../form/validation/validate';
+import { FieldTitle } from '../util/FieldTitle';
+export const AutocompleteInput = (props) => {
+    const { allChoices, source, setFilters, filterValues } = useChoicesContext(props);
+    const { getChoiceText } = useChoices(props);
+    const { field, fieldState } = useInput({ source, ...props });
+    return (_jsxs("div", { children: [_jsx("div", { children: _jsx(FieldTitle, { label: props.label, source: props.source, resource: props.resource, isRequired: isRequired(props.validate) }) }), _jsx("input", { type: "text", value: filterValues['q'], onChange: e => setFilters({ ...filterValues, q: e.target.value }) }), _jsx("button", { type: "button", onClick: event => {
+                    event.preventDefault();
+                    field.onChange([]);
+                }, children: "Clear value" }), _jsx("ul", { children: allChoices?.map(choice => (_jsx("li", { children: _jsxs("label", { children: [_jsx("input", { name: field.name, type: props.multiple ? 'checkbox' : 'radio', value: choice.id, onChange: event => {
+                                    const newValue = event.target.checked
+                                        ? props.multiple
+                                            ? [...field.value, choice.id]
+                                            : choice.id
+                                        : props.multiple
+                                            ? field.value.filter((v) => v !== choice.id)
+                                            : null;
+                                    field.onChange(newValue);
+                                }, checked: props.multiple
+                                    ? field.value.includes(choice.id)
+                                    : // eslint-disable-next-line eqeqeq
+                                        field.value == choice.id, "aria-describedby": fieldState.error
+                                    ? `error-${props.source}`
+                                    : undefined }), getChoiceText(choice)] }) }, choice.id))) }), fieldState.error ? (_jsx("p", { id: `error-${props.source}`, style: { color: 'red' }, children: fieldState.error.message })) : null] }));
+};

package/dist/ra-core/src/test-ui/BooleanInput.d.ts

@@ -0,0 +1,2 @@
+import { type InputProps } from '../form/useInput';
+export declare const BooleanInput: (props: InputProps) => import("react/jsx-runtime").JSX.Element;