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

package/src/recordset/hooks/useRecordSetResult.ts

@@ -0,0 +1,94 @@
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import { useQuery } from '@tanstack/react-query';
+import { sortBy } from 'lodash';
+import { useMemo } from 'react';
+
+import { useMetadata } from '../../metadata/hooks/useMetadata';
+import { useContextSelector } from '../../mutable/context';
+import { useDataService } from '../../transport';
+import { RecordSetContext } from '../context';
+
+export function useRecordSetResult() {
+  const context = useContextSelector(RecordSetContext, (state) => state);
+
+  const { schemaStore } = useMetadata();
+  const dataService = useDataService();
+
+  const schema = useMemo(() => {
+    if (!context.logicalName) {
+      return null;
+    }
+
+    return schemaStore.getSchema(context.logicalName);
+  }, [context.logicalName]);
+
+  const cardView = context.cardView;
+
+  const columns = useMemo(() => {
+    if (!cardView) {
+      return [];
+    }
+
+    return Array.from(
+      new Set([
+        cardView.primaryColumn,
+        cardView.avatarColumn,
+        ...(cardView.secondaryColumns ?? [])
+          .filter((x) => !x.expandedKey)
+          .map((x) => x.name),
+      ])
+    ).filter(Boolean) as string[];
+  }, [cardView]);
+
+  const { isPending, data, error } = useQuery({
+    queryKey: ['data', 'recordset', context.logicalName, context.ids, columns],
+    queryFn: async () => {
+      console.log(
+        'fetching data',
+        context.ids,
+        !context.logicalName,
+        !context.ids.length,
+        !cardView
+      );
+      if (!context.logicalName || !context.ids.length || !cardView) {
+        return [];
+      }
+
+      const schema = schemaStore.getSchema(context.logicalName);
+
+      const result = await dataService.retriveRecords<SchemaAttributes>({
+        logicalName: context.logicalName,
+        filter: {
+          type: 'and',
+          conditions: [
+            {
+              field: schema.idAttribute as string,
+              operator: 'in',
+              value: context.ids,
+            },
+          ],
+        },
+        columns,
+        sort: [],
+        limit: context.ids.length,
+      });
+
+      const sortedData = sortBy(result.records, (x) =>
+        context.ids.indexOf((x as any)[schema.idAttribute])
+      );
+
+      return sortedData;
+    },
+  });
+
+  if (error) {
+    console.error(error);
+  }
+
+  return {
+    isLoading: isPending,
+    data,
+    cardView,
+    schema,
+  };
+}

package/src/recordset/hooks/useRecordSetSetter.ts

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+
+import { useContextSetValue } from '../../mutable/context';
+import { RecordSetContext } from '../context';
+
+export function useRecordSetSetter() {
+  const setValue = useContextSetValue(RecordSetContext);
+
+  const setRecordSet = useCallback(
+    (logicalName: string, ids: (string | number)[]) => {
+      setValue({
+        logicalName,
+        ids,
+        visibleNavigator: false,
+      });
+    },
+    [setValue]
+  );
+
+  return setRecordSet;
+}

package/src/recordset/hooks/useRecordSetVisibility.ts

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+
+import { useContextSelector, useContextSetValue } from '../../mutable/context';
+import { RecordSetContext } from '../context';
+
+export function useRecordSetVisibility() {
+  const visibleNavigator = useContextSelector(
+    RecordSetContext,
+    (state) => state.visibleNavigator
+  );
+
+  const setValue = useContextSetValue(RecordSetContext);
+
+  const setVisibility = useCallback(
+    (visible: boolean) => {
+      setValue({
+        visibleNavigator: visible,
+      });
+    },
+    [setValue]
+  );
+
+  return [visibleNavigator, setVisibility] as const;
+}

package/src/recordset/index.ts

@@ -0,0 +1,3 @@
+export { RecordSetProvider } from './RecordSetProvider';
+export { RecordSetContext, type RecordSetContextState } from './context';
+export * from './hooks';

package/src/route/RouteProvider.tsx

@@ -0,0 +1,76 @@
+import {
+  IsRouteActive,
+  RouteResolver,
+} from '@headless-adminapp/core/experience/route';
+import { FC, PropsWithChildren, useCallback, useMemo, useRef } from 'react';
+
+import {
+  InternalIsRouteActive,
+  InternalRouteResolver,
+  RouteHelperContext,
+  RouterBasePathContext,
+  RouterContext,
+  RouterInstance,
+  RouterPathnameContext,
+  RouterSearchParamsContext,
+} from './context';
+import { ReadonlyURLSearchParams } from './types';
+
+export interface RouteProviderProps {
+  router: RouterInstance;
+  pathname: string;
+  searchParams: ReadonlyURLSearchParams;
+  basePath?: string;
+  routeResolver: RouteResolver;
+  isRouteActive: IsRouteActive;
+}
+
+export const RouteProvider: FC<PropsWithChildren<RouteProviderProps>> = ({
+  children,
+  pathname,
+  router,
+  searchParams,
+  basePath,
+  routeResolver,
+  isRouteActive,
+}) => {
+  const basePathRef = useRef(basePath);
+  basePathRef.current = basePath;
+
+  const routeResolverRef = useRef(routeResolver);
+  routeResolverRef.current = routeResolver;
+
+  const isRouteActiveRef = useRef(isRouteActive);
+  isRouteActiveRef.current = isRouteActive;
+
+  const internalRouteResolver: InternalRouteResolver = useCallback(
+    (item) => routeResolverRef.current(item, basePathRef.current),
+    []
+  );
+
+  const internalIsRouteActive: InternalIsRouteActive = useCallback(
+    (path, item) => isRouteActiveRef.current(path, item, basePathRef.current),
+    []
+  );
+
+  const routeHelperContextState = useMemo(() => {
+    return {
+      routeResolver: internalRouteResolver,
+      isRouteActive: internalIsRouteActive,
+    };
+  }, [internalRouteResolver, internalIsRouteActive]);
+
+  return (
+    <RouterContext.Provider value={router}>
+      <RouterPathnameContext.Provider value={pathname}>
+        <RouterSearchParamsContext.Provider value={searchParams}>
+          <RouterBasePathContext.Provider value={basePath}>
+            <RouteHelperContext.Provider value={routeHelperContextState}>
+              {children}
+            </RouteHelperContext.Provider>
+          </RouterBasePathContext.Provider>
+        </RouterSearchParamsContext.Provider>
+      </RouterPathnameContext.Provider>
+    </RouterContext.Provider>
+  );
+};

package/src/route/context.ts

@@ -0,0 +1,39 @@
+import { NavPageItem } from '@headless-adminapp/core/experience/app';
+import { createContext } from 'react';
+
+import { ReadonlyURLSearchParams } from './types';
+
+export type InternalRouteResolver = (item: NavPageItem) => string;
+export type InternalIsRouteActive = (
+  path: string,
+  item: NavPageItem
+) => boolean;
+
+interface NavigateOptions {
+  scroll?: boolean;
+}
+export interface RouterInstance {
+  back: () => void;
+  forward: () => void;
+  push(href: string, options?: NavigateOptions): void;
+  replace(href: string, options?: NavigateOptions): void;
+}
+
+export const RouterContext = createContext<RouterInstance>(null as any);
+
+export const RouterPathnameContext = createContext<string>(null as any);
+export const RouterSearchParamsContext = createContext<ReadonlyURLSearchParams>(
+  null as any
+);
+export const RouterBasePathContext = createContext<string | undefined>(
+  undefined
+);
+
+export interface RouteHelperContext {
+  routeResolver: InternalRouteResolver;
+  isRouteActive: InternalIsRouteActive;
+}
+
+export const RouteHelperContext = createContext<RouteHelperContext>(
+  null as any
+);

package/src/route/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './usePathname';
+export * from './useSearchParams';
+export * from './useRouter';
+export * from './useBasePath';

package/src/route/hooks/useBasePath.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { RouterBasePathContext } from '../context';
+
+export function useBasePath() {
+  return useContext(RouterBasePathContext);
+}

package/src/route/hooks/usePathname.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { RouterPathnameContext } from '../context';
+
+export function usePathname() {
+  return useContext(RouterPathnameContext);
+}

package/src/route/hooks/useRouteResolver.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { RouteHelperContext } from '../context';
+
+export function useRouteResolver() {
+  return useContext(RouteHelperContext).routeResolver;
+}

package/src/route/hooks/useRouter.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { RouterContext } from '../context';
+
+export function useRouter() {
+  return useContext(RouterContext);
+}

package/src/route/hooks/useSearchParams.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { RouterSearchParamsContext } from '../context';
+
+export function useSearchParams() {
+  return useContext(RouterSearchParamsContext);
+}

package/src/route/index.ts

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

package/src/route/types.ts

@@ -0,0 +1 @@
+export interface ReadonlyURLSearchParams {}

package/src/store/ClientAppStore.ts

@@ -0,0 +1,20 @@
+import { AppExperience } from '@headless-adminapp/core/experience/app';
+import { IClientAppStore } from '@headless-adminapp/core/store';
+
+export class ClientAppStore implements IClientAppStore {
+  private apps: Record<string, AppExperience> = {};
+
+  public register(app: AppExperience): void {
+    this.apps[app.id] = app;
+  }
+
+  public async getApp(id: string): Promise<AppExperience> {
+    const app = this.apps[id];
+
+    if (!app) {
+      throw new Error(`App Experience for ${id} not found`);
+    }
+
+    return app;
+  }
+}

package/src/store/ComponentStore.tsx

@@ -0,0 +1,22 @@
+import { IComponentStore } from '@headless-adminapp/core/store';
+
+export class ComponentStore implements IComponentStore {
+  private components: Record<string, unknown> = {};
+
+  public registerComponent<T>(name: string, component: T): void {
+    this.components[name] = component;
+  }
+
+  public resolveComponent<T>(name: string): T {
+    const self = this;
+    return function (props: any) {
+      if (!self.components[name]) {
+        throw new Error(`Component ${name} is not registered`);
+      }
+
+      const Component = self.components[name] as any;
+
+      return <Component {...props} />;
+    } as T;
+  }
+}

package/src/store/EventManager.ts

@@ -0,0 +1,33 @@
+import { IEventManager } from '@headless-adminapp/core/store';
+
+type EventHandler = (...args: any[]) => any | Promise<any>;
+
+export class EventManager implements IEventManager {
+  private handlers: Record<string, unknown[]> = {};
+
+  public async on<T>(key: string, handler: T): Promise<void> {
+    if (!this.handlers[key]) {
+      this.handlers[key] = [];
+    }
+
+    this.handlers[key].push(handler);
+  }
+
+  public async off<T>(key: string, handler: T): Promise<void> {
+    if (!this.handlers[key]) {
+      return;
+    }
+
+    this.handlers[key] = this.handlers[key].filter((h) => h !== handler);
+
+    if (this.handlers[key].length === 0) {
+      delete this.handlers[key];
+    }
+  }
+
+  public emit(key: string, ...args: any[]): any[] {
+    const handlers = (this.handlers[key] ?? []) as EventHandler[];
+
+    return handlers.map((handler) => handler(...args));
+  }
+}