Interfaces

BlockPlugin#

interface BlockPlugin {
  name: string
  isInline?: boolean
  itemName?: string
  label?: string
  hotKey?: string
  render: (props: RenderElementProps) => JSX.Element
  renderItem?: (props: RenderElementProps) => JSX.Element
  icon: React.ReactElement
}

ClickToEditProps#

interface ClickToEditProps {
  pageId: string
  language?: string
}

FetchPagesType#

interface FetchPagesType {
  <T extends boolean>(
    apiKey: string,
    {
      type,
      types,
      tag,
      language,
      page,
      pageSize,
      sort,
      usePagination,
    }: {
      type?: string
      types?: string[]
      tag?: string
      language?: string
      page?: number
      pageSize?: number
      sort?: string
      usePagination: T
    }
  ): Promise<T extends true ? PagesFromListWithPagination : PageFromList[]>
  (
    apiKey: string,
    {
      type,
      types,
      tag,
      language,
      page,
      pageSize,
      sort,
    }: {
      type?: string
      types?: string[]
      tag?: string
      language?: string
      page?: number
      pageSize?: number
      sort?: string
    }
  ): Promise<PageFromList[]>
  (apiKey: string): Promise<PageFromList[]>
}

IBlockType#

interface IBlockType {
  name: string
  label: string
  getDefaultProps: () => object
  hideFromAddMenu?: boolean
  sideEditProps?: Array<ISideEditProp | ISideGroup>
  repeaterItems?: IRepeaterItem[]
  newItemMenuOpen?: boolean
  mapExternalDataToProps?: (externalData: Props, brickProps?: Props) => Props
  playgroundLinkUrl?: string
  playgroundLinkLabel?: string
  category?: string
  tags?: string[]
}

ICleanBlocks#

interface ICleanBlocks {
  blocks: IContentBlock[]
  invalidBlocksTypes: string[]
}

IColor#

interface IColor {
  color: string
  [propName: string]: any
}

IContentBlock#

interface IContentBlock {
  id: string
  type: string
  props: Props
}

ICustomKnobProps#

interface ICustomKnobProps {
  id: string
  value: any
  onChange: any
  isValid: boolean
  errorMessage?: string
}

IImageSource#

interface IImageSource {
  src: string
  placeholderSrc?: string
  srcSet?: string
  alt?: string
  seoName?: string
}

ImageProps#

interface ImageProps {
  propName: string
  alt: string
  maxWidth?: number
  noLazyLoad?: boolean
  aspectRatio?: number
  containerClassName?: string
  containerStyle?: object
  imageClassName?: string
  imageStyle?: object
}

IMeta#

interface IMeta {
  title?: string
  description?: string
  language?: string
  featuredImage?: string
}

IOption#

interface IOption {
  value: any
  label: string
}

IPageType#

interface IPageType {
  name: string
  pluralName: string
  allowedBlockTypes?: string[]
  excludedBlockTypes?: string[]
  defaultLocked?: boolean
  defaultStatus?: PageStatus
  defaultLanguage?: string
  defaultFeaturedImage?: string
  getDefaultContent?: () => string[]
  customFields?: Array<ISideEditProp | ISideGroup>
  getExternalData?: (page: Page) => Promise<Props>
}

IReactBricksContext#

interface IReactBricksContext {
  appId: string
  apiKey: string
  bricks: Bricks
  pageTypes: IPageType[]
  logo: string
  contentClassName: string
  renderLocalLink: RenderLocalLink
  navigate: (path: string) => void
  loginPath: string
  editorPath: string
  playgroundPath: string
  appSettingsPath: string
  previewPath: string
  isDarkColorMode?: boolean
  toggleColorMode?: () => void
  useCssInJs?: boolean
  clickToEditSide?: ClickToEditSide
  customFields?: Array<ISideEditProp | ISideGroup>
  responsiveBreakpoints: ResponsiveBreakpoint[]
  enableAutoSave: boolean
  disableSaveIfInvalidProps: boolean
  enablePreview: boolean
}

IReadAdminContext#

interface IReadAdminContext {
  isAdmin: boolean
  previewMode: boolean
  currentPage: ICurrentPage
}

IRepeaterItem#

interface IRepeaterItem {
  name: string
  itemType: string
  itemLabel?: string
  min?: number
  max?: number
}

ISideEditProp#

interface ISideEditProp {
  name: string
  label: string
  type: SideEditPropType
  component?: React.FC<ICustomKnobProps>
  validate?: (value: any, props?: Props) => boolean | string
  show?: (props: Props) => boolean
  textareaOptions?: {
    height?: number
  }
  imageOptions?: {
    maxWidth: number
  }
  rangeOptions?: {
    min?: number
    max?: number
    step?: number
  }
  selectOptions?: {
    options?: IOption[]
    getOptions?: () => IOption[] | Promise<IOption[]>
    display: OptionsDisplay
  }
}

ISideGroup#

interface ISideGroup {
  groupName: string
  defaultOpen?: boolean
  show?: (props: Props) => boolean
  props: ISideEditProp[]
}

LinkProps#

interface LinkProps {
  href: string
  target?: string
  className?: string
}

MarkPlugin#

interface MarkPlugin {
  name: string
  label?: string
  hotKey?: string
  render: (props: RenderLeafProps) => JSX.Element
  icon: React.ReactElement
}

PageViewerProps#

interface PageViewerProps {
  page: types.Page | null | undefined
}

ReactBricksConfig#

interface ReactBricksConfig {
  appId: string
  apiKey: string
  bricks?: types.Brick<any>[]
  pageTypes?: types.IPageType[]
  logo?: string
  contentClassName?: string
  renderLocalLink: types.RenderLocalLink
  navigate: (path: string) => void
  loginPath?: string
  editorPath?: string
  playgroundPath?: string
  appSettingsPath?: string
  previewPath?: string
  isDarkColorMode?: boolean
  toggleColorMode?: () => void
  useCssInJs?: boolean
  appRootElement: string | HTMLElement
  clickToEditSide?: ClickToEditSide
  customFields?: Array<ISideEditProp | ISideGroup>
  responsiveBreakpoints?: ResponsiveBreakpoint[]
  enableAutoSave?: boolean
  disableSaveIfInvalidProps?: boolean
  enablePreview?: boolean
}

RepeaterProps#

interface RepeaterProps {
  propName: string
  itemProps?: types.Props
  renderWrapper?: (items: React.ReactElement) => React.ReactElement
  renderItemWrapper?: (
    item: React.ReactElement,
    index: number,
    itemsCount: number
  ) => React.ReactElement
}

ResponsiveBreakpoint#

interface ResponsiveBreakpoint {
  type: DeviceType
  width: number | string
  label: string
}

RichTextProps#

interface RichTextProps {
  renderBlock: (props: RenderElementProps) => JSX.Element
  placeholder: string
  propName: string
  allowedFeatures?: types.RichTextFeatures[]
  renderBold?: (props: RenderLeafProps) => JSX.Element
  renderItalic?: (props: RenderLeafProps) => JSX.Element
  renderHighlight?: (props: RenderLeafProps) => JSX.Element
  renderCode?: (props: RenderLeafProps) => JSX.Element
  renderLink?: (props: RenderLinkElementProps) => JSX.Element
  renderUL?: (props: RenderElementProps) => JSX.Element
  renderOL?: (props: RenderElementProps) => JSX.Element
  renderLI?: (props: RenderElementProps) => JSX.Element
  renderH1?: (props: RenderElementProps) => JSX.Element
  renderH2?: (props: RenderElementProps) => JSX.Element
  renderH3?: (props: RenderElementProps) => JSX.Element
  renderH4?: (props: RenderElementProps) => JSX.Element
  renderH5?: (props: RenderElementProps) => JSX.Element
  renderH6?: (props: RenderElementProps) => JSX.Element
  renderQuote?: (props: RenderElementProps) => JSX.Element
}

RichTextExtProps#

interface RichTextExtProps {
  renderBlock: (props: RenderElementProps) => JSX.Element
  propName: string
  placeholder: string
  plugins?: types.RichTextPlugin[]
}

RichTextPlugin#

interface RichTextPlugin {
  type: 'Mark' | 'Block' | 'List'
  name: string
  isInline?: boolean
  itemName?: string
  label: string
  hotKey?: string
  renderElement?: (props: RenderElementProps) => JSX.Element
  renderItemElement?: (props: RenderElementProps) => JSX.Element
  renderLeaf?: (props: RenderLeafProps) => JSX.Element
  toggle: (editor: Editor, plugins: RichTextPlugin[]) => void
  button?: {
    icon: React.ReactElement
    isActive: (editor: Editor) => boolean
  }
  enhanceEditor?: (editor: Editor) => Editor
}

TextProps#

interface TextProps {
  renderBlock: (props: { children: any }) => React.ReactElement
  placeholder: string
  propName: string
}

UsePagesType#

interface UsePagesType {
  <T extends boolean>({
    type,
    types,
    tag,
    language,
    page,
    pageSize,
    sort,
    usePagination,
  }: {
    type?: string
    types?: string[]
    tag?: string
    language: string
    page?: number
    pageSize?: number
    sort?: string
    usePagination: T
  }): UseQueryResult<
    T extends true ? types.PagesFromListWithPagination : types.PageFromList[],
    unknown
  >
  ({
    type,
    types,
    tag,
    language,
    page,
    pageSize,
    sort,
  }: {
    type?: string
    types?: string[]
    language: string
    tag?: string
    page?: number
    pageSize?: number
    sort?: string
  }): UseQueryResult<types.PageFromList[], unknown>
  (): UseQueryResult<types.PageFromList[], unknown>
}

UsePagesPublicType#

interface UsePagesPublicType {
  <T extends boolean>({
    type,
    types,
    tag,
    language,
    page,
    pageSize,
    sort,
    usePagination,
  }: {
    type?: string
    types?: string[]
    tag?: string
    language?: string
    page?: number
    pageSize?: number
    sort?: string
    usePagination: T
  }): UseQueryResult<
    T extends true ? types.PagesFromListWithPagination : types.PageFromList[],
    unknown
  >
  ({
    type,
    types,
    tag,
    language,
    page,
    pageSize,
    sort,
  }: {
    type?: string
    types?: string[]
    tag?: string
    language?: string
    page?: number
    pageSize?: number
    sort?: string
  }): UseQueryResult<types.PageFromList[], unknown>
  (): UseQueryResult<types.PageFromList[], unknown>
}