From 1cd04493016a549896437ea3d0e621a3c08044e9 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Mon, 21 Aug 2023 15:00:18 +0200 Subject: [PATCH] remove app-experiments Signed-off-by: Patrik Oldsberg --- packages/app-experiments/.eslintrc.js | 1 - packages/app-experiments/README.md | 3 - packages/app-experiments/package.json | 142 ------ packages/app-experiments/src/Experiment1.tsx | 445 ------------------- packages/app-experiments/src/Experiment2.tsx | 186 -------- packages/app-experiments/src/Experiment3.tsx | 193 -------- packages/app-experiments/src/index.tsx | 22 - packages/app-experiments/src/setupTests.ts | 21 - yarn.lock | 109 ----- 9 files changed, 1122 deletions(-) delete mode 100644 packages/app-experiments/.eslintrc.js delete mode 100644 packages/app-experiments/README.md delete mode 100644 packages/app-experiments/package.json delete mode 100644 packages/app-experiments/src/Experiment1.tsx delete mode 100644 packages/app-experiments/src/Experiment2.tsx delete mode 100644 packages/app-experiments/src/Experiment3.tsx delete mode 100644 packages/app-experiments/src/index.tsx delete mode 100644 packages/app-experiments/src/setupTests.ts diff --git a/packages/app-experiments/.eslintrc.js b/packages/app-experiments/.eslintrc.js deleted file mode 100644 index e2a53a6ad2..0000000000 --- a/packages/app-experiments/.eslintrc.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@backstage/cli/config/eslint-factory')(__dirname); diff --git a/packages/app-experiments/README.md b/packages/app-experiments/README.md deleted file mode 100644 index a2c7ae1b77..0000000000 --- a/packages/app-experiments/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# example-app - -This package is an example of a Backstage application. diff --git a/packages/app-experiments/package.json b/packages/app-experiments/package.json deleted file mode 100644 index af83b2e0e1..0000000000 --- a/packages/app-experiments/package.json +++ /dev/null @@ -1,142 +0,0 @@ -{ - "name": "app-experiments", - "version": "0.0.0", - "private": true, - "backstage": { - "role": "frontend" - }, - "bundled": true, - "dependencies": { - "@backstage/app-defaults": "workspace:^", - "@backstage/catalog-model": "workspace:^", - "@backstage/cli": "workspace:^", - "@backstage/config": "workspace:^", - "@backstage/core-app-api": "workspace:^", - "@backstage/core-components": "workspace:^", - "@backstage/core-plugin-api": "workspace:^", - "@backstage/integration-react": "workspace:^", - "@backstage/plugin-adr": "workspace:^", - "@backstage/plugin-airbrake": "workspace:^", - "@backstage/plugin-apache-airflow": "workspace:^", - "@backstage/plugin-api-docs": "workspace:^", - "@backstage/plugin-azure-devops": "workspace:^", - "@backstage/plugin-azure-sites": "workspace:^", - "@backstage/plugin-badges": "workspace:^", - "@backstage/plugin-catalog-common": "workspace:^", - "@backstage/plugin-catalog-graph": "workspace:^", - "@backstage/plugin-catalog-import": "workspace:^", - "@backstage/plugin-catalog-react": "workspace:^", - "@backstage/plugin-catalog-unprocessed-entities": "workspace:^", - "@backstage/plugin-circleci": "workspace:^", - "@backstage/plugin-cloudbuild": "workspace:^", - "@backstage/plugin-code-coverage": "workspace:^", - "@backstage/plugin-cost-insights": "workspace:^", - "@backstage/plugin-devtools": "workspace:^", - "@backstage/plugin-dynatrace": "workspace:^", - "@backstage/plugin-entity-feedback": "workspace:^", - "@backstage/plugin-explore": "workspace:^", - "@backstage/plugin-gcalendar": "workspace:^", - "@backstage/plugin-gcp-projects": "workspace:^", - "@backstage/plugin-github-actions": "workspace:^", - "@backstage/plugin-gocd": "workspace:^", - "@backstage/plugin-graphiql": "workspace:^", - "@backstage/plugin-home": "workspace:^", - "@backstage/plugin-jenkins": "workspace:^", - "@backstage/plugin-kafka": "workspace:^", - "@backstage/plugin-kubernetes": "workspace:^", - "@backstage/plugin-lighthouse": "workspace:^", - "@backstage/plugin-linguist": "workspace:^", - "@backstage/plugin-linguist-common": "workspace:^", - "@backstage/plugin-microsoft-calendar": "workspace:^", - "@backstage/plugin-newrelic": "workspace:^", - "@backstage/plugin-newrelic-dashboard": "workspace:^", - "@backstage/plugin-octopus-deploy": "workspace:^", - "@backstage/plugin-org": "workspace:^", - "@backstage/plugin-pagerduty": "workspace:^", - "@backstage/plugin-permission-react": "workspace:^", - "@backstage/plugin-playlist": "workspace:^", - "@backstage/plugin-puppetdb": "workspace:^", - "@backstage/plugin-rollbar": "workspace:^", - "@backstage/plugin-scaffolder": "workspace:^", - "@backstage/plugin-scaffolder-react": "workspace:^", - "@backstage/plugin-search": "workspace:^", - "@backstage/plugin-search-common": "workspace:^", - "@backstage/plugin-search-react": "workspace:^", - "@backstage/plugin-sentry": "workspace:^", - "@backstage/plugin-shortcuts": "workspace:^", - "@backstage/plugin-stack-overflow": "workspace:^", - "@backstage/plugin-stackstorm": "workspace:^", - "@backstage/plugin-tech-insights": "workspace:^", - "@backstage/plugin-tech-radar": "workspace:^", - "@backstage/plugin-techdocs": "workspace:^", - "@backstage/plugin-techdocs-module-addons-contrib": "workspace:^", - "@backstage/plugin-techdocs-react": "workspace:^", - "@backstage/plugin-todo": "workspace:^", - "@backstage/plugin-user-settings": "workspace:^", - "@backstage/theme": "workspace:^", - "@internal/plugin-catalog-customized": "workspace:^", - "@material-ui/core": "^4.12.2", - "@material-ui/icons": "^4.9.1", - "@material-ui/lab": "4.0.0-alpha.61", - "@octokit/rest": "^19.0.3", - "@oriflame/backstage-plugin-score-card": "^0.7.0", - "@roadiehq/backstage-plugin-buildkite": "^2.0.8", - "@roadiehq/backstage-plugin-github-insights": "^2.0.5", - "@roadiehq/backstage-plugin-github-pull-requests": "^2.2.7", - "@roadiehq/backstage-plugin-travis-ci": "^2.0.5", - "history": "^5.0.0", - "lodash": "^4.17.21", - "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-router": "^6.3.0", - "react-router-dom": "^6.3.0", - "react-use": "^17.2.4", - "zen-observable": "^0.10.0", - "zod": "^3.21.4" - }, - "devDependencies": { - "@backstage/test-utils": "workspace:^", - "@testing-library/cypress": "^9.0.0", - "@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/jquery": "^3.3.34", - "@types/node": "^16.11.26", - "@types/react": "*", - "@types/react-dom": "*", - "@types/zen-observable": "^0.8.0", - "cross-env": "^7.0.0", - "cypress": "^10.0.0", - "eslint-plugin-cypress": "^2.10.3", - "start-server-and-test": "^1.10.11" - }, - "scripts": { - "start": "backstage-cli package start", - "build": "backstage-cli package build", - "clean": "backstage-cli package clean", - "test": "backstage-cli package test", - "lint": "backstage-cli package lint", - "test:e2e": "start-server-and-test start http://localhost:3000 cy:dev", - "test:e2e:ci": "start-server-and-test start http://localhost:3000 cy:run", - "cy:dev": "cypress open", - "cy:run": "cypress run" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, - "files": [ - "dist" - ], - "license": "Apache-2.0" -} diff --git a/packages/app-experiments/src/Experiment1.tsx b/packages/app-experiments/src/Experiment1.tsx deleted file mode 100644 index 0b5496f431..0000000000 --- a/packages/app-experiments/src/Experiment1.tsx +++ /dev/null @@ -1,445 +0,0 @@ -/* - * Copyright 2023 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 React, { CSSProperties, ComponentType, createContext } from 'react'; -import { z } from 'zod'; -import mapValues from 'lodash/mapValues'; -import { Typography } from '@material-ui/core'; - -/* - -App structure: - - root - - red - - green - - blue - -*/ -// app.registerExtensionPoint() - -// import { redExtensionPointRef } from 'wherever'; - -type Extension = { - factory(instanceOptions: { id: string; config: TInstanceConfig }): TSelf; -}; - -type ExtensionOptions< - TInstanceConfig, - TSelf, - TPoints extends { - [name in string]: { - typeRef: ExtensionPointTypeRef; - configSchema: z.ZodObject; - }; - }, -> = { - mountTypeRef: ExtensionPointTypeRef; - points: TPoints; - // points: { - // [name in keyof TPoints]: { - // typeRef: TPoints[name]['typeRef']; - // configSchema: z.ZodObject; - // }; - // }; - factory(instanceOptions: { - id: string; - config: TInstanceConfig; - points: { - [name in keyof TPoints]: ExtensionPointRef; - }; - // points: {[name in keyof TPoints]: TPoints[name] extends ExtensionPointTypeRef ? ExtensionPointRef : never}; - }): TSelf; -}; - -// points: { -// top: { ref: componentExtensionPointTypeRef, configSchema: z.object({}) }, -// bottom: { ref: componentExtensionPointTypeRef, configSchema: z.object({}) }, -// }, - -type ExtensionInstanceConfig = { - id: string; - config: TInstanceConfig; - // what should point be for root - mount?: string; - extension: Extension; -}; - -type ExtensionInstance = { - id: string; - // what should point be for root - mount?: string; - output: TSelf; -}; - -const BackstageAppContext = createContext<{ - extensionInstances: ExtensionInstance[]; -}>({ extensionInstances: [] }); - -const container = { - createExtension< - TInstanceConfig, - TSelf, - TPoints extends { - [name in string]: { - typeRef: ExtensionPointTypeRef; - configSchema: z.ZodObject; - }; - }, - >( - extensionOptions: ExtensionOptions, - ): Extension { - return { - factory(instanceOptions) { - return extensionOptions.factory({ - id: instanceOptions.id, - config: instanceOptions.config, - points: mapValues(extensionOptions.points, (point, name) => - createExtensionPointRef(name, point.typeRef), - ), - }); - }, - }; - }, -}; - -function useExtensionInstanceChildren( - id: string, - point: ExtensionPointRef, -): T[] { - const { extensionInstances } = React.useContext(BackstageAppContext); - - return extensionInstances - .filter(i => i.mount === `${id}/${point.name}`) - .map(extensionInstance => extensionInstance.output as T); -} - -const ExtensionInstanceChildren = (props: { - id: string; - point: ExtensionPointRef; -}) => { - const outputs = useExtensionInstanceChildren(props.id, props.point); - - return ( - <> - {outputs.map(Component => ( - - ))} - - ); -}; - -export const coreExtensionPointTypes = { - component: createExtensionPointTypeRef(), - styles: createExtensionPointTypeRef(), -}; - -const Container = container.createExtension({ - points: { - default: { - typeRef: coreExtensionPointTypes.component, - configSchema: z.object({}), - }, - }, - mountTypeRef: coreExtensionPointTypes.component, - factory: - ({ id, points }) => - () => - , -}); - -interface ExtensionPointTypeRef { - T: T; - $$type: 'extension-point-type'; -} - -function createExtensionPointTypeRef(): ExtensionPointTypeRef { - return { T: null as T, $$type: 'extension-point-type' }; -} - -interface ExtensionPointRef { - name: string; - typeRef: ExtensionPointTypeRef; - $$type: 'extension-point'; -} - -function createExtensionPointRef( - name: string, - typeRef: ExtensionPointTypeRef, -): ExtensionPointRef { - return { name, typeRef, $$type: 'extension-point' }; -} - -// const splitLayoutTopExtensionPointRef = createExtensionPointRef({ -// type: componentExtensionPointTypeRef, -// point: 'top' -// }) - -// const splitLayoutBottomExtensionPointRef = createExtensionPointRef({ -// type: componentExtensionPointTypeRef, -// point: 'bottom' -// }) - -const gridItemExtensionPointTypeRef = createExtensionPointTypeRef<{ - title: string; - Component: ComponentType; -}>(); - -const SplitGridLayout = container.createExtension({ - points: { - top: { - typeRef: gridItemExtensionPointTypeRef, - configSchema: z.object({}), - }, - bottom: { - typeRef: gridItemExtensionPointTypeRef, - configSchema: z.object({}), - }, - }, - mountTypeRef: coreExtensionPointTypes.component, - factory: - ({ id, points }) => - () => { - const topCards = useExtensionInstanceChildren(id, points.top); - const bottomCards = useExtensionInstanceChildren(id, points.bottom); - return ( -
-
- {topCards.map(card => ( - <> -

{card.title}

- - - ))} -
-
- {bottomCards.map(card => ( - <> -

{card.title}

- - - ))} -
-
- ); - }, -}); - -// const SnazzySplitLayout = container.replaceExtension(SplitGridLayout, { -// factory: ({ id, points }) => { -// ... -// } -// }) - -const Box = container.createExtension({ - points: {}, - mountTypeRef: gridItemExtensionPointTypeRef, - factory: ({ config }: { config: { color: string; title?: string } }) => { - const Component = () => ( - /** - * If I need stuff, I have to get it from context. - */ -
- {config.color} -
- ); - // registerOutput(gridItemExtensionPointTypeRef, {title: config.title ?? ''}) - // registerOutput(coreExtensionPointTypes.component, Component) - return { Component, title: config.title ?? '' }; - }, -}); - -const StyledBox = container.createExtension({ - points: { - style: { - typeRef: coreExtensionPointTypes.styles, - configSchema: z.object({}), - }, - }, - mountTypeRef: gridItemExtensionPointTypeRef, - factory: ({ id, points }) => { - const Component = () => { - const [style] = useExtensionInstanceChildren(id, points.style); - - return
Styled box
; - }; - return { Component, title: 'derp' }; - }, -}); - -const BoxStyle = container.createExtension({ - points: {}, - mountTypeRef: coreExtensionPointTypes.styles, - factory({ config }: { config: { color: string } }) { - return { - borderColor: config.color, - borderStyle: 'solid', - borderWidth: '5px', - width: 120, - height: 120, - }; - }, -}); - -function createExtensionInstances( - instanceConfigs: ExtensionInstanceConfig[], -): ExtensionInstance[] { - return instanceConfigs.map(instanceConfig => ({ - id: instanceConfig.id, - mount: instanceConfig.mount, - output: instanceConfig.extension.factory({ - id: instanceConfig.id, - config: instanceConfig.config, - }), - })); -} - -const ExtensionInstanceRenderer = (props: { id: string }) => { - const { id } = props; - const { extensionInstances } = React.useContext(BackstageAppContext); - - const value = extensionInstances.find(i => i.id === id); - - if (!value) { - throw new Error(`No extension instance found with id ${id}`); - } - - // TODO: Validation? - const ComponentInstance = value.output as React.ComponentType; - - return ; -}; - -export function Experiment1() { - const extensionInstances = createExtensionInstances([ - { id: 'root', config: {}, extension: Container }, - { - id: 'layout', - mount: 'root/default', // Maybe can omit /default here? - config: {}, - extension: SplitGridLayout, - }, - { - id: 'red', - mount: 'layout/top', - config: { color: 'red', title: 'RED' }, - extension: Box, - }, - { - id: 'green', - mount: 'layout/top', - config: { color: 'green', title: 'GREEN' }, - extension: Box, - }, - { - id: 'blue', - mount: 'layout/bottom', - config: { color: 'blue', title: 'BLUE' }, - extension: Box, - }, - { - id: 'styled-box', - mount: 'layout/bottom', - config: {}, - extension: StyledBox, - }, - { - id: 'styled-box.style', - mount: 'styled-box/style', - config: { color: 'purple' }, - extension: BoxStyle, - }, - // { - // id: 'catalogPage', - // mount: 'core/routes', - // config: { path: '/catalog' }, - // extension: Route, - // }, - ]); - - return ( - -

Experiment 1

- - This is an experiment to see how the app-experiments package works. - - - - ); -} - -/** - * Continued exploration: - * - * - routing - * - dynamic extension points - * - mount point config - * - declarative mixed with code, e.g. - * - lazy loading - * - defaults - */ - -/* -// graphiql-plugin - - - -// App.tsx - -export default app.createRoot(); -export default app.createRoot(extensionInstanceElement('root')); - -function extensionInstanceElement(id: string): JSX.Element { -} - -app: - extensions: - - root.sidebar: - use: 'CustomSidebar' - - -function CustomSidebar() { - return ( - - {extensionInstanceElement('sidebar.items.derp')} - - - ) -} - -const customSidebar = createComponentExtension({ - component: CustomSidebar -}) - -createApp({ - extensions: [customSidebar] -}) - -*/ diff --git a/packages/app-experiments/src/Experiment2.tsx b/packages/app-experiments/src/Experiment2.tsx deleted file mode 100644 index ef803803c8..0000000000 --- a/packages/app-experiments/src/Experiment2.tsx +++ /dev/null @@ -1,186 +0,0 @@ -/* - * Copyright 2023 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 React, { ComponentType } from 'react'; -import mapValues from 'lodash/mapValues'; - -/** - * App structure - * - Root - * - GroceryLayout (fruit} - * - Apple [grocery, fruit, component] - * - Orange [grocery, fruit, component] - * - Metallica [band] - */ - -interface ExtensionDataRef { - id: string; - T: T; - $$type: 'extension-data'; -} - -function createExtensionDataRef(id: string) { - return { id } as ExtensionDataRef; -} - -const coreExtensionData = { - reactComponent: createExtensionDataRef('core.reactComponent'), - - isGrocery: createExtensionDataRef('isGrocery'), - isFruit: createExtensionDataRef('isFruit'), - - isBand: createExtensionDataRef('isBand'), - title: createExtensionDataRef('core.title'), -}; - -type AnyExtensionDataMap = Record>; - -type ExtensionDataBind = { - [K in keyof TData]: (value: TData[K]['T']) => void; -}; - -type ExtensionDataValue = { - [K in keyof TData]: TData[K]['T']; -}; - -interface CreateExtensionOptions< - TData extends AnyExtensionDataMap, - TPoint extends Record, -> { - extensionData: TData; - points?: TPoint; - factory(options: { - bind: ExtensionDataBind; - config?: unknown; - points: { - [pointName in keyof TPoint]: ExtensionDataValue< - TPoint[pointName]['extensionData'] - >[]; - }; - }): void; -} - -function createExtension< - TData extends AnyExtensionDataMap, - TPoint extends Record, ->(options: CreateExtensionOptions) { - return options; -} - -const GroceryLayout = createExtension({ - points: { - groceries: { - // requiredData: [ - // coreExtensionData.reactComponent, - // coreExtensionData.isGrocery, - // ], - extensionData: { - Component: coreExtensionData.reactComponent, - isGrocery: coreExtensionData.isGrocery, - }, - }, - }, - extensionData: { - component: coreExtensionData.reactComponent, - }, - factory({ bind, points }) { - const elements = points.groceries.map(point => ); - /** - * Probably easier to evolve over time - * const elements = points.groceries.map((point) => getExtensionData(point, coreExtensionData.reactComponent)) - **/ - const Component = () =>
yo yo yo, here's my elements: {elements}
; - bind.component(Component); - }, -}); - -const Apple = createExtension({ - extensionData: { - component: coreExtensionData.reactComponent, - isGrocery: coreExtensionData.isGrocery, - isFruit: coreExtensionData.isFruit, - }, - factory({ bind }) { - const Component = () =>
apple
; - bind.component(Component); - bind.isGrocery(true); - bind.isFruit(true); - }, -}); - -const Metallica = createExtension({ - extensionData: { - component: coreExtensionData.reactComponent, - }, - factory({ bind }) { - const Component = () =>
HEAVY METAL YEAH
; - bind.component(Component); - }, -}); - -const Orange = createExtension({ - extensionData: { - component: coreExtensionData.reactComponent, - isGrocery: coreExtensionData.isGrocery, - isFruit: coreExtensionData.isFruit, - }, - factory({ bind }) { - const Component = () =>
orange
; - bind.component(Component); - bind.isGrocery(true); - bind.isFruit(true); - }, -}); - -function createExtensionInstance( - options: CreateExtensionOptions< - AnyExtensionDataMap, - Record - >, - children: { data: Map, unknown> }[], -) { - const extensionData = new Map, unknown>(); - options.factory({ - bind: mapValues(options.extensionData, ref => { - return (value: unknown) => extensionData.set(ref, value); - }), - points: mapValues(options.points, ({ extensionData: pointData }) => { - const requiredRef = Object.values(pointData); - const matchingChildren = children.filter(child => - requiredRef.every(ref => child.data.has(ref)), - ); - return matchingChildren.map(child => - mapValues(pointData, ref => child.data.get(ref)), - ); - }), - }); - return { data: extensionData }; -} - -export function Experiment2() { - const apple = createExtensionInstance(Apple, []); - const orange = createExtensionInstance(Orange, []); - const metallica = createExtensionInstance(Metallica, []); - const layout = createExtensionInstance(GroceryLayout, [ - apple, - orange, - metallica, - ]); - const Component = layout.data.get( - coreExtensionData.reactComponent, - ) as ComponentType; - return ; -} diff --git a/packages/app-experiments/src/Experiment3.tsx b/packages/app-experiments/src/Experiment3.tsx deleted file mode 100644 index e0cdd96af4..0000000000 --- a/packages/app-experiments/src/Experiment3.tsx +++ /dev/null @@ -1,193 +0,0 @@ -/* - * Copyright 2023 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. - */ - -type Extension = { - factory(instanceOptions: { id: string; config: TInstanceConfig }): TSelf; -}; - -type ExtensionInstance = { - id: string; - // what should point be for root - mount?: string; - output: TSelf; -}; - -const ExtensionInstanceRenderer = (props: { id: string }) => { - const { id } = props; - const { extensionInstances } = React.useContext(BackstageAppContext); - const value = extensionInstances.find(i => i.id === id); - if (!value) { - throw new Error(`No extension instance found with id ${id}`); - } - const ComponentInstance = value.output as React.ComponentType; - return ; -}; - -export function Experiment1() { - const extensionInstances = createExtensionInstances([ - { - id: 'layout', - parent: 'root', // Maybe can omit /default here? - config: {}, - use: SplitGridLayout, - }, - { - id: 'red', - mount: 'layout/top', - config: { color: 'red', title: 'RED' }, - use: Box, - }, - { - // green is a Box on layout/top with color=green title=GREEN - // alias, name, id, ... - // green is a Box extension attached to the `layout` extension instance on the `top` - // extension point with config { ... }. - id: 'green', - // at: { id: 'layout', point: 'top' }, - at: 'layout/top', - extension: '@backstage/plugin-catalog-react#Box', - config: { color: 'green', title: 'GREEN' }, - }, - { - id: 'blue', - at: 'layout/bottom', - extension: '@backstage/plugin-catalog-react#Box', - config: { color: 'blue', title: 'BLUE' }, - }, - - { - id: 'styled-box', - parent: 'layout/bottom', - config: { title: 'STYLED' }, - extension: StyledBox, - }, - { - id: 'styled-box.style', - parent: 'styled-box/style', - config: { color: 'purple' }, - extension: BoxStyle, - }, - - { - id: 'scaffolder.page', - bind: 'core.router/routes', - attach: 'core.router/routes', - target: 'core.router/routes', - connect: 'core.router/routes', - on: 'core.router/routes', - at: 'core.router/routes', - edge: 'core.router/routes', - config: { path: '/create' }, - extension: ScaffolderPage, - }, - { - id: 'scaffolder.fieldExtensions.derp', - attach: 'scaffolder.page/fieldExtension', - config: { color: 'purple' }, - extension: DerpScaffolderFieldExtension, - }, - ]); -} - -interface ExtensionDataRef { - id: string; - T: T; - $$type: 'extension-data'; -} - -function createExtensionDataRef(id: string) { - return { id } as ExtensionDataRef; -} - -const coreExtensionData = { - reactComponent: createExtensionDataRef('core.reactComponent'), - isGrocery: createExtensionDataRef('isGrocery'), - title: createExtensionDataRef('core.title'), -}; - -const groceryExtensionDataCollection = () => ({ - Component: coreExtensionData.reactComponent, - isGrocery: coreExtensionData.isGrocery, -}); - -const groceriesExtensionPoint = createExtensionPoint({ - extensionData: groceryExtensionDataCollection(), -}); - -const GroceryLayout = createExtension({ - points: { - groceries: groceriesExtensionPoint, - // groceries: { - // extensionData: groceryExtensionDataCollection(), - // }, - }, - extensionData: { - component: coreExtensionData.reactComponent, - }, - factory({ bind, points }) { - const elements = points.groceries.map(point => ); - const Component = () =>
yo yo yo, here's my elements: {elements}
; - bind.component(Component); - }, -}); - -// // plugin-*-react -// const GroceryLayoutExtensionDefinition = defineExtension({ -// input: { -// groceries: { -// component: coreExtensionData.reactComponent, -// isGrocery: coreExtensionData.isGrocery, -// } -// }, -// output: { -// component: coreExtensionData.reactComponent, -// }, -// }); - -// // plugin-* -// const GroceryLayoutExtension = createExtension(GroceryLayoutExtension, ({ bind, points }) => { -// ... -// }); - -const GroceryLayout = createExtension({ - inputs: { - groceries: { - Component: coreExtensionData.reactComponent, - isGrocery: coreExtensionData.isGrocery, - }, - }, - output: { - component: coreExtensionData.reactComponent, - }, - factory({ output, input }) { - const elements = input.groceries.map(point => ); - const Component = () =>
yo yo yo, here's my elements: {elements}
; - output.component.set({ component: Component }); - }, -}); - -const createGroceryExtension = createExtensionFactory(({ component }) => ({ - extensionData: groceryExtensionDataCollection(), - factory({ bind }) { - bind.component(component); - bind.isGrocery(true); - bind.isFruit(true); - }, -})); - -const Apple = createGroceryExtension({ - component: () =>
apple
, -}); diff --git a/packages/app-experiments/src/index.tsx b/packages/app-experiments/src/index.tsx deleted file mode 100644 index 3abd870c17..0000000000 --- a/packages/app-experiments/src/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/* - * 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. - */ - -import '@backstage/cli/asset-types'; -import React from 'react'; -import ReactDOM from 'react-dom'; -import { Experiment2 } from './Experiment2'; - -ReactDOM.render(, document.getElementById('root')); diff --git a/packages/app-experiments/src/setupTests.ts b/packages/app-experiments/src/setupTests.ts deleted file mode 100644 index 23fcbe9676..0000000000 --- a/packages/app-experiments/src/setupTests.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * 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. - */ - -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/yarn.lock b/yarn.lock index 0bfbe3d111..44e6c79d58 100644 --- a/yarn.lock +++ b/yarn.lock @@ -19287,115 +19287,6 @@ __metadata: languageName: node linkType: hard -"app-experiments@workspace:packages/app-experiments": - version: 0.0.0-use.local - resolution: "app-experiments@workspace:packages/app-experiments" - dependencies: - "@backstage/app-defaults": "workspace:^" - "@backstage/catalog-model": "workspace:^" - "@backstage/cli": "workspace:^" - "@backstage/config": "workspace:^" - "@backstage/core-app-api": "workspace:^" - "@backstage/core-components": "workspace:^" - "@backstage/core-plugin-api": "workspace:^" - "@backstage/integration-react": "workspace:^" - "@backstage/plugin-adr": "workspace:^" - "@backstage/plugin-airbrake": "workspace:^" - "@backstage/plugin-apache-airflow": "workspace:^" - "@backstage/plugin-api-docs": "workspace:^" - "@backstage/plugin-azure-devops": "workspace:^" - "@backstage/plugin-azure-sites": "workspace:^" - "@backstage/plugin-badges": "workspace:^" - "@backstage/plugin-catalog-common": "workspace:^" - "@backstage/plugin-catalog-graph": "workspace:^" - "@backstage/plugin-catalog-import": "workspace:^" - "@backstage/plugin-catalog-react": "workspace:^" - "@backstage/plugin-catalog-unprocessed-entities": "workspace:^" - "@backstage/plugin-circleci": "workspace:^" - "@backstage/plugin-cloudbuild": "workspace:^" - "@backstage/plugin-code-coverage": "workspace:^" - "@backstage/plugin-cost-insights": "workspace:^" - "@backstage/plugin-devtools": "workspace:^" - "@backstage/plugin-dynatrace": "workspace:^" - "@backstage/plugin-entity-feedback": "workspace:^" - "@backstage/plugin-explore": "workspace:^" - "@backstage/plugin-gcalendar": "workspace:^" - "@backstage/plugin-gcp-projects": "workspace:^" - "@backstage/plugin-github-actions": "workspace:^" - "@backstage/plugin-gocd": "workspace:^" - "@backstage/plugin-graphiql": "workspace:^" - "@backstage/plugin-home": "workspace:^" - "@backstage/plugin-jenkins": "workspace:^" - "@backstage/plugin-kafka": "workspace:^" - "@backstage/plugin-kubernetes": "workspace:^" - "@backstage/plugin-lighthouse": "workspace:^" - "@backstage/plugin-linguist": "workspace:^" - "@backstage/plugin-linguist-common": "workspace:^" - "@backstage/plugin-microsoft-calendar": "workspace:^" - "@backstage/plugin-newrelic": "workspace:^" - "@backstage/plugin-newrelic-dashboard": "workspace:^" - "@backstage/plugin-octopus-deploy": "workspace:^" - "@backstage/plugin-org": "workspace:^" - "@backstage/plugin-pagerduty": "workspace:^" - "@backstage/plugin-permission-react": "workspace:^" - "@backstage/plugin-playlist": "workspace:^" - "@backstage/plugin-puppetdb": "workspace:^" - "@backstage/plugin-rollbar": "workspace:^" - "@backstage/plugin-scaffolder": "workspace:^" - "@backstage/plugin-scaffolder-react": "workspace:^" - "@backstage/plugin-search": "workspace:^" - "@backstage/plugin-search-common": "workspace:^" - "@backstage/plugin-search-react": "workspace:^" - "@backstage/plugin-sentry": "workspace:^" - "@backstage/plugin-shortcuts": "workspace:^" - "@backstage/plugin-stack-overflow": "workspace:^" - "@backstage/plugin-stackstorm": "workspace:^" - "@backstage/plugin-tech-insights": "workspace:^" - "@backstage/plugin-tech-radar": "workspace:^" - "@backstage/plugin-techdocs": "workspace:^" - "@backstage/plugin-techdocs-module-addons-contrib": "workspace:^" - "@backstage/plugin-techdocs-react": "workspace:^" - "@backstage/plugin-todo": "workspace:^" - "@backstage/plugin-user-settings": "workspace:^" - "@backstage/test-utils": "workspace:^" - "@backstage/theme": "workspace:^" - "@internal/plugin-catalog-customized": "workspace:^" - "@material-ui/core": ^4.12.2 - "@material-ui/icons": ^4.9.1 - "@material-ui/lab": 4.0.0-alpha.61 - "@octokit/rest": ^19.0.3 - "@oriflame/backstage-plugin-score-card": ^0.7.0 - "@roadiehq/backstage-plugin-buildkite": ^2.0.8 - "@roadiehq/backstage-plugin-github-insights": ^2.0.5 - "@roadiehq/backstage-plugin-github-pull-requests": ^2.2.7 - "@roadiehq/backstage-plugin-travis-ci": ^2.0.5 - "@testing-library/cypress": ^9.0.0 - "@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/jquery": ^3.3.34 - "@types/node": ^16.11.26 - "@types/react": "*" - "@types/react-dom": "*" - "@types/zen-observable": ^0.8.0 - cross-env: ^7.0.0 - cypress: ^10.0.0 - eslint-plugin-cypress: ^2.10.3 - history: ^5.0.0 - lodash: ^4.17.21 - prop-types: ^15.7.2 - react: ^17.0.2 - react-dom: ^17.0.2 - react-router: ^6.3.0 - react-router-dom: ^6.3.0 - react-use: ^17.2.4 - start-server-and-test: ^1.10.11 - zen-observable: ^0.10.0 - zod: ^3.21.4 - languageName: unknown - linkType: soft - "append-field@npm:^1.0.0": version: 1.0.0 resolution: "append-field@npm:1.0.0"