@headless-adminapp/app 0.0.10-alpha.0 → 0.0.14-alpha.0

package/src/dialog/DialogProvider.tsx

@@ -1,20 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-
-import { useCreateContextStore } from '../mutable/context';
-import { DialogContext, DialogContextState } from './context';
-
-interface DialogProviderProps {}
-
-export const DialogProvider: FC<PropsWithChildren<DialogProviderProps>> = ({
-  children,
-}) => {
-  const contextState = useCreateContextStore<DialogContextState>({
-    items: [],
-  });
-
-  return (
-    <DialogContext.Provider value={contextState}>
-      {children}
-    </DialogContext.Provider>
-  );
-};

package/src/dialog/context.ts

@@ -1,14 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

package/src/dialog/hooks/useOpenAlertDialog.ts

@@ -1,30 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

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

package/src/form/FormValidationStringContext.ts

@@ -1,30 +0,0 @@
-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/form/index.ts

@@ -1,6 +0,0 @@
-export {
-  FormValidationStringContext,
-  FormValidationStringSet,
-  defaultFormValidationStrings,
-  useFormValidationStrings,
-} from './FormValidationStringContext';

package/src/hooks/index.ts

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

package/src/hooks/useDebouncedValue.ts

@@ -1,38 +0,0 @@
-'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

@@ -1,49 +0,0 @@
-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

@@ -1,21 +0,0 @@
-'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

@@ -1,36 +0,0 @@
-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

@@ -1,38 +0,0 @@
-'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

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

package/src/insights/context.ts

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

package/src/insights/hooks/index.ts

@@ -1,14 +0,0 @@
-import { InsightsState } from '@headless-adminapp/core/experience/insights';
-import { SchemaAttributes } from '@headless-adminapp/core/schema';
-
-import { useContextSelector } from '../../mutable';
-import { InsightsContext } from '../context';
-
-export function useInsightsState<
-  S extends SchemaAttributes = SchemaAttributes
->() {
-  return useContextSelector(
-    InsightsContext,
-    (state) => state as unknown as InsightsState<S>
-  );
-}

package/src/insights/index.ts

@@ -1,2 +0,0 @@
-export { InsightsContext } from './context';
-export * from './hooks';

package/src/locale/context.ts

@@ -1,7 +0,0 @@
-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

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

package/src/locale/types.ts

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

package/src/locale/useLocale.ts

@@ -1,13 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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