feat(vacation-calendar): updated dependencies, partial bui migration

.changeset/silly-jars-remain.md

@@ -0,0 +1,11 @@
+---
+'@axis-backstage/plugin-vacation-calendar': minor
+---
+
+Migrate the vacation calendar to Backstage UI, TanStack Query v5, Day.js, and
+react-calendar-timeline v0.30. The calendar now uses a Backstage UI date picker.
+
+The migration removes a number of legacy Material UI, date-picker, and timeline
+dependencies.
+
+**Breaking:** Consumers must install and configure `@backstage/ui`.

.gitignore

@@ -65,3 +65,4 @@ local_examples/
 # no npm _release-folders
 **/_release
 
+entities/*

package.json

@@ -6,10 +6,10 @@
     "node": "20 || 22 || 24"
   },
   "scripts": {
-    "dev": "yarn workspaces foreach -A --include backend --include app --parallel -v -i run start",
-    "dev-next": "yarn workspaces foreach -A --include backend --include app-next --parallel -v -i run start",
+    "dev": "NODE_OPTIONS=--no-node-snapshot backstage-cli repo start",
+    "dev-next": "npx backstage-cli repo start backend app-next",
     "start": "yarn workspace app start",
-    "start-backend": "yarn workspace backend start",
+    "start-backend": "backstage-cli repo start packages/backend",
     "build:backend": "yarn workspace backend build",
     "build:all": "backstage-cli repo build",
     "build-image": "yarn workspace backend build-image",
@@ -43,6 +43,7 @@
   },
   "devDependencies": {
     "@backstage/cli": "^0.36.3",
+    "@backstage/cli-defaults": "^0.1.3",
     "@backstage/e2e-test-utils": "^0.1.2",
     "@backstage/repo-tools": "^0.17.3",
     "@changesets/cli": "^2.28.1",

packages/app-next/package.json

@@ -29,6 +29,8 @@
     "@backstage/frontend-plugin-api": "^0.17.2",
     "@backstage/integration-react": "^1.2.19",
     "@backstage/plugin-api-docs": "^0.14.2",
+    "@backstage/plugin-app": "^0.5.0",
+    "@backstage/plugin-app-react": "^0.2.4",
     "@backstage/plugin-catalog": "^2.0.6",
     "@backstage/plugin-catalog-common": "^1.1.10",
     "@backstage/plugin-catalog-graph": "^0.6.5",

packages/app-next/src/App.tsx

@@ -1,8 +1,11 @@
 import { createApp } from '@backstage/frontend-defaults';
-import {
-  createFrontendModule,
-  PageBlueprint,
-} from '@backstage/frontend-plugin-api';
+import { PageBlueprint } from '@backstage/frontend-plugin-api';
+import { microsoftAuthApiRef } from '@backstage/core-plugin-api';
+import type { SignInProviderConfig } from '@backstage/core-components';
+import { SignInPage } from '@backstage/core-components';
+import { SignInPageBlueprint } from '@backstage/plugin-app-react';
+import type { SignInPageProps } from '@backstage/plugin-app-react';
+import appPlugin from '@backstage/plugin-app';
 import catalogPlugin from '@backstage/plugin-catalog/alpha';
 import catalogImportPlugin from '@backstage/plugin-catalog-import/alpha';
 import userSettingsPlugin from '@backstage/plugin-user-settings/alpha';
@@ -12,6 +15,30 @@ import { Navigate } from 'react-router';
 // See documentation for details: https://backstage.io/docs/frontend-system/architecture/app#feature-discovery
 // import jiraPlugin from '@axis-backstage/plugin-jira-dashboard/alpha';
 
+const microsoftProvider: SignInProviderConfig = {
+  id: 'microsoft-auth-provider',
+  title: 'Microsoft',
+  message: 'Sign in using Microsoft',
+  apiRef: microsoftAuthApiRef,
+};
+
+function CustomSignInPage(props: SignInPageProps) {
+  return (
+    <SignInPage
+      {...props}
+      providers={['guest', microsoftProvider]}
+      title="Select a sign-in method"
+      align="center"
+    />
+  );
+}
+
+const signInPageExtension = SignInPageBlueprint.make({
+  params: {
+    loader: async () => CustomSignInPage,
+  },
+});
+
 const homePageExtension = PageBlueprint.make({
   name: 'homePage',
   params: {
@@ -20,16 +47,17 @@ const homePageExtension = PageBlueprint.make({
   },
 });
 
+const appOverride = appPlugin.withOverrides({
+  extensions: [homePageExtension, signInPageExtension],
+});
+
 const app = createApp({
   features: [
+    appOverride,
     catalogPlugin,
     catalogImportPlugin,
     userSettingsPlugin,
     readmePlugin,
-    createFrontendModule({
-      pluginId: 'app',
-      extensions: [homePageExtension],
-    }),
   ],
 });
 

plugins/vacation-calendar/package.json

@@ -32,7 +32,9 @@
       "@axis-backstage/plugin-vacation-calendar"
     ]
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "scripts": {
     "start": "backstage-cli package start",
     "build": "backstage-cli package build",
@@ -49,21 +51,14 @@
     "@backstage/errors": "^1.3.1",
     "@backstage/frontend-plugin-api": "^0.17.2",
     "@backstage/plugin-catalog-react": "^3.1.0",
-    "@backstage/theme": "^0.7.3",
-    "@date-io/luxon": "3.0.0",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/pickers": "^3.3.11",
+    "@backstage/ui": "^0.16.0",
+    "@internationalized/date": "^3.12.2",
     "@microsoft/microsoft-graph-types": "^2.40.0",
-    "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.20",
-    "@mui/x-date-pickers": "^7.7.0",
-    "@tanstack/react-query": "4.29.1",
+    "@tanstack/react-query": "^5.101.0",
+    "dayjs": "^1.11.10",
     "interactjs": "^1.10.27",
-    "lodash": "^4.18.1",
-    "luxon": "^3.4.4",
-    "moment": "^2.30.1",
-    "prop-types": "^15.8.1",
-    "react-calendar-timeline": "^0.28.0",
+    "react-calendar-timeline": "^0.30.0-beta.4",
     "react-use": "^17.5.0"
   },
   "peerDependencies": {
@@ -81,10 +76,7 @@
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/lodash": "^4.17.5",
-    "@types/luxon": "^3.4.2",
-    "@types/react-calendar-timeline": "^0.28.6"
+    "@testing-library/user-event": "^14.5.2"
   },
   "files": [
     "dist"

plugins/vacation-calendar/src/components/CalendarCard/CalendarCard.css

@@ -0,0 +1,59 @@
+@import 'react-calendar-timeline/style.css';
+
+.react-calendar-timeline .rct-header-root {
+  background: var(--bui-bg-neutral-2, #f5f5f5);
+  border-bottom: 1px solid var(--bui-border-1, #bbb);
+}
+
+.react-calendar-timeline .rct-calendar-header {
+  border: 1px solid var(--bui-border-1, #bbb);
+  border-bottom: 0;
+}
+
+.react-calendar-timeline .rct-dateHeader {
+  background-color: var(--bui-bg-neutral-1, #fafafa);
+  border-left: 1px solid var(--bui-border-1, #bbb);
+  border-bottom: 1px solid var(--bui-border-1, #bbb);
+  color: var(--bui-fg-primary, #333);
+}
+
+.react-calendar-timeline .rct-dateHeader-primary {
+  background-color: var(--bui-bg-neutral-2, #e0e0e0);
+  color: var(--bui-fg-primary, #333);
+}
+
+.react-calendar-timeline .rct-sidebar {
+  border-right: 1px solid var(--bui-border-1, #bbb);
+}
+
+.react-calendar-timeline .timeline-sidebar-header {
+  border-bottom: 1px solid var(--bui-border-1, #bbb);
+}
+
+.react-calendar-timeline .rct-sidebar .rct-sidebar-row {
+  border-bottom: 1px solid var(--bui-border-1, #bbb);
+}
+
+.react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-odd {
+  background: var(--bui-bg-neutral-1, rgba(0, 0, 0, 0.05));
+}
+
+.react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {
+  background: var(--bui-bg-neutral-1, rgba(0, 0, 0, 0.05));
+}
+
+.react-calendar-timeline .rct-horizontal-lines .rct-hl-even,
+.react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {
+  border-bottom: 1px solid var(--bui-border-1, #bbb);
+}
+
+.react-calendar-timeline .rct-vertical-lines .rct-vl {
+  border-left: 1px solid var(--bui-border-1, #bbb);
+}
+
+.custom-group {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  white-space: nowrap;
+}