@red-hat-developer-hub/backstage-plugin-dynamic-home-page 1.10.5 → 1.11.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @red-hat-developer-hub/backstage-plugin-dynamic-home-page
 
+## 1.11.0
+
+### Minor Changes
+
+- abc7289: Migrate dynamic homepage to NFS
+
+### Patch Changes
+
+- cf8ee79: Enhance home page layout adaptability when QuickStart is displayed.
+
+  Updated the homepage layout logic to utilize container width monitoring rather than relying on viewport-based Grid breakpoints. This change ensures the illustration card seamlessly switches to a vertical stack when the QuickStart drawer is open, independent of the user's screen resolution.
+
+  Additionally, introduced scrollbars to the onboarding, software catalog, and template sections for improved navigation and usability.
+
+## 1.10.6
+
+### Patch Changes
+
+- b0d352a: Fixed entity cards in "Explore Your Software Catalog" section to display `metadata.title` when available, falling back to `metadata.name` only if title is not set
+
 ## 1.10.5
 
 ### Patch Changes

package/README.md

@@ -2,4 +2,96 @@
 
 This is a dynamic version of the upstream [home page plugin](https://github.com/backstage/backstage/tree/master/plugins/home).
 
-Instead of manually adding supported "home page cards" to a custom route, it allows dynamic plugins to expose such cards.
+Instead of manually adding supported "home page cards" to a custom route, it allows dynamic plugins to expose such cards. The plugin supports both the **New Frontend System (NFS)** and the **legacy** dynamic plugin model (Scalprum).
+
+## New Frontend System
+
+If you're using Backstage's new frontend system, add the plugin to your app:
+
+```tsx
+// packages/app/src/App.tsx
+import { createApp } from '@backstage/frontend-defaults';
+import {
+  homePageDevModule,
+  homepageTranslationsModule,
+} from '@red-hat-developer-hub/backstage-plugin-dynamic-home-page/alpha';
+
+export default createApp({
+  features: [
+    // ... other plugins (nav, signIn, etc.)
+    homePageDevModule,
+    homepageTranslationsModule,
+  ],
+});
+```
+
+The plugin will automatically provide:
+
+- A homepage at `/home` (or the path configured via `page:home`)
+- Default widgets: Onboarding, Entity Catalog, Templates, Quick Access, Search, Recently Visited, Top Visited, and more
+- Customizable or read-only layout based on configuration, default layout being customizable
+
+### Configuration
+
+Add the following to your `app-config.yaml`:
+
+```yaml
+app:
+  extensions:
+    # Register the home page route (default: /)
+    - page:home:
+        config:
+          path: /
+    # Enable visit tracking (optional)
+    - api:home/visits: true
+    - app-root-element:home/visit-listener: true
+    # Configure the dynamic homepage layout
+    - home-page-layout:home/dynamic-homepage-layout:
+        config:
+          customizable: true # or false for read-only layout
+          widgetLayout:
+            RhdhTemplateSection:
+              priority: 300 # priority is considered for only Read-only Grid layout
+              breakpoints:
+                xl: { w: 12, h: 5 }
+                lg: { w: 12, h: 5 }
+                # ... md, sm, xs, xxs
+            RhdhEntitySection:
+              priority: 200
+              breakpoints:
+                xl: { w: 12, h: 7 }
+                # ...
+            RhdhOnboardingSection:
+              priority: 100
+              breakpoints:
+                xl: { w: 12, h: 6 }
+                # ...
+```
+
+### Modules
+
+The following modules are available from the alpha export:
+
+| Module                       | Description                                                                                                             |
+| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `homePageDevModule`          | Home page layout and widgets (Onboarding, Entity, Templates, Quick Access, Search, Recently Visited, Top Visited, etc.) |
+| `homepageTranslationsModule` | i18n translations (en, de, es, fr, it, ja)                                                                              |
+
+### Extensions
+
+The `homePageDevModule` extends the `home` plugin (`@backstage/plugin-home`) with:
+
+- `home-page-layout:home/dynamic-homepage-layout` – Custom layout with config-driven widget arrangement and priority
+- `home-page-widget:home/rhdh-onboarding-section` – Onboarding section
+- `home-page-widget:home/rhdh-entity-section` – Software catalog section
+- `home-page-widget:home/rhdh-template-section` – Templates section
+- `home-page-widget:home/quick-access-card` – Quick access card
+- `home-page-widget:home/search-bar` – Search bar
+- `home-page-widget:home/featured-docs-card` – Featured docs
+- `home-page-widget:home/recently-visited` – Recently visited
+- `home-page-widget:home/top-visited` – Top visited
+- `api:home/quickaccess` – Quick access API
+
+## Legacy System (Dynamic Plugins)
+
+For the legacy Scalprum-based dynamic plugin model, use the main export and configure via `app-config.dynamic.yaml`. See `app-config.dynamic.yaml` in this package for the mount point configuration.

package/dist/alpha/components/CustomizableGridLayout.esm.js

@@ -0,0 +1,60 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useMemo, Fragment as Fragment$1 } from 'react';
+import { CustomHomepageGrid } from '@backstage/plugin-home';
+import { useTheme } from '@mui/material/styles';
+import GlobalStyles from '@mui/material/GlobalStyles';
+import 'react-grid-layout/css/styles.css';
+import { isCardADefaultConfiguration } from '../utils.esm.js';
+
+const CustomizableGridLayout = ({
+  homepageCards
+}) => {
+  const theme = useTheme();
+  const config = useMemo(() => {
+    const defaultConfig = [];
+    homepageCards.forEach((homepageCard) => {
+      if (!homepageCard.node) {
+        return;
+      }
+      if (isCardADefaultConfiguration(homepageCard)) {
+        const layout = homepageCard.breakpointLayouts?.xl || {};
+        defaultConfig.push({
+          component: homepageCard.component,
+          x: layout.x ?? 0,
+          y: layout.y ?? 0,
+          width: layout.w ?? 12,
+          height: layout.h ?? 4,
+          movable: true,
+          deletable: true,
+          resizable: true
+        });
+      }
+    });
+    return defaultConfig;
+  }, [homepageCards]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      GlobalStyles,
+      {
+        styles: {
+          '[class*="makeStyles-settingsOverlay"]': {
+            backgroundColor: theme.palette.mode === "dark" ? "rgba(20, 20, 20, 0.95) !important" : "rgba(40, 40, 40, 0.93) !important"
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CustomHomepageGrid,
+      {
+        config,
+        preventCollision: false,
+        compactType: "vertical",
+        style: { margin: "-10px" },
+        children: homepageCards.map((card, index) => /* @__PURE__ */ jsx(Fragment$1, { children: card.component }, card.name ?? index))
+      }
+    )
+  ] });
+};
+
+export { CustomizableGridLayout };
+//# sourceMappingURL=CustomizableGridLayout.esm.js.map

package/dist/alpha/components/CustomizableGridLayout.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizableGridLayout.esm.js","sources":["../../../src/alpha/components/CustomizableGridLayout.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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\n// This complete read-only home page grid picks up the idea and styles from\n// https://github.com/backstage/backstage/blob/master/plugins/home\n// Esp. from the CustomHomepageGrid component:\n// https://github.com/backstage/backstage/blob/master/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx\n// but without the drag and drop functionality.\n\nimport { Fragment, useMemo } from 'react';\n\nimport {\n  CustomHomepageGrid,\n  LayoutConfiguration,\n} from '@backstage/plugin-home';\nimport { useTheme } from '@mui/material/styles';\nimport GlobalStyles from '@mui/material/GlobalStyles';\nimport { HomePageCardConfig } from '../../types';\n\nimport 'react-grid-layout/css/styles.css';\nimport { isCardADefaultConfiguration } from '../utils';\n\n/**\n * Props for the customizable grid layout.\n * @alpha\n */\nexport interface CustomizableGridLayoutProps {\n  homepageCards: HomePageCardConfig[];\n}\n\n/**\n * Customizable grid layout for the NFS home page (drag, drop, resize).\n *\n * @alpha\n */\nexport const CustomizableGridLayout = ({\n  homepageCards,\n}: CustomizableGridLayoutProps) => {\n  const theme = useTheme();\n\n  const config = useMemo(() => {\n    const defaultConfig: LayoutConfiguration[] = [];\n\n    homepageCards.forEach(homepageCard => {\n      if (!homepageCard.node) {\n        return;\n      }\n\n      if (isCardADefaultConfiguration(homepageCard)) {\n        const layout = homepageCard.breakpointLayouts?.xl || {};\n\n        defaultConfig.push({\n          component: homepageCard.component,\n          x: layout.x ?? 0,\n          y: layout.y ?? 0,\n          width: layout.w ?? 12,\n          height: layout.h ?? 4,\n          movable: true,\n          deletable: true,\n          resizable: true,\n        });\n      }\n    });\n\n    return defaultConfig;\n  }, [homepageCards]);\n\n  return (\n    <>\n      <GlobalStyles\n        styles={{\n          '[class*=\"makeStyles-settingsOverlay\"]': {\n            backgroundColor:\n              theme.palette.mode === 'dark'\n                ? 'rgba(20, 20, 20, 0.95) !important'\n                : 'rgba(40, 40, 40, 0.93) !important',\n          },\n        }}\n      />\n      <CustomHomepageGrid\n        config={config}\n        preventCollision={false}\n        compactType=\"vertical\"\n        style={{ margin: '-10px' }}\n      >\n        {homepageCards.map((card, index) => (\n          <Fragment key={card.name ?? index}>{card.component}</Fragment>\n        ))}\n      </CustomHomepageGrid>\n    </>\n  );\n};\n"],"names":["Fragment"],"mappings":";;;;;;;;AAgDO,MAAM,yBAAyB,CAAC;AAAA,EACrC;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,QAAQ,QAAS,EAAA;AAEvB,EAAM,MAAA,MAAA,GAAS,QAAQ,MAAM;AAC3B,IAAA,MAAM,gBAAuC,EAAC;AAE9C,IAAA,aAAA,CAAc,QAAQ,CAAgB,YAAA,KAAA;AACpC,MAAI,IAAA,CAAC,aAAa,IAAM,EAAA;AACtB,QAAA;AAAA;AAGF,MAAI,IAAA,2BAAA,CAA4B,YAAY,CAAG,EAAA;AAC7C,QAAA,MAAM,MAAS,GAAA,YAAA,CAAa,iBAAmB,EAAA,EAAA,IAAM,EAAC;AAEtD,QAAA,aAAA,CAAc,IAAK,CAAA;AAAA,UACjB,WAAW,YAAa,CAAA,SAAA;AAAA,UACxB,CAAA,EAAG,OAAO,CAAK,IAAA,CAAA;AAAA,UACf,CAAA,EAAG,OAAO,CAAK,IAAA,CAAA;AAAA,UACf,KAAA,EAAO,OAAO,CAAK,IAAA,EAAA;AAAA,UACnB,MAAA,EAAQ,OAAO,CAAK,IAAA,CAAA;AAAA,UACpB,OAAS,EAAA,IAAA;AAAA,UACT,SAAW,EAAA,IAAA;AAAA,UACX,SAAW,EAAA;AAAA,SACZ,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAO,OAAA,aAAA;AAAA,GACT,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA;AAAA,UACN,uCAAyC,EAAA;AAAA,YACvC,eACE,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,SACnB,mCACA,GAAA;AAAA;AACR;AACF;AAAA,KACF;AAAA,oBACA,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,MAAA;AAAA,QACA,gBAAkB,EAAA,KAAA;AAAA,QAClB,WAAY,EAAA,UAAA;AAAA,QACZ,KAAA,EAAO,EAAE,MAAA,EAAQ,OAAQ,EAAA;AAAA,QAExB,QAAc,EAAA,aAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,KACxB,qBAAA,GAAA,CAACA,UAAA,EAAA,EAAmC,QAAK,EAAA,IAAA,CAAA,SAAA,EAAA,EAA1B,IAAK,CAAA,IAAA,IAAQ,KAAuB,CACpD;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/HomePageLayout.esm.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { EmptyState, Page, Content } from '@backstage/core-components';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
+import { Header } from '../../components/Header.esm.js';
+import { ReadOnlyGridLayout } from './ReadOnlyGirdLayout.esm.js';
+import { CustomizableGridLayout } from './CustomizableGridLayout.esm.js';
+
+const HomePageLayout = ({ widgets, customizable }) => {
+  const { t } = useTranslation();
+  let content;
+  if (widgets.length === 0) {
+    content = /* @__PURE__ */ jsx(EmptyState, { title: t("homePage.empty"), missing: "content" });
+  } else if (customizable) {
+    content = /* @__PURE__ */ jsx(CustomizableGridLayout, { homepageCards: widgets });
+  } else {
+    content = /* @__PURE__ */ jsx(ReadOnlyGridLayout, { homepageCards: widgets });
+  }
+  return /* @__PURE__ */ jsxs(Page, { themeId: "home", children: [
+    /* @__PURE__ */ jsx(Header, { title: t("header.welcome") }),
+    /* @__PURE__ */ jsx(Content, { children: content })
+  ] });
+};
+
+export { HomePageLayout };
+//# sourceMappingURL=HomePageLayout.esm.js.map

package/dist/alpha/components/HomePageLayout.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HomePageLayout.esm.js","sources":["../../../src/alpha/components/HomePageLayout.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { Content, EmptyState, Page } from '@backstage/core-components';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { HeaderProps, Header } from '../../components/Header';\nimport { ReadOnlyGridLayout } from './ReadOnlyGirdLayout';\nimport { CustomizableGridLayout } from './CustomizableGridLayout';\nimport { HomePageCardConfig } from '../../types';\n\n/**\n * Props for the NFS home page layout component.\n * @alpha\n */\nexport interface HomePageProps extends HeaderProps {\n  widgets: HomePageCardConfig[];\n  customizable: boolean;\n}\n\n/**\n * NFS home page layout that renders widgets in a read-only or customizable grid.\n * Used by the dynamic-homepage-layout extension.\n *\n * @alpha\n */\nexport const HomePageLayout = ({ widgets, customizable }: HomePageProps) => {\n  const { t } = useTranslation();\n\n  let content: React.ReactNode;\n  if (widgets.length === 0) {\n    content = <EmptyState title={t('homePage.empty')} missing=\"content\" />;\n  } else if (customizable) {\n    content = <CustomizableGridLayout homepageCards={widgets} />;\n  } else {\n    content = <ReadOnlyGridLayout homepageCards={widgets} />;\n  }\n\n  return (\n    <Page themeId=\"home\">\n      <Header title={t('header.welcome')} />\n      <Content>{content}</Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAsCO,MAAM,cAAiB,GAAA,CAAC,EAAE,OAAA,EAAS,cAAkC,KAAA;AAC1E,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAI,IAAA,OAAA;AACJ,EAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,IAAA,OAAA,uBAAW,UAAW,EAAA,EAAA,KAAA,EAAO,EAAE,gBAAgB,CAAA,EAAG,SAAQ,SAAU,EAAA,CAAA;AAAA,aAC3D,YAAc,EAAA;AACvB,IAAU,OAAA,mBAAA,GAAA,CAAC,sBAAuB,EAAA,EAAA,aAAA,EAAe,OAAS,EAAA,CAAA;AAAA,GACrD,MAAA;AACL,IAAU,OAAA,mBAAA,GAAA,CAAC,kBAAmB,EAAA,EAAA,aAAA,EAAe,OAAS,EAAA,CAAA;AAAA;AAGxD,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,KAAA,EAAO,CAAE,CAAA,gBAAgB,CAAG,EAAA,CAAA;AAAA,oBACpC,GAAA,CAAC,WAAS,QAAQ,EAAA,OAAA,EAAA;AAAA,GACpB,EAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/ReadOnlyGirdLayout.esm.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Responsive } from 'react-grid-layout';
+import { ErrorBoundary } from '@backstage/core-components';
+import { makeStyles } from 'tss-react/mui';
+import 'react-grid-layout/css/styles.css';
+import useMeasure from 'react-use/lib/useMeasure';
+import { isCardADefaultConfiguration } from '../utils.esm.js';
+
+const gridGap = 16;
+const defaultProps = {
+  // Aligned with the 1.0-1.2 home page gap.
+  margin: [gridGap, gridGap],
+  // Same as in home-plugin CustomHomepageGrid
+  rowHeight: 60,
+  // We use always a 12-column grid, but each cards can define
+  // their number of columns (width) and start column (x) per breakpoint.
+  breakpoints: {
+    xl: 1600,
+    lg: 1200,
+    md: 996,
+    sm: 768,
+    xs: 480,
+    xxs: 0
+  },
+  cols: {
+    xl: 12,
+    lg: 12,
+    md: 12,
+    sm: 12,
+    xs: 12,
+    xxs: 12
+  },
+  isDraggable: false,
+  isResizable: false,
+  compactType: null
+};
+const useStyles = makeStyles()({
+  // Make card content scrollable (so that cards don't overlap)
+  cardWrapper: {
+    '& > div[class*="MuiCard-root"]': {
+      width: "100%",
+      height: "100%"
+    },
+    '& div[class*="MuiCardContent-root"]': {
+      overflow: "auto"
+    }
+  }
+});
+const ReadOnlyGridLayout = ({
+  homepageCards
+}) => {
+  const { classes } = useStyles();
+  const [measureRef, measureRect] = useMeasure();
+  const cards = useMemo(() => {
+    return homepageCards.filter(isCardADefaultConfiguration).map((cardData, index) => {
+      const id = (index + 1).toString();
+      const layouts2 = {};
+      if (cardData.breakpointLayouts) {
+        for (const [breakpoint, layout] of Object.entries(
+          cardData.breakpointLayouts
+        )) {
+          layouts2[breakpoint] = {
+            i: id,
+            x: layout.x ?? 0,
+            y: layout.y ?? 0,
+            w: layout.w ?? 12,
+            h: layout.h ?? 4,
+            isDraggable: false,
+            isResizable: false
+          };
+        }
+      } else {
+        ["xl", "lg", "md", "sm", "xs", "xxs"].forEach((breakpoint) => {
+          layouts2[breakpoint] = {
+            i: id,
+            x: 0,
+            y: 0,
+            w: 12,
+            h: 4,
+            isDraggable: false,
+            isResizable: false
+          };
+        });
+      }
+      const component = cardData.component;
+      const RenderContent = typeof component === "object" && component !== null && "Content" in component ? component.Content : component;
+      return {
+        id,
+        Component: RenderContent,
+        layouts: layouts2
+      };
+    });
+  }, [homepageCards]);
+  const layouts = useMemo(() => {
+    const result = {};
+    for (const card of cards) {
+      for (const [breakpoint, layoutPerBreakpoint] of Object.entries(
+        card.layouts
+      )) {
+        if (!result[breakpoint]) {
+          result[breakpoint] = [];
+        }
+        result[breakpoint].push(layoutPerBreakpoint);
+      }
+    }
+    return result;
+  }, [cards]);
+  const children = useMemo(() => {
+    return cards.map((card) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-cardid": card.id,
+        "data-testid": `home-page card ${card.id}`,
+        "data-layout": JSON.stringify(card.layouts),
+        className: classes.cardWrapper,
+        children: /* @__PURE__ */ jsx(ErrorBoundary, { children: typeof card.Component === "function" ? /* @__PURE__ */ jsx(card.Component, {}) : card.Component })
+      },
+      card.id
+    ));
+  }, [cards, classes.cardWrapper]);
+  return /* @__PURE__ */ jsxs("div", { style: { margin: -16 }, children: [
+    /* @__PURE__ */ jsx("div", { ref: measureRef }),
+    measureRect.width ? /* @__PURE__ */ jsx(
+      Responsive,
+      {
+        ...defaultProps,
+        width: measureRect.width,
+        layouts,
+        children
+      }
+    ) : null
+  ] });
+};
+
+export { ReadOnlyGridLayout };
+//# sourceMappingURL=ReadOnlyGirdLayout.esm.js.map

package/dist/alpha/components/ReadOnlyGirdLayout.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReadOnlyGirdLayout.esm.js","sources":["../../../src/alpha/components/ReadOnlyGirdLayout.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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\n// This complete read-only home page grid picks up the idea and styles from\n// https://github.com/backstage/backstage/blob/master/plugins/home\n// Esp. from the CustomHomepageGrid component:\n// https://github.com/backstage/backstage/blob/master/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx\n// but without the drag and drop functionality.\n\nimport type { ComponentType, ReactNode } from 'react';\n\nimport { useMemo } from 'react';\nimport {\n  Layout,\n  Layouts,\n  Responsive,\n  ResponsiveProps,\n} from 'react-grid-layout';\n\nimport { ErrorBoundary } from '@backstage/core-components';\n\nimport { makeStyles } from 'tss-react/mui';\n\n// Removes the doubled scrollbar\nimport 'react-grid-layout/css/styles.css';\n\nimport useMeasure from 'react-use/lib/useMeasure';\nimport { HomePageCardConfig } from '../../types';\nimport { isCardADefaultConfiguration } from '../utils';\n\ninterface Card {\n  id: string;\n  Component: ComponentType<any> | ReactNode;\n  layouts: Record<string, Layout>;\n}\n\nconst gridGap = 16;\n\nconst defaultProps: ResponsiveProps = {\n  // Aligned with the 1.0-1.2 home page gap.\n  margin: [gridGap, gridGap],\n  // Same as in home-plugin CustomHomepageGrid\n  rowHeight: 60,\n\n  // We use always a 12-column grid, but each cards can define\n  // their number of columns (width) and start column (x) per breakpoint.\n  breakpoints: {\n    xl: 1600,\n    lg: 1200,\n    md: 996,\n    sm: 768,\n    xs: 480,\n    xxs: 0,\n  },\n  cols: {\n    xl: 12,\n    lg: 12,\n    md: 12,\n    sm: 12,\n    xs: 12,\n    xxs: 12,\n  },\n\n  isDraggable: false,\n  isResizable: false,\n  compactType: null,\n};\n\nconst useStyles = makeStyles()({\n  // Make card content scrollable (so that cards don't overlap)\n  cardWrapper: {\n    '& > div[class*=\"MuiCard-root\"]': {\n      width: '100%',\n      height: '100%',\n    },\n    '& div[class*=\"MuiCardContent-root\"]': {\n      overflow: 'auto',\n    },\n  },\n});\n\n/**\n * Props for the read-only grid layout.\n * @alpha\n */\nexport interface ReadOnlyGridLayoutProps {\n  homepageCards: HomePageCardConfig[];\n}\n\n/**\n * Read-only grid layout for the NFS home page.\n * Respects layout configuration (breakpoints) when provided via app config.\n *\n * @alpha\n */\nexport const ReadOnlyGridLayout = ({\n  homepageCards,\n}: ReadOnlyGridLayoutProps) => {\n  const { classes } = useStyles();\n  const [measureRef, measureRect] = useMeasure<HTMLDivElement>();\n\n  const cards = useMemo<Card[]>(() => {\n    return homepageCards\n      .filter(isCardADefaultConfiguration)\n      .map<Card>((cardData, index) => {\n        const id = (index + 1).toString();\n        const layouts: Record<string, Layout> = {};\n        if (cardData.breakpointLayouts) {\n          for (const [breakpoint, layout] of Object.entries(\n            cardData.breakpointLayouts,\n          )) {\n            layouts[breakpoint] = {\n              i: id,\n              x: layout.x ?? 0,\n              y: layout.y ?? 0,\n              w: layout.w ?? 12,\n              h: layout.h ?? 4,\n              isDraggable: false,\n              isResizable: false,\n            };\n          }\n        } else {\n          // Default layout for cards without a layout configuration\n          ['xl', 'lg', 'md', 'sm', 'xs', 'xxs'].forEach(breakpoint => {\n            layouts[breakpoint] = {\n              i: id,\n              x: 0,\n              y: 0,\n              w: 12,\n              h: 4,\n              isDraggable: false,\n              isResizable: false,\n            };\n          });\n        }\n\n        // component can be a React element or { Content: ComponentType }; extract renderable node\n        const component = cardData.component;\n        const RenderContent =\n          typeof component === 'object' &&\n          component !== null &&\n          'Content' in component\n            ? (component as { Content: ComponentType<any> }).Content\n            : component;\n\n        return {\n          id,\n          Component: RenderContent,\n          layouts,\n        };\n      });\n  }, [homepageCards]);\n\n  const layouts = useMemo<Layouts>(() => {\n    const result: Layouts = {};\n    for (const card of cards) {\n      for (const [breakpoint, layoutPerBreakpoint] of Object.entries(\n        card.layouts,\n      )) {\n        if (!result[breakpoint]) {\n          result[breakpoint] = [];\n        }\n        result[breakpoint].push(layoutPerBreakpoint);\n      }\n    }\n    return result;\n  }, [cards]);\n\n  const children = useMemo(() => {\n    return cards.map(card => (\n      <div\n        key={card.id}\n        data-cardid={card.id}\n        data-testid={`home-page card ${card.id}`}\n        data-layout={JSON.stringify(card.layouts)}\n        className={classes.cardWrapper}\n      >\n        <ErrorBoundary>\n          {typeof card.Component === 'function' ? (\n            <card.Component />\n          ) : (\n            card.Component\n          )}\n        </ErrorBoundary>\n      </div>\n    ));\n  }, [cards, classes.cardWrapper]);\n\n  return (\n    <div style={{ margin: -gridGap }}>\n      <div ref={measureRef} />\n      {measureRect.width ? (\n        <Responsive\n          {...defaultProps}\n          width={measureRect.width}\n          layouts={layouts}\n        >\n          {children}\n        </Responsive>\n      ) : null}\n    </div>\n  );\n};\n"],"names":["layouts"],"mappings":"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"}

package/dist/alpha/extensions/apis.esm.js

@@ -0,0 +1,19 @@
+import { ApiBlueprint, discoveryApiRef, configApiRef, identityApiRef } from '@backstage/frontend-plugin-api';
+import { quickAccessApiRef, QuickAccessApiClient } from '../../api/QuickAccessApiClient.esm.js';
+
+const quickAccessApi = ApiBlueprint.make({
+  name: "quickaccess",
+  disabled: false,
+  params: (defineParams) => defineParams({
+    api: quickAccessApiRef,
+    deps: {
+      discoveryApi: discoveryApiRef,
+      configApi: configApiRef,
+      identityApi: identityApiRef
+    },
+    factory: ({ discoveryApi, configApi, identityApi }) => new QuickAccessApiClient({ discoveryApi, configApi, identityApi })
+  })
+});
+
+export { quickAccessApi };
+//# sourceMappingURL=apis.esm.js.map

package/dist/alpha/extensions/apis.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apis.esm.js","sources":["../../../src/alpha/extensions/apis.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 {\n  ApiBlueprint,\n  configApiRef,\n  discoveryApiRef,\n  identityApiRef,\n} from '@backstage/frontend-plugin-api';\nimport { QuickAccessApiClient, quickAccessApiRef } from '../../api';\n\n/**\n * Quick access API for the New Frontend System.\n * Provides access to quick access links from app config.\n *\n * @alpha\n */\nconst quickAccessApi = ApiBlueprint.make({\n  name: 'quickaccess',\n  disabled: false,\n  params: defineParams =>\n    defineParams({\n      api: quickAccessApiRef,\n      deps: {\n        discoveryApi: discoveryApiRef,\n        configApi: configApiRef,\n        identityApi: identityApiRef,\n      },\n      factory: ({ discoveryApi, configApi, identityApi }) =>\n        new QuickAccessApiClient({ discoveryApi, configApi, identityApi }),\n    }),\n});\n\nexport { quickAccessApi };\n"],"names":[],"mappings":";;;AA8BM,MAAA,cAAA,GAAiB,aAAa,IAAK,CAAA;AAAA,EACvC,IAAM,EAAA,aAAA;AAAA,EACN,QAAU,EAAA,KAAA;AAAA,EACV,MAAA,EAAQ,kBACN,YAAa,CAAA;AAAA,IACX,GAAK,EAAA,iBAAA;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,YAAc,EAAA,eAAA;AAAA,MACd,SAAW,EAAA,YAAA;AAAA,MACX,WAAa,EAAA;AAAA,KACf;AAAA,IACA,OAAS,EAAA,CAAC,EAAE,YAAA,EAAc,SAAW,EAAA,WAAA,EACnC,KAAA,IAAI,oBAAqB,CAAA,EAAE,YAAc,EAAA,SAAA,EAAW,aAAa;AAAA,GACpE;AACL,CAAC;;;;"}

package/dist/alpha/extensions/homePageCards.esm.js

@@ -0,0 +1,117 @@
+import { jsx } from 'react/jsx-runtime';
+import { HomePageWidgetBlueprint } from '@backstage/plugin-home-react/alpha';
+import homePlugin from '@backstage/plugin-home/alpha';
+import { compatWrapper } from '@backstage/core-compat-api';
+
+const defaultCardLayout = {
+  width: {
+    minColumns: 4,
+    maxColumns: 12,
+    defaultColumns: 12
+  },
+  height: {
+    minRows: 2,
+    maxRows: 12,
+    defaultRows: 4
+  }
+};
+const onboardingSectionWidget = HomePageWidgetBlueprint.make({
+  name: "rhdh-onboarding-section",
+  params: {
+    name: "RhdhOnboardingSection",
+    layout: defaultCardLayout,
+    components: () => import('../../components/OnboardingSection/index.esm.js').then((m) => ({
+      Content: m.OnboardingSection
+    }))
+  }
+});
+const entitySectionWidget = HomePageWidgetBlueprint.make({
+  name: "rhdh-entity-section",
+  params: {
+    name: "RhdhEntitySection",
+    layout: defaultCardLayout,
+    components: () => import('../../components/EntitySection/index.esm.js').then((m) => ({
+      Content: () => compatWrapper(/* @__PURE__ */ jsx(m.EntitySection, {}))
+    }))
+  }
+});
+const templateSectionWidget = HomePageWidgetBlueprint.make({
+  name: "rhdh-template-section",
+  params: {
+    name: "RhdhTemplateSection",
+    layout: defaultCardLayout,
+    components: () => import('../../components/TemplateSection/index.esm.js').then((m) => ({
+      Content: m.TemplateSection
+    }))
+  }
+});
+const quickAccessCardWidget = HomePageWidgetBlueprint.make({
+  name: "quick-access-card",
+  params: {
+    name: "QuickAccessCard",
+    layout: defaultCardLayout,
+    components: () => import('../../components/QuickAccessCard.esm.js').then((m) => ({
+      Content: () => compatWrapper(/* @__PURE__ */ jsx(m.QuickAccessCard, {}))
+    }))
+  }
+});
+const searchBarWidget = HomePageWidgetBlueprint.make({
+  name: "search-bar",
+  params: {
+    name: "SearchBar",
+    layout: {
+      ...defaultCardLayout,
+      height: {
+        ...defaultCardLayout.height,
+        defaultRows: 2,
+        minRows: 1,
+        maxRows: 1
+      }
+    },
+    components: () => import('../../components/SearchBar.esm.js').then((m) => ({
+      Content: () => compatWrapper(/* @__PURE__ */ jsx(m.SearchBar, {}))
+    }))
+  }
+});
+const featuredDocsCardWidget = HomePageWidgetBlueprint.make({
+  name: "featured-docs-card",
+  params: {
+    name: "FeaturedDocsCard",
+    layout: defaultCardLayout,
+    components: () => import('../../components/FeaturedDocsCard.esm.js').then((m) => ({
+      Content: m.FeaturedDocsCard
+    }))
+  }
+});
+const catalogStarredWidget = homePlugin.getExtension("home-page-widget:home/starred-entities").override({
+  params: {
+    name: "CatalogStarred",
+    title: "Starred catalog entities"
+  }
+});
+const disableToolkit = homePlugin.getExtension("home-page-widget:home/toolkit").override({
+  disabled: true
+});
+const RecentlyVisitedWidget = HomePageWidgetBlueprint.make({
+  name: "recently-visited",
+  params: {
+    layout: defaultCardLayout,
+    name: "Recently visited",
+    components: () => import('@backstage/plugin-home').then((m) => ({
+      Content: m.HomePageRecentlyVisited
+    }))
+  }
+});
+const TopVisitedWidget = HomePageWidgetBlueprint.make({
+  name: "top-visited",
+  params: {
+    layout: defaultCardLayout,
+    name: "Top visited",
+    components: () => import('@backstage/plugin-home').then((m) => ({
+      Content: () => /* @__PURE__ */ jsx(m.HomePageTopVisited, {})
+    }))
+  }
+});
+
+export { RecentlyVisitedWidget, TopVisitedWidget, catalogStarredWidget, disableToolkit, entitySectionWidget, featuredDocsCardWidget, onboardingSectionWidget, quickAccessCardWidget, searchBarWidget, templateSectionWidget };
+//# sourceMappingURL=homePageCards.esm.js.map

package/dist/alpha/extensions/homePageCards.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"homePageCards.esm.js","sources":["../../../src/alpha/extensions/homePageCards.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { HomePageWidgetBlueprint } from '@backstage/plugin-home-react/alpha';\nimport homePlugin from '@backstage/plugin-home/alpha';\nimport { compatWrapper } from '@backstage/core-compat-api';\n\nconst defaultCardLayout = {\n  width: {\n    minColumns: 4,\n    maxColumns: 12,\n    defaultColumns: 12,\n  },\n  height: {\n    minRows: 2,\n    maxRows: 12,\n    defaultRows: 4,\n  },\n} as const;\n\n/**\n * NFS widget: OnboardingSection (migrated from mountPoint home.page/cards).\n * @alpha\n */\nexport const onboardingSectionWidget = HomePageWidgetBlueprint.make({\n  name: 'rhdh-onboarding-section',\n  params: {\n    name: 'RhdhOnboardingSection',\n    layout: defaultCardLayout,\n    components: () =>\n      import('../../components/OnboardingSection').then(m => ({\n        Content: m.OnboardingSection,\n      })),\n  },\n});\n\n/**\n * NFS widget: EntitySection (migrated from mountPoint home.page/cards).\n * @alpha\n */\nexport const entitySectionWidget = HomePageWidgetBlueprint.make({\n  name: 'rhdh-entity-section',\n  params: {\n    name: 'RhdhEntitySection',\n    layout: defaultCardLayout,\n    components: () =>\n      import('../../components/EntitySection').then(m => ({\n        Content: () => compatWrapper(<m.EntitySection />),\n      })),\n  },\n});\n\n/**\n * NFS widget: TemplateSection (migrated from mountPoint home.page/cards).\n * @alpha\n */\nexport const templateSectionWidget = HomePageWidgetBlueprint.make({\n  name: 'rhdh-template-section',\n  params: {\n    name: 'RhdhTemplateSection',\n    layout: defaultCardLayout,\n    components: () =>\n      import('../../components/TemplateSection').then(m => ({\n        Content: m.TemplateSection,\n      })),\n  },\n});\n\n/**\n * NFS widget: QuickAccessCard (migrated from mountPoint home.page/cards).\n * @alpha\n */\nexport const quickAccessCardWidget = HomePageWidgetBlueprint.make({\n  name: 'quick-access-card',\n  params: {\n    name: 'QuickAccessCard',\n    layout: defaultCardLayout,\n    components: () =>\n      import('../../components/QuickAccessCard').then(m => ({\n        Content: () => compatWrapper(<m.QuickAccessCard />),\n      })),\n  },\n});\n\n/**\n * NFS widget: SearchBar (migrated from mountPoint home.page/cards).\n * @alpha\n */\nexport const searchBarWidget = HomePageWidgetBlueprint.make({\n  name: 'search-bar',\n  params: {\n    name: 'SearchBar',\n    layout: {\n      ...defaultCardLayout,\n      height: {\n        ...defaultCardLayout.height,\n        defaultRows: 2,\n        minRows: 1,\n        maxRows: 1,\n      },\n    },\n    components: () =>\n      import('../../components/SearchBar').then(m => ({\n        Content: () => compatWrapper(<m.SearchBar />),\n      })),\n  },\n});\n\n/**\n * NFS widget: FeaturedDocsCard (migrated from mountPoint home.page/cards).\n * @alpha\n */\nexport const featuredDocsCardWidget = HomePageWidgetBlueprint.make({\n  name: 'featured-docs-card',\n  params: {\n    name: 'FeaturedDocsCard',\n    layout: defaultCardLayout,\n    components: () =>\n      import('../../components/FeaturedDocsCard').then(m => ({\n        Content: m.FeaturedDocsCard,\n      })),\n  },\n});\n\n/**\n * NFS widget: CatalogStarred (migrated from mountPoint home.page/cards).\n * @alpha\n */\nexport const catalogStarredWidget = homePlugin\n  .getExtension('home-page-widget:home/starred-entities')\n  .override({\n    params: {\n      name: 'CatalogStarred',\n      title: 'Starred catalog entities',\n    },\n  });\n\n/**\n * Disables the default home plugin toolkit widget.\n * @alpha\n */\nexport const disableToolkit = homePlugin\n  .getExtension('home-page-widget:home/toolkit')\n  .override({\n    disabled: true,\n  });\n\n/**\n * NFS widget: RecentlyVisited (migrated from mountPoint home.page/cards).\n * @alpha\n */\nexport const RecentlyVisitedWidget = HomePageWidgetBlueprint.make({\n  name: 'recently-visited',\n  params: {\n    layout: defaultCardLayout,\n    name: 'Recently visited',\n    components: () =>\n      import('@backstage/plugin-home').then(m => ({\n        Content: m.HomePageRecentlyVisited,\n      })),\n  },\n});\n\n/**\n * NFS widget: TopVisited (migrated from mountPoint home.page/cards).\n * @alpha\n */\nexport const TopVisitedWidget = HomePageWidgetBlueprint.make({\n  name: 'top-visited',\n  params: {\n    layout: defaultCardLayout,\n    name: 'Top visited',\n    components: () =>\n      import('@backstage/plugin-home').then(m => ({\n        Content: () => <m.HomePageTopVisited />,\n      })),\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/alpha/extensions/homePageLayoutExtension.esm.js

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import { HomePageLayoutBlueprint } from '@backstage/plugin-home-react/alpha';
+import { HomePageLayout } from '../components/HomePageLayout.esm.js';
+
+const homePageLayoutExtension = HomePageLayoutBlueprint.makeWithOverrides({
+  name: "dynamic-homepage-layout",
+  config: {
+    schema: {
+      customizable: (z) => z.boolean().optional(),
+      widgetLayout: (z) => z.record(
+        z.object({
+          priority: z.number().optional(),
+          breakpoints: z.record(
+            z.object({
+              w: z.number().optional(),
+              h: z.number().optional(),
+              x: z.number().optional(),
+              y: z.number().optional()
+            })
+          ).optional()
+        })
+      ).optional()
+    }
+  },
+  factory(originalFactory, { config }) {
+    const customizable = config.customizable ?? true;
+    const layoutConfig = config.widgetLayout ?? {};
+    return originalFactory({
+      loader: async () => function CustomHomePageLayout({ widgets }) {
+        const processedWidgets = widgets.map((widget) => {
+          const widgetConfig = layoutConfig[widget.name ?? ""];
+          const configBreakpoints = widgetConfig?.breakpoints;
+          if (!configBreakpoints) return widget;
+          return {
+            ...widget,
+            breakpointLayouts: configBreakpoints
+          };
+        }).sort((a, b) => {
+          if (customizable) return 0;
+          const priorityA = layoutConfig[a.name ?? ""]?.priority ?? 0;
+          const priorityB = layoutConfig[b.name ?? ""]?.priority ?? 0;
+          return priorityB - priorityA;
+        });
+        return /* @__PURE__ */ jsx(
+          HomePageLayout,
+          {
+            widgets: processedWidgets,
+            customizable
+          }
+        );
+      }
+    });
+  }
+});
+
+export { homePageLayoutExtension };
+//# sourceMappingURL=homePageLayoutExtension.esm.js.map

package/dist/alpha/extensions/homePageLayoutExtension.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"homePageLayoutExtension.esm.js","sources":["../../../src/alpha/extensions/homePageLayoutExtension.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { HomePageLayoutBlueprint } from '@backstage/plugin-home-react/alpha';\nimport { HomePageLayout } from '../components/HomePageLayout';\nimport { HomePageCardConfig } from '../../types';\n\n/**\n * Custom home page layout extension for the New Frontend System.\n *\n * Config-driven layout with `widgetLayout` (priority, breakpoints per widget),\n * supports both customizable (drag/drop) and read-only modes.\n *\n * @alpha\n */\nexport const homePageLayoutExtension =\n  HomePageLayoutBlueprint.makeWithOverrides({\n    name: 'dynamic-homepage-layout',\n    config: {\n      schema: {\n        customizable: z => z.boolean().optional(),\n        widgetLayout: z =>\n          z\n            .record(\n              z.object({\n                priority: z.number().optional(),\n                breakpoints: z\n                  .record(\n                    z.object({\n                      w: z.number().optional(),\n                      h: z.number().optional(),\n                      x: z.number().optional(),\n                      y: z.number().optional(),\n                    }),\n                  )\n                  .optional(),\n              }),\n            )\n            .optional(),\n      },\n    },\n    factory(originalFactory, { config }) {\n      const customizable = config.customizable ?? true;\n      const layoutConfig = config.widgetLayout ?? {};\n\n      return originalFactory({\n        loader: async () =>\n          function CustomHomePageLayout({ widgets }) {\n            const processedWidgets: HomePageCardConfig[] = widgets\n              .map(widget => {\n                const widgetConfig = layoutConfig[widget.name ?? ''];\n                const configBreakpoints = widgetConfig?.breakpoints;\n\n                if (!configBreakpoints) return widget;\n\n                return {\n                  ...widget,\n                  breakpointLayouts: configBreakpoints,\n                };\n              })\n              .sort((a, b) => {\n                if (customizable) return 0; // keep original order\n\n                const priorityA = layoutConfig[a.name ?? '']?.priority ?? 0;\n                const priorityB = layoutConfig[b.name ?? '']?.priority ?? 0;\n                return priorityB - priorityA;\n              });\n\n            return (\n              <HomePageLayout\n                widgets={processedWidgets}\n                customizable={customizable}\n              />\n            );\n          },\n      });\n    },\n  });\n"],"names":[],"mappings":";;;;AA4Ba,MAAA,uBAAA,GACX,wBAAwB,iBAAkB,CAAA;AAAA,EACxC,IAAM,EAAA,yBAAA;AAAA,EACN,MAAQ,EAAA;AAAA,IACN,MAAQ,EAAA;AAAA,MACN,YAAc,EAAA,CAAA,CAAA,KAAK,CAAE,CAAA,OAAA,GAAU,QAAS,EAAA;AAAA,MACxC,YAAA,EAAc,OACZ,CACG,CAAA,MAAA;AAAA,QACC,EAAE,MAAO,CAAA;AAAA,UACP,QAAU,EAAA,CAAA,CAAE,MAAO,EAAA,CAAE,QAAS,EAAA;AAAA,UAC9B,aAAa,CACV,CAAA,MAAA;AAAA,YACC,EAAE,MAAO,CAAA;AAAA,cACP,CAAG,EAAA,CAAA,CAAE,MAAO,EAAA,CAAE,QAAS,EAAA;AAAA,cACvB,CAAG,EAAA,CAAA,CAAE,MAAO,EAAA,CAAE,QAAS,EAAA;AAAA,cACvB,CAAG,EAAA,CAAA,CAAE,MAAO,EAAA,CAAE,QAAS,EAAA;AAAA,cACvB,CAAG,EAAA,CAAA,CAAE,MAAO,EAAA,CAAE,QAAS;AAAA,aACxB;AAAA,YAEF,QAAS;AAAA,SACb;AAAA,QAEF,QAAS;AAAA;AAChB,GACF;AAAA,EACA,OAAQ,CAAA,eAAA,EAAiB,EAAE,MAAA,EAAU,EAAA;AACnC,IAAM,MAAA,YAAA,GAAe,OAAO,YAAgB,IAAA,IAAA;AAC5C,IAAM,MAAA,YAAA,GAAe,MAAO,CAAA,YAAA,IAAgB,EAAC;AAE7C,IAAA,OAAO,eAAgB,CAAA;AAAA,MACrB,QAAQ,YACN,SAAS,oBAAqB,CAAA,EAAE,SAAW,EAAA;AACzC,QAAM,MAAA,gBAAA,GAAyC,OAC5C,CAAA,GAAA,CAAI,CAAU,MAAA,KAAA;AACb,UAAA,MAAM,YAAe,GAAA,YAAA,CAAa,MAAO,CAAA,IAAA,IAAQ,EAAE,CAAA;AACnD,UAAA,MAAM,oBAAoB,YAAc,EAAA,WAAA;AAExC,UAAI,IAAA,CAAC,mBAA0B,OAAA,MAAA;AAE/B,UAAO,OAAA;AAAA,YACL,GAAG,MAAA;AAAA,YACH,iBAAmB,EAAA;AAAA,WACrB;AAAA,SACD,CAAA,CACA,IAAK,CAAA,CAAC,GAAG,CAAM,KAAA;AACd,UAAA,IAAI,cAAqB,OAAA,CAAA;AAEzB,UAAA,MAAM,YAAY,YAAa,CAAA,CAAA,CAAE,IAAQ,IAAA,EAAE,GAAG,QAAY,IAAA,CAAA;AAC1D,UAAA,MAAM,YAAY,YAAa,CAAA,CAAA,CAAE,IAAQ,IAAA,EAAE,GAAG,QAAY,IAAA,CAAA;AAC1D,UAAA,OAAO,SAAY,GAAA,SAAA;AAAA,SACpB,CAAA;AAEH,QACE,uBAAA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,OAAS,EAAA,gBAAA;AAAA,YACT;AAAA;AAAA,SACF;AAAA;AAEJ,KACH,CAAA;AAAA;AAEL,CAAC;;;;"}

package/dist/alpha/utils.esm.js

@@ -0,0 +1,6 @@
+function isCardADefaultConfiguration(cardData) {
+  return !!cardData.breakpointLayouts || Object.entries(cardData.breakpointLayouts ?? {}).length === 0;
+}
+
+export { isCardADefaultConfiguration };
+//# sourceMappingURL=utils.esm.js.map

package/dist/alpha/utils.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.esm.js","sources":["../../src/alpha/utils.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { HomePageCardConfig } from '../types';\n\nexport function isCardADefaultConfiguration(\n  cardData: HomePageCardConfig,\n): boolean {\n  return (\n    !!cardData.breakpointLayouts ||\n    Object.entries(cardData.breakpointLayouts ?? {}).length === 0\n  );\n}\n"],"names":[],"mappings":"AAkBO,SAAS,4BACd,QACS,EAAA;AACT,EACE,OAAA,CAAC,CAAC,QAAA,CAAS,iBACX,IAAA,MAAA,CAAO,OAAQ,CAAA,QAAA,CAAS,iBAAqB,IAAA,EAAE,CAAA,CAAE,MAAW,KAAA,CAAA;AAEhE;;;;"}