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

package/src/metadata/hooks/useExperienceViewCommands.ts

@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useExperienceStore } from './useExperienceStore';
+
+/** @todo move in different dir */
+export function useExperienceViewCommands(logicalName: string) {
+  const experienceStore = useExperienceStore();
+
+  const { data: commands } = useQuery({
+    queryKey: ['experience-schema-view-commands', logicalName],
+    queryFn: async () => {
+      return experienceStore.getViewCommands(logicalName);
+    },
+    initialData: [],
+  });
+
+  return {
+    commands,
+  };
+}

package/src/metadata/hooks/useExperienceViewLookup.ts

@@ -0,0 +1,33 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useExperienceStore } from './useExperienceStore';
+
+/** @todo move in different dir */
+export function useExperienceViewLookup(
+  logicalName: string,
+  associated?: boolean,
+  viewIds?: string[]
+) {
+  const experienceStore = useExperienceStore();
+
+  const { data: viewLookup } = useQuery({
+    queryKey: [
+      'experience-schema-view-lookup',
+      logicalName,
+      associated,
+      viewIds,
+    ],
+    queryFn: async () => {
+      if (associated) {
+        return experienceStore.getAssociatedViewLookup(logicalName, viewIds);
+      }
+
+      return experienceStore.getPublicViewLookup(logicalName, viewIds);
+    },
+    initialData: [],
+  });
+
+  return {
+    viewLookup,
+  };
+}

package/src/metadata/hooks/useExperienceViewSubgridCommands.ts

@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useExperienceStore } from './useExperienceStore';
+
+/** @todo move in different dir */
+export function useExperienceViewSubgridCommands(logicalName: string) {
+  const experienceStore = useExperienceStore();
+
+  const { data: commands } = useQuery({
+    queryKey: ['experience-schema-view-subgrid-commands', logicalName],
+    queryFn: async () => {
+      return experienceStore.getSubgridCommands(logicalName);
+    },
+    initialData: [],
+  });
+
+  return {
+    commands,
+  };
+}

package/src/metadata/hooks/useMetadata.ts

@@ -0,0 +1,44 @@
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import { useCallback } from 'react';
+
+import { useContextSelector } from '../../mutable/context';
+import { MetadataContext } from '../context';
+
+export function useMetadata() {
+  const schemaStore = useContextSelector(
+    MetadataContext,
+    (state) => state.schemaStore
+  );
+  const appStore = useContextSelector(
+    MetadataContext,
+    (state) => state.appStore
+  );
+  const experienceStore = useContextSelector(
+    MetadataContext,
+    (state) => state.experienceStore
+  );
+  // const schemaLoading = useContextSelector(
+  //   MetadataContext,
+  //   (state) => state.schemaLoading
+  // );
+
+  const schemaLoading = false;
+
+  const schemas = schemaStore.getAllSchema();
+
+  const getSchema = useCallback(
+    <S extends SchemaAttributes = SchemaAttributes>(logicalName: string) => {
+      return schemaStore.getSchema<S>(logicalName);
+    },
+    [schemaStore]
+  );
+
+  return {
+    schemas,
+    schemaLoading,
+    getSchema,
+    schemaStore,
+    appStore,
+    experienceStore,
+  };
+}

package/src/metadata/hooks/useSchema.ts

@@ -0,0 +1,11 @@
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+
+import { useMetadata } from './useMetadata';
+
+export function useSchema<S extends SchemaAttributes = SchemaAttributes>(
+  logicalName: string
+) {
+  const { getSchema } = useMetadata();
+
+  return getSchema<S>(logicalName);
+}

package/src/metadata/index.ts

@@ -0,0 +1,3 @@
+export { MetadataProvider } from './MetadataProvider';
+export { MetadataContext, type MetadataContextState } from './context';
+export * from './hooks';

package/src/mutable/context.ts

@@ -0,0 +1,71 @@
+import {
+  createContext as createReactContext,
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+} from 'react';
+
+import { MutableValue } from './type';
+import { createMutableValue, useMutableValueSelector } from './utils';
+
+export type ContextValue<T> = MutableValue<T>;
+const createContextValue = createMutableValue;
+export const useContextSelectorInternal = useMutableValueSelector;
+
+export function createContext<T>() {
+  const context = createReactContext<ContextValue<T>>(null as any);
+  return context;
+}
+
+export function useCreateContextStore<T>(initialValue: T) {
+  const [state] = useState(() => createContextValue(initialValue));
+  return state;
+}
+
+export function useContextSelector<T, R>(
+  context: React.Context<ContextValue<T>>,
+  selector: (state: T) => R
+) {
+  const contextValue = useContext(context);
+
+  if (!contextValue) {
+    throw new Error('useContextSelector must be used within a Provider');
+  }
+
+  return useContextSelectorInternal(contextValue, selector);
+}
+
+export function useContextSetValue<T>(context: React.Context<ContextValue<T>>) {
+  const contextValue = useContext(context);
+
+  if (!contextValue) {
+    throw new Error('useContextSetValue must be used within a Provider');
+  }
+
+  return contextValue.setValue;
+}
+
+type Setter<T, U extends unknown[]> = (
+  setValue: ContextValue<T>['setValue']
+) => (...args: U) => void;
+
+export function useContextValueSetter<T, U extends unknown[]>(
+  context: React.Context<ContextValue<T>>,
+  setter: Setter<T, U>
+) {
+  const contextValue = useContext(context);
+
+  if (!contextValue) {
+    throw new Error('useContextValueSetter must be used within a Provider');
+  }
+
+  const setterRef = useRef(setter);
+  setterRef.current = setter;
+
+  const setterWrapper = useCallback((...args: U) => {
+    return setterRef.current(contextValue.setValue)(...args);
+  }, []);
+
+  return setterWrapper;
+}

package/src/mutable/index.ts

@@ -0,0 +1,9 @@
+export {
+  createContext,
+  useContextSelector,
+  useContextSetValue,
+  useCreateContextStore,
+  type ContextValue,
+} from './context';
+export { useMutableState, useMutableStateSelector } from './state';
+export * from './type';

package/src/mutable/state.ts

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+import { MutableValue } from './type';
+import { createMutableValue, useMutableValueSelector } from './utils';
+
+export type MutableState<T> = MutableValue<T>;
+export const createMutableState = createMutableValue;
+export const useMutableStateSelector = useMutableValueSelector;
+
+export function useMutableState<T>(initialValue: T, isArray?: boolean) {
+  const [state] = useState(() => createMutableState(initialValue, isArray));
+  return state;
+}

package/src/mutable/type.ts

@@ -0,0 +1,9 @@
+type Listener<T> = (state: T) => void;
+
+export interface MutableValue<T> {
+  value: { current: T };
+  setValue: (value: Partial<T> | ((state: T) => Partial<T>)) => void;
+  listeners: Set<Listener<T>>;
+  addListener: (listener: Listener<T>) => void;
+  removeListener: (listener: Listener<T>) => void;
+}

package/src/mutable/utils.ts

@@ -0,0 +1,80 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { MutableValue } from './type';
+
+export function createMutableValue<T>(
+  initialValue: T,
+  isArray?: boolean
+): MutableValue<T> {
+  let storeValue = {
+    current: initialValue,
+  };
+
+  type StoreListener = (state: T) => void;
+
+  const listeners = new Set<StoreListener>();
+
+  return {
+    value: storeValue,
+    setValue: (value) => {
+      if (typeof value === 'function') {
+        if (isArray) {
+          storeValue.current = value(storeValue.current) as T;
+        } else {
+          storeValue.current = {
+            ...storeValue.current,
+            ...value(storeValue.current),
+          };
+        }
+      } else {
+        if (isArray) {
+          storeValue.current = value as T;
+        } else {
+          storeValue.current = { ...storeValue.current, ...value };
+        }
+      }
+
+      listeners.forEach((listener) => listener(storeValue.current));
+    },
+    listeners,
+    addListener: (listener) => listeners.add(listener),
+    removeListener: (listener) => listeners.delete(listener),
+  };
+}
+
+export function useMutableValueSelector<T, R>(
+  mutableValue: MutableValue<T>,
+  selector: (state: T) => R
+) {
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
+
+  const [value, setValue] = useState({
+    innerValue: selectorRef.current(mutableValue.value.current),
+  });
+
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  useEffect(() => {
+    const listener = (state: T) => {
+      const newValue = selectorRef.current(state);
+      if (newValue !== valueRef.current.innerValue) {
+        setValue({
+          innerValue: newValue,
+        });
+      }
+    };
+
+    mutableValue.addListener(listener);
+
+    // Trigger value which update while adding listener
+    listener(mutableValue.value.current);
+
+    return () => {
+      mutableValue.removeListener(listener);
+    };
+  }, [mutableValue]);
+
+  return value.innerValue;
+}

package/src/navigation/hooks/useOpenForm.ts

@@ -0,0 +1,34 @@
+import {
+  PageEntiyForm,
+  PageType,
+} from '@headless-adminapp/core/experience/app';
+import { useCallback } from 'react';
+
+import { useRouter } from '../../route/hooks/';
+import { useRouteResolver } from '../../route/hooks/useRouteResolver';
+
+export function useOpenForm() {
+  const routeResolver = useRouteResolver();
+  const router = useRouter();
+
+  return useCallback(
+    (
+      formOptions: Omit<PageEntiyForm, 'type'>,
+      navigationOptions: {
+        replace?: boolean;
+      }
+    ) => {
+      const path = routeResolver({
+        type: PageType.EntityForm,
+        ...formOptions,
+      });
+
+      if (navigationOptions.replace) {
+        router.replace(path);
+      } else {
+        router.push(path);
+      }
+    },
+    [routeResolver, router]
+  );
+}

package/src/progress-indicator/ProgressIndicatorProvider.tsx

@@ -0,0 +1,77 @@
+import {
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { ProgressIndicatorContext } from './context';
+
+export const ProgressIndicatorProvider: FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const [overlayVisible, setOverlayVisible] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [message, setMessage] = useState<string | undefined>(undefined);
+
+  const showTimeoutRef = useRef<NodeJS.Timeout>();
+
+  const showProgressIndicator = useCallback(
+    (message?: string, delay?: number) => {
+      setOverlayVisible(true);
+      setMessage(message);
+
+      if (delay) {
+        if (!showTimeoutRef.current) {
+          showTimeoutRef.current = setTimeout(() => {
+            setVisible(true);
+            showTimeoutRef.current = undefined;
+          }, delay);
+        }
+      } else {
+        if (showTimeoutRef.current) {
+          clearTimeout(showTimeoutRef.current);
+          showTimeoutRef.current = undefined;
+        }
+
+        setVisible(true);
+      }
+    },
+    []
+  );
+
+  const hideProgressIndicator = useCallback(() => {
+    setVisible(false);
+    setOverlayVisible(false);
+
+    if (showTimeoutRef.current) {
+      clearTimeout(showTimeoutRef.current);
+      showTimeoutRef.current = undefined;
+    }
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({
+      overlayVisible,
+      visible,
+      message,
+      showProgressIndicator,
+      hideProgressIndicator,
+    }),
+    [
+      visible,
+      overlayVisible,
+      message,
+      showProgressIndicator,
+      hideProgressIndicator,
+    ]
+  );
+
+  return (
+    <ProgressIndicatorContext.Provider value={contextValue}>
+      {children}
+    </ProgressIndicatorContext.Provider>
+  );
+};

package/src/progress-indicator/context.ts

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+export interface ProgressIndicatorContextState {
+  overlayVisible: boolean;
+  visible: boolean;
+  message?: string;
+  showProgressIndicator: (message?: string, delay?: number) => void;
+  hideProgressIndicator: () => void;
+}
+
+export const ProgressIndicatorContext =
+  createContext<ProgressIndicatorContextState>(null as any);

package/src/progress-indicator/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useProgressIndicator';

package/src/progress-indicator/hooks/useProgressIndicator.ts

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

package/src/progress-indicator/index.ts

@@ -0,0 +1,6 @@
+export {
+  ProgressIndicatorContext,
+  type ProgressIndicatorContextState,
+} from './context';
+export { ProgressIndicatorProvider } from './ProgressIndicatorProvider';
+export * from './hooks';

package/src/providers/PageEntityFormProvider/index.tsx

@@ -0,0 +1,34 @@
+import {
+  EntityMainFormCommandItemExperience,
+  Form,
+} from '@headless-adminapp/core/experience/form';
+import { Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { PropsWithChildren } from 'react';
+
+import { DataFormProvider } from '../../dataform/DataFormProvider';
+
+interface PageEntityFormProviderProps<S extends SchemaAttributes> {
+  schema: Schema<S>;
+  form: Form<S>;
+  recordId?: string;
+  commands: EntityMainFormCommandItemExperience[][];
+}
+
+export function PageEntityFormProvider<S extends SchemaAttributes>({
+  schema,
+  form,
+  recordId,
+  children,
+  commands,
+}: PropsWithChildren<PageEntityFormProviderProps<S>>) {
+  return (
+    <DataFormProvider
+      schema={schema}
+      form={form}
+      recordId={recordId}
+      commands={commands}
+    >
+      {children}
+    </DataFormProvider>
+  );
+}

package/src/providers/PageEntityViewProvider/index.tsx

@@ -0,0 +1,39 @@
+import { LocalizedDataLookup } from '@headless-adminapp/core/attributes';
+import {
+  EntityMainGridCommandItemExperience,
+  View,
+} from '@headless-adminapp/core/experience/view';
+import { Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { PropsWithChildren } from 'react';
+
+import { DataGridProvider } from '../../datagrid/DataGridProvider';
+
+interface PageEntityViewProviderProps<S extends SchemaAttributes> {
+  schema: Schema<S>;
+  view: View<S>;
+  commands: EntityMainGridCommandItemExperience[][];
+  availableViews: LocalizedDataLookup[];
+  onChangeView: (viewId: string) => void;
+}
+
+export function PageEntityViewProvider<S extends SchemaAttributes>({
+  availableViews,
+  commands,
+  schema,
+  view,
+  children,
+  onChangeView,
+}: PropsWithChildren<PageEntityViewProviderProps<S>>) {
+  return (
+    <DataGridProvider
+      schema={schema}
+      view={view}
+      views={availableViews}
+      onChangeView={onChangeView}
+      commands={commands}
+      allowViewSelection
+    >
+      {children}
+    </DataGridProvider>
+  );
+}

package/src/recordset/RecordSetProvider.tsx

@@ -0,0 +1,55 @@
+import { FC, PropsWithChildren, useEffect } from 'react';
+
+import { useMetadata } from '../metadata/hooks/useMetadata';
+import {
+  useContextSelector,
+  useContextSetValue,
+  useCreateContextStore,
+} from '../mutable/context';
+import { RecordSetContext, RecordSetContextState } from './context';
+
+export const RecordSetProvider: FC<PropsWithChildren> = ({ children }) => {
+  const contextValue = useCreateContextStore<RecordSetContextState>({
+    logicalName: '',
+    ids: [],
+    cardView: null,
+    visibleNavigator: false,
+  });
+
+  return (
+    <RecordSetContext.Provider value={contextValue}>
+      <CardViewSetter />
+      {children}
+    </RecordSetContext.Provider>
+  );
+};
+
+const CardViewSetter: FC = () => {
+  const { experienceStore } = useMetadata();
+  const setValue = useContextSetValue(RecordSetContext);
+  const logicalName = useContextSelector(
+    RecordSetContext,
+    (state) => state.logicalName
+  );
+
+  useEffect(() => {
+    setValue({
+      cardView: null,
+    });
+
+    if (!logicalName) {
+      return;
+    }
+
+    experienceStore
+      .getViewLookupV2(logicalName)
+      .then((view) => {
+        setValue({
+          cardView: view.experience.card,
+        });
+      })
+      .catch(console.error);
+  }, [experienceStore, logicalName]);
+
+  return null;
+};

package/src/recordset/context.ts

@@ -0,0 +1,12 @@
+import { CardView } from '@headless-adminapp/core/experience/view';
+
+import { createContext } from '../mutable/context';
+
+export interface RecordSetContextState {
+  logicalName: string;
+  ids: (string | number)[];
+  cardView: CardView | null;
+  visibleNavigator: boolean;
+}
+
+export const RecordSetContext = createContext<RecordSetContextState>();

package/src/recordset/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useRecordSetResult';
+export * from './useRecordSetSetter';
+export * from './useRecordSetVisibility';