From 0447b8d496c89647c7b39899c0db500f75426a1a Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 25 Sep 2025 11:36:20 +0200 Subject: [PATCH] plugins/bui-themer: rename to mui-to-bui Signed-off-by: Patrik Oldsberg --- .../bui-themer-bui-palette-additions.md | 6 +- packages/app/package.json | 2 +- packages/app/src/App.tsx | 4 +- plugins/bui-themer/README.md | 18 +++--- plugins/bui-themer/catalog-info.yaml | 4 +- plugins/bui-themer/dev/index.tsx | 2 +- plugins/bui-themer/package.json | 6 +- plugins/bui-themer/report.api.md | 4 +- plugins/bui-themer/src/plugin.test.ts | 2 +- plugins/bui-themer/src/plugin.tsx | 6 +- plugins/bui-themer/src/routes.ts | 2 +- yarn.lock | 64 +++++++++---------- 12 files changed, 59 insertions(+), 61 deletions(-) diff --git a/.changeset/bui-themer-bui-palette-additions.md b/.changeset/bui-themer-bui-palette-additions.md index efd6d4a139..645641b787 100644 --- a/.changeset/bui-themer-bui-palette-additions.md +++ b/.changeset/bui-themer-bui-palette-additions.md @@ -1,7 +1,5 @@ --- -'@backstage/plugin-bui-themer': minor +'@backstage/plugin-mui-to-bui': minor --- -Introduce the Backstage UI Themer plugin. It adds a new page at `/bui-themer` -that converts an existing MUI v5 theme into Backstage UI (BUI) CSS variables, -with live preview and copy/download. +This is the first release of the Material UI to Backstage UI migration helper plugin. It adds a new page at `/mui-to-bui` that converts an existing MUI v5 theme into Backstage UI (BUI) CSS variables, with live preview and copy/download. diff --git a/packages/app/package.json b/packages/app/package.json index 56e619e65a..1623ca09e5 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -46,7 +46,6 @@ "@backstage/integration-react": "workspace:^", "@backstage/plugin-api-docs": "workspace:^", "@backstage/plugin-auth-react": "workspace:^", - "@backstage/plugin-bui-themer": "workspace:^", "@backstage/plugin-catalog": "workspace:^", "@backstage/plugin-catalog-common": "workspace:^", "@backstage/plugin-catalog-graph": "workspace:^", @@ -57,6 +56,7 @@ "@backstage/plugin-home": "workspace:^", "@backstage/plugin-kubernetes": "workspace:^", "@backstage/plugin-kubernetes-cluster": "workspace:^", + "@backstage/plugin-mui-to-bui": "workspace:^", "@backstage/plugin-notifications": "workspace:^", "@backstage/plugin-org": "workspace:^", "@backstage/plugin-permission-react": "workspace:^", diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index bd64dc504f..45f91ce8a9 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -73,7 +73,7 @@ import { } from '@backstage/plugin-notifications'; import { CustomizableHomePage } from './components/home/CustomizableHomePage'; import { HomePage } from './components/home/HomePage'; -import { BuiThemerPage } from '@backstage/plugin-bui-themer'; +import { BuiThemerPage } from '@backstage/plugin-mui-to-bui'; const app = createApp({ apis, @@ -209,7 +209,7 @@ const routes = ( {customDevToolsPage} } /> - } /> + } /> ); diff --git a/plugins/bui-themer/README.md b/plugins/bui-themer/README.md index 6efc45db52..4e11db20b6 100644 --- a/plugins/bui-themer/README.md +++ b/plugins/bui-themer/README.md @@ -1,4 +1,4 @@ -# bui-themer +# mui-to-bui ## Description @@ -11,7 +11,7 @@ The Backstage UI Themer helps you convert an existing MUI v5 theme into Backstag Run this from your Backstage repo root: ```bash -yarn add --cwd packages/app @backstage/plugin-bui-themer +yarn add --cwd packages/app @backstage/plugin-mui-to-bui ``` ### 2) Wire it up depending on your frontend system @@ -25,27 +25,27 @@ Add a route for the page in your app: import React from 'react'; import { Route } from 'react-router-dom'; import { FlatRoutes } from '@backstage/core-app-api'; -import { BuiThemerPage } from '@backstage/plugin-bui-themer'; +import { BuiThemerPage } from '@backstage/plugin-mui-to-bui'; export const App = () => ( {/* ...your other routes */} - } /> + } /> ); ``` #### New frontend system -If package discovery is enabled in your app, this plugin is picked up automatically after installation — no code changes required. Just navigate to `/bui-themer`. +If package discovery is enabled in your app, this plugin is picked up automatically after installation — no code changes required. Just navigate to `/mui-to-bui`. -If you prefer explicit registration (or don't use discovery), register the plugin as a feature. The page route (`/bui-themer`) is provided by the plugin. +If you prefer explicit registration (or don't use discovery), register the plugin as a feature. The page route (`/mui-to-bui`) is provided by the plugin. ```tsx // packages/app/src/App.tsx (or your app entry where you call createApp) import React from 'react'; import { createApp } from '@backstage/frontend-defaults'; -import buiThemerPlugin from '@backstage/plugin-bui-themer'; +import buiThemerPlugin from '@backstage/plugin-mui-to-bui'; const app = createApp({ features: [ @@ -59,5 +59,5 @@ export default app.createRoot(); ## Accessing the Themer page -- Navigate to `/bui-themer` in your Backstage app (for example `http://localhost:3000/bui-themer`). -- Optional: Add a sidebar/link in your app that points to `/bui-themer` if you want a permanent navigation entry. +- Navigate to `/mui-to-bui` in your Backstage app (for example `http://localhost:3000/mui-to-bui`). +- Optional: Add a sidebar/link in your app that points to `/mui-to-bui` if you want a permanent navigation entry. diff --git a/plugins/bui-themer/catalog-info.yaml b/plugins/bui-themer/catalog-info.yaml index 15e907a0ac..9e3605267d 100644 --- a/plugins/bui-themer/catalog-info.yaml +++ b/plugins/bui-themer/catalog-info.yaml @@ -1,8 +1,8 @@ apiVersion: backstage.io/v1alpha1 kind: Component metadata: - name: backstage-plugin-bui-themer - title: '@backstage/plugin-bui-themer' + name: backstage-plugin-mui-to-bui + title: '@backstage/plugin-mui-to-bui' spec: lifecycle: experimental type: backstage-frontend-plugin diff --git a/plugins/bui-themer/dev/index.tsx b/plugins/bui-themer/dev/index.tsx index ce3986f7da..8837d540c5 100644 --- a/plugins/bui-themer/dev/index.tsx +++ b/plugins/bui-themer/dev/index.tsx @@ -21,6 +21,6 @@ createDevApp() .addPage({ element: , title: 'Root Page', - path: '/bui-themer', + path: '/mui-to-bui', }) .render(); diff --git a/plugins/bui-themer/package.json b/plugins/bui-themer/package.json index 7f8f12f464..a04bfbf474 100644 --- a/plugins/bui-themer/package.json +++ b/plugins/bui-themer/package.json @@ -1,11 +1,11 @@ { - "name": "@backstage/plugin-bui-themer", + "name": "@backstage/plugin-mui-to-bui", "version": "0.1.0", "backstage": { "role": "frontend-plugin", - "pluginId": "bui-themer", + "pluginId": "mui-to-bui", "pluginPackages": [ - "@backstage/plugin-bui-themer" + "@backstage/plugin-mui-to-bui" ] }, "publishConfig": { diff --git a/plugins/bui-themer/report.api.md b/plugins/bui-themer/report.api.md index c02fa1298d..593130ea86 100644 --- a/plugins/bui-themer/report.api.md +++ b/plugins/bui-themer/report.api.md @@ -1,4 +1,4 @@ -## API Report File for "@backstage/plugin-bui-themer" +## API Report File for "@backstage/plugin-mui-to-bui" > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). @@ -31,7 +31,7 @@ const _default: OverridableFrontendPlugin< }, {}, { - 'page:bui-themer': ExtensionDefinition<{ + 'page:mui-to-bui': ExtensionDefinition<{ kind: 'page'; name: undefined; config: { diff --git a/plugins/bui-themer/src/plugin.test.ts b/plugins/bui-themer/src/plugin.test.ts index b19adaf007..0d742fa02a 100644 --- a/plugins/bui-themer/src/plugin.test.ts +++ b/plugins/bui-themer/src/plugin.test.ts @@ -15,7 +15,7 @@ */ import { buiThemerPlugin } from './plugin'; -describe('bui-themer', () => { +describe('mui-to-bui', () => { it('should export plugin', () => { expect(buiThemerPlugin).toBeDefined(); }); diff --git a/plugins/bui-themer/src/plugin.tsx b/plugins/bui-themer/src/plugin.tsx index d485d8df0f..aca19c9978 100644 --- a/plugins/bui-themer/src/plugin.tsx +++ b/plugins/bui-themer/src/plugin.tsx @@ -31,7 +31,7 @@ import { rootRouteRef } from './routes'; // Old system /** @public */ export const buiThemerPlugin = createPlugin({ - id: 'bui-themer', + id: 'mui-to-bui', routes: { root: rootRouteRef, }, @@ -50,11 +50,11 @@ export const BuiThemerPage = buiThemerPlugin.provide( // New system /** @public */ export default createFrontendPlugin({ - pluginId: 'bui-themer', + pluginId: 'mui-to-bui', extensions: [ PageBlueprint.make({ params: { - path: '/bui-themer', + path: '/mui-to-bui', loader: () => import('./components/BuiThemerPage').then(m => ), routeRef: convertLegacyRouteRef(rootRouteRef), diff --git a/plugins/bui-themer/src/routes.ts b/plugins/bui-themer/src/routes.ts index efd79e62be..ea7c6784f7 100644 --- a/plugins/bui-themer/src/routes.ts +++ b/plugins/bui-themer/src/routes.ts @@ -16,5 +16,5 @@ import { createRouteRef } from '@backstage/core-plugin-api'; export const rootRouteRef = createRouteRef({ - id: 'bui-themer', + id: 'mui-to-bui', }); diff --git a/yarn.lock b/yarn.lock index 09dca70063..edb265f511 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4323,37 +4323,6 @@ __metadata: languageName: unknown linkType: soft -"@backstage/plugin-bui-themer@workspace:^, @backstage/plugin-bui-themer@workspace:plugins/bui-themer": - version: 0.0.0-use.local - resolution: "@backstage/plugin-bui-themer@workspace:plugins/bui-themer" - dependencies: - "@backstage/cli": "workspace:^" - "@backstage/core-compat-api": "workspace:^" - "@backstage/core-plugin-api": "workspace:^" - "@backstage/dev-utils": "workspace:^" - "@backstage/frontend-plugin-api": "workspace:^" - "@backstage/test-utils": "workspace:^" - "@backstage/theme": "workspace:^" - "@backstage/ui": "workspace:^" - "@mui/material": "npm:^5.12.2" - "@mui/system": "npm:^5.16.14" - "@testing-library/jest-dom": "npm:^6.0.0" - "@testing-library/react": "npm:^16.0.0" - "@types/react": "npm:^18.0.0" - react: "npm:^18.0.2" - react-dom: "npm:^18.0.2" - react-router-dom: "npm:^6.3.0" - peerDependencies: - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - react-dom: ^17.0.0 || ^18.0.0 - react-router-dom: ^6.3.0 - peerDependenciesMeta: - "@types/react": - optional: true - languageName: unknown - linkType: soft - "@backstage/plugin-catalog-backend-module-aws@workspace:plugins/catalog-backend-module-aws": version: 0.0.0-use.local resolution: "@backstage/plugin-catalog-backend-module-aws@workspace:plugins/catalog-backend-module-aws" @@ -5739,6 +5708,37 @@ __metadata: languageName: unknown linkType: soft +"@backstage/plugin-mui-to-bui@workspace:^, @backstage/plugin-mui-to-bui@workspace:plugins/bui-themer": + version: 0.0.0-use.local + resolution: "@backstage/plugin-mui-to-bui@workspace:plugins/bui-themer" + dependencies: + "@backstage/cli": "workspace:^" + "@backstage/core-compat-api": "workspace:^" + "@backstage/core-plugin-api": "workspace:^" + "@backstage/dev-utils": "workspace:^" + "@backstage/frontend-plugin-api": "workspace:^" + "@backstage/test-utils": "workspace:^" + "@backstage/theme": "workspace:^" + "@backstage/ui": "workspace:^" + "@mui/material": "npm:^5.12.2" + "@mui/system": "npm:^5.16.14" + "@testing-library/jest-dom": "npm:^6.0.0" + "@testing-library/react": "npm:^16.0.0" + "@types/react": "npm:^18.0.0" + react: "npm:^18.0.2" + react-dom: "npm:^18.0.2" + react-router-dom: "npm:^6.3.0" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + react-router-dom: ^6.3.0 + peerDependenciesMeta: + "@types/react": + optional: true + languageName: unknown + linkType: soft + "@backstage/plugin-notifications-backend-module-email@workspace:plugins/notifications-backend-module-email": version: 0.0.0-use.local resolution: "@backstage/plugin-notifications-backend-module-email@workspace:plugins/notifications-backend-module-email" @@ -29694,7 +29694,6 @@ __metadata: "@backstage/integration-react": "workspace:^" "@backstage/plugin-api-docs": "workspace:^" "@backstage/plugin-auth-react": "workspace:^" - "@backstage/plugin-bui-themer": "workspace:^" "@backstage/plugin-catalog": "workspace:^" "@backstage/plugin-catalog-common": "workspace:^" "@backstage/plugin-catalog-graph": "workspace:^" @@ -29705,6 +29704,7 @@ __metadata: "@backstage/plugin-home": "workspace:^" "@backstage/plugin-kubernetes": "workspace:^" "@backstage/plugin-kubernetes-cluster": "workspace:^" + "@backstage/plugin-mui-to-bui": "workspace:^" "@backstage/plugin-notifications": "workspace:^" "@backstage/plugin-org": "workspace:^" "@backstage/plugin-permission-react": "workspace:^"