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

plugins/bui-themer: rename to mui-to-bui

Browse Source 
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2025-09-25 11:36:20 +02:00
parent ddf423afc9
commit 0447b8d496
12 changed files with 59 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/bui-themer-bui-palette-additions.md
+2 -4
View File
@@ -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.
packages/app/package.json
+1 -1
View File
@@ -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:^",
packages/app/src/App.tsx
+2 -2
View File
@@ -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}
</Route>
<Route path="/notifications" element={<NotificationsPage />} />
<Route path="/bui-themer" element={<BuiThemerPage />} />
<Route path="/mui-to-bui" element={<BuiThemerPage />} />
</FlatRoutes>
);
plugins/bui-themer/README.md
+9 -9
View File
@@ -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 = () => (
<FlatRoutes>
{/* ...your other routes */}
<Route path="/bui-themer" element={<BuiThemerPage />} />
<Route path="/mui-to-bui" element={<BuiThemerPage />} />
</FlatRoutes>
);
```
#### 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.
plugins/bui-themer/catalog-info.yaml
+2 -2
View File
@@ -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
plugins/bui-themer/dev/index.tsx
+1 -1
View File
@@ -21,6 +21,6 @@ createDevApp()
.addPage({
element: <BuiThemerPage />,
title: 'Root Page',
path: '/bui-themer',
path: '/mui-to-bui',
})
.render();
plugins/bui-themer/package.json
+3 -3
View File
@@ -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": {
plugins/bui-themer/report.api.md
+2 -2
View File
@@ -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: {
plugins/bui-themer/src/plugin.test.ts
+1 -1
View File
@@ -15,7 +15,7 @@
*/
import { buiThemerPlugin } from './plugin';
describe('bui-themer', () => {
describe('mui-to-bui', () => {
it('should export plugin', () => {
expect(buiThemerPlugin).toBeDefined();
});
plugins/bui-themer/src/plugin.tsx
+3 -3
View File
@@ -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 => <m.BuiThemerPage />),
routeRef: convertLegacyRouteRef(rootRouteRef),
plugins/bui-themer/src/routes.ts
+1 -1
View File
@@ -16,5 +16,5 @@
import { createRouteRef } from '@backstage/core-plugin-api';
export const rootRouteRef = createRouteRef({
id: 'bui-themer',
id: 'mui-to-bui',
});
yarn.lock
+32 -32
View File
@@ -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:^"