@headless-adminapp/app 0.0.8-0.0.9-alpha.1.0

package/src/dialog/context.ts

@@ -0,0 +1,14 @@
+import {
+  BasicDialogProps,
+  DialogOptions,
+} from '@headless-adminapp/core/experience/dialog';
+
+import { createContext } from '../mutable/context';
+
+export type DialogItemState = BasicDialogProps & DialogOptions;
+
+export interface DialogContextState {
+  items: DialogItemState[];
+}
+
+export const DialogContext = createContext<DialogContextState>();

package/src/dialog/hooks/index.ts

@@ -0,0 +1,8 @@
+export * from './useCloseDialog';
+export * from './useDialogItem';
+export * from './useDialogItems';
+export * from './useOpenAlertDialog';
+export * from './useOpenConfirmDialog';
+export * from './useOpenDialog';
+export * from './useOpenErrorDialog';
+export * from './useOpenPromptDialog';

package/src/dialog/hooks/useCloseDialog.ts

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+
+import { useContextSetValue } from '../../mutable/context';
+import { DialogContext } from '../context';
+
+export function useCloseDialog() {
+  const setValue = useContextSetValue(DialogContext);
+
+  const closeDialog = useCallback(
+    (id: string) => {
+      setValue((state) => {
+        return {
+          items: state.items.map((item) => {
+            if (item.id === id) {
+              return { ...item, isOpen: false };
+            }
+
+            return item;
+          }),
+        };
+      });
+
+      // Simulate a delay to show the dialog closing animation
+      setTimeout(() => {
+        setValue((state) => {
+          return {
+            items: state.items.filter((item) => item.id !== id),
+          };
+        });
+      }, 1000);
+    },
+    [setValue]
+  );
+
+  return closeDialog;
+}

package/src/dialog/hooks/useDialogItem.ts

@@ -0,0 +1,8 @@
+import { useContextSelector } from '../../mutable/context';
+import { DialogContext } from '../context';
+
+export function useDialogItem(id: string) {
+  return useContextSelector(DialogContext, (state) =>
+    state.items.find((item) => item.id === id)
+  );
+}

package/src/dialog/hooks/useDialogItems.ts

@@ -0,0 +1,6 @@
+import { useContextSelector } from '../../mutable/context';
+import { DialogContext } from '../context';
+
+export function useDialogItems() {
+  return useContextSelector(DialogContext, (state) => state.items);
+}

package/src/dialog/hooks/useOpenAlertDialog.ts

@@ -0,0 +1,30 @@
+import { AlertDialogOptions } from '@headless-adminapp/core/experience/dialog';
+import { useCallback } from 'react';
+
+import { useOpenDialog } from './useOpenDialog';
+
+export function useOpenAlertDialog() {
+  const openDialog = useOpenDialog();
+
+  const openAlertDialog = useCallback(
+    (options: Omit<AlertDialogOptions, 'type' | 'onConfirm' | 'onClose'>) => {
+      return new Promise<void>((resolve) => {
+        const { close } = openDialog({
+          type: 'alert',
+          ...options,
+          onDismiss: () => {
+            close();
+            resolve();
+          },
+          onConfirm: () => {
+            close();
+            resolve();
+          },
+        });
+      });
+    },
+    [openDialog]
+  );
+
+  return openAlertDialog;
+}

package/src/dialog/hooks/useOpenConfirmDialog.ts

@@ -0,0 +1,45 @@
+import {
+  ConfirmDialogOptions,
+  ConfirmResult,
+} from '@headless-adminapp/core/experience/dialog';
+import { useCallback } from 'react';
+
+import { useOpenDialog } from './useOpenDialog';
+
+export function useOpenConfirmDialog() {
+  const openDialog = useOpenDialog();
+
+  const openConfirmDialog = useCallback(
+    (
+      options: Omit<
+        ConfirmDialogOptions,
+        'type' | 'onConfirm' | 'onDismiss' | 'onCancel'
+      >
+    ) => {
+      return new Promise<ConfirmResult | null>((resolve) => {
+        const { close } = openDialog({
+          type: 'confirm',
+          ...options,
+          onDismiss: () => {
+            if (!options.allowDismiss) {
+              return;
+            }
+            close();
+            resolve(null);
+          },
+          onConfirm: () => {
+            close();
+            resolve({ confirmed: true });
+          },
+          onCancel: () => {
+            close();
+            resolve({ confirmed: false });
+          },
+        });
+      });
+    },
+    [openDialog]
+  );
+
+  return openConfirmDialog;
+}

package/src/dialog/hooks/useOpenDialog.ts

@@ -0,0 +1,39 @@
+import { DialogOptions } from '@headless-adminapp/core/experience/dialog';
+import { useCallback } from 'react';
+
+import { useContextSetValue } from '../../mutable/context';
+import { DialogContext, DialogItemState } from '../context';
+import { useCloseDialog } from './useCloseDialog';
+
+function randomId() {
+  return Math.random().toString(36).substring(2);
+}
+
+export function useOpenDialog() {
+  const setValue = useContextSetValue(DialogContext);
+  const closeDialog = useCloseDialog();
+
+  const openDialog = useCallback(
+    (options: DialogOptions) => {
+      const id = randomId();
+
+      setValue((state) => {
+        return {
+          items: [
+            ...state.items,
+            {
+              id,
+              isOpen: true,
+              ...options,
+            } as DialogItemState,
+          ],
+        };
+      });
+
+      return { id, close: () => closeDialog(id) };
+    },
+    [setValue, closeDialog]
+  );
+
+  return openDialog;
+}

package/src/dialog/hooks/useOpenErrorDialog.ts

@@ -0,0 +1,26 @@
+import { AlertDialogOptions } from '@headless-adminapp/core/experience/dialog';
+import { useCallback } from 'react';
+
+import { useOpenDialog } from './useOpenDialog';
+
+export function useOpenErrorDialog() {
+  const openDialog = useOpenDialog();
+
+  const openErrorDialog = useCallback(
+    (options: Omit<AlertDialogOptions, 'type' | 'onConfirm' | 'onClose'>) => {
+      const { close } = openDialog({
+        type: 'error',
+        ...options,
+        onDismiss: () => {
+          close();
+        },
+        onConfirm: () => {
+          close();
+        },
+      });
+    },
+    [openDialog]
+  );
+
+  return openErrorDialog;
+}

package/src/dialog/hooks/useOpenPromptDialog.ts

@@ -0,0 +1,46 @@
+import { PromptDialogOptions } from '@headless-adminapp/core/experience/dialog';
+import {
+  InferredSchemaType,
+  SchemaAttributes,
+} from '@headless-adminapp/core/schema';
+import { useCallback } from 'react';
+
+import { useOpenDialog } from './useOpenDialog';
+
+export function useOpenPromptDialog() {
+  const openDialog = useOpenDialog();
+
+  const openPromptDialog = useCallback(
+    <SA extends SchemaAttributes = SchemaAttributes>(
+      options: Omit<
+        PromptDialogOptions<SA>,
+        'type' | 'onConfirm' | 'onClose' | 'onCancel'
+      >
+    ) => {
+      return new Promise<InferredSchemaType<SA> | null>((resolve) => {
+        const { close } = openDialog({
+          type: 'prompt',
+          ...options,
+          onDismiss: () => {
+            if (!options.allowDismiss) {
+              return;
+            }
+            close();
+            resolve(null);
+          },
+          onConfirm: (result) => {
+            close();
+            resolve(result as InferredSchemaType<SA>);
+          },
+          onCancel: () => {
+            close();
+            resolve(null);
+          },
+        });
+      });
+    },
+    [openDialog]
+  );
+
+  return openPromptDialog;
+}

package/src/dialog/index.ts

@@ -0,0 +1,7 @@
+export {
+  DialogContext,
+  type DialogContextState,
+  type DialogItemState,
+} from './context';
+export { DialogProvider } from './DialogProvider';
+export * from './hooks';

package/src/form/FormValidationStringContext.ts

@@ -0,0 +1,30 @@
+import { createContext, useContext } from 'react';
+
+export interface FormValidationStringSet {
+  required: string;
+  maxLength: string;
+  minLength: string;
+  invalidFormat: string;
+  invalidEmail: string;
+  invalidPhoneNumber: string;
+  atLeastOneRowRequired: string;
+}
+
+export const defaultFormValidationStrings: FormValidationStringSet = {
+  required: 'Required field must be filled in.',
+  maxLength: 'Maximum length exceeded.',
+  minLength: 'Minimum length not met.',
+  invalidFormat: 'Invalid format.',
+  invalidEmail: 'Invalid email.',
+  invalidPhoneNumber: 'Invalid phone number.',
+  atLeastOneRowRequired: 'At least one row required.',
+};
+
+export const FormValidationStringContext =
+  createContext<FormValidationStringSet>(defaultFormValidationStrings);
+
+export function useFormValidationStrings() {
+  const context = useContext(FormValidationStringContext);
+
+  return context;
+}

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './useDebouncedValue';
+export * from './useElementLayout';
+export * from './useIsMobile';
+export * from './useStorageState';
+export * from './useSystemColorScheme';

package/src/hooks/useDebouncedValue.ts

@@ -0,0 +1,38 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+export function useDebouncedValue<T = any>(
+  value: T,
+  wait: number,
+  options = { leading: false }
+) {
+  const [_value, setValue] = useState(value);
+  const mountedRef = useRef(false);
+  const timeoutRef = useRef<number | null>(null);
+  const cooldownRef = useRef(false);
+
+  const cancel = () => window.clearTimeout(timeoutRef.current!);
+
+  useEffect(() => {
+    if (mountedRef.current) {
+      if (!cooldownRef.current && options.leading) {
+        cooldownRef.current = true;
+        setValue(value);
+      } else {
+        cancel();
+        timeoutRef.current = window.setTimeout(() => {
+          cooldownRef.current = false;
+          setValue(value);
+        }, wait);
+      }
+    }
+  }, [value, options.leading, wait]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return cancel;
+  }, []);
+
+  return [_value, cancel] as const;
+}

package/src/hooks/useElementLayout.ts

@@ -0,0 +1,49 @@
+import { RefObject, useEffect, useState } from 'react';
+
+interface Size {
+  width: number;
+  height: number;
+}
+
+export function useElementSize(
+  elementRef: RefObject<HTMLElement>,
+  interval?: number
+) {
+  const [size, setSize] = useState<Size>({ width: 0, height: 0 });
+
+  useEffect(() => {
+    function updateSize() {
+      if (elementRef.current) {
+        const element = elementRef.current;
+        const rect = element.getBoundingClientRect();
+        setSize((size) => {
+          if (size.width === rect.width && size.height === rect.height) {
+            return size;
+          }
+
+          return { width: rect.width, height: rect.height };
+        });
+      }
+    }
+
+    updateSize();
+
+    let intervalId: NodeJS.Timeout;
+
+    if (interval) {
+      intervalId = setInterval(updateSize, interval);
+    }
+
+    window.addEventListener('resize', updateSize);
+
+    return () => {
+      window.removeEventListener('resize', updateSize);
+
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [elementRef, interval]);
+
+  return size;
+}

package/src/hooks/useIsMobile.ts

@@ -0,0 +1,21 @@
+'use client';
+
+import debounce from 'lodash/debounce';
+import { useLayoutEffect, useState } from 'react';
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useLayoutEffect(() => {
+    const updateSize = (): void => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    window.addEventListener('resize', debounce(updateSize, 250));
+    updateSize();
+
+    return () => window.removeEventListener('resize', updateSize);
+  }, []);
+
+  return isMobile;
+}

package/src/hooks/useStorageState.ts

@@ -0,0 +1,36 @@
+import { Dispatch, SetStateAction, useCallback, useState } from 'react';
+
+function getStorageValue<S>(key: string, store: Storage): S | undefined {
+  const value = store.getItem(key);
+  if (value) {
+    return JSON.parse(value);
+  }
+  return undefined;
+}
+
+function setStorageValue<S>(key: string, value: S, store: Storage): void {
+  store.setItem(key, JSON.stringify(value));
+}
+
+export function useStorageState<S = undefined>(
+  initialState: S,
+  key: string,
+  store: Storage = localStorage
+): [S, Dispatch<SetStateAction<S>>] {
+  const [state, setState] = useState(
+    getStorageValue(key, store) ?? initialState
+  );
+
+  const setStoredState: Dispatch<SetStateAction<S>> = useCallback(
+    (value) => {
+      setState((prevState) => {
+        const finalState = value instanceof Function ? value(prevState) : value;
+        setStorageValue(key, finalState, store);
+        return finalState;
+      });
+    },
+    [key, store]
+  );
+
+  return [state, setStoredState];
+}

package/src/hooks/useSystemColorScheme.ts

@@ -0,0 +1,38 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+const isSystemDarkMode = () => {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  return (
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  );
+};
+
+export function useSystemColorScheme() {
+  const [systemColorScheme, setSystemColorScheme] = useState<'dark' | 'light'>(
+    isSystemDarkMode() ? 'dark' : 'light'
+  );
+
+  useEffect(() => {
+    setSystemColorScheme(isSystemDarkMode() ? 'dark' : 'light');
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setSystemColorScheme(e.matches ? 'dark' : 'light');
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
+
+  return systemColorScheme;
+}

package/src/index.css

@@ -0,0 +1,4 @@
+.hdl-scrollbar.rtl > div {
+  margin-right: 0 !important;
+  margin-left: -15px;
+}

package/src/insights/context.ts

@@ -0,0 +1,5 @@
+import { InsightsState } from '@headless-adminapp/core/experience/insights';
+
+import { createContext } from '../mutable/context';
+
+export const InsightsContext = createContext<InsightsState>();

package/src/locale/context.ts

@@ -0,0 +1,7 @@
+import { createContext, Dispatch, SetStateAction } from 'react';
+
+import { LocaleContextState } from './types';
+
+export const LocaleContext = createContext<
+  [LocaleContextState, Dispatch<SetStateAction<LocaleContextState>>] | null
+>(null);

package/src/locale/index.ts

@@ -0,0 +1,3 @@
+export { LocaleContext } from './context';
+export * from './types';
+export * from './useLocale';

package/src/locale/types.ts

@@ -0,0 +1,3 @@
+import { Locale } from '@headless-adminapp/core/experience/app';
+
+export type LocaleContextState = Locale;

package/src/locale/useLocale.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+
+import { LocaleContext } from './context';
+
+export function useLocale() {
+  const context = useContext(LocaleContext);
+
+  if (!context) {
+    throw new Error('useLocale must be used within a LocaleProvider');
+  }
+
+  return context;
+}

package/src/metadata/MetadataProvider.tsx

@@ -0,0 +1,51 @@
+import {
+  IClientAppStore,
+  ISchemaExperienceStore,
+  ISchemaStore,
+} from '@headless-adminapp/core/store';
+import { FC, PropsWithChildren } from 'react';
+
+import { useCreateContextStore } from '../mutable/context';
+import { MetadataContext, MetadataContextState } from './context';
+
+interface MetadataProviderProps {
+  schemaStore: ISchemaStore;
+  experienceStore: ISchemaExperienceStore;
+  appStore: IClientAppStore;
+}
+
+export const MetadataProvider: FC<PropsWithChildren<MetadataProviderProps>> = ({
+  children,
+  experienceStore,
+  schemaStore,
+  appStore,
+}) => {
+  const contextValue = useCreateContextStore<MetadataContextState>({
+    // schemas: {},
+    // schemaLoading: true,
+    experienceStore,
+    schemaStore,
+    appStore,
+  });
+
+  // const [loading, setLoading] = useState(true);
+
+  // useEffect(() => {
+  //   const schemas = schemaStore.getSchemas();
+  //   contextValue.setValue({
+  //     schemas,
+  //     schemaLoading: false,
+  //   });
+  //   setLoading(false);
+  // }, [contextValue, schemaStore]);
+
+  // if (loading) {
+  //   return null;
+  // }
+
+  return (
+    <MetadataContext.Provider value={contextValue}>
+      {children}
+    </MetadataContext.Provider>
+  );
+};

package/src/metadata/context.ts

@@ -0,0 +1,15 @@
+import {
+  IClientAppStore,
+  ISchemaExperienceStore,
+  ISchemaStore,
+} from '@headless-adminapp/core/store';
+
+import { createContext } from '../mutable/context';
+
+export interface MetadataContextState {
+  appStore: IClientAppStore;
+  schemaStore: ISchemaStore;
+  experienceStore: ISchemaExperienceStore;
+}
+
+export const MetadataContext = createContext<MetadataContextState>();

package/src/metadata/hooks/index.ts

@@ -0,0 +1,8 @@
+export * from './useAppStore';
+export * from './useExperienceStore';
+export * from './useExperienceView';
+export * from './useExperienceViewCommands';
+export * from './useExperienceViewLookup';
+export * from './useExperienceViewSubgridCommands';
+export * from './useMetadata';
+export * from './useSchema';

package/src/metadata/hooks/useAppStore.ts

@@ -0,0 +1,6 @@
+import { useContextSelector } from '../../mutable/context';
+import { MetadataContext } from '../context';
+
+export function useAppStore() {
+  return useContextSelector(MetadataContext, (state) => state.appStore);
+}

package/src/metadata/hooks/useExperienceStore.ts

@@ -0,0 +1,6 @@
+import { useContextSelector } from '../../mutable/context';
+import { MetadataContext } from '../context';
+
+export function useExperienceStore() {
+  return useContextSelector(MetadataContext, (state) => state.experienceStore);
+}

package/src/metadata/hooks/useExperienceView.ts

@@ -0,0 +1,36 @@
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+
+import { useExperienceStore } from './useExperienceStore';
+
+export function useExperienceView(
+  logicalName: string,
+  viewId?: string,
+  associated?: boolean,
+  viewIds?: string[]
+) {
+  const experienceStore = useExperienceStore();
+
+  const { data, isPending } = useQuery({
+    queryKey: [
+      'experience-schema-view',
+      logicalName,
+      viewId,
+      associated,
+      viewIds,
+    ],
+    queryFn: async () => {
+      if (associated) {
+        return experienceStore.getAssociatedView(logicalName, viewId, viewIds);
+      }
+
+      return experienceStore.getPublicView(logicalName, viewId, viewIds);
+    },
+
+    placeholderData: keepPreviousData,
+  });
+
+  return {
+    view: data,
+    isLoadingView: isPending,
+  };
+}