import { ReactNode } from 'react'; import { ResponsiveMode } from '../src/__components/ResponsiveWidget/ResponsiveWidget'; export type FieldType = 'string' | 'number' | 'enum' | 'enum-inline' | 'boolean' | 'file' | 'array' | 'wysiwyg' | 'color'; type PartialRecord = { [P in K]?: T; }; export type UnresponsivePropBase = { default?: any; responsive?: false; }; export type ResponsivePropBase = { default?: PartialRecord; responsive: true; }; export type PropBase = (UnresponsivePropBase | ResponsivePropBase) & { label?: string; divider?: boolean; clearable?: boolean; isVisible?: (props: any) => boolean; }; export type PropSlot = PropBase & { type: 'slot'; }; export type PropFile = PropBase & { type: 'file'; accept?: string[]; }; export type PropEnum = PropBase & { type: 'enum' | 'enum-inline'; options: string[] | { value: string; label: string; }[]; allowOther?: boolean; }; export type PropWysiwyg = PropBase & { type: 'wysiwyg'; config?: any; }; export type PropArray = PropBase & { type: 'array'; props?: { [key: string]: Prop; }; }; export type PropUrl = PropBase & { type: 'url'; search?: (query: string) => Promise; }; export type PropOther = PropBase & { type: 'string' | 'number' | 'boolean' | 'file' | 'color' | string; }; export type Prop = PropSlot | PropFile | PropEnum | PropWysiwyg | PropArray | PropUrl | PropOther; export type ControlProps = { updateProps: (id: string, path: string, value: any) => void; deleteProp: (path: string) => void; currMod: BuilderModule; updatePath: string; prop: Prop | PropBase; value: any; inheritVal?: boolean; }; export type Control = { type: string; component: (props: ControlProps) => JSX.Element; }; export interface Category { label: string; icon?: string; groups: Group[]; } export interface UrlResult { label: string; slug?: string; value: string; } export interface Provider { /** * Get all pages * @param title title of page to save * @param page data of page to save * @param setPageId function to set page id after creating new page * @param pageId id of page to update * @returns array of pages */ savePage: (title: string, page: (BuilderModule | { id: string; module: string; props: any; })[], setPageId: React.Dispatch>, pageId?: string) => void; /** * Load page data into editor * @param pageId id of page to load * @returns title and data of page */ loadPage: (pageId: string | number) => Promise<{ title: string; data: string; }>; /** * Search for urls to link to in the editor url prop type * @param query text to search for * @returns array of results */ searchUrls: (query: string) => Promise; /** * Object that contains all functions and values relating to the file gallery */ gallery: { /** * Get the url of a file * @param file * @returns {string} url of file */ getFileUrl: (file: any) => string; /** * Get files from the provider * @param setFiles * @param fileTypes */ getFiles: (setFiles: React.Dispatch>, fileTypes: string[], search: string, page: number, setMaxPages: React.Dispatch>) => void; /** * Update file data * @param id * @param data */ updateFile: (id: string, data: any) => void; /** * Upload files to the provider * @param files * @returns */ uploadFiles: (files: File[]) => Promise; /** * Render all files in the file gallery * @param files * @param selectedFile * @param setSelectedFile * @returns React Node(s) to render to the file gallery */ renderFiles: (files: any[], selectedFile: any, setSelectedFile: React.Dispatch>) => ReactNode | ReactNode[]; /** * Render the selected file in the file gallery sidebar * @param selectedFile * @param updateFileData * @param details * @returns React Node to render to the file gallery sidebar */ renderSelectedFile: (selectedFile: any, updateFileData: any, details?: boolean) => ReactNode; }; } export interface Group { label: string; props: { [key: string]: Prop; }; } export type Slot = { id: string; label: string; }; export interface ComponentSettings { props: Category[]; options?: { children?: boolean | { slots: Slot[] | ((props: any) => Slot[]); }; icon?: string; category?: string; }; } export interface Module extends ComponentSettings { name: string; Component: React.FC; ref?: React.RefObject; } export interface BuilderModule { id: string; module: Module; props: any; } export {};