paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 31 Packages Projects Releases Wiki Activity

Merge pull request #17806 from malikahmontgomery/Issue-17737

Browse Source 
Extract new plugin-home-react package and deprecate createCardExtension in plugin-home
This commit is contained in:
Fredrik Adelöw
2023-05-22 12:07:59 +02:00
committed by GitHub
parent 1d7bc73a77 8a42303a0e
commit 4b253852ba
23 changed files with 357 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/home-react/.eslintrc.js
+1
View File
@@ -0,0 +1 @@
module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
plugins/home-react/README.md
+3
View File
@@ -0,0 +1,3 @@
# Home React
A new Library that contains React Components for [home plugin](/plugins/home/README.md) depend on.
plugins/home-react/api-report.md
+76
View File
@@ -0,0 +1,76 @@
## API Report File for "@backstage/plugin-home-react"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
/// <reference types="react" />
import { Extension } from '@backstage/core-plugin-api';
import { RJSFSchema } from '@rjsf/utils';
// @public (undocumented)
export type CardConfig = {
layout?: CardLayout;
settings?: CardSettings;
};
// @public (undocumented)
export type CardExtensionProps<T> = ComponentRenderer & {
title?: string;
} & T;
// @public (undocumented)
export type CardLayout = {
width?: {
minColumns?: number;
maxColumns?: number;
defaultColumns?: number;
};
height?: {
minRows?: number;
maxRows?: number;
defaultRows?: number;
};
};
// @public (undocumented)
export type CardSettings = {
schema?: RJSFSchema;
};
// @public (undocumented)
export type ComponentParts = {
Content: (props?: any) => JSX.Element;
Actions?: () => JSX.Element;
Settings?: () => JSX.Element;
ContextProvider?: (props: any) => JSX.Element;
};
// @public (undocumented)
export type ComponentRenderer = {
Renderer?: (props: RendererProps) => JSX.Element;
};
// @public
export function createCardExtension<T>(options: {
title: string;
components: () => Promise<ComponentParts>;
name?: string;
description?: string;
layout?: CardLayout;
settings?: CardSettings;
}): Extension<(props: CardExtensionProps<T>) => JSX.Element>;
// @public (undocumented)
export type RendererProps = {
title: string;
} & ComponentParts;
// @public (undocumented)
export const SettingsModal: (props: {
open: boolean;
close: Function;
componentName: string;
children: JSX.Element;
}) => JSX.Element;
```
plugins/home-react/package.json
+65
View File
@@ -0,0 +1,65 @@
{
"name": "@backstage/plugin-home-react",
"description": "A Backstage plugin that contains react components helps you build a home page",
"version": "0.0.0",
"main": "src/index.ts",
"types": "src/index.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": "workspace:^",
"@backstage/core-plugin-api": "workspace:^",
"@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": "workspace:^",
"@backstage/core-app-api": "workspace:^",
"@backstage/dev-utils": "workspace:^",
"@backstage/test-utils": "workspace:^",
"@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"
]
}
plugins/home/src/components/SettingsModal.tsx → plugins/home-react/src/components/SettingsModal.tsx
View File
plugins/home-react/src/components/index.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* Copyright 2020 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { SettingsModal } from './SettingsModal';
plugins/home/src/extensions.tsx → plugins/home-react/src/extensions.tsx
View File
plugins/home-react/src/index.ts
+32
View File
@@ -0,0 +1,32 @@
/*
* Copyright 2021 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* A Backstage plugin that helps you build a home page
*
* @packageDocumentation
*/
export * from './components';
export { createCardExtension } from './extensions';
export type {
CardExtensionProps,
ComponentParts,
ComponentRenderer,
RendererProps,
CardLayout,
CardSettings,
CardConfig,
} from './extensions';
plugins/home/README.md
+6
View File
@@ -51,6 +51,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',
@@ -121,6 +123,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 +182,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',
plugins/home/api-report.md
+29 -51
View File
@@ -6,36 +6,30 @@
/// <reference types="react" />
import { BackstagePlugin } from '@backstage/core-plugin-api';
import { Extension } from '@backstage/core-plugin-api';
import { CardConfig as CardConfig_2 } from '@backstage/plugin-home-react';
import { CardExtensionProps as CardExtensionProps_2 } from '@backstage/plugin-home-react';
import { CardLayout as CardLayout_2 } from '@backstage/plugin-home-react';
import { CardSettings as CardSettings_2 } from '@backstage/plugin-home-react';
import { ComponentParts as ComponentParts_2 } from '@backstage/plugin-home-react';
import { ComponentRenderer as ComponentRenderer_2 } from '@backstage/plugin-home-react';
import { createCardExtension as createCardExtension_2 } from '@backstage/plugin-home-react';
import { default as React_2 } from 'react';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import { RJSFSchema } from '@rjsf/utils';
import { RendererProps as RendererProps_2 } from '@backstage/plugin-home-react';
import { RouteRef } from '@backstage/core-plugin-api';
// @public (undocumented)
export type CardExtensionProps<T> = ComponentRenderer & {
title?: string;
} & T;
// @public @deprecated (undocumented)
export type CardConfig = CardConfig_2;
// @public (undocumented)
export type CardLayout = {
width?: {
minColumns?: number;
maxColumns?: number;
defaultColumns?: number;
};
height?: {
minRows?: number;
maxRows?: number;
defaultRows?: number;
};
};
// @public @deprecated (undocumented)
export type CardExtensionProps<T> = CardExtensionProps_2<T>;
// @public (undocumented)
export type CardSettings = {
schema?: RJSFSchema;
};
// @public @deprecated (undocumented)
export type CardLayout = CardLayout_2;
// @public @deprecated (undocumented)
export type CardSettings = CardSettings_2;
// @public (undocumented)
export type ClockConfig = {
@@ -53,18 +47,11 @@ export const ComponentAccordion: (props: {
ContextProvider?: ((props: any) => JSX.Element) | undefined;
}) => JSX.Element;
// @public (undocumented)
export type ComponentParts = {
Content: (props?: any) => JSX.Element;
Actions?: () => JSX.Element;
Settings?: () => JSX.Element;
ContextProvider?: (props: any) => JSX.Element;
};
// @public @deprecated (undocumented)
export type ComponentParts = ComponentParts_2;
// @public (undocumented)
export type ComponentRenderer = {
Renderer?: (props: RendererProps) => JSX.Element;
};
// @public @deprecated (undocumented)
export type ComponentRenderer = ComponentRenderer_2;
// @public (undocumented)
export const ComponentTab: (props: {
@@ -82,15 +69,8 @@ export const ComponentTabs: (props: {
}[];
}) => JSX.Element;
// @public
export function createCardExtension<T>(options: {
title: string;
components: () => Promise<ComponentParts>;
name?: string;
description?: string;
layout?: CardLayout;
settings?: CardSettings;
}): Extension<(props: CardExtensionProps<T>) => JSX.Element>;
// @public @deprecated (undocumented)
export const createCardExtension: typeof createCardExtension_2;
// @public
export const CustomHomepageGrid: (
@@ -124,19 +104,19 @@ export const HomepageCompositionRoot: (props: {
// @public (undocumented)
export const HomePageRandomJoke: (
props: CardExtensionProps<{
props: CardExtensionProps_2<{
defaultCategory?: 'any' | 'programming' | undefined;
}>,
) => JSX.Element;
// @public
export const HomePageStarredEntities: (
props: CardExtensionProps<unknown>,
props: CardExtensionProps_2<unknown>,
) => JSX.Element;
// @public
export const HomePageToolkit: (
props: CardExtensionProps<ToolkitContentProps>,
props: CardExtensionProps_2<ToolkitContentProps>,
) => JSX.Element;
// @public (undocumented)
@@ -157,12 +137,10 @@ export type LayoutConfiguration = {
height: number;
};
// @public (undocumented)
export type RendererProps = {
title: string;
} & ComponentParts;
// @public @deprecated (undocumented)
export type RendererProps = RendererProps_2;
// @public (undocumented)
// @public @deprecated (undocumented)
export const SettingsModal: (props: {
open: boolean;
close: Function;
plugins/home/package.json
+1
View File
@@ -38,6 +38,7 @@
"@backstage/core-components": "workspace:^",
"@backstage/core-plugin-api": "workspace:^",
"@backstage/plugin-catalog-react": "workspace:^",
"@backstage/plugin-home-react": "workspace:^",
"@backstage/theme": "workspace:^",
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
plugins/home/src/componentRenderers/ComponentAccordion.tsx
+1 -2
View File
@@ -15,6 +15,7 @@
*/
import React from 'react';
import { SettingsModal } from '@backstage/plugin-home-react';
import {
Accordion,
AccordionDetails,
@@ -27,8 +28,6 @@ import { makeStyles } from '@material-ui/core/styles';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import SettingsIcon from '@material-ui/icons/Settings';
import { SettingsModal } from '../components';
const useStyles = makeStyles((theme: Theme) => ({
settingsIconButton: {
padding: theme.spacing(0, 1, 0, 0),
plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ import {
LayoutConfigurationSchema,
WidgetSchema,
} from './types';
import { CardConfig } from '../../extensions';
import { CardConfig } from '@backstage/plugin-home-react';
// eslint-disable-next-line new-cap
const ResponsiveGrid = WidthProvider(Responsive);
plugins/home/src/components/index.ts
-1
View File
@@ -15,5 +15,4 @@
*/
export { HomepageCompositionRoot } from './HomepageCompositionRoot';
export { SettingsModal } from './SettingsModal';
export * from './CustomHomepage';
plugins/home/src/deprecated.ts
+81
View File
@@ -0,0 +1,81 @@
/*
* Copyright 2022 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
createCardExtension as homeReactCreateCardExtension,
CardConfig as homeReactCardConfig,
CardExtensionProps as homeReactCardExtensionProps,
CardLayout as homeReactCardLayout,
CardSettings as homeReactCardSettings,
ComponentParts as homeReactComponentParts,
ComponentRenderer as homeReactComponentRenderer,
RendererProps as homeReactRendererProps,
SettingsModal as homeReactSettingsModal,
} from '@backstage/plugin-home-react';
/**
* @public
* @deprecated Import from `@backstage/plugin-home-react` instead
*/
export const createCardExtension = homeReactCreateCardExtension;
/**
* @public
* @deprecated Import from `@backstage/plugin-home-react` instead
*/
export type CardExtensionProps<T> = homeReactCardExtensionProps<T>;
/**
* @public
* @deprecated Import from `@backstage/plugin-home-react` instead
*/
export type CardLayout = homeReactCardLayout;
/**
* @public
* @deprecated Import from `@backstage/plugin-home-react` instead
*/
export type CardSettings = homeReactCardSettings;
/**
* @public
* @deprecated Import from `@backstage/plugin-home-react` instead
*/
export type CardConfig = homeReactCardConfig;
/**
* @public
* @deprecated Import from `@backstage/plugin-home-react` instead
*/
export type ComponentParts = homeReactComponentParts;
/**
* @public
* @deprecated Import from `@backstage/plugin-home-react` instead
*/
export type ComponentRenderer = homeReactComponentRenderer;
/**
* @public
* @deprecated Import from `@backstage/plugin-home-react` instead
*/
export type RendererProps = homeReactRendererProps;
/**
* @public
* @deprecated Import from `@backstage/plugin-home-react` instead
*/
export const SettingsModal = homeReactSettingsModal;
plugins/home/src/index.ts
+1 -9
View File
@@ -36,12 +36,4 @@ export {
export * from './components';
export * from './assets';
export * from './homePageComponents';
export { createCardExtension } from './extensions';
export type {
CardExtensionProps,
ComponentParts,
ComponentRenderer,
RendererProps,
CardLayout,
CardSettings,
} from './extensions';
export * from './deprecated';
plugins/home/src/plugin.ts
+1 -1
View File
@@ -19,7 +19,7 @@ import {
createPlugin,
createRoutableExtension,
} from '@backstage/core-plugin-api';
import { createCardExtension } from './extensions';
import { createCardExtension } from '@backstage/plugin-home-react';
import { ToolkitContentProps } from './homePageComponents';
import { rootRouteRef } from './routes';
plugins/stack-overflow/api-report.md
+1 -1
View File
@@ -7,7 +7,7 @@
import { ApiRef } from '@backstage/core-plugin-api';
import { BackstagePlugin } from '@backstage/core-plugin-api';
import { CardExtensionProps } from '@backstage/plugin-home';
import { CardExtensionProps } from '@backstage/plugin-home-react';
import { default as React_2 } from 'react';
import { ResultHighlight } from '@backstage/plugin-search-common';
import { SearchResultListItemExtensionProps } from '@backstage/plugin-search-react';
plugins/stack-overflow/package.json
+1 -1
View File
@@ -25,7 +25,7 @@
"@backstage/config": "workspace:^",
"@backstage/core-components": "workspace:^",
"@backstage/core-plugin-api": "workspace:^",
"@backstage/plugin-home": "workspace:^",
"@backstage/plugin-home-react": "workspace:^",
"@backstage/plugin-search-common": "workspace:^",
"@backstage/plugin-search-react": "workspace:^",
"@backstage/theme": "workspace:^",
plugins/stack-overflow/src/plugin.ts
+1 -1
View File
@@ -20,7 +20,7 @@ import {
createApiFactory,
configApiRef,
} from '@backstage/core-plugin-api';
import { createCardExtension } from '@backstage/plugin-home';
import { createCardExtension } from '@backstage/plugin-home-react';
import { StackOverflowQuestionsContentProps } from './types';
import { stackOverflowApiRef, StackOverflowClient } from './api';
import { SearchResultListItemExtensionProps } from '@backstage/plugin-search-react';