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:^"