@backstage/plugin-home-react/dist/alpha.d.ts

A Backstage plugin that contains react components helps you build a home page

import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
import { AppNode } from '@backstage/frontend-plugin-api';
import { ReactElement, JSX } from 'react';
import { d as CardLayout, e as CardSettings, a as ComponentParts } from './types/extensions.d-BO9FVXbP.js';
import '@backstage/core-plugin-api';
import 'react/jsx-runtime';
import '@rjsf/utils';

/**
 * Translation reference for the home-react plugin.
 * Contains localized text strings for home page components and settings modals.
 *
 * @alpha
 */
declare const homeReactTranslationRef: _backstage_frontend_plugin_api.TranslationRef<"home-react", {
    readonly "settingsModal.title": "Settings";
    readonly "settingsModal.closeButtonTitle": "Close";
    readonly "cardExtension.settingsButtonTitle": "Settings";
}>;

/**
 * Extension data for homepage widgets, bundling the rendered component
 * with its metadata.
 *
 * @alpha
 */
interface HomePageWidgetData {
    /**
     * The originating app node for this widget.
     */
    node: AppNode;
    /**
     * The rendered widget component (typically a card with header, content, etc.)
     */
    component: ReactElement;
    /**
     * Optional name identifier for the widget
     */
    name?: string;
    /**
     * Optional title displayed in the widget header
     */
    title?: string;
    /**
     * Optional description shown in widget catalogs or configuration UIs
     */
    description?: string;
    /**
     * Optional layout hints for positioning and sizing
     */
    layout?: CardLayout;
    /**
     * Optional settings schema for widget configuration
     */
    settings?: CardSettings;
}
/**
 * Extension data ref for homepage widgets.
 *
 * This follows the pattern from FormFieldBlueprint, bundling the component
 * and metadata into a single comprehensive data ref rather than outputting
 * them separately.
 *
 * @alpha
 */
declare const homePageWidgetDataRef: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<HomePageWidgetData, "home.widget.data", {}>;
/**
 * Props provided to a home page layout component.
 *
 * @alpha
 */
interface HomePageLayoutProps {
    /**
     * The list of widget elements and metadata to render on the home page.
     */
    widgets: Array<HomePageWidgetData>;
}
/**
 * Extension data ref for home page layout components.
 *
 * A layout receives the collected widgets and is responsible for arranging
 * them on the home page. This follows the same pattern as
 * EntityContentLayoutBlueprint in the catalog plugin.
 *
 * @alpha
 */
declare const homePageLayoutComponentDataRef: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<(props: HomePageLayoutProps) => JSX.Element, "home.layout.component", {}>;

/**
 * Parameters for creating a home page widget extension.
 *
 * @alpha
 */
interface HomePageWidgetBlueprintParams {
    /**
     * Optional name for the widget. If not provided, the extension will use only its kind
     * in the extension ID.
     */
    name?: string;
    /**
     * Optional title displayed for the widget, used as the default card heading.
     */
    title?: string;
    /**
     * Optional description shown in the widget catalog when adding new cards.
     */
    description?: string;
    /**
     * Component parts rendered within the card.
     */
    components: () => Promise<ComponentParts>;
    /**
     * Layout hints used by the customizable grid.
     */
    layout?: CardLayout;
    /**
     * Schema used to configure widget settings.
     */
    settings?: CardSettings;
    /**
     * Default props forwarded to the rendered widget component.
     */
    componentProps?: Record<string, unknown>;
}
/**
 * Creates widgets that can be installed into the home page grid.
 *
 * @alpha
 */
declare const HomePageWidgetBlueprint: _backstage_frontend_plugin_api.ExtensionBlueprint<{
    kind: "home-page-widget";
    params: HomePageWidgetBlueprintParams;
    output: _backstage_frontend_plugin_api.ExtensionDataRef<HomePageWidgetData, "home.widget.data", {}>;
    inputs: {};
    config: {};
    configInput: {};
    dataRefs: {
        widget: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<HomePageWidgetData, "home.widget.data", {}>;
    };
}>;

/**
 * Parameters for creating a home page layout extension.
 *
 * @alpha
 */
interface HomePageLayoutBlueprintParams {
    /**
     * Async loader that returns the layout component.
     * The component receives the collected widgets and renders them.
     */
    loader: () => Promise<(props: HomePageLayoutProps) => JSX.Element>;
}
/**
 * Blueprint for creating custom home page layouts.
 *
 * A layout receives the list of installed widgets and is responsible for
 * arranging them on the home page. This follows the same pattern as
 * `EntityContentLayoutBlueprint` in the catalog plugin.
 *
 * If no layout extension is installed, the home page uses a built-in default.
 * Users can install their own layout to customize how widgets are arranged.
 *
 * @alpha
 */
declare const HomePageLayoutBlueprint: _backstage_frontend_plugin_api.ExtensionBlueprint<{
    kind: "home-page-layout";
    params: HomePageLayoutBlueprintParams;
    output: _backstage_frontend_plugin_api.ExtensionDataRef<(props: HomePageLayoutProps) => JSX.Element, "home.layout.component", {}>;
    inputs: {};
    config: {};
    configInput: {};
    dataRefs: {
        component: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<(props: HomePageLayoutProps) => JSX.Element, "home.layout.component", {}>;
    };
}>;

export { CardLayout, CardSettings, ComponentParts, HomePageLayoutBlueprint, HomePageWidgetBlueprint, homePageLayoutComponentDataRef, homePageWidgetDataRef, homeReactTranslationRef };
export type { HomePageLayoutBlueprintParams, HomePageLayoutProps, HomePageWidgetBlueprintParams, HomePageWidgetData };