update plugins

plugins/backstage-1.54/package.json

@@ -20,6 +20,7 @@
     "lint": "backstage-cli repo lint --since origin/main",
     "lint:all": "backstage-cli repo lint",
     "prettier:check": "prettier --check .",
+    "prettier:fix": "prettier --write .",
     "new": "backstage-cli new"
   },
   "workspaces": [

plugins/backstage-1.54/packages/app/package.json

@@ -40,7 +40,11 @@
     "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.39",
     "@backstage/plugin-user-settings": "^0.9.6",
     "@backstage/ui": "^0.17.1",
+    "@internal/backstage-plugin-bcc-page-n": "workspace:^",
+    "@internal/backstage-plugin-bui-page-n": "workspace:^",
     "@internal/backstage-plugin-catalog-tab-n": "workspace:^",
+    "@internal/backstage-plugin-mui4-page-n": "workspace:^",
+    "@internal/backstage-plugin-mui5-page-n": "workspace:^",
     "@internal/backstage-plugin-page-n": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",

plugins/backstage-1.54/plugins/bcc-page-n/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

plugins/backstage-1.54/plugins/bcc-page-n/README.md

@@ -0,0 +1,20 @@
+# bcc-page-n
+
+Welcome to the bcc-page-n plugin!
+
+_This plugin was created through the Backstage CLI_
+
+## Getting started
+
+Your plugin has been added to the app in this repository, meaning you'll be able
+to access it by running `yarn start` in the root directory, and then navigating
+to [/bcc-page-n](http://localhost:3000/bcc-page-n).
+
+This plugin is built with Backstage's [frontend
+system](https://backstage.io/docs/frontend-system/architecture/index), and you
+can find more information about building plugins in the [plugin builder
+documentation](https://backstage.io/docs/frontend-system/building-plugins/index).
+
+You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
+This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
+It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.

plugins/backstage-1.54/plugins/page-n/dev/alpha.tsx → plugins/backstage-1.54/plugins/bcc-page-n/dev/index.tsx

@@ -1,5 +1,5 @@
 import { createDevApp } from '@backstage/frontend-dev-utils';
 
-import plugin from '../src/alpha';
+import plugin from '../src';
 
 createDevApp({ features: [plugin] });

plugins/backstage-1.54/plugins/bcc-page-n/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@internal/backstage-plugin-bcc-page-n",
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "private": true,
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "frontend-plugin",
+    "pluginId": "bcc-page-n"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/core-components": "0.18.13",
+    "@backstage/frontend-plugin-api": "0.18.0"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "0.36.5",
+    "@backstage/frontend-defaults": "0.5.5",
+    "@backstage/frontend-dev-utils": "0.1.5",
+    "@backstage/frontend-test-utils": "0.6.3",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "msw": "^1.0.0",
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "files": [
+    "dist"
+  ]
+}

plugins/backstage-1.54/plugins/bcc-page-n/src/components/TodoList/TodoList.tsx

@@ -0,0 +1,31 @@
+import { Table, type TableColumn } from '@backstage/core-components';
+
+export type TodoItem = {
+  title: string;
+  id: string;
+  createdBy: string;
+  createdAt: string;
+};
+
+const columns: TableColumn<TodoItem>[] = [
+  {
+    id: 'title',
+    title: 'Title',
+    field: 'title',
+  },
+  {
+    id: 'createdBy',
+    title: 'Created by',
+    field: 'createdBy',
+  },
+  {
+    id: 'createdAt',
+    title: 'Created at',
+    field: 'createdAt',
+    type: 'datetime',
+  },
+];
+
+export const TodoList = ({ todos }: { todos: TodoItem[] }) => {
+  return <Table columns={columns} data={todos} />;
+};

plugins/backstage-1.54/plugins/bcc-page-n/src/components/TodoList/index.ts

@@ -0,0 +1,2 @@
+export { TodoList } from './TodoList';
+export type { TodoItem } from './TodoList';

plugins/backstage-1.54/plugins/bcc-page-n/src/components/TodoPage/TodoPage.tsx

@@ -0,0 +1,29 @@
+import { Content, Header } from '@backstage/core-components';
+import { TodoList } from '../TodoList';
+import type { TodoItem } from '../TodoList';
+
+const exampleTodos: TodoItem[] = [
+  {
+    id: '1',
+    title: 'Install the backend plugin',
+    createdBy: 'user:default/guest',
+    createdAt: new Date().toISOString(),
+  },
+  {
+    id: '2',
+    title: 'Connect the frontend to real data',
+    createdBy: 'user:default/guest',
+    createdAt: new Date().toISOString(),
+  },
+];
+
+export const TodoPage = () => {
+  return (
+    <>
+      <Header title="Welcome to bcc-page-n!" />
+      <Content>
+        <TodoList todos={exampleTodos} />
+      </Content>
+    </>
+  );
+};

plugins/backstage-1.54/plugins/bcc-page-n/src/components/TodoPage/index.ts

@@ -0,0 +1 @@
+export { TodoPage } from './TodoPage';

plugins/backstage-1.54/plugins/bcc-page-n/src/index.ts

@@ -0,0 +1 @@
+export { bccPageNPlugin as default } from './plugin';

plugins/backstage-1.54/plugins/bcc-page-n/src/plugin.test.ts

@@ -0,0 +1,7 @@
+import { bccPageNPlugin } from './plugin';
+
+describe('bcc-page-n', () => {
+  it('should export plugin', () => {
+    expect(bccPageNPlugin).toBeDefined();
+  });
+});

plugins/backstage-1.54/plugins/bcc-page-n/src/plugin.tsx

@@ -0,0 +1,26 @@
+import {
+  createFrontendPlugin,
+  PageBlueprint,
+} from '@backstage/frontend-plugin-api';
+
+import { rootRouteRef } from './routes';
+
+const Null = () => null;
+
+export const page = PageBlueprint.make({
+  params: {
+    path: '/bcc-page-n',
+    title: 'BCC Page N',
+    icon: <Null />,
+    routeRef: rootRouteRef,
+    loader: () => import('./components/TodoPage').then(m => <m.TodoPage />),
+  },
+});
+
+export const bccPageNPlugin = createFrontendPlugin({
+  pluginId: 'bcc-page-n',
+  extensions: [page],
+  routes: {
+    root: rootRouteRef,
+  },
+});

plugins/backstage-1.54/plugins/bcc-page-n/src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

plugins/backstage-1.54/plugins/bui-page-n/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

plugins/backstage-1.54/plugins/bui-page-n/README.md

@@ -0,0 +1,20 @@
+# bui-page-n
+
+Welcome to the bui-page-n plugin!
+
+_This plugin was created through the Backstage CLI_
+
+## Getting started
+
+Your plugin has been added to the app in this repository, meaning you'll be able
+to access it by running `yarn start` in the root directory, and then navigating
+to [/bui-page-n](http://localhost:3000/bui-page-n).
+
+This plugin is built with Backstage's [frontend
+system](https://backstage.io/docs/frontend-system/architecture/index), and you
+can find more information about building plugins in the [plugin builder
+documentation](https://backstage.io/docs/frontend-system/building-plugins/index).
+
+You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
+This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
+It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.

plugins/backstage-1.54/plugins/bui-page-n/dev/index.tsx

@@ -0,0 +1,5 @@
+import { createDevApp } from '@backstage/frontend-dev-utils';
+
+import plugin from '../src';
+
+createDevApp({ features: [plugin] });

plugins/backstage-1.54/plugins/bui-page-n/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@internal/backstage-plugin-bui-page-n",
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "private": true,
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "frontend-plugin",
+    "pluginId": "bui-page-n"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/frontend-plugin-api": "0.18.0",
+    "@backstage/ui": "0.17.1",
+    "@remixicon/react": ">=4.6.0 <4.9.0"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "0.36.5",
+    "@backstage/frontend-defaults": "0.5.5",
+    "@backstage/frontend-dev-utils": "0.1.5",
+    "@backstage/frontend-test-utils": "0.6.3",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "msw": "^1.0.0",
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "files": [
+    "dist"
+  ]
+}

plugins/backstage-1.54/plugins/bui-page-n/src/components/TodoList/TodoList.tsx

@@ -0,0 +1,45 @@
+import { Table, useTable, CellText, type ColumnConfig } from '@backstage/ui';
+
+export type TodoItem = {
+  title: string;
+  id: string;
+  createdBy: string;
+  createdAt: string;
+};
+
+const columns: ColumnConfig<TodoItem>[] = [
+  {
+    id: 'title',
+    label: 'Title',
+    isRowHeader: true,
+    cell: item => <CellText title={item.title} />,
+  },
+  {
+    id: 'createdBy',
+    label: 'Created by',
+    cell: item => <CellText title={item.createdBy} />,
+  },
+  {
+    id: 'createdAt',
+    label: 'Created at',
+    cell: item => (
+      <CellText title={new Date(item.createdAt).toLocaleString()} />
+    ),
+  },
+];
+
+export const TodoList = ({ todos }: { todos: TodoItem[] }) => {
+  const { tableProps } = useTable({
+    mode: 'complete',
+    data: todos,
+    paginationOptions: { pageSize: todos.length || 1 },
+  });
+
+  return (
+    <Table
+      columnConfig={columns}
+      {...tableProps}
+      pagination={{ type: 'none' }}
+    />
+  );
+};

plugins/backstage-1.54/plugins/bui-page-n/src/components/TodoList/index.ts

@@ -0,0 +1,2 @@
+export { TodoList } from './TodoList';
+export type { TodoItem } from './TodoList';

plugins/backstage-1.54/plugins/bui-page-n/src/components/TodoPage/TodoPage.tsx

@@ -0,0 +1,29 @@
+import { Header, Container } from '@backstage/ui';
+import { TodoList } from '../TodoList';
+import type { TodoItem } from '../TodoList';
+
+const exampleTodos: TodoItem[] = [
+  {
+    id: '1',
+    title: 'Install the backend plugin',
+    createdBy: 'user:default/guest',
+    createdAt: new Date().toISOString(),
+  },
+  {
+    id: '2',
+    title: 'Connect the frontend to real data',
+    createdBy: 'user:default/guest',
+    createdAt: new Date().toISOString(),
+  },
+];
+
+export const TodoPage = () => {
+  return (
+    <>
+      <Header title="Welcome to bui-page-n!" />
+      <Container>
+        <TodoList todos={exampleTodos} />
+      </Container>
+    </>
+  );
+};

plugins/backstage-1.54/plugins/bui-page-n/src/components/TodoPage/index.ts

@@ -0,0 +1 @@
+export { TodoPage } from './TodoPage';

plugins/backstage-1.54/plugins/bui-page-n/src/index.ts

@@ -0,0 +1 @@
+export { buiPageNPlugin as default } from './plugin';

plugins/backstage-1.54/plugins/bui-page-n/src/plugin.test.ts

@@ -0,0 +1,7 @@
+import { buiPageNPlugin } from './plugin';
+
+describe('bui-page-n', () => {
+  it('should export plugin', () => {
+    expect(buiPageNPlugin).toBeDefined();
+  });
+});