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

package/src/command/utils/index.ts

@@ -1,142 +0,0 @@
-import {
-  CommandItemExperience,
-  MenuItemCommandExperience,
-} from '@headless-adminapp/core/experience/command';
-import { checkCommandCondition } from '@headless-adminapp/core/experience/command/utils';
-import {
-  ArrayGroupWithAtLeastOne,
-  ArrayWithAtLeastOne,
-} from '@headless-adminapp/core/types';
-
-import {
-  CommandItemExperienceSelector,
-  CommandItemState,
-  MenuItemCommandState,
-} from '../types';
-
-function transformedProperties<HandlerContext>(
-  command: Pick<
-    CommandItemExperience<HandlerContext>,
-    'Icon' | 'disabled' | 'onClick' | 'hidden'
-  >,
-  handlerContext: HandlerContext
-) {
-  const IconComponent = command.Icon;
-
-  const hidden = checkCommandCondition(handlerContext, command.hidden);
-
-  const disabled = checkCommandCondition(handlerContext, command.disabled);
-
-  const onClick = command.onClick
-    ? () => {
-        command.onClick!(handlerContext)?.catch(console.error);
-      }
-    : undefined;
-
-  return {
-    Icon: IconComponent,
-    hidden,
-    disabled,
-    onClick,
-  };
-}
-
-function transformCommand<HandlerContext>(
-  command: CommandItemExperience<HandlerContext>,
-  handlerContext: HandlerContext
-): CommandItemState {
-  const commandType = command.type;
-
-  switch (command.type) {
-    case 'icon':
-      return {
-        type: command.type,
-        isQuickAction: command.isQuickAction,
-        danger: command.danger,
-        iconPosition: command.iconPosition,
-        ...transformedProperties(command, handlerContext),
-      } as CommandItemState;
-    case 'button':
-      return {
-        type: command.type,
-        isQuickAction: command.isQuickAction,
-        text: command.text,
-        danger: command.danger,
-        iconPosition: command.iconPosition,
-        localizedTexts: command.localizedText,
-        ...transformedProperties(command, handlerContext),
-      } as CommandItemState;
-    case 'menu':
-      return {
-        type: command.type,
-        text: command.text,
-        danger: command.danger,
-        localizedTexts: command.localizedTexts,
-        iconPosition: command.iconPosition,
-        ...transformedProperties(command, handlerContext),
-        items: command.items.map((item) =>
-          transformMenuItems(item, handlerContext)
-        ),
-      } as CommandItemState;
-    default:
-      throw new Error(`Unknown command type: ${commandType}`);
-  }
-}
-
-function transformMenuItems<HandlerContext>(
-  items: ArrayWithAtLeastOne<MenuItemCommandExperience<HandlerContext>>,
-  handlerContext: HandlerContext
-): ArrayWithAtLeastOne<MenuItemCommandState> {
-  return items.map((item) =>
-    transformMenuItem(item, handlerContext)
-  ) as ArrayWithAtLeastOne<MenuItemCommandState>;
-}
-
-function transformMenuItem<HandlerContext>(
-  item: MenuItemCommandExperience<HandlerContext>,
-  handlerContext: HandlerContext
-): MenuItemCommandState {
-  return {
-    danger: item.danger,
-    text: item.text,
-    localizedTexts: item.localizedTexts,
-    ...transformedProperties(item, handlerContext),
-    items: item.items?.map((item) =>
-      transformMenuItems(item, handlerContext)
-    ) as ArrayGroupWithAtLeastOne<MenuItemCommandState>,
-  };
-}
-
-function transformCommandGroup<HandlerContext>(
-  group: CommandItemExperience<HandlerContext>[],
-  handlerContext: HandlerContext,
-  selector?: CommandItemExperienceSelector<HandlerContext>
-): CommandItemState[] {
-  return group
-    .map((command) => {
-      if (!(selector?.(command) ?? true)) {
-        return false; // Skip command
-      }
-
-      const transformedCommand = transformCommand(command, handlerContext);
-
-      if (transformedCommand.hidden) {
-        return false; // Skip command
-      }
-
-      return transformedCommand;
-    })
-    .filter(Boolean) as CommandItemState[];
-}
-
-export function transformCommadnGroups<HandlerContext>(
-  groups: CommandItemExperience<HandlerContext>[][],
-  handlerContext: HandlerContext,
-  selector?: CommandItemExperienceSelector<HandlerContext>
-): CommandItemState[][] {
-  return groups
-    .map((group) => {
-      return transformCommandGroup(group, handlerContext, selector);
-    })
-    .filter((group) => group.length > 0);
-}

package/src/components/ScrollView/index.tsx

@@ -1,26 +0,0 @@
-import clsx from 'clsx';
-import { FC, PropsWithChildren } from 'react';
-import Scrollbars, { ScrollbarProps } from 'react-custom-scrollbars-2';
-
-interface ScrollViewProps {
-  className?: string;
-  autoHide?: boolean;
-  rtl?: boolean;
-  onScroll?: ScrollbarProps['onScroll'];
-}
-
-export const ScrollView: FC<PropsWithChildren<ScrollViewProps>> = ({
-  children,
-  className,
-  rtl,
-  autoHide,
-  onScroll,
-}) => (
-  <Scrollbars
-    autoHide={autoHide}
-    className={clsx(className, 'hdl-scrollbar', rtl && 'rtl')}
-    onScroll={onScroll}
-  >
-    {children}
-  </Scrollbars>
-);

package/src/dataform/DataFormProvider/DataResolver.tsx

@@ -1,186 +0,0 @@
-import { Form } from '@headless-adminapp/core/experience/form';
-import {
-  InferredSchemaType,
-  Schema,
-  SchemaAttributes,
-} from '@headless-adminapp/core/schema';
-import { HttpError, IDataService } from '@headless-adminapp/core/transport';
-import { keepPreviousData, useQuery } from '@tanstack/react-query';
-import { useEffect, useMemo } from 'react';
-
-import { useMetadata } from '../../metadata/hooks';
-import { useContextSetValue } from '../../mutable';
-import { useDataService } from '../../transport';
-import { DataFormContext } from '../context';
-import { useDataFormSchema, useRecordId, useSelectedForm } from '../hooks';
-
-export function getControls(form: Form) {
-  const controls = form.experience.tabs
-    .flatMap((tab) => tab.tabColumns)
-    .flatMap((tabColumn) => tabColumn.sections)
-    .flatMap((section) => section.controls);
-
-  return controls;
-}
-
-export function getColumns(form: Form) {
-  const columns = Array.from(
-    new Set([
-      ...(form.experience.includeAttributes ?? []),
-      ...form.experience.headerControls,
-      ...getControls(form)
-        .filter((control) => control.type === 'standard')
-        .map((control) => control.attributeName),
-    ])
-  );
-
-  return columns;
-}
-
-async function getRecord({
-  recordId,
-  dataService,
-  form,
-  schema,
-  columns,
-  getSchema,
-}: {
-  recordId: string;
-  dataService: IDataService;
-  form: Form;
-  schema: Schema;
-  columns: string[];
-  getSchema: (logicalName: string) => Schema;
-}) {
-  let record = null;
-
-  try {
-    record = await dataService.retriveRecord(
-      schema.logicalName,
-      recordId,
-      columns
-    );
-  } catch (error) {
-    if (error instanceof HttpError && error.status === 404) {
-      return null;
-    }
-
-    throw error;
-  }
-
-  if (!record) {
-    return null;
-  }
-
-  const controls = getControls(form);
-
-  const editableGridControls = controls.filter(
-    (control) => control.type === 'editablegrid'
-  );
-
-  for (const control of editableGridControls) {
-    if (control.type !== 'editablegrid') {
-      continue;
-    }
-
-    const controlSchema = getSchema(control.logicalName);
-
-    const records = await dataService.retriveRecords<
-      InferredSchemaType<SchemaAttributes>
-    >({
-      logicalName: controlSchema.logicalName,
-      filter: {
-        type: 'and',
-        conditions: [
-          {
-            field: control.referenceAttribute,
-            operator: 'eq',
-            value: recordId,
-          },
-        ],
-      },
-      sort: [
-        {
-          field: controlSchema.createdAtAttribute ?? controlSchema.idAttribute,
-          order: 'asc',
-        },
-      ],
-      limit: 5000,
-      search: '',
-      columns: [
-        controlSchema.idAttribute,
-        control.referenceAttribute,
-        ...control.attributes,
-      ],
-    });
-
-    (record as any)[control.attributeName] = records.records;
-  }
-
-  return record;
-}
-
-export function DataResolver() {
-  const schema = useDataFormSchema();
-  const form = useSelectedForm();
-
-  const dataService = useDataService();
-  const recordId = useRecordId();
-
-  const { getSchema } = useMetadata();
-
-  const setState = useContextSetValue(DataFormContext);
-
-  const columns = useMemo(() => getColumns(form), [form]);
-
-  const queryKey = useMemo(
-    () => ['data', 'retriveRecord', schema.logicalName, recordId, columns],
-    [columns, recordId, schema.logicalName]
-  );
-
-  const { data, refetch, isPending } = useQuery<any>({
-    queryKey,
-    queryFn: async () => {
-      if (!recordId) {
-        return null;
-      }
-
-      const record = getRecord({
-        columns,
-        dataService,
-        form,
-        recordId,
-        schema,
-        getSchema,
-      });
-
-      return record;
-    },
-    placeholderData: keepPreviousData,
-    staleTime: 1000 * 60 * 5, // 5 minutes
-  });
-
-  useEffect(() => {
-    setState({
-      record: data,
-    });
-  }, [data, setState]);
-
-  useEffect(() => {
-    setState({
-      dataState: {
-        isFetching: isPending,
-      },
-    });
-  }, [isPending, setState]);
-
-  useEffect(() => {
-    setState({
-      refresh: async () => {
-        await refetch();
-      },
-    });
-  }, [refetch, setState]);
-
-  return null;
-}

package/src/dataform/DataFormProvider/InitialValueResolver.tsx

@@ -1,55 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-
-import { useContextSelector, useContextSetValue } from '../../mutable';
-import { DataFormContext } from '../context';
-import {
-  useDataFormSchema,
-  useFormInstance,
-  useRecordId,
-  useSelectedForm,
-} from '../hooks';
-import { getInitialValues } from '../utils';
-
-export function InitialValueResolver() {
-  const formConfig = useSelectedForm();
-  const schema = useDataFormSchema();
-  const recordId = useRecordId();
-  const record = useContextSelector(DataFormContext, (state) => state.record);
-  const formInstance = useFormInstance();
-
-  const initialValues = useMemo(() => {
-    return getInitialValues({
-      cloneRecord: undefined,
-      form: formConfig,
-      record: record,
-      recordId: recordId,
-      schema: schema,
-      defaultParameters: {},
-      // defaultParameters,
-    });
-  }, [formConfig, record, recordId, schema]);
-
-  const setValue = useContextSetValue(DataFormContext);
-
-  useEffect(() => {
-    setValue({
-      initialValues,
-    });
-  }, [setValue, initialValues]);
-
-  const formInstanceRef = useRef(formInstance);
-  formInstanceRef.current = formInstance;
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      // console.log('resetting form', initialValues);
-      formInstanceRef.current.reset(initialValues);
-    });
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [initialValues]);
-
-  return null;
-}

package/src/dataform/DataFormProvider/ReadonlyInfoResolver.tsx

@@ -1,35 +0,0 @@
-import { useEffect } from 'react';
-
-import { useContextSetValue } from '../../mutable';
-import { DataFormContext } from '../context';
-import { useDataFormSchema, useRecordId } from '../hooks';
-
-export function ReadonlyInfoResolver({
-  setFormReadOnly,
-}: {
-  setFormReadOnly: (value: boolean) => void;
-}) {
-  const schema = useDataFormSchema();
-  const recordId = useRecordId();
-
-  let readonly = false;
-
-  if (schema.restrictions?.disableCreate && !recordId) {
-    readonly = true;
-  }
-
-  if (schema.restrictions?.disableUpdate && recordId) {
-    readonly = true;
-  }
-
-  const setValue = useContextSetValue(DataFormContext);
-
-  useEffect(() => {
-    setValue({
-      isReadonly: readonly,
-    });
-    setFormReadOnly(readonly);
-  }, [setValue, setFormReadOnly, readonly]);
-
-  return null;
-}

package/src/dataform/DataFormProvider/index.tsx

@@ -1,102 +0,0 @@
-import {
-  EntityMainFormCommandItemExperience,
-  Form,
-} from '@headless-adminapp/core/experience/form';
-import {
-  InferredSchemaType,
-  Schema,
-  SchemaAttributes,
-} from '@headless-adminapp/core/schema';
-import { Nullable } from '@headless-adminapp/core/types';
-import { PropsWithChildren, useEffect, useState } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-
-import { useFormValidationStrings } from '../../form/FormValidationStringContext';
-import { useLocale } from '../../locale/useLocale';
-import { useMetadata } from '../../metadata/hooks/useMetadata';
-import { ContextValue, useCreateContextStore } from '../../mutable';
-import { DataFormContext, DataFormContextState } from '../context';
-import { formValidator } from '../utils';
-import { DataResolver } from './DataResolver';
-import { InitialValueResolver } from './InitialValueResolver';
-import { ReadonlyInfoResolver } from './ReadonlyInfoResolver';
-
-export interface DataFormProviderProps<
-  S extends SchemaAttributes = SchemaAttributes
-> {
-  schema: Schema<S>;
-  form: Form<S>;
-  recordId?: string;
-  commands: EntityMainFormCommandItemExperience[][];
-}
-
-export function DataFormProvider<S extends SchemaAttributes = SchemaAttributes>(
-  props: PropsWithChildren<DataFormProviderProps<S>>
-) {
-  const { getSchema } = useMetadata();
-  const [{ language }] = useLocale();
-  const formValidationStrings = useFormValidationStrings();
-
-  const [formReadOnly, setFormReadOnly] = useState(false); // A trick to provide readOnly info to formInstance
-
-  const formInstance = useForm<any>({
-    mode: 'all',
-    defaultValues: {},
-    resolver: formValidator({
-      form: props.form,
-      getSchema,
-      language,
-      schema: props.schema,
-      strings: formValidationStrings,
-      formReadOnly,
-    }),
-    shouldUnregister: false,
-  });
-
-  const contextValue = useCreateContextStore<DataFormContextState<S>>({
-    schema: props.schema,
-    form: props.form,
-    commands: props.commands,
-    dataState: { isFetching: false },
-    recordId: props.recordId,
-    refresh: async () => {}, // Initial value, will be overridden
-    cloneId: undefined,
-    // formInstance,
-    // formInstanceRenderCount: 0,
-    initialValues: {} as Nullable<InferredSchemaType<S>>,
-  });
-
-  useEffect(() => {
-    contextValue.setValue({
-      form: props.form,
-      schema: props.schema,
-      recordId: props.recordId,
-      cloneId: undefined,
-      commands: props.commands,
-    });
-  }, [
-    props.form,
-    props.schema,
-    props.recordId,
-    contextValue,
-    getSchema,
-    props.commands,
-  ]);
-
-  return (
-    <DataFormContext.Provider
-      value={
-        contextValue as unknown as ContextValue<
-          DataFormContextState<SchemaAttributes>
-        >
-      }
-    >
-      <FormProvider {...formInstance}>
-        <DataResolver />
-        <InitialValueResolver />
-        <ReadonlyInfoResolver setFormReadOnly={setFormReadOnly} />
-        {props.children}
-      </FormProvider>
-    </DataFormContext.Provider>
-  );
-}

package/src/dataform/context.ts

@@ -1,53 +0,0 @@
-import {
-  EntityMainFormCommandItemExperience,
-  Form,
-} from '@headless-adminapp/core/experience/form';
-import {
-  InferredSchemaType,
-  Schema,
-  SchemaAttributes,
-} from '@headless-adminapp/core/schema';
-import { Data } from '@headless-adminapp/core/transport';
-import { Nullable } from '@headless-adminapp/core/types';
-
-import { createContext } from '../mutable';
-
-export type DataFormContextState<
-  SA extends SchemaAttributes = SchemaAttributes
-> = {
-  // from props
-  schema: Schema<SA>;
-  form: Form<SA>;
-  recordId?: string | number;
-  cloneId?: string | number;
-  commands: EntityMainFormCommandItemExperience[][];
-
-  // internal state (visual)
-  // field visibilities
-  // disabled fields
-  // form state (dirty, touched, readonly, etc)
-  activeTab?: string;
-
-  // internal state (data)
-  record?: Data<InferredSchemaType<SA>>;
-  cloneRecord?: Data<InferredSchemaType<SA>>;
-  isReadonly?: boolean;
-
-  dataState: {
-    isFetching: boolean;
-    isError?: boolean;
-  };
-
-  refresh: () => Promise<void>;
-
-  // form
-  initialValues: Nullable<InferredSchemaType<SA>>;
-  // formInstance: UseFormReturn<any, any, undefined>;
-  // formInstanceRenderCount: number;
-
-  // other
-  // config: FormConfig;
-  // useCustomState?: () => unknown;
-};
-
-export const DataFormContext = createContext<DataFormContextState>();

package/src/dataform/hooks/index.ts

@@ -1,11 +0,0 @@
-export * from './useFormInstance';
-export * from './useFormIsDirty';
-export * from './useFormIsReadonly';
-export * from './useFormNotifications';
-export * from './useFormRecord';
-export * from './useFormSave';
-export * from './useFormSchema';
-export * from './useMainFormCommands';
-export * from './useRecordId';
-export * from './useRecordTitle';
-export * from './useSelectedForm';

package/src/dataform/hooks/useFormInstance.ts

@@ -1,6 +0,0 @@
-import { useFormContext } from 'react-hook-form';
-
-export function useFormInstance() {
-  const formInstance = useFormContext();
-  return formInstance;
-}

package/src/dataform/hooks/useFormIsDirty.ts

@@ -1,7 +0,0 @@
-import { useFormInstance } from './useFormInstance';
-
-export function useFormIsDirty() {
-  const formInstance = useFormInstance();
-
-  return Object.keys(formInstance.formState.dirtyFields).length > 0;
-}

package/src/dataform/hooks/useFormIsReadonly.ts

@@ -1,11 +0,0 @@
-import { useContextSelector } from '../../mutable';
-import { DataFormContext } from '../context';
-
-export function useFormIsReadonly() {
-  const readonly = useContextSelector(
-    DataFormContext,
-    (state) => state.isReadonly
-  );
-
-  return readonly;
-}

package/src/dataform/hooks/useFormNotifications.ts

@@ -1,46 +0,0 @@
-import { useMemo } from 'react';
-
-import { useFormInstance } from './useFormInstance';
-import { useFormIsReadonly } from './useFormIsReadonly';
-
-export function useFormNotifications() {
-  const readonly = useFormIsReadonly();
-
-  const formInstance = useFormInstance();
-
-  const formInstanceAvailable = !!formInstance;
-
-  return useMemo(() => {
-    type Notification = {
-      level: 'info' | 'warning' | 'error';
-      message: string;
-    };
-
-    const notifications: Notification[] = [];
-
-    if (readonly) {
-      notifications.push({
-        level: 'warning',
-        message: 'This record is read only',
-      });
-    }
-
-    if (
-      formInstanceAvailable &&
-      formInstance.formState.isSubmitted &&
-      Object.keys(formInstance.formState.errors).length > 0
-    ) {
-      notifications.push({
-        level: 'error',
-        message: 'Please fill in the required fields',
-      });
-    }
-
-    return notifications;
-  }, [
-    formInstanceAvailable,
-    formInstance?.formState.errors,
-    formInstance?.formState.isSubmitted,
-    readonly,
-  ]);
-}

package/src/dataform/hooks/useFormRecord.ts

@@ -1,7 +0,0 @@
-import { useContextSelector } from '../../mutable';
-import { DataFormContext } from '../context';
-
-export function useFormRecord() {
-  const record = useContextSelector(DataFormContext, (state) => state.record);
-  return record;
-}