@duke333/builder-ui 0.1.0 → 0.1.1

package/README.md

@@ -58,11 +58,81 @@ export default function RuntimePage() {
 `DynamicView` нь form + list нийлсэн CRUD screen. Харин зөвхөн form эсвэл зөвхөн
 grid/list хэрэгтэй бол `DynamicForm`, `DynamicList`-ийг шууд ашиглана.
 
+## Integration API
+
+Host app нэг builder client object-оор API, hooks, route config-оо авах бол:
+
+```ts
+import { createBuilderIntegration } from "@duke333/builder-ui/integration";
+import { api } from "@/lib/api/apiClient";
+
+export const builder = createBuilderIntegration({
+  transport: api,
+  adminBasePath: "/admin/dev/builder",
+});
+```
+
+Үр дүнд нь:
+
+- `builder.api`
+- `builder.hooks`
+- `builder.routes`
+
+## Default Admin Pages
+
+Admin home/forms/lists/views screen-үүдийг host app дотор олон wrapper файлгүйгээр
+үүсгэх бол:
+
+```tsx
+import { createBuilderAdminPages } from "@duke333/builder-ui/admin";
+import { createBuilderIntegration } from "@duke333/builder-ui/integration";
+import { api } from "@/lib/api/apiClient";
+
+const integration = createBuilderIntegration({
+  transport: api,
+  adminBasePath: "/admin/dev/builder",
+});
+
+export const builderAdmin = createBuilderAdminPages({
+  hooks: integration.hooks,
+  routes: {
+    adminBasePath: integration.routes.adminBasePath,
+  },
+});
+```
+
+Route file дээр:
+
+```tsx
+export default function Page() {
+  return <builderAdmin.AdminFormsPage />;
+}
+```
+
+New/edit route дээр:
+
+```tsx
+export default function Page() {
+  return <builderAdmin.AdminNewFormPage />;
+}
+
+export default function EditPage({ searchParams }: { searchParams: { id?: string } }) {
+  return <builderAdmin.AdminEditFormPage formId={searchParams.id} />;
+}
+```
+
+Available default admin pages:
+
+- `AdminHomePage`
+- `AdminFormsPage`, `AdminNewFormPage`, `AdminEditFormPage`
+- `AdminListsPage`, `AdminNewListPage`, `AdminEditListPage`
+- `AdminViewsPage`, `AdminNewViewPage`, `AdminEditViewPage`
+
 ## Host UI Adapter
 
-Package нь shadcn/ui-г шууд эзэмшихгүй. Host app өөрийн Button, Dialog, DataGrid,
-form renderer зэрэг design-system component-уудаа adapter-аар өгнө. Ингэснээр portal
-энгийн shadcn app хэвээр, builder нь нэмэлт reusable layer хэвээр үлдэнэ.
+Package нь shadcn/ui-г шууд эзэмшихгүй. Default admin pages нь dependency-free HTML
+controls ашиглана. Host app өөрийн Button, Dialog, DataGrid, form renderer зэрэг
+design-system component-уудаа adapter-аар өгвөл custom UI layer ашиглаж болно.
 
 ## Publish / Update
 

package/dist/admin/index.d.ts

@@ -1,6 +1,9 @@
 import * as react from 'react';
 import { ReactNode, ComponentType } from 'react';
+import { BuilderApiContracts } from '../api/index.js';
+import { BuilderHooks } from '../hooks/index.js';
 import { UseFormReturn, UseFieldArrayReturn, Resolver } from 'react-hook-form';
+import '@tanstack/react-query';
 
 declare const BUILDER_EDITOR_NONE_VALUE = "__none";
 type BuilderEditorSelectOption = {
@@ -428,6 +431,165 @@ declare function createBuilderListEditorPageComponent<TEntity extends BuilderEdi
     listId?: string;
 }) => react.JSX.Element;
 
+type BuilderDefaultOption = {
+    value: string;
+    label: string;
+};
+type BuilderDefaultFormEditorBodyOptions = {
+    backHref: string;
+    fieldTypeOptions: BuilderDefaultOption[];
+    formTriggerEventOptions: BuilderDefaultOption[];
+    fieldTriggerEventOptions: BuilderDefaultOption[];
+};
+type BuilderDefaultListEditorBodyOptions = {
+    backHref: string;
+    listTriggerEventOptions: BuilderDefaultOption[];
+};
+declare function createBuilderDefaultFormEditorBody<TFieldType extends string, TTriggerEvent extends string>(options: BuilderDefaultFormEditorBodyOptions): ({ formId, form, fieldArray, subformArray, triggerArray, fields, sourceType, sourceTable, tables, emptyField, emptyTrigger, isSaving, importFieldsFromTable, }: BuilderFormEditorBodyProps<TFieldType, TTriggerEvent>) => react.JSX.Element;
+declare function createBuilderDefaultListEditorBody<TTriggerEvent extends string>(options: BuilderDefaultListEditorBodyOptions): ({ listId, form, columnArray, triggerArray, sourceType, sourceTable, tables, emptyColumn, emptyTrigger, isSaving, importColumnsFromTable, }: BuilderListEditorBodyProps<TTriggerEvent>) => react.JSX.Element;
+
+type BuilderDefaultEntity = {
+    id: string;
+    title: string;
+    description?: string | null;
+};
+type BuilderDefaultEntityManagerLabels<TEntity extends BuilderDefaultEntity> = {
+    title: string;
+    description: string;
+    searchPlaceholder: string;
+    emptyTitle: string;
+    emptyDescription: string;
+    addLabel: string;
+    editLabel: string;
+    replicateLabel: string;
+    deleteLabel: string;
+    runtimeLabel: string;
+    deleteConfirm(entity: TEntity): string;
+    replicatePrompt(entity: TEntity): string;
+    replicateDefaultTitle(entity: TEntity): string;
+};
+type BuilderDefaultEntityListResult<TEntity> = {
+    items: TEntity[];
+    total: number;
+};
+type BuilderDefaultEntityQueryResult<TEntity> = {
+    data?: BuilderDefaultEntityListResult<TEntity>;
+    isPending: boolean;
+    isError?: boolean;
+};
+type BuilderDefaultEntityMutation<TInput> = {
+    mutateAsync(input: TInput): Promise<unknown>;
+    isPending?: boolean;
+};
+type BuilderDefaultEntityManagerState = {
+    page: number;
+    pageSize: number;
+    search: string;
+};
+type BuilderDefaultEntityManagerDependencies<TEntity extends BuilderDefaultEntity, TQuery> = {
+    labels: BuilderDefaultEntityManagerLabels<TEntity>;
+    createHref?: string;
+    editHref(entity: TEntity): string;
+    runtimeHref?: (entity: TEntity) => string;
+    getDetail?: (entity: TEntity) => string;
+    buildQuery(state: BuilderDefaultEntityManagerState): TQuery;
+    hooks: {
+        useEntities(query: TQuery): BuilderDefaultEntityQueryResult<TEntity>;
+        useDelete(): BuilderDefaultEntityMutation<string>;
+        useReplicate(): BuilderDefaultEntityMutation<{
+            id: string;
+            input: {
+                title?: string;
+            };
+        }>;
+    };
+};
+declare function createBuilderDefaultEntityManagerComponent<TEntity extends BuilderDefaultEntity, TQuery>(deps: BuilderDefaultEntityManagerDependencies<TEntity, TQuery>): () => react.JSX.Element;
+
+type BuilderAdminEntity = BuilderDefaultEntity & {
+    key?: string;
+};
+type BuilderAdminListResponse<TEntity extends BuilderAdminEntity> = {
+    items: TEntity[];
+    total: number;
+};
+type BuilderAdminListQuery = {
+    page?: number;
+    pageSize?: number;
+    search?: string;
+};
+type BuilderAdminPageContracts = BuilderApiContracts & {
+    BuilderDbTable: BuilderEditorDbTable<string>;
+    BuilderForm: BuilderAdminEntity & BuilderFormEditorEntity<string, string>;
+    BuilderList: BuilderAdminEntity & BuilderListEditorEntity<string>;
+    BuilderView: BuilderAdminEntity & BuilderViewEditorEntity<unknown>;
+    ListBuilderFormsQuery: BuilderAdminListQuery;
+    ListBuilderListsQuery: BuilderAdminListQuery;
+    ListBuilderViewsQuery: BuilderAdminListQuery;
+    ListBuilderFormsResponse: BuilderAdminListResponse<BuilderAdminEntity>;
+    ListBuilderListsResponse: BuilderAdminListResponse<BuilderAdminEntity>;
+    ListBuilderViewsResponse: BuilderAdminListResponse<BuilderAdminEntity>;
+};
+type BuilderAdminPagesRoutes = {
+    adminBasePath?: string;
+    runtimeBasePath?: string;
+    formsPath?: string;
+    newFormPath?: string;
+    editFormPath?: (id: string) => string;
+    runtimeFormPath?: (id: string) => string;
+    listsPath?: string;
+    newListPath?: string;
+    editListPath?: (id: string) => string;
+    runtimeListPath?: (id: string) => string;
+    viewsPath?: string;
+    newViewPath?: string;
+    editViewPath?: (id: string) => string;
+    runtimeViewPath?: (id: string) => string;
+};
+type BuilderAdminPagesOptions<C extends BuilderAdminPageContracts> = {
+    hooks: BuilderHooks<C>;
+    routes?: BuilderAdminPagesRoutes;
+    fieldTypeOptions?: BuilderDefaultOption[];
+    formTriggerEventOptions?: BuilderDefaultOption[];
+    listTriggerEventOptions?: BuilderDefaultOption[];
+    fieldTriggerEventOptions?: BuilderDefaultOption[];
+    permissionOptions?: BuilderDefaultOption[];
+    defaultPermission?: string;
+    notifySuccess?(message: string): void;
+    notifyError?(error: unknown): void;
+    parseViewTriggers?(value: string): unknown[];
+};
+declare function createBuilderAdminPages<C extends BuilderAdminPageContracts>({ hooks, routes, fieldTypeOptions, formTriggerEventOptions, listTriggerEventOptions, fieldTriggerEventOptions, permissionOptions, defaultPermission, notifySuccess, notifyError, parseViewTriggers, }: BuilderAdminPagesOptions<C>): {
+    AdminHomePage: () => react.JSX.Element;
+    AdminFormsPage: () => react.JSX.Element;
+    AdminNewFormPage: () => react.JSX.Element;
+    AdminEditFormPage: ({ formId }: {
+        formId?: string;
+    }) => react.JSX.Element;
+    AdminListsPage: () => react.JSX.Element;
+    AdminNewListPage: () => react.JSX.Element;
+    AdminEditListPage: ({ listId }: {
+        listId?: string;
+    }) => react.JSX.Element;
+    AdminViewsPage: () => react.JSX.Element;
+    AdminNewViewPage: () => react.JSX.Element;
+    AdminEditViewPage: ({ viewId }: {
+        viewId?: string;
+    }) => react.JSX.Element;
+    routes: {
+        adminBasePath: string;
+        formsPath: string;
+        newFormPath: string;
+        editFormPath: (id: string) => string;
+        listsPath: string;
+        newListPath: string;
+        editListPath: (id: string) => string;
+        viewsPath: string;
+        newViewPath: string;
+        editViewPath: (id: string) => string;
+    };
+};
+
 type BuilderEntityManagerEntity = {
     id: string;
     title: string;
@@ -563,6 +725,35 @@ declare function createBuilderEntityDialogManagerComponent<TEntity extends Build
     query: TQuery;
 }, TQuery, TController>(deps: BuilderEntityDialogManagerDependencies<TEntity, TColumn, TState, TQuery, TController>): () => react.JSX.Element;
 
+type BuilderOptionEntity$1 = {
+    id: string;
+    title: string;
+};
+type BuilderDefaultViewEditorContracts = BuilderApiContracts & {
+    BuilderForm: BuilderOptionEntity$1;
+    BuilderList: BuilderOptionEntity$1;
+    BuilderView: BuilderViewEditorEntity & {
+        id: string;
+        title: string;
+    };
+};
+type BuilderDefaultViewEditorPageOptions<C extends BuilderDefaultViewEditorContracts> = {
+    hooks: BuilderHooks<C>;
+    backHref: string;
+    editHref(id: string): string;
+    permissionOptions: Array<{
+        value: string;
+        label: string;
+    }>;
+    defaultPermission: string;
+    parseTriggers(value: string): unknown[];
+    notifySuccess?(message: string): void;
+    notifyError?(error: unknown): void;
+};
+declare function createBuilderDefaultViewEditorPage<C extends BuilderDefaultViewEditorContracts>(options: BuilderDefaultViewEditorPageOptions<C>): ({ viewId }: {
+    viewId?: string;
+}) => react.JSX.Element;
+
 type BuilderOptionEntity = {
     id: string;
     title: string;
@@ -628,4 +819,55 @@ declare function createBuilderViewDialogComponent<TView extends BuilderViewEdito
     id: string;
 }, TForm extends BuilderOptionEntity, TList extends BuilderOptionEntity, TInput>(deps: BuilderViewDialogDependencies<TView, TForm, TList, TInput>): ({ open, editing, forms, lists, onClose, onSave, isSaving, }: BuilderViewDialogProps<TView, TForm, TList, TInput>) => react.JSX.Element;
 
-export { BUILDER_EDITOR_NONE_VALUE, type BuilderEditorDbTable, type BuilderEditorSelectOption, type BuilderEditorTriggerValues, type BuilderEntityDialogManagerDependencies, type BuilderEntityManagerActions, type BuilderEntityManagerAddButtonProps, type BuilderEntityManagerDataGridProps, type BuilderEntityManagerDeleteDialogProps, type BuilderEntityManagerDependencies, type BuilderEntityManagerDialogAddButtonProps, type BuilderEntityManagerEditorDialogProps, type BuilderEntityManagerEntity, type BuilderEntityManagerHookResult, type BuilderEntityManagerLabels, type BuilderEntityManagerMutation, type BuilderFormEditorBodyProps, type BuilderFormEditorEntity, type BuilderFormEditorFieldValues, type BuilderFormEditorLayoutGroupValues, type BuilderFormEditorPageDependencies, type BuilderFormEditorValues, type BuilderListEditorBodyProps, type BuilderListEditorColumnValues, type BuilderListEditorEntity, type BuilderListEditorPageDependencies, type BuilderListEditorValues, type BuilderViewDialogBodyProps, type BuilderViewDialogDependencies, type BuilderViewDialogProps, type BuilderViewDialogShellProps, type BuilderViewEditorEntity, type BuilderViewEditorValues, builderEditorOptionsToText, builderEditorSearchFieldsToText, builderEditorTextToOptions, builderEditorTextToSearchFields, builderFormEditorDefaultLayoutGroups, builderFormEditorDefaultSpan, builderFormEditorFieldsFromTable, builderFormEditorInputFromValues, builderFormEditorValuesFromEntity, builderListEditorColumnsFromTable, builderListEditorInputFromValues, builderListEditorValuesFromEntity, builderViewEditorInputFromValues, builderViewEditorValuesFromEntity, createBuilderEntityDialogManagerComponent, createBuilderEntityManagerComponent, createBuilderFormEditorPageComponent, createBuilderListEditorPageComponent, createBuilderViewDialogComponent, getBuilderEditorTriggerRoute };
+declare const builderFormLayoutDragDataType = "application/x-winu-builder-layout-field";
+type BuilderFormLayoutItem = {
+    key: string;
+    kind: "field" | "subform";
+    meta: string;
+    span: number;
+};
+type BuilderFormLayoutDragPayload = {
+    type: "palette";
+    key: string;
+} | {
+    type: "layout";
+    groupIndex: number;
+    fieldIndex: number;
+    key: string;
+};
+declare function clampBuilderFormLayoutSpan(span: number, columns: 6 | 8 | 12): number;
+declare function swapBuilderFormLayoutItems<T>(items: T[], from: number, to: number): T[];
+declare function nextBuilderFormLayoutGroupId(groups: BuilderFormEditorLayoutGroupValues[]): string;
+declare function serializeBuilderFormLayoutDragPayload(payload: BuilderFormLayoutDragPayload): string;
+declare function parseBuilderFormLayoutDragPayload(raw: string): {
+    type: "palette";
+    key: string;
+    groupIndex?: undefined;
+    fieldIndex?: undefined;
+} | {
+    type: "layout";
+    groupIndex: number | undefined;
+    fieldIndex: number | undefined;
+    key: string;
+} | null;
+type UseBuilderFormLayoutEditorArgs<TFieldType extends string, TTriggerEvent extends string> = {
+    form: UseFormReturn<BuilderFormEditorValues<TFieldType, TTriggerEvent>>;
+    fields: BuilderFormEditorFieldValues<TFieldType>[];
+    subforms?: BuilderFormEditorSubformValues[];
+};
+declare function useBuilderFormLayoutEditor<TFieldType extends string, TTriggerEvent extends string>({ form, fields, subforms }: UseBuilderFormLayoutEditorArgs<TFieldType, TTriggerEvent>): {
+    assignedKeys: Set<string>;
+    layoutGroups: BuilderFormEditorLayoutGroupValues[];
+    layoutItems: BuilderFormLayoutItem[];
+    unassignedItems: BuilderFormLayoutItem[];
+    addGroup: () => void;
+    addItemToGroup: (groupIndex: number, itemKey: string, insertAt?: number) => void;
+    addItemToNewGroup: (itemKey: string) => void;
+    applyDragPayload: (payload: BuilderFormLayoutDragPayload | null, targetGroupIndex: number, targetFieldIndex?: number) => void;
+    resetDefaultLayout: () => void;
+    setGroups: (groups: BuilderFormEditorLayoutGroupValues[]) => void;
+    updateGroup: (groupIndex: number, group: BuilderFormEditorLayoutGroupValues) => void;
+    updateGroupFields: (groupIndex: number, updater: (fields: BuilderFormEditorLayoutGroupValues["fields"]) => BuilderFormEditorLayoutGroupValues["fields"]) => void;
+};
+
+export { BUILDER_EDITOR_NONE_VALUE, type BuilderAdminPageContracts, type BuilderAdminPagesOptions, type BuilderAdminPagesRoutes, type BuilderDefaultEntity, type BuilderDefaultEntityListResult, type BuilderDefaultEntityManagerDependencies, type BuilderDefaultEntityManagerLabels, type BuilderDefaultEntityManagerState, type BuilderDefaultEntityMutation, type BuilderDefaultEntityQueryResult, type BuilderDefaultFormEditorBodyOptions, type BuilderDefaultListEditorBodyOptions, type BuilderDefaultOption, type BuilderDefaultViewEditorContracts, type BuilderDefaultViewEditorPageOptions, type BuilderEditorDbTable, type BuilderEditorSelectOption, type BuilderEditorTriggerValues, type BuilderEntityDialogManagerDependencies, type BuilderEntityManagerActions, type BuilderEntityManagerAddButtonProps, type BuilderEntityManagerDataGridProps, type BuilderEntityManagerDeleteDialogProps, type BuilderEntityManagerDependencies, type BuilderEntityManagerDialogAddButtonProps, type BuilderEntityManagerEditorDialogProps, type BuilderEntityManagerEntity, type BuilderEntityManagerHookResult, type BuilderEntityManagerLabels, type BuilderEntityManagerMutation, type BuilderFormEditorBodyProps, type BuilderFormEditorEntity, type BuilderFormEditorFieldValues, type BuilderFormEditorLayoutGroupValues, type BuilderFormEditorPageDependencies, type BuilderFormEditorValues, type BuilderFormLayoutDragPayload, type BuilderFormLayoutItem, type BuilderListEditorBodyProps, type BuilderListEditorColumnValues, type BuilderListEditorEntity, type BuilderListEditorPageDependencies, type BuilderListEditorValues, type BuilderViewDialogBodyProps, type BuilderViewDialogDependencies, type BuilderViewDialogProps, type BuilderViewDialogShellProps, type BuilderViewEditorEntity, type BuilderViewEditorValues, builderEditorOptionsToText, builderEditorSearchFieldsToText, builderEditorTextToOptions, builderEditorTextToSearchFields, builderFormEditorDefaultLayoutGroups, builderFormEditorDefaultSpan, builderFormEditorFieldsFromTable, builderFormEditorInputFromValues, builderFormEditorValuesFromEntity, builderFormLayoutDragDataType, builderListEditorColumnsFromTable, builderListEditorInputFromValues, builderListEditorValuesFromEntity, builderViewEditorInputFromValues, builderViewEditorValuesFromEntity, clampBuilderFormLayoutSpan, createBuilderAdminPages, createBuilderDefaultEntityManagerComponent, createBuilderDefaultFormEditorBody, createBuilderDefaultListEditorBody, createBuilderDefaultViewEditorPage, createBuilderEntityDialogManagerComponent, createBuilderEntityManagerComponent, createBuilderFormEditorPageComponent, createBuilderListEditorPageComponent, createBuilderViewDialogComponent, getBuilderEditorTriggerRoute, nextBuilderFormLayoutGroupId, parseBuilderFormLayoutDragPayload, serializeBuilderFormLayoutDragPayload, swapBuilderFormLayoutItems, useBuilderFormLayoutEditor };