@dashadmin/dash-admin-state 1.3.25 → 1.3.26

package/src/hooks/useLocalStorage.tsx

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useState, useMemo } from 'react';
+import { dashStorage } from 'dash-utils';
+const isBrowser = typeof window !== 'undefined';
+
+const isLocalstorageAvailable = () => {
+	if (!isBrowser) {
+		return false;
+	}
+	const test = `test-${Date.now()}`;
+	try {
+		dashStorage.setItem(test, test);
+		dashStorage.removeItem(test);
+		return true;
+	} catch (e) {
+		return false;
+	}
+};
+
+// React hook
+const useLocalStorage = (key, initialValue = '') => {
+	const available = isLocalstorageAvailable();
+	const getValueFromLocalstorage = useCallback(() => {
+		try {
+			if (!available) {
+				return initialValue;
+			}
+			const item = dashStorage.getItem(key);
+			return item ? JSON.parse(item) : initialValue;
+		} catch (error) {
+			return initialValue;
+		}
+	}, [available, initialValue, key]);
+
+	const [storedValue, setStoredValue] = useState(getValueFromLocalstorage());
+
+	useEffect(() => {
+		const value = getValueFromLocalstorage();
+		setStoredValue(value);
+	}, [available, getValueFromLocalstorage]);
+
+	// Listen to localstorage change to apply it
+	const changeHandler = useCallback(
+		(e) => {
+			const { key: changeKey, newValue } = e;
+			if (key === changeKey) {
+				setStoredValue(JSON.parse(newValue));
+			}
+		},
+		[key],
+	);
+
+	// Listen changes
+	useEffect(() => {
+		if (available) {
+			window.addEventListener('storage', changeHandler);
+			return () => {
+				window.removeEventListener('storage', changeHandler);
+			};
+		}
+	}, [available]); // eslint-disable-line react-hooks/exhaustive-deps
+
+	// Build the output
+	return useMemo(() => {
+		const setValue = (value) => {
+			if (!available) {
+				return false;
+			}
+			const valueToStore =
+				value instanceof Function ? value(storedValue) : value;
+			if (valueToStore !== storedValue) {
+				setStoredValue(valueToStore);
+				window.dashStorage.setItem(key, JSON.stringify(valueToStore));
+			}
+		};
+		return [storedValue, setValue];
+	}, [storedValue, available, key]);
+};
+
+export default useLocalStorage;

package/src/index.tsx

@@ -0,0 +1,34 @@
+export { default as DASHStoreConfig } from './redux/store/index';
+export { createRootReducer as DASHCreateRootReducer } from './redux/reducers/index';
+
+export { default as DASH_THEME_SETTINGS } from './DefaultThemeSettings';
+
+export type { default as IAuthState } from './redux/interfaces/IAuthState';
+export type { default as ICommonState } from './redux/interfaces/ICommonState';
+export type { default as ISettingsState } from './redux/interfaces/ISettings';
+export type { default as IPageState, IBreadcrumbItem } from './redux/interfaces/IPage';
+export type { default as IDASHAppState } from './redux/interfaces/IDASHAppState';
+export type { default as IComponentDataState } from './redux/interfaces/IComponentData'; // Add this line
+
+export { default as defaultAuth } from './defaults/defaultAuth';
+export { default as defaultCommon } from './defaults/defaultCommon';
+export { default as defaultFormState } from './defaults/defaultFormState';
+export { default as defaultPageSettings } from './defaults/defaultPage';
+export { default as defaultSettings } from './defaults/defaultSettings';
+
+// Export all optimized hooks
+export {
+  useLayoutState,
+  useAuthState,
+  useSettingsState,
+  useCommonState,
+  usePageState,
+  useResourcesState,
+  useLogoSettings,
+  usePanelSettings,
+  useThemeState,
+  useNavigationState
+} from './hooks/DashAdminStateSelectors';
+
+export * as DASH_REDUX_ACTIONS from './redux/actions';
+export * from './redux/ReduxStoreAccesor';

package/src/redux/ReduxStoreAccesor.tsx

@@ -0,0 +1,18 @@
+// Create this new file to access the Redux store
+let store: any = null;
+
+export const setReduxStore = (reduxStore: any) => {
+  store = reduxStore;
+};
+
+export const getReduxStore = () => {
+  if (!store) {
+    throw new Error('Redux store not initialized. Call setReduxStore first.');
+  }
+  return store;
+};
+
+export const dispatchToRedux = (action: any) => {
+  const reduxStore = getReduxStore();
+  return reduxStore.dispatch(action);
+};

package/src/redux/actions/ActionTypes.tsx

@@ -0,0 +1,47 @@
+export const SET_FORM_DATA = 'SET_FORM_DATA';
+export const CLEAR_FORM_DATA = 'CLEAR_FORM_DATA';
+
+export const SET_RESOURCES = 'SET_RESOURCES';
+export const APPEND_RESOURCES = 'APPEND_RESOURCES';
+export const SET_HEADER_COMPONENTS = 'SET_HEADER_COMPONENTS';
+export const SET_PANEL_SETTINGS = 'SET_PANEL_COMPONENTS';
+
+export const TOGGLE_COLLAPSED_NAV = 'TOGGLE_COLLAPSE_MENU';
+export const WINDOW_WIDTH = 'WINDOW-WIDTH';
+export const UPDATE_THEME_SETTINGS = 'UPDATE_THEME_SETTINGS';
+export const CONTENT_WIDTH = 'CONTENT-WIDTH';
+export const CONTENT_HEIGHT = 'CONTENT-HEIGHT';
+export const WINDOW_HEIGHT = 'WINDOW-HEIGHT';
+export const SWITCH_LANGUAGE = 'SWITCH-LANGUAGE';
+export const SWITCH_THEME_TYPE = 'SWITCH_THEME_TYPE';
+export const UPDATE_PAGE = 'UPDATE_PAGE';
+
+export const FETCH_START = 'fetch_start';
+export const FETCH_SUCCESS = 'fetch_success';
+export const FETCH_ERROR = 'fetch_error';
+export const SHOW_MESSAGE = 'SHOW_MESSAGE';
+export const HIDE_MESSAGE = 'HIDE_MESSAGE';
+export const ON_SHOW_LOADER = 'ON_SHOW_LOADER';
+export const ON_HIDE_LOADER = 'ON_HIDE_LOADER';
+
+export const LOADING = 'LOADING';
+
+export const SIGNUP_USER = 'SIGNUP_USER';
+export const SIGNUP_USER_SUCCESS = 'SIGNUP_USER_SUCCESS';
+export const SIGNIN_GOOGLE_USER = 'SIGNIN_GOOGLE_USER';
+export const SIGNIN_GOOGLE_USER_SUCCESS = 'SIGNIN_GOOGLE_USER_SUCCESS';
+export const SIGNIN_FACEBOOK_USER = 'SIGNIN_FACEBOOK_USER';
+export const SIGNIN_FACEBOOK_USER_SUCCESS = 'SIGNIN_FACEBOOK_USER_SUCCESS';
+export const SIGNIN_TWITTER_USER = 'SIGNIN_TWITTER_USER';
+export const SIGNIN_TWITTER_USER_SUCCESS = 'SIGNIN_TWITTER_USER_SUCCESS';
+export const SIGNIN_GITHUB_USER = 'SIGNIN_GITHUB_USER';
+export const SIGNIN_GITHUB_USER_SUCCESS = 'signin_github_user_success';
+export const SIGNIN_USER = 'SIGNIN_USER';
+export const SIGNIN_USER_SUCCESS = 'SIGNIN_USER_SUCCESS';
+export const SIGNOUT_USER = 'SIGNOUT_USER';
+export const SIGNOUT_USER_SUCCESS = 'SIGNOUT_USER_SUCCESS';
+export const INIT_URL = 'INIT_URL';
+
+export const TOGGLE_NAV_EXPANDED = 'TOGGLE_NAV_EXPANDED';
+export const SET_NAV_EXPANDED = 'SET_NAV_EXPANDED';
+export const SET_NAV_SIZE = 'SET_NAV_SIZE';

package/src/redux/actions/Auth.tsx

@@ -0,0 +1,5 @@
+import IAuthState from '../interfaces/IAuthState';
+
+export function updateAuth(type:any,auth: Partial<IAuthState<any, any>>) {
+  return { type: type, payload: auth };
+}

package/src/redux/actions/Common.tsx

@@ -0,0 +1,51 @@
+import { FC, JSX } from 'react';
+import {
+  LOADING,
+  SET_HEADER_COMPONENTS,
+  SET_NAV_EXPANDED,
+  SET_NAV_SIZE,
+  SET_PANEL_SETTINGS,
+} from './ActionTypes';
+
+export function loading(loading: boolean) {
+  return { type: LOADING, loading };
+}
+
+export const setComponentState = (componentId: string, state: any) => {
+  return {
+    type: 'SET_COMPONENT_STATE',
+    componentId,
+    state,
+  };
+};
+
+export const unsetComponentState = (componentId: string) => ({
+  type: 'UNSET_COMPONENT_STATE',
+  componentId,
+});
+
+export const setHeaderComponent = (headerToolBar: FC, headerToolBarReplace?: boolean) => {
+  return {
+    type: SET_HEADER_COMPONENTS,
+    headerToolBar,
+    headerToolBarReplace: headerToolBarReplace ?? false,
+  };
+};
+
+export const setPanelSettings = (panelSettings: any) => {
+  return {
+    type: SET_PANEL_SETTINGS,
+    panelSettings,
+  };
+};
+
+
+export const setNavExpanded = (navExpanded: boolean) => ({
+  type: SET_NAV_EXPANDED,
+  payload: navExpanded,
+});
+
+export const setNavSize = (navSize: "large" | "small") => ({
+  type: SET_NAV_SIZE,
+  payload: navSize,
+});

package/src/redux/actions/ComponentData.tsx

@@ -0,0 +1,78 @@
+// ComponentData Actions
+export const SET_COMPONENT_DATA = 'SET_COMPONENT_DATA';
+export const CLEAR_COMPONENT_DATA = 'CLEAR_COMPONENT_DATA';
+export const REMOVE_COMPONENT_DATA_KEY = 'REMOVE_COMPONENT_DATA_KEY';
+export const MERGE_COMPONENT_DATA = 'MERGE_COMPONENT_DATA';
+
+export interface ISetComponentDataAction {
+  type: typeof SET_COMPONENT_DATA;
+  payload: {
+    key: string;
+    data: any;
+  };
+}
+
+export interface IClearComponentDataAction {
+  type: typeof CLEAR_COMPONENT_DATA;
+}
+
+export interface IRemoveComponentDataKeyAction {
+  type: typeof REMOVE_COMPONENT_DATA_KEY;
+  payload: {
+    key: string;
+  };
+}
+
+export interface IMergeComponentDataAction {
+  type: typeof MERGE_COMPONENT_DATA;
+  payload: {
+    key: string;
+    data: any;
+  };
+}
+
+export type ComponentDataActionTypes =
+  | ISetComponentDataAction
+  | IClearComponentDataAction
+  | IRemoveComponentDataKeyAction
+  | IMergeComponentDataAction;
+
+/**
+ * Set component data for a specific key
+ * @param key - The component key (e.g., 'tab.products.list')
+ * @param data - The data to store
+ */
+export const setComponentData = (key: string, data: any) => ({
+  type: SET_COMPONENT_DATA,
+  payload: { key, data }
+});
+
+/**
+ * Merge data with existing component data for a specific key
+ * @param key - The component key
+ * @param data - The data to merge
+ */
+export const mergeComponentData = (key: string, data: any): IMergeComponentDataAction => ({
+  type: MERGE_COMPONENT_DATA,
+  payload: { key, data }
+});
+
+/**
+ * Remove a specific component data key
+ * @param key - The component key to remove
+ */
+export const removeComponentDataKey = (key: string): IRemoveComponentDataKeyAction => ({
+  type: REMOVE_COMPONENT_DATA_KEY,
+  payload: { key }
+});
+
+/**
+ * Clear all component data
+ */
+export const clearComponentData = (): IClearComponentDataAction => ({
+  type: CLEAR_COMPONENT_DATA
+});
+
+// Convenience action creators for common patterns
+export const setCustomData = setComponentData; // Alias for backward compatibility
+export const clearCustomData = clearComponentData; // Alias for backward compatibility

package/src/redux/actions/Menu.tsx

@@ -0,0 +1,4 @@
+// Add these imports at the top
+import { setNavExpanded, toggleNavExpanded } from '../reducers/Menu';
+
+export { setNavExpanded, toggleNavExpanded };

package/src/redux/actions/Page.tsx

@@ -0,0 +1,6 @@
+import IPage from '../interfaces/IPage';
+import { ACTION_UPDATE_PAGE } from '../reducers/Page';
+
+export function updatePage(page: IPage) {
+	return { type: ACTION_UPDATE_PAGE, payload: page };
+}

package/src/redux/actions/Resources.tsx

@@ -0,0 +1,19 @@
+import { SET_RESOURCES, APPEND_RESOURCES } from './ActionTypes';
+
+export function setResources(resources) {
+	return (dispatch:any) => {
+		dispatch({
+			type: SET_RESOURCES,
+			payload: resources,
+		});
+	};
+}
+
+export function appendResources(resources) {
+	return (dispatch:any) => {
+		dispatch({
+			type: APPEND_RESOURCES,
+			payload: resources,
+		});
+	};
+}

package/src/redux/actions/Setting.tsx

@@ -0,0 +1,91 @@
+import DefaultThemeSettings from '../../DefaultThemeSettings';
+import {
+	CONTENT_HEIGHT,
+	CONTENT_WIDTH,
+	UPDATE_THEME_SETTINGS,
+	SWITCH_LANGUAGE,
+	WINDOW_WIDTH,
+} from './ActionTypes';
+
+import { dashStorage } from 'dash-utils';
+
+export function toggleThemeType(themeType) {
+  console.log("dash theme type", themeType)
+  //document.documentElement.setAttribute('data-theme', themeType)
+  dashStorage.setItem('theme', themeType)
+  //return { type: DefaultThemeSettings.THEME_TYPE, themeType };
+  return { type: DefaultThemeSettings.THEME_TYPE, themeType }
+}
+
+export function updateWindowWidth(width) {
+	return (dispatch) => {
+		dispatch({ type: WINDOW_WIDTH, width });
+	};
+}
+
+export function updateContentWidth(width) {
+	return (dispatch) => {
+		dispatch({ type: CONTENT_WIDTH, width });
+	};
+}
+
+export function updateContentHeight(height) {
+	return (dispatch) => {
+		dispatch({ type: CONTENT_HEIGHT, height });
+	};
+}
+
+export function setThemeType(themeType) {
+	return (dispatch) => {
+		dispatch({ type: DefaultThemeSettings.THEME_TYPE, themeType });
+	};
+}
+
+export function setThemeColor(themeColor) {
+	return (dispatch) => {
+		dispatch({ type: DefaultThemeSettings.THEME_COLOR, themeColor });
+	};
+}
+
+export function setDirectionRTL(rtlStatus) {
+	return (dispatch) => {
+		dispatch({ type: DefaultThemeSettings.UPDATE_RTL_STATUS, rtlStatus });
+	};
+}
+
+export function onNavStyleChange(navStyle) {
+	return (dispatch) => {
+		dispatch({ type: DefaultThemeSettings.NAV_STYLE, navStyle });
+	};
+}
+
+export function onLayoutTypeChange(layoutType) {
+	return (dispatch) => {
+		dispatch({ type: DefaultThemeSettings.LAYOUT_TYPE, layoutType });
+	};
+}
+
+export function switchLanguage(locale) {
+	return (dispatch) => {
+		dispatch({
+			type: SWITCH_LANGUAGE,
+			payload: locale,
+		});
+	};
+}
+
+export function setSidebarProps(width, expandedWidth) {
+	return (dispatch) => {
+		dispatch({
+			type: UPDATE_THEME_SETTINGS,
+			payload: { width: width, expandedWidth: expandedWidth },
+		});
+	};
+}
+
+export function updateThemeSettings(settings) {
+	return {
+		type: UPDATE_THEME_SETTINGS,
+		payload: settings,
+	};
+}

package/src/redux/actions/index.tsx

@@ -0,0 +1,7 @@
+export * from './Common';
+export * from './Setting';
+export * from './Auth';
+export * from './Page';
+export * from './Resources';
+//export * from './Menu';
+export * from './ComponentData';

package/src/redux/interfaces/IAuthState.tsx

@@ -0,0 +1,7 @@
+export type IAuthState<U, A> = {
+	authenticated: boolean;
+	user: U;
+	auth: A;
+};
+
+export default IAuthState;

package/src/redux/interfaces/ICommonState.tsx

@@ -0,0 +1,25 @@
+import { FC, JSX } from "react";
+
+export interface IComponentState {
+	[x: string]: any;
+}
+
+export interface ICommonState {
+  appPath: string;
+	error: string;
+	loading: boolean;
+	message: any;
+	navExpanded: boolean;
+  navSize: "large" | "small";//string; //"large" | "small";
+	width: number | string | any;
+	height: number | string | any;
+	content_width?: number;
+	content_height?: number;
+	pathname: string;
+	componentsState?: {[x: string]: any}; // Changed from array to object
+	headerToolBar?: FC;
+	headerToolBarReplace?: boolean;
+	panelSettings?: {[x: string]: any};
+}
+
+export default ICommonState;

package/src/redux/interfaces/IComponentData.tsx

@@ -0,0 +1,32 @@
+export default interface IComponentDataState {
+  [key: string]: any;
+}
+
+// Helper type for strongly typed component data access
+export interface ITypedComponentData<T = any> {
+  data: T;
+  timestamp?: number;
+  version?: string;
+}
+
+/*
+// Common component data patterns
+export interface ITabProductsData {
+  products: any[];
+  filters: Record<string, any>;
+  pagination: {
+    page: number;
+    perPage: number;
+    total: number;
+  };
+  lastFetch: number;
+}
+
+export interface ITabsListData {
+  tabs: any[];
+  selectedTabs: string[];
+  statusFilter: string;
+  sortOrder: 'asc' | 'desc';
+  viewMode: 'grid' | 'list';
+}
+*/

package/src/redux/interfaces/IDASHAppState.tsx

@@ -0,0 +1,53 @@
+import IAuthState from './IAuthState';
+import ICommonState from './ICommonState';
+import IPageState from './IPage';
+import ISettingsState from './ISettings';
+import IFormDataState from './IFormDataState';
+import { IMenuState } from '../reducers/Menu';
+import IComponentDataState from './IComponentData';
+/**
+ * Represents the overall state of the DASH application.
+ *
+ * @template U - The type of the user object.
+ * @template A - The type of the authentication object.
+ * @template R - The type of the resource items.
+ */
+export interface IDASHAppState<U, A, R> {
+  /**
+  * The state of the current page in the DASH application.
+  */
+  page: IPageState;
+  /**
+  * The state of the application settings for the DASH application.
+  */
+  settings: ISettingsState;
+  /**
+  * The state of the authentication for the DASH application.
+  */
+  auth: IAuthState<U, A>;
+  /**
+  * The common state of the DASH application.
+  */
+  common: ICommonState;
+  /**
+  * IDashAutoResourceConfig or IDashAutoResourceConfig extended class, The resources property of the IDASHAppState interface, which contains an array of resource items of type R.
+  */
+  resources: { items: R[] };
+  /**
+   * The state of the current dirty form in the DASH application.
+   */
+  formData: IFormDataState;
+
+  /**
+   * The menu state of the DASH application.
+  */
+  menu?: IMenuState;
+
+  /**
+   * Generic store for DASH component.
+  */
+  componentData: IComponentDataState;
+
+}
+
+export default IDASHAppState;

package/src/redux/interfaces/IDashResourceGroupsIcons.tsx

@@ -0,0 +1,5 @@
+import { JSX } from "react";
+
+export interface IDASHResourceGroupsIcons {
+  [x: string]: JSX.Element;
+}

package/src/redux/interfaces/IFormDataState.tsx

@@ -0,0 +1,6 @@
+
+export interface IFormDataState {
+  [x:string]: string
+}
+
+export default IFormDataState;

package/src/redux/interfaces/IPage.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+/**
+ * Represents a single breadcrumb item in the navigation trail
+ */
+export interface IBreadcrumbItem {
+	/** Display label for the breadcrumb */
+	label: string;
+	/** Navigation path (URL) for the breadcrumb. If undefined, item is not clickable */
+	path?: string;
+	/** Optional icon to display before the label */
+	icon?: ReactNode;
+	/** Whether this is the current/active breadcrumb */
+	isActive?: boolean;
+	/** Optional custom data for the breadcrumb */
+	data?: Record<string, any>;
+}
+
+export interface IPageState {
+	title?: string;
+	icon?: React.ReactNode;
+	subTitle?: string;
+	/** Breadcrumb navigation trail */
+	breadcrumbs?: IBreadcrumbItem[];
+}
+
+export default IPageState;

package/src/redux/interfaces/ISettings.tsx

@@ -0,0 +1,27 @@
+import { IDASHResourceGroupsIcons } from "./IDashResourceGroupsIcons";
+
+export interface ILocale {
+    languageId: string;
+		locale: string;
+		name: string;
+		icon: string;
+}
+// import IDashAutoAdminResourceConfig from "@dash-auto-admin/interfaces/IDashAutoAdminResourceConfig";
+export interface ISettingsState {
+	loading: boolean;
+	navStyle: any;
+	layoutType: string;
+	themeType: string | any;
+	themeColor: string;
+  layoutSettings?: {[x: string]: any};
+  groupIcons?: IDASHResourceGroupsIcons;
+	isDirectionRTL: boolean;
+	// resources: IDashAutoAdminResourceConfig[]
+	locale: string;
+  availableLocales: ILocale[];
+  translations: {[locale: string]: {[key: string]: string}};
+	//sidebarExpandedWidth?: number;
+	//sidebarCollapsedWidth?: number;
+}
+
+export default ISettingsState;

package/src/redux/reducers/Auth.tsx

@@ -0,0 +1,38 @@
+import IAuthState from "../interfaces/IAuthState";
+
+export const ACTION_UPDATE_AUTH = 'ACTION_UPDATE_AUTH';
+export const ACTION_UPDATE_AUTH_AUTH = 'ACTION_UPDATE_AUTH_AUTH';
+export const ACTION_UPDATE_AUTH_USER = 'ACTION_UPDATE_AUTH_USER';
+export const ACTION_UPDATE_AUTH_AUTHENTICATED = 'ACTION_UPDATE_AUTH_AUTHENTICATED';
+
+const AuthReducer = (state: IAuthState<any, any> = {
+  authenticated: false,
+  user: undefined,
+  auth: undefined
+}, action) => {
+  switch (action.type) {
+    case ACTION_UPDATE_AUTH:
+      return {
+        ...state,
+        ...action.payload,
+      };
+     case ACTION_UPDATE_AUTH_AUTH:
+      return {
+        ...state,
+        auth: action.payload.auth,
+      };
+    case ACTION_UPDATE_AUTH_USER:
+      return {
+        ...state,
+        user: action.payload.user,
+      };
+    case ACTION_UPDATE_AUTH_AUTHENTICATED:
+      return {
+        ...state,
+        authenticated: action.payload.authenticated,
+      };
+    default:
+      return state;
+  }
+};
+export default AuthReducer;