@axis-backstage/plugin-vacation-calendar 0.3.0

package/README.md

@@ -0,0 +1,110 @@
+# Vacation Calendar plugin
+
+Welcome to the Vacation Calendar plugin!
+
+![calendar-year-light-example](https://github.com/AxisCommunications/backstage-plugins/blob/main/plugins/vacation-calendar/media/year-light.png)
+![calendar-year-dark-example](https://github.com/AxisCommunications/backstage-plugins/blob/main/plugins/vacation-calendar/media/year-dark.png)
+
+## Introduction
+
+The Vacation Calendar plugin allows you to get a comprehensive overview of your colleagues' vacations and out-of-office events. Clearly see when your vacations overlap or which team members will be present on specific occasions, making your life and teamwork easier and more efficient.
+
+Our plugin is based on [Microsoft-Calendar Plugin](https://github.com/backstage/community-plugins/tree/main/workspaces/microsoft-calendar/plugins/microsoft-calendar) with modifications for focusing on multiple users' calendars. Full credit to them for their great plugin!
+
+## How it works
+
+The plugin interacts with the Microsoft Graph API to fetch users' calendars and schedule items. Mark your events as Out of Office in either the Outlook client or the Teams client. By marking your events as "Out of Office," they will be correctly reflected in the Vacation Calendar plugin, providing an accurate overview of your availability.
+
+## Autentication
+
+The Vacation Calendar plugin requires Microsoft authentication. If you have not set this up, please follow the upstream guide on Microsoft authentication: [Backstage.io Microsoft Authentication Guide](https://backstage.io/docs/auth/microsoft/provider/).
+
+At present, the plugin supports only Microsoft authentication and does not integrate with other Backstage authentication methods. If you need the plugin to support a different authentication method, please create an issue so we can discuss your requirements.
+
+## Getting started
+
+1. First, install the plugin into your app:
+
+```bash
+# From your Backstage root directory
+yarn --cwd packages/app add @axis-backstage/plugin-vacation-calendar
+```
+
+2. Setup the API-factory.
+
+```ts
+// packages/app/src/apis.ts:
+
+createApiFactory({
+    api: vacationCalendarApiRef,
+    deps: {
+      authApi: microsoftAuthApiRef,
+      fetchApi: fetchApiRef,
+    },
+    factory: ({ authApi, fetchApi }) =>
+      new VacationCalendarApiClient({ authApi, fetchApi }),
+  }),
+
+```
+
+3. Modify your entity page to include the `VacationCalendarPage` component:
+
+```tsx
+// In packages/app/src/components/catalog/EntityPage.tsx
+import { VacationCalendarPage } from '@axis-backstage/plugin-vacation-calendar';
+
+const groupPage = (
+  <EntityLayout>
+    <EntityLayout.Route path="/vacation-calendar" title="Out Of Office">
+      <Grid md={6}>
+        <VacationCalendarPage />
+      </Grid>
+    </EntityLayout.Route>
+  </EntityLayout>
+);
+```
+
+By doing this, all Backstage users who are part of that group will be displayed in the `Out of Office` tab on the group's entity page.
+
+## Integration with the Catalog
+
+To fetch all colleagues with the same manager for a user entity, add the manager annotation to the entity's **catalog-info.yaml** file:
+
+```yaml
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  # ...
+  annotations:
+    manager: value # The Backstage username of the mananger
+```
+
+If the manager annotation is set, you can display all users with the same manager for a user entity. To do this, add the `VacationCalendarPage` component to the entity page for users:
+
+```tsx
+// In packages/app/src/components/catalog/EntityPage.tsx
+import { VacationCalendarPage } from '@axis-backstage/plugin-vacation-calendar';
+
+const userPage = (
+  <EntityLayout>
+    <EntityLayout.Route path="/vacation-calendar" title="Out Of Office">
+      <Grid md={6}>
+        <VacationCalendarPage />
+      </Grid>
+    </EntityLayout.Route>
+  </EntityLayout>
+);
+```
+
+## Development
+
+The plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/vacation-calendar](http://localhost:3000/vacation-calendar).
+
+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.
+
+## Screenshots
+
+![calendar-month-light-example](https://github.com/AxisCommunications/backstage-plugins/blob/main/plugins/vacation-calendar/media/month-light.png)
+![calendar-month-dark-example](https://github.com/AxisCommunications/backstage-plugins/blob/main/plugins/vacation-calendar/media/month-dark.png)

package/dist/api/VacationCalendarApi.esm.js

@@ -0,0 +1,8 @@
+import { createApiRef } from '@backstage/core-plugin-api';
+
+const vacationCalendarApiRef = createApiRef({
+  id: "plugin.vacation-calendar.service"
+});
+
+export { vacationCalendarApiRef };
+//# sourceMappingURL=VacationCalendarApi.esm.js.map

package/dist/api/VacationCalendarApi.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VacationCalendarApi.esm.js","sources":["../../src/api/VacationCalendarApi.ts"],"sourcesContent":["import { createApiRef } from '@backstage/core-plugin-api';\nimport type { MicrosoftCalendar, ScheduleInformation } from './types';\n\n/**\n * The apiref for the VacationCalendar plugin.\n *\n * @public\n */\nexport const vacationCalendarApiRef = createApiRef<VacationCalendarApi>({\n  id: 'plugin.vacation-calendar.service',\n});\n\n/**\n * The definition for the VacationCalendar api.\n *\n * @public\n */\nexport interface VacationCalendarApi {\n  /**\n   * Fetches schedule items for users\n   */\n  getCalendars(): Promise<MicrosoftCalendar[]>;\n  /**\n   * Fetches Microsoft calendars\n   */\n  getAvailability(\n    params: {\n      users: string[];\n      startDateTime: string;\n      endDateTime: string;\n    },\n    headers: {\n      [x: string]: any;\n    },\n  ): Promise<ScheduleInformation[]>;\n}\n"],"names":[],"mappings":";;AAQO,MAAM,yBAAyB,YAAkC,CAAA;AAAA,EACtE,EAAI,EAAA,kCAAA;AACN,CAAC;;;;"}

package/dist/api/VacationCalendarClient.esm.js

@@ -0,0 +1,101 @@
+import { ResponseError } from '@backstage/errors';
+
+const getAvailabilityBody = ({
+  users,
+  startDateTime,
+  endDateTime
+}) => ({
+  Schedules: users,
+  StartTime: {
+    dateTime: startDateTime,
+    timeZone: "Europe/Paris"
+  },
+  EndTime: {
+    dateTime: endDateTime,
+    timeZone: "Europe/Paris"
+  },
+  availabilityViewInterval: "1440"
+});
+class VacationCalendarApiClient {
+  authApi;
+  fetchApi;
+  constructor(options) {
+    this.authApi = options.authApi;
+    this.fetchApi = options.fetchApi;
+  }
+  async get(path, params = {}, headers) {
+    const query = new URLSearchParams(params);
+    const url = new URL(
+      `${path}?${query.toString()}`,
+      "https://graph.microsoft.com"
+    );
+    const token = await this.authApi.getAccessToken();
+    let temp = {};
+    if (headers && typeof headers === "object") {
+      temp = {
+        ...headers
+      };
+    }
+    if (token) {
+      temp.Authorization = `Bearer ${token}`;
+    }
+    const response = await this.fetchApi.fetch(url.toString(), {
+      headers: temp
+    });
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    }
+    return response.json();
+  }
+  async post(path, body, headers) {
+    const url = new URL(path, "https://graph.microsoft.com");
+    const token = await this.authApi.getAccessToken();
+    let temp = {};
+    if (headers && typeof headers === "object") {
+      temp = {
+        ...headers
+      };
+    }
+    if (token) {
+      temp.Authorization = `Bearer ${token}`;
+    }
+    temp["Content-type"] = "application/json";
+    const response = await this.fetchApi.fetch(url.toString(), {
+      method: "POST",
+      headers: temp,
+      body: JSON.stringify(body)
+    });
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    }
+    return response.json();
+  }
+  /**
+   * Fetches Microsoft calendars
+   *
+   * @returns the MicrosoftValendar objects
+   */
+  async getCalendars() {
+    const data = await this.get("v1.0/me/calendars");
+    return data.value;
+  }
+  /**
+   * Fetches schedule items for users
+   *
+   * @param users - list of users
+   * @param startDateTime - string with start date
+   * @param endDateTime - string with end date
+   * @returns Microsoft ScheduleInformation items
+   */
+  async getAvailability(params, headers) {
+    const data = await this.post(
+      `v1.0/me/calendar/getschedule`,
+      getAvailabilityBody({ ...params }),
+      headers
+    );
+    return data.value;
+  }
+}
+
+export { VacationCalendarApiClient };
+//# sourceMappingURL=VacationCalendarClient.esm.js.map

package/dist/api/VacationCalendarClient.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VacationCalendarClient.esm.js","sources":["../../src/api/VacationCalendarClient.ts"],"sourcesContent":["import { OAuthApi, FetchApi } from '@backstage/core-plugin-api';\nimport { ResponseError } from '@backstage/errors';\nimport type { ScheduleInformation, MicrosoftCalendar } from './types';\n\nconst getAvailabilityBody = ({\n  users,\n  startDateTime,\n  endDateTime,\n}: {\n  users: string[];\n  startDateTime: string;\n  endDateTime: string;\n}) => ({\n  Schedules: users,\n  StartTime: {\n    dateTime: startDateTime,\n    timeZone: 'Europe/Paris',\n  },\n  EndTime: {\n    dateTime: endDateTime,\n    timeZone: 'Europe/Paris',\n  },\n  availabilityViewInterval: '1440',\n});\n\n/**\n * The client implementation for the frontend api.\n *\n * @public\n */\nexport class VacationCalendarApiClient {\n  private readonly authApi: OAuthApi;\n  private readonly fetchApi: FetchApi;\n\n  constructor(options: { authApi: OAuthApi; fetchApi: FetchApi }) {\n    this.authApi = options.authApi;\n    this.fetchApi = options.fetchApi;\n  }\n\n  private async get<T>(\n    path: string,\n    params: { [key in string]: any } = {},\n    headers?: any,\n  ): Promise<T> {\n    const query = new URLSearchParams(params);\n    const url = new URL(\n      `${path}?${query.toString()}`,\n      'https://graph.microsoft.com',\n    );\n    const token = await this.authApi.getAccessToken();\n    let temp: any = {};\n\n    if (headers && typeof headers === 'object') {\n      temp = {\n        ...headers,\n      };\n    }\n\n    if (token) {\n      temp.Authorization = `Bearer ${token}`;\n    }\n\n    const response = await this.fetchApi.fetch(url.toString(), {\n      headers: temp,\n    });\n\n    if (!response.ok) {\n      throw await ResponseError.fromResponse(response);\n    }\n\n    return response.json() as Promise<T>;\n  }\n\n  private async post<T>(path: string, body: any, headers?: any): Promise<T> {\n    const url = new URL(path, 'https://graph.microsoft.com');\n    const token = await this.authApi.getAccessToken();\n    let temp: any = {};\n\n    if (headers && typeof headers === 'object') {\n      temp = {\n        ...headers,\n      };\n    }\n\n    if (token) {\n      temp.Authorization = `Bearer ${token}`;\n    }\n    temp['Content-type'] = 'application/json';\n\n    const response = await this.fetchApi.fetch(url.toString(), {\n      method: 'POST',\n      headers: temp,\n      body: JSON.stringify(body),\n    });\n\n    if (!response.ok) {\n      throw await ResponseError.fromResponse(response);\n    }\n\n    return response.json() as Promise<T>;\n  }\n\n  /**\n   * Fetches Microsoft calendars\n   *\n   * @returns the MicrosoftValendar objects\n   */\n  async getCalendars(): Promise<MicrosoftCalendar[]> {\n    const data = await this.get<{\n      id: string;\n      value: MicrosoftCalendar[];\n    }>('v1.0/me/calendars');\n    return data.value;\n  }\n\n  /**\n   * Fetches schedule items for users\n   *\n   * @param users - list of users\n   * @param startDateTime - string with start date\n   * @param endDateTime - string with end date\n   * @returns Microsoft ScheduleInformation items\n   */\n  async getAvailability(\n    params: {\n      users: string[];\n      startDateTime: string;\n      endDateTime: string;\n    },\n    headers: { [key in string]: any },\n  ): Promise<ScheduleInformation[]> {\n    const data = await this.post<{\n      id: string;\n      value: ScheduleInformation[];\n    }>(\n      `v1.0/me/calendar/getschedule`,\n      getAvailabilityBody({ ...params }),\n      headers,\n    );\n    return data.value;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/CalendarCard/CalendarCard.esm.js

@@ -0,0 +1,203 @@
+import React, { useState } from 'react';
+import useAsync from 'react-use/lib/useAsync';
+import Timeline, { TimelineHeaders, SidebarHeader, DateHeader } from 'react-calendar-timeline';
+import { DateTime } from 'luxon';
+import { useApi } from '@backstage/core-plugin-api';
+import { useEntity, catalogApiRef } from '@backstage/plugin-catalog-react';
+import { ErrorPanel, Content, ContentHeader, SupportButton, Progress, Link, Avatar } from '@backstage/core-components';
+import { DateSelector } from '../DateSelector/DateSelector.esm.js';
+import { getGroups, getScheduleItems } from './lib.esm.js';
+import { fetchUserEntities, fetchGroupEntities } from './fetch.esm.js';
+import { useAvailability } from '../../hooks/useAvailibility.esm.js';
+import { useSignIn } from '../../hooks/useSignIn.esm.js';
+import { SignInContent } from '../SignInContent/SignInContent.esm.js';
+import MuiLink from '@mui/material/Link';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+
+const DEFAULT_NUM_DAYS = 60;
+const IntervalDateHeader = (props) => {
+  return /* @__PURE__ */ React.createElement(
+    MuiLink,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        borderBottom: "1px solid #bbb",
+        cursor: "pointer",
+        fontSize: "14px",
+        borderLeft: "2px solid #bbb",
+        color: (theme) => theme.palette.text.primary,
+        position: "absolute",
+        width: props?.intervalContext.interval.labelWidth,
+        left: props?.intervalContext.interval.left
+      },
+      onClick: props?.getIntervalProps().onClick
+    },
+    props?.intervalContext.intervalText
+  );
+};
+const CalendarCard = () => {
+  const { entity } = useEntity();
+  const catalogApi = useApi(catalogApiRef);
+  const [startDate, setStartDate] = useState(DateTime.now());
+  const [endDate, setEndDate] = useState(
+    DateTime.now().endOf("day").plus({ days: DEFAULT_NUM_DAYS })
+  );
+  const { isSignedIn, isInitialized, signIn } = useSignIn();
+  useAsync(async () => signIn(true), [signIn]);
+  const isUserEntity = entity.kind.toLowerCase() === "user" && entity.metadata.name;
+  const { value: users } = useAsync(async () => {
+    return isUserEntity ? fetchUserEntities(catalogApi, entity) : fetchGroupEntities(catalogApi, entity);
+  }, [catalogApi, entity]);
+  const {
+    availablity,
+    error,
+    isLoading: isAvailabilityLoading,
+    isFetching: isAvailabilityFetching,
+    hasNextPage,
+    fetchNextPage
+  } = useAvailability(users, startDate, endDate, isSignedIn);
+  const showLoader = isAvailabilityLoading || isAvailabilityFetching || !isInitialized;
+  const groups = getGroups(availablity, isUserEntity, users);
+  const scheduleItems = getScheduleItems(availablity);
+  if (users?.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      ErrorPanel,
+      {
+        title: "No users found.",
+        defaultExpanded: true,
+        error: Error("No users found for current entity.")
+      }
+    );
+  }
+  if (error instanceof Error) {
+    return /* @__PURE__ */ React.createElement(
+      ErrorPanel,
+      {
+        title: "Microsoft Graph Error.",
+        defaultExpanded: true,
+        error
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Out of Office Calendar" }, /* @__PURE__ */ React.createElement(SupportButton, { title: "Backstage Out Of Office Calendar" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, "How it works"), /* @__PURE__ */ React.createElement(Typography, null, 'The "Out of Office"-calendar shows Away events. If you want your calendar events to be seen in the "Out of Office"-calendar, be sure to mark your presence as "Away" in outlook.'), /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, "Limitations"), /* @__PURE__ */ React.createElement(Typography, null, "Due to limitations in the Microsoft Graph API the maximum range of the dates is ", DEFAULT_NUM_DAYS, " days.")))), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Stack, { direction: "row", gap: 3, alignItems: "center" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
+    DateSelector,
+    {
+      onDateChange: (d) => {
+        if (d instanceof DateTime) {
+          const { days } = endDate.diff(d, "days").toObject();
+          if (days && Math.abs(days) > DEFAULT_NUM_DAYS) {
+            setEndDate(d.endOf("day").plus({ days: DEFAULT_NUM_DAYS }));
+          }
+          setStartDate(d);
+        }
+      },
+      initalDate: startDate,
+      label: "Start Date"
+    }
+  )), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
+    DateSelector,
+    {
+      onDateChange: (d) => {
+        if (d instanceof DateTime) {
+          const { days } = startDate.diff(d, "days").toObject();
+          if (days && Math.abs(days) > DEFAULT_NUM_DAYS) {
+            setStartDate(
+              d.endOf("day").minus({ days: DEFAULT_NUM_DAYS })
+            );
+          }
+          setEndDate(d);
+        }
+      },
+      initalDate: endDate,
+      label: "End Date"
+    }
+  )), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      onClick: () => {
+        fetchNextPage();
+      },
+      disabled: showLoader || !hasNextPage,
+      variant: "contained",
+      color: "primary"
+    },
+    "Show more Users"
+  ))), showLoader && /* @__PURE__ */ React.createElement(Box, { py: 2 }, /* @__PURE__ */ React.createElement(Progress, { variant: "query" })), !isSignedIn && isInitialized && /* @__PURE__ */ React.createElement(Box, { p: 1, pb: 0, minHeight: 200, maxHeight: 602, overflow: "auto" }, /* @__PURE__ */ React.createElement(SignInContent, { handleAuthClick: () => signIn(false) })), !isAvailabilityLoading && isSignedIn && /* @__PURE__ */ React.createElement(Box, { mt: 3, pb: 0, minHeight: 200, overflow: "auto" }, /* @__PURE__ */ React.createElement(
+    Timeline,
+    {
+      groups,
+      sidebarWidth: 250,
+      groupRenderer: ({ group }) => {
+        return /* @__PURE__ */ React.createElement(
+          Link,
+          {
+            to: `/catalog/default/user/${group.entity?.metadata.name}`
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: "custom-group",
+              style: {
+                background: group.highlight ? "linear-gradient(90deg, #FFCC33A0, transparent 100%)" : "",
+                marginLeft: "-4px",
+                paddingLeft: "4px",
+                display: "flex",
+                whiteSpace: "nowrap",
+                flexWrap: "nowrap",
+                flexDirection: "row",
+                gap: "5px"
+              }
+            },
+            /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+              Avatar,
+              {
+                displayName: group.entity?.metadata.displayName,
+                picture: group.entity?.spec.profile?.picture,
+                customStyles: {
+                  width: 30,
+                  height: 30
+                }
+              }
+            )),
+            /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { className: "title" }, group.title))
+          )
+        );
+      },
+      items: scheduleItems,
+      itemTouchSendsClick: false,
+      defaultTimeStart: startDate.toJSDate(),
+      defaultTimeEnd: endDate.toJSDate()
+    },
+    /* @__PURE__ */ React.createElement(
+      TimelineHeaders,
+      {
+        style: {
+          backgroundColor: "transparent",
+          color: "black",
+          position: "sticky",
+          top: "-6px"
+        }
+      },
+      /* @__PURE__ */ React.createElement(SidebarHeader, null, ({ getRootProps }) => {
+        return /* @__PURE__ */ React.createElement("div", { ...getRootProps() });
+      }),
+      /* @__PURE__ */ React.createElement(
+        DateHeader,
+        {
+          unit: "primaryHeader",
+          intervalRenderer: IntervalDateHeader
+        }
+      ),
+      /* @__PURE__ */ React.createElement(DateHeader, { intervalRenderer: IntervalDateHeader })
+    )
+  ))));
+};
+
+export { CalendarCard };
+//# sourceMappingURL=CalendarCard.esm.js.map

package/dist/components/CalendarCard/CalendarCard.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarCard.esm.js","sources":["../../../src/components/CalendarCard/CalendarCard.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport useAsync from 'react-use/lib/useAsync';\nimport Timeline, {\n  TimelineHeaders,\n  SidebarHeader,\n  DateHeader,\n  IntervalRenderer,\n} from 'react-calendar-timeline';\nimport { DateTime } from 'luxon';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { useEntity, catalogApiRef } from '@backstage/plugin-catalog-react';\nimport {\n  Content,\n  ContentHeader,\n  SupportButton,\n  Link,\n  ErrorPanel,\n  Progress,\n  Avatar,\n} from '@backstage/core-components';\nimport { DateSelector } from '../DateSelector';\nimport { getGroups, getScheduleItems } from './lib';\nimport { fetchGroupEntities, fetchUserEntities } from './fetch';\nimport { useAvailability } from '../../hooks/useAvailibility';\nimport { useSignIn } from '../../hooks';\nimport { SignInContent } from '../SignInContent';\nimport MuiLink from '@mui/material/Link';\nimport Button from '@mui/material/Button';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport Stack from '@mui/material/Stack';\n\nimport { Theme } from '@mui/material/styles';\n\nconst DEFAULT_NUM_DAYS = 60;\n\nconst IntervalDateHeader = (props?: IntervalRenderer<object>): ReactNode => {\n  return (\n    <MuiLink\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: '100%',\n        borderBottom: '1px solid #bbb',\n        cursor: 'pointer',\n        fontSize: '14px',\n        borderLeft: '2px solid #bbb',\n        color: (theme: Theme) => theme.palette.text.primary,\n        position: 'absolute',\n        width: props?.intervalContext.interval.labelWidth,\n        left: props?.intervalContext.interval.left,\n      }}\n      onClick={props?.getIntervalProps().onClick}\n    >\n      {props?.intervalContext.intervalText}\n    </MuiLink>\n  );\n};\n\nexport const CalendarCard = () => {\n  const { entity } = useEntity();\n  const catalogApi = useApi(catalogApiRef);\n\n  const [startDate, setStartDate] = useState(DateTime.now());\n  const [endDate, setEndDate] = useState(\n    DateTime.now().endOf('day').plus({ days: DEFAULT_NUM_DAYS }),\n  );\n\n  const { isSignedIn, isInitialized, signIn } = useSignIn();\n\n  useAsync(async () => signIn(true), [signIn]);\n\n  const isUserEntity =\n    entity.kind.toLowerCase() === 'user' && entity.metadata.name;\n\n  const { value: users } = useAsync(async () => {\n    return isUserEntity\n      ? fetchUserEntities(catalogApi, entity)\n      : fetchGroupEntities(catalogApi, entity);\n  }, [catalogApi, entity]);\n\n  const {\n    availablity,\n    error,\n    isLoading: isAvailabilityLoading,\n    isFetching: isAvailabilityFetching,\n    hasNextPage,\n    fetchNextPage,\n  } = useAvailability(users, startDate, endDate, isSignedIn);\n\n  const showLoader =\n    isAvailabilityLoading || isAvailabilityFetching || !isInitialized;\n\n  const groups = getGroups(availablity, isUserEntity, users);\n  const scheduleItems = getScheduleItems(availablity);\n\n  if (users?.length === 0) {\n    return (\n      <ErrorPanel\n        title=\"No users found.\"\n        defaultExpanded\n        error={Error('No users found for current entity.')}\n      />\n    );\n  }\n  if (error instanceof Error) {\n    return (\n      <ErrorPanel\n        title=\"Microsoft Graph Error.\"\n        defaultExpanded\n        error={error as any}\n      />\n    );\n  }\n\n  return (\n    <Content>\n      <ContentHeader title=\"Out of Office Calendar\">\n        <SupportButton title=\"Backstage Out Of Office Calendar\">\n          <Box>\n            <Typography variant=\"h6\">How it works</Typography>\n            <Typography>\n              The \"Out of Office\"-calendar shows Away events. If you want your\n              calendar events to be seen in the \"Out of Office\"-calendar, be\n              sure to mark your presence as \"Away\" in outlook.\n            </Typography>\n            <Typography variant=\"h6\">Limitations</Typography>\n            <Typography>\n              Due to limitations in the Microsoft Graph API the maximum range of\n              the dates is {DEFAULT_NUM_DAYS} days.\n            </Typography>\n          </Box>\n        </SupportButton>\n      </ContentHeader>\n\n      <Box>\n        <Stack direction=\"row\" gap={3} alignItems=\"center\">\n          <Box>\n            <DateSelector\n              onDateChange={d => {\n                if (d instanceof DateTime) {\n                  const { days } = endDate.diff(d, 'days').toObject();\n                  if (days && Math.abs(days) > DEFAULT_NUM_DAYS) {\n                    setEndDate(d.endOf('day').plus({ days: DEFAULT_NUM_DAYS }));\n                  }\n                  setStartDate(d);\n                }\n              }}\n              initalDate={startDate}\n              label=\"Start Date\"\n            />\n          </Box>\n          <Box>\n            <DateSelector\n              onDateChange={d => {\n                if (d instanceof DateTime) {\n                  const { days } = startDate.diff(d, 'days').toObject();\n                  if (days && Math.abs(days) > DEFAULT_NUM_DAYS) {\n                    setStartDate(\n                      d.endOf('day').minus({ days: DEFAULT_NUM_DAYS }),\n                    );\n                  }\n                  setEndDate(d as DateTime);\n                }\n              }}\n              initalDate={endDate}\n              label=\"End Date\"\n            />\n          </Box>\n          <Box>\n            <Button\n              onClick={() => {\n                fetchNextPage();\n              }}\n              disabled={showLoader || !hasNextPage}\n              variant=\"contained\"\n              color=\"primary\"\n            >\n              Show more Users\n            </Button>\n          </Box>\n        </Stack>\n\n        {showLoader && (\n          <Box py={2}>\n            <Progress variant=\"query\" />\n          </Box>\n        )}\n        {!isSignedIn && isInitialized && (\n          <Box p={1} pb={0} minHeight={200} maxHeight={602} overflow=\"auto\">\n            <SignInContent handleAuthClick={() => signIn(false)} />\n          </Box>\n        )}\n        {!isAvailabilityLoading && isSignedIn && (\n          <Box mt={3} pb={0} minHeight={200} overflow=\"auto\">\n            <Timeline\n              groups={groups}\n              sidebarWidth={250}\n              groupRenderer={({ group }) => {\n                return (\n                  <Link\n                    to={`/catalog/default/user/${group.entity?.metadata.name}`}\n                  >\n                    <div\n                      className=\"custom-group\"\n                      style={{\n                        background: group.highlight\n                          ? 'linear-gradient(90deg, #FFCC33A0, transparent 100%)'\n                          : '',\n                        marginLeft: '-4px',\n                        paddingLeft: '4px',\n                        display: 'flex',\n                        whiteSpace: 'nowrap',\n                        flexWrap: 'nowrap',\n                        flexDirection: 'row',\n                        gap: '5px',\n                      }}\n                    >\n                      <div>\n                        <Avatar\n                          displayName={\n                            group.entity?.metadata.displayName as string\n                          }\n                          picture={group.entity?.spec.profile?.picture}\n                          customStyles={{\n                            width: 30,\n                            height: 30,\n                          }}\n                        />\n                      </div>\n                      <div>\n                        <span className=\"title\">{group.title}</span>\n                      </div>\n                    </div>\n                  </Link>\n                );\n              }}\n              items={scheduleItems as any}\n              itemTouchSendsClick={false}\n              defaultTimeStart={startDate.toJSDate()}\n              defaultTimeEnd={endDate.toJSDate()}\n            >\n              <TimelineHeaders\n                style={{\n                  backgroundColor: 'transparent',\n                  color: 'black',\n                  position: 'sticky',\n                  top: '-6px',\n                }}\n              >\n                <SidebarHeader>\n                  {({ getRootProps }) => {\n                    return <div {...getRootProps()} />;\n                  }}\n                </SidebarHeader>\n                <DateHeader\n                  unit=\"primaryHeader\"\n                  intervalRenderer={IntervalDateHeader}\n                />\n                <DateHeader intervalRenderer={IntervalDateHeader} />\n              </TimelineHeaders>\n            </Timeline>\n          </Box>\n        )}\n      </Box>\n    </Content>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CalendarCard/fetch.esm.js

@@ -0,0 +1,33 @@
+import { stringifyEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
+
+const MANAGER_ANNOTATION = "manager";
+const fetchUserEntities = async (catalogApi, entity) => {
+  if (!entity.metadata?.annotations?.[MANAGER_ANNOTATION]) {
+    return [entity];
+  }
+  const filter = {
+    kind: "User",
+    [`metadata.annotations.${MANAGER_ANNOTATION}`]: entity.metadata.annotations[MANAGER_ANNOTATION]
+  };
+  const { items } = await catalogApi.getEntities({ filter });
+  return items;
+};
+const fetchGroupEntities = async (catalogApi, entity) => {
+  const {
+    metadata: { name: groupName, namespace = DEFAULT_NAMESPACE }
+  } = entity;
+  const filter = {
+    kind: "User",
+    "relations.memberof": [
+      stringifyEntityRef({
+        kind: "group",
+        namespace: namespace.toLocaleLowerCase("en-US"),
+        name: groupName.toLocaleLowerCase("en-US")
+      })
+    ]
+  };
+  return (await catalogApi.getEntities({ filter })).items;
+};
+
+export { fetchGroupEntities, fetchUserEntities };
+//# sourceMappingURL=fetch.esm.js.map

package/dist/components/CalendarCard/fetch.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetch.esm.js","sources":["../../../src/components/CalendarCard/fetch.ts"],"sourcesContent":["import {\n  DEFAULT_NAMESPACE,\n  Entity,\n  UserEntity,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport { CatalogApi } from '@backstage/plugin-catalog-react';\n\nconst MANAGER_ANNOTATION = 'manager';\n\nexport const fetchUserEntities = async (\n  catalogApi: CatalogApi,\n  entity: Entity,\n) => {\n  if (!entity.metadata?.annotations?.[MANAGER_ANNOTATION]) {\n    return [entity as UserEntity];\n  }\n\n  const filter = {\n    kind: 'User',\n    [`metadata.annotations.${MANAGER_ANNOTATION}`]:\n      entity.metadata.annotations[MANAGER_ANNOTATION],\n  };\n\n  const { items } = await catalogApi.getEntities({ filter });\n  return items as UserEntity[];\n};\n\nexport const fetchGroupEntities = async (\n  catalogApi: CatalogApi,\n  entity: Entity,\n) => {\n  const {\n    metadata: { name: groupName, namespace = DEFAULT_NAMESPACE },\n  } = entity;\n\n  const filter = {\n    kind: 'User',\n    'relations.memberof': [\n      stringifyEntityRef({\n        kind: 'group',\n        namespace: namespace.toLocaleLowerCase('en-US'),\n        name: groupName.toLocaleLowerCase('en-US'),\n      }),\n    ],\n  };\n\n  return (await catalogApi.getEntities({ filter })).items as UserEntity[];\n};\n"],"names":[],"mappings":";;AAQA,MAAM,kBAAqB,GAAA,SAAA,CAAA;AAEd,MAAA,iBAAA,GAAoB,OAC/B,UAAA,EACA,MACG,KAAA;AACH,EAAA,IAAI,CAAC,MAAA,CAAO,QAAU,EAAA,WAAA,GAAc,kBAAkB,CAAG,EAAA;AACvD,IAAA,OAAO,CAAC,MAAoB,CAAA,CAAA;AAAA,GAC9B;AAEA,EAAA,MAAM,MAAS,GAAA;AAAA,IACb,IAAM,EAAA,MAAA;AAAA,IACN,CAAC,wBAAwB,kBAAkB,CAAA,CAAE,GAC3C,MAAO,CAAA,QAAA,CAAS,YAAY,kBAAkB,CAAA;AAAA,GAClD,CAAA;AAEA,EAAM,MAAA,EAAE,OAAU,GAAA,MAAM,WAAW,WAAY,CAAA,EAAE,QAAQ,CAAA,CAAA;AACzD,EAAO,OAAA,KAAA,CAAA;AACT,EAAA;AAEa,MAAA,kBAAA,GAAqB,OAChC,UAAA,EACA,MACG,KAAA;AACH,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA,EAAE,IAAM,EAAA,SAAA,EAAW,YAAY,iBAAkB,EAAA;AAAA,GACzD,GAAA,MAAA,CAAA;AAEJ,EAAA,MAAM,MAAS,GAAA;AAAA,IACb,IAAM,EAAA,MAAA;AAAA,IACN,oBAAsB,EAAA;AAAA,MACpB,kBAAmB,CAAA;AAAA,QACjB,IAAM,EAAA,OAAA;AAAA,QACN,SAAA,EAAW,SAAU,CAAA,iBAAA,CAAkB,OAAO,CAAA;AAAA,QAC9C,IAAA,EAAM,SAAU,CAAA,iBAAA,CAAkB,OAAO,CAAA;AAAA,OAC1C,CAAA;AAAA,KACH;AAAA,GACF,CAAA;AAEA,EAAA,OAAA,CAAQ,MAAM,UAAW,CAAA,WAAA,CAAY,EAAE,MAAA,EAAQ,CAAG,EAAA,KAAA,CAAA;AACpD;;;;"}

package/dist/components/CalendarCard/lib.esm.js

@@ -0,0 +1,46 @@
+import { head } from 'lodash';
+import { DateTime } from 'luxon';
+
+const isTimeLineItem = (item) => {
+  return item !== void 0;
+};
+const getFullName = (users, userId) => {
+  const name = head(userId.split("@"));
+  const user = users.find((u) => u.metadata.name === name);
+  if (user)
+    return user.spec.profile?.displayName;
+  return userId;
+};
+const getUser = (users, userId) => {
+  const name = head(userId.split("@"));
+  const user = users.find((u) => u.metadata.name === name);
+  return user;
+};
+const getScheduleItems = (availablity) => {
+  return availablity ? availablity?.pages.flatMap((p) => p).flatMap(
+    (a, i) => (
+      // @ts-ignore
+      a.scheduleItems?.filter((scheduleItem) => scheduleItem.status === "oof").map((s) => ({
+        id: Date.now().toString(36) + Math.random().toString(36).slice(2),
+        group: i,
+        start_time: DateTime.fromISO(s.start?.dateTime),
+        end_time: DateTime.fromISO(s.end?.dateTime),
+        canMove: false,
+        canResize: false
+      }))
+    )
+  ).filter(isTimeLineItem) : [];
+};
+const getGroups = (availablity, isUserEntity, users) => {
+  return availablity ? availablity.pages.flatMap((p) => p).map((a, i) => ({
+    id: i,
+    // @ts-ignore
+    highlight: isUserEntity && a.scheduleId && isUserEntity === head(a.scheduleId.split("@")),
+    title: getFullName(users || [], a.scheduleId || ""),
+    entity: getUser(users || [], a.scheduleId || ""),
+    height: 30
+  })) : [];
+};
+
+export { getGroups, getScheduleItems };
+//# sourceMappingURL=lib.esm.js.map

package/dist/components/CalendarCard/lib.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib.esm.js","sources":["../../../src/components/CalendarCard/lib.ts"],"sourcesContent":["import { TimelineItemBase } from 'react-calendar-timeline';\nimport { UserEntity, UserEntityV1alpha1 } from '@backstage/catalog-model';\nimport { ScheduleInformation } from '@microsoft/microsoft-graph-types';\nimport { InfiniteData } from '@tanstack/react-query';\nimport { head } from 'lodash';\nimport { DateTime } from 'luxon';\n\nconst isTimeLineItem = (\n  item: TimelineItemBase<any> | undefined,\n): item is TimelineItemBase<any> => {\n  return item !== undefined;\n};\n\nconst getFullName = (users: UserEntity[], userId: string) => {\n  const name = head(userId.split('@'));\n  const user = users.find(u => u.metadata.name === name);\n\n  if (user) return user.spec.profile?.displayName;\n  return userId;\n};\n\nconst getUser = (users: UserEntity[], userId: string) => {\n  const name = head(userId.split('@'));\n  const user = users.find(u => u.metadata.name === name);\n\n  return user;\n};\n\nexport const getScheduleItems = (\n  availablity: InfiniteData<ScheduleInformation[]> | undefined,\n) => {\n  return availablity\n    ? availablity?.pages\n        .flatMap(p => p)\n        // @ts-ignore\n        .flatMap((a, i) =>\n          // @ts-ignore\n          a.scheduleItems\n            // @ts-ignore\n            ?.filter(scheduleItem => scheduleItem.status === 'oof')\n            // @ts-ignore\n            .map(s => ({\n              id: Date.now().toString(36) + Math.random().toString(36).slice(2),\n              group: i,\n              start_time: DateTime.fromISO(s.start?.dateTime!),\n              end_time: DateTime.fromISO(s.end?.dateTime!),\n              canMove: false,\n              canResize: false,\n            })),\n        )\n        .filter(isTimeLineItem)\n    : [];\n};\n\nexport const getGroups = (\n  availablity: InfiniteData<ScheduleInformation[]> | undefined,\n  isUserEntity: string | false,\n  users: UserEntityV1alpha1[] | undefined,\n) => {\n  return availablity\n    ? availablity.pages\n        .flatMap(p => p)\n        .map((a, i) => ({\n          id: i,\n          // @ts-ignore\n          highlight:\n            isUserEntity &&\n            a.scheduleId &&\n            isUserEntity === head(a.scheduleId.split('@')),\n          title: getFullName(users || [], a.scheduleId || ''),\n          entity: getUser(users || [], a.scheduleId || ''),\n          height: 30,\n        }))\n    : [];\n};\n"],"names":[],"mappings":";;;AAOA,MAAM,cAAA,GAAiB,CACrB,IACkC,KAAA;AAClC,EAAA,OAAO,IAAS,KAAA,KAAA,CAAA,CAAA;AAClB,CAAA,CAAA;AAEA,MAAM,WAAA,GAAc,CAAC,KAAA,EAAqB,MAAmB,KAAA;AAC3D,EAAA,MAAM,IAAO,GAAA,IAAA,CAAK,MAAO,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA,CAAA;AACnC,EAAA,MAAM,OAAO,KAAM,CAAA,IAAA,CAAK,OAAK,CAAE,CAAA,QAAA,CAAS,SAAS,IAAI,CAAA,CAAA;AAErD,EAAI,IAAA,IAAA;AAAM,IAAO,OAAA,IAAA,CAAK,KAAK,OAAS,EAAA,WAAA,CAAA;AACpC,EAAO,OAAA,MAAA,CAAA;AACT,CAAA,CAAA;AAEA,MAAM,OAAA,GAAU,CAAC,KAAA,EAAqB,MAAmB,KAAA;AACvD,EAAA,MAAM,IAAO,GAAA,IAAA,CAAK,MAAO,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA,CAAA;AACnC,EAAA,MAAM,OAAO,KAAM,CAAA,IAAA,CAAK,OAAK,CAAE,CAAA,QAAA,CAAS,SAAS,IAAI,CAAA,CAAA;AAErD,EAAO,OAAA,IAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,gBAAA,GAAmB,CAC9B,WACG,KAAA;AACH,EAAA,OAAO,cACH,WAAa,EAAA,KAAA,CACV,OAAQ,CAAA,CAAA,CAAA,KAAK,CAAC,CAEd,CAAA,OAAA;AAAA,IAAQ,CAAC,CAAG,EAAA,CAAA;AAAA;AAAA,MAEX,CAAA,CAAE,eAEE,MAAO,CAAA,CAAA,YAAA,KAAgB,aAAa,MAAW,KAAA,KAAK,CAErD,CAAA,GAAA,CAAI,CAAM,CAAA,MAAA;AAAA,QACT,EAAI,EAAA,IAAA,CAAK,GAAI,EAAA,CAAE,SAAS,EAAE,CAAA,GAAI,IAAK,CAAA,MAAA,EAAS,CAAA,QAAA,CAAS,EAAE,CAAA,CAAE,MAAM,CAAC,CAAA;AAAA,QAChE,KAAO,EAAA,CAAA;AAAA,QACP,UAAY,EAAA,QAAA,CAAS,OAAQ,CAAA,CAAA,CAAE,OAAO,QAAS,CAAA;AAAA,QAC/C,QAAU,EAAA,QAAA,CAAS,OAAQ,CAAA,CAAA,CAAE,KAAK,QAAS,CAAA;AAAA,QAC3C,OAAS,EAAA,KAAA;AAAA,QACT,SAAW,EAAA,KAAA;AAAA,OACX,CAAA,CAAA;AAAA,KAAA;AAAA,GAEL,CAAA,MAAA,CAAO,cAAc,CAAA,GACxB,EAAC,CAAA;AACP,EAAA;AAEO,MAAM,SAAY,GAAA,CACvB,WACA,EAAA,YAAA,EACA,KACG,KAAA;AACH,EAAO,OAAA,WAAA,GACH,WAAY,CAAA,KAAA,CACT,OAAQ,CAAA,CAAA,CAAA,KAAK,CAAC,CACd,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAO,MAAA;AAAA,IACd,EAAI,EAAA,CAAA;AAAA;AAAA,IAEJ,SAAA,EACE,YACA,IAAA,CAAA,CAAE,UACF,IAAA,YAAA,KAAiB,KAAK,CAAE,CAAA,UAAA,CAAW,KAAM,CAAA,GAAG,CAAC,CAAA;AAAA,IAC/C,OAAO,WAAY,CAAA,KAAA,IAAS,EAAI,EAAA,CAAA,CAAE,cAAc,EAAE,CAAA;AAAA,IAClD,QAAQ,OAAQ,CAAA,KAAA,IAAS,EAAI,EAAA,CAAA,CAAE,cAAc,EAAE,CAAA;AAAA,IAC/C,MAAQ,EAAA,EAAA;AAAA,GACV,CAAE,IACJ,EAAC,CAAA;AACP;;;;"}

package/dist/components/DateSelector/DateSelector.esm.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
+import FormControl from '@mui/material/FormControl';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+
+const DateSelector = ({
+  label,
+  initalDate,
+  onDateChange
+}) => {
+  return /* @__PURE__ */ React.createElement(FormControl, { variant: "standard" }, /* @__PURE__ */ React.createElement(LocalizationProvider, { dateAdapter: AdapterLuxon }, /* @__PURE__ */ React.createElement(
+    DesktopDatePicker,
+    {
+      format: "yyyy-MM-dd",
+      label,
+      value: initalDate,
+      defaultValue: initalDate,
+      onChange: onDateChange
+    }
+  )));
+};
+
+export { DateSelector };
+//# sourceMappingURL=DateSelector.esm.js.map

package/dist/components/DateSelector/DateSelector.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateSelector.esm.js","sources":["../../../src/components/DateSelector/DateSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { DateTime } from 'luxon/src/datetime';\nimport { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';\nimport FormControl from '@mui/material/FormControl';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';\n\ntype DateSelectorProps = {\n  label: string;\n  initalDate: DateTime;\n  onDateChange: (date: DateTime | null | string | undefined) => void;\n};\n\nexport const DateSelector = ({\n  label,\n  initalDate,\n  onDateChange,\n}: DateSelectorProps) => {\n  return (\n    <FormControl variant=\"standard\">\n      <LocalizationProvider dateAdapter={AdapterLuxon}>\n        <DesktopDatePicker\n          format=\"yyyy-MM-dd\"\n          label={label}\n          value={initalDate}\n          defaultValue={initalDate}\n          onChange={onDateChange}\n        />\n      </LocalizationProvider>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAaO,MAAM,eAAe,CAAC;AAAA,EAC3B,KAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AACF,CAAyB,KAAA;AACvB,EAAA,2CACG,WAAY,EAAA,EAAA,OAAA,EAAQ,8BAClB,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,EAAqB,aAAa,YACjC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,YAAA;AAAA,MACP,KAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MACP,YAAc,EAAA,UAAA;AAAA,MACd,QAAU,EAAA,YAAA;AAAA,KAAA;AAAA,GAEd,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/SignInContent/SignInContent.esm.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+
+const SignInContent = ({ handleAuthClick }) => {
+  return /* @__PURE__ */ React.createElement(Box, { position: "relative", height: "100%", width: "100%" }, /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      height: "100%",
+      width: "80%",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "absolute",
+      p: 10,
+      left: 0,
+      top: 0
+    },
+    /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "contained",
+        color: "primary",
+        onClick: handleAuthClick,
+        size: "large"
+      },
+      "Sign in"
+    )
+  ));
+};
+
+export { SignInContent };
+//# sourceMappingURL=SignInContent.esm.js.map

package/dist/components/SignInContent/SignInContent.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignInContent.esm.js","sources":["../../../src/components/SignInContent/SignInContent.tsx"],"sourcesContent":["import React from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\n\ntype Props = {\n  handleAuthClick: React.MouseEventHandler<HTMLElement>;\n};\n\nexport const SignInContent = ({ handleAuthClick }: Props) => {\n  return (\n    <Box position=\"relative\" height=\"100%\" width=\"100%\">\n      <Box\n        height=\"100%\"\n        width=\"80%\"\n        display=\"flex\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        position=\"absolute\"\n        p={10}\n        left={0}\n        top={0}\n      >\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          onClick={handleAuthClick}\n          size=\"large\"\n        >\n          Sign in\n        </Button>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;AAQO,MAAM,aAAgB,GAAA,CAAC,EAAE,eAAA,EAA6B,KAAA;AAC3D,EAAA,2CACG,GAAI,EAAA,EAAA,QAAA,EAAS,YAAW,MAAO,EAAA,MAAA,EAAO,OAAM,MAC3C,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,MAAA;AAAA,MACP,KAAM,EAAA,KAAA;AAAA,MACN,OAAQ,EAAA,MAAA;AAAA,MACR,cAAe,EAAA,QAAA;AAAA,MACf,UAAW,EAAA,QAAA;AAAA,MACX,QAAS,EAAA,UAAA;AAAA,MACT,CAAG,EAAA,EAAA;AAAA,MACH,IAAM,EAAA,CAAA;AAAA,MACN,GAAK,EAAA,CAAA;AAAA,KAAA;AAAA,oBAEL,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACR,KAAM,EAAA,SAAA;AAAA,QACN,OAAS,EAAA,eAAA;AAAA,QACT,IAAK,EAAA,OAAA;AAAA,OAAA;AAAA,MACN,SAAA;AAAA,KAED;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/VacationCalendar.esm.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { CalendarCard } from './CalendarCard/CalendarCard.esm.js';
+
+const queryClient = new QueryClient();
+const VacationCalendar = () => {
+  return /* @__PURE__ */ React.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React.createElement(CalendarCard, null));
+};
+
+export { VacationCalendar };
+//# sourceMappingURL=VacationCalendar.esm.js.map

package/dist/components/VacationCalendar.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VacationCalendar.esm.js","sources":["../../src/components/VacationCalendar.tsx"],"sourcesContent":["import React from 'react';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { CalendarCard } from './CalendarCard';\n\nconst queryClient = new QueryClient();\n\nexport const VacationCalendar = () => {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <CalendarCard />\n    </QueryClientProvider>\n  );\n};\n"],"names":[],"mappings":";;;;AAIA,MAAM,WAAA,GAAc,IAAI,WAAY,EAAA,CAAA;AAE7B,MAAM,mBAAmB,MAAM;AACpC,EAAA,2CACG,mBAAoB,EAAA,EAAA,MAAA,EAAQ,WAC3B,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,kBAAa,CAChB,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/index.esm.js

@@ -0,0 +1,4 @@
+export { VacationCalendar } from './VacationCalendar.esm.js';
+export { vacationCalendarApiRef } from '../api/VacationCalendarApi.esm.js';
+export { VacationCalendarApiClient } from '../api/VacationCalendarClient.esm.js';
+//# sourceMappingURL=index.esm.js.map

package/dist/components/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/hooks/useAvailibility.esm.js

@@ -0,0 +1,63 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useApi } from '@backstage/core-plugin-api';
+import { slice } from 'lodash';
+import { vacationCalendarApiRef } from '../api/VacationCalendarApi.esm.js';
+import '@backstage/errors';
+
+const PAGE_SIZE = 20;
+const useAvailability = (users, startDate, endDate, isSignedIn) => {
+  const calendarApi = useApi(vacationCalendarApiRef);
+  const {
+    data: availablity,
+    error,
+    isLoading: isAvailabilityLoading,
+    isFetching: isAvailabilityFetching,
+    hasNextPage,
+    fetchNextPage
+  } = useInfiniteQuery({
+    queryFn: ({ pageParam = 0 }) => {
+      const currentUsers = slice(users || [], pageParam, pageParam + PAGE_SIZE);
+      return calendarApi.getAvailability(
+        {
+          users: currentUsers?.map((u) => u.spec.profile?.email ?? "") || [],
+          startDateTime: startDate.toISO(),
+          endDateTime: endDate.toISO()
+        },
+        {
+          Prefer: 'outlook.timezone="Europe/Stockholm"'
+        }
+      );
+    },
+    queryKey: [
+      "calendarAvailability",
+      users,
+      startDate.toISO(),
+      endDate.toISO()
+    ],
+    getNextPageParam: (_, allPages) => {
+      const numberOfUsers = allPages.flatMap((p) => p).length;
+      if (numberOfUsers === users?.length) {
+        return void 0;
+      }
+      return numberOfUsers;
+    },
+    cacheTime: 3e4 * 1e3,
+    enabled: isSignedIn && startDate.isValid && endDate.isValid && !!users,
+    retry: false,
+    refetchInterval: 3e4 * 1e3,
+    refetchIntervalInBackground: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false
+  });
+  return {
+    availablity,
+    error,
+    isLoading: isAvailabilityLoading,
+    isFetching: isAvailabilityFetching,
+    hasNextPage,
+    fetchNextPage
+  };
+};
+
+export { useAvailability };
+//# sourceMappingURL=useAvailibility.esm.js.map

package/dist/hooks/useAvailibility.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAvailibility.esm.js","sources":["../../src/hooks/useAvailibility.ts"],"sourcesContent":["import { useInfiniteQuery } from '@tanstack/react-query';\nimport { UserEntityV1alpha1 } from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { slice } from 'lodash';\nimport { DateTime } from 'luxon';\nimport { vacationCalendarApiRef } from '../api';\n\nconst PAGE_SIZE = 20;\n\nexport const useAvailability = (\n  users: UserEntityV1alpha1[] | undefined,\n  startDate: DateTime<true>,\n  endDate: DateTime<true>,\n  isSignedIn: boolean,\n) => {\n  const calendarApi = useApi(vacationCalendarApiRef);\n  const {\n    data: availablity,\n    error,\n    isLoading: isAvailabilityLoading,\n    isFetching: isAvailabilityFetching,\n    hasNextPage,\n    fetchNextPage,\n  } = useInfiniteQuery({\n    queryFn: ({ pageParam = 0 }) => {\n      const currentUsers = slice(users || [], pageParam, pageParam + PAGE_SIZE);\n\n      return calendarApi.getAvailability(\n        {\n          users: currentUsers?.map(u => u.spec.profile?.email ?? '') || [],\n          startDateTime: startDate.toISO(),\n          endDateTime: endDate.toISO(),\n        },\n        {\n          Prefer: 'outlook.timezone=\"Europe/Stockholm\"',\n        },\n      );\n    },\n    queryKey: [\n      'calendarAvailability',\n      users,\n      startDate.toISO(),\n      endDate.toISO(),\n    ],\n    getNextPageParam: (_, allPages) => {\n      const numberOfUsers = allPages.flatMap(p => p).length;\n      if (numberOfUsers === users?.length) {\n        return undefined;\n      }\n      // This will be starting index to fetch the next batch.\n      return numberOfUsers;\n    },\n    cacheTime: 30000 * 1000,\n    enabled: isSignedIn && startDate.isValid && endDate.isValid && !!users,\n    retry: false,\n    refetchInterval: 30000 * 1000,\n    refetchIntervalInBackground: false,\n    refetchOnWindowFocus: false,\n    refetchOnReconnect: false,\n  });\n  return {\n    availablity,\n    error,\n    isLoading: isAvailabilityLoading,\n    isFetching: isAvailabilityFetching,\n    hasNextPage,\n    fetchNextPage,\n  };\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,EAAA,CAAA;AAEX,MAAM,eAAkB,GAAA,CAC7B,KACA,EAAA,SAAA,EACA,SACA,UACG,KAAA;AACH,EAAM,MAAA,WAAA,GAAc,OAAO,sBAAsB,CAAA,CAAA;AACjD,EAAM,MAAA;AAAA,IACJ,IAAM,EAAA,WAAA;AAAA,IACN,KAAA;AAAA,IACA,SAAW,EAAA,qBAAA;AAAA,IACX,UAAY,EAAA,sBAAA;AAAA,IACZ,WAAA;AAAA,IACA,aAAA;AAAA,MACE,gBAAiB,CAAA;AAAA,IACnB,OAAS,EAAA,CAAC,EAAE,SAAA,GAAY,GAAQ,KAAA;AAC9B,MAAA,MAAM,eAAe,KAAM,CAAA,KAAA,IAAS,EAAI,EAAA,SAAA,EAAW,YAAY,SAAS,CAAA,CAAA;AAExE,MAAA,OAAO,WAAY,CAAA,eAAA;AAAA,QACjB;AAAA,UACE,KAAA,EAAO,YAAc,EAAA,GAAA,CAAI,CAAK,CAAA,KAAA,CAAA,CAAE,KAAK,OAAS,EAAA,KAAA,IAAS,EAAE,CAAA,IAAK,EAAC;AAAA,UAC/D,aAAA,EAAe,UAAU,KAAM,EAAA;AAAA,UAC/B,WAAA,EAAa,QAAQ,KAAM,EAAA;AAAA,SAC7B;AAAA,QACA;AAAA,UACE,MAAQ,EAAA,qCAAA;AAAA,SACV;AAAA,OACF,CAAA;AAAA,KACF;AAAA,IACA,QAAU,EAAA;AAAA,MACR,sBAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAU,KAAM,EAAA;AAAA,MAChB,QAAQ,KAAM,EAAA;AAAA,KAChB;AAAA,IACA,gBAAA,EAAkB,CAAC,CAAA,EAAG,QAAa,KAAA;AACjC,MAAA,MAAM,aAAgB,GAAA,QAAA,CAAS,OAAQ,CAAA,CAAA,CAAA,KAAK,CAAC,CAAE,CAAA,MAAA,CAAA;AAC/C,MAAI,IAAA,aAAA,KAAkB,OAAO,MAAQ,EAAA;AACnC,QAAO,OAAA,KAAA,CAAA,CAAA;AAAA,OACT;AAEA,MAAO,OAAA,aAAA,CAAA;AAAA,KACT;AAAA,IACA,WAAW,GAAQ,GAAA,GAAA;AAAA,IACnB,SAAS,UAAc,IAAA,SAAA,CAAU,WAAW,OAAQ,CAAA,OAAA,IAAW,CAAC,CAAC,KAAA;AAAA,IACjE,KAAO,EAAA,KAAA;AAAA,IACP,iBAAiB,GAAQ,GAAA,GAAA;AAAA,IACzB,2BAA6B,EAAA,KAAA;AAAA,IAC7B,oBAAsB,EAAA,KAAA;AAAA,IACtB,kBAAoB,EAAA,KAAA;AAAA,GACrB,CAAA,CAAA;AACD,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAW,EAAA,qBAAA;AAAA,IACX,UAAY,EAAA,sBAAA;AAAA,IACZ,WAAA;AAAA,IACA,aAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist/hooks/useSignIn.esm.js

@@ -0,0 +1,23 @@
+import { useState, useCallback } from 'react';
+import { useApi, microsoftAuthApiRef } from '@backstage/core-plugin-api';
+
+const useSignIn = () => {
+  const [isSignedIn, setSignedIn] = useState(false);
+  const [isInitialized, setInitialized] = useState(false);
+  const authApi = useApi(microsoftAuthApiRef);
+  const signIn = useCallback(
+    async (optional = false) => {
+      const token = await authApi.getAccessToken("Calendars.Read", {
+        optional,
+        instantPopup: !optional
+      });
+      setSignedIn(!!token);
+      setInitialized(true);
+    },
+    [authApi, setSignedIn]
+  );
+  return { isSignedIn, isInitialized, signIn };
+};
+
+export { useSignIn };
+//# sourceMappingURL=useSignIn.esm.js.map

package/dist/hooks/useSignIn.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSignIn.esm.js","sources":["../../src/hooks/useSignIn.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { microsoftAuthApiRef, useApi } from '@backstage/core-plugin-api';\n\nexport const useSignIn = () => {\n  const [isSignedIn, setSignedIn] = useState(false);\n  const [isInitialized, setInitialized] = useState(false);\n  const authApi = useApi(microsoftAuthApiRef);\n\n  const signIn = useCallback(\n    async (optional = false) => {\n      const token = await authApi.getAccessToken('Calendars.Read', {\n        optional,\n        instantPopup: !optional,\n      });\n\n      setSignedIn(!!token);\n      setInitialized(true);\n    },\n    [authApi, setSignedIn],\n  );\n\n  return { isSignedIn, isInitialized, signIn };\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,YAAY,MAAM;AAC7B,EAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAChD,EAAA,MAAM,CAAC,aAAA,EAAe,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AACtD,EAAM,MAAA,OAAA,GAAU,OAAO,mBAAmB,CAAA,CAAA;AAE1C,EAAA,MAAM,MAAS,GAAA,WAAA;AAAA,IACb,OAAO,WAAW,KAAU,KAAA;AAC1B,MAAA,MAAM,KAAQ,GAAA,MAAM,OAAQ,CAAA,cAAA,CAAe,gBAAkB,EAAA;AAAA,QAC3D,QAAA;AAAA,QACA,cAAc,CAAC,QAAA;AAAA,OAChB,CAAA,CAAA;AAED,MAAY,WAAA,CAAA,CAAC,CAAC,KAAK,CAAA,CAAA;AACnB,MAAA,cAAA,CAAe,IAAI,CAAA,CAAA;AAAA,KACrB;AAAA,IACA,CAAC,SAAS,WAAW,CAAA;AAAA,GACvB,CAAA;AAEA,EAAO,OAAA,EAAE,UAAY,EAAA,aAAA,EAAe,MAAO,EAAA,CAAA;AAC7C;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,84 @@
+/// <reference types="react" />
+import * as react from 'react';
+import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
+import { OAuthApi, FetchApi } from '@backstage/core-plugin-api';
+import { Calendar, ScheduleInformation } from '@microsoft/microsoft-graph-types';
+
+/**
+ * Plugin that provides the VacationCalendar api
+ * @public */
+declare const vacationCalendarPlugin: _backstage_core_plugin_api.BackstagePlugin<{
+    root: _backstage_core_plugin_api.RouteRef<undefined>;
+}, {}, {}>;
+/**
+ * Routable extension for VacationCalendarPage
+ * @public
+ */
+declare const VacationCalendarPage: () => react.JSX.Element;
+
+/**
+ * The apiref for the VacationCalendar plugin.
+ *
+ * @public
+ */
+declare const vacationCalendarApiRef: _backstage_core_plugin_api.ApiRef<VacationCalendarApi>;
+/**
+ * The definition for the VacationCalendar api.
+ *
+ * @public
+ */
+interface VacationCalendarApi {
+    /**
+     * Fetches schedule items for users
+     */
+    getCalendars(): Promise<Calendar[]>;
+    /**
+     * Fetches Microsoft calendars
+     */
+    getAvailability(params: {
+        users: string[];
+        startDateTime: string;
+        endDateTime: string;
+    }, headers: {
+        [x: string]: any;
+    }): Promise<ScheduleInformation[]>;
+}
+
+/**
+ * The client implementation for the frontend api.
+ *
+ * @public
+ */
+declare class VacationCalendarApiClient {
+    private readonly authApi;
+    private readonly fetchApi;
+    constructor(options: {
+        authApi: OAuthApi;
+        fetchApi: FetchApi;
+    });
+    private get;
+    private post;
+    /**
+     * Fetches Microsoft calendars
+     *
+     * @returns the MicrosoftValendar objects
+     */
+    getCalendars(): Promise<Calendar[]>;
+    /**
+     * Fetches schedule items for users
+     *
+     * @param users - list of users
+     * @param startDateTime - string with start date
+     * @param endDateTime - string with end date
+     * @returns Microsoft ScheduleInformation items
+     */
+    getAvailability(params: {
+        users: string[];
+        startDateTime: string;
+        endDateTime: string;
+    }, headers: {
+        [key in string]: any;
+    }): Promise<ScheduleInformation[]>;
+}
+
+export { type VacationCalendarApi, VacationCalendarApiClient, VacationCalendarPage, vacationCalendarApiRef, vacationCalendarPlugin };

package/dist/index.esm.js

@@ -0,0 +1,4 @@
+export { VacationCalendarPage, vacationCalendarPlugin } from './plugin.esm.js';
+export { vacationCalendarApiRef } from './api/VacationCalendarApi.esm.js';
+export { VacationCalendarApiClient } from './api/VacationCalendarClient.esm.js';
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/plugin.esm.js

@@ -0,0 +1,32 @@
+import 'react-calendar-timeline/lib/Timeline.css';
+import { createPlugin, createApiFactory, microsoftAuthApiRef, fetchApiRef, createRoutableExtension } from '@backstage/core-plugin-api';
+import { rootRouteRef } from './routes.esm.js';
+import { vacationCalendarApiRef } from './api/VacationCalendarApi.esm.js';
+import { VacationCalendarApiClient } from './api/VacationCalendarClient.esm.js';
+
+const vacationCalendarPlugin = createPlugin({
+  id: "vacation-calendar",
+  apis: [
+    createApiFactory({
+      api: vacationCalendarApiRef,
+      deps: {
+        authApi: microsoftAuthApiRef,
+        fetchApi: fetchApiRef
+      },
+      factory: ({ authApi, fetchApi }) => new VacationCalendarApiClient({ authApi, fetchApi })
+    })
+  ],
+  routes: {
+    root: rootRouteRef
+  }
+});
+const VacationCalendarPage = vacationCalendarPlugin.provide(
+  createRoutableExtension({
+    name: "VacationCalendarPage",
+    component: () => import('./components/index.esm.js').then((m) => m.VacationCalendar),
+    mountPoint: rootRouteRef
+  })
+);
+
+export { VacationCalendarPage, vacationCalendarPlugin };
+//# sourceMappingURL=plugin.esm.js.map

package/dist/plugin.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["import 'react-calendar-timeline/lib/Timeline.css';\nimport {\n  createApiFactory,\n  createPlugin,\n  createRoutableExtension,\n  fetchApiRef,\n  microsoftAuthApiRef,\n} from '@backstage/core-plugin-api';\nimport { rootRouteRef } from './routes';\nimport { VacationCalendarApiClient, vacationCalendarApiRef } from './api';\n\n/**\n * Plugin that provides the VacationCalendar api\n * @public */\nexport const vacationCalendarPlugin = createPlugin({\n  id: 'vacation-calendar',\n  apis: [\n    createApiFactory({\n      api: vacationCalendarApiRef,\n      deps: {\n        authApi: microsoftAuthApiRef,\n        fetchApi: fetchApiRef,\n      },\n      factory: ({ authApi, fetchApi }) =>\n        new VacationCalendarApiClient({ authApi, fetchApi }),\n    }),\n  ],\n  routes: {\n    root: rootRouteRef,\n  },\n});\n\n/**\n * Routable extension for VacationCalendarPage\n * @public\n */\nexport const VacationCalendarPage = vacationCalendarPlugin.provide(\n  createRoutableExtension({\n    name: 'VacationCalendarPage',\n    component: () => import('./components').then(m => m.VacationCalendar),\n    mountPoint: rootRouteRef,\n  }),\n);\n"],"names":[],"mappings":";;;;;;AAcO,MAAM,yBAAyB,YAAa,CAAA;AAAA,EACjD,EAAI,EAAA,mBAAA;AAAA,EACJ,IAAM,EAAA;AAAA,IACJ,gBAAiB,CAAA;AAAA,MACf,GAAK,EAAA,sBAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,OAAS,EAAA,mBAAA;AAAA,QACT,QAAU,EAAA,WAAA;AAAA,OACZ;AAAA,MACA,OAAA,EAAS,CAAC,EAAE,OAAS,EAAA,QAAA,EACnB,KAAA,IAAI,yBAA0B,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU,CAAA;AAAA,KACtD,CAAA;AAAA,GACH;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,IAAM,EAAA,YAAA;AAAA,GACR;AACF,CAAC,EAAA;AAMM,MAAM,uBAAuB,sBAAuB,CAAA,OAAA;AAAA,EACzD,uBAAwB,CAAA;AAAA,IACtB,IAAM,EAAA,sBAAA;AAAA,IACN,SAAA,EAAW,MAAM,OAAO,2BAAc,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,gBAAgB,CAAA;AAAA,IACpE,UAAY,EAAA,YAAA;AAAA,GACb,CAAA;AACH;;;;"}

package/dist/routes.esm.js

@@ -0,0 +1,8 @@
+import { createRouteRef } from '@backstage/core-plugin-api';
+
+const rootRouteRef = createRouteRef({
+  id: "vacation-calendar"
+});
+
+export { rootRouteRef };
+//# sourceMappingURL=routes.esm.js.map

package/dist/routes.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"routes.esm.js","sources":["../src/routes.ts"],"sourcesContent":["import { createRouteRef } from '@backstage/core-plugin-api';\n\nexport const rootRouteRef = createRouteRef({\n  id: 'vacation-calendar',\n});\n"],"names":[],"mappings":";;AAEO,MAAM,eAAe,cAAe,CAAA;AAAA,EACzC,EAAI,EAAA,mBAAA;AACN,CAAC;;;;"}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@axis-backstage/plugin-vacation-calendar",
+  "version": "0.3.0",
+  "main": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts",
+    "directory": "_release/package"
+  },
+  "backstage": {
+    "role": "frontend-plugin",
+    "pluginId": "vacation-calendar",
+    "pluginPackages": [
+      "@axis-backstage/plugin-vacation-calendar"
+    ]
+  },
+  "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/catalog-model": "^1.5.0",
+    "@backstage/core-components": "^0.14.8",
+    "@backstage/core-plugin-api": "^1.9.3",
+    "@backstage/errors": "^1.2.4",
+    "@backstage/plugin-catalog-react": "^1.12.1",
+    "@backstage/theme": "^0.5.6",
+    "@date-io/luxon": "3.0.0",
+    "@material-ui/pickers": "^3.3.11",
+    "@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",
+    "interactjs": "^1.10.27",
+    "lodash": "^4.17.21",
+    "luxon": "^3.4.4",
+    "react-calendar-timeline": "^0.28.0",
+    "react-use": "^17.5.0"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@backstage/catalog-client": "^1.6.5",
+    "@backstage/cli": "^0.26.10",
+    "@backstage/core-app-api": "^1.12.6",
+    "@backstage/dev-utils": "^1.0.33",
+    "@backstage/test-utils": "^1.5.6",
+    "@testing-library/jest-dom": "^5.10.1",
+    "@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"
+  },
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/index.esm.js",
+  "directory": "_release/package"
+}