@backstage/plugin-home 0.5.2 → 0.5.3-next.1

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @backstage/plugin-home
 
+## 0.5.3-next.1
+
+### Patch Changes
+
+- d1cfb4e4c4cd: Update set up documentation to export homepage as element instead of React component.
+- 2e4940e1a8f8: Allow more customization for the CustomHomepageGrid
+- Updated dependencies
+  - @backstage/core-components@0.13.2-next.1
+  - @backstage/plugin-catalog-react@1.7.0-next.1
+  - @backstage/catalog-model@1.4.0-next.0
+  - @backstage/core-plugin-api@1.5.2-next.0
+  - @backstage/plugin-home-react@0.1.0-next.1
+  - @backstage/config@1.0.7
+  - @backstage/theme@0.4.0-next.0
+
+## 0.5.3-next.0
+
+### Patch Changes
+
+- 41e8037a8a6d: Extract new plugin-home-react package and deprecate createCardExtension in plugin-home
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.7.0-next.0
+  - @backstage/plugin-home-react@0.1.0-next.0
+  - @backstage/theme@0.4.0-next.0
+  - @backstage/config@1.0.7
+  - @backstage/core-components@0.13.2-next.0
+  - @backstage/core-plugin-api@1.5.1
+  - @backstage/catalog-model@1.3.0
+
 ## 0.5.2
 
 ### Patch Changes

package/README.md

@@ -22,11 +22,9 @@ yarn add --cwd packages/app @backstage/plugin-home
 ```tsx
 import React from 'react';
 
-export const HomePage = () => {
-  return {
-    /* TODO: Compose a Home Page here */
-  };
-};
+export const homePage = (
+  /* TODO: Compose a Home Page here */
+);
 ```
 
 2. Add a route where the homepage will live, presumably `/`.
@@ -35,11 +33,11 @@ export const HomePage = () => {
 
 ```tsx
 import { HomepageCompositionRoot } from '@backstage/plugin-home';
-import { HomePage } from './components/home/HomePage';
+import { homePage } from './components/home/HomePage';
 
 // ...
 <Route path="/" element={<HomepageCompositionRoot />}>
-  <HomePage />
+  {homePage}
 </Route>;
 // ...
 ```
@@ -51,6 +49,8 @@ The Home Page can be composed with regular React components, so there's no magic
 Finally, the `createCardExtension` also accepts a generic, such that Component Developers can indicate to App Integrators what custom props their component will accept, such as the example below where the default category of the random jokes can be set.
 
 ```tsx
+import { createCardExtension } from '@backstage/plugin-home-react';
+
 export const RandomJokeHomePageComponent = homePlugin.provide(
   createCardExtension<{ defaultCategory?: 'programming' | 'any' }>({
     title: 'Random Joke',
@@ -70,15 +70,13 @@ import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import { RandomJokeHomePageComponent } from '@backstage/plugin-home';
 
-export const HomePage = () => {
-  return (
-    <Grid container spacing={3}>
-      <Grid item xs={12} md={4}>
-        <RandomJokeHomePageComponent />
-      </Grid>
+export const homePage = (
+  <Grid container spacing={3}>
+    <Grid item xs={12} md={4}>
+      <RandomJokeHomePageComponent />
     </Grid>
-  );
-};
+  </Grid>
+);
 ```
 
 Additionally, the App Integrator is provided an escape hatch in case the way the card is rendered does not fit their requirements. They may optionally pass the `Renderer`-prop, which will receive the `title`, `content` and optionally `actions`, `settings` and `contextProvider`, if they exist for the component. This allows the App Integrator to render the content in any way they want.
@@ -100,18 +98,16 @@ import { HomePageSearchBar } from '@backstage/plugin-search';
 import { HomePageCalendar } from '@backstage/plugin-gcalendar';
 import { MicrosoftCalendarCard } from '@backstage/plugin-microsoft-calendar';
 
-export const HomePage = () => {
-  return (
-    <CustomHomepageGrid>
-      // Insert the allowed widgets inside the grid
-      <HomePageSearchBar />
-      <HomePageRandomJoke />
-      <HomePageCalendar />
-      <MicrosoftCalendarCard />
-      <HomePageStarredEntities />
-    </CustomHomepageGrid>
-  );
-};
+export const homePage = (
+  <CustomHomepageGrid>
+    // Insert the allowed widgets inside the grid
+    <HomePageSearchBar />
+    <HomePageRandomJoke />
+    <HomePageCalendar />
+    <MicrosoftCalendarCard />
+    <HomePageStarredEntities />
+  </CustomHomepageGrid>
+);
 ```
 
 ### Creating Customizable Components
@@ -121,6 +117,8 @@ want to add additional configuration like component size or settings, you can de
 property:
 
 ```tsx
+import { createCardExtension } from '@backstage/plugin-home-react';
+
 export const RandomJokeHomePageComponent = homePlugin.provide(
   createCardExtension<{ defaultCategory?: 'any' | 'programming' }>({
     name: 'HomePageRandomJoke',
@@ -178,6 +176,8 @@ properties. The `settings.schema` object should follow
 must be `object`.
 
 ```tsx
+import { createCardExtension } from '@backstage/plugin-home-react';
+
 export const HomePageRandomJoke = homePlugin.provide(
   createCardExtension<{ defaultCategory?: 'any' | 'programming' }>({
     name: 'HomePageRandomJoke',
@@ -241,4 +241,5 @@ Additionally, the API is at a very early state, so contributing with additional
 
 ### Homepage Templates
 
-We are hoping that we together can build up a collection of Homepage templates. We therefore put together a place where we can collect all the templates for the Home Plugin in the [storybook](https://backstage.io/storybook/?path=/story/plugins-home-templates). If you would like to contribute with a template, start by taking a look at the [DefaultTemplate storybook example to create your own](/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx), and then open a PR with your suggestion.
+We are hoping that we together can build up a collection of Homepage templates. We therefore put together a place where we can collect all the templates for the Home Plugin in the [storybook](https://backstage.io/storybook/?path=/story/plugins-home-templates).
+If you would like to contribute with a template, start by taking a look at the [DefaultTemplate storybook example](/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx) or [CustomizableTemplate storybook example](/packages/app/src/components/home/templates/CustomizableTemplate.stories.tsx) to create your own, and then open a PR with your suggestion.

package/dist/esm/{index-287238a7.esm.js → index-3155d776.esm.js}

@@ -1,30 +1,10 @@
 import React from 'react';
+import { SettingsModal } from '@backstage/plugin-home-react';
 import { Accordion, AccordionSummary, IconButton, Typography, AccordionDetails, Tabs, Tab } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import SettingsIcon from '@material-ui/icons/Settings';
-import 'react-router-dom';
-import { SettingsModal } from '../index.esm.js';
 import { InfoCard } from '@backstage/core-components';
-import '@backstage/core-plugin-api';
-import 'react-grid-layout';
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
-import 'lodash';
-import 'react-use/lib/useObservable';
-import '@material-ui/core/Typography';
-import '@material-ui/core/IconButton';
-import '@material-ui/icons/Delete';
-import '@rjsf/core-v5';
-import '@rjsf/validator-ajv8';
-import '@material-ui/core/List';
-import '@material-ui/core/ListItem';
-import '@material-ui/icons/Add';
-import '@material-ui/core/ListItemText';
-import '@material-ui/core/Button';
-import '@material-ui/icons/Save';
-import '@material-ui/icons/Edit';
-import 'zod';
 
 const useStyles = makeStyles((theme) => ({
   settingsIconButton: {
@@ -100,4 +80,4 @@ const ComponentTab = (props) => {
 };
 
 export { ComponentAccordion, ComponentTab, ComponentTabs };
-//# sourceMappingURL=index-287238a7.esm.js.map
+//# sourceMappingURL=index-3155d776.esm.js.map

package/dist/esm/index-3155d776.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-3155d776.esm.js","sources":["../../src/componentRenderers/ComponentAccordion.tsx","../../src/componentRenderers/ComponentTabs/ComponentTabs.tsx","../../src/componentRenderers/ComponentTabs/ComponentTab.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { SettingsModal } from '@backstage/plugin-home-react';\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Typography,\n  IconButton,\n  Theme,\n} from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport SettingsIcon from '@material-ui/icons/Settings';\n\nconst useStyles = makeStyles((theme: Theme) => ({\n  settingsIconButton: {\n    padding: theme.spacing(0, 1, 0, 0),\n  },\n  contentContainer: {\n    width: '100%',\n  },\n}));\n\nexport const ComponentAccordion = (props: {\n  title: string;\n  expanded?: boolean;\n  Content: () => JSX.Element;\n  Actions?: () => JSX.Element;\n  Settings?: () => JSX.Element;\n  ContextProvider?: (props: any) => JSX.Element;\n}) => {\n  const {\n    title,\n    expanded = false,\n    Content,\n    Actions,\n    Settings,\n    ContextProvider,\n    ...childProps\n  } = props;\n\n  const classes = useStyles();\n  const [settingsIsExpanded, setSettingsIsExpanded] = React.useState(false);\n  const [isExpanded, setIsExpanded] = React.useState(expanded);\n\n  const handleOpenSettings = (e: any) => {\n    e.stopPropagation();\n    setSettingsIsExpanded(prevState => !prevState);\n  };\n\n  const innerContent = (\n    <>\n      {Settings && (\n        <SettingsModal\n          open={settingsIsExpanded}\n          close={() => setSettingsIsExpanded(false)}\n          componentName={title}\n        >\n          <Settings />\n        </SettingsModal>\n      )}\n      <Accordion\n        expanded={isExpanded}\n        onChange={(_e: any, expandedValue: boolean) =>\n          setIsExpanded(expandedValue)\n        }\n      >\n        <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n          {Settings && (\n            <IconButton\n              onClick={handleOpenSettings}\n              className={classes.settingsIconButton}\n            >\n              <SettingsIcon />\n            </IconButton>\n          )}\n          <Typography>{title}</Typography>\n        </AccordionSummary>\n        <AccordionDetails>\n          <div className={classes.contentContainer}>\n            <Content />\n            {Actions && <Actions />}\n          </div>\n        </AccordionDetails>\n      </Accordion>\n    </>\n  );\n\n  return ContextProvider ? (\n    <ContextProvider {...childProps}>{innerContent}</ContextProvider>\n  ) : (\n    innerContent\n  );\n};\n","/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { Tabs, Tab } from '@material-ui/core';\nimport { InfoCard } from '@backstage/core-components';\n\ntype TabType = {\n  label: string;\n  Component: () => JSX.Element;\n};\n\nexport const ComponentTabs = (props: { title: string; tabs: TabType[] }) => {\n  const { title, tabs } = props;\n\n  const [value, setValue] = React.useState(0);\n\n  const handleChange = (_event: any, newValue: number) => {\n    setValue(newValue);\n  };\n\n  return (\n    <InfoCard title={title}>\n      <Tabs value={value} onChange={handleChange}>\n        {tabs.map(t => (\n          <Tab key={t.label} label={t.label} />\n        ))}\n      </Tabs>\n      {tabs.map(({ Component }, idx) => (\n        <div\n          key={idx}\n          {...(idx !== value ? { style: { display: 'none' } } : {})}\n        >\n          <Component />\n        </div>\n      ))}\n    </InfoCard>\n  );\n};\n","/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nexport const ComponentTab = (props: {\n  title: string;\n  Content: () => JSX.Element;\n  ContextProvider?: (props: any) => JSX.Element;\n}) => {\n  const { title, Content, ContextProvider, ...childProps } = props;\n\n  return ContextProvider ? (\n    <ContextProvider {...childProps}>\n      <Content />\n    </ContextProvider>\n  ) : (\n    <Content />\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/{index-966fb783.esm.js → index-c05eb451.esm.js}

@@ -1,17 +1,18 @@
 import React from 'react';
 import { useOutlet } from 'react-router-dom';
-export { CustomHomepageGrid, SettingsModal } from '../index.esm.js';
+export { CustomHomepageGrid } from '../index.esm.js';
 import '@backstage/core-plugin-api';
-import '@material-ui/core';
-import '@material-ui/icons/Settings';
-import '@backstage/core-components';
+import '@backstage/plugin-home-react';
 import 'react-grid-layout';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
+import '@material-ui/core';
 import 'lodash';
 import 'react-use/lib/useObservable';
+import '@backstage/core-components';
 import '@material-ui/core/Typography';
 import '@material-ui/core/IconButton';
+import '@material-ui/icons/Settings';
 import '@material-ui/icons/Delete';
 import '@rjsf/core-v5';
 import '@rjsf/validator-ajv8';
@@ -22,6 +23,7 @@ import '@material-ui/core/ListItemText';
 import '@material-ui/core/Button';
 import '@material-ui/icons/Save';
 import '@material-ui/icons/Edit';
+import '@material-ui/icons/Cancel';
 import 'zod';
 
 const HomepageCompositionRoot = (props) => {
@@ -32,4 +34,4 @@ const HomepageCompositionRoot = (props) => {
 };
 
 export { HomepageCompositionRoot };
-//# sourceMappingURL=index-966fb783.esm.js.map
+//# sourceMappingURL=index-c05eb451.esm.js.map

package/dist/esm/{index-966fb783.esm.js.map → index-c05eb451.esm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-966fb783.esm.js","sources":["../../src/components/HomepageCompositionRoot.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { ReactNode } from 'react';\nimport { useOutlet } from 'react-router-dom';\n\nexport const HomepageCompositionRoot = (props: {\n  title?: string;\n  children?: ReactNode;\n}) => {\n  const outlet = useOutlet();\n  const children = props.children ?? outlet;\n  return <>{children}</>;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmBa,MAAA,uBAAA,GAA0B,CAAC,KAGlC,KAAA;AAtBN,EAAA,IAAA,EAAA,CAAA;AAuBE,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAM,MAAA,QAAA,GAAA,CAAW,EAAM,GAAA,KAAA,CAAA,QAAA,KAAN,IAAkB,GAAA,EAAA,GAAA,MAAA,CAAA;AACnC,EAAA,iEAAU,QAAS,CAAA,CAAA;AACrB;;;;"}
+{"version":3,"file":"index-c05eb451.esm.js","sources":["../../src/components/HomepageCompositionRoot.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { ReactNode } from 'react';\nimport { useOutlet } from 'react-router-dom';\n\nexport const HomepageCompositionRoot = (props: {\n  title?: string;\n  children?: ReactNode;\n}) => {\n  const outlet = useOutlet();\n  const children = props.children ?? outlet;\n  return <>{children}</>;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBa,MAAA,uBAAA,GAA0B,CAAC,KAGlC,KAAA;AAtBN,EAAA,IAAA,EAAA,CAAA;AAuBE,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAM,MAAA,QAAA,GAAA,CAAW,EAAM,GAAA,KAAA,CAAA,QAAA,KAAN,IAAkB,GAAA,EAAA,GAAA,MAAA,CAAA;AACnC,EAAA,iEAAU,QAAS,CAAA,CAAA;AACrB;;;;"}

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import * as react from 'react';
 import react__default, { ReactElement, ReactNode } from 'react';
+import * as _backstage_plugin_home_react from '@backstage/plugin-home-react';
+import { createCardExtension as createCardExtension$1, CardExtensionProps as CardExtensionProps$1, CardLayout as CardLayout$1, CardSettings as CardSettings$1, CardConfig as CardConfig$1, ComponentParts as ComponentParts$1, ComponentRenderer as ComponentRenderer$1, RendererProps as RendererProps$1 } from '@backstage/plugin-home-react';
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
-import { RJSFSchema } from '@rjsf/utils';
 
 /** @public */
 type Tool = {
@@ -26,68 +27,6 @@ type ClockConfig = {
     timeZone: string;
 };
 
-/**
- * @public
- */
-type ComponentRenderer = {
-    Renderer?: (props: RendererProps) => JSX.Element;
-};
-/**
- * @public
- */
-type ComponentParts = {
-    Content: (props?: any) => JSX.Element;
-    Actions?: () => JSX.Element;
-    Settings?: () => JSX.Element;
-    ContextProvider?: (props: any) => JSX.Element;
-};
-/**
- * @public
- */
-type RendererProps = {
-    title: string;
-} & ComponentParts;
-/**
- * @public
- */
-type CardExtensionProps<T> = ComponentRenderer & {
-    title?: string;
-} & T;
-/**
- * @public
- */
-type CardLayout = {
-    width?: {
-        minColumns?: number;
-        maxColumns?: number;
-        defaultColumns?: number;
-    };
-    height?: {
-        minRows?: number;
-        maxRows?: number;
-        defaultRows?: number;
-    };
-};
-/**
- * @public
- */
-type CardSettings = {
-    schema?: RJSFSchema;
-};
-/**
- * An extension creator to create card based components for the homepage
- *
- * @public
- */
-declare function createCardExtension<T>(options: {
-    title: string;
-    components: () => Promise<ComponentParts>;
-    name?: string;
-    description?: string;
-    layout?: CardLayout;
-    settings?: CardSettings;
-}): _backstage_core_plugin_api.Extension<(props: CardExtensionProps<T>) => JSX.Element>;
-
 /** @public */
 declare const homePlugin: _backstage_core_plugin_api.BackstagePlugin<{
     root: _backstage_core_plugin_api.RouteRef<undefined>;
@@ -136,7 +75,7 @@ declare const HomePageCompanyLogo: (props: {
     className?: string | undefined;
 }) => JSX.Element;
 /** @public */
-declare const HomePageRandomJoke: (props: CardExtensionProps<{
+declare const HomePageRandomJoke: (props: _backstage_plugin_home_react.CardExtensionProps<{
     defaultCategory?: "any" | "programming" | undefined;
 }>) => JSX.Element;
 /**
@@ -144,13 +83,13 @@ declare const HomePageRandomJoke: (props: CardExtensionProps<{
  *
  * @public
  */
-declare const HomePageToolkit: (props: CardExtensionProps<ToolkitContentProps>) => JSX.Element;
+declare const HomePageToolkit: (props: _backstage_plugin_home_react.CardExtensionProps<ToolkitContentProps>) => JSX.Element;
 /**
  * A component to display a list of starred entities for the user.
  *
  * @public
  */
-declare const HomePageStarredEntities: (props: CardExtensionProps<unknown>) => JSX.Element;
+declare const HomePageStarredEntities: (props: _backstage_plugin_home_react.CardExtensionProps<unknown>) => JSX.Element;
 /**
  * A component to display a configurable list of clocks for various time zones.
  *
@@ -161,14 +100,6 @@ declare const HeaderWorldClock: (props: {
     customTimeFormat?: Intl.DateTimeFormatOptions | undefined;
 }) => JSX.Element | null;
 
-/** @public */
-declare const SettingsModal: (props: {
-    open: boolean;
-    close: Function;
-    componentName: string;
-    children: JSX.Element;
-}) => JSX.Element;
-
 /**
  * Layout configuration that can be passed to the custom home page.
  *
@@ -183,12 +114,78 @@ type LayoutConfiguration = {
 };
 
 /**
+ * Breakpoint options for <CustomHomepageGridProps/>
+ *
+ * @public
+ */
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Props customizing the <CustomHomepageGrid/> component.
+ *
  * @public
  */
 type CustomHomepageGridProps = {
+    /**
+     * Children contain all widgets user can configure on their own homepage.
+     */
     children?: ReactNode;
+    /**
+     * Default layout for the homepage before users have modified it.
+     */
     config?: LayoutConfiguration[];
+    /**
+     * Height of grid row in pixels.
+     * @defaultValue 60
+     */
     rowHeight?: number;
+    /**
+     * Screen width in pixels for different breakpoints.
+     * @defaultValue theme breakpoints
+     */
+    breakpoints?: Record<Breakpoint, number>;
+    /**
+     * Number of grid columns for different breakpoints.
+     * @defaultValue \{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 \}
+     */
+    cols?: Record<Breakpoint, number>;
+    /**
+     * Grid container padding (x, y) in pixels for all or specific breakpoints.
+     * @defaultValue [0, 0]
+     * @example [10, 10]
+     * @example \{ lg: [10, 10] \}
+     */
+    containerPadding?: [number, number] | Record<Breakpoint, [number, number]>;
+    /**
+     * Grid container margin (x, y) in pixels for all or specific breakpoints.
+     * @defaultValue [0, 0]
+     * @example [10, 10]
+     * @example \{ lg: [10, 10] \}
+     */
+    containerMargin?: [number, number] | Record<Breakpoint, [number, number]>;
+    /**
+     * Maximum number of rows user can have in the grid.
+     * @defaultValue unlimited
+     */
+    maxRows?: number;
+    /**
+     * Custom style for grid.
+     */
+    style?: react__default.CSSProperties;
+    /**
+     * Compaction type of widgets in the grid. This controls where widgets are moved in case
+     * they are overlapping in the grid.
+     */
+    compactType?: 'vertical' | 'horizontal' | null;
+    /**
+     * Controls if widgets can overlap in the grid. If true, grid can be placed one over the other.
+     * @defaultValue false
+     */
+    allowOverlap?: boolean;
+    /**
+     * Controls if widgets can collide with each other. If true, grid items won't change position when being dragged over.
+     * @defaultValue false
+     */
+    preventCollision?: boolean;
 };
 /**
  * A component that allows customizing components in home grid layout.
@@ -208,4 +205,55 @@ declare const TemplateBackstageLogo: (props: {
 /** @public */
 declare const TemplateBackstageLogoIcon: () => JSX.Element;
 
-export { CardExtensionProps, CardLayout, CardSettings, ClockConfig, ComponentAccordion, ComponentParts, ComponentRenderer, ComponentTab, ComponentTabs, CustomHomepageGrid, CustomHomepageGridProps, HeaderWorldClock, HomePageCompanyLogo, HomePageRandomJoke, HomePageStarredEntities, HomePageToolkit, HomepageCompositionRoot, LayoutConfiguration, RendererProps, SettingsModal, TemplateBackstageLogo, TemplateBackstageLogoIcon, Tool, ToolkitContentProps, WelcomeTitle, createCardExtension, homePlugin };
+/**
+ * @public
+ * @deprecated Import from `@backstage/plugin-home-react` instead
+ */
+declare const createCardExtension: typeof createCardExtension$1;
+/**
+ * @public
+ * @deprecated Import from `@backstage/plugin-home-react` instead
+ */
+type CardExtensionProps<T> = CardExtensionProps$1<T>;
+/**
+ * @public
+ * @deprecated Import from `@backstage/plugin-home-react` instead
+ */
+type CardLayout = CardLayout$1;
+/**
+ * @public
+ * @deprecated Import from `@backstage/plugin-home-react` instead
+ */
+type CardSettings = CardSettings$1;
+/**
+ * @public
+ * @deprecated Import from `@backstage/plugin-home-react` instead
+ */
+type CardConfig = CardConfig$1;
+/**
+ * @public
+ * @deprecated Import from `@backstage/plugin-home-react` instead
+ */
+type ComponentParts = ComponentParts$1;
+/**
+ * @public
+ * @deprecated Import from `@backstage/plugin-home-react` instead
+ */
+type ComponentRenderer = ComponentRenderer$1;
+/**
+ * @public
+ * @deprecated Import from `@backstage/plugin-home-react` instead
+ */
+type RendererProps = RendererProps$1;
+/**
+ * @public
+ * @deprecated Import from `@backstage/plugin-home-react` instead
+ */
+declare const SettingsModal: (props: {
+    open: boolean;
+    close: Function;
+    componentName: string;
+    children: JSX.Element;
+}) => JSX.Element;
+
+export { Breakpoint, CardConfig, CardExtensionProps, CardLayout, CardSettings, ClockConfig, ComponentAccordion, ComponentParts, ComponentRenderer, ComponentTab, ComponentTabs, CustomHomepageGrid, CustomHomepageGridProps, HeaderWorldClock, HomePageCompanyLogo, HomePageRandomJoke, HomePageStarredEntities, HomePageToolkit, HomepageCompositionRoot, LayoutConfiguration, RendererProps, SettingsModal, TemplateBackstageLogo, TemplateBackstageLogoIcon, Tool, ToolkitContentProps, WelcomeTitle, createCardExtension, homePlugin };