@backstage/plugin-home-react 0.0.0-nightly-20230523021952

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @backstage/plugin-home-react
+
+## 0.0.0-nightly-20230523021952
+
+### Minor Changes
+
+- 41e8037a8a6d: Extract new plugin-home-react package and deprecate createCardExtension in plugin-home
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.13.1
+  - @backstage/core-plugin-api@1.5.1

package/README.md

@@ -0,0 +1,3 @@
+# Home React
+
+A new Library that contains React Components for [home plugin](/plugins/home/README.md) depend on.

package/dist/index.d.ts

@@ -0,0 +1,82 @@
+/// <reference types="react" />
+import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
+import { RJSFSchema } from '@rjsf/utils';
+
+/** @public */
+declare const SettingsModal: (props: {
+    open: boolean;
+    close: Function;
+    componentName: string;
+    children: JSX.Element;
+}) => JSX.Element;
+
+/**
+ * @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;
+};
+/**
+ * @public
+ */
+type CardConfig = {
+    layout?: CardLayout;
+    settings?: CardSettings;
+};
+/**
+ * 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>;
+
+export { CardConfig, CardExtensionProps, CardLayout, CardSettings, ComponentParts, ComponentRenderer, RendererProps, SettingsModal, createCardExtension };

package/dist/index.esm.js

@@ -0,0 +1,86 @@
+import React, { Suspense } from 'react';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton } from '@material-ui/core';
+import SettingsIcon from '@material-ui/icons/Settings';
+import { InfoCard } from '@backstage/core-components';
+import { createReactExtension, useApp } from '@backstage/core-plugin-api';
+
+const SettingsModal = (props) => {
+  const { open, close, componentName, children } = props;
+  return /* @__PURE__ */ React.createElement(Dialog, { open, onClose: () => close() }, /* @__PURE__ */ React.createElement(DialogTitle, null, "Settings - ", componentName), /* @__PURE__ */ React.createElement(DialogContent, null, children), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: () => close(), color: "primary", variant: "contained" }, "Close")));
+};
+
+function createCardExtension(options) {
+  const { title, components, name, description, layout, settings } = options;
+  const isCustomizable = (settings == null ? void 0 : settings.schema) !== void 0;
+  return createReactExtension({
+    name,
+    data: { title, description, "home.widget.config": { layout, settings } },
+    component: {
+      lazy: () => components().then((componentParts) => {
+        return (props) => {
+          return /* @__PURE__ */ React.createElement(
+            CardExtension,
+            {
+              ...props,
+              ...componentParts,
+              title: props.title || title,
+              isCustomizable
+            }
+          );
+        };
+      })
+    }
+  });
+}
+function CardExtension(props) {
+  const {
+    Renderer,
+    Content,
+    Settings,
+    Actions,
+    ContextProvider,
+    isCustomizable,
+    title,
+    ...childProps
+  } = props;
+  const app = useApp();
+  const { Progress } = app.getComponents();
+  const [settingsOpen, setSettingsOpen] = React.useState(false);
+  if (Renderer) {
+    return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement(Progress, null) }, /* @__PURE__ */ React.createElement(
+      Renderer,
+      {
+        title,
+        ...{
+          Content,
+          ...Actions ? { Actions } : {},
+          ...Settings && !isCustomizable ? { Settings } : {},
+          ...ContextProvider ? { ContextProvider } : {},
+          ...childProps
+        }
+      }
+    ));
+  }
+  const cardProps = {
+    title,
+    ...Settings && !isCustomizable ? {
+      action: /* @__PURE__ */ React.createElement(IconButton, { onClick: () => setSettingsOpen(true) }, /* @__PURE__ */ React.createElement(SettingsIcon, null, "Settings"))
+    } : {},
+    ...Actions ? {
+      actions: /* @__PURE__ */ React.createElement(Actions, null)
+    } : {}
+  };
+  const innerContent = /* @__PURE__ */ React.createElement(InfoCard, { ...cardProps }, Settings && !isCustomizable && /* @__PURE__ */ React.createElement(
+    SettingsModal,
+    {
+      open: settingsOpen,
+      componentName: title,
+      close: () => setSettingsOpen(false)
+    },
+    /* @__PURE__ */ React.createElement(Settings, null)
+  ), /* @__PURE__ */ React.createElement(Content, { ...childProps }));
+  return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement(Progress, null) }, ContextProvider ? /* @__PURE__ */ React.createElement(ContextProvider, { ...childProps }, innerContent) : innerContent);
+}
+
+export { SettingsModal, createCardExtension };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/components/SettingsModal.tsx","../src/extensions.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 {\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n} from '@material-ui/core';\n\n/** @public */\nexport const SettingsModal = (props: {\n  open: boolean;\n  close: Function;\n  componentName: string;\n  children: JSX.Element;\n}) => {\n  const { open, close, componentName, children } = props;\n\n  return (\n    <Dialog open={open} onClose={() => close()}>\n      <DialogTitle>Settings - {componentName}</DialogTitle>\n      <DialogContent>{children}</DialogContent>\n      <DialogActions>\n        <Button onClick={() => close()} color=\"primary\" variant=\"contained\">\n          Close\n        </Button>\n      </DialogActions>\n    </Dialog>\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, { Suspense } from 'react';\nimport { IconButton } from '@material-ui/core';\nimport SettingsIcon from '@material-ui/icons/Settings';\nimport { InfoCard } from '@backstage/core-components';\nimport { SettingsModal } from './components';\nimport { createReactExtension, useApp } from '@backstage/core-plugin-api';\nimport { RJSFSchema } from '@rjsf/utils';\n\n/**\n * @public\n */\nexport type ComponentRenderer = {\n  Renderer?: (props: RendererProps) => JSX.Element;\n};\n\n/**\n * @public\n */\nexport type ComponentParts = {\n  Content: (props?: any) => JSX.Element;\n  Actions?: () => JSX.Element;\n  Settings?: () => JSX.Element;\n  ContextProvider?: (props: any) => JSX.Element;\n};\n\n/**\n * @public\n */\nexport type RendererProps = { title: string } & ComponentParts;\n\n/**\n * @public\n */\nexport type CardExtensionProps<T> = ComponentRenderer & { title?: string } & T;\n\n/**\n * @public\n */\nexport type CardLayout = {\n  width?: { minColumns?: number; maxColumns?: number; defaultColumns?: number };\n  height?: { minRows?: number; maxRows?: number; defaultRows?: number };\n};\n\n/**\n * @public\n */\nexport type CardSettings = {\n  schema?: RJSFSchema;\n};\n\n/**\n * @public\n */\nexport type CardConfig = {\n  layout?: CardLayout;\n  settings?: CardSettings;\n};\n\n/**\n * An extension creator to create card based components for the homepage\n *\n * @public\n */\nexport function createCardExtension<T>(options: {\n  title: string;\n  components: () => Promise<ComponentParts>;\n  name?: string;\n  description?: string;\n  layout?: CardLayout;\n  settings?: CardSettings;\n}) {\n  const { title, components, name, description, layout, settings } = options;\n  // If widget settings schema is defined, we don't want to show the Settings icon or dialog\n  const isCustomizable = settings?.schema !== undefined;\n\n  return createReactExtension({\n    name,\n    data: { title, description, 'home.widget.config': { layout, settings } },\n    component: {\n      lazy: () =>\n        components().then(componentParts => {\n          return (props: CardExtensionProps<T>) => {\n            return (\n              <CardExtension\n                {...props}\n                {...componentParts}\n                title={props.title || title}\n                isCustomizable={isCustomizable}\n              />\n            );\n          };\n        }),\n    },\n  });\n}\n\ntype CardExtensionComponentProps<T> = CardExtensionProps<T> &\n  ComponentParts & {\n    title: string;\n    isCustomizable?: boolean;\n    overrideTitle?: string;\n  };\n\nfunction CardExtension<T>(props: CardExtensionComponentProps<T>) {\n  const {\n    Renderer,\n    Content,\n    Settings,\n    Actions,\n    ContextProvider,\n    isCustomizable,\n    title,\n    ...childProps\n  } = props;\n  const app = useApp();\n  const { Progress } = app.getComponents();\n  const [settingsOpen, setSettingsOpen] = React.useState(false);\n\n  if (Renderer) {\n    return (\n      <Suspense fallback={<Progress />}>\n        <Renderer\n          title={title}\n          {...{\n            Content,\n            ...(Actions ? { Actions } : {}),\n            ...(Settings && !isCustomizable ? { Settings } : {}),\n            ...(ContextProvider ? { ContextProvider } : {}),\n            ...childProps,\n          }}\n        />\n      </Suspense>\n    );\n  }\n\n  const cardProps = {\n    title: title,\n    ...(Settings && !isCustomizable\n      ? {\n          action: (\n            <IconButton onClick={() => setSettingsOpen(true)}>\n              <SettingsIcon>Settings</SettingsIcon>\n            </IconButton>\n          ),\n        }\n      : {}),\n    ...(Actions\n      ? {\n          actions: <Actions />,\n        }\n      : {}),\n  };\n\n  const innerContent = (\n    <InfoCard {...cardProps}>\n      {Settings && !isCustomizable && (\n        <SettingsModal\n          open={settingsOpen}\n          componentName={title}\n          close={() => setSettingsOpen(false)}\n        >\n          <Settings />\n        </SettingsModal>\n      )}\n      <Content {...childProps} />\n    </InfoCard>\n  );\n\n  return (\n    <Suspense fallback={<Progress />}>\n      {ContextProvider ? (\n        <ContextProvider {...childProps}>{innerContent}</ContextProvider>\n      ) : (\n        innerContent\n      )}\n    </Suspense>\n  );\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@backstage/plugin-home-react",
+  "description": "A Backstage plugin that contains react components helps you build a home page",
+  "version": "0.0.0-nightly-20230523021952",
+  "main": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "web-library"
+  },
+  "homepage": "https://github.com/backstage/backstage/tree/master/plugins/home-react#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/backstage/backstage",
+    "directory": "plugins/home-react"
+  },
+  "keywords": [
+    "backstage",
+    "homepage"
+  ],
+  "scripts": {
+    "build": "backstage-cli package build",
+    "start": "backstage-cli package start",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack",
+    "clean": "backstage-cli package clean"
+  },
+  "dependencies": {
+    "@backstage/core-components": "^0.13.1",
+    "@backstage/core-plugin-api": "^1.5.1",
+    "@material-ui/core": "^4.12.2",
+    "@material-ui/icons": "^4.9.1",
+    "@rjsf/utils": "5.6.0"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0",
+    "react-dom": "^16.13.1 || ^17.0.0",
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.0.0-nightly-20230523021952",
+    "@backstage/core-app-api": "^1.8.0",
+    "@backstage/dev-utils": "^0.0.0-nightly-20230523021952",
+    "@backstage/test-utils": "^1.3.1",
+    "@testing-library/dom": "^8.0.0",
+    "@testing-library/jest-dom": "^5.10.1",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/node": "^16.11.26",
+    "@types/react": "^16.13.1 || ^17.0.0",
+    "@types/react-grid-layout": "^1.3.2",
+    "cross-fetch": "^3.1.5",
+    "msw": "^1.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/index.esm.js"
+}