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

package/src/store/SchemaExperienceStore.ts

@@ -0,0 +1,374 @@
+import { LocalizedDataLookup } from '@headless-adminapp/core/attributes';
+import {
+  EntityMainFormCommandItemExperience,
+  Form,
+  QuickCreateForm,
+} from '@headless-adminapp/core/experience/form';
+import {
+  SchemaExperience,
+  SchemaExperienceMetadata,
+} from '@headless-adminapp/core/experience/schema';
+import {
+  CardView,
+  EntityMainGridCommandItemExperience,
+  SubGridCommandItemExperience,
+  View,
+} from '@headless-adminapp/core/experience/view';
+import {
+  Schema,
+  SchemaAttributes,
+  SchemaMetadata,
+} from '@headless-adminapp/core/schema';
+import {
+  ISchemaExperienceStore,
+  ISchemaStore,
+} from '@headless-adminapp/core/store';
+
+export function getDefaultCardView<
+  S extends SchemaAttributes = SchemaAttributes
+>(schema: Schema<S>): CardView<S> {
+  return {
+    primaryColumn: schema.primaryAttribute,
+  };
+}
+
+interface SchemaExperienceStoreOptions {
+  schemaStore: ISchemaStore;
+}
+
+export class SchemaExperienceStore implements ISchemaExperienceStore {
+  private experiences: Record<string, SchemaExperience> = {};
+
+  public constructor(protected options: SchemaExperienceStoreOptions) {}
+
+  register<S extends SchemaAttributes = SchemaAttributes>(
+    experience: SchemaExperience<S>
+  ): void {
+    for (const view of Object.values(experience.views)) {
+      if (!view.id) {
+        throw new Error('View id is required');
+      }
+
+      if (!view.name) {
+        throw new Error('View name is required');
+      }
+
+      if (view.logicalName !== experience.logicalName) {
+        throw new Error('View logicalName must match experience logicalName');
+      }
+    }
+    this.experiences[experience.logicalName] = experience as SchemaExperience;
+  }
+
+  public async getExperience<S extends SchemaAttributes = SchemaAttributes>(
+    logicalName: string
+  ): Promise<SchemaExperience<S>> {
+    const experience = this.experiences[logicalName];
+
+    if (!experience) {
+      throw new Error(`Experience for ${logicalName} not found`);
+    }
+
+    return experience;
+  }
+
+  public async getPublicViewLookup(
+    logicalName: string,
+    viewIds?: string[]
+  ): Promise<LocalizedDataLookup[]> {
+    const experience = await this.getExperience(logicalName);
+
+    let views = experience.views;
+
+    if (viewIds?.length) {
+      views = views.filter((view) => viewIds.includes(view.id));
+    }
+
+    if (!views.length) {
+      views = experience.views.filter((x) => x.id === experience.defaultViewId);
+    }
+
+    return views.map((view) => ({
+      id: view.id,
+      name: view.name,
+      localizedNames: view.localizedNames,
+    }));
+  }
+
+  public async getAssociatedViewLookup(
+    logicalName: string,
+    viewIds?: string[]
+  ): Promise<LocalizedDataLookup[]> {
+    const experience = await this.getExperience(logicalName);
+
+    let associatedViews = experience.associatedViews;
+
+    if (viewIds?.length) {
+      associatedViews = associatedViews.filter((view) =>
+        viewIds.includes(view.id)
+      );
+    }
+
+    if (!associatedViews.length) {
+      associatedViews = experience.associatedViews.filter(
+        (x) => x.id === experience.defaultAssociatedViewId
+      );
+    }
+
+    return associatedViews.map((view) => ({
+      id: view.id,
+      name: view.name,
+      localizedNames: view.localizedNames,
+    }));
+  }
+
+  async getPublicView<S extends SchemaAttributes = SchemaAttributes>(
+    logicalName: string,
+    viewId?: string,
+    viewIds?: string[]
+  ): Promise<View<S>> {
+    const experience = await this.getExperience(logicalName);
+
+    const availableViewLookup = await this.getPublicViewLookup(
+      logicalName,
+      viewIds
+    );
+
+    let validViewIds = availableViewLookup.map((x) => x.id);
+
+    if (!validViewIds.length) {
+      validViewIds = [experience.defaultViewId];
+    }
+
+    if (!viewId) {
+      viewId = experience.defaultViewId;
+    }
+
+    if (!validViewIds.includes(viewId)) {
+      viewId = validViewIds[0];
+    }
+
+    let view = experience.views.find((v) => v.id === viewId);
+
+    if (!view) {
+      throw new Error(`View ${viewId} not found`);
+    }
+
+    let viewExperience = view.experience;
+
+    if (typeof viewExperience === 'function') {
+      viewExperience = await viewExperience();
+    }
+
+    if (!viewExperience.card) {
+      viewExperience.card = getDefaultCardView(
+        this.options.schemaStore.getSchema(logicalName)
+      );
+    }
+
+    return {
+      id: view.id,
+      name: view.name,
+      logicalName: view.logicalName,
+      localizedNames: view.localizedNames,
+      experience: viewExperience,
+    };
+  }
+
+  async getAssociatedView<S extends SchemaAttributes = SchemaAttributes>(
+    logicalName: string,
+    viewId?: string,
+    viewIds?: string[]
+  ): Promise<View<S>> {
+    const experience = await this.getExperience(logicalName);
+
+    const availableViewLookup = await this.getAssociatedViewLookup(
+      logicalName,
+      viewIds
+    );
+
+    let validViewIds = availableViewLookup.map((x) => x.id);
+
+    if (!validViewIds.length) {
+      validViewIds = [experience.defaultViewId];
+    }
+
+    if (!viewId) {
+      viewId = experience.defaultAssociatedViewId;
+    }
+
+    if (!validViewIds.includes(viewId)) {
+      viewId = validViewIds[0];
+    }
+
+    let view = experience.associatedViews.find((v) => v.id === viewId);
+
+    if (!view) {
+      throw new Error(`View ${viewId} not found`);
+    }
+
+    let viewExperience = view.experience;
+
+    if (typeof viewExperience === 'function') {
+      viewExperience = await viewExperience();
+    }
+
+    if (!viewExperience.card) {
+      viewExperience.card = getDefaultCardView(
+        this.options.schemaStore.getSchema(logicalName)
+      );
+    }
+
+    return {
+      id: view.id,
+      name: view.name,
+      logicalName: view.logicalName,
+      localizedNames: view.localizedNames,
+      experience: viewExperience,
+    };
+  }
+
+  async getViewLookupV2<S extends SchemaAttributes = SchemaAttributes>(
+    logicalName: string,
+    viewId?: string
+  ): Promise<View<S>> {
+    const experience = await this.getExperience(logicalName);
+
+    if (!viewId) {
+      viewId = experience.defaultViewId;
+    }
+
+    const view = experience.lookups.find((v) => v.id === viewId);
+
+    if (!view) {
+      throw new Error(`Lookup ${viewId} not found`);
+    }
+
+    let viewExperience = view.experience;
+
+    if (typeof viewExperience === 'function') {
+      viewExperience = await viewExperience();
+    }
+
+    return {
+      id: view.id,
+      name: view.name,
+      logicalName: view.logicalName,
+      experience: viewExperience,
+    };
+  }
+
+  async getDefaultViewId(logicalName: string): Promise<string> {
+    const experience = await this.getExperience(logicalName);
+
+    return experience.defaultViewId;
+  }
+
+  async getDefaultViewLookupId(logicalName: string): Promise<string> {
+    const experience = await this.getExperience(logicalName);
+
+    return experience.defaultLookupId;
+  }
+
+  async getForm<S extends SchemaAttributes = SchemaAttributes>(
+    logicalName: string,
+    formId: string
+  ): Promise<Form<S>> {
+    const experience = await this.getExperience(logicalName);
+
+    if (!formId) {
+      formId = experience.defaultFormId;
+    }
+
+    const form = experience.forms.find((f) => f.id === formId);
+
+    if (!form) {
+      throw new Error(`Form ${formId} not found`);
+    }
+
+    let formExperience = form.experience;
+
+    if (typeof formExperience === 'function') {
+      formExperience = await formExperience();
+    }
+
+    return {
+      id: form.id,
+      name: form.name,
+      logicalName: form.logicalName,
+      experience: formExperience,
+    };
+  }
+
+  async getQuickCreateForm<S extends SchemaAttributes = SchemaAttributes>(
+    logicalName: string,
+    formId: string
+  ): Promise<QuickCreateForm<S>> {
+    const experience = await this.getExperience(logicalName);
+
+    const form = experience.quickCreateForms.find((f) => f.id === formId);
+
+    if (!form) {
+      throw new Error(`Quick create form ${formId} not found`);
+    }
+
+    let formExperience = form.experience;
+
+    if (typeof formExperience === 'function') {
+      formExperience = await formExperience();
+    }
+
+    return {
+      id: form.id,
+      name: form.name,
+      logicalName: form.logicalName,
+      experience: formExperience,
+    };
+  }
+
+  async getViewCommands(
+    logicalName: string
+  ): Promise<EntityMainGridCommandItemExperience[][]> {
+    const experience = await this.getExperience(logicalName);
+
+    return experience.viewCommands;
+  }
+
+  async getFormCommands(
+    logicalName: string
+  ): Promise<EntityMainFormCommandItemExperience[][]> {
+    const experience = await this.getExperience(logicalName);
+
+    return experience.formCommands;
+  }
+
+  async getSubgridCommands(
+    logicalName: string
+  ): Promise<SubGridCommandItemExperience[][]> {
+    const experience = await this.getExperience(logicalName);
+
+    return experience.subgridCommands;
+  }
+
+  getSchemaMetadataList(): SchemaMetadata[] {
+    const schemas = this.options.schemaStore.getAllSchema();
+    return Object.values(schemas).map((schema) => ({
+      logicalName: schema.logicalName,
+      label: schema.label,
+      pluralLabel: schema.pluralLabel,
+      description: schema.description,
+      localizedDescriptions: schema.localizedDescriptions,
+      localizedLabels: schema.localizedLabels,
+      localizedPluralLabels: schema.localizedPluralLabels,
+    }));
+  }
+
+  async getExperienceSchemaMetadatList(): Promise<SchemaExperienceMetadata[]> {
+    const schemaMetadatas = this.getSchemaMetadataList();
+
+    return schemaMetadatas.map((schemaMetadata) => ({
+      ...schemaMetadata,
+      icon: this.experiences[schemaMetadata.logicalName]?.icon,
+    }));
+  }
+}

package/src/store/index.ts

@@ -0,0 +1,4 @@
+export * from './ClientAppStore';
+export * from './ComponentStore';
+export * from './EventManager';
+export * from './SchemaExperienceStore';

package/src/toast-notification/ToastNotificationProvider.tsx

@@ -0,0 +1,23 @@
+import { FC, PropsWithChildren } from 'react';
+
+import { useCreateContextStore } from '../mutable/context';
+import {
+  ToastNotificationContext,
+  ToastNotificationContextState,
+} from './context';
+
+interface ToastNotificationProviderProps {}
+
+export const ToastNotificationProvider: FC<
+  PropsWithChildren<ToastNotificationProviderProps>
+> = ({ children }) => {
+  const contextState = useCreateContextStore<ToastNotificationContextState>({
+    items: [],
+  });
+
+  return (
+    <ToastNotificationContext.Provider value={contextState}>
+      {children}
+    </ToastNotificationContext.Provider>
+  );
+};

package/src/toast-notification/context.ts

@@ -0,0 +1,17 @@
+import { createContext } from '../mutable/context';
+
+export interface ToastNotificationItem {
+  id: string;
+  isOpen: boolean;
+  text: string;
+  title?: string;
+  actions?: { text: string; onClick: () => void }[];
+  type?: 'info' | 'success' | 'warning' | 'error';
+}
+
+export interface ToastNotificationContextState {
+  items: ToastNotificationItem[];
+}
+
+export const ToastNotificationContext =
+  createContext<ToastNotificationContextState>();

package/src/toast-notification/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useCloseToastNotification';
+export * from './useOpenToastNotification';
+export * from './useToastNotificationItems';

package/src/toast-notification/hooks/useCloseToastNotification.ts

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+
+import { useContextSetValue } from '../../mutable/context';
+import { ToastNotificationContext } from '../context';
+
+export function useCloseToastNotification() {
+  const setValue = useContextSetValue(ToastNotificationContext);
+
+  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/toast-notification/hooks/useOpenToastNotification.ts

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+
+import { useContextSetValue } from '../../mutable/context';
+import { ToastNotificationContext, ToastNotificationItem } from '../context';
+import { useCloseToastNotification } from './useCloseToastNotification';
+
+function randomId() {
+  return Math.random().toString(36).substring(2);
+}
+
+export function useOpenToastNotification() {
+  const setValue = useContextSetValue(ToastNotificationContext);
+  const closeDialog = useCloseToastNotification();
+
+  const openToastNotification = useCallback(
+    (options: Omit<ToastNotificationItem, 'id' | 'isOpen'>) => {
+      const id = randomId();
+
+      setValue((state) => {
+        return {
+          items: [
+            ...state.items,
+            {
+              id,
+              isOpen: true,
+              ...options,
+            },
+          ],
+        };
+      });
+
+      return { id, close: () => closeDialog(id) };
+    },
+    [setValue, closeDialog]
+  );
+
+  return openToastNotification;
+}

package/src/toast-notification/hooks/useToastNotificationItems.ts

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

package/src/toast-notification/index.ts

@@ -0,0 +1,7 @@
+export {
+  ToastNotificationContext,
+  type ToastNotificationContextState,
+  type ToastNotificationItem,
+} from './context';
+export { ToastNotificationProvider } from './ToastNotificationProvider';
+export * from './hooks';

package/src/transport/InMemoryDataService/index.ts

@@ -0,0 +1,157 @@
+import type { Id } from '@headless-adminapp/core/attributes';
+import {
+  InferredSchemaType,
+  Schema,
+  SchemaAttributes,
+} from '@headless-adminapp/core/schema';
+import {
+  AggregateAttribute,
+  CreateRecordResult,
+  Data,
+  IDataService,
+  InferredAggregateQueryResult,
+} from '@headless-adminapp/core/transport';
+import {
+  RetriveRecordsFnOptions,
+  RetriveRecordsResult,
+} from '@headless-adminapp/core/transport/operations';
+
+interface Options {
+  data: Record<string, unknown[]>;
+  schemas: Record<string, Schema>;
+  idGenerator: (logicalName: string, records: unknown[]) => string | number;
+}
+
+export class InMemoryDataService implements IDataService {
+  // , IActionService, IReportService
+  public constructor(private readonly options: Options) {}
+
+  private getSchema(logicalName: string) {
+    const schema = this.options.schemas[logicalName];
+
+    if (!schema) {
+      throw new Error(`Schema for ${logicalName} not found`);
+    }
+
+    return schema;
+  }
+
+  private getCollection<T>(logicalName: string) {
+    if (!this.options.data[logicalName]) {
+      throw new Error(`Entity ${logicalName} not found`);
+    }
+
+    return this.options.data[logicalName] as T[];
+  }
+
+  public async retriveRecord<T = unknown>(
+    logicalName: string,
+    id: Id
+  ): Promise<Data<T>> {
+    const schema = this.getSchema(logicalName);
+    const records =
+      this.getCollection<InferredSchemaType<SchemaAttributes>>(logicalName);
+
+    const record = records.find((record) => {
+      return record[schema.idAttribute] === id;
+    });
+
+    if (!record) {
+      throw new Error(`Record with id ${id} not found`);
+    }
+
+    return record as any;
+  }
+
+  public async retriveRecords<T = unknown>({
+    logicalName,
+  }: RetriveRecordsFnOptions<T>): Promise<RetriveRecordsResult<T>> {
+    const records =
+      this.getCollection<InferredSchemaType<SchemaAttributes>>(logicalName);
+
+    return {
+      logicalName,
+      records: records as Data<T>[],
+      count: records.length,
+    } as any;
+  }
+
+  public async createRecord<T>(
+    logicalName: string,
+    data: Partial<T>
+  ): Promise<CreateRecordResult> {
+    const schema = this.getSchema(logicalName);
+    const records =
+      this.getCollection<InferredSchemaType<SchemaAttributes>>(logicalName);
+
+    const newId = this.options.idGenerator(logicalName, records);
+
+    const newRecord = {
+      ...data,
+      [schema.idAttribute]: newId,
+    };
+
+    records.push(newRecord);
+
+    return { id: newId } as any;
+  }
+
+  public async updateRecord<T>(
+    logicalName: string,
+    id: string,
+    data: Partial<T>
+  ) {
+    const schema = this.getSchema(logicalName);
+    const records =
+      this.getCollection<InferredSchemaType<SchemaAttributes>>(logicalName);
+
+    const record = records.find((record) => {
+      return record[schema.idAttribute] === id;
+    });
+
+    if (!record) {
+      throw new Error(`Record with id ${id} not found`);
+    }
+
+    Object.assign(record, data);
+
+    return { id } as any;
+  }
+
+  public async deleteRecord(logicalName: string, id: string) {
+    const schema = this.getSchema(logicalName);
+    const records =
+      this.getCollection<InferredSchemaType<SchemaAttributes>>(logicalName);
+
+    const index = records.findIndex((record) => {
+      return record[schema.idAttribute] === id;
+    });
+
+    if (index === -1) {
+      throw new Error(`Record with id ${id} not found`);
+    }
+
+    records.splice(index, 1);
+  }
+
+  public async executeAction<T>() {
+    return {} as T;
+  }
+
+  public async getReportData<T>() {
+    return {} as T;
+  }
+
+  public async retriveAggregate<
+    Q extends Record<string, AggregateAttribute> = Record<
+      string,
+      AggregateAttribute
+    >
+  >(): Promise<InferredAggregateQueryResult<Q>[]> {
+    return [] as any;
+  }
+
+  public async customAction<T = unknown>(): Promise<T> {
+    return {} as T;
+  }
+}